diff --git a/centrifuge-app/src/components/PoolCard/index.tsx b/centrifuge-app/src/components/PoolCard/index.tsx index 22b91605a9..7cf6153033 100644 --- a/centrifuge-app/src/components/PoolCard/index.tsx +++ b/centrifuge-app/src/components/PoolCard/index.tsx @@ -1,31 +1,16 @@ -import { CurrencyBalance, Rate, Token } from '@centrifuge/centrifuge-js' -import { Box, Card, Divider, Stack, Text, Thumbnail } from '@centrifuge/fabric' +import { CurrencyBalance, PoolMetadata, Rate, Token } from '@centrifuge/centrifuge-js' +import { Box, Card, Divider, Shelf, Stack, Text, Thumbnail } from '@centrifuge/fabric' import Decimal from 'decimal.js-light' import { useMemo } from 'react' import styled, { useTheme } from 'styled-components' import { daysBetween } from '../../utils/date' import { formatBalance, formatBalanceAbbreviated, formatPercentage } from '../../utils/formatting' import { CardHeader } from '../ListItemCardStyles' +import { RatingPill } from '../PoolOverview/KeyMetrics' import { RouterTextLink } from '../TextLink' import { Tooltips } from '../Tooltips' import { PoolStatus, PoolStatusKey } from './PoolStatus' -export type InnerMetadata = { - minInitialInvestment?: CurrencyBalance -} - -export type MetaData = { - tranches: { - [key: string]: InnerMetadata - } - pool: { - issuer: { - shortDescription?: string - } - investorType?: string - } -} - type TrancheWithCurrency = Pick const StyledRouterTextLink = styled(RouterTextLink)` @@ -36,7 +21,7 @@ const StyledRouterTextLink = styled(RouterTextLink)` const StyledCard = styled(Card)` width: 100%; max-width: 100%; - height: 320px; + height: 340px; margin-right: 12px; margin-bottom: 12px; padding: 12px; @@ -127,8 +112,9 @@ export type PoolCardProps = { apr?: Rate | null | undefined status?: PoolStatusKey iconUri?: string + isArchive?: boolean tranches?: TrancheWithCurrency[] - metaData?: MetaData + metaData?: PoolMetadata createdAt?: string } @@ -143,16 +129,19 @@ export function PoolCard({ tranches, metaData, createdAt, + isArchive, }: PoolCardProps) { const theme = useTheme() const isOneTranche = tranches && tranches?.length === 1 const isTinlakePool = poolId?.startsWith('0x') + const ratings = metaData?.pool?.poolRatings ?? [] const tinlakeKey = (Object.keys(tinlakeTranches).find( (key) => tinlakeTranches[key as TinlakeTranchesKey].name === name ) || 'none') as TinlakeTranchesKey const renderText = (text: string, isApr?: boolean, seniority?: number) => { + if (isArchive) return if ( (isApr && poolId === NS3_POOL_ID) || (isApr && poolId === DYF_POOL_ID) || @@ -306,6 +295,18 @@ export function PoolCard({ {isTinlakePool ? tinlakeTranches[tinlakeKey].investorType : metaData?.pool?.investorType ?? '-'} + {ratings.length ? ( + + + Rating + + + {ratings.map((rating) => { + return + })} + + + ) : null} ) diff --git a/centrifuge-app/src/components/PoolList.tsx b/centrifuge-app/src/components/PoolList.tsx index 5113ecced6..39b9ffe8ec 100644 --- a/centrifuge-app/src/components/PoolList.tsx +++ b/centrifuge-app/src/components/PoolList.tsx @@ -9,7 +9,7 @@ import { TinlakePool } from '../utils/tinlake/useTinlakePools' import { useIsAboveBreakpoint } from '../utils/useIsAboveBreakpoint' import { useListedPools } from '../utils/useListedPools' import { useMetadataMulti } from '../utils/useMetadata' -import { MetaData, PoolCard, PoolCardProps } from './PoolCard' +import { PoolCard, PoolCardProps } from './PoolCard' import { PoolStatusKey } from './PoolCard/PoolStatus' import { filterPools } from './PoolFilter/utils' @@ -44,7 +44,6 @@ export function PoolList() { const [listedPools, , metadataIsLoading] = useListedPools() const isLarge = useIsAboveBreakpoint('L') const isMedium = useIsAboveBreakpoint('M') - const isExtraLarge = useIsAboveBreakpoint('XL') const centPools = listedPools.filter(({ id }) => !id.startsWith('0x')) as Pool[] const centPoolsMetaData: PoolMetaDataPartial[] = useMetadataMulti( @@ -127,7 +126,6 @@ export function PoolList() { function ArchivedPools({ pools }: { pools: PoolCardProps[] }) { const isMedium = useIsAboveBreakpoint('M') const isLarge = useIsAboveBreakpoint('L') - const isExtraLarge = useIsAboveBreakpoint('XL') return ( @@ -138,7 +136,7 @@ function ArchivedPools({ pools }: { pools: PoolCardProps[] }) { status={pool.status} width={isLarge ? '33%' : isMedium ? '48%' : '100%'} > - + ))} @@ -162,7 +160,7 @@ export function poolsToPoolCardProps( status: getPoolStatus(pool), iconUri: metaData?.pool?.icon?.uri ? cent.metadata.parseMetadataUrl(metaData?.pool?.icon?.uri) : undefined, tranches: pool.tranches, - metaData: metaData as MetaData, + metaData: metaData as PoolMetadata, createdAt: pool.createdAt ?? '', } }) diff --git a/centrifuge-app/src/components/PoolOverview/KeyMetrics.tsx b/centrifuge-app/src/components/PoolOverview/KeyMetrics.tsx index 631449df10..0307b399c4 100644 --- a/centrifuge-app/src/components/PoolOverview/KeyMetrics.tsx +++ b/centrifuge-app/src/components/PoolOverview/KeyMetrics.tsx @@ -46,6 +46,13 @@ type Tranche = Pick & { type TinlakeDataKey = keyof typeof tinlakeData +export type RatingType = { + agency?: string + reportUrl?: string + reportFile?: any + value?: string +} + const ratingIcons: { [key: string]: JSX.Element } = { "Moody's": , Particula: , @@ -90,8 +97,6 @@ export const KeyMetrics = ({ poolId }: Props) => { const poolFees = usePoolFees(poolId) const tranchesIds = pool.tranches.map((tranche) => tranche.id) const dailyTranches = useDailyTranchesStates(tranchesIds) - const theme = useTheme() - const cent = useCentrifuge() const averageMaturity = useAverageMaturity(poolId) const expenseRatio = useMemo(() => { @@ -190,39 +195,8 @@ export const KeyMetrics = ({ poolId }: Props) => { metric: 'Rating', value: ( - {metadata?.pool?.poolRatings.map((rating) => ( - - } - > - - {rating.agency && ratingIcons[rating.agency] ? ratingIcons[rating.agency] : } - {rating.value} - - + {metadata?.pool?.poolRatings.map((rating: RatingType) => ( + ))} ), @@ -275,6 +249,10 @@ const TooltipBody = ({ url?: string links?: { text: string; url: string }[] }) => { + const handleLinkClick = (e: React.MouseEvent) => { + e.stopPropagation() + } + return ( @@ -283,8 +261,8 @@ const TooltipBody = ({ {links ? ( links.map((link, index) => ( - - + + {link.text} @@ -294,7 +272,7 @@ const TooltipBody = ({ )) ) : ( - + {subtitle} @@ -313,7 +291,7 @@ const AvailableNetworks = ({ poolId }: { poolId: string }) => { const renderTooltipBody = (networkName: string, tranches: Tranche[], baseUrl: string) => { const links = tranches.map((tranche) => ({ - text: `View ${tranche.currency.name.split(' ').at(-1)}`, + text: `View Transactions`, url: `${baseUrl}/token/${tranche.id}`, })) @@ -353,3 +331,46 @@ const AvailableNetworks = ({ poolId }: { poolId: string }) => { ) } + +export const RatingPill = ({ agency, reportUrl, reportFile, value, size }: RatingType) => { + const theme = useTheme() + const cent = useCentrifuge() + return ( + + + } + > + + {agency && ratingIcons[agency] ? ratingIcons[agency] : } + + {value} + + + + + ) +}