diff --git a/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain/SourceNetworkBox.tsx b/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain/SourceNetworkBox.tsx index 26f98fd98e..db050e34bd 100644 --- a/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain/SourceNetworkBox.tsx +++ b/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain/SourceNetworkBox.tsx @@ -58,7 +58,7 @@ export function SourceNetworkBox({ const nativeCurrency = useNativeCurrency({ provider: childChainProvider }) const [{ amount, amount2 }] = useArbQueryParams() const { setAmount, setAmount2 } = useSetInputAmount() - const { maxAmount } = useMaxAmount({ + const { maxAmount, maxAmount2 } = useMaxAmount({ customFeeTokenBalances }) const [sourceNetworkSelectionDialogProps, openSourceNetworkSelectionDialog] = @@ -67,20 +67,33 @@ export function SourceNetworkBox({ const { errorMessages } = useTransferReadiness() const isMaxAmount = amount === AmountQueryParamEnum.MAX + const isMaxAmount2 = amount2 === AmountQueryParamEnum.MAX - // whenever the user changes the `amount` input, it should update the amount in browser query params as well + // covers MAX string from query params useEffect(() => { if (isMaxAmount && typeof maxAmount !== 'undefined') { setAmount(maxAmount) } }, [amount, maxAmount, isMaxAmount, setAmount]) + useEffect(() => { + if (isMaxAmount2 && typeof maxAmount2 !== 'undefined') { + setAmount2(maxAmount2) + } + }, [amount2, maxAmount2, isMaxAmount2, setAmount2]) + const maxButtonOnClick = useCallback(() => { if (typeof maxAmount !== 'undefined') { setAmount(maxAmount) } }, [maxAmount, setAmount]) + const amount2MaxButtonOnClick = useCallback(() => { + if (typeof maxAmount2 !== 'undefined') { + setAmount2(maxAmount2) + } + }, [maxAmount2, setAmount2]) + return ( <> @@ -157,8 +170,7 @@ export function SourceNetworkBox({ isDepositMode && selectedToken && ( {}} + maxButtonOnClick={amount2MaxButtonOnClick} errorMessage={errorMessages?.inputAmount2} value={amount2} onChange={e => setAmount2(e.target.value)} diff --git a/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain/useMaxAmount.ts b/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain/useMaxAmount.ts index a54ecad203..b9c6d9a14d 100644 --- a/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain/useMaxAmount.ts +++ b/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain/useMaxAmount.ts @@ -31,23 +31,7 @@ export function useMaxAmount({ const { estimatedParentChainGasFees, estimatedChildChainGasFees } = useGasSummary() - const maxAmount = useMemo(() => { - if (selectedToken) { - const tokenBalance = isDepositMode - ? selectedTokenBalances.parentBalance - : selectedTokenBalances.childBalance - - if (!tokenBalance) { - return undefined - } - - // For token deposits and withdrawals, we can set the max amount, as gas fees are paid in ETH / custom fee token - return utils.formatUnits( - tokenBalance, - selectedToken?.decimals ?? defaultErc20Decimals - ) - } - + const nativeCurrencyMaxAmount = useMemo(() => { const customFeeTokenParentBalance = customFeeTokenBalances.parentBalance // For custom fee token deposits, we can set the max amount, as the fees will be paid in ETH if ( @@ -61,8 +45,7 @@ export function useMaxAmount({ ) } - // We have already handled token deposits and deposits of the custom fee token - // The remaining cases are ETH deposits, and ETH/custom fee token withdrawals (which can be handled in the same case) + // ETH deposits and ETH/custom fee token withdrawals const nativeCurrencyBalance = isDepositMode ? ethParentBalance : ethChildBalance @@ -97,18 +80,55 @@ export function useMaxAmount({ return nativeCurrencyBalanceFormatted }, [ - nativeCurrency, - ethParentBalance, + customFeeTokenBalances.parentBalance, + estimatedChildChainGasFees, + estimatedParentChainGasFees, ethChildBalance, + ethParentBalance, isDepositMode, + nativeCurrency.decimals, + nativeCurrency.isCustom + ]) + + const maxAmount = useMemo(() => { + if (selectedToken) { + const tokenBalance = isDepositMode + ? selectedTokenBalances.parentBalance + : selectedTokenBalances.childBalance + + if (!tokenBalance) { + return undefined + } + + // For token deposits and withdrawals, we can set the max amount, as gas fees are paid in ETH / custom fee token + return utils.formatUnits( + tokenBalance, + selectedToken?.decimals ?? defaultErc20Decimals + ) + } + + return nativeCurrencyMaxAmount + }, [ selectedToken, - selectedTokenBalances, - estimatedParentChainGasFees, - estimatedChildChainGasFees, - customFeeTokenBalances + isDepositMode, + nativeCurrencyMaxAmount, + selectedTokenBalances.parentBalance, + selectedTokenBalances.childBalance ]) + const maxAmount2 = useMemo(() => { + if (!isDepositMode) { + return undefined + } + if (nativeCurrency.isCustom) { + return undefined + } + + return nativeCurrencyMaxAmount + }, [isDepositMode, nativeCurrency.isCustom, nativeCurrencyMaxAmount]) + return { - maxAmount + maxAmount, + maxAmount2 } }