diff --git a/centrifuge-app/src/components/Charts/PoolPerformanceChart.tsx b/centrifuge-app/src/components/Charts/PoolPerformanceChart.tsx index 2e3a912f90..4751fb9058 100644 --- a/centrifuge-app/src/components/Charts/PoolPerformanceChart.tsx +++ b/centrifuge-app/src/components/Charts/PoolPerformanceChart.tsx @@ -22,7 +22,6 @@ type ChartData = { currency?: string seniorAPY: number | null | undefined juniorAPY: number | null - isToday: boolean } type GraphDataItemWithType = { @@ -115,7 +114,7 @@ function PoolPerformanceChart() { return true }) - const [range, setRange] = React.useState<(typeof rangeFilters)[number]>({ value: 'all', label: 'All' }) + const [range, setRange] = React.useState<(typeof rangeFilters)[number]>(rangeFilters[0]) const rangeNumber = getRangeNumber(range.value, poolAge) ?? 100 // querying chain for more accurate data, since data for today from subquery is not necessarily up to date @@ -124,6 +123,16 @@ function PoolPerformanceChart() { ? formatBalance(pool?.tranches[pool.tranches.length - 1].tokenPrice || 0, undefined, 5, 5) : null + const todayJuniorApy = pool?.tranches + ?.find((pool) => pool.seniority === 0) + ?.yield30DaysAnnualized?.toPercent() + .toNumber() + + const todaySeniorApy = pool?.tranches + ?.find((pool) => pool.seniority === 1) + ?.yield30DaysAnnualized?.toPercent() + .toNumber() + const trancheTodayPrice = calculateTranchePrices(pool as Pool) const data: ChartData[] = React.useMemo( @@ -151,9 +160,8 @@ function PoolPerformanceChart() { nav: todayAssetValue, juniorTokenPrice: tranchePrices.juniorTokenPrice ?? 0, seniorTokenPrice: tranchePrices.seniorTokenPrice ?? null, - juniorAPY: formattedJuniorAPY, - seniorAPY: formattedSeniorAPY, - isToday: true, + juniorAPY: todayJuniorApy ?? 0, + seniorAPY: todaySeniorApy, } } @@ -164,20 +172,17 @@ function PoolPerformanceChart() { seniorTokenPrice: seniorTokenPrice !== 0 ? seniorTokenPrice : null, juniorAPY: formattedJuniorAPY, seniorAPY: formattedSeniorAPY, - isToday: false, } }) || [], [truncatedPoolStates, todayAssetValue, pool, range] ) - const todayData = data.find((day) => day.isToday) - const today = { nav: todayAssetValue, price: todayPrice, currency: pool.currency.symbol, - juniorAPY: todayData?.juniorAPY, - seniorAPY: todayData?.seniorAPY, + juniorAPY: todayJuniorApy, + seniorAPY: todaySeniorApy, ...trancheTodayPrice, } @@ -421,7 +426,7 @@ function CustomLegend({ navData, { color: 'textGold', - label: 'Junior token price', + label: data.seniorTokenPrice ? 'Junior token price' : 'Token price', value: formatBalance(data.juniorTokenPrice ?? 0, '', 3), type: 'singleTrancheTokenPrice', show: true, @@ -439,7 +444,7 @@ function CustomLegend({ navData, { color: 'textGold', - label: 'Junior APY', + label: data.seniorAPY ? 'Junior APY' : 'APY', value: formatPercentage(data.juniorAPY ?? 0), show: !!data.juniorAPY, }, diff --git a/centrifuge-app/src/components/IssuerSection.tsx b/centrifuge-app/src/components/IssuerSection.tsx index 8ba196b26c..38787bf630 100644 --- a/centrifuge-app/src/components/IssuerSection.tsx +++ b/centrifuge-app/src/components/IssuerSection.tsx @@ -14,7 +14,7 @@ import { } from '@centrifuge/fabric' import * as React from 'react' import { useLocation } from 'react-router' -import styled from 'styled-components' +import styled, { useTheme } from 'styled-components' import { formatPercentage } from '../utils/formatting' import { ExecutiveSummaryDialog } from './Dialogs/ExecutiveSummaryDialog' import { LabelValueStack } from './LabelValueStack' @@ -46,12 +46,6 @@ const HoverBox = styled(StyledBox)` } ` -const reportLinks = [ - { label: 'Balance sheet', href: '/balance-sheet', icon: }, - { label: 'Profit & loss', href: '/profit-and-loss', icon: }, - { label: 'Cash flow statement', href: '/cash-flow-statement', icon: }, -] - const StyledRouterTextLink = styled(RouterTextLink)` color: white; text-decoration: unset; @@ -67,6 +61,21 @@ const StyledRouterTextLink = styled(RouterTextLink)` export function ReportDetails({ metadata }: IssuerSectionProps) { const pathname = useLocation().pathname const report = metadata?.pool?.reports?.[0] + const theme = useTheme() + + const reportLinks = [ + { label: 'Balance sheet', href: '/balance-sheet', icon: }, + { + label: 'Profit & loss', + href: '/profit-and-loss', + icon: , + }, + { + label: 'Cash flow statement', + href: '/cash-flow-statement', + icon: , + }, + ] return ( <> @@ -89,7 +98,7 @@ export function ReportDetails({ metadata }: IssuerSectionProps) { > {link.icon} - + {link.label} @@ -235,19 +244,23 @@ export function RatingDetails({ metadata }: IssuerSectionProps) { export const PoolAnalysis = ({ metadata, inverted }: IssuerSectionProps & { inverted?: boolean }) => { const report = metadata?.pool?.reports?.[0] + // Not sure why some pools have N/A, it should be empty but this is a fix for those pools in the meantime + const isEmpty = report?.author.name === 'N/A' return report?.author?.name || report?.author?.title ? ( - - - Pool analysis - - - - Reviewer: {report?.author?.name || 'N/A'} - - - Title: {report?.author?.title || 'N/A'} + isEmpty ? null : ( + + + Pool analysis + + + Reviewer: {report?.author?.name || 'N/A'} + + + Title: {report?.author?.title || 'N/A'} + + - + ) ) : null } diff --git a/centrifuge-app/src/components/LiquidityTransactionsSection.tsx b/centrifuge-app/src/components/LiquidityTransactionsSection.tsx index 3120ae8a54..b392aa5e6e 100644 --- a/centrifuge-app/src/components/LiquidityTransactionsSection.tsx +++ b/centrifuge-app/src/components/LiquidityTransactionsSection.tsx @@ -144,7 +144,7 @@ export default function LiquidityTransactionsSection({ diff --git a/centrifuge-app/src/components/PoolCard/index.tsx b/centrifuge-app/src/components/PoolCard/index.tsx index 20b90148ea..0bebe0eb83 100644 --- a/centrifuge-app/src/components/PoolCard/index.tsx +++ b/centrifuge-app/src/components/PoolCard/index.tsx @@ -128,7 +128,7 @@ export function PoolCard({ } const renderText = (text: string) => ( - + {text} ) @@ -196,7 +196,7 @@ export function PoolCard({ padding={isOneTranche ? 0 : '8px'} display="flex" justifyContent="space-between" - width={isOneTranche ? '50%' : '100%'} + width={isOneTranche ? '60%' : '100%'} > {!isOneTranche && ( diff --git a/centrifuge-app/src/components/PoolOverview/KeyMetrics.tsx b/centrifuge-app/src/components/PoolOverview/KeyMetrics.tsx index 7c8efbaa2f..1347675030 100644 --- a/centrifuge-app/src/components/PoolOverview/KeyMetrics.tsx +++ b/centrifuge-app/src/components/PoolOverview/KeyMetrics.tsx @@ -89,11 +89,13 @@ export const KeyMetrics = ({ poolId }: Props) => { const thirtyDayAPY = getTodayValue(dailyTranches) if (!thirtyDayAPY) return null - return Object.keys(thirtyDayAPY).map((key) => { - return thirtyDayAPY[key][0].yield30DaysAnnualized - ? formatPercentage(thirtyDayAPY[key][0].yield30DaysAnnualized) - : null - }) + return Object.keys(thirtyDayAPY) + .map((key) => { + return thirtyDayAPY[key][0].yield30DaysAnnualized + ? thirtyDayAPY[key][0].yield30DaysAnnualized.toPercent().toNumber() + : 0 + }) + .sort((a, b) => a - b) }, [dailyTranches]) const minInvestmentPerTranche = useMemo(() => { @@ -101,7 +103,7 @@ export const KeyMetrics = ({ poolId }: Props) => { return Object.values(metadata.tranches).map((item) => { const minInv = new CurrencyBalance(item.minInitialInvestment ?? 0, pool.currency.decimals).toDecimal() - return item.minInitialInvestment ? formatBalanceAbbreviated(minInv, '', 0) : null + return item.minInitialInvestment ? minInv : null }) }, [metadata?.tranches, pool.currency.decimals]) @@ -117,12 +119,13 @@ export const KeyMetrics = ({ poolId }: Props) => { }, { metric: '30-day APY', - value: tranchesAPY?.length + value: tinlakeData[poolId as TinlakeDataKey] + ? tinlakeData[poolId as TinlakeDataKey] + : tranchesAPY?.length ? tranchesAPY.map((tranche, index) => { - return tranche && `${tranche} ${index !== tranchesAPY?.length - 1 ? '-' : ''} ` + const formatted = formatPercentage(tranche) + return formatted && `${formatted} ${index !== tranchesAPY?.length - 1 ? '-' : ''}` }) - : tinlakeData[poolId as TinlakeDataKey] - ? tinlakeData[poolId as TinlakeDataKey] : '-', }, ...(isBT3BT4 @@ -136,9 +139,12 @@ export const KeyMetrics = ({ poolId }: Props) => { { metric: 'Min. investment', value: minInvestmentPerTranche?.length - ? minInvestmentPerTranche.map((tranche, index) => { - return tranche && `$${tranche} ${index !== minInvestmentPerTranche?.length - 1 ? '-' : ''} ` - }) + ? minInvestmentPerTranche + .sort((a, b) => Number(a) - Number(b)) + .map((tranche, index) => { + const formatted = formatBalanceAbbreviated(tranche?.toNumber() ?? 0, '', 0) + return tranche && `$${formatted} ${index !== minInvestmentPerTranche?.length - 1 ? '-' : ''} ` + }) : '-', }, { diff --git a/centrifuge-app/src/components/PoolOverview/TrancheTokenCards.tsx b/centrifuge-app/src/components/PoolOverview/TrancheTokenCards.tsx index 374666961e..07e5613370 100644 --- a/centrifuge-app/src/components/PoolOverview/TrancheTokenCards.tsx +++ b/centrifuge-app/src/components/PoolOverview/TrancheTokenCards.tsx @@ -34,6 +34,7 @@ export const TrancheTokenCards = ({ trancheTokens, poolId }: { trancheTokens: To header: 'Token', align: 'left', formatter: (v: any) => v, + width: '40%', }, { header: 'APY', @@ -64,7 +65,7 @@ export const TrancheTokenCards = ({ trancheTokens, poolId }: { trancheTokens: To : []), { header: '', - align: 'left', + align: 'right', formatter: (_: any, row: any) => { return }, @@ -75,13 +76,12 @@ export const TrancheTokenCards = ({ trancheTokens, poolId }: { trancheTokens: To const columns = useMemo(() => { return columnConfig.map((col, index) => { return { - align: col.align, - header: col.header, cell: (row: any) => ( {col.formatter(row.value[index], row)} ), + ...col, } }) }, [columnConfig]) diff --git a/centrifuge-app/src/components/PoolOverview/TransactionHistory.tsx b/centrifuge-app/src/components/PoolOverview/TransactionHistory.tsx index 7ac265cefb..38718364ef 100644 --- a/centrifuge-app/src/components/PoolOverview/TransactionHistory.tsx +++ b/centrifuge-app/src/components/PoolOverview/TransactionHistory.tsx @@ -229,13 +229,13 @@ export const TransactionHistoryTable = ({ { align: 'left', header: , - cell: ({ assetId, assetName, toAssetId, toAssetName, label, sublabel, fromAssetName }: Row) => { + cell: ({ assetId, assetName, toAssetId, toAssetName, label, sublabel, fromAssetName, fromAssetId }: Row) => { const base = `${basePath}/${poolId}/assets/` const isCashTransfer = label === 'Cash transfer from' return ( {label}{' '} - + {isCashTransfer ? fromAssetName : assetName} {' '} {toAssetName ? ( diff --git a/centrifuge-app/src/pages/Pool/Overview/index.tsx b/centrifuge-app/src/pages/Pool/Overview/index.tsx index 6a7b3fb4bd..56092e20a5 100644 --- a/centrifuge-app/src/pages/Pool/Overview/index.tsx +++ b/centrifuge-app/src/pages/Pool/Overview/index.tsx @@ -151,11 +151,7 @@ export function InvestButton(props: InvestRedeemProps) { return ( <> setOpen(false)} {...props} /> -