diff --git a/centrifuge-app/src/components/PoolOverview/KeyMetrics.tsx b/centrifuge-app/src/components/PoolOverview/KeyMetrics.tsx index 77fd212ecc..2cd323a222 100644 --- a/centrifuge-app/src/components/PoolOverview/KeyMetrics.tsx +++ b/centrifuge-app/src/components/PoolOverview/KeyMetrics.tsx @@ -6,6 +6,8 @@ import startCase from 'lodash/startCase' import { evmChains } from '../../config' import { daysBetween } from '../../utils/date' import { useActiveDomains } from '../../utils/useLiquidityPools' +import { usePool } from '../../utils/usePools' +import { Spinner } from '../Spinner' type Props = { assetType?: { class: string; subClass: string } @@ -15,6 +17,7 @@ type Props = { } export const KeyMetrics = ({ assetType, averageMaturity, loans, poolId }: Props) => { + const pool = usePool(poolId) const ongoingAssetCount = loans && [...loans].filter((loan) => loan.status === 'Active' && !loan.outstandingDebt.isZero()).length @@ -75,25 +78,81 @@ export const KeyMetrics = ({ assetType, averageMaturity, loans, poolId }: Props) }, ] : []), - ...(activeDomains.data?.length - ? [ - { - metric: 'Available networks', - value: ( - - {activeDomains.data.map((domain) => { - const chain = (evmChains as any)[domain.chainId] - return ( - - {chain.name} chain + + { + metric: 'Available networks', + value: ( + + {activeDomains.data?.length ? ( + + Centrifuge + {pool.tranches.length > 1 ? ( + pool.tranches.map((tranche) => ( + + + + View {tranche.currency.name.split(' ').at(-1)} + {' '} + + + + )) + ) : ( + + + + View transactions + {' '} + + + + )} + + } + > + + + ) : ( + + )} + {activeDomains.data?.length && + activeDomains.data + .filter((domain) => domain.isActive) + .map((domain) => { + const chain = (evmChains as any)[domain.chainId] + return ( + + {chain.name} + {pool.tranches.length > 1 ? ( + pool.tranches.map((tranche) => ( + + + + View {tranche.currency.name.split(' ').at(-1)} + {' '} + + + + )) + ) : ( @@ -102,18 +161,17 @@ export const KeyMetrics = ({ assetType, averageMaturity, loans, poolId }: Props) - - } - > - - - ) - })} - - ), - }, - ] - : []), + )} + + } + > + + + ) + })} + + ), + }, ] return ( diff --git a/centrifuge-app/src/components/PoolOverview/PoolStructure.tsx b/centrifuge-app/src/components/PoolOverview/PoolStructure.tsx index 4620b4f071..4f31bf087a 100644 --- a/centrifuge-app/src/components/PoolOverview/PoolStructure.tsx +++ b/centrifuge-app/src/components/PoolOverview/PoolStructure.tsx @@ -51,10 +51,6 @@ export const PoolStructure = ({ numOfTranches, poolId, poolStatus, poolFees }: P // metric: 'First investment', // value: firstInvestment ? formatDate(firstInvestment) : '-', // }, - { - metric: 'Available networks', - value: `Centrifuge${deployedLpChains.length ? `, ${deployedLpChains.join(', ')}` : ''}`, - }, ...poolFees.map((fee) => { return { metric: fee.name,