From 98f067f6d76d47efddf315ba1f0db3403857954b Mon Sep 17 00:00:00 2001 From: Onno Visser <23527729+onnovisser@users.noreply.github.com> Date: Tue, 17 Oct 2023 15:21:14 +0200 Subject: [PATCH 1/9] asset allocation --- .../components/Portfolio/AssetAllocation.tsx | 103 +++++++++++++++--- .../components/Portfolio/AssetClassChart.tsx | 31 ++++++ centrifuge-app/src/config.ts | 27 +++-- .../src/pages/IssuerCreatePool/index.tsx | 42 ++++++- .../src/pages/IssuerCreatePool/validate.ts | 1 + .../IssuerPool/Configuration/Details.tsx | 44 +++++++- .../src/pages/Pool/Overview/index.tsx | 2 +- centrifuge-app/src/pages/Portfolio/index.tsx | 2 +- .../src/utils/tinlake/useTinlakePools.ts | 3 +- centrifuge-app/src/utils/usePools.ts | 32 +++++- centrifuge-js/src/modules/pools.ts | 8 +- 11 files changed, 246 insertions(+), 49 deletions(-) create mode 100644 centrifuge-app/src/components/Portfolio/AssetClassChart.tsx diff --git a/centrifuge-app/src/components/Portfolio/AssetAllocation.tsx b/centrifuge-app/src/components/Portfolio/AssetAllocation.tsx index 53428fd1d0..e36bdf369d 100644 --- a/centrifuge-app/src/components/Portfolio/AssetAllocation.tsx +++ b/centrifuge-app/src/components/Portfolio/AssetAllocation.tsx @@ -1,26 +1,99 @@ import { useBalances } from '@centrifuge/centrifuge-react' -import { Box, Text } from '@centrifuge/fabric' +import { Box, Shelf, Stack, Text } from '@centrifuge/fabric' +import Decimal from 'decimal.js-light' import * as React from 'react' -import { useAddress } from '../../utils/useAddress' +import { useTheme } from 'styled-components' +import { Dec } from '../../utils/Decimal' +import { formatBalanceAbbreviated } from '../../utils/formatting' +import { usePoolMetadataMulti, usePools } from '../../utils/usePools' +import { LabelValueStack } from '../LabelValueStack' +import { AssetClassChart } from './AssetClassChart' -export function AssetAllocation() { - const address = useAddress() +const assetClassLabels = { + privateCredit: 'Private Credit', + publicCredit: 'Public Credit', +} +type AssetClass = 'publicCredit' | 'privateCredit' + +export function AssetAllocation({ address }: { address: string }) { const balances = useBalances(address) + const pools = usePools() + const theme = useTheme() + const poolIds = new Set(balances?.tranches.map((t) => t.poolId)) + const filteredPools = pools?.filter((p) => poolIds.has(p.id)) ?? [] + const metas = usePoolMetadataMulti(filteredPools) + const assetClasses = [...new Set(metas.map((m) => m.data?.pool?.asset?.class as string).filter(Boolean))] + const valueByClass: Record = Object.fromEntries(assetClasses.map((item) => [item, Dec(0)])) + balances?.tranches.forEach((balance) => { + const poolIndex = filteredPools.findIndex((p) => p.id === balance.poolId) + const price = + filteredPools[poolIndex]?.tranches.find((t) => t.id === balance.trancheId)?.tokenPrice?.toDecimal() ?? Dec(0) + const asset = metas[poolIndex].data?.pool?.asset?.class + valueByClass[asset!] = valueByClass[asset!]?.add(balance.balance.toDecimal().mul(price)) + }) + + console.log( + 'metas', + metas.map((m) => m.data), + assetClasses, + balances?.tranches, + valueByClass + ) + const shades = [800, 600, 400, 200] + const tableDataWithColor = assetClasses.map((item, index) => { + const nextShade = shades[index % shades.length] + return { + name: assetClassLabels[item as AssetClass] ?? item, + share: valueByClass[item].toNumber(), + color: theme.colors.accentScale[nextShade], + labelColor: nextShade >= 500 ? 'white' : 'black', + } + }) + + const sharesForPie = tableDataWithColor.map(({ name, color, labelColor, share }) => { + return { value: Number(share), name: name, color, labelColor } + }) return !!balances?.tranches && !!balances?.tranches.length ? ( - + Allocation - - {balances?.tranches.map((tranche, index) => ( - - - Asset Class{' '} - - - ))} - - + + + + {tableDataWithColor.map((cell, i) => ( + <> + {i > 0 && } + + {cell.name} +
+ + } + value={ + + {formatBalanceAbbreviated(cell.share, 'USD')} + + } + key={i} + /> + + ))} + + + ) : null } diff --git a/centrifuge-app/src/components/Portfolio/AssetClassChart.tsx b/centrifuge-app/src/components/Portfolio/AssetClassChart.tsx new file mode 100644 index 0000000000..6d373c66c4 --- /dev/null +++ b/centrifuge-app/src/components/Portfolio/AssetClassChart.tsx @@ -0,0 +1,31 @@ +import React from 'react' +import { Cell, Pie, PieChart as RechartsPieChart } from 'recharts' + +type PieChartProps = { + data: { name: string; value: number; color?: string }[] +} + +export function AssetClassChart({ data }: PieChartProps) { + return ( + + + {data.map((item, index) => ( + + ))} + + + ) +} diff --git a/centrifuge-app/src/config.ts b/centrifuge-app/src/config.ts index d5b9f2d954..c7d9bf31a5 100644 --- a/centrifuge-app/src/config.ts +++ b/centrifuge-app/src/config.ts @@ -66,8 +66,7 @@ type EnvironmentConfig = { } defaultTheme: 'light' | 'dark' baseCurrency: 'USD' - assetClasses: string[] - defaultAssetClass: string + assetClasses: Record<'publicCredit' | 'privateCredit', string[]> poolCreationType: TransactionOptions['createType'] useDocumentNfts: boolean defaultPodUrl: string @@ -86,8 +85,7 @@ const ALTAIR: EnvironmentConfig = { }, defaultTheme: 'dark', baseCurrency: 'USD', - assetClasses: ['Art NFTs'], - defaultAssetClass: 'Art NFTs', + assetClasses: { privateCredit: ['Art NFTs'], publicCredit: [] }, poolCreationType, useDocumentNfts: true, defaultPodUrl, @@ -103,16 +101,17 @@ const CENTRIFUGE: EnvironmentConfig = { }, defaultTheme: 'light', baseCurrency: 'USD', - assetClasses: [ - 'Consumer Credit', - 'Corporate Credit', - 'Commercial Real Estate', - 'Residential Real Estate', - 'Project Finance', - 'Trade Finance', - 'US Treasuries', - ], - defaultAssetClass: 'Consumer Credit', + assetClasses: { + privateCredit: [ + 'Consumer Credit', + 'Corporate Credit', + 'Commercial Real Estate', + 'Residential Real Estate', + 'Project Finance', + 'Trade Finance', + ], + publicCredit: ['Corporate Bonds', 'US Treasuries'], + }, poolCreationType, useDocumentNfts: true, defaultPodUrl, diff --git a/centrifuge-app/src/pages/IssuerCreatePool/index.tsx b/centrifuge-app/src/pages/IssuerCreatePool/index.tsx index 56f5f6791c..56a5de46e1 100644 --- a/centrifuge-app/src/pages/IssuerCreatePool/index.tsx +++ b/centrifuge-app/src/pages/IssuerCreatePool/index.tsx @@ -49,11 +49,16 @@ import { TrancheSection } from './TrancheInput' import { useStoredIssuer } from './useStoredIssuer' import { validate } from './validate' -const ASSET_CLASSES = config.assetClasses.map((label) => ({ - label, - value: label, +const assetClassLabels = { + privateCredit: 'Private Credit', + publicCredit: 'Public Credit', +} +type AssetClass = 'publicCredit' | 'privateCredit' + +const ASSET_CLASSES = Object.keys(config.assetClasses).map((key) => ({ + label: assetClassLabels[key as AssetClass], + value: key, })) -const DEFAULT_ASSET_CLASS = config.defaultAssetClass export const IssuerCreatePoolPage: React.FC = () => { return ( @@ -98,7 +103,8 @@ export type CreatePoolValues = Omit< const initialValues: CreatePoolValues = { poolIcon: null, poolName: '', - assetClass: DEFAULT_ASSET_CLASS, + assetClass: 'privateCredit', + subAssetClass: '', currency: '', maxReserve: '', epochHours: 23, // in hours @@ -453,6 +459,11 @@ function CreatePoolForm() { .add(collectionDeposit.toDecimal()) const deposit = createDeposit.add(proxyDeposit.toDecimal()) + const subAssetClasses = config.assetClasses[form.values.assetClass].map((label) => ({ + label, + value: label, + })) + return ( <> } - onChange={(event) => form.setFieldValue('assetClass', event.target.value)} + onChange={(event) => { + form.setFieldValue('assetClass', event.target.value) + form.setFieldValue('subAssetClass', '', false) + }} onBlur={field.onBlur} errorMessage={meta.touched && meta.error ? meta.error : undefined} value={field.value} @@ -544,6 +558,22 @@ function CreatePoolForm() { )} + + + {({ field, meta, form }: FieldProps) => ( + } - onChange={(event) => form.setFieldValue('assetClass', event.target.value)} + onChange={(event) => { + form.setFieldValue('assetClass', event.target.value) + form.setFieldValue('subAssetClass', '', false) + }} onBlur={field.onBlur} errorMessage={meta.touched && meta.error ? meta.error : undefined} value={field.value} @@ -181,6 +199,20 @@ export function Details() { /> )} + + {({ field, meta, form }: FieldProps) => ( + , - value: {metadata?.pool?.asset.class}, + value: {metadata?.pool?.asset.subClass}, }, { label: , value: formatBalance(getPoolValueLocked(pool), pool.currency.symbol) }, ] diff --git a/centrifuge-app/src/pages/Portfolio/index.tsx b/centrifuge-app/src/pages/Portfolio/index.tsx index 48c7ae4eb6..897e4c4546 100644 --- a/centrifuge-app/src/pages/Portfolio/index.tsx +++ b/centrifuge-app/src/pages/Portfolio/index.tsx @@ -53,7 +53,7 @@ function Portfolio() { - + diff --git a/centrifuge-app/src/utils/tinlake/useTinlakePools.ts b/centrifuge-app/src/utils/tinlake/useTinlakePools.ts index cc1a5d6478..02288d5b49 100644 --- a/centrifuge-app/src/utils/tinlake/useTinlakePools.ts +++ b/centrifuge-app/src/utils/tinlake/useTinlakePools.ts @@ -611,7 +611,8 @@ async function getPools(pools: IpfsPools): Promise<{ pools: TinlakePool[] }> { name: p.metadata.name, icon: p.metadata.media?.icon ? { uri: p.metadata.media.icon, mime: 'image/svg' } : null, asset: { - class: p.metadata.asset, + class: 'privateCredit', + subClass: p.metadata.asset, }, newInvestmentsStatus: p.metadata.newInvestmentsStatus, issuer: { diff --git a/centrifuge-app/src/utils/usePools.ts b/centrifuge-app/src/utils/usePools.ts index 116ec7bfb9..49c3eca9bf 100644 --- a/centrifuge-app/src/utils/usePools.ts +++ b/centrifuge-app/src/utils/usePools.ts @@ -2,12 +2,12 @@ import Centrifuge, { BorrowerTransaction, Loan, Pool, PoolMetadata } from '@cent import { useCentrifuge, useCentrifugeQuery, useWallet } from '@centrifuge/centrifuge-react' import BN from 'bn.js' import { useEffect } from 'react' -import { useQuery } from 'react-query' +import { useQueries, useQuery } from 'react-query' import { combineLatest, map, Observable } from 'rxjs' import { Dec } from './Decimal' import { TinlakePool, useTinlakePools } from './tinlake/useTinlakePools' import { useLoan, useLoans } from './useLoans' -import { useMetadata } from './useMetadata' +import { useMetadata, useMetadataMulti } from './useMetadata' export function usePools(suspense = true) { const [result] = useCentrifugeQuery(['pools'], (cent) => cent.pools.getPools(), { @@ -238,6 +238,34 @@ export function usePoolMetadata( }, [data.data]) return typeof pool?.metadata === 'string' ? data : tinlakeData } +export function usePoolMetadataMulti(pools?: (Pool | TinlakePool)[]) { + const poolsIndexed = pools?.map((p, i) => [i, p, 'isTinlakePool' in p] as const) ?? [] + const indices: Record = {} + const centPools = poolsIndexed?.filter(([, , isTinlake]) => !isTinlake) + const tinlakePools = poolsIndexed?.filter(([, , isTinlake]) => isTinlake) + centPools.forEach(([pi], qi) => { + indices[pi] = qi + }) + tinlakePools.forEach(([pi], qi) => { + indices[pi] = qi + }) + + const centData = useMetadataMulti(centPools?.map(([, p]) => p.metadata as string) ?? []) + const tinlakeData = useQueries( + tinlakePools?.map(([, p]) => { + return { + queryKey: ['tinlakeMetadata', p.id], + queryFn: () => p.metadata as PoolMetadata, + enabled: !!p.metadata, + staleTime: Infinity, + } + }) + ) + return poolsIndexed.map(([poolIndex, , isTinlake]) => { + const queryIndex = indices[poolIndex] + return isTinlake ? tinlakeData[queryIndex] : centData[queryIndex] + }) +} export function useConstants() { const centrifuge = useCentrifuge() diff --git a/centrifuge-js/src/modules/pools.ts b/centrifuge-js/src/modules/pools.ts index 08c96dc096..a6fb4233b5 100644 --- a/centrifuge-js/src/modules/pools.ts +++ b/centrifuge-js/src/modules/pools.ts @@ -550,7 +550,8 @@ export interface PoolMetadataInput { // details poolIcon: FileType | null poolName: string - assetClass: string + assetClass: 'publicCredit' | 'privateCredit' + subAssetClass: string currency: string maxReserve: number | '' epochHours: number | '' @@ -588,7 +589,8 @@ export type PoolMetadata = { name: string icon: FileType | null asset: { - class: string + class: 'publicCredit' | 'privateCredit' + subClass: string } newInvestmentsStatus?: Record issuer: { @@ -793,7 +795,7 @@ export function getPoolsModule(inst: Centrifuge) { pool: { name: metadata.poolName, icon: metadata.poolIcon, - asset: { class: metadata.assetClass }, + asset: { class: metadata.assetClass, subClass: metadata.subAssetClass }, issuer: { name: metadata.issuerName, repName: metadata.issuerRepName, From e385dd10153ad2aba870688d7bc3aae2d65f2a89 Mon Sep 17 00:00:00 2001 From: Onno Visser <23527729+onnovisser@users.noreply.github.com> Date: Tue, 17 Oct 2023 15:23:47 +0200 Subject: [PATCH 2/9] cleanup --- .../src/components/Portfolio/AssetAllocation.tsx | 9 +-------- 1 file changed, 1 insertion(+), 8 deletions(-) diff --git a/centrifuge-app/src/components/Portfolio/AssetAllocation.tsx b/centrifuge-app/src/components/Portfolio/AssetAllocation.tsx index e36bdf369d..2e497c0e94 100644 --- a/centrifuge-app/src/components/Portfolio/AssetAllocation.tsx +++ b/centrifuge-app/src/components/Portfolio/AssetAllocation.tsx @@ -32,14 +32,7 @@ export function AssetAllocation({ address }: { address: string }) { valueByClass[asset!] = valueByClass[asset!]?.add(balance.balance.toDecimal().mul(price)) }) - console.log( - 'metas', - metas.map((m) => m.data), - assetClasses, - balances?.tranches, - valueByClass - ) - const shades = [800, 600, 400, 200] + const shades = [600, 800, 200, 400] const tableDataWithColor = assetClasses.map((item, index) => { const nextShade = shades[index % shades.length] return { From 055638d68c51a9da1ef423783496f6297543b12b Mon Sep 17 00:00:00 2001 From: Onno Visser <23527729+onnovisser@users.noreply.github.com> Date: Tue, 17 Oct 2023 15:28:42 +0200 Subject: [PATCH 3/9] sort --- .../components/Portfolio/AssetAllocation.tsx | 30 +++++++++---------- 1 file changed, 14 insertions(+), 16 deletions(-) diff --git a/centrifuge-app/src/components/Portfolio/AssetAllocation.tsx b/centrifuge-app/src/components/Portfolio/AssetAllocation.tsx index 2e497c0e94..eaf4e49fc3 100644 --- a/centrifuge-app/src/components/Portfolio/AssetAllocation.tsx +++ b/centrifuge-app/src/components/Portfolio/AssetAllocation.tsx @@ -33,19 +33,17 @@ export function AssetAllocation({ address }: { address: string }) { }) const shades = [600, 800, 200, 400] - const tableDataWithColor = assetClasses.map((item, index) => { - const nextShade = shades[index % shades.length] - return { - name: assetClassLabels[item as AssetClass] ?? item, - share: valueByClass[item].toNumber(), - color: theme.colors.accentScale[nextShade], - labelColor: nextShade >= 500 ? 'white' : 'black', - } - }) - - const sharesForPie = tableDataWithColor.map(({ name, color, labelColor, share }) => { - return { value: Number(share), name: name, color, labelColor } - }) + const shares = assetClasses + .map((item, index) => { + const nextShade = shades[index % shades.length] + return { + name: assetClassLabels[item as AssetClass] ?? item, + value: valueByClass[item].toNumber(), + color: theme.colors.accentScale[nextShade], + labelColor: nextShade >= 500 ? 'white' : 'black', + } + }) + .sort((a, b) => (b.value > a.value ? 1 : a === b ? 0 : -1)) return !!balances?.tranches && !!balances?.tranches.length ? ( @@ -53,9 +51,9 @@ export function AssetAllocation({ address }: { address: string }) { Allocation - + - {tableDataWithColor.map((cell, i) => ( + {shares.map((cell, i) => ( <> {i > 0 && } - {formatBalanceAbbreviated(cell.share, 'USD')} + {formatBalanceAbbreviated(cell.value, 'USD')} } key={i} From e35e0e9dbbd8892d5fb1101fd34e1d35420d0d36 Mon Sep 17 00:00:00 2001 From: Onno Visser <23527729+onnovisser@users.noreply.github.com> Date: Thu, 19 Oct 2023 15:13:34 +0200 Subject: [PATCH 4/9] tooltip --- .../components/Portfolio/AssetAllocation.tsx | 7 +++-- .../components/Portfolio/AssetClassChart.tsx | 27 +++++++++++++++++-- 2 files changed, 30 insertions(+), 4 deletions(-) diff --git a/centrifuge-app/src/components/Portfolio/AssetAllocation.tsx b/centrifuge-app/src/components/Portfolio/AssetAllocation.tsx index eaf4e49fc3..69ec228512 100644 --- a/centrifuge-app/src/components/Portfolio/AssetAllocation.tsx +++ b/centrifuge-app/src/components/Portfolio/AssetAllocation.tsx @@ -24,12 +24,15 @@ export function AssetAllocation({ address }: { address: string }) { const metas = usePoolMetadataMulti(filteredPools) const assetClasses = [...new Set(metas.map((m) => m.data?.pool?.asset?.class as string).filter(Boolean))] const valueByClass: Record = Object.fromEntries(assetClasses.map((item) => [item, Dec(0)])) + let total = Dec(0) balances?.tranches.forEach((balance) => { const poolIndex = filteredPools.findIndex((p) => p.id === balance.poolId) const price = filteredPools[poolIndex]?.tranches.find((t) => t.id === balance.trancheId)?.tokenPrice?.toDecimal() ?? Dec(0) const asset = metas[poolIndex].data?.pool?.asset?.class - valueByClass[asset!] = valueByClass[asset!]?.add(balance.balance.toDecimal().mul(price)) + const value = balance.balance.toDecimal().mul(price) + total = total.add(value) + valueByClass[asset!] = valueByClass[asset!]?.add(value) }) const shades = [600, 800, 200, 400] @@ -51,7 +54,7 @@ export function AssetAllocation({ address }: { address: string }) { Allocation - + {shares.map((cell, i) => ( <> diff --git a/centrifuge-app/src/components/Portfolio/AssetClassChart.tsx b/centrifuge-app/src/components/Portfolio/AssetClassChart.tsx index 6d373c66c4..2b30308151 100644 --- a/centrifuge-app/src/components/Portfolio/AssetClassChart.tsx +++ b/centrifuge-app/src/components/Portfolio/AssetClassChart.tsx @@ -1,11 +1,16 @@ +import { Shelf, Text } from '@centrifuge/fabric' import React from 'react' -import { Cell, Pie, PieChart as RechartsPieChart } from 'recharts' +import { Cell, Pie, PieChart as RechartsPieChart, Tooltip, TooltipProps } from 'recharts' +import { formatBalanceAbbreviated, formatPercentage } from '../../utils/formatting' +import { TooltipContainer } from '../Charts/CustomChartElements' type PieChartProps = { data: { name: string; value: number; color?: string }[] + currency: string + total: number } -export function AssetClassChart({ data }: PieChartProps) { +export function AssetClassChart({ data, currency, total }: PieChartProps) { return ( ))} + } /> ) } + +function TooltipContent({ payload, currency, total }: TooltipProps & { currency: string; total: number }) { + console.log('payload', payload, total) + if (payload && payload.length > 0) { + return ( + + {payload[0].name} + + {formatBalanceAbbreviated(payload[0].value, currency)} + + {formatPercentage((payload[0].value / total) * 100)} + + + ) + } + return null +} From b610e7b658c684faab5ec096cfd9f3af2671b0bc Mon Sep 17 00:00:00 2001 From: Onno Visser <23527729+onnovisser@users.noreply.github.com> Date: Thu, 19 Oct 2023 15:13:52 +0200 Subject: [PATCH 5/9] cleanup --- centrifuge-app/src/components/Portfolio/AssetClassChart.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/centrifuge-app/src/components/Portfolio/AssetClassChart.tsx b/centrifuge-app/src/components/Portfolio/AssetClassChart.tsx index 2b30308151..fdfde246aa 100644 --- a/centrifuge-app/src/components/Portfolio/AssetClassChart.tsx +++ b/centrifuge-app/src/components/Portfolio/AssetClassChart.tsx @@ -44,7 +44,6 @@ function TooltipContent({ payload, currency, total }: TooltipProps & { {payload[0].name} {formatBalanceAbbreviated(payload[0].value, currency)} - {formatPercentage((payload[0].value / total) * 100)} From 8ad0c10a236fba40d0abca612e753e216561a389 Mon Sep 17 00:00:00 2001 From: Onno Visser <23527729+onnovisser@users.noreply.github.com> Date: Fri, 20 Oct 2023 08:33:27 +0200 Subject: [PATCH 6/9] fix tooltip --- .../src/components/Portfolio/AssetClassChart.tsx | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) diff --git a/centrifuge-app/src/components/Portfolio/AssetClassChart.tsx b/centrifuge-app/src/components/Portfolio/AssetClassChart.tsx index fdfde246aa..b8188ffc78 100644 --- a/centrifuge-app/src/components/Portfolio/AssetClassChart.tsx +++ b/centrifuge-app/src/components/Portfolio/AssetClassChart.tsx @@ -1,8 +1,7 @@ -import { Shelf, Text } from '@centrifuge/fabric' import React from 'react' import { Cell, Pie, PieChart as RechartsPieChart, Tooltip, TooltipProps } from 'recharts' import { formatBalanceAbbreviated, formatPercentage } from '../../utils/formatting' -import { TooltipContainer } from '../Charts/CustomChartElements' +import { TooltipContainer, TooltipEntry, TooltipTitle } from '../Charts/CustomChartElements' type PieChartProps = { data: { name: string; value: number; color?: string }[] @@ -37,15 +36,15 @@ export function AssetClassChart({ data, currency, total }: PieChartProps) { } function TooltipContent({ payload, currency, total }: TooltipProps & { currency: string; total: number }) { - console.log('payload', payload, total) if (payload && payload.length > 0) { return ( - {payload[0].name} - - {formatBalanceAbbreviated(payload[0].value, currency)} - {formatPercentage((payload[0].value / total) * 100)} - + {payload[0].name} + {payload.map(({ payload, name, value }) => ( + + {formatPercentage((value / total) * 100)} + + ))} ) } From 711a136dcbd7a558d64de5c06b3de212288ffdb3 Mon Sep 17 00:00:00 2001 From: Onno Visser <23527729+onnovisser@users.noreply.github.com> Date: Fri, 20 Oct 2023 16:17:30 +0200 Subject: [PATCH 7/9] fix asset classes --- centrifuge-app/src/components/Report/PoolBalance.tsx | 10 +++++++--- centrifuge-app/src/pages/IssuerCreatePool/index.tsx | 9 +++++---- .../src/pages/IssuerPool/Configuration/Details.tsx | 9 +++++---- 3 files changed, 17 insertions(+), 11 deletions(-) diff --git a/centrifuge-app/src/components/Report/PoolBalance.tsx b/centrifuge-app/src/components/Report/PoolBalance.tsx index 96cd88e84c..7ae7daf2e7 100644 --- a/centrifuge-app/src/components/Report/PoolBalance.tsx +++ b/centrifuge-app/src/components/Report/PoolBalance.tsx @@ -1,6 +1,7 @@ import { Pool } from '@centrifuge/centrifuge-js/dist/modules/pools' import { Text } from '@centrifuge/fabric' import * as React from 'react' +import { Dec } from '../../utils/Decimal' import { formatBalanceAbbreviated } from '../../utils/formatting' import { getCSVDownloadUrl } from '../../utils/getCSVDownloadUrl' import { useDailyPoolStates, useMonthlyPoolStates } from '../../utils/usePools' @@ -86,7 +87,7 @@ export function PoolBalance({ pool }: { pool: Pool }) { name: `\u00A0 \u00A0 ${token.currency.name.split(' ').at(-1)} tranche`, value: poolStates?.map((state) => - state.tranches[token.id].price + state.tranches[token.id]?.price ? formatBalanceAbbreviated(state.tranches[token.id].price?.toFloat()!, pool.currency.symbol) : '1.000' ) || [], @@ -110,7 +111,10 @@ export function PoolBalance({ pool }: { pool: Pool }) { name: `\u00A0 \u00A0 ${token.currency.name.split(' ').at(-1)} tranche`, value: poolStates?.map((state) => - formatBalanceAbbreviated(state.tranches[token.id].fulfilledInvestOrders.toDecimal(), pool.currency.symbol) + formatBalanceAbbreviated( + state.tranches[token.id]?.fulfilledInvestOrders.toDecimal() ?? Dec(0), + pool.currency.symbol + ) ) || [], heading: false, })) || [], @@ -129,7 +133,7 @@ export function PoolBalance({ pool }: { pool: Pool }) { value: poolStates?.map((state) => formatBalanceAbbreviated( - state.tranches[token.id].fulfilledRedeemOrders.toDecimal(), + state.tranches[token.id]?.fulfilledRedeemOrders.toDecimal() ?? Dec(0), pool.currency.symbol ) ) || [], diff --git a/centrifuge-app/src/pages/IssuerCreatePool/index.tsx b/centrifuge-app/src/pages/IssuerCreatePool/index.tsx index 56a5de46e1..46a3a3ea8a 100644 --- a/centrifuge-app/src/pages/IssuerCreatePool/index.tsx +++ b/centrifuge-app/src/pages/IssuerCreatePool/index.tsx @@ -459,10 +459,11 @@ function CreatePoolForm() { .add(collectionDeposit.toDecimal()) const deposit = createDeposit.add(proxyDeposit.toDecimal()) - const subAssetClasses = config.assetClasses[form.values.assetClass].map((label) => ({ - label, - value: label, - })) + const subAssetClasses = + config.assetClasses[form.values.assetClass]?.map((label) => ({ + label, + value: label, + })) ?? [] return ( <> diff --git a/centrifuge-app/src/pages/IssuerPool/Configuration/Details.tsx b/centrifuge-app/src/pages/IssuerPool/Configuration/Details.tsx index c2cef038d7..378af21af6 100644 --- a/centrifuge-app/src/pages/IssuerPool/Configuration/Details.tsx +++ b/centrifuge-app/src/pages/IssuerPool/Configuration/Details.tsx @@ -123,10 +123,11 @@ export function Details() { const currency = pool?.currency.symbol ?? '' - const subAssetClasses = config.assetClasses[form.values.assetClass].map((label) => ({ - label, - value: label, - })) + const subAssetClasses = + config.assetClasses[form.values.assetClass]?.map((label) => ({ + label, + value: label, + })) ?? [] return ( From 6893dbc5180693778f3d2c12b1df7392eced3317 Mon Sep 17 00:00:00 2001 From: Onno Visser <23527729+onnovisser@users.noreply.github.com> Date: Fri, 20 Oct 2023 16:20:41 +0200 Subject: [PATCH 8/9] fix initial value --- .../src/pages/IssuerPool/Configuration/Details.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/centrifuge-app/src/pages/IssuerPool/Configuration/Details.tsx b/centrifuge-app/src/pages/IssuerPool/Configuration/Details.tsx index 378af21af6..fba0a5f4f7 100644 --- a/centrifuge-app/src/pages/IssuerPool/Configuration/Details.tsx +++ b/centrifuge-app/src/pages/IssuerPool/Configuration/Details.tsx @@ -51,7 +51,10 @@ export function Details() { () => ({ poolName: metadata?.pool?.name ?? '', poolIcon: iconFile ?? null, - assetClass: metadata?.pool?.asset?.class ?? 'privateCredit', + assetClass: + metadata?.pool?.asset?.class && Object.keys(config.assetClasses).includes(metadata.pool.asset.class) + ? metadata.pool.asset.class + : 'privateCredit', subAssetClass: metadata?.pool?.asset?.subClass ?? '', podEndpoint: metadata?.pod?.node ?? '', listed: metadata?.pool?.listed ?? false, From d858ba9e1b9daa3ded7d35501badf0179e324506 Mon Sep 17 00:00:00 2001 From: Onno Visser <23527729+onnovisser@users.noreply.github.com> Date: Fri, 20 Oct 2023 16:56:27 +0200 Subject: [PATCH 9/9] fix value --- .../src/pages/IssuerPool/Configuration/Details.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/centrifuge-app/src/pages/IssuerPool/Configuration/Details.tsx b/centrifuge-app/src/pages/IssuerPool/Configuration/Details.tsx index fba0a5f4f7..eb3cdd0cba 100644 --- a/centrifuge-app/src/pages/IssuerPool/Configuration/Details.tsx +++ b/centrifuge-app/src/pages/IssuerPool/Configuration/Details.tsx @@ -251,7 +251,11 @@ export function Details() { - + +