feat: batch transfer improvements (#1878)

OffchainLabs · Sep 10, 2024 · 34e68ef · 34e68ef
1 parent 7241ef5
commit 34e68ef
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 17 deletions.
diff --git a/packages/arb-token-bridge-ui/src/components/TransferPanel/TokenSearch.tsx b/packages/arb-token-bridge-ui/src/components/TransferPanel/TokenSearch.tsx
@@ -18,7 +18,8 @@ import {
   isTokenArbitrumOneNativeUSDC,
   isTokenArbitrumSepoliaNativeUSDC,
   isTokenArbitrumOneUSDCe,
-  getL2ERC20Address
+  getL2ERC20Address,
+  isTokenNativeUSDC
 } from '../../util/TokenUtils'
 import { Button } from '../common/Button'
 import { useTokensFromLists, useTokensFromUser } from './TokenSearchUtils'
@@ -43,6 +44,7 @@ import { useTokenFromSearchParams } from './TransferPanelUtils'
 import { Switch } from '../common/atoms/Switch'
 import { isTeleportEnabledToken } from '../../util/TokenTeleportEnabledUtils'
 import { useBalances } from '../../hooks/useBalances'
+import { useSetInputAmount } from '../../hooks/TransferPanel/useSetInputAmount'
 
 export const ARB_ONE_NATIVE_USDC_TOKEN = {
   ...ArbOneNativeUSDC,
@@ -518,6 +520,7 @@ export function TokenSearch({
   close: () => void
 }) {
   const { address: walletAddress } = useAccount()
+  const { setAmount2 } = useSetInputAmount()
   const {
     app: {
       arbTokenBridge: { token, bridgeTokens }
@@ -555,13 +558,18 @@ export function TokenSearch({
       return
     }
 
+    if (isTokenNativeUSDC(_token.address)) {
+      // not supported
+      setAmount2('')
+    }
+
     try {
       // Native USDC on L2 won't have a corresponding L1 address
-      const isNativeUSDC =
+      const isL2NativeUSDC =
         isTokenArbitrumOneNativeUSDC(_token.address) ||
         isTokenArbitrumSepoliaNativeUSDC(_token.address)
 
-      if (isNativeUSDC) {
+      if (isL2NativeUSDC) {
         if (isLoadingAccountType) {
           return
         }

diff --git a/...-token-bridge-ui/src/components/TransferPanel/TransferPanelMain/DestinationNetworkBox.tsx b/...-token-bridge-ui/src/components/TransferPanel/TransferPanelMain/DestinationNetworkBox.tsx
@@ -26,6 +26,22 @@ import {
   NetworkSelectionContainer
 } from '../../common/NetworkSelectionContainer'
 import { useNativeCurrencyBalances } from './useNativeCurrencyBalances'
+import { useIsBatchTransferSupported } from '../../../hooks/TransferPanel/useIsBatchTransferSupported'
+import { useArbQueryParams } from '../../../hooks/useArbQueryParams'
+
+function NativeCurrencyDestinationBalance({ prefix }: { prefix?: string }) {
+  const nativeCurrencyBalances = useNativeCurrencyBalances()
+  const [networks] = useNetworks()
+  const { isDepositMode } = useNetworksRelationship(networks)
+
+  return (
+    <ETHBalance
+      balance={nativeCurrencyBalances.destinationBalance}
+      on={isDepositMode ? NetworkType.childChain : NetworkType.parentChain}
+      prefix={prefix}
+    />
+  )
+}
 
 function DestinationNetworkBalance({
   showUsdcSpecificInfo
@@ -40,8 +56,7 @@ function DestinationNetworkBalance({
     useNetworksRelationship(networks)
   const { isArbitrumOne } = isNetwork(childChain.id)
 
-  const { ethParentBalance, ethChildBalance, erc20ChildBalances } =
-    useBalances()
+  const { erc20ChildBalances } = useBalances()
   const nativeCurrencyBalances = useNativeCurrencyBalances()
   const selectedTokenBalances = useSelectedTokenBalances()
 
@@ -101,13 +116,7 @@ function DestinationNetworkBalance({
     )
   }
 
-  return (
-    <ETHBalance
-      balance={nativeCurrencyBalances.destinationBalance}
-      on={isDepositMode ? NetworkType.childChain : NetworkType.parentChain}
-      prefix="Balance: "
-    />
-  )
+  return <NativeCurrencyDestinationBalance prefix="Balance: " />
 }
 
 export function DestinationNetworkBox({
@@ -118,6 +127,8 @@ export function DestinationNetworkBox({
   const { address: walletAddress } = useAccount()
   const [networks] = useNetworks()
   const { destinationAddress } = useDestinationAddressStore()
+  const [{ amount2 }] = useArbQueryParams()
+  const isBatchTransferSupported = useIsBatchTransferSupported()
   const destinationAddressOrWalletAddress = destinationAddress || walletAddress
   const [
     destinationNetworkSelectionDialogProps,
@@ -138,9 +149,14 @@ export function DestinationNetworkBox({
           <BalancesContainer>
             {destinationAddressOrWalletAddress &&
               utils.isAddress(destinationAddressOrWalletAddress) && (
-                <DestinationNetworkBalance
-                  showUsdcSpecificInfo={showUsdcSpecificInfo}
-                />
+                <>
+                  <DestinationNetworkBalance
+                    showUsdcSpecificInfo={showUsdcSpecificInfo}
+                  />
+                  {isBatchTransferSupported && Number(amount2) > 0 && (
+                    <NativeCurrencyDestinationBalance />
+                  )}
+                </>
               )}
           </BalancesContainer>
         </NetworkListboxPlusBalancesContainer>

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
@@ -97,6 +97,12 @@ export function SourceNetworkBox({
     }
   }, [amount2, maxAmount2, isMaxAmount2, setAmount2])
 
+  useEffect(() => {
+    if (isBatchTransferSupported && Number(amount2) > 0) {
+      setIsAmount2InputVisible(true)
+    }
+  }, [isBatchTransferSupported, amount2])
+
   const maxButtonOnClick = useCallback(() => {
     if (typeof maxAmount !== 'undefined') {
       setAmount(maxAmount)
@@ -172,8 +178,6 @@ export function SourceNetworkBox({
               />
               <p className="mt-1 text-xs font-light text-white">
                 You can transfer ETH in the same transaction if you wish to.
-                This is the approximate amount you will receive. The final
-                amount depends on actual gas usage.
               </p>
             </>
           )}

diff --git a/packages/arb-token-bridge-ui/src/hooks/TransferPanel/useIsBatchTransferSupported.ts b/packages/arb-token-bridge-ui/src/hooks/TransferPanel/useIsBatchTransferSupported.ts
@@ -1,5 +1,6 @@
 import { useAppState } from '../../state'
 import { isExperimentalFeatureEnabled } from '../../util'
+import { isTokenNativeUSDC } from '../../util/TokenUtils'
 import { useNativeCurrency } from '../useNativeCurrency'
 import { useNetworks } from '../useNetworks'
 import { useNetworksRelationship } from '../useNetworksRelationship'
@@ -22,6 +23,9 @@ export const useIsBatchTransferSupported = () => {
   if (!isDepositMode) {
     return false
   }
+  if (isTokenNativeUSDC(selectedToken.address)) {
+    return false
+  }
   // TODO: teleport is disabled for now but it needs to be looked into more to check whether it is or can be supported
   if (isTeleportMode) {
     return false