diff --git a/centrifuge-app/src/components/PoolCard/index.tsx b/centrifuge-app/src/components/PoolCard/index.tsx index aea05f3ab..eb3f79192 100644 --- a/centrifuge-app/src/components/PoolCard/index.tsx +++ b/centrifuge-app/src/components/PoolCard/index.tsx @@ -1,7 +1,6 @@ import { CurrencyBalance, Rate } from '@centrifuge/centrifuge-js' import { Box, Card, Divider, Stack, Text, Thumbnail } from '@centrifuge/fabric' import Decimal from 'decimal.js-light' -import { useNavigate } from 'react-router' import styled from 'styled-components' import { formatBalance, formatBalanceAbbreviated, formatPercentage } from '../../utils/formatting' import { CardHeader } from '../ListItemCardStyles' @@ -29,11 +28,12 @@ export type MetaData = { investorType?: string } } + export type Tranche = { id: string currency: { name: string - decimals: CurrencyBalance | number + decimals: number } interestRatePerSec: { toAprPercent: () => Decimal @@ -72,7 +72,6 @@ export function PoolCard({ tranches, metaData, }: PoolCardProps) { - const navigate = useNavigate() const isOneTranche = tranches && tranches?.length === 1 const renderText = (text: string) => ( @@ -84,6 +83,10 @@ export function PoolCard({ const words = tranche.currency.name.trim().split(' ') const metadata = metaData?.tranches[tranche.id] ?? null const trancheName = words[words.length - 1] + const investmentBalance = new CurrencyBalance( + metadata?.minInitialInvestment ?? 0, + tranche.currency.decimals + ).toDecimal() return { name: trancheName, @@ -94,89 +97,82 @@ export function PoolCard({ }) : '-', minInvestment: - metadata && metadata.minInitialInvestment - ? formatBalanceAbbreviated(Number(metadata.minInitialInvestment), '', 0) - : '-', + metadata && metadata.minInitialInvestment ? formatBalanceAbbreviated(investmentBalance, '', 0) : '-', } }) as TrancheData[] return ( - navigate(`/pools/${poolId}`)} - padding={18} - style={{ cursor: 'pointer' }} - height={320} - > - - - - - {name} + + + + + + + {name} + + + {iconUri ? ( + + ) : ( + + )} + + + + + TVL ({currencySymbol}) + {valueLocked ? formatBalance(valueLocked, '') : '-'} - {iconUri ? ( - - ) : ( - - )} - - - - - TVL ({currencySymbol}) - - {valueLocked ? formatBalance(valueLocked, '') : '-'} - - - {!isOneTranche && ( + + {!isOneTranche && ( + + + Tranches + + {tranchesData?.map((tranche) => renderText(tranche.name))} + {tranches && tranches.length > 2 ? ( + View all + ) : null} + + )} + + + APY + + {tranchesData?.map((tranche) => renderText(`${tranche.apr}`))} + - Tranches + Min Investment - {tranchesData?.map((tranche) => renderText(tranche.name))} - {tranches && tranches.length > 2 ? ( - View all - ) : null} + {tranchesData?.map((tranche) => renderText(`${tranche.minInvestment}`))} + + {metaData?.pool?.issuer?.shortDescription && ( + + + {metaData?.pool?.issuer?.shortDescription} + + )} - - - APY - - {tranchesData?.map((tranche) => renderText(`${tranche.apr}`))} - - - - Min Investment - - {tranchesData?.map((tranche) => renderText(`${tranche.minInvestment}`))} - - - {metaData?.pool?.issuer?.shortDescription && ( - - - {metaData?.pool?.issuer?.shortDescription} - + + Asset Type + {assetClass ?? '-'} + + + Investor Type + {metaData?.pool?.investorType || '-'} - )} - - Asset Type - {assetClass ?? '-'} - - - Investor Type - {metaData?.pool?.investorType || '-'} - + ) }