diff --git a/packages/arb-token-bridge-ui/src/hooks/useArbTokenBridge.ts b/packages/arb-token-bridge-ui/src/hooks/useArbTokenBridge.ts index 955e15a097..626ae620b5 100644 --- a/packages/arb-token-bridge-ui/src/hooks/useArbTokenBridge.ts +++ b/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' @@ -36,6 +36,7 @@ import { isNetwork } from '../util/networks' import { useDestinationAddressStore } from '../components/TransferPanel/AdvancedSettings' import { isValidTeleportChainPair } from '@/token-bridge-sdk/teleport' import { getProviderForChainId } from '@/token-bridge-sdk/utils' +import { useBridgeTokensStore } from './useBridgeTokensStore' export const wait = (ms = 0) => { return new Promise(res => setTimeout(res, ms)) @@ -90,9 +91,7 @@ export const useArbTokenBridge = ( ): ArbTokenBridge => { const { l1, l2 } = params const { address: walletAddress } = useAccount() - const [bridgeTokens, setBridgeTokens] = useState< - ContractStorage | undefined - >(undefined) + const { bridgeTokens, setBridgeTokens } = useBridgeTokensStore() const { destinationAddress } = useDestinationAddressStore() diff --git a/packages/arb-token-bridge-ui/src/hooks/useBridgeTokensStore.ts b/packages/arb-token-bridge-ui/src/hooks/useBridgeTokensStore.ts new file mode 100644 index 0000000000..58a57e7ef2 --- /dev/null +++ b/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 | undefined +type BridgeTokensStore = { + bridgeTokens: BridgeTokens + setBridgeTokens: ( + fn: (prevBridgeTokens: BridgeTokens) => BridgeTokens + ) => void +} +export const useBridgeTokensStore = create(set => ({ + bridgeTokens: undefined, + setBridgeTokens: fn => { + set(state => ({ bridgeTokens: fn(state.bridgeTokens) })) + } +}))