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)}`) || '-'} 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 ( @@ -40,6 +58,7 @@ export const PoolsList = () => {