Add table

centrifuge-app/src/components/Dashboard/DashboardTable.tsx

@@ -1,5 +1,130 @@
-import { Pool } from '@centrifuge/centrifuge-js'
+import { CurrencyBalance, Pool, Token } from '@centrifuge/centrifuge-js'
+import { useCentrifuge } from '@centrifuge/centrifuge-react'
+import { Box, Divider, Grid, Text } from '@centrifuge/fabric'
+import Decimal from 'decimal.js-light'
+import { useMemo } from 'react'
+import { useTheme } from 'styled-components'
+import { Dec } from '../../../src/utils/Decimal'
+import { formatBalance } from '../../../src/utils/formatting'
+import { DataTable, SortableTableHeader } from '../DataTable'
+import { useGetPoolsMetadata } from './assets/utils'
+import { calculateApyPerToken } from './utils'
+
+export type Row = {
+  poolIcon: string
+  poolName: string
+  tranches: {
+    tranchetoken: string
+    apy: string
+    navPerToken: CurrencyBalance
+    valueLocked: Decimal
+  }[]
+}
 
 export function DashboardTable({ filteredPools }: { filteredPools: Pool[] }) {
-  return <div>DashboardTable</div>
+  const theme = useTheme()
+  const cent = useCentrifuge()
+  const pools = useGetPoolsMetadata(filteredPools || [])
+
+  const data = useMemo(() => {
+    return pools.map((pool) => {
+      return {
+        poolIcon: cent.metadata.parseMetadataUrl(pool.meta?.pool?.icon?.uri),
+        poolName: pool.meta?.pool?.name,
+        tranches: pool.tranches.map((token: Token) => ({
+          tranchetoken: token.currency.displayName,
+          apy: calculateApyPerToken(token, pool),
+          navPerToken: token.tokenPrice,
+          valueLocked: token?.tokenPrice ? token.totalIssuance.toDecimal().mul(token.tokenPrice.toDecimal()) : Dec(0),
+        })),
+      }
+    })
+  }, [pools])
+
+  const columns = useMemo(() => {
+    return [
+      {
+        header: 'Pool',
+        align: 'left',
+        cell: ({ poolName, poolIcon }: Row) => {
+          return (
+            <Box display="flex" alignItems="center">
+              {poolIcon && <Box as="img" src={poolIcon} alt="" height={24} width={24} borderRadius={4} mr={1} />}
+              <Text style={{ fontWeight: 500 }} variant="body3">
+                {poolName}
+              </Text>
+            </Box>
+          )
+        },
+      },
+      {
+        header: 'Tranche',
+        cell: ({ tranches }: Row) => {
+          return (
+            <Grid gap={2}>
+              {tranches.map((tranche, index) => (
+                <Box key={index}>
+                  <Text variant="body3">{tranche.tranchetoken}</Text>
+                </Box>
+              ))}
+            </Grid>
+          )
+        },
+      },
+      {
+        header: <SortableTableHeader label="APY" />,
+        sortKey: 'tranches.apy',
+        cell: ({ tranches }: Row) => {
+          return (
+            <Grid gap={2}>
+              {tranches.map((tranche, index) => (
+                <Box key={index}>
+                  <Text variant="body3">{tranche.apy}</Text>
+                </Box>
+              ))}
+            </Grid>
+          )
+        },
+      },
+      {
+        header: <SortableTableHeader label="NAV (USDC)" />,
+        sortKey: 'tranches.valueLocked',
+        cell: ({ tranches }: Row) => {
+          return (
+            <Grid gap={2}>
+              {tranches.map((tranche, index) => (
+                <Box key={index}>
+                  <Text variant="body3">{tranche.valueLocked ? formatBalance(tranche.valueLocked) : '-'}</Text>
+                </Box>
+              ))}
+            </Grid>
+          )
+        },
+      },
+      {
+        header: <SortableTableHeader label="NAV per share" />,
+        sortKey: 'tranches.navPerToken',
+        cell: ({ tranches }: Row) => {
+          return (
+            <Grid gap={2}>
+              {tranches.map((tranche, index) => (
+                <Box key={index}>
+                  <Text variant="body3">{tranche.navPerToken ? formatBalance(tranche.navPerToken) : '-'}</Text>
+                </Box>
+              ))}
+            </Grid>
+          )
+        },
+      },
+    ]
+  }, [pools])
+
+  if (!pools.length) return <Text variant="heading4">No data available</Text>
+
+  return (
+    <Box>
+      <DataTable data={data || []} columns={columns} scrollable hideBorder hideHeader />
+      <Divider color={theme.colors.backgroundSecondary} />
+    </Box>
+  )
 }

centrifuge-app/src/components/Dashboard/assets/CreateAssetsDrawer.tsx

