refactor: use useSWR in useUpdateUsdcBalances

packages/arb-token-bridge-ui/src/components/TransactionHistory/TransactionHistorySearchBar.tsx

@@ -1,5 +1,5 @@
 import { create } from 'zustand'
-import { isAddress } from 'ethers/lib/utils.js'
+import { isAddress } from 'ethers/lib/utils'
 import { Address, useAccount } from 'wagmi'
 import { useCallback, useEffect } from 'react'
 import { MagnifyingGlassIcon } from '@heroicons/react/24/outline'

packages/arb-token-bridge-ui/src/components/TransferPanel/TokenSearch.tsx

@@ -29,7 +29,7 @@ import { warningToast } from '../common/atoms/Toast'
 import { CommonAddress } from '../../util/CommonAddressUtils'
 import { ArbOneNativeUSDC } from '../../util/L2NativeUtils'
 import { getNetworkName, isNetwork } from '../../util/networks'
-import { useUpdateUSDCBalances } from '../../hooks/CCTP/useUpdateUSDCBalances'
+import { useUpdateUsdcBalances } from '../../hooks/CCTP/useUpdateUsdcBalances'
 import { useAccountType } from '../../hooks/useAccountType'
 import { useNativeCurrency } from '../../hooks/useNativeCurrency'
 import { SearchPanelTable } from '../common/SearchPanel/SearchPanelTable'
