From 21a4f9867dca7839806e517b0d2ff4e19b7504c5 Mon Sep 17 00:00:00 2001
From: Gareth Fuller <gareth.a.f@gmail.com>
Date: Tue, 17 Sep 2024 15:40:13 +0100
Subject: [PATCH] fix: TVL value in charts

---
 .../PoolDetail/PoolStats/PoolCharts/usePoolCharts.tsx    | 6 +++---
 .../PoolStats/PoolSnapshot/PoolSnapshotValues.tsx        | 9 ++++-----
 lib/modules/pool/PoolProvider.tsx                        | 6 ++++++
 3 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/lib/modules/pool/PoolDetail/PoolStats/PoolCharts/usePoolCharts.tsx b/lib/modules/pool/PoolDetail/PoolStats/PoolCharts/usePoolCharts.tsx
index f19cf8b7b..491def1c6 100644
--- 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
index 94071eedf..1b6e63e2a 100644
--- 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
index 6861934b8..2d0eb8663 100644
--- 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,