feat: max amount for batched transfers (#1841)

OffchainLabs · Aug 16, 2024 · a74999e · a74999e
1 parent 92bc2b2
commit a74999e
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 30 deletions.
diff --git a/...s/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain/SourceNetworkBox.tsx b/...s/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 (
     <>
       <NetworkContainer bgLogoHeight={138} network={networks.sourceChain}>
@@ -157,8 +170,7 @@ export function SourceNetworkBox({
             isDepositMode &&
             selectedToken && (
               <TransferPanelMainInput
-                // eslint-disable-next-line
-                maxButtonOnClick={() => {}}
+                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
@@ -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
   }
 }