@@ -538,7 +538,7 @@ export function TokenSearch({
     parentChainProvider,
     isTeleportMode
   } = useNetworksRelationship(networks)
-  const { updateUSDCBalances } = useUpdateUSDCBalances({ walletAddress })
+  const { updateUsdcBalances } = useUpdateUsdcBalances({ walletAddress })
   const { isLoading: isLoadingAccountType } = useAccountType()
   const { openDialog: openTransferDisabledDialog } =
     useTransferDisabledDialogStore()
@@ -574,7 +574,7 @@ export function TokenSearch({
           return
         }
 
-        await updateUSDCBalances()
+        updateUsdcBalances()
 
         // if an Orbit chain is selected we need to fetch its USDC address
         let childChainUsdcAddress

packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain.tsx

@@ -4,6 +4,7 @@ import { twMerge } from 'tailwind-merge'
 import { utils } from 'ethers'
 import { Chain, useAccount } from 'wagmi'
 import { useMedia } from 'react-use'
+import { isAddress } from 'ethers/lib/utils'
 
 import { useAppState } from '../../state'
 import { getExplorerUrl } from '../../util/networks'
@@ -16,7 +17,7 @@ import {
   isTokenSepoliaUSDC,
   isTokenMainnetUSDC
 } from '../../util/TokenUtils'
-import { useUpdateUSDCBalances } from '../../hooks/CCTP/useUpdateUSDCBalances'
+import { useUpdateUsdcBalances } from '../../hooks/CCTP/useUpdateUsdcBalances'
 import { useNativeCurrency } from '../../hooks/useNativeCurrency'
 import { useNetworks } from '../../hooks/useNetworks'
 import { useNetworksRelationship } from '../../hooks/useNetworksRelationship'
@@ -236,8 +237,12 @@ export function TransferPanelMain() {
 
   const { updateErc20ParentBalances, updateErc20ChildBalances } = useBalances()
 
-  const { updateUSDCBalances } = useUpdateUSDCBalances({
-    walletAddress: destinationAddressOrWalletAddress
+  const { updateUsdcBalances } = useUpdateUsdcBalances({
+    walletAddress:
+      destinationAddressOrWalletAddress &&
+      isAddress(destinationAddressOrWalletAddress)
+        ? destinationAddressOrWalletAddress
+        : undefined
   })
 
   useEffect(() => {
@@ -262,7 +267,7 @@ export function TransferPanelMain() {
         isTokenArbitrumOneNativeUSDC(selectedToken.address) ||
         isTokenArbitrumSepoliaNativeUSDC(selectedToken.address))
     ) {
-      updateUSDCBalances()
+      updateUsdcBalances()
       return
     }
 
@@ -275,7 +280,7 @@ export function TransferPanelMain() {
     updateErc20ParentBalances,
     updateErc20ChildBalances,
     destinationAddressOrWalletAddress,
-    updateUSDCBalances,
+    updateUsdcBalances,
     isTeleportMode
   ])
 

packages/arb-token-bridge-ui/src/components/TransferPanel/hooks/useDestinationAddressError.ts

@@ -1,6 +1,6 @@
 import { useMemo } from 'react'
 import useSWRImmutable from 'swr/immutable'
-import { isAddress } from 'ethers/lib/utils.js'
+import { isAddress } from 'ethers/lib/utils'
 
 import { DestinationAddressErrors } from '../AdvancedSettings'
 import { addressIsDenylisted } from '../../../util/AddressUtils'

packages/arb-token-bridge-ui/src/components/common/AddCustomChain.tsx

@@ -1,5 +1,5 @@
 import { useState } from 'react'
-import { isAddress } from 'ethers/lib/utils.js'
+import { isAddress } from 'ethers/lib/utils'
 import { Popover } from '@headlessui/react'
 import { registerCustomArbitrumNetwork } from '@arbitrum/sdk'
 import { StaticJsonRpcProvider } from '@ethersproject/providers'

packages/arb-token-bridge-ui/src/components/syncers/useBalanceUpdater.tsx

@@ -2,7 +2,8 @@ import { useInterval, useLatest } from 'react-use'
 import { useAccount } from 'wagmi'
 
 import { useAppState } from '../../state'
-import { useUpdateUSDCBalances } from '../../hooks/CCTP/useUpdateUSDCBalances'
+import { useUpdateUsdcBalances } from '../../hooks/CCTP/useUpdateUsdcBalances'
+import { isTokenNativeUSDC } from '../../util/TokenUtils'
 
 // Updates all balances periodically
 export function useBalanceUpdater() {
@@ -12,14 +13,17 @@ export function useBalanceUpdater() {
   const { address: walletAddress } = useAccount()
   const latestTokenBridge = useLatest(arbTokenBridge)
 
-  const { updateUSDCBalances } = useUpdateUSDCBalances({
+  const { updateUsdcBalances } = useUpdateUsdcBalances({
     walletAddress
   })
 
   useInterval(() => {
-    updateUSDCBalances()
-
     if (selectedToken) {
+      if (isTokenNativeUSDC(selectedToken.address)) {
+        updateUsdcBalances()
+        return
+      }
+
       latestTokenBridge?.current?.token?.updateTokenData(selectedToken.address)
     }
   }, 10000)

packages/arb-token-bridge-ui/src/hooks/CCTP/useUpdateUsdcBalances.ts

@@ -0,0 +1,127 @@
+import { useCallback } from 'react'
+import { Address } from 'wagmi'
+import useSWRImmutable from 'swr/immutable'
+
+import { CommonAddress } from '../../util/CommonAddressUtils'
+import { getL2ERC20Address } from '../../util/TokenUtils'
+import { useNetworks } from '../useNetworks'
+import { useNetworksRelationship } from '../useNetworksRelationship'
+import { isNetwork } from '../../util/networks'
+import { useBalances } from '../useBalances'
+import { getProviderForChainId } from '@/token-bridge-sdk/utils'
+
+export async function getChildUsdcAddress({
+  parentChainId,
+  childChainId
+}: {
+  parentChainId: number
+  childChainId: number
+}) {
+  const {
+    isEthereumMainnet: isParentEthereumMainnet,
+    isSepolia: isParentSepolia
+  } = isNetwork(parentChainId)
+
+  if (isParentEthereumMainnet) {
+    return CommonAddress.ArbitrumOne.USDC
+  }
+
+  if (isParentSepolia) {
+    return CommonAddress.ArbitrumSepolia.USDC
+  }
+
+  const parentUsdcAddress = getParentUsdcAddress(parentChainId)
+  const parentProvider = getProviderForChainId(parentChainId)
+  const childProvider = getProviderForChainId(childChainId)
+
+  if (!parentUsdcAddress) {
+    return
+  }
+
+  return getL2ERC20Address({
+    erc20L1Address: parentUsdcAddress,
+    l1Provider: parentProvider,
+    l2Provider: childProvider
+  })
+}
+
+export function getParentUsdcAddress(parentChainId: number) {
+  const {
+    isEthereumMainnet: isParentEthereumMainnet,
+    isSepolia: isParentSepolia,
+    isArbitrumOne: isParentArbitrumOne,
+    isArbitrumSepolia: isParentArbitrumSepolia
+  } = isNetwork(parentChainId)
+
+  if (isParentEthereumMainnet) {
+    return CommonAddress.Ethereum.USDC
+  }
+
+  if (isParentSepolia) {
+    return CommonAddress.Sepolia.USDC
+  }
+
+  if (isParentArbitrumOne) {
+    return CommonAddress.ArbitrumOne.USDC
+  }
+
+  if (isParentArbitrumSepolia) {
+    return CommonAddress.ArbitrumSepolia.USDC
+  }
+}
+
+export function useUpdateUsdcBalances({
+  walletAddress
+}: {
+  walletAddress: Address | undefined
+}) {
+  const [networks] = useNetworks()
+  const { parentChain, childChain } = useNetworksRelationship(networks)
+
+  const {
+    updateErc20ParentBalances: updateErc20ParentBalance,
+    updateErc20ChildBalances: updateErc20ChildBalance
+  } = useBalances({
+    parentWalletAddress: walletAddress,
+    childWalletAddress: walletAddress
+  })
+
+  // we don't have native USDC addresses for Orbit chains, we need to fetch it
+  const { data: childUsdcAddress, isLoading } = useSWRImmutable(
+    [parentChain.id, childChain.id, 'getChildUsdcAddress'],
+    ([parentChainId, childChainId]) =>
+      getChildUsdcAddress({
+        parentChainId,
+        childChainId
+      })
+  )
+
+  const updateUsdcBalances = useCallback(() => {
+    const parentUsdcAddress = getParentUsdcAddress(parentChain.id)
+
+    // USDC is not native for the selected networks, do nothing
+    if (!parentUsdcAddress) {
+      return
+    }
+
+    if (isLoading) {
+      return
+    }
+
+    updateErc20ParentBalance([parentUsdcAddress.toLowerCase()])
+
+    if (childUsdcAddress) {
+      updateErc20ChildBalance([childUsdcAddress.toLowerCase()])
+    }
+  }, [
+    isLoading,
+    childUsdcAddress,
+    parentChain.id,
+    updateErc20ChildBalance,
+    updateErc20ParentBalance
+  ])
+
+  return {
+    updateUsdcBalances
+  }
+}