refactor: Add useBridgeTokensStore

packages/arb-token-bridge-ui/src/hooks/useArbTokenBridge.ts

@@ -1,4 +1,4 @@
-import { useCallback, useState, useMemo } from 'react'
+import { useCallback, useMemo } from 'react'
 import { Chain, useAccount } from 'wagmi'
 import { BigNumber } from 'ethers'
 import { Signer } from '@ethersproject/abstract-signer'
@@ -35,6 +35,7 @@ import { isNetwork } from '../util/networks'
 import { isValidTeleportChainPair } from '@/token-bridge-sdk/teleport'
 import { getProviderForChainId } from '@/token-bridge-sdk/utils'
 import { useArbQueryParams } from './useArbQueryParams'
+import { useBridgeTokensStore } from './useBridgeTokensStore'
 
 export const wait = (ms = 0) => {
   return new Promise(res => setTimeout(res, ms))
@@ -89,9 +90,7 @@ export const useArbTokenBridge = (
 ): ArbTokenBridge => {
   const { l1, l2 } = params
   const { address: walletAddress } = useAccount()
-  const [bridgeTokens, setBridgeTokens] = useState<
-    ContractStorage<ERC20BridgeToken> | undefined
-  >(undefined)
+  const { bridgeTokens, setBridgeTokens } = useBridgeTokensStore()
 
   const [{ destinationAddress }] = useArbQueryParams()
 

packages/arb-token-bridge-ui/src/hooks/useBridgeTokensStore.ts

@@ -0,0 +1,16 @@
+import { create } from 'zustand'
+import { ContractStorage, ERC20BridgeToken } from './arbTokenBridge.types'
+
+type BridgeTokens = ContractStorage<ERC20BridgeToken> | undefined
+type BridgeTokensStore = {
+  bridgeTokens: BridgeTokens
+  setBridgeTokens: (
+    fn: (prevBridgeTokens: BridgeTokens) => BridgeTokens
+  ) => void
+}
+export const useBridgeTokensStore = create<BridgeTokensStore>(set => ({
+  bridgeTokens: undefined,
+  setBridgeTokens: fn => {
+    set(state => ({ bridgeTokens: fn(state.bridgeTokens) }))
+  }
+}))