refactor: gas queries

apps/main/src/app/crvusd/client.tsx

@@ -8,13 +8,10 @@ import { networks, networksIdMapper } from '@/loan/networks'
 import useStore from '@/loan/store/useStore'
 import type { UrlParams } from '@/loan/types/loan.types'
 import { recordValues } from '@curvefi/prices-api/objects.util'
-import { useConnection } from '@ui-kit/features/connect-wallet'
-import { useLayoutStore } from '@ui-kit/features/layout'
 import { useHydration } from '@ui-kit/hooks/useHydration'
-import usePageVisibleInterval from '@ui-kit/hooks/usePageVisibleInterval'
 import { useRedirectToEth } from '@ui-kit/hooks/useRedirectToEth'
 import { logSuccess } from '@ui-kit/lib'
-import { REFRESH_INTERVAL } from '@ui-kit/lib/model'
+import { useGasInfoAndUpdateLib } from '@ui-kit/lib/model/entities/gas-info'
 
 export function useInjectServerData(serverData: CrvUsdServerData) {
   useEffect(() => {
@@ -28,23 +25,10 @@ export function CrvUsdClientLayout({ children, serverData }: { children: ReactNo
   useInjectServerData(serverData)
   const { network: networkId = 'ethereum' } = useParams() as Partial<UrlParams> // network absent only in root
   const chainId = networksIdMapper[networkId]
-  const { llamaApi: curve = null } = useConnection()
-  const isPageVisible = useLayoutStore((state) => state.isPageVisible)
-  const fetchGasInfo = useStore((state) => state.gas.fetchGasInfo)
   const hydrate = useStore((s) => s.hydrate)
-
   const isHydrated = useHydration('llamaApi', hydrate, chainId)
 
-  usePageVisibleInterval(
-    () => {
-      if (isPageVisible && curve) {
-        void fetchGasInfo(curve)
-      }
-    },
-    REFRESH_INTERVAL['5m'],
-    isPageVisible,
-  )
-
+  useGasInfoAndUpdateLib({ chainId, networks }) // Refresh gas info on a regular interval, relies on a side-effect
   useRedirectToEth(networks[chainId], networkId, isHydrated)
 
   return isHydrated && children

apps/main/src/app/dao/layout.tsx

@@ -10,6 +10,7 @@ import { useHydration } from '@ui-kit/hooks/useHydration'
 import usePageVisibleInterval from '@ui-kit/hooks/usePageVisibleInterval'
 import { useRedirectToEth } from '@ui-kit/hooks/useRedirectToEth'
 import { REFRESH_INTERVAL } from '@ui-kit/lib/model'
+import { useGasInfoAndUpdateLib } from '@ui-kit/lib/model/entities/gas-info'
 
 const useAutoRefresh = (isHydrated: boolean) => {
   const isPageVisible = useLayoutStore((state) => state.isPageVisible)
@@ -27,7 +28,10 @@ export default function DaoLayout({ children }: { children: ReactNode }) {
   const hydrate = useStore((s) => s.hydrate)
   const chainId = networksIdMapper[network]
   const isHydrated = useHydration('curveApi', hydrate, chainId)
+
   useRedirectToEth(networks[chainId], network, isHydrated)
+  useGasInfoAndUpdateLib({ chainId, networks }) // Refresh gas info on a regular interval, relies on a side-effect
   useAutoRefresh(isHydrated)
+
   return isHydrated && children
 }

apps/main/src/app/dex/layout.tsx

@@ -15,6 +15,7 @@ import { useHydration } from '@ui-kit/hooks/useHydration'
 import usePageVisibleInterval from '@ui-kit/hooks/usePageVisibleInterval'
 import { useRedirectToEth } from '@ui-kit/hooks/useRedirectToEth'
 import { REFRESH_INTERVAL } from '@ui-kit/lib/model'
+import { useGasInfoAndUpdateLib } from '@ui-kit/lib/model/entities/gas-info'
 
 const useAutoRefresh = (networkDef: NetworkDef) => {
   const { curveApi } = useConnection()
@@ -25,9 +26,12 @@ const useAutoRefresh = (networkDef: NetworkDef) => {
   const fetchPoolsVolume = useStore((state) => state.pools.fetchPoolsVolume)
   const fetchPoolsTvl = useStore((state) => state.pools.fetchPoolsTvl)
   const setTokensMapper = useStore((state) => state.tokens.setTokensMapper)
-  const fetchGasInfo = useStore((state) => state.gas.fetchGasInfo)
   const fetchAllStoredBalances = useStore((state) => state.userBalances.fetchAllStoredBalances)
   const network = useStore((state) => state.networks.networks[networkDef.chainId])
+  const networks = useStore((state) => state.networks.networks)
+
+  // Refresh gas info on a regular interval, relies on a side-effect
+  useGasInfoAndUpdateLib({ chainId: networkDef.chainId, networks })
 
   const fetchPoolsVolumeTvl = useCallback(
     async (curve: CurveApi) => {
@@ -48,7 +52,6 @@ const useAutoRefresh = (networkDef: NetworkDef) => {
   usePageVisibleInterval(
     () => {
       if (curveApi) {
-        void fetchGasInfo(curveApi)
         void fetchPoolsVolumeTvl(curveApi)
 
         if (curveApi.signerAddress) {

apps/main/src/app/lend/layout.tsx

@@ -7,12 +7,16 @@ import useStore from '@/lend/store/useStore'
 import type { UrlParams } from '@/lend/types/lend.types'
 import { useHydration } from '@ui-kit/hooks/useHydration'
 import { useRedirectToEth } from '@ui-kit/hooks/useRedirectToEth'
+import { useGasInfoAndUpdateLib } from '@ui-kit/lib/model/entities/gas-info'
 
 export default function LendLayout({ children }: { children: ReactNode }) {
   const { network: networkId = 'ethereum' } = useParams() as Partial<UrlParams> // network absent only in root
   const chainId = networksIdMapper[networkId]
   const hydrate = useStore((s) => s.hydrate)
   const isHydrated = useHydration('llamaApi', hydrate, chainId)
+
   useRedirectToEth(networks[chainId], networkId, isHydrated)
+  useGasInfoAndUpdateLib({ chainId, networks }) // Refresh gas info on a regular interval, relies on a side-effect
+
   return isHydrated && children
 }

apps/main/src/dao/components/DetailInfoEstGas.tsx

@@ -3,12 +3,12 @@ import { useMemo } from 'react'
 import { styled } from 'styled-components'
 import { ethAddress } from 'viem'
 import networks from '@/dao/networks'
-import useStore from '@/dao/store/useStore'
 import { CurveApi, ChainId, EstimatedGas } from '@/dao/types/dao.types'
 import DetailInfo from '@ui/DetailInfo'
 import IconTooltip from '@ui/Tooltip/TooltipIcon'
 import { FORMAT_OPTIONS, formatNumber } from '@ui/utils'
 import { t } from '@ui-kit/lib/i18n'
+import { useGasInfoAndUpdateLib } from '@ui-kit/lib/model/entities/gas-info'
 import { useTokenUsdRate } from '@ui-kit/lib/model/entities/token-usd-rate'
 import { gweiToEther, weiToGwei } from '@ui-kit/utils'
 
@@ -35,8 +35,8 @@ const DetailInfoEstGas = ({
 }) => {
   const { gasPricesDefault } = networks[chainId]
   const { data: chainTokenUsdRate } = useTokenUsdRate({ chainId, tokenAddress: ethAddress })
-  const gasInfo = useStore((state) => state.gas.gasInfo)
-  const basePlusPriority = useStore((state) => state.gas.gasInfo?.basePlusPriority?.[gasPricesDefault])
+  const { data: gasInfo } = useGasInfoAndUpdateLib({ chainId, networks })
+  const basePlusPriority = gasInfo?.basePlusPriority?.[gasPricesDefault]
 
   const { estGasCostUsd, tooltip } = useMemo(() => {
     const resp = { estGasCost: 0, estGasCostUsd: 0, tooltip: '' }

apps/main/src/dao/hooks/useEstimateGasConversion.tsx

@@ -2,8 +2,8 @@ import { useMemo } from 'react'
 import { ethAddress } from 'viem'
 import { useChainId } from 'wagmi'
 import networks from '@/dao/networks'
-import useStore from '@/dao/store/useStore'
 import { BN, formatNumber } from '@ui/utils'
+import { useGasInfoAndUpdateLib } from '@ui-kit/lib/model/entities/gas-info'
 import { useTokenUsdRate } from '@ui-kit/lib/model/entities/token-usd-rate'
 import { gweiToEther, weiToGwei } from '@ui-kit/utils'
 
@@ -12,7 +12,8 @@ const useEstimateGasConversion = (gas: number | null | undefined) => {
   const { data: chainTokenUsdRate } = useTokenUsdRate({ chainId, tokenAddress: ethAddress })
 
   const gasPricesDefault = chainId && networks[chainId].gasPricesDefault
-  const basePlusPriorities = useStore().gas.gasInfo?.basePlusPriority
+  const { data: gasInfo } = useGasInfoAndUpdateLib({ chainId, networks })
+  const basePlusPriorities = gasInfo?.basePlusPriority
 
   return useMemo(() => {
     const basePlusPriority =

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

@@ -45,10 +45,8 @@ const createAppSlice = (set: SetState<State>, get: GetState<State>): AppSlice =>
       isNetworkSwitched,
     })
 
-    const { user, gas, gauges } = get()
-    if (isNetworkSwitched) gas.resetState()
+    const { user, gauges } = get()
     await Promise.all([
-      api && isNetworkSwitched && gas.fetchGasInfo(api),
       api && wallet?.provider && user.updateUserData(api, wallet),
       gauges.getGauges(),
       gauges.getGaugesData(),

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

@@ -151,7 +151,6 @@ const createLockedCrvSlice = (set: SetState<State>, get: GetState<State>): Locke
       cFormStatus.step = 'APPROVAL'
       get()[sliceKey].setStateByKey('formStatus', cloneDeep(cFormStatus))
 
-      await get().gas.fetchGasInfo(curve)
       const { chainId } = curve
       const approveFn = networks[chainId].api.lockCrv.lockCrvApprove
       const resp = await approveFn(activeKey, provider, curve, formValues.lockedAmt)
@@ -185,7 +184,6 @@ const createLockedCrvSlice = (set: SetState<State>, get: GetState<State>): Locke
         cFormStatus.step = 'CREATE_LOCK'
         get()[sliceKey].setStateByKey('formStatus', cloneDeep(cFormStatus))
 
-        await get().gas.fetchGasInfo(curve)
         const { chainId } = curve
         const fn = networks[chainId].api.lockCrv.createLock
         const resp = await fn(activeKey, curve, provider, formValues.lockedAmt, formValues.utcDate, formValues.days)
@@ -225,7 +223,6 @@ const createLockedCrvSlice = (set: SetState<State>, get: GetState<State>): Locke
       cFormStatus.step = 'INCREASE_CRV'
       get()[sliceKey].setStateByKey('formStatus', cloneDeep(cFormStatus))
 
-      await get().gas.fetchGasInfo(curve)
       const { chainId } = curve
       const fn = networks[chainId].api.lockCrv.increaseAmount
       const resp = await fn(activeKey, curve, provider, formValues.lockedAmt)
@@ -266,7 +263,6 @@ const createLockedCrvSlice = (set: SetState<State>, get: GetState<State>): Locke
       cFormStatus.step = 'INCREASE_TIME'
       get()[sliceKey].setStateByKey('formStatus', cloneDeep(cFormStatus))
 
-      await get().gas.fetchGasInfo(curve)
       const { chainId } = curve
       const fn = networks[chainId].api.lockCrv.increaseUnlockTime
       const resp = await fn(activeKey, provider, curve, formValues.days)
@@ -304,8 +300,6 @@ const createLockedCrvSlice = (set: SetState<State>, get: GetState<State>): Locke
       if (!provider) return setMissingProvider(get()[sliceKey])
       const curve = requireLib('curveApi')
 
-      await get().gas.fetchGasInfo(curve)
-
       let dismissNotificationHandler = notify(t`Please confirm to withdraw locked CRV.`, 'pending').dismiss
 
       try {