refactor: get rid of manual bookkeeping of wallet chain id and rely more on wagmi

Author: 0xAlunara

apps/main/src/dao/store/createAppSlice.ts

@@ -41,7 +41,6 @@ const createAppSlice = (set: SetState<State>, get: GetState<State>): AppSlice =>
     const isNetworkSwitched = prevApi?.chainId != api.chainId
 
     log('Hydrating DAO', api?.chainId, {
-      wallet: wallet?.chainId ?? '',
       isNetworkSwitched,
     })
 

apps/main/src/dex/store/createGlobalSlice.ts

@@ -62,15 +62,14 @@ const createGlobalSlice = (set: SetState<State>, get: GetState<State>): GlobalSl
       }),
     )
   },
-  hydrate: async (curveApi, prevCurveApi, wallet) => {
+  hydrate: async (curveApi, prevCurveApi) => {
     if (!curveApi) return
 
     const state = get()
     const isNetworkSwitched = prevCurveApi?.chainId !== curveApi.chainId
     const isUserSwitched = prevCurveApi?.signerAddress !== curveApi.signerAddress
     const { chainId } = curveApi
     log('Hydrating DEX', curveApi?.chainId, {
-      wallet: wallet?.chainId ?? '',
       isNetworkSwitched,
       isUserSwitched,
       hasRPC: !curveApi.isNoRPC,

apps/main/src/lend/store/createAppSlice.ts

@@ -40,7 +40,7 @@ const createAppSlice = (set: SetState<State>, get: GetState<State>): AppSlice =>
       }),
     )
   },
-  hydrate: async (api, prevApi, wallet) => {
+  hydrate: async (api, prevApi) => {
     get().updateGlobalStoreByKey('hydratedChainId', null)
     if (!api) return
 
@@ -49,7 +49,6 @@ const createAppSlice = (set: SetState<State>, get: GetState<State>): AppSlice =>
     const state = get()
 
     log('Hydrating Lend', api.chainId, {
-      wallet: wallet?.chainId ?? '',
       chainId: [prevApi?.chainId, api.chainId],
       signerAddress: [prevApi?.signerAddress, api.signerAddress],
     })

apps/main/src/loan/store/createAppSlice.ts

@@ -41,15 +41,14 @@ const createAppSlice = (set: SetState<State>, get: GetState<State>): AppSlice =>
     )
   },
 
-  hydrate: async (curveApi, prevCurveApi, wallet) => {
+  hydrate: async (curveApi, prevCurveApi) => {
     if (!curveApi) return
 
     const { loans, collaterals } = get()
 
     const isNetworkSwitched = !!prevCurveApi?.chainId && prevCurveApi.chainId !== curveApi.chainId
     const isUserSwitched = !!prevCurveApi?.signerAddress && prevCurveApi.signerAddress !== curveApi.signerAddress
     log('Hydrate crvUSD', curveApi?.chainId, {
-      wallet: wallet?.chainId ?? '',
       isNetworkSwitched,
       isUserSwitched,
     })

packages/curve-ui-kit/src/features/connect-wallet/lib/ConnectionContext.tsx

@@ -45,11 +45,10 @@ export function useWagmiWallet() {
         client?.transport.request && {
           provider: { request: client.transport.request },
           account: { address }, // the ensName is set later when detected
-          chainId: client.chain.id,
         }
       hackSignerInCypress(wallet)
       return { wallet, provider: wallet ? new BrowserProvider(wallet.provider) : null }
-    }, [address, client?.chain.id, client?.transport.request]) ?? null),
+    }, [address, client?.transport.request]) ?? null),
   }
 }
 

packages/curve-ui-kit/src/features/connect-wallet/lib/ConnectionProvider.tsx

@@ -1,5 +1,5 @@
 import { type ReactNode, useEffect, useState } from 'react'
-import { useSwitchChain } from 'wagmi'
+import { useChainId, useSwitchChain } from 'wagmi'
 import type { NetworkDef } from '@ui/utils'
 import { ConnectionContext, useWagmiWallet } from '@ui-kit/features/connect-wallet/lib/ConnectionContext'
 import { ConnectState } from '@ui-kit/features/connect-wallet/lib/types'
