refactor: Remove useArbTokenBridge from store

packages/arb-token-bridge-ui/src/components/App/App.tsx

@@ -9,39 +9,36 @@ import {
   useConnectModal
 } from '@rainbow-me/rainbowkit'
 import merge from 'lodash-es/merge'
-import axios from 'axios'
 import { createOvermind, Overmind } from 'overmind'
 import { Provider } from 'overmind-react'
+import { useInterval } from 'react-use'
 import { useLocalStorage } from '@uidotdev/usehooks'
 
-import { ConnectionState } from '../../util'
-import { TokenBridgeParams } from '../../hooks/useArbTokenBridge'
 import { WelcomeDialog } from './WelcomeDialog'
 import { BlockedDialog } from './BlockedDialog'
 import { AppContextProvider } from './AppContext'
-import { config, useActions, useAppState } from '../../state'
+import { config, useAppState } from '../../state'
 import { MainContent } from '../MainContent/MainContent'
-import { ArbTokenBridgeStoreSync } from '../syncers/ArbTokenBridgeStoreSync'
-import { BalanceUpdater } from '../syncers/BalanceUpdater'
 import { TokenListSyncer } from '../syncers/TokenListSyncer'
 import { Header } from '../common/Header'
 import { HeaderAccountPopover } from '../common/HeaderAccountPopover'
-import { getNetworkName, isNetwork, rpcURLs } from '../../util/networks'
+import { getNetworkName, rpcURLs } from '../../util/networks'
 import {
   ArbQueryParamProvider,
   useArbQueryParams
 } from '../../hooks/useArbQueryParams'
 import { TOS_LOCALSTORAGE_KEY } from '../../constants'
 import { getProps } from '../../util/wagmi/setup'
 import { useAccountIsBlocked } from '../../hooks/useAccountIsBlocked'
-import { useCCTPIsBlocked } from '../../hooks/CCTP/useCCTPIsBlocked'
-import { useNativeCurrency } from '../../hooks/useNativeCurrency'
 import { sanitizeQueryParams, useNetworks } from '../../hooks/useNetworks'
 import { useNetworksRelationship } from '../../hooks/useNetworksRelationship'
 import { HeaderConnectWalletButton } from '../common/HeaderConnectWalletButton'
 import { ProviderName, trackEvent } from '../../util/AnalyticsUtils'
+import { useArbTokenBridge } from '../../hooks/useArbTokenBridge'
 import { onDisconnectHandler } from '../../util/walletConnectUtils'
 import { addressIsSmartContract } from '../../util/AddressUtils'
