add new sdk to current app

centrifuge-app/package.json

@@ -29,7 +29,7 @@
     "@centrifuge/centrifuge-js": "workspace:*",
     "@centrifuge/centrifuge-react": "workspace:*",
     "@centrifuge/fabric": "workspace:*",
-    "@centrifuge/sdk": "^0.0.0-alpha.0",
+    "@centrifuge/sdk": "^0.0.0-alpha.11",
     "@makerdao/multicall": "^0.12.0",
     "@polkadot/react-identicon": "~3.1.4",
     "@styled-system/css": "^5.1.5",

centrifuge-app/src/components/Charts/SimpleBarChart.tsx

@@ -1,16 +1,17 @@
-import { CurrencyBalance, CurrencyMetadata } from '@centrifuge/centrifuge-js'
-import { Shelf, Text } from '@centrifuge/fabric'
+import { CurrencyMetadata } from '@centrifuge/centrifuge-js'
+import { Box, Shelf, Text } from '@centrifuge/fabric'
+import { Currency } from '@centrifuge/sdk'
 import { Bar, BarChart, CartesianGrid, ReferenceLine, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts'
 import { useTheme } from 'styled-components'
 import { formatDate } from '../../../src/utils/date'
-import { formatBalance, formatBalanceAbbreviated } from '../../../src/utils/formatting'
+import { formatDecimal, formatDecimalAbbreviated } from '../../../src/utils/formatting'
 import { LoadBoundary } from '../LoadBoundary'
 import { CustomTick } from './PoolPerformanceChart'
 import { TooltipContainer, TooltipTitle } from './Tooltip'
 
 type SimpleBarChartProps = {
   currency?: CurrencyMetadata
-  data: { name: string; yAxis: number }[]
+  data: { name: string; yAxis: Currency }[]
   groupBy?: string
 }
 
@@ -62,10 +63,7 @@ export const SimpleBarChart = ({ currency, data, groupBy }: SimpleBarChartProps)
             angle={45}
           />
           <YAxis
-            tickFormatter={(tick: number) => {
-              const balance = new CurrencyBalance(tick, currency?.decimals || 0)
-              return formatBalanceAbbreviated(balance, '', 0)
-            }}
+            tickFormatter={(tick: any) => formatDecimalAbbreviated(tick, 0)}
             tick={{ fontSize: 10, color: theme.colors.textPrimary }}
             tickLine={false}
             axisLine={false}
@@ -79,10 +77,14 @@ export const SimpleBarChart = ({ currency, data, groupBy }: SimpleBarChartProps)
               if (payload && payload?.length > 0) {
                 return (
                   <TooltipContainer>
-                    <TooltipTitle>{formatDate(payload[0].payload.name)}</TooltipTitle>
-                    {payload.map((item) => (
-                      <Text variant="body3">{formatBalance(item.value as number, currency)}</Text>
-                    ))}
+                    {payload.map((item) => {
+                      return (
+                        <Box>
+                          <TooltipTitle>{formatDate(item.payload.name)}</TooltipTitle>
+                          <Text variant="body3">{formatDecimal(item.value, 2, currency?.displayName)}</Text>
+                        </Box>
+                      )
+                    })}
                   </TooltipContainer>
                 )
               }

centrifuge-app/src/components/Report/AssetList.tsx

@@ -1,17 +1,19 @@
 import { Pool } from '@centrifuge/centrifuge-js'
 import { Box, Text } from '@centrifuge/fabric'
+import { AssetListReport } from '@centrifuge/sdk/dist/types/reports'
 import { useContext, useEffect, useMemo } from 'react'
 import { useBasePath } from '../../../src/utils/useBasePath'
 import { formatDate } from '../../utils/date'
-import { formatBalance, formatPercentage } from '../../utils/formatting'
+import { formatDecimal, formatPercentage } from '../../utils/formatting'
 import { getCSVDownloadUrl } from '../../utils/getCSVDownloadUrl'
-import { useAllPoolAssetSnapshots, usePoolMetadata } from '../../utils/usePools'
+import { usePoolMetadata } from '../../utils/usePools'
 import { DataTable, SortableTableHeader } from '../DataTable'
 import { Spinner } from '../Spinner'
 import { RouterTextLink } from '../TextLink'
 import { ReportContext } from './ReportContext'
 import { UserFeedback } from './UserFeedback'
 import type { TableDataRow } from './index'
+import { useReport } from './useReportsQuery'
 
 const noop = (v: any) => v
 
@@ -21,7 +23,12 @@ const valuationLabels = {
   oracle: 'Fungible asset - external pricing',
 }
 
-function getColumnConfig(isPrivate: boolean, symbol: string) {
+type AssetSnapshot = AssetListReport & {
+  transactionType: 'ACTIVE' | string
+  name: string
+}
+
+function getColumnConfig(isPrivate: boolean, symbol: string, decimals: number) {
   if (isPrivate) {
     return [
       { header: 'Name', align: 'left', csvOnly: false, formatter: noop },
@@ -30,42 +37,42 @@ function getColumnConfig(isPrivate: boolean, symbol: string) {
         align: 'left',
         csvOnly: false,
         sortable: true,
-        formatter: (v: any) => (v ? formatBalance(v, symbol, 2) : '-'),
+        formatter: (v: any) => (v ? formatDecimal(v, 2, symbol) : '-'),
       },
       {
         header: 'Principal outstanding',
         align: 'left',
         csvOnly: false,
         sortable: true,
-        formatter: (v: any) => (v ? formatBalance(v, symbol, 2) : '-'),
+        formatter: (v: any) => (v ? formatDecimal(v, 2, symbol) : '-'),
       },
       {
         header: 'Interest outstanding',
         align: 'left',
         csvOnly: false,
         sortable: true,
-        formatter: (v: any) => (v ? formatBalance(v, symbol, 2) : '-'),
+        formatter: (v: any) => (v ? formatDecimal(v, 2, symbol) : '-'),
       },
       {
         header: 'Principal repaid',
         align: 'left',
         csvOnly: false,
         sortable: true,
-        formatter: (v: any) => (v ? formatBalance(v, symbol, 2) : '-'),
+        formatter: (v: any) => (v ? formatDecimal(v, 2, symbol) : '-'),
       },
       {
         header: 'Interest repaid',
         align: 'left',
         csvOnly: false,
         sortable: true,
-        formatter: (v: any) => (v ? formatBalance(v, symbol, 2) : '-'),
+        formatter: (v: any) => (v ? formatDecimal(v, 2, symbol) : '-'),
       },
       {
         header: 'Additional repaid',
         align: 'left',
         csvOnly: false,
         sortable: true,
-        formatter: (v: any) => (v ? formatBalance(v, symbol, 2) : '-'),
+        formatter: (v: any) => (v ? formatDecimal(v, 2, symbol) : '-'),
       },
       {
         header: 'Origination date',
@@ -98,25 +105,25 @@ function getColumnConfig(isPrivate: boolean, symbol: string) {
         header: 'Collateral value',
         align: 'left',
         csvOnly: false,
-        formatter: (v: any) => (v ? formatBalance(v, symbol, 2) : '-'),
+        formatter: (v: any) => (v ? formatDecimal(v, 2, symbol) : '-'),
       },
       {
         header: 'Probability of default (PD)',
         align: 'left',
         csvOnly: false,
-        formatter: (v: any) => (v ? formatBalance(v, symbol, 2) : '-'),
+        formatter: (v: any) => (v ? formatDecimal(v, 2, symbol) : '-'),
       },
       {
         header: 'Loss given default (LGD)',
         align: 'left',
         csvOnly: false,
-        formatter: (v: any) => (v ? formatBalance(v, symbol, 2) : '-'),
+        formatter: (v: any) => (v ? formatDecimal(v, 2, symbol) : '-'),
       },
       {
         header: 'Discount rate',
         align: 'left',
         csvOnly: false,
-        formatter: (v: any) => (v ? formatBalance(v, symbol, 2) : '-'),
+        formatter: (v: any) => (v ? formatDecimal(v, 2, symbol) : '-'),
       },
     ]
   } else {
@@ -127,28 +134,28 @@ function getColumnConfig(isPrivate: boolean, symbol: string) {
         align: 'left',
         csvOnly: false,
         sortable: true,
-        formatter: (v: any) => (v ? formatBalance(v, symbol, 2) : '-'),
+        formatter: (v: any) => (v ? formatDecimal(v, 2, symbol) : '-'),
       },
       {
         header: 'Face value',
         align: 'left',
         csvOnly: false,
         sortable: true,
-        formatter: (v: any) => (v ? formatBalance(v, symbol, 2) : '-'),
+        formatter: (v: any) => (v ? formatDecimal(v, 2, symbol) : '-'),
       },
       {
         header: 'Quantity',
         align: 'left',
         csvOnly: false,
         sortable: true,
-        formatter: (v: any) => (v ? formatBalance(v, undefined, 2) : '-'),
+        formatter: (v: any) => (v ? formatDecimal(v, 2, '') : '-'),
       },
       {
         header: 'Market price',
         align: 'left',
         csvOnly: false,
         sortable: true,
-        formatter: (v: any) => (v ? formatBalance(v, symbol, 2) : '-'),
+        formatter: (v: any) => (v ? formatDecimal(v, 2, symbol) : '-'),
       },
       {
         header: 'Maturity date',
@@ -162,28 +169,40 @@ function getColumnConfig(isPrivate: boolean, symbol: string) {
         align: 'left',
         csvOnly: false,
         sortable: true,
-        formatter: (v: any) => (v ? formatBalance(v, symbol, 2) : '-'),
+        formatter: (v: any) => (v ? formatDecimal(v, 2, symbol) : '-'),
       },
       {
         header: 'Realized profit',
         align: 'left',
         csvOnly: false,
         sortable: true,
-        formatter: (v: any) => (v ? formatBalance(v, symbol, 2) : '-'),
+        formatter: (v: any) => (v ? formatDecimal(v, 2, symbol) : '-'),
       },
     ]
   }
 }
 
 export function AssetList({ pool }: { pool: Pool }) {
   const basePath = useBasePath()
-  const { loanStatus, startDate, setCsvData } = useContext(ReportContext)
+  const { loanStatus, startDate, setCsvData, endDate } = useContext(ReportContext)
   const { data: poolMetadata } = usePoolMetadata(pool)
-  const { symbol } = pool.currency
+  const { symbol, decimals } = pool.currency
   const poolCreditType = poolMetadata?.pool?.asset.class || 'privateCredit'
-  const { data: snapshots } = useAllPoolAssetSnapshots(pool.id, startDate)
   const isPrivate = poolCreditType === 'Private credit' || poolCreditType === 'privateCredit'
-  const columnConfig = getColumnConfig(isPrivate, symbol)
+  const columnConfig = getColumnConfig(isPrivate, symbol, decimals)
+
+  const { data: snapshots = [], isLoading } = useReport(
+    'assetList',
+    pool,
+    new Date(startDate),
+    new Date(endDate),
+    undefined,
+    {
+      ...(loanStatus && { status: loanStatus }),
+    }
+  )
+
+  console.log(snapshots, isPrivate)
 
   const columns = useMemo(
     () =>
@@ -213,16 +232,14 @@ export function AssetList({ pool }: { pool: Pool }) {
   const data = useMemo((): any[] => {
     if (!snapshots) return []
 
-    return snapshots
+    return (snapshots as AssetSnapshot[])
       .filter((snapshot) => snapshot?.valuationMethod?.toLowerCase() !== 'cash')
       .filter((snapshot) => {
-        const isMaturityDatePassed = snapshot?.actualMaturityDate
-          ? new Date() > new Date(snapshot.actualMaturityDate)
-          : false
-        const isDebtZero = snapshot?.outstandingDebt?.isZero()
+        const isMaturityDatePassed = snapshot?.maturityDate ? new Date() > new Date(snapshot.maturityDate) : false
+        const isDebtZero = 'outstandingQuantity' in snapshot ? snapshot.outstandingQuantity?.isZero() : false
 
         if (loanStatus === 'ongoing') {
-          return snapshot.status === 'ACTIVE' && !isMaturityDatePassed && !isDebtZero
+          return snapshot.transactionType === 'ACTIVE' && !isMaturityDatePassed && !isDebtZero
         } else if (loanStatus === 'repaid') {
           return isMaturityDatePassed && isDebtZero
         } else if (loanStatus === 'overdue') {
@@ -231,12 +248,13 @@ export function AssetList({ pool }: { pool: Pool }) {
       })
       .sort((a, b) => {
         // Sort by actualMaturityDate in descending order
-        const dateA = new Date(a.actualMaturityDate || 0).getTime()
-        const dateB = new Date(b.actualMaturityDate || 0).getTime()
+        const dateA = new Date(a.maturityDate || 0).getTime()
+        const dateB = new Date(b.maturityDate || 0).getTime()
         return dateB - dateA
       })
       .map((snapshot) => {
-        const valuationMethod = snapshot?.valuationMethod as keyof typeof valuationLabels
+        const valuationMethod =
+          'valuationMethod' in snapshot ? (snapshot.valuationMethod as keyof typeof valuationLabels) : ''
         if (isPrivate) {
           return {
             name: '',
@@ -245,10 +263,10 @@ export function AssetList({ pool }: { pool: Pool }) {
               snapshot?.presentValue,
               snapshot?.outstandingPrincipal,
               snapshot?.outstandingInterest,
-              snapshot?.totalRepaidPrincipal,
-              snapshot?.totalRepaidInterest,
-              snapshot?.totalRepaidUnscheduled,
-              snapshot?.actualOriginationDate,
+              snapshot?.repaidPrincipal,
+              snapshot?.repaidInterest,
+              snapshot?.repaidUnscheduled,
+              snapshot?.originationDate,
               snapshot?.actualMaturityDate,
               valuationMethod || snapshot?.valuationMethod,
               snapshot?.advanceRate,
@@ -269,9 +287,9 @@ export function AssetList({ pool }: { pool: Pool }) {
               snapshot?.faceValue,
               snapshot?.outstandingQuantity,
               snapshot?.currentPrice,
-              snapshot?.actualMaturityDate,
-              snapshot?.unrealizedProfitAtMarketPrice,
-              snapshot?.sumRealizedProfitFifo,
+              snapshot?.maturityDate,
+              snapshot?.unrealizedProfit,
+              snapshot?.realizedProfit,
             ],
             heading: false,
             id: snapshot?.assetId,
@@ -304,7 +322,7 @@ export function AssetList({ pool }: { pool: Pool }) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [data])
 
-  if (!snapshots) {
+  if (isLoading) {
     return <Spinner />
   }