Replace useAppState calls

OffchainLabs · Nov 22, 2024 · f5b2dad · f5b2dad
1 parent ad7b65b
commit f5b2dad
Show file tree

Hide file tree

Showing 10 changed files with 72 additions and 131 deletions.
diff --git a/packages/arb-token-bridge-ui/src/components/TransferPanel/TokenImportDialog.tsx b/packages/arb-token-bridge-ui/src/components/TransferPanel/TokenImportDialog.tsx
@@ -4,7 +4,7 @@ import { useLatest } from 'react-use'
 import { create } from 'zustand'
 
 import { useERC20L1Address } from '../../hooks/useERC20L1Address'
-import { useActions, useAppState } from '../../state'
+import { useActions } from '../../state'
 import {
   erc20DataToErc20BridgeToken,
   fetchErc20Data,
@@ -22,6 +22,8 @@ import { useTransferDisabledDialogStore } from './TransferDisabledDialog'
 import { TokenInfo } from './TokenInfo'
 import { NoteBox } from '../common/NoteBox'
 import { isTeleportEnabledToken } from '../../util/TokenTeleportEnabledUtils'
+import { useBridgeTokensStore } from '../../hooks/useBridgeTokensStore'
+import { useArbTokenBridge } from '../../hooks/useArbTokenBridge'
 
 enum ImportStatus {
   LOADING,
@@ -64,12 +66,11 @@ export function TokenImportDialog({
   tokenAddress
 }: TokenImportDialogProps): JSX.Element {
   const { address: walletAddress } = useAccount()
+
+  const { bridgeTokens } = useBridgeTokensStore()
   const {
-    app: {
-      arbTokenBridge: { bridgeTokens, token },
-      selectedToken
-    }
-  } = useAppState()
+    token: { updateTokenData, add: addToken }
+  } = useArbTokenBridge()
   const [networks] = useNetworks()
   const {
     childChain,
@@ -176,10 +177,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(() => {
@@ -231,47 +232,6 @@ 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) => {
-      setStatus(ImportStatus.ERROR)
-
-      if (ex.name === 'TokenDisabledError') {
-        warningToast('This token is currently paused in the bridge')
-      }
-    })
-  }
-
   function handleTokenImport() {
     if (typeof bridgeTokens === 'undefined') {
       return
@@ -293,9 +253,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')
+          }
+        })
     }
 
     if (isTransferDisabledToken(l1Address, childChain.id)) {

diff --git a/packages/arb-token-bridge-ui/src/components/TransferPanel/TokenRow.tsx b/packages/arb-token-bridge-ui/src/components/TransferPanel/TokenRow.tsx
@@ -33,6 +33,7 @@ import { useNetworksRelationship } from '../../hooks/useNetworksRelationship'
 import { TokenLogoFallback } from './TokenInfo'
 import { useBalanceOnSourceChain } from '../../hooks/useBalanceOnSourceChain'
 import { useSourceChainNativeCurrencyDecimals } from '../../hooks/useSourceChainNativeCurrencyDecimals'
+import { useBridgeTokensStore } from '../../hooks/useBridgeTokensStore'
 
 function tokenListIdsToNames(ids: number[]): string {
   return ids
@@ -238,11 +239,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)
   const nativeCurrencyDecimalsOnSourceChain =

diff --git a/packages/arb-token-bridge-ui/src/components/TransferPanel/TokenSearch.tsx b/packages/arb-token-bridge-ui/src/components/TransferPanel/TokenSearch.tsx
@@ -5,11 +5,10 @@ import { useAccount } from 'wagmi'
 import { AutoSizer, List, ListRowProps } from 'react-virtualized'
 import { twMerge } from 'tailwind-merge'
 
-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,8 @@ import { Switch } from '../common/atoms/Switch'
 import { isTeleportEnabledToken } from '../../util/TokenTeleportEnabledUtils'
 import { useBalances } from '../../hooks/useBalances'
 import { useSetInputAmount } from '../../hooks/TransferPanel/useSetInputAmount'
+import { useArbTokenBridge } from '../../hooks/useArbTokenBridge'
+import { useBridgeTokensStore } from '../../hooks/useBridgeTokensStore'
 
 export const ARB_ONE_NATIVE_USDC_TOKEN = {
   ...ArbOneNativeUSDC,
@@ -65,19 +66,19 @@ export const ARB_SEPOLIA_NATIVE_USDC_TOKEN = {
 
 function TokenListRow({ tokenList }: { tokenList: BridgeTokenList }) {
   const {
-    app: { arbTokenBridge }
-  } = useAppState()
-  const { bridgeTokens, token } = arbTokenBridge
+    token: { removeTokensFromList, addBridgeTokenListToBridge }
+  } = useArbTokenBridge()
+  const { bridgeTokens } = useBridgeTokensStore()
 
   const toggleTokenList = useCallback(
     (bridgeTokenList: BridgeTokenList, isActive: boolean) => {
       if (isActive) {
-        token.removeTokensFromList(bridgeTokenList.id)
+        removeTokensFromList(bridgeTokenList.id)
       } else {
-        addBridgeTokenListToBridge(bridgeTokenList, arbTokenBridge)
+        addBridgeTokenListToBridge(bridgeTokenList)
       }
     },
-    [arbTokenBridge, token]
+    [addBridgeTokenListToBridge, removeTokensFromList]
   )
 
   const isActive = Object.keys(bridgeTokens ?? []).some(address => {
@@ -172,11 +173,10 @@ function TokensPanel({
   onTokenSelected: (token: ERC20BridgeToken | null) => void
 }): JSX.Element {
   const { address: walletAddress } = useAccount()
+  const { bridgeTokens } = useBridgeTokensStore()
   const {
-    app: {
-      arbTokenBridge: { token, bridgeTokens }
-    }
-  } = useAppState()
+    token: { addL2NativeToken, add: addToken }
+  } = useArbTokenBridge()
   const [networks] = useNetworks()
   const { childChain, childChainProvider, parentChain, isDepositMode } =
     useNetworksRelationship(networks)
@@ -386,15 +386,15 @@ function TokensPanel({
 
     try {
       // Try to add the token as an L2-native token
-      token.addL2NativeToken(newToken)
+      addL2NativeToken(newToken)
       isSuccessful = true
     } catch (error) {
       //
     }
 
     try {
       // Try to add the token as a regular bridged token
-      await token.add(newToken)
+      await addToken(newToken)
       isSuccessful = true
     } catch (ex: any) {
       if (ex.name === 'TokenDisabledError') {
@@ -522,11 +522,11 @@ export function TokenSearch({
 }) {
   const { address: walletAddress } = useAccount()
   const { setAmount2 } = useSetInputAmount()
+
+  const { bridgeTokens } = useBridgeTokensStore()
   const {
-    app: {
-      arbTokenBridge: { token, bridgeTokens }
-    }
-  } = useAppState()
+    token: { updateTokenData }
+  } = useArbTokenBridge()
   const {
     app: { setSelectedToken }
   } = useActions()
@@ -624,7 +624,7 @@ export function TokenSearch({
       })
 
       if (data) {
-        token.updateTokenData(_token.address)
+        updateTokenData(_token.address)
         setSelectedToken({
           ...erc20DataToErc20BridgeToken(data),
           l2Address: _token.l2Address

diff --git a/packages/arb-token-bridge-ui/src/components/TransferPanel/TokenSearchUtils.ts b/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 { useBridgeTokensStore } from '../../hooks/useBridgeTokensStore'
 
 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 } = useBridgeTokensStore()
 
   return useMemo(() => {
     const storage: ContractStorage<ERC20BridgeToken> = {}

diff --git a/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanel.tsx b/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanel.tsx
@@ -78,6 +78,7 @@ import { MoveFundsButton } from './MoveFundsButton'
 import { ProjectsListing } from '../common/ProjectsListing'
 import { useAmountBigNumber } from './hooks/useAmountBigNumber'
 import { useSourceChainNativeCurrencyDecimals } from '../../hooks/useSourceChainNativeCurrencyDecimals'
+import { useArbTokenBridge } from '../../hooks/useArbTokenBridge'
 
 const signerUndefinedError = 'Signer is undefined'
 const transferNotAllowedError = 'Transfer not allowed'
@@ -106,13 +107,11 @@ export function TransferPanel() {
     useState(false)
 
   const {
-    app: {
-      connectionState,
-      selectedToken,
-      arbTokenBridge: { token },
-      warningTokens
-    }
+    app: { selectedToken, warningTokens }
   } = useAppState()
+  const {
+    token: { updateTokenData }
+  } = useArbTokenBridge()
   const { address: walletAddress } = useAccount()
   const { switchNetworkAsync } = useSwitchNetworkWithConfig({
     isSwitchingNetworkBeforeTx: true
@@ -209,8 +208,7 @@ export function TransferPanel() {
   }
 
   useImportTokenModal({
-    importTokenModalStatus,
-    connectionState
+    importTokenModalStatus
   })
 
   const isBridgingANewStandardToken = useMemo(() => {
@@ -848,7 +846,7 @@ export function TransferPanel() {
     await Promise.all([updateEthParentBalance(), updateEthChildBalance()])
 
     if (selectedToken) {
-      token.updateTokenData(selectedToken.address)
+      updateTokenData(selectedToken.address)
     }
 
     if (nativeCurrency.isCustom) {

diff --git a/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain/hooks.ts b/packages/arb-token-bridge-ui/src/components/TransferPanel/TransferPanelMain/hooks.ts
@@ -10,6 +10,7 @@ import { useNetworksRelationship } from '../../../hooks/useNetworksRelationship'
 import { TokenType } from '../../../hooks/arbTokenBridge.types'
 import { CommonAddress } from '../../../util/CommonAddressUtils'
 import { isNetwork } from '../../../util/networks'
+import { useArbTokenBridge } from '../../../hooks/useArbTokenBridge'
 
 const commonUSDC = {
   name: 'USD Coin',
@@ -22,11 +23,11 @@ const commonUSDC = {
 export function useUpdateUSDCTokenData() {
   const actions = useActions()
   const {
-    app: {
-      arbTokenBridge: { token },
-      selectedToken
-    }
+    app: { selectedToken }
   } = useAppState()
+  const {
+    token: { updateTokenData }
+  } = useArbTokenBridge()
   const [networks] = useNetworks()
   const { isDepositMode } = useNetworksRelationship(networks)
   const {
@@ -47,7 +48,7 @@ export function useUpdateUSDCTokenData() {
     }
 
     if (isArbOneUSDC && isDestinationChainArbitrumOne) {
-      token.updateTokenData(CommonAddress.Ethereum.USDC)
+      updateTokenData(CommonAddress.Ethereum.USDC)
       actions.app.setSelectedToken({
         ...commonUSDC,
         address: CommonAddress.Ethereum.USDC,
@@ -56,7 +57,7 @@ export function useUpdateUSDCTokenData() {
     }
 
     if (isArbSepoliaUSDC && isDestinationChainArbitrumSepolia) {
-      token.updateTokenData(CommonAddress.Sepolia.USDC)
+      updateTokenData(CommonAddress.Sepolia.USDC)
       actions.app.setSelectedToken({
         ...commonUSDC,
         address: CommonAddress.Sepolia.USDC,
@@ -69,6 +70,6 @@ export function useUpdateUSDCTokenData() {
     isDestinationChainArbitrumOne,
     isDestinationChainArbitrumSepolia,
     selectedToken,
-    token
+    updateTokenData
   ])
 }