fix: chainId undefined

Author: DanielSchiavini

apps/main/src/dex/DexLayout.tsx

@@ -9,10 +9,10 @@ import { useNetworks } from './entities/networks'
 export function DexLayout() {
   const { network: networkId = 'ethereum' } = useParams<Partial<UrlParams>>()
   const { data: networks } = useNetworks()
-  const network = recordValues(networks).find((n) => n.id === networkId)!
+  const network = recordValues(networks).find((n) => n.id === networkId)
 
   useRedirectToEth(network, networkId)
-  useAutoRefresh(network)
+  useAutoRefresh(network?.chainId)
 
   return <Outlet />
 }

apps/main/src/dex/hooks/useAutoRefresh.tsx

@@ -1,36 +1,34 @@
-import { useCallback } from 'react'
+import { useCallback, useMemo } from 'react'
 import curvejsApi from '@/dex/lib/curvejs'
 import useStore from '@/dex/store/useStore'
-import type { NetworkDef } from '@ui/utils'
 import { type CurveApi, useConnection } from '@ui-kit/features/connect-wallet'
 import usePageVisibleInterval from '@ui-kit/hooks/usePageVisibleInterval'
 import { REFRESH_INTERVAL } from '@ui-kit/lib/model'
 import { useGasInfoAndUpdateLib } from '@ui-kit/lib/model/entities/gas-info'
-import { useNetworkByChain, useNetworks } from '../entities/networks'
+import { useNetworks } from '../entities/networks'
 
-export const useAutoRefresh = (networkDef: NetworkDef) => {
+export const useAutoRefresh = (chainId: number | undefined) => {
   const { curveApi } = useConnection()
-
+  const { data: networks } = useNetworks()
   const fetchPools = useStore((state) => state.pools.fetchPools)
-  const poolDataMapper = useStore((state) => state.pools.poolsMapper[networkDef.chainId])
+  const poolDataMapper = useStore((state) => chainId && state.pools.poolsMapper[chainId])
   const fetchPoolsVolume = useStore((state) => state.pools.fetchPoolsVolume)
   const fetchPoolsTvl = useStore((state) => state.pools.fetchPoolsTvl)
   const setTokensMapper = useStore((state) => state.tokens.setTokensMapper)
   const fetchAllStoredBalances = useStore((state) => state.userBalances.fetchAllStoredBalances)
 
-  const { data: networks } = useNetworks()
-  const { data: network } = useNetworkByChain({ chainId: networkDef.chainId })
+  const network = useMemo(() => chainId && networks[chainId], [chainId, networks])
 
-  useGasInfoAndUpdateLib({ chainId: networkDef.chainId, networks })
+  useGasInfoAndUpdateLib({ chainId, networks })
 
   const fetchPoolsVolumeTvl = useCallback(
     async (curve: CurveApi) => {
-      const { chainId } = curve
+      if (!chainId || !poolDataMapper) return
       const poolsData = Object.values(poolDataMapper)
       await Promise.all([fetchPoolsVolume(chainId, poolsData), fetchPoolsTvl(curve, poolsData)])
       void setTokensMapper(curve, poolsData)
     },
-    [fetchPoolsTvl, fetchPoolsVolume, poolDataMapper, setTokensMapper],
+    [chainId, fetchPoolsTvl, fetchPoolsVolume, poolDataMapper, setTokensMapper],
   )
 
   usePageVisibleInterval(() => {

packages/curve-ui-kit/src/lib/model/entities/gas-info.ts

@@ -147,13 +147,11 @@ const { useQuery: useGasInfoAndUpdateLibBase, fetchQuery: fetchGasInfoAndUpdateL
   refetchInterval: '1m',
   validationSuite: createValidationSuite(<TChainId extends number>({ chainId }: GasInfoParams<TChainId>) => {
     chainValidationGroup({ chainId })
-    if (chainId) {
-      group('apiValidation', () => {
-        test('api', 'API chain ID mismatch', () => {
-          enforce(getAnyCurve(chainId)).message('Chain ID should be loaded').equals(chainId)
-        })
+    group('apiValidation', () => {
+      test('api', 'API chain ID mismatch', () => {
+        enforce(getAnyCurve(chainId!)).message('Chain ID should be loaded').equals(chainId)
       })
-    }
+    })
     providerValidationGroup()
   }),
 })