Add rating to pool card and cleanup

centrifuge · Oct 21, 2024 · 62466bb · 62466bb
1 parent ad61a2e
commit 62466bb
Show file tree

Hide file tree

Showing 3 changed files with 84 additions and 64 deletions.
diff --git 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<Token, 'yield30DaysAnnualized' | 'interestRatePerSec' | 'currency' | 'id' | 'seniority'>
 
 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 ?? '-'}
           </StyledText>
         </Box>
+        {ratings.length ? (
+          <Box mt={2} mb={2} display="flex" justifyContent="space-between" alignItems="center">
+            <Text variant="body2" color="textSecondary">
+              Rating
+            </Text>
+            <Shelf gap={1}>
+              {ratings.map((rating) => {
+                return <RatingPill {...rating} />
+              })}
+            </Shelf>
+          </Box>
+        ) : null}
       </StyledCard>
     </RouterTextLink>
   )

diff --git 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<PoolMetadata>(
@@ -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 (
     <Stack gap={1} overflow="auto">
       <Box as="ul" role="list" display="flex" flexWrap="wrap">
@@ -138,7 +136,7 @@ function ArchivedPools({ pools }: { pools: PoolCardProps[] }) {
             status={pool.status}
             width={isLarge ? '33%' : isMedium ? '48%' : '100%'}
           >
-            <PoolCard {...pool} />
+            <PoolCard {...pool} isArchive />
           </PoolCardBox>
         ))}
       </Box>
@@ -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
@@ -46,6 +46,13 @@ type Tranche = Pick<DailyTrancheState, 'id'> & {
 
 type TinlakeDataKey = keyof typeof tinlakeData
 
+export type RatingType = {
+  agency?: string
+  reportUrl?: string
+  reportFile?: any
+  value?: string
+}
+
 const ratingIcons: { [key: string]: JSX.Element } = {
   "Moody's": <IconMoody size={16} />,
   Particula: <IconParticula size={16} />,
@@ -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: (
               <Shelf gap={1}>
-                {metadata?.pool?.poolRatings.map((rating) => (
-                  <Tooltip
-                    bodyWidth="maxContent"
-                    body={
-                      <TooltipBody
-                        title={rating.agency ?? ''}
-                        links={[
-                          { text: 'Go to report', url: rating.reportUrl ?? '' },
-                          ...(rating.reportFile
-                            ? [
-                                {
-                                  text: 'View PDF report',
-                                  url: cent.metadata.parseMetadataUrl(rating.reportFile?.uri ?? ''),
-                                },
-                              ]
-                            : []),
-                        ]}
-                      />
-                    }
-                  >
-                    <Box
-                      border={`1px solid ${theme.colors.backgroundInverted}`}
-                      borderRadius={20}
-                      padding="2px 10px"
-                      display="flex"
-                      alignItems="center"
-                      width={80}
-                      justifyContent="center"
-                    >
-                      {rating.agency && ratingIcons[rating.agency] ? ratingIcons[rating.agency] : <IconSp size={16} />}
-                      <Text style={{ marginLeft: 4 }}>{rating.value}</Text>
-                    </Box>
-                  </Tooltip>
+                {metadata?.pool?.poolRatings.map((rating: RatingType) => (
+                  <RatingPill {...rating} />
                 ))}
               </Shelf>
             ),
@@ -275,6 +249,10 @@ const TooltipBody = ({
   url?: string
   links?: { text: string; url: string }[]
 }) => {
+  const handleLinkClick = (e: React.MouseEvent) => {
+    e.stopPropagation()
+  }
+
   return (
     <Box backgroundColor="backgroundInverted" display="flex" alignItems="center" borderRadius="8px">
       <Box display="flex" flexDirection="column" marginRight="12px">
@@ -283,8 +261,8 @@ const TooltipBody = ({
         </Text>
         {links ? (
           links.map((link, index) => (
-            <Shelf>
-              <a key={`${link.text}-${index}`} target="_blank" rel="noopener noreferrer" href={link.url}>
+            <Shelf key={`${link.text}-${index}`}>
+              <a href={link.url} target="_blank" rel="noopener noreferrer" onClick={handleLinkClick}>
                 <Text variant="body3" color="white">
                   {link.text}
                 </Text>
@@ -294,7 +272,7 @@ const TooltipBody = ({
           ))
         ) : (
           <Shelf>
-            <a target="_blank" rel="noopener noreferrer" href={url}>
+            <a href={url} target="_blank" rel="noopener noreferrer" onClick={handleLinkClick}>
               <Text variant="body3" color="white">
                 {subtitle}
               </Text>
@@ -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 }) => {
     </Shelf>
   )
 }
+
+export const RatingPill = ({ agency, reportUrl, reportFile, value, size }: RatingType) => {
+  const theme = useTheme()
+  const cent = useCentrifuge()
+  return (
+    <Box key={`${agency}-${reportUrl}`}>
+      <Tooltip
+        bodyWidth="maxContent"
+        body={
+          <TooltipBody
+            title={agency ?? ''}
+            links={[
+              { text: 'Go to report', url: reportUrl ?? '' },
+              ...(reportFile
+                ? [
+                    {
+                      text: 'View PDF report',
+                      url: cent.metadata.parseMetadataUrl(reportFile?.uri ?? ''),
+                    },
+                  ]
+                : []),
+            ]}
+          />
+        }
+      >
+        <Box
+          border={`1px solid ${theme.colors.backgroundInverted}`}
+          borderRadius={20}
+          padding="2px 0px"
+          display="flex"
+          alignItems="center"
+          width={70}
+          justifyContent="center"
+        >
+          {agency && ratingIcons[agency] ? ratingIcons[agency] : <IconSp size={16} />}
+          <Text variant="body2" style={{ marginLeft: 4 }}>
+            {value}
+          </Text>
+        </Box>
+      </Tooltip>
+    </Box>
+  )
+}