+import { useCCTPIsBlocked } from '../../hooks/CCTP/useCCTPIsBlocked'
+import { useWarningTokensList } from '../../hooks/useWarningTokensList'
 
 declare global {
   interface Window {
@@ -58,113 +55,6 @@ const rainbowkitTheme = merge(darkTheme(), {
   }
 } as Theme)
 
-const ArbTokenBridgeStoreSyncWrapper = (): JSX.Element | null => {
-  const actions = useActions()
-  const {
-    app: { selectedToken }
-  } = useAppState()
-  const [networks] = useNetworks()
-  const { childChain, childChainProvider, parentChain, parentChainProvider } =
-    useNetworksRelationship(networks)
-  const nativeCurrency = useNativeCurrency({ provider: childChainProvider })
-
-  // We want to be sure this fetch is completed by the time we open the USDC modals
-  useCCTPIsBlocked()
-
-  const [tokenBridgeParams, setTokenBridgeParams] =
-    useState<TokenBridgeParams | null>(null)
-
-  useEffect(() => {
-    if (!nativeCurrency.isCustom) {
-      return
-    }
-
-    const selectedTokenAddress = selectedToken?.address.toLowerCase()
-    const selectedTokenL2Address = selectedToken?.l2Address?.toLowerCase()
-    // This handles a super weird edge case where, for example:
-    //
-    // Your setup is: from Arbitrum One to Mainnet, and you have $ARB selected as the token you want to bridge over.
-    // You then switch your destination network to a network that has $ARB as its native currency.
-    // For this network, $ARB can only be bridged as the native currency, and not as a standard ERC-20, which is why we have to reset the selected token.
-    if (
-      selectedTokenAddress === nativeCurrency.address ||
-      selectedTokenL2Address === nativeCurrency.address
-    ) {
-      actions.app.setSelectedToken(null)
-    }
-  }, [selectedToken, nativeCurrency])
-
-  // Listen for account and network changes
-  useEffect(() => {
-    // Any time one of those changes
-    setTokenBridgeParams(null)
-    actions.app.setConnectionState(ConnectionState.LOADING)
-
-    const {
-      isArbitrum: isConnectedToArbitrum,
-      isOrbitChain: isConnectedToOrbitChain
-    } = isNetwork(networks.sourceChain.id)
-    const isParentChainEthereum = isNetwork(
-      parentChain.id
-    ).isEthereumMainnetOrTestnet
-
-    actions.app.reset(networks.sourceChain.id)
-    actions.app.setChainIds({
-      l1NetworkChainId: parentChain.id,
-      l2NetworkChainId: childChain.id
-    })
-
-    if (
-      (isParentChainEthereum && isConnectedToArbitrum) ||
-      isConnectedToOrbitChain
-    ) {
-      console.info('Withdrawal mode detected:')
-      actions.app.setConnectionState(ConnectionState.L2_CONNECTED)
-    } else {
-      console.info('Deposit mode detected:')
-      actions.app.setConnectionState(ConnectionState.L1_CONNECTED)
-    }
-
-    setTokenBridgeParams({
-      l1: {
-        network: parentChain,
-        provider: parentChainProvider
-      },
-      l2: {
-        network: childChain,
-        provider: childChainProvider
-      }
-    })
-  }, [
-    networks.sourceChain.id,
-    parentChain.id,
-    childChain.id,
-    parentChain,
-    childChain,
-    parentChainProvider,
-    childChainProvider
-  ])
-
-  useEffect(() => {
-    axios
-      .get(
-        'https://raw.githubusercontent.com/OffchainLabs/arb-token-lists/aff40a59608678cfd9b034dd198011c90b65b8b6/src/WarningList/warningTokens.json'
-      )
-      .then(res => {
-        actions.app.setWarningTokens(res.data)
-      })
-      .catch(err => {
-        console.warn('Failed to fetch warning tokens:', err)
-      })
-  }, [])
-
-  if (!tokenBridgeParams) {
-    return null
-  }
-
-  return <ArbTokenBridgeStoreSync tokenBridgeParams={tokenBridgeParams} />
-}
-
 // connector names: https://github.com/wagmi-dev/wagmi/blob/b17c07443e407a695dfe9beced2148923b159315/docs/pages/core/connectors/_meta.en-US.json#L4
 function getWalletName(connectorName: string): ProviderName {
   switch (connectorName) {
@@ -203,6 +93,23 @@ function AppContent() {
   const { isBlocked } = useAccountIsBlocked()
   const [tosAccepted] = useLocalStorage<boolean>(TOS_LOCALSTORAGE_KEY, false)
   const { openConnectModal } = useConnectModal()
+  const {
+    app: { selectedToken }
+  } = useAppState()
+  // We want to be sure this fetch is completed by the time we open the USDC modals
+  useCCTPIsBlocked()
+
+  useWarningTokensList()
+
+  const {
+    token: { updateTokenData }
+  } = useArbTokenBridge()
+
+  useInterval(() => {
+    if (selectedToken) {
+      updateTokenData(selectedToken.address)
+    }
+  }, 10_000)
 
   useEffect(() => {
     if (tosAccepted && !isConnected) {
@@ -280,8 +187,6 @@ function AppContent() {
         <HeaderAccountPopover />
       </Header>
       <TokenListSyncer />
-      <BalanceUpdater />
-      <ArbTokenBridgeStoreSyncWrapper />
       <MainContent />
     </>
   )

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

@@ -4,7 +4,6 @@ import { ChevronDownIcon } from '@heroicons/react/24/outline'
 import { twMerge } from 'tailwind-merge'
 
 import { useAppState } from '../../state'
-import { sanitizeImageSrc } from '../../util'
 import { TokenSearch } from '../TransferPanel/TokenSearch'
 import { sanitizeTokenSymbol } from '../../util/TokenUtils'
 import { useNativeCurrency } from '../../hooks/useNativeCurrency'
@@ -19,40 +18,13 @@ import { Transition } from '../common/Transition'
 
 export function TokenButton(): JSX.Element {
   const {
-    app: {
-      selectedToken,
-      arbTokenBridge: { bridgeTokens },
-      arbTokenBridgeLoaded
-    }
+    app: { selectedToken }
   } = useAppState()
   const [networks] = useNetworks()
   const { childChainProvider } = useNetworksRelationship(networks)
 
   const nativeCurrency = useNativeCurrency({ provider: childChainProvider })
 
-  const tokenLogo = useMemo<string | undefined>(() => {
-    const selectedAddress = selectedToken?.address
-    if (!selectedAddress) {
-      return nativeCurrency.logoUrl
-    }
-    if (!arbTokenBridgeLoaded) {
-      return undefined
-    }
-    if (typeof bridgeTokens === 'undefined') {
-      return undefined
-    }
-    const logo = bridgeTokens[selectedAddress]?.logoURI
-    if (logo) {
-      return sanitizeImageSrc(logo)
-    }
-    return undefined
-  }, [
-    nativeCurrency,
-    bridgeTokens,
-    selectedToken?.address,
-    arbTokenBridgeLoaded
-  ])
-
   const tokenSymbol = useMemo(() => {
     if (!selectedToken) {
       return nativeCurrency.symbol
@@ -75,18 +47,6 @@ export function TokenButton(): JSX.Element {
               onClick={onPopoverButtonClick}
             >
               <div className="flex items-center gap-2">
-                {/* Commenting it out until we update the token image source files to be of better quality */}
-                {/* {tokenLogo && ( 
-                 // SafeImage is used for token logo, we don't know at buildtime
-                where those images will be loaded from // It would throw error
-                if it's loaded from external domains // eslint-disable-next-line
-                @next/next/no-img-element 
-                 <img
-                    src={tokenLogo}
-                    alt="Token logo"
-                    className="h-5 w-5 sm:h-7 sm:w-7"
-                  />
-                )} */}
                 <span className="text-xl font-light sm:text-3xl">
                   {tokenSymbol}
                 </span>

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

@@ -20,6 +20,10 @@ import { useNetworksRelationship } from '../../hooks/useNetworksRelationship'
 import { isWithdrawOnlyToken } from '../../util/WithdrawOnlyUtils'
 import { isTransferDisabledToken } from '../../util/TokenTransferDisabledUtils'
 import { useTransferDisabledDialogStore } from './TransferDisabledDialog'
+import {
+  useArbTokenBridge,
+  useBridgeTokensStore
+} from '../../hooks/useArbTokenBridge'
 import { TokenInfo } from './TokenInfo'
 import { NoteBox } from '../common/NoteBox'
 import { isTeleportEnabledToken } from '../../util/TokenTeleportEnabledUtils'
@@ -65,12 +69,10 @@ export function TokenImportDialog({
   tokenAddress
 }: TokenImportDialogProps): JSX.Element {
   const { address: walletAddress } = useAccount()
+  const { bridgeTokens } = useBridgeTokensStore()
   const {
-    app: {
-      arbTokenBridge: { bridgeTokens, token },
-      selectedToken
-    }
-  } = useAppState()
+    token: { add: addToken, updateTokenData }
+  } = useArbTokenBridge()
   const [networks] = useNetworks()
   const {
     childChain,
@@ -178,10 +180,10 @@ export function TokenImportDialog({
 
   const selectToken = useCallback(
     async (_token: ERC20BridgeToken) => {
-      await token.updateTokenData(_token.address)
+      await updateTokenData(_token.address)
       actions.app.setSelectedToken(_token)
     },
-    [token, actions]
+    [updateTokenData, actions]
   )
 
   useEffect(() => {
@@ -233,39 +235,8 @@ export function TokenImportDialog({
     searchForTokenInLists
   ])
 
-  useEffect(() => {
-    if (!isOpen) {
-      return
-    }
-
-    if (isL1AddressLoading && !l1Address) {
-      return
-    }
-
-    const foundToken = tokensFromUser[l1Address || tokenAddress]
-
-    if (typeof foundToken === 'undefined') {
-      return
-    }
-
-    // Listen for the token to be added to the bridge so we can automatically select it
-    if (foundToken.address !== selectedToken?.address) {
-      onClose(true)
-      selectToken(foundToken)
-    }
-  }, [
-    isL1AddressLoading,
-    tokenAddress,
-    isOpen,
-    l1Address,
-    onClose,
-    selectToken,
-    selectedToken,
-    tokensFromUser
-  ])
-
   async function storeNewToken(newToken: string) {
-    return token.add(newToken).catch((ex: Error) => {
+    return addToken(newToken).catch((ex: Error) => {
       setStatus(ImportStatus.ERROR)
 
       if (ex.name === 'TokenDisabledError') {
@@ -295,9 +266,18 @@ export function TokenImportDialog({
       selectToken(tokenToImport!)
     } else {
       // Token is not added to the bridge, so we add it
-      storeNewToken(l1Address).catch(() => {
-        setStatus(ImportStatus.ERROR)
-      })
+      addToken(l1Address)
+        .then(() => {
+          onClose(true)
+          selectToken(tokenToImport!)
+        })
+        .catch(ex => {
+          setStatus(ImportStatus.ERROR)
+
+          if (ex.name === 'TokenDisabledError') {
+            warningToast('This token is currently paused in the bridge')
+          }
+        })
     }
 
     // do not allow import of withdraw-only tokens at deposit mode

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

@@ -7,7 +7,6 @@ import {
 import { Chain } from 'wagmi'
 
 import { Loader } from '../common/atoms/Loader'
-import { useAppState } from '../../state'
 import {
   listIdsToNames,
   SPECIAL_ARBITRUM_TOKEN_TOKEN_LIST_ID
@@ -30,6 +29,7 @@ import { useAccountType } from '../../hooks/useAccountType'
 import { useNativeCurrency } from '../../hooks/useNativeCurrency'
 import { useNetworks } from '../../hooks/useNetworks'
 import { useNetworksRelationship } from '../../hooks/useNetworksRelationship'
+import { useBridgeTokensStore } from '../../hooks/useArbTokenBridge'
 import { TokenLogoFallback } from './TokenInfo'
 import { useBalanceOnSourceChain } from '../../hooks/useBalanceOnSourceChain'
 
@@ -237,11 +237,7 @@ function ArbitrumTokenBadge() {
 }
 
 function TokenBalance({ token }: { token: ERC20BridgeToken | null }) {
-  const {
-    app: {
-      arbTokenBridge: { bridgeTokens }
-    }
-  } = useAppState()
+  const { bridgeTokens } = useBridgeTokensStore()
   const { isLoading: isLoadingAccountType } = useAccountType()
   const { balance, symbol } = useTokenInfo(token)