Update pool list view for archived

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

@@ -0,0 +1,43 @@
+import { Box, Grid, Text } from '@centrifuge/fabric'
+import { useTheme } from 'styled-components'
+import { PoolCardProps } from '.'
+import { formatBalance, formatPercentage } from '../../../src/utils/formatting'
+import { PoolStatus } from './PoolStatus'
+
+export const PoolListView = ({
+  poolId,
+  assetClass,
+  valueLocked,
+  iconUri,
+  tranches,
+  name,
+  currencySymbol,
+  status,
+  createdAt,
+  ...pool
+}: PoolCardProps) => {
+  const theme = useTheme()
+  const calculateApy = () => {
+    const APR = tranches?.find((tranche) => tranche.interestRatePerSec)?.interestRatePerSec
+    if (APR) return formatPercentage(APR.toAprPercent(), true, {}, 1)
+    else return '-'
+  }
+  return (
+    <Grid
+      gridTemplateColumns={['24px 1fr 1fr 1fr 70px 70px']}
+      alignItems="center"
+      border={`1px solid ${theme.colors.borderPrimary}`}
+      borderRadius={8}
+      padding={2}
+      boxShadow={`0 -1px 0 ${theme.colors.borderPrimary}`}
+      gap={1}
+    >
+      <Box as="img" width="iconMedium" height="iconMedium" src={iconUri} borderRadius={4} />
+      <Text variant="body2">{name}</Text>
+      <Text variant="body2">{assetClass}</Text>
+      <Text variant="body2">{formatBalance(valueLocked || 0, currencySymbol)}</Text>
+      <Text>{calculateApy()}</Text>
+      <PoolStatus status={status} />
+    </Grid>
+  )
+}

centrifuge-app/src/components/PoolList.tsx

@@ -9,6 +9,7 @@ import { TinlakePool } from '../utils/tinlake/useTinlakePools'
 import { useListedPools } from '../utils/useListedPools'
 import { useMetadataMulti } from '../utils/useMetadata'
 import { PoolCard, PoolCardProps } from './PoolCard'
+import { PoolListView } from './PoolCard/PoolListView'
 import { PoolStatusKey } from './PoolCard/PoolStatus'
 import { filterPools } from './PoolFilter/utils'
 
@@ -118,10 +119,10 @@ export function PoolList() {
 function ArchivedPools({ pools }: { pools: PoolCardProps[] }) {
   return (
     <Stack gap={1} overflow="auto">
-      <Grid columns={[1, 2, 2, 3]} as="ul" role="list" gap={3}>
+      <Grid columns={[1]} as="ul" role="list" gap={1}>
         {pools.map((pool) => (
           <PoolCardBox as="li" key={pool.poolId} status={pool.status}>
-            <PoolCard {...pool} isArchive />
+            <PoolListView {...pool} />
           </PoolCardBox>
         ))}
       </Grid>