refactor: use useSWR in useUpdateUsdcBalances

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

@@ -16,7 +16,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,7 +236,7 @@ export function TransferPanelMain() {
 
   const { updateErc20ParentBalances, updateErc20ChildBalances } = useBalances()
 
-  const { updateUSDCBalances } = useUpdateUSDCBalances({
+  const { updateUsdcBalances } = useUpdateUsdcBalances({
     walletAddress: destinationAddressOrWalletAddress
   })
 
@@ -262,7 +262,7 @@ export function TransferPanelMain() {
         isTokenArbitrumOneNativeUSDC(selectedToken.address) ||
         isTokenArbitrumSepoliaNativeUSDC(selectedToken.address))
     ) {
-      updateUSDCBalances()
+      updateUsdcBalances()
       return
     }
 
@@ -275,7 +275,7 @@ export function TransferPanelMain() {
     updateErc20ParentBalances,
     updateErc20ChildBalances,
     destinationAddressOrWalletAddress,
-    updateUSDCBalances,
+    updateUsdcBalances,
     isTeleportMode
   ])
 

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,135 @@
+import { useCallback, useMemo } from 'react'
+import { isAddress } from 'ethers/lib/utils.js'
+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 childChainUsdcAddressFetcher([
+  _parentChainUsdcAddress,
+  parentChainId,
+  childChainId
+]: [Address, number, number]) {
+  const {
+    isEthereumMainnet: isParentEthereumMainnet,
+    isSepolia: isParentSepolia
+  } = isNetwork(parentChainId)
+
+  if (isParentEthereumMainnet) {
+    return CommonAddress.ArbitrumOne.USDC
+  }
+
+  if (isParentSepolia) {
+    return CommonAddress.ArbitrumSepolia.USDC
+  }
+
+  const _parentChainProvider = getProviderForChainId(parentChainId)
+  const _childChainProvider = getProviderForChainId(childChainId)
+
+  return getL2ERC20Address({
+    erc20L1Address: _parentChainUsdcAddress,
+    l1Provider: _parentChainProvider,
+    l2Provider: _childChainProvider
+  })
+}
+
+export function useParentChainUsdcAddress() {
+  const [networks] = useNetworks()
+  const { parentChain } = useNetworksRelationship(networks)
+
+  return useMemo(() => {
+    const {
+      isEthereumMainnet: isParentEthereumMainnet,
+      isSepolia: isParentSepolia,
+      isArbitrumOne: isParentArbitrumOne,
+      isArbitrumSepolia: isParentArbitrumSepolia
+    } = isNetwork(parentChain.id)
+
+    if (isParentEthereumMainnet) {
+      return CommonAddress.Ethereum.USDC
+    }
+
+    if (isParentSepolia) {
+      return CommonAddress.Sepolia.USDC
+    }
+
+    if (isParentArbitrumOne) {
+      return CommonAddress.ArbitrumOne.USDC
+    }
+
+    if (isParentArbitrumSepolia) {
+      return CommonAddress.ArbitrumSepolia.USDC
+    }
+  }, [parentChain.id])
+}
+
+export function useUpdateUsdcBalances({
+  walletAddress
+}: {
+  walletAddress: string | undefined
+}) {
+  const [networks] = useNetworks()
+  const { parentChain, childChain } = useNetworksRelationship(networks)
+
+  const _walletAddress: Address | undefined =
+    walletAddress && isAddress(walletAddress) ? walletAddress : undefined
+  const {
+    updateErc20ParentBalances: updateErc20ParentBalance,
+    updateErc20ChildBalances: updateErc20ChildBalance
+  } = useBalances({
+    parentWalletAddress: _walletAddress,
+    childWalletAddress: _walletAddress
+  })
+
+  const parentChainUsdcAddress = useParentChainUsdcAddress()
+
+  // we don't have native USDC addresses for Orbit chains, we need to fetch it
+  const {
+    data: childChainUsdcAddress,
+    error, // can be unbridged to Orbit chain so no address to be found
+    isLoading
+  } = useSWRImmutable(
+    typeof parentChainUsdcAddress !== 'undefined'
+      ? [
+          parentChainUsdcAddress,
+          parentChain.id,
+          childChain.id,
+          'fetchChildChainUsdcAddress'
+        ]
+      : null,
+    childChainUsdcAddressFetcher
+  )
+
+  const updateUsdcBalances = useCallback(() => {
+    // USDC is not native for the selected networks, do nothing
+    if (!parentChainUsdcAddress) {
+      return
+    }
+
+    if (isLoading) {
+      return
+    }
+
+    updateErc20ParentBalance([parentChainUsdcAddress.toLowerCase()])
+
+    if (childChainUsdcAddress) {
+      updateErc20ChildBalance([childChainUsdcAddress.toLowerCase()])
+    }
+  }, [
+    isLoading,
+    childChainUsdcAddress,
+    parentChainUsdcAddress,
+    updateErc20ChildBalance,
+    updateErc20ParentBalance
+  ])
+
+  return {
+    updateUsdcBalances
+  }
+}