From 54e32b12fa5eae988e469f5c74f5b4ede153c81d Mon Sep 17 00:00:00 2001
From: Christophe <contact@christophedeveaux.com>
Date: Tue, 19 Nov 2024 15:56:44 +0000
Subject: [PATCH] refactor: Add useBridgeTokensStore

---
 .../src/hooks/useArbTokenBridge.ts               |  7 +++----
 .../src/hooks/useBridgeTokensStore.ts            | 16 ++++++++++++++++
 2 files changed, 19 insertions(+), 4 deletions(-)
 create mode 100644 packages/arb-token-bridge-ui/src/hooks/useBridgeTokensStore.ts

diff --git a/packages/arb-token-bridge-ui/src/hooks/useArbTokenBridge.ts b/packages/arb-token-bridge-ui/src/hooks/useArbTokenBridge.ts
index 6d96383d1d..8c83422642 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'
@@ -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()
 
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<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) }))
+  }
+}))