WIP - tranche tokens table

centrifuge-app/src/components/PoolOverview/TrancheTokenCards.tsx

@@ -1,42 +1,100 @@
 import { Perquintill } from '@centrifuge/centrifuge-js'
 import { Box, Shelf, Stack, Text } from '@centrifuge/fabric'
+import { useMemo } from 'react'
 import { InvestButton, Token } from '../../pages/Pool/Overview'
 import { daysBetween } from '../../utils/date'
 import { formatBalance, formatPercentage } from '../../utils/formatting'
 import { useIsAboveBreakpoint } from '../../utils/useIsAboveBreakpoint'
+import { DataTable } from '../DataTable'
 import { Tooltips } from '../Tooltips'
 
 export const TrancheTokenCards = ({
   trancheTokens,
   poolId,
   createdAt,
-  poolCurrencySymbol,
+  poolCurrency,
+  pool,
 }: {
   trancheTokens: Token[]
   poolId: string
   createdAt: string | null
-  poolCurrencySymbol: string
+  poolCurrency: { symbol: string; decimals: number }
 }) => {
+  const isTinlakePool = poolId.startsWith('0x')
   const seniorTranche = Math.max(...trancheTokens.map((trancheToken) => trancheToken.seniority))
+  const daysSinceCreation = createdAt ? daysBetween(new Date(createdAt), new Date()) : 0
+
   const getTrancheText = (trancheToken: Token) => {
     if (seniorTranche === trancheToken.seniority) return 'senior'
     if (trancheToken.seniority === 0) return 'junior'
     return 'mezzanine'
   }
 
+  const calculateApy = (trancheToken) => {
+    if (isTinlakePool && getTrancheText(trancheToken) === 'senior') return formatPercentage(trancheToken.apy)
+    if (daysSinceCreation < 30) return 'N/A'
+    return formatPercentage(new Perquintill(trancheToken.yield30DaysAnnualized))
+  }
+
+  console.log(trancheTokens)
+
+  const columnConfig = useMemo(
+    () => [
+      {
+        header: 'Token',
+        align: 'left',
+        formatter: (v: any) => v,
+      },
+      {
+        header: 'APY',
+        align: 'left',
+        formatter: (v: any) => (v ? calculateApy(v) : '-'),
+      },
+      {
+        header: `TVL (${poolCurrency.symbol})`,
+        align: 'left',
+        formatter: (v: any) => (v ? formatBalance(v) : '-'),
+      },
+      {
+        header: 'Token price',
+        align: 'left',
+        formatter: (v: any) => (v ? formatBalance(v, poolCurrency.symbol, poolCurrency.decimals) : '-'),
+      },
+      {
+        header: 'Subordination',
+        align: 'left',
+        formatter: (_: any, row: any) => '-',
+      },
+      {
+        header: '',
+        align: 'left',
+        formatter: (_: any, row: any) => '-',
+      },
+    ],
+    [poolCurrency]
+  )
+
+  const columns = useMemo(() => {
+    return columnConfig.map((col, index) => {
+      return {
+        align: col.align,
+        header: col.header,
+        cell: (row: any) => <Text variant="body3">{col.formatter(row.value[index], row)}</Text>,
+      }
+    })
+  }, [columnConfig])
+
+  const dataTable = useMemo(() => {
+    return trancheTokens.map((tranche) => ({
+      value: [tranche.name, tranche, tranche.valueLocked, tranche.tokenPrice],
+    }))
+  }, [trancheTokens])
+
   return (
     <Shelf gap={3}>
-      {trancheTokens?.map((trancheToken) => (
-        <TrancheTokenCard
-          trancheToken={trancheToken}
-          key={trancheToken.id}
-          poolId={poolId}
-          createdAt={createdAt}
-          numOfTrancheTokens={trancheTokens?.length}
-          poolCurrencySymbol={poolCurrencySymbol}
-          trancheText={getTrancheText(trancheToken)}
-        />
-      ))}
+      <Box marginY={2} backgroundColor="white" borderRadius="card" width="100%" overflow="auto">
+        <DataTable columns={columns} data={dataTable} />
+      </Box>
     </Shelf>
   )
 }
@@ -69,16 +127,57 @@ const TrancheTokenCard = ({
           daysSinceCreation < 30 && !isTinlakePool ? ' APY displayed after 30 days following token launch.' : ''
         }`
 
-  const calculateApy = () => {
-    if (poolId === '4139607887') return formatPercentage(5)
-    if (poolId === '1655476167') return formatPercentage(15)
-    if (isTinlakePool && trancheText === 'senior') return formatPercentage(trancheToken.apy)
-    if (daysSinceCreation < 30 || !trancheToken.yield30DaysAnnualized) return 'N/A'
-    return formatPercentage(new Perquintill(trancheToken.yield30DaysAnnualized))
-  }
+  const columns = useMemo(() => {
+    return [
+      {
+        align: 'left',
+        header: 'Token',
+        cell: (row) => console.log(row),
+      },
+      {
+        align: 'left',
+        header: 'APY',
+        cell: (row) => row,
+      },
+      {
+        align: 'left',
+        header: `TVL (${poolCurrencySymbol})`,
+        cell: (row) => row,
+      },
+      {
+        align: 'left',
+        header: 'Token price',
+        cell: (row) => row,
+      },
+      {
+        align: 'left',
+        header: 'Subordination',
+        cell: (row) => row,
+      },
+      {
+        align: 'left',
+        header: '',
+        cell: (row) => row,
+      },
+    ]
+  }, [])
+
+  const tableData = [trancheToken.name, trancheToken.apy, trancheToken.valueLocked, trancheToken.tokenPrice]
+
+  const data = useMemo(() => {
+    return trancheToken
+  }, [])
+
+  console.log(trancheToken)
+
+  return (
+    <Box marginY={2} backgroundColor="white" borderRadius="card" width="100%" overflow="auto">
+      <DataTable columns={columns} data={[]} />
+    </Box>
+  )
 
   return (
-    <Box p={2} backgroundColor="white" borderRadius="card" width="100%" overflow="auto">
+    <Box p={2} marginY={2} backgroundColor="white" borderRadius="card" width="100%" overflow="auto">
       <Stack height="100%" justifyContent="space-between" gap={2}>
         <Text fontSize="12px" variant="body3">
           {trancheToken.name} ({trancheToken.symbol})

centrifuge-app/src/pages/Pool/Overview/index.tsx

@@ -137,7 +137,7 @@ export function PoolDetailOverview() {
               trancheTokens={tokens}
               poolId={poolId}
               createdAt={pool.createdAt}
-              poolCurrencySymbol={pool.currency.symbol}
+              poolCurrency={pool.currency}
             />
           </React.Suspense>
         )}