fix: TVL value in charts

balancer · Sep 17, 2024 · 21a4f98 · 21a4f98
1 parent fd771fd
commit 21a4f98
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 8 deletions.
diff --git a/lib/modules/pool/PoolDetail/PoolStats/PoolCharts/usePoolCharts.tsx b/lib/modules/pool/PoolDetail/PoolStats/PoolCharts/usePoolCharts.tsx
@@ -243,7 +243,7 @@ export function usePoolSnapshots(
 }
 
 export function usePoolCharts() {
-  const { pool } = usePool()
+  const { pool, tvl } = usePool()
   const isCowPool = isCowAmmPool(pool.type)
 
   const { id: poolId, variant } = useParams()
@@ -280,7 +280,7 @@ export function usePoolCharts() {
     let val = 0
 
     if (activeTab.value === PoolChartTab.TVL) {
-      val = Number(data?.snapshots[data?.snapshots.length - 1]?.totalLiquidity)
+      val = Number(tvl)
     }
 
     if (activeTab.value === PoolChartTab.FEES) {
@@ -302,7 +302,7 @@ export function usePoolCharts() {
     }
 
     return toCurrency(val, { abbreviated: false })
-  }, [data?.snapshots, activeTab, toCurrency])
+  }, [data?.snapshots, activeTab, toCurrency, tvl])
 
   const chartData = useMemo(() => {
     const snapshots = data?.snapshots

diff --git a/lib/modules/pool/PoolDetail/PoolStats/PoolSnapshot/PoolSnapshotValues.tsx b/lib/modules/pool/PoolDetail/PoolStats/PoolSnapshot/PoolSnapshotValues.tsx
@@ -12,7 +12,6 @@ import { usePool } from '../../../PoolProvider'
 import { bn } from '@/lib/shared/utils/numbers'
 import MainAprTooltip from '@/lib/shared/components/tooltips/apr-tooltip/MainAprTooltip'
 import { isCowAmmPool } from '../../../pool.helpers'
-import { getPoolDisplayTokens } from '../../../pool.utils'
 
 type PoolStatsValues = {
   totalLiquidity: string
@@ -21,9 +20,9 @@ type PoolStatsValues = {
 }
 
 export function PoolSnapshotValues() {
-  const { pool, chain } = usePool()
+  const { pool, chain, tvl } = usePool()
   const { toCurrency } = useCurrency()
-  const { priceFor, getToken, calcTotalUsdValue } = useTokens()
+  const { priceFor, getToken } = useTokens()
 
   const MemoizedMainAprTooltip = memo(MainAprTooltip)
 
@@ -49,7 +48,7 @@ export function PoolSnapshotValues() {
   const poolStatsValues: PoolStatsValues | undefined = useMemo(() => {
     if (pool) {
       return {
-        totalLiquidity: toCurrency(calcTotalUsdValue(getPoolDisplayTokens(pool), chain), {
+        totalLiquidity: toCurrency(tvl, {
           abbreviated: false,
         }),
         income24h: isCowAmmPool(pool.type)
@@ -59,7 +58,7 @@ export function PoolSnapshotValues() {
       }
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [pool])
+  }, [pool, tvl])
 
   const incomeLabel = isCowAmmPool(pool.type) ? 'Surplus (24h)' : 'Fees (24h)'
 

diff --git a/lib/modules/pool/PoolProvider.tsx b/lib/modules/pool/PoolProvider.tsx
@@ -16,6 +16,8 @@ import { useUserAccount } from '@/lib/modules/web3/UserAccountProvider'
 import { usePoolEnrichWithOnChainData } from '@/lib/modules/pool/queries/usePoolEnrichWithOnChainData'
 import { useOnchainUserPoolBalances } from './queries/useOnchainUserPoolBalances'
 import { useInvalidVariantRedirect } from './pool.hooks'
+import { getPoolDisplayTokens } from './pool.utils'
+import { useTokens } from '../tokens/TokensProvider'
 
 export type UsePoolResponse = ReturnType<typeof _usePool> & {
   chain: GqlChain
@@ -40,6 +42,7 @@ export function _usePool({
     variables: queryVariables,
   })
 
+  const { calcTotalUsdValue } = useTokens()
   const {
     pool: poolWithOnChainData,
     refetch: refetchOnchainData,
@@ -59,6 +62,8 @@ export function _usePool({
 
   const bptPrice = calcBptPriceFor(pool)
 
+  const tvl = calcTotalUsdValue(getPoolDisplayTokens(pool), pool.chain)
+
   async function refetch() {
     return Promise.all([refetchOnchainData(), refetchOnchainUserBalances()])
   }
@@ -68,6 +73,7 @@ export function _usePool({
   return {
     pool,
     bptPrice,
+    tvl,
     isLoading,
     isLoadingOnchainData,
     isLoadingOnchainUserBalances,