@@ -16,7 +16,7 @@ import {
 import { Box, Divider, Drawer, Select } from '@centrifuge/fabric'
 import { BN } from 'bn.js'
 import { Field, FieldProps, Form, FormikProvider, useFormik } from 'formik'
-import { useMemo, useState } from 'react'
+import { useState } from 'react'
 import { Navigate } from 'react-router'
 import { firstValueFrom, lastValueFrom, switchMap } from 'rxjs'
 import { LoadBoundary } from '../../../../src/components/LoadBoundary'
@@ -32,7 +32,7 @@ import {
 import { CreateAssetsForm } from './CreateAssetForm'
 import { FooterActionButtons } from './FooterActionButtons'
 import { UploadAssetTemplateForm } from './UploadAssetTemplateForm'
-import { usePoolMetadataMap, valuesToNftProperties } from './utils'
+import { useGetPoolsMetadata, valuesToNftProperties } from './utils'
 
 export type PoolWithMetadata = Pool & { meta: PoolMetadata }
 
@@ -77,23 +77,11 @@ export function CreateAssetsDrawer({ open, setOpen, type, setType }: CreateAsset
   const api = useCentrifugeApi()
   const centrifuge = useCentrifuge()
   const filteredPools = useFilterPoolsByUserRole(type === 'upload-template' ? ['PoolAdmin'] : ['Borrower', 'PoolAdmin'])
-  const metas = usePoolMetadataMap(filteredPools || [])
+  const poolsMetadata = useGetPoolsMetadata(filteredPools || [])
   const [isUploadingTemplates, setIsUploadingTemplates] = useState(false)
   const [redirect, setRedirect] = useState<string | null>(null)
   const [isLoading, setIsLoading] = useState(false)
 
-  const poolsMetadata = useMemo(() => {
-    return (
-      filteredPools?.map((pool) => {
-        const meta = metas.get(pool.id)
-        return {
-          ...pool,
-          meta,
-        }
-      }) || []
-    )
-  }, [filteredPools, metas])
-
   const [pid, setPid] = useState<string>(poolsMetadata[0].id)
   const [account] = useSuitableAccounts({ poolId: pid, poolRole: ['Borrower'], proxyType: ['Borrow'] })
   const { assetOriginators } = usePoolAccess(pid)

centrifuge-app/src/components/Dashboard/assets/utils.ts

@@ -115,6 +115,19 @@ export function usePoolMetadataMap(pools: Pool[]) {
   return poolMetadataMap
 }
 
+export function useGetPoolsMetadata(pools: Pool[]) {
+  const metas = usePoolMetadataMap(pools)
+  return (
+    pools?.map((pool) => {
+      const meta = metas.get(pool.id)
+      return {
+        ...pool,
+        meta,
+      }
+    }) || []
+  )
+}
+
 export function valuesToNftProperties(values: CreateAssetFormValues['attributes'], template: LoanTemplate) {
   return Object.fromEntries(
     template.sections.flatMap((section) =>

centrifuge-app/src/components/Dashboard/utils.ts

@@ -1,8 +1,11 @@
-import { CurrencyBalance, Pool } from '@centrifuge/centrifuge-js'
+import { CurrencyBalance, Perquintill, Pool, Token } from '@centrifuge/centrifuge-js'
 import Decimal from 'decimal.js-light'
 import { useMemo } from 'react'
+import { daysBetween } from '../../../src/utils/date'
+import { formatPercentage } from '../../../src/utils/formatting'
 import { Dec } from '../../utils/Decimal'
 import { useSubquery } from '../../utils/useSubquery'
+import { CentrifugeTargetAPYs, DYF_POOL_ID, NS3_POOL_ID, centrifugeTargetAPYs } from '../PoolCard'
 
 type FlattenedDataItem = {
   netAssetValue: string
@@ -90,3 +93,24 @@ export function useNavGrowth(pools: Pool[], period: 'YTD' | '90d' | '180d') {
 
   return { growth, isLoading }
 }
+
+const getTrancheText = (trancheToken: Token) => {
+  if (trancheToken.seniority === 0) return 'junior'
+  if (trancheToken.seniority === 1) return 'senior'
+  return 'mezzanine'
+}
+
+export const calculateApyPerToken = (trancheToken: Token, pool: Pool) => {
+  const daysSinceCreation = pool?.createdAt ? daysBetween(new Date(pool.createdAt), new Date()) : 0
+  const poolId = pool.id
+  if (getTrancheText(trancheToken) === 'senior')
+    return formatPercentage(trancheToken?.interestRatePerSec ? trancheToken?.interestRatePerSec.toAprPercent() : Dec(0))
+  if (trancheToken.seniority === 0) return '15%'
+  if (poolId === DYF_POOL_ID) return centrifugeTargetAPYs[poolId as CentrifugeTargetAPYs][0]
+  if (poolId === NS3_POOL_ID && trancheToken.seniority === 0)
+    return centrifugeTargetAPYs[poolId as CentrifugeTargetAPYs][0]
+  if (poolId === NS3_POOL_ID && trancheToken.seniority === 1)
+    return centrifugeTargetAPYs[poolId as CentrifugeTargetAPYs][1]
+  if (daysSinceCreation < 30) return 'N/A'
+  return trancheToken.yieldSinceInception ? formatPercentage(new Perquintill(trancheToken.yieldSinceInception)) : '-'
+}

centrifuge-app/src/components/DataTable.tsx

@@ -52,6 +52,7 @@ export type DataTableProps<T = any> = {
   page?: number
   hideHeader?: boolean
   hideBorder?: boolean
+  rowProps?: React.HTMLAttributes<HTMLDivElement>
 } & GroupedProps
 
 export type OrderBy = 'asc' | 'desc'
@@ -103,6 +104,7 @@ export const DataTable = <T extends Record<string, any>>({
   hideHeader,
   scrollable = false,
   hideBorder,
+  rowProps,
 }: DataTableProps<T>) => {
   const theme = useTheme()
   const tableRef = React.useRef<HTMLDivElement>(null)
@@ -185,6 +187,7 @@ export const DataTable = <T extends Record<string, any>>({
           key={keyField ? row[keyField] : i}
           tabIndex={onRowClicked ? 0 : undefined}
           hideBorder={hideBorder}
+          {...rowProps}
         >
           {columns.map((col, index) => (
             <DataCol variant="body2" align={col?.align} key={index} isLabel={col.isLabel}>
@@ -203,6 +206,7 @@ export const DataTable = <T extends Record<string, any>>({
             key={keyField ? row[keyField] : i}
             tabIndex={onRowClicked ? 0 : undefined}
             hideBorder={hideBorder}
+            {...rowProps}
           >
             {columns.map((col, index) => (
               <DataCol