refactor: Remove useArbTokenBridge from store

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

@@ -12,17 +12,14 @@ import merge from 'lodash-es/merge'
 import axios from 'axios'
 import { createOvermind, Overmind } from 'overmind'
 import { Provider } from 'overmind-react'
-import { useLocalStorage } from 'react-use'
+import { useInterval, useLocalStorage } from 'react-use'
 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 { Alert } from '../common/Alert'
 import { MainContent } from '../MainContent/MainContent'
-import { ArbTokenBridgeStoreSync } from '../syncers/ArbTokenBridgeStoreSync'
-import { BalanceUpdater } from '../syncers/BalanceUpdater'
 import { TokenListSyncer } from '../syncers/TokenListSyncer'
 import { useDialog } from '../common/Dialog'
 import {
@@ -47,6 +44,7 @@ import { useNetworksRelationship } from '../../hooks/useNetworksRelationship'
 import { HeaderConnectWalletButton } from '../common/HeaderConnectWalletButton'
 import { AppConnectionFallbackContainer } from './AppConnectionFallbackContainer'
 import { ProviderName, trackEvent } from '../../util/AnalyticsUtils'
+import { useArbTokenBridge } from '../../hooks/useArbTokenBridge'
 
 declare global {
   interface Window {
@@ -66,8 +64,17 @@ const rainbowkitTheme = merge(darkTheme(), {
 const AppContent = (): JSX.Element => {
   const [{ sourceChain }] = useNetworks()
   const {
-    app: { connectionState }
+    app: { connectionState, selectedToken }
   } = useAppState()
+  const {
+    token: { updateTokenData }
+  } = useArbTokenBridge()
+
+  useInterval(() => {
+    if (selectedToken) {
+      updateTokenData(selectedToken.address)
+    }
+  }, 10_000)
 
   const headerOverridesProps: HeaderOverridesProps = useMemo(() => {
     const { isTestnet, isGoerli } = isNetwork(sourceChain.id ?? 0)
@@ -110,7 +117,6 @@ const AppContent = (): JSX.Element => {
       </HeaderContent>
 
       <TokenListSyncer />
-      <BalanceUpdater />
       <Notifications />
       <MainContent />
     </>
@@ -131,9 +137,6 @@ const Injector = ({ children }: { children: React.ReactNode }): JSX.Element => {
   // 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
@@ -152,12 +155,11 @@ const Injector = ({ children }: { children: React.ReactNode }): JSX.Element => {
     ) {
       actions.app.setSelectedToken(null)
     }
-  }, [selectedToken, nativeCurrency])
+  }, [selectedToken, nativeCurrency, actions.app])
 
   // Listen for account and network changes
   useEffect(() => {
     // Any time one of those changes
-    setTokenBridgeParams(null)
     actions.app.setConnectionState(ConnectionState.LOADING)
 
     if (!isConnected) {
@@ -173,10 +175,6 @@ const Injector = ({ children }: { children: React.ReactNode }): JSX.Element => {
     ).isEthereumMainnetOrTestnet
 
     actions.app.reset(networks.sourceChain.id)
-    actions.app.setChainIds({
-      l1NetworkChainId: parentChain.id,
-      l2NetworkChainId: childChain.id
-    })
 
     if (
       (isParentChainEthereum && isConnectedToArbitrum) ||
@@ -188,17 +186,6 @@ const Injector = ({ children }: { children: React.ReactNode }): JSX.Element => {
       console.info('Deposit mode detected:')
       actions.app.setConnectionState(ConnectionState.L1_CONNECTED)
     }
-
-    setTokenBridgeParams({
-      l1: {
-        network: parentChain,
-        provider: parentChainProvider
-      },
-      l2: {
-        network: childChain,
-        provider: childChainProvider
-      }
-    })
   }, [
     isConnected,
     address,
@@ -208,7 +195,8 @@ const Injector = ({ children }: { children: React.ReactNode }): JSX.Element => {
     parentChain,
     childChain,
     parentChainProvider,
-    childChainProvider
+    childChainProvider,
+    actions.app
   ])
 
   useEffect(() => {
@@ -222,7 +210,7 @@ const Injector = ({ children }: { children: React.ReactNode }): JSX.Element => {
       .catch(err => {
         console.warn('Failed to fetch warning tokens:', err)
       })
-  }, [])
+  }, [actions.app])
 
   if (address && isBlocked) {
     return (
@@ -238,14 +226,7 @@ const Injector = ({ children }: { children: React.ReactNode }): JSX.Element => {
     )
   }
 
-  return (
-    <>
-      {tokenBridgeParams && (
-        <ArbTokenBridgeStoreSync tokenBridgeParams={tokenBridgeParams} />
-      )}
-      {children}
-    </>
-  )
+  return <>{children}</>
 }
 
 // connector names: https://github.com/wagmi-dev/wagmi/blob/b17c07443e407a695dfe9beced2148923b159315/docs/pages/core/connectors/_meta.en-US.json#L4

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

@@ -9,16 +9,14 @@ import { sanitizeTokenSymbol } from '../../util/TokenUtils'
 import { useNativeCurrency } from '../../hooks/useNativeCurrency'
 import { useNetworks } from '../../hooks/useNetworks'
 import { useNetworksRelationship } from '../../hooks/useNetworksRelationship'
+import { useArbTokenBridge } from '../../hooks/useArbTokenBridge'
 
 export function TokenButton(): JSX.Element {
   const {
-    app: {
-      selectedToken,
-      arbTokenBridge: { bridgeTokens },
-      arbTokenBridgeLoaded
-    }
+    app: { selectedToken }
   } = useAppState()
   const [networks] = useNetworks()
+  const { bridgeTokens } = useArbTokenBridge()
   const { childChain, childChainProvider, parentChain, isDepositMode } =
     useNetworksRelationship(networks)
 
@@ -29,9 +27,7 @@ export function TokenButton(): JSX.Element {
     if (!selectedAddress) {
       return nativeCurrency.logoUrl
     }
-    if (!arbTokenBridgeLoaded) {
-      return undefined
-    }
+
     if (typeof bridgeTokens === 'undefined') {
       return undefined
     }
@@ -40,12 +36,7 @@ export function TokenButton(): JSX.Element {
       return sanitizeImageSrc(logo)
     }
     return undefined
-  }, [
-    nativeCurrency,
-    bridgeTokens,
-    selectedToken?.address,
-    arbTokenBridgeLoaded
-  ])
+  }, [nativeCurrency, bridgeTokens, selectedToken?.address])
   const chainId = isDepositMode ? parentChain.id : childChain.id
 
   const tokenSymbol = useMemo(() => {

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

@@ -29,6 +29,7 @@ import { useNetworksRelationship } from '../../hooks/useNetworksRelationship'
 import { isWithdrawOnlyToken } from '../../util/WithdrawOnlyUtils'
 import { isTransferDisabledToken } from '../../util/TokenTransferDisabledUtils'
 import { useTransferDisabledDialogStore } from './TransferDisabledDialog'
+import { useArbTokenBridge } from '../../hooks/useArbTokenBridge'
 
 enum ImportStatus {
   LOADING,
@@ -72,11 +73,9 @@ export function TokenImportDialog({
 }: TokenImportDialogProps): JSX.Element {
   const { address: walletAddress } = useAccount()
   const {
-    app: {
-      arbTokenBridge: { bridgeTokens, token },
-      selectedToken
-    }
+    app: { selectedToken }
   } = useAppState()
+  const { bridgeTokens, token } = useArbTokenBridge()
   const [networks] = useNetworks()
   const {
     childChain,

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

@@ -9,7 +9,6 @@ import { constants } from 'ethers'
 import { Chain, useAccount } from 'wagmi'
 
 import { Loader } from '../common/atoms/Loader'
-import { useAppState } from '../../state'
 import {
   listIdsToNames,
   SPECIAL_ARBITRUM_TOKEN_TOKEN_LIST_ID
@@ -33,6 +32,7 @@ import { useAccountType } from '../../hooks/useAccountType'
 import { useNativeCurrency } from '../../hooks/useNativeCurrency'
 import { useNetworks } from '../../hooks/useNetworks'
 import { useNetworksRelationship } from '../../hooks/useNetworksRelationship'
+import { useArbTokenBridge } from '../../hooks/useArbTokenBridge'
 
 function tokenListIdsToNames(ids: number[]): string {
   return ids
@@ -82,11 +82,7 @@ export function TokenRow({
   token
 }: TokenRowProps): JSX.Element {
   const { address: walletAddress } = useAccount()
-  const {
-    app: {
-      arbTokenBridge: { bridgeTokens }
-    }
-  } = useAppState()
+  const { bridgeTokens } = useArbTokenBridge()
   const { isLoading: isLoadingAccountType } = useAccountType()
   const [networks] = useNetworks()
   const {

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

@@ -11,11 +11,10 @@ import Image from 'next/image'
 import { useAccount } from 'wagmi'
 
 import { Loader } from '../common/atoms/Loader'
-import { useActions, useAppState } from '../../state'
+import { useActions } from '../../state'
 import {
   BRIDGE_TOKEN_LISTS,
   BridgeTokenList,
-  addBridgeTokenListToBridge,
   SPECIAL_ARBITRUM_TOKEN_TOKEN_LIST_ID
 } from '../../util/TokenListUtils'
 import {
@@ -44,6 +43,10 @@ import { useTransferDisabledDialogStore } from './TransferDisabledDialog'
 import { isWithdrawOnlyToken } from '../../util/WithdrawOnlyUtils'
 import { isTransferDisabledToken } from '../../util/TokenTransferDisabledUtils'
 import { useTokenFromSearchParams } from './TransferPanelUtils'
+import {
+  useArbTokenBridge,
+  useBridgeTokensStore
+} from '../../hooks/useArbTokenBridge'
 
 enum Panel {
   TOKENS,
@@ -70,11 +73,11 @@ const ARB_SEPOLIA_NATIVE_USDC_TOKEN = {
 
 function TokenListsPanel() {
   const {
-    app: { arbTokenBridge }
-  } = useAppState()
+    token: { removeTokensFromList, addBridgeTokenListToBridge }
+  } = useArbTokenBridge()
+  const { bridgeTokens } = useBridgeTokensStore()
   const [networks] = useNetworks()
   const { childChain } = useNetworksRelationship(networks)
-  const { bridgeTokens, token } = arbTokenBridge
 
   const listsToShow: BridgeTokenList[] = useMemo(() => {
     return BRIDGE_TOKEN_LISTS.filter(tokenList => {
@@ -96,9 +99,9 @@ function TokenListsPanel() {
     isActive: boolean
   ) => {
     if (isActive) {
-      token.removeTokensFromList(bridgeTokenList.id)
+      removeTokensFromList(bridgeTokenList.id)
     } else {
-      addBridgeTokenListToBridge(bridgeTokenList, arbTokenBridge)
+      addBridgeTokenListToBridge(bridgeTokenList)
     }
   }
 
@@ -153,11 +156,7 @@ function TokensPanel({
   onTokenSelected: (token: ERC20BridgeToken | null) => void
 }): JSX.Element {
   const { address: walletAddress } = useAccount()
-  const {
-    app: {
-      arbTokenBridge: { token, bridgeTokens }
-    }
-  } = useAppState()
+  const { token, bridgeTokens } = useArbTokenBridge()
   const [networks] = useNetworks()
   const { childChain, childChainProvider, parentChainProvider, isDepositMode } =
     useNetworksRelationship(networks)
@@ -472,11 +471,7 @@ function TokensPanel({
 
 export function TokenSearch({ close }: { close: () => void }) {
   const { address: walletAddress } = useAccount()
-  const {
-    app: {
-      arbTokenBridge: { token, bridgeTokens }
-    }
-  } = useAppState()
+  const { token, bridgeTokens } = useArbTokenBridge()
   const {
     app: { setSelectedToken }
   } = useActions()

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

@@ -1,5 +1,4 @@
 import { useMemo } from 'react'
-import { useAppState } from '../../state'
 import {
   ContractStorage,
   ERC20BridgeToken,
@@ -9,6 +8,7 @@ import { useTokenLists } from '../../hooks/useTokenLists'
 import { TokenListWithId } from '../../util/TokenListUtils'
 import { useNetworksRelationship } from '../../hooks/useNetworksRelationship'
 import { useNetworks } from '../../hooks/useNetworks'
+import { useArbTokenBridge } from '../../hooks/useArbTokenBridge'
 
 export function useTokensFromLists(): ContractStorage<ERC20BridgeToken> {
   const [networks] = useNetworks()
@@ -25,11 +25,7 @@ export function useTokensFromLists(): ContractStorage<ERC20BridgeToken> {
 }
 
 export function useTokensFromUser(): ContractStorage<ERC20BridgeToken> {
-  const {
-    app: {
-      arbTokenBridge: { bridgeTokens }
-    }
-  } = useAppState()
+  const { bridgeTokens } = useArbTokenBridge()
 
   return useMemo(() => {
     const storage: ContractStorage<ERC20BridgeToken> = {}

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

@@ -70,6 +70,7 @@ import { getBridgeUiConfigForChain } from '../../util/bridgeUiConfig'
 import { useNetworks } from '../../hooks/useNetworks'
 import { useNetworksRelationship } from '../../hooks/useNetworksRelationship'
 import { CctpTransferStarter } from '@/token-bridge-sdk/CctpTransferStarter'
+import { useArbTokenBridge } from '../../hooks/useArbTokenBridge'
 
 const isAllowedL2 = async ({
   l1TokenAddress,
@@ -118,14 +119,9 @@ export function TransferPanel() {
   const [showSCWalletTooltip, setShowSCWalletTooltip] = useState(false)
 
   const {
-    app: {
-      connectionState,
-      selectedToken,
-      arbTokenBridgeLoaded,
-      arbTokenBridge: { eth, token },
-      warningTokens
-    }
+    app: { connectionState, selectedToken, warningTokens }
   } = useAppState()
+  const { eth, token } = useArbTokenBridge()
   const { layout } = useAppContextState()
   const { isTransferring } = layout
   const { address: walletAddress, isConnected } = useAccount()

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

@@ -74,6 +74,7 @@ import {
 } from './TransferDisabledDialog'
 import { getBridgeUiConfigForChain } from '../../util/bridgeUiConfig'
 import { useIsTestnetMode } from '../../hooks/useIsTestnetMode'
+import { useArbTokenBridge } from '../../hooks/useArbTokenBridge'
 
 enum NetworkType {
   l1 = 'l1',
@@ -361,8 +362,8 @@ export function TransferPanelMain({
 
   const { app } = useAppState()
   const { address: walletAddress } = useAccount()
-  const { arbTokenBridge, selectedToken } = app
-  const { token } = arbTokenBridge
+  const { selectedToken } = app
+  const { token } = useArbTokenBridge()
 
   const { destinationAddress, setDestinationAddress } =
     useDestinationAddressStore()
@@ -853,6 +854,7 @@ export function TransferPanelMain({
     networks.destinationChain,
     isTestnetMode,
     setNetworks,
+    actions.app,
     switchNetworksOnTransferPanel,
     openOneNovaTransferDialog
   ])