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} />
-