diff --git a/liquidity/ui/src/components/Pools/CollateralSection.tsx b/liquidity/ui/src/components/Pools/CollateralSection.tsx index ed76ba64e..094f92270 100644 --- a/liquidity/ui/src/components/Pools/CollateralSection.tsx +++ b/liquidity/ui/src/components/Pools/CollateralSection.tsx @@ -1,4 +1,4 @@ -import { Box, Divider, Flex, Skeleton, Text } from '@chakra-ui/react'; +import { Box, Button, Divider, Flex, Skeleton, Text } from '@chakra-ui/react'; import { useVaultsData, VaultsDataType } from '@snx-v3/useVaultsData'; import React, { FC } from 'react'; import { wei } from '@synthetixio/wei'; @@ -8,11 +8,12 @@ import { BorderBox } from '@snx-v3/BorderBox'; import { CollateralIcon } from '@snx-v3/icons'; import { useApr } from '@snx-v3/useApr'; import { Tooltip } from '@snx-v3/Tooltip'; -import { NETWORKS } from '@snx-v3/useBlockchain'; +import { NETWORKS, Network, useNetwork, useWallet } from '@snx-v3/useBlockchain'; import { useOfflinePrices } from '@snx-v3/useCollateralPriceUpdates'; import { usePool } from '@snx-v3/usePoolsList'; import { formatEther } from 'ethers/lib/utils'; import { BigNumberish } from 'ethers'; +import { useNavigate, useSearchParams } from 'react-router-dom'; export const calculateVaultTotals = (vaultsData: VaultsDataType) => { const zeroValues = { collateral: { value: wei(0), amount: wei(0) }, debt: wei(0) }; @@ -32,7 +33,14 @@ export const CollateralSectionUi: FC<{ collateralPrices?: { symbol: string; price: BigNumberish }[]; apr?: number; isAprLoading?: boolean; -}> = ({ vaultsData, collateralPrices, apr, isAprLoading }) => { + network: Network | undefined; + poolId: string | undefined; +}> = ({ vaultsData, collateralPrices, apr, isAprLoading, network, poolId }) => { + const { network: currentNetwork, setNetwork } = useNetwork(); + const { connect } = useWallet(); + const navigate = useNavigate(); + const [queryParams] = useSearchParams(); + const { collateral: totalCollateral, debt: totalDebt } = calculateVaultTotals(vaultsData); return ( @@ -135,7 +143,7 @@ export const CollateralSectionUi: FC<{ data-testid="pool collateral" data-collateral={vaultCollateral.collateralType.symbol} > - + {vaultCollateral.collateralType.displaySymbol} + {price ? formatNumberToUsd(formatEther(price.toString())) : '-'} + + @@ -254,6 +303,8 @@ export const CollateralSection = () => { collateralPrices={collateralPrices} apr={aprData?.combinedApr} isAprLoading={isAprLoading} + network={network} + poolId={poolId} /> ); };