refactor: token query

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

@@ -30,7 +30,6 @@ export function CrvUsdClientLayout({ children, serverData }: { children: ReactNo
   const chainId = networksIdMapper[networkId]
   const { llamaApi: curve = null } = useConnection()
   const isPageVisible = useLayoutStore((state) => state.isPageVisible)
-  const fetchAllStoredUsdRates = useStore((state) => state.usdRates.fetchAllStoredUsdRates)
   const fetchGasInfo = useStore((state) => state.gas.fetchGasInfo)
   const hydrate = useStore((s) => s.hydrate)
 
@@ -39,7 +38,6 @@ export function CrvUsdClientLayout({ children, serverData }: { children: ReactNo
   usePageVisibleInterval(
     () => {
       if (isPageVisible && curve) {
-        void fetchAllStoredUsdRates(curve)
         void fetchGasInfo(curve)
       }
     },

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

@@ -5,21 +5,18 @@ import { type ReactNode } from 'react'
 import networks, { networksIdMapper } from '@/dao/networks'
 import useStore from '@/dao/store/useStore'
 import { type UrlParams } from '@/dao/types/dao.types'
-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 { REFRESH_INTERVAL } from '@ui-kit/lib/model'
 
 const useAutoRefresh = (isHydrated: boolean) => {
-  const { curveApi } = useConnection()
-  const fetchAllStoredUsdRates = useStore((state) => state.usdRates.fetchAllStoredUsdRates)
   const isPageVisible = useLayoutStore((state) => state.isPageVisible)
   const getGauges = useStore((state) => state.gauges.getGauges)
   const getGaugesData = useStore((state) => state.gauges.getGaugesData)
   usePageVisibleInterval(
-    () => Promise.all([curveApi && fetchAllStoredUsdRates(curveApi), getGauges(), getGaugesData()]),
+    () => Promise.all([getGauges(), getGaugesData()]),
     REFRESH_INTERVAL['5m'],
     isPageVisible && isHydrated,
   )

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

@@ -26,7 +26,6 @@ const useAutoRefresh = (networkDef: NetworkDef) => {
   const fetchPoolsTvl = useStore((state) => state.pools.fetchPoolsTvl)
   const setTokensMapper = useStore((state) => state.tokens.setTokensMapper)
   const fetchGasInfo = useStore((state) => state.gas.fetchGasInfo)
-  const fetchAllStoredUsdRates = useStore((state) => state.usdRates.fetchAllStoredUsdRates)
   const fetchAllStoredBalances = useStore((state) => state.userBalances.fetchAllStoredBalances)
   const network = useStore((state) => state.networks.networks[networkDef.chainId])
 
@@ -50,7 +49,6 @@ const useAutoRefresh = (networkDef: NetworkDef) => {
     () => {
       if (curveApi) {
         void fetchGasInfo(curveApi)
-        void fetchAllStoredUsdRates(curveApi)
         void fetchPoolsVolumeTvl(curveApi)
 
         if (curveApi.signerAddress) {

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

@@ -10,6 +10,7 @@ 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 { useTokenUsdRate } from '@ui-kit/lib/model/entities/token-usd-rate'
 import { gweiToEther, weiToGwei } from '@ui-kit/utils'
 
 export type StepProgress = {
@@ -34,7 +35,7 @@ const DetailInfoEstGas = ({
   stepProgress?: StepProgress | null
 }) => {
   const { gasPricesDefault } = networks[chainId]
-  const chainTokenUsdRate = useStore((state) => state.usdRates.usdRatesMapper[ethAddress])
+  const { data: chainTokenUsdRate } = useTokenUsdRate({ chainId, tokenAddress: ethAddress })
   const gasInfo = useStore((state) => state.gas.gasInfo)
   const basePlusPriority = useStore((state) => state.gas.gasInfo?.basePlusPriority?.[gasPricesDefault])
 

apps/main/src/dao/components/PageAnalytics/CrvStats/index.tsx

@@ -1,12 +1,14 @@
 import styled from 'styled-components'
 import MetricsComp, { MetricsColumnData } from '@/dao/components/MetricsComp'
+import { CONTRACT_CRV } from '@/dao/constants'
 import { useStatsVecrvQuery } from '@/dao/entities/stats-vecrv'
 import useStore from '@/dao/store/useStore'
 import Box from '@ui/Box'
 import Tooltip from '@ui/Tooltip'
 import { formatNumber } from '@ui/utils'
 import { useConnection, useWallet } from '@ui-kit/features/connect-wallet'
 import { t } from '@ui-kit/lib/i18n'
+import { useTokenUsdRate } from '@ui-kit/lib/model/entities/token-usd-rate'
 import { Chain } from '@ui-kit/utils/network'
 
 const CrvStats = () => {
@@ -15,15 +17,13 @@ const CrvStats = () => {
   const { curveApi: { chainId } = {} } = useConnection()
   const veCrvFees = useStore((state) => state.analytics.veCrvFees)
   const veCrvHolders = useStore((state) => state.analytics.veCrvHolders)
-  const usdRatesLoading = useStore((state) => state.usdRates.loading)
-  const usdRatesMapper = useStore((state) => state.usdRates.usdRatesMapper)
-  const crv = usdRatesMapper.crv
+  const { data: crv, isFetching: isLoadingCrv } = useTokenUsdRate({ chainId, tokenAddress: CONTRACT_CRV })
 
   // protect against trying to load data on non-mainnet networks
   const notMainnet = chainId !== Chain.Ethereum
   const noProvider = !provider || notMainnet
   const veCrvFeesLoading = veCrvFees.fetchStatus === 'LOADING'
-  const aprLoading = statsLoading || veCrvFeesLoading || usdRatesLoading || !crv
+  const aprLoading = statsLoading || veCrvFeesLoading || isLoadingCrv || crv == null
 
   const veCrvApr =
     aprLoading || notMainnet || !statsSuccess

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

@@ -1,23 +1,23 @@
 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 { requireLib } from '@ui-kit/features/connect-wallet'
+import { useTokenUsdRate } from '@ui-kit/lib/model/entities/token-usd-rate'
 import { gweiToEther, weiToGwei } from '@ui-kit/utils'
 
 const useEstimateGasConversion = (gas: number | null | undefined) => {
-  const curve = requireLib('curveApi')
-  const chainId = curve?.chainId
-  const chainTokenUsdRate = useStore().usdRates.usdRatesMapper['0xeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee']
+  const chainId = useChainId()
+  const { data: chainTokenUsdRate } = useTokenUsdRate({ chainId, tokenAddress: ethAddress })
+
   const gasPricesDefault = chainId && networks[chainId].gasPricesDefault
   const basePlusPriorities = useStore().gas.gasInfo?.basePlusPriority
 
   return useMemo(() => {
     const basePlusPriority =
       basePlusPriorities && typeof gasPricesDefault !== 'undefined' && basePlusPriorities[gasPricesDefault]
 
-    if (!curve || !chainId) return { estGasCost: undefined, estGasCostUsd: undefined, tooltip: undefined }
-
     if (!basePlusPriority || !gas) return { estGasCost: undefined, estGasCostUsd: undefined, tooltip: undefined }
 
     const { symbol, gasPricesUnit } = networks[chainId]
@@ -30,7 +30,7 @@ const useEstimateGasConversion = (gas: number | null | undefined) => {
       const tooltip = `${formatNumber(estGasCost.toString())} ${symbol} at ${gasAmountUnit} ${gasPricesUnit}`
       return { estGasCost: estGasCost.toString(), estGasCostUsd, tooltip }
     }
-  }, [gas, curve, chainId, chainTokenUsdRate, gasPricesDefault, basePlusPriorities])
+  }, [gas, chainId, chainTokenUsdRate, gasPricesDefault, basePlusPriorities])
 }
 
 export default useEstimateGasConversion

apps/main/src/dao/lib/curvejs.ts

@@ -1,30 +1,14 @@
 import type { FormType as LockFormType } from '@/dao/components/PageVeCrv/types'
-import { CurveApi, Provider, EstimatedGas, UsdRatesMapper, ClaimButtonsKey } from '@/dao/types/dao.types'
+import { CurveApi, Provider, EstimatedGas, ClaimButtonsKey } from '@/dao/types/dao.types'
 import { getErrorMessage } from '@/dao/utils'
 import type { DateValue } from '@internationalized/date'
-import PromisePool from '@supercharge/promise-pool/dist'
 import { log } from '@ui-kit/lib'
 import dayjs from '@ui-kit/lib/dayjs'
 import { waitForTransaction, waitForTransactions } from '@ui-kit/lib/ethers'
 
 export const helpers = {
   waitForTransaction,
   waitForTransactions,
-  fetchUsdRates: async (curve: CurveApi, tokenAddresses: string[]) => {
-    log('fetchUsdRates', tokenAddresses.length)
-    const results: UsdRatesMapper = {}
-
-    await PromisePool.for(tokenAddresses)
-      .withConcurrency(5)
-      .handleError((error, tokenAddress) => {
-        console.error(`Unable to get usd rate for ${tokenAddress}`, error)
-        results[tokenAddress] = NaN
-      })
-      .process(async (tokenAddress) => {
-        results[tokenAddress] = await curve.getUsdRate(tokenAddress)
-      })
-    return results
-  },
 }
 
 const lockCrv = {

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

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

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

@@ -8,16 +8,8 @@ import createGaugesSlice, { GaugesSlice } from '@/dao/store/createGaugesSlice'
 import createProposalsSlice, { ProposalsSlice } from '@/dao/store/createProposalsSlice'
 import createUserSlice, { UserSlice } from '@/dao/store/createUserSlice'
 import createLockedCrvSlice, { LockedCrvSlice } from './createLockedCrvSlice'
-import createUsdRatesSlice, { UsdRatesSlice } from './createUsdRatesSlice'
 
-export type State = AppSlice &
-  GasSlice &
-  ProposalsSlice &
-  UserSlice &
-  GaugesSlice &
-  AnalyticsSlice &
-  LockedCrvSlice &
-  UsdRatesSlice
+export type State = AppSlice & GasSlice & ProposalsSlice & UserSlice & GaugesSlice & AnalyticsSlice & LockedCrvSlice
 
 const store = (set: SetState<State>, get: GetState<State>): State => ({
   ...createAppSlice(set, get),
@@ -27,7 +19,6 @@ const store = (set: SetState<State>, get: GetState<State>): State => ({
   ...createUserSlice(set, get),
   ...createAnalyticsSlice(set, get),
   ...createLockedCrvSlice(set, get),
-  ...createUsdRatesSlice(set, get),
 })
 
 const useStore = process.env.NODE_ENV === 'development' ? create(devtools(store)) : create(store)

apps/main/src/dao/types/dao.types.ts

@@ -34,7 +34,6 @@ export type GasInfo = {
   l1GasPriceWei?: number
   l2GasPriceWei?: number
 }
-export type UsdRatesMapper = { [tokenAddress: string]: number | undefined }
 export type CurveJsProposalType = 'PARAMETER' | 'OWNERSHIP'
 
 export type PricesGaugeOverviewData = {

apps/main/src/dex/components/ChipToken.tsx

@@ -1,12 +1,12 @@
-import { useMemo, useRef } from 'react'
+import { useMemo, useRef, useState } from 'react'
 import type { AriaButtonProps } from 'react-aria'
 import { useButton } from 'react-aria'
 import styled from 'styled-components'
-import useStore from '@/dex/store/useStore'
+import { useChainId } from 'wagmi'
 import Icon from '@ui/Icon'
 import Spinner from '@ui/Spinner'
 import { formatNumberUsdRate } from '@ui/utils'
-import { useConnection } from '@ui-kit/features/connect-wallet'
+import { fetchTokenUsdRate } from '@ui-kit/lib/model/entities/token-usd-rate'
 import { copyToClipboard } from '@ui-kit/utils'
 
 interface ButtonProps extends AriaButtonProps {
@@ -46,14 +46,13 @@ interface ChipTokenProps extends AriaButtonProps {
 }
 
 const ChipToken = ({ className, isHighlight, tokenName, tokenAddress, ...props }: ChipTokenProps) => {
-  const { curveApi } = useConnection()
-  const usdRate = useStore((state) => state.usdRates.usdRatesMapper[tokenAddress])
-  const fetchUsdRateByToken = useStore((state) => state.usdRates.fetchUsdRateByToken)
+  const chainId = useChainId()
+  const [usdRate, setUsdRate] = useState<number | undefined>(undefined)
   const parsedUsdRate = formatNumberUsdRate(usdRate)
 
   const handleMouseEnter = (foundUsdRate?: string) => {
-    if (!foundUsdRate && curveApi) {
-      void fetchUsdRateByToken(curveApi, tokenAddress)
+    if (!foundUsdRate) {
+      void fetchTokenUsdRate({ chainId, tokenAddress }).then(setUsdRate)
     }
   }
 

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

@@ -10,6 +10,7 @@ import IconTooltip from '@ui/Tooltip/TooltipIcon'
 import { FORMAT_OPTIONS, formatNumber } from '@ui/utils'
 import { useConnection } from '@ui-kit/features/connect-wallet'
 import { t } from '@ui-kit/lib/i18n'
+import { useTokenUsdRate } from '@ui-kit/lib/model/entities/token-usd-rate'
 import { Chain, gweiToEther, weiToGwei } from '@ui-kit/utils'
 
 export type StepProgress = {
@@ -34,7 +35,7 @@ const DetailInfoEstGas = ({
   const { curveApi } = useConnection()
   const networks = useStore((state) => state.networks.networks)
   const { gasPricesDefault } = networks[chainId]
-  const chainTokenUsdRate = useStore((state) => state.usdRates.usdRatesMapper[ethAddress])
+  const { data: chainTokenUsdRate } = useTokenUsdRate({ chainId, tokenAddress: ethAddress })
   const gasInfo = useStore((state) => state.gas.gasInfo)
   const basePlusPriority = useStore((state) => state.gas.gasInfo?.basePlusPriority?.[gasPricesDefault])