From 521728216015a1fa4a77cd4a3318c6eda9c7278a Mon Sep 17 00:00:00 2001
From: jz - synthetix <52280438+jmzwar@users.noreply.github.com>
Date: Thu, 20 Jun 2024 15:30:26 +0700
Subject: [PATCH] Correct tvl on pools list (#316)

Co-authored-by: jmzwar <james@jmzwar.com>
---
 .../useCollateralPriceUpdates.ts              | 11 +++++-----
 .../components/Pools/PoolCards/PoolCard.tsx   | 20 +++++++++++++++---
 .../ui/src/components/Pools/PoolsList.tsx     | 21 ++++++++++++++++++-
 3 files changed, 42 insertions(+), 10 deletions(-)

diff --git a/liquidity/lib/useCollateralPriceUpdates/useCollateralPriceUpdates.ts b/liquidity/lib/useCollateralPriceUpdates/useCollateralPriceUpdates.ts
index a64ab8cdc..abca3276f 100644
--- a/liquidity/lib/useCollateralPriceUpdates/useCollateralPriceUpdates.ts
+++ b/liquidity/lib/useCollateralPriceUpdates/useCollateralPriceUpdates.ts
@@ -124,6 +124,9 @@ export const useOfflinePrices = (collaterals?: Collaterals[]) => {
         throw 'useOfflinePrices is missing required data';
       }
 
+      const stables = ['sUSDC', 'USDC'];
+      const filteredCollaterals = collaterals.filter((item) => !stables.includes(item.symbol));
+
       const returnData: { symbol: string; price: BigNumberish }[] = [
         {
           symbol: 'sUSDC',
@@ -135,16 +138,12 @@ export const useOfflinePrices = (collaterals?: Collaterals[]) => {
         },
       ];
 
-      const filteredCollaterals = collaterals.filter(
-        (collateral) => !collateral.symbol.includes('sUSDC')
-      );
-
       if (!filteredCollaterals.length) {
         return returnData;
       }
 
       const pythIds = await getPythFeedIdsFromCollateralList(
-        collaterals.map((collateral) => collateral.symbol)
+        filteredCollaterals.map((collateral) => collateral.symbol)
       );
 
       const prices = await priceService.getLatestPriceFeeds(
@@ -155,7 +154,7 @@ export const useOfflinePrices = (collaterals?: Collaterals[]) => {
         const price = item.getPriceUnchecked();
 
         returnData.push({
-          symbol: collaterals[index].symbol,
+          symbol: filteredCollaterals[index].symbol,
           price: parseUnits(price.price, 18 + price.expo),
         });
       });
diff --git a/liquidity/ui/src/components/Pools/PoolCards/PoolCard.tsx b/liquidity/ui/src/components/Pools/PoolCards/PoolCard.tsx
index 68b437269..b75ee179e 100644
--- a/liquidity/ui/src/components/Pools/PoolCards/PoolCard.tsx
+++ b/liquidity/ui/src/components/Pools/PoolCards/PoolCard.tsx
@@ -8,6 +8,7 @@ import { isBaseAndromeda } from '@snx-v3/isBaseAndromeda';
 import { CollateralIcon } from '@snx-v3/icons';
 import { useMemo } from 'react';
 import { wei } from '@synthetixio/wei';
+import { BigNumberish } from 'ethers';
 
 export interface PoolCardProps {
   pool: {
@@ -23,13 +24,24 @@ export interface PoolCardProps {
     symbol: string;
     total_amount_deposited: string;
   }[];
+  collateralPrices?: {
+    symbol: string;
+    price: BigNumberish;
+  }[];
   apr: {
     combinedApr: number;
     cumulativePnl: number;
   };
 }
 
-export const PoolCard = ({ pool, network, collaterals, apr, collateralTypes }: PoolCardProps) => {
+export const PoolCard = ({
+  pool,
+  network,
+  collaterals,
+  apr,
+  collateralTypes,
+  collateralPrices,
+}: PoolCardProps) => {
   const navigate = useNavigate();
   const [queryParams] = useSearchParams();
 
@@ -37,8 +49,10 @@ export const PoolCard = ({ pool, network, collaterals, apr, collateralTypes }: P
   const { connect } = useWallet();
 
   const vaultTVL = collateralTypes.reduce((acc, type) => {
+    const price = wei(collateralPrices?.find((price) => price.symbol === type.symbol)?.price || 0);
     const amount = wei(type.total_amount_deposited, type.decimals, true);
-    return acc.add(amount);
+    const value = price.mul(amount);
+    return acc.add(value);
   }, ZEROWEI);
 
   const sanitizedCollateralTypes = collateralTypes.map((collateralType) => {
@@ -129,7 +143,7 @@ export const PoolCard = ({ pool, network, collaterals, apr, collateralTypes }: P
                 alignItems="center"
                 lineHeight="36px"
               >
-                {(vaultTVL?.toNumber() && `$${compactInteger(vaultTVL.toNumber(), 1)}`) || '-'}
+                {(vaultTVL?.toNumber() && `$${compactInteger(vaultTVL.toNumber(), 2)}`) || '-'}
               </Text>
             </Flex>
             <Flex alignItems="center" gap={2}>
diff --git a/liquidity/ui/src/components/Pools/PoolsList.tsx b/liquidity/ui/src/components/Pools/PoolsList.tsx
index 31b985bea..0edb1ef47 100644
--- a/liquidity/ui/src/components/Pools/PoolsList.tsx
+++ b/liquidity/ui/src/components/Pools/PoolsList.tsx
@@ -4,10 +4,26 @@ import { ChainFilter, CollateralFilter, PoolCard } from './';
 import { TorosPoolCard } from './PoolCards/TorosPoolCard';
 import { usePoolsList } from '@snx-v3/usePoolsList';
 import { PoolCardsLoading } from './PoolCards/PoolCardsLoading';
+import { useOfflinePrices } from '@snx-v3/useCollateralPriceUpdates';
 
 export const PoolsList = () => {
   const [state, dispatch] = useReducer(poolsReducer, { collateral: [], chain: [] });
-  const { data, isLoading } = usePoolsList();
+  const { data, isLoading: isPoolsListLoading } = usePoolsList();
+
+  const collaterals = data?.synthetixPools
+    .map((pool) =>
+      pool.poolInfo
+        .map((info) => ({
+          symbol: info.collateral_type.symbol,
+          oracleId: info.collateral_type.oracle_node_id,
+          id: info.collateral_type.id,
+        }))
+        .flat()
+    )
+    .flat();
+
+  const { data: collateralPrices, isLoading: isLoadingCollateralPrices } =
+    useOfflinePrices(collaterals);
 
   const { collateral, chain } = state;
 
@@ -15,6 +31,8 @@ export const PoolsList = () => {
     (chain.length === 0 || chain.includes(8453)) &&
     (collateral.length === 0 || collateral.includes('USDC'));
 
+  const isLoading = isPoolsListLoading || isLoadingCollateralPrices;
+
   return (
     <Flex mt={6} flexDirection="column">
       <Heading fontWeight={700} fontSize={24}>
@@ -40,6 +58,7 @@ export const PoolsList = () => {
               <PoolCard
                 key={network.hexId}
                 collateralTypes={collateralTypes}
+                collateralPrices={collateralPrices}
                 apr={apr}
                 network={network}
                 pool={pool}