@@ -27,6 +27,7 @@ export const ConnectionProvider = <TChainId extends number, NetworkConfig extend
   children: ReactNode
 }) => {
   const [connectState, setConnectState] = useState<ConnectState>(LOADING)
+  const chainId = useChainId()
   const { switchChainAsync } = useSwitchChain()
   const { wallet, provider, isReconnecting } = useWagmiWallet()
   const isFocused = useIsDocumentFocused()
@@ -38,12 +39,12 @@ export const ConnectionProvider = <TChainId extends number, NetworkConfig extend
      * This is separate from the rest of initApp to avoid unnecessary reinitialization, as isFocused can change frequently.
      */
     async function updateWalletChain() {
-      const chainId = Number(network.chainId) as TChainId
-      if (wallet && wallet?.chainId !== chainId) {
+      const networkChainId = Number(network.chainId) as TChainId
+      if (networkChainId !== chainId) {
         setConnectState(LOADING)
-        if (isFocused && !(await switchChainAsync({ chainId: chainId as WagmiChainId }))) {
+        if (isFocused && !(await switchChainAsync({ chainId: networkChainId as WagmiChainId }))) {
           setConnectState(FAILURE)
-          onChainUnavailable([chainId, wallet?.chainId as TChainId])
+          onChainUnavailable([networkChainId, chainId as TChainId])
         }
         return // hook is called again after since it depends on walletChainId
       }
@@ -52,7 +53,7 @@ export const ConnectionProvider = <TChainId extends number, NetworkConfig extend
       console.error('Error updating wallet chain', e)
       setConnectState(FAILURE)
     })
-  }, [isFocused, network.chainId, onChainUnavailable, switchChainAsync, wallet])
+  }, [isFocused, chainId, network.chainId, onChainUnavailable, switchChainAsync, wallet])
 
   useEffect(() => {
     if (isReconnecting) return // wait for wagmi to auto-reconnect
@@ -63,14 +64,14 @@ export const ConnectionProvider = <TChainId extends number, NetworkConfig extend
      * Initialize the app by connecting to the wallet and setting up the library.
      */
     const initApp = async () => {
-      const chainId = Number(network.chainId) as TChainId
+      const networkChainId = Number(network.chainId) as TChainId
       try {
-        if (wallet && wallet?.chainId !== chainId) {
+        if (chainId !== networkChainId) {
           return // wait for the wallet to be connected to the right chain
         }
 
         const prevLib = globalLibs.get(libKey)
-        if (isWalletMatching(wallet, prevLib, chainId)) {
+        if (isWalletMatching(wallet, prevLib, networkChainId)) {
           setConnectState(SUCCESS)
           return // already connected to the right chain and wallet, no need to reinitialize
         }
@@ -79,7 +80,7 @@ export const ConnectionProvider = <TChainId extends number, NetworkConfig extend
         setConnectState(LOADING)
         console.info(
           `Initializing ${libKey} for ${network.name} (${network.chainId})`,
-          wallet ? `Wallet ${wallet?.account?.address} with chain ${wallet?.chainId}` : 'without wallet',
+          wallet ? `Wallet ${wallet?.account?.address} with chain ${chainId}` : 'without wallet',
           prevLib
             ? `Old library had ${prevLib.signerAddress ? `signer ${prevLib.signerAddress}` : 'no signer'} with chain ${prevLib.chainId}`
             : `First initialization`,
@@ -97,7 +98,7 @@ export const ConnectionProvider = <TChainId extends number, NetworkConfig extend
     }
     void initApp()
     return () => abort.abort()
-  }, [isReconnecting, libKey, network, wallet])
+  }, [chainId, isReconnecting, libKey, network, wallet])
 
   const curveApi = globalLibs.getMatching('curveApi', wallet, network?.chainId)
   const llamaApi = globalLibs.getMatching('llamaApi', wallet, network?.chainId)

packages/curve-ui-kit/src/features/connect-wallet/lib/types.ts

@@ -5,10 +5,9 @@ import type { IChainId as CurveChainId, INetworkName as CurveNetworkId } from '@
 import { type default as llamaApi } from '@curvefi/llamalend-api'
 import type { IChainId as LlamaChainId, INetworkName as LlamaNetworkId } from '@curvefi/llamalend-api/lib/interfaces'
 
-export type Wallet<TChainId extends number = number> = {
+export type Wallet = {
   readonly provider?: Eip1193Provider
   readonly account: { address: Address; ensName?: string }
-  readonly chainId: TChainId
 }
 
 export enum ConnectState {