diff --git a/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelSummary.tsx b/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelSummary.tsx index 1c356c664b..cca1569c09 100644 --- a/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelSummary.tsx +++ b/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelSummary.tsx @@ -253,7 +253,7 @@ export function TransferPanelSummary({ token }: TransferPanelSummaryProps) { {isBatchTransferSupported && Number(amount2) > 0 && ( {' '} - + {amount2} {childChainNativeCurrency.symbol} + and {amount2} {childChainNativeCurrency.symbol} )} diff --git a/packages/arb-token-bridge-ui/src/components/TransferPanel/useTransferReadiness.ts b/packages/arb-token-bridge-ui/src/components/TransferPanel/useTransferReadiness.ts index e769284db0..ad61553ad2 100644 --- a/packages/arb-token-bridge-ui/src/components/TransferPanel/useTransferReadiness.ts +++ b/packages/arb-token-bridge-ui/src/components/TransferPanel/useTransferReadiness.ts @@ -356,13 +356,26 @@ export function useTransferReadiness(): UseTransferReadinessResult { } // Check amount against custom fee token balance - if (Number(amount) > customFeeTokenBalanceFloat) { + if ( + Number(amount) > customFeeTokenBalanceFloat || + (sendsAmount2 && notEnoughAmount2) + ) { return notReady({ errorMessages: { - inputAmount1: getInsufficientFundsErrorMessage({ - asset: nativeCurrency.symbol, - chain: networks.sourceChain.name - }) + inputAmount1: + Number(amount) > customFeeTokenBalanceFloat + ? getInsufficientFundsErrorMessage({ + asset: nativeCurrency.symbol, + chain: networks.sourceChain.name + }) + : undefined, + inputAmount2: + sendsAmount2 && notEnoughAmount2 + ? getInsufficientFundsErrorMessage({ + asset: nativeCurrency.symbol, + chain: networks.sourceChain.name + }) + : undefined } }) } @@ -410,29 +423,55 @@ export function useTransferReadiness(): UseTransferReadinessResult { } // We have to check if there's enough ETH to cover L1 gas - if (estimatedL1GasFees > ethBalanceFloat) { + if ( + estimatedL1GasFees > ethBalanceFloat || + (sendsAmount2 && notEnoughAmount2) + ) { return notReady({ errorMessages: { - inputAmount1: getInsufficientFundsForGasFeesErrorMessage({ - asset: ether.symbol, - chain: networks.sourceChain.name, - balance: formatAmount(ethBalanceFloat), - requiredBalance: formatAmount(estimatedL1GasFees) - }) + inputAmount1: + estimatedL1GasFees > ethBalanceFloat + ? getInsufficientFundsForGasFeesErrorMessage({ + asset: ether.symbol, + chain: networks.sourceChain.name, + balance: formatAmount(ethBalanceFloat), + requiredBalance: formatAmount(estimatedL1GasFees) + }) + : undefined, + inputAmount2: + sendsAmount2 && notEnoughAmount2 + ? getInsufficientFundsErrorMessage({ + asset: nativeCurrency.symbol, + chain: networks.sourceChain.name + }) + : undefined } }) } // We have to check if there's enough of the custom fee token to cover L2 gas - if (estimatedL2GasFees > customFeeTokenL1BalanceFloat) { + if ( + estimatedL2GasFees > customFeeTokenL1BalanceFloat || + (sendsAmount2 && notEnoughAmount2) + ) { return notReady({ errorMessages: { - inputAmount1: getInsufficientFundsForGasFeesErrorMessage({ - asset: nativeCurrency.symbol, - chain: networks.sourceChain.name, - balance: formatAmount(customFeeTokenL1BalanceFloat), - requiredBalance: formatAmount(estimatedL2GasFees) - }) + inputAmount1: + estimatedL2GasFees > customFeeTokenL1BalanceFloat + ? getInsufficientFundsForGasFeesErrorMessage({ + asset: nativeCurrency.symbol, + chain: networks.sourceChain.name, + balance: formatAmount(customFeeTokenL1BalanceFloat), + requiredBalance: formatAmount(estimatedL2GasFees) + }) + : undefined, + inputAmount2: + sendsAmount2 && notEnoughAmount2 + ? getInsufficientFundsErrorMessage({ + asset: nativeCurrency.symbol, + chain: networks.sourceChain.name + }) + : undefined } }) }