refactor: PoolCard props

centrifuge-app/src/components/PoolCard/PoolStatus.tsx

@@ -1,20 +1,14 @@
-import { Pool } from '@centrifuge/centrifuge-js'
-import { StatusChip } from '@centrifuge/fabric'
+import { StatusChip, StatusChipProps } from '@centrifuge/fabric'
 import * as React from 'react'
-import { TinlakePool } from '../../utils/tinlake/useTinlakePools'
 
-export function PoolStatus({ pool }: { pool?: Pool | TinlakePool }) {
-  if (!pool) {
-    return <>—</>
-  }
+export type PoolStatusKey = 'Maker Pool' | 'Open for investments' | 'Closed'
 
-  const tinlakePool = pool.id?.startsWith('0x') && (pool as TinlakePool)
+const statusColor: { [key in PoolStatusKey]: StatusChipProps['status'] } = {
+  'Maker Pool': 'ok',
+  'Open for investments': 'info',
+  Closed: 'default',
+}
 
-  return tinlakePool && tinlakePool.addresses.CLERK !== undefined && tinlakePool.tinlakeMetadata.maker?.ilk ? (
-    <StatusChip status="ok">Maker Pool</StatusChip>
-  ) : pool.tranches.at(-1)?.capacity.toFloat() ? (
-    <StatusChip status="info">Open for investments</StatusChip>
-  ) : (
-    <StatusChip status="default">Closed</StatusChip>
-  )
+export function PoolStatus({ status }: { status: PoolStatusKey }) {
+  return <StatusChip status={statusColor[status] ?? 'default'}>{status}</StatusChip>
 }

centrifuge-app/src/components/PoolCard/index.tsx

@@ -1,70 +1,72 @@
-import { Pool } from '@centrifuge/centrifuge-js'
+import { Rate } from '@centrifuge/centrifuge-js'
 import { useCentrifuge } from '@centrifuge/centrifuge-react'
 import { Box, Grid, TextWithPlaceholder, Thumbnail } from '@centrifuge/fabric'
+import Decimal from 'decimal.js-light'
 import * as React from 'react'
 import { useRouteMatch } from 'react-router'
 import { useTheme } from 'styled-components'
 import { formatBalance, formatPercentage } from '../../utils/formatting'
-import { getPoolValueLocked } from '../../utils/getPoolValueLocked'
-import { TinlakePool } from '../../utils/tinlake/useTinlakePools'
-import { usePoolMetadata } from '../../utils/usePools'
 import { Eththumbnail } from '../EthThumbnail'
-import { PoolStatus } from './PoolStatus'
+import { PoolStatus, PoolStatusKey } from './PoolStatus'
 import { Anchor, Ellipsis, Root } from './styles'
-
 // Not passing a pool shows a placeholder card
 
 const columns_base = 'minmax(150px, 1fr) 1fr 140px 70px 150px'
 const columns_extended = 'minmax(150px, 1fr) 1fr 140px 100px 150px'
-const COLUMNS = [columns_base, columns_base, columns_base, columns_extended]
+export const COLUMNS = [columns_base, columns_base, columns_base, columns_extended]
+export const COLUMN_GAPS = [3, 3, 6, 8]
+
+export type PoolCardProps = {
+  poolId: string
+  name: string
+  assetClass: string
+  valueLocked: Decimal
+  currencySymbol: string
+  apr: Rate | null | undefined
+  status: PoolStatusKey
+  iconUri?: string
+}
 
-export function PoolCard({ pool }: { pool?: Pool | TinlakePool }) {
+export function PoolCard({
+  poolId,
+  name,
+  assetClass,
+  valueLocked,
+  currencySymbol,
+  apr,
+  status,
+  iconUri,
+}: PoolCardProps) {
   const cent = useCentrifuge()
-  const { data: metadata } = usePoolMetadata(pool)
-  const mostSeniorTranche = pool?.tranches?.slice(1).at(-1)
-  const apr = mostSeniorTranche?.interestRatePerSec
   const basePath = useRouteMatch(['/pools', '/issuer'])?.path || ''
   const { sizes } = useTheme()
 
   return (
     <Root as="article">
-      <Grid gridTemplateColumns={COLUMNS} gap={[3, 3, 6, 8]} p={2} alignItems="center">
+      <Grid gridTemplateColumns={COLUMNS} gap={COLUMN_GAPS} p={2} alignItems="center">
         <Grid as="header" gridTemplateColumns={`${sizes.iconMedium}px 1fr`} alignItems="center" gap={2}>
-          <Eththumbnail show={pool?.id.startsWith('0x')}>
-            {metadata?.pool?.icon?.uri ? (
-              <Box
-                as="img"
-                src={cent.metadata.parseMetadataUrl(metadata?.pool?.icon?.uri)}
-                alt=""
-                height="iconMedium"
-                width="iconMedium"
-              />
+          <Eththumbnail show={poolId.startsWith('0x')}>
+            {iconUri ? (
+              <Box as="img" src={iconUri} alt="" height="iconMedium" width="iconMedium" />
             ) : (
               <Thumbnail type="pool" label="LP" size="small" />
             )}
           </Eththumbnail>
 
-          <TextWithPlaceholder as="h2" variant="body2" color="textPrimary" isLoading={!metadata}>
-            <Ellipsis>{metadata?.pool?.name}</Ellipsis>
+          <TextWithPlaceholder as="h2" variant="body2" color="textPrimary">
+            <Ellipsis>{name}</Ellipsis>
           </TextWithPlaceholder>
         </Grid>
 
-        <TextWithPlaceholder as="span" variant="body2" color="textSecondary" isLoading={!metadata}>
-          <Ellipsis>{metadata?.pool?.asset.class}</Ellipsis>
+        <TextWithPlaceholder as="span" variant="body2" color="textSecondary">
+          <Ellipsis>{assetClass}</Ellipsis>
         </TextWithPlaceholder>
 
-        <TextWithPlaceholder as="span" variant="body1" color="textPrimary" isLoading={!pool} textAlign="right">
-          <Ellipsis>{pool ? formatBalance(getPoolValueLocked(pool), pool.currency.symbol) : '-'}</Ellipsis>
+        <TextWithPlaceholder as="span" variant="body1" color="textPrimary" textAlign="right">
+          <Ellipsis>{valueLocked ? formatBalance(valueLocked, currencySymbol) : '-'}</Ellipsis>
         </TextWithPlaceholder>
 
-        <TextWithPlaceholder
-          as="span"
-          variant="body1"
-          color="textPrimary"
-          fontWeight={500}
-          isLoading={!pool}
-          textAlign="right"
-        >
+        <TextWithPlaceholder as="span" variant="body1" color="textPrimary" fontWeight={500} textAlign="right">
           <Ellipsis>
             {apr
               ? formatPercentage(apr.toAprPercent(), true, {
@@ -76,11 +78,11 @@ export function PoolCard({ pool }: { pool?: Pool | TinlakePool }) {
         </TextWithPlaceholder>
 
         <Box>
-          <PoolStatus pool={pool} />
+          <PoolStatus status={status} />
         </Box>
       </Grid>
 
-      {!!pool && <Anchor to={`${basePath}/${pool.id}`} aria-label="Go to pool details" />}
+      <Anchor to={`${basePath}/${poolId}`} aria-label="Go to pool details" />
     </Root>
   )
 }

centrifuge-app/src/components/PoolFilter/index.tsx

@@ -1,12 +1,13 @@
 import { Grid, Text } from '@centrifuge/fabric'
 import * as React from 'react'
+import { COLUMNS, COLUMN_GAPS } from '../PoolCard'
 import { poolFilterConfig } from './config'
 import { FilterMenu } from './FilterMenu'
 import { SortButton } from './SortButton'
 
 export function PoolFilter() {
   return (
-    <Grid gridTemplateColumns="repeat(5, minmax(0, 1fr))" alignItems="start">
+    <Grid gridTemplateColumns={COLUMNS} gap={COLUMN_GAPS} alignItems="start">
       <Text>Pool name</Text>
 
       <FilterMenu {...poolFilterConfig.assetClass} />

centrifuge-app/src/components/PoolList.tsx

@@ -1,11 +1,11 @@
-import { Pool } from '@centrifuge/centrifuge-js'
+// import { Pool } from '@centrifuge/centrifuge-js'
 import { Box, Stack } from '@centrifuge/fabric'
 import * as React from 'react'
-import { TinlakePool } from '../utils/tinlake/useTinlakePools'
-import { PoolCard } from './PoolCard'
+// import { TinlakePool } from '../utils/tinlake/useTinlakePools'
+import { PoolCard, PoolCardProps } from './PoolCard'
 
 type PoolListProps = {
-  pools: (Pool | TinlakePool)[]
+  pools: PoolCardProps[]
   isLoading?: boolean
 }
 
@@ -15,16 +15,12 @@ export function PoolList({ pools, isLoading }: PoolListProps) {
       <Stack as="ul" role="list" gap={1} minWidth={900}>
         {pools.map((pool) => {
           return (
-            <Box as="li" key={pool.id}>
-              <PoolCard pool={pool} />
+            <Box as="li" key={pool.poolId}>
+              <PoolCard {...pool} />
             </Box>
           )
         })}
-        {isLoading && (
-          <Box as="li">
-            <PoolCard />
-          </Box>
-        )}
+        {isLoading && <Box as="li">{/* <PoolCard /> */}</Box>}
       </Stack>
     </Box>
   )

centrifuge-app/src/pages/Pools.tsx

@@ -1,19 +1,14 @@
-import Centrifuge, { Pool, Rate } from '@centrifuge/centrifuge-js'
+import Centrifuge, { Pool } from '@centrifuge/centrifuge-js'
 import { useCentrifuge } from '@centrifuge/centrifuge-react'
-import { Box, Grid, Shelf, Stack, Text } from '@centrifuge/fabric'
-import Decimal from 'decimal.js-light'
+import { Shelf, Stack, Text } from '@centrifuge/fabric'
 import * as React from 'react'
 import { useLocation } from 'react-router-dom'
-// import { Shelf, Text } from '@centrifuge/fabric'
-// import * as React from 'react'
 import { LayoutBase } from '../components/LayoutBase'
-// import { CardTotalValueLocked } from '../components/CardTotalValueLocked'
-// import { LoadBoundary } from '../components/LoadBoundary'
-import { MenuSwitch } from '../components/MenuSwitch'
-// import { PageWithSideBar } from '../components/PageWithSideBar'
+import { PoolCardProps } from '../components/PoolCard'
+import { PoolStatusKey } from '../components/PoolCard/PoolStatus'
 import { PoolFilter } from '../components/PoolFilter'
 import { filterPools } from '../components/PoolFilter/utils'
-// import { PoolList } from '../components/PoolList'
+import { PoolList } from '../components/PoolList'
 import { PoolsTokensShared } from '../components/PoolsTokensShared'
 import { getPoolValueLocked } from '../utils/getPoolValueLocked'
 import { TinlakePool } from '../utils/tinlake/useTinlakePools'
@@ -63,53 +58,31 @@ const Pools: React.FC = () => {
     <Stack gap={0} flex={1}>
       <PoolFilter />
 
-      {/* <PoolList
-      pools={filtered ? listedPools.filter(({ reserve }) => reserve.max.toFloat() > 0) : listedPools}
-      isLoading={metadataIsLoading}
-    /> */}
-
-      <Stack gap={1}>
-        {filteredPools?.map((pool) => (
-          <Grid key={pool.name} backgroundColor="pink" gridTemplateColumns="repeat(4, 1fr)">
-            <Box>{pool.name}</Box>
-            <Box>{pool.status}</Box>
-            <Box>{pool.assetClass}</Box>
-            <Box>{pool.valueLocked.toString()}</Box>
-          </Grid>
-        ))}
-      </Stack>
-
-      <MenuSwitch />
+      <PoolList pools={filteredPools} isLoading={metadataIsLoading} />
     </Stack>
   )
 }
 
-// Todo: move to PoolCard
-export type PoolCardProps = {
-  name: string
-  assetClass: string
-  valueLocked: Decimal
-  apr: Rate | null | undefined
-  status: string
-}
-
 async function formatPoolsData(pools: (Pool | TinlakePool)[], cent: Centrifuge): Promise<PoolCardProps[]> {
   const promises = pools.map(async (pool) => {
     const tinlakePool = pool.id?.startsWith('0x') && (pool as TinlakePool)
     const mostSeniorTranche = pool?.tranches?.slice(1).at(-1)
     const metaData = typeof pool.metadata === 'string' ? await metadataQueryFn(pool.metadata, cent) : pool.metadata
 
     return {
+      poolId: pool.id,
       name: metaData.pool.name as string,
       assetClass: metaData.pool.asset.class as string,
       valueLocked: getPoolValueLocked(pool),
+      currencySymbol: pool.currency.symbol,
       apr: mostSeniorTranche?.interestRatePerSec,
       status:
         tinlakePool && tinlakePool.addresses.CLERK !== undefined && tinlakePool.tinlakeMetadata.maker?.ilk
           ? 'Maker Pool'
           : pool.tranches.at(-1)?.capacity.toFloat()
           ? 'Open for investments'
-          : 'Closed',
+          : ('Closed' as PoolStatusKey),
+      iconUri: metaData?.pool?.icon?.uri ? cent.metadata.parseMetadataUrl(metaData?.pool?.icon?.uri) : undefined,
     }
   })
   const data = await Promise.all(promises)