From e1d7a30575cf4e5af7617f02671aba600683bef4 Mon Sep 17 00:00:00 2001 From: Onno Visser Date: Mon, 2 Sep 2024 09:37:43 +0200 Subject: [PATCH 1/7] Fix investments chart (#2417) --- .../LiquidityTransactionsSection.tsx | 154 +++++++++--------- 1 file changed, 75 insertions(+), 79 deletions(-) diff --git a/centrifuge-app/src/components/LiquidityTransactionsSection.tsx b/centrifuge-app/src/components/LiquidityTransactionsSection.tsx index 2df9303c6..3120ae8a5 100644 --- a/centrifuge-app/src/components/LiquidityTransactionsSection.tsx +++ b/centrifuge-app/src/components/LiquidityTransactionsSection.tsx @@ -7,11 +7,11 @@ import { formatBalance } from '../utils/formatting' import { getCSVDownloadUrl } from '../utils/getCSVDownloadUrl' import { useDailyPoolStates } from '../utils/usePools' import { Legend, LegendProps } from './Charts/Legend' -import { StackedBarChart, StackedBarChartProps } from './Charts/StackedBarChart' +import { StackedBarChart } from './Charts/StackedBarChart' import { getRangeNumber } from './Charts/utils' +import { LoadBoundary } from './LoadBoundary' import { PageSection } from './PageSection' import { TooltipsProps } from './Tooltips' -import { LoadBoundary } from './LoadBoundary' const rangeFilters = [ { value: '30d', label: '30 days' }, @@ -80,86 +80,83 @@ export default function LiquidityTransactionsSection({ }, [dailyPoolStates, dataKeys, dataNames, pool.currency.decimals, pool.currency.symbol]) const chartData = React.useMemo(() => { - return (dailyPoolStates - ?.map((entry) => { - // subquery data is saved at end of the day - // data timestamp is off for 24h - const date = new Date(entry.timestamp) - date.setDate(date.getDate() - 1) - const top = entry[dataKeys[0]] - ? new CurrencyBalance(entry[dataKeys[0]]!, pool.currency.decimals).toDecimal().toNumber() - : 0 - - const bottom = entry[dataKeys[1]] - ? new CurrencyBalance(entry[dataKeys[1]]!, pool.currency.decimals).toDecimal().toNumber() - : 0 - - if (!top && !bottom) { - return undefined - } - return { - xAxis: date.getTime(), - top, - bottom, - date: date.toISOString(), - } - }) - .slice(-rangeNumber) - .filter(Boolean) || []) as StackedBarChartProps['data'] + return ( + dailyPoolStates + ?.map((entry) => { + // subquery data is saved at end of the day + // data timestamp is off for 24h + const date = new Date(entry.timestamp) + date.setDate(date.getDate() - 1) + const top = entry[dataKeys[0]] + ? new CurrencyBalance(entry[dataKeys[0]]!, pool.currency.decimals).toDecimal().toNumber() + : 0 + + const bottom = entry[dataKeys[1]] + ? new CurrencyBalance(entry[dataKeys[1]]!, pool.currency.decimals).toDecimal().toNumber() + : 0 + + if (!top && !bottom) { + return null as never + } + return { + xAxis: date.getTime(), + top, + bottom, + date: date.toISOString(), + } + }) + .slice(-rangeNumber) + .filter(Boolean) || [] + ) }, [dailyPoolStates, dataKeys, pool.currency.decimals, rangeNumber]) const legend: LegendProps['data'] = React.useMemo(() => { const topTotal = chartData.map(({ top }) => top).reduce((a, b) => a + b, 0) const bottomTotal = chartData.map(({ bottom }) => bottom).reduce((a, b) => a + b, 0) - return chartData && chartData.length - ? [ - { - color: dataColors[0], - tooltip: { type: tooltips[0] }, - body: formatBalance(topTotal, pool.currency.symbol), - }, - { - color: dataColors[1], - tooltip: { type: tooltips[1] }, - body: formatBalance(bottomTotal, pool.currency.symbol), - }, - ] - : [] + return [ + { + color: dataColors[0], + tooltip: { type: tooltips[0] }, + body: formatBalance(topTotal, pool.currency.symbol), + }, + { + color: dataColors[1], + tooltip: { type: tooltips[1] }, + body: formatBalance(bottomTotal, pool.currency.symbol), + }, + ] }, [chartData, dataColors, tooltips, pool.currency.symbol]) - if(!chartData?.length) return null - - return( - - - Download - - ) - } - > - - {!!legend && !!legend.length && } - - {chartData.length > 0 && - rangeFilters.map((rangeFilter, index) => ( + return ( + + + Download + + ) + } + > + + + + {rangeFilters.map((rangeFilter, index) => ( setRange(rangeFilter)}> @@ -176,12 +173,11 @@ export default function LiquidityTransactionsSection({ )} ))} + - - {!!chartData && !!chartData.length && ( - )} - - ) + + + ) } From cd09c95bcaff47af29ecae5cad8886e7ff020282 Mon Sep 17 00:00:00 2001 From: Onno Visser Date: Mon, 2 Sep 2024 09:40:50 +0200 Subject: [PATCH 2/7] Epoch & Tranches: Submit minimal changes (#2418) --- .../Configuration/EpochAndTranches.tsx | 38 ++++++++++++++++--- 1 file changed, 32 insertions(+), 6 deletions(-) diff --git a/centrifuge-app/src/pages/IssuerPool/Configuration/EpochAndTranches.tsx b/centrifuge-app/src/pages/IssuerPool/Configuration/EpochAndTranches.tsx index 1e9450a5e..b976eb8c5 100644 --- a/centrifuge-app/src/pages/IssuerPool/Configuration/EpochAndTranches.tsx +++ b/centrifuge-app/src/pages/IssuerPool/Configuration/EpochAndTranches.tsx @@ -4,7 +4,7 @@ import { Button, Grid, NumberInput, Shelf, Stack, StatusChip, Text, Thumbnail } import { Form, FormikProvider, useFormik } from 'formik' import * as React from 'react' import { useParams } from 'react-router' -import { combineLatest, switchMap } from 'rxjs' +import { combineLatest, of, switchMap } from 'rxjs' import { ButtonGroup } from '../../../components/ButtonGroup' import { Column, DataTable } from '../../../components/DataTable' import { FieldWithErrorMessage } from '../../../components/FieldWithErrorMessage' @@ -112,13 +112,15 @@ export function EpochAndTranches() { const [poolId, metadata, updates] = args return combineLatest([ cent.getApi(), - cent.pools.setMetadata([poolId, metadata], { batch: true }), - cent.pools.updatePool([poolId, updates], { batch: true }), + metadata ? cent.pools.setMetadata([poolId, metadata], { batch: true }) : of(null), + updates ? cent.pools.updatePool([poolId, updates], { batch: true }) : of(null), ]).pipe( switchMap(([api, setMetadataSubmittable, updatePoolSubmittable]) => { return cent.wrapSignAndSend( api, - api.tx.utility.batchAll([setMetadataSubmittable, updatePoolSubmittable]), + updatePoolSubmittable && setMetadataSubmittable + ? api.tx.utility.batchAll([setMetadataSubmittable, updatePoolSubmittable]) + : setMetadataSubmittable || updatePoolSubmittable, options ) }) @@ -185,7 +187,16 @@ export function EpochAndTranches() { })), ] execute( - [poolId, newPoolMetadata, { minEpochTime: epochSeconds, tranches: hasTrancheChanges ? tranches : undefined }], + [ + poolId, + hasMetaChanges ? newPoolMetadata : null, + hasEpochChanges || hasTrancheChanges + ? { + minEpochTime: hasEpochChanges ? epochSeconds : undefined, + tranches: hasTrancheChanges ? tranches : undefined, + } + : null, + ], { account, forceProxyType: 'Borrow' } ) actions.setSubmitting(false) @@ -205,7 +216,22 @@ export function EpochAndTranches() { // eslint-disable-next-line react-hooks/exhaustive-deps }, [isEditing]) - const hasChanges = Object.entries(form.values).some(([k, v]) => (initialValues as any)[k] !== v) + const hasMetaChanges = initialValues.tranches.some((t1, i) => { + const t2 = form.values.tranches[i] + return t1.minInvestment !== t2.minInvestment + }) + const hasTrancheChanges = initialValues.tranches.some((t1, i) => { + const t2 = form.values.tranches[i] + return ( + t1.tokenName !== t2.tokenName || + t1.symbolName !== t2.symbolName || + t1.interestRate !== t2.interestRate || + t1.minRiskBuffer !== t2.minRiskBuffer + ) + }) + const epochSeconds = ((form.values.epochHours as number) * 60 + (form.values.epochMinutes as number)) * 60 + const hasEpochChanges = pool.parameters.minEpochTime !== epochSeconds + const hasChanges = hasMetaChanges || hasTrancheChanges || hasEpochChanges const delay = consts.poolSystem.minUpdateDelay / (60 * 60 * 24) From ae51a98e768b2845e2e784a6e7cdacb95408ba9a Mon Sep 17 00:00:00 2001 From: Onno Visser Date: Mon, 2 Sep 2024 10:01:12 +0200 Subject: [PATCH 3/7] Fix duplicate fees (#2419) --- centrifuge-js/src/modules/pools.ts | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/centrifuge-js/src/modules/pools.ts b/centrifuge-js/src/modules/pools.ts index 8d050ee17..3ca0bedb6 100644 --- a/centrifuge-js/src/modules/pools.ts +++ b/centrifuge-js/src/modules/pools.ts @@ -4330,7 +4330,8 @@ export function getPoolsModule(inst: Centrifuge) { switchMap((api) => api.query.poolFees.lastFeeId()), take(1), combineLatestWith($api), - switchMap(([lastFeeId, api]) => { + combineLatestWith(getPoolFees([poolId])), + switchMap(([[lastFeeId, api], poolFees]) => { const removeSubmittables = remove.map((feeId) => api.tx.poolFees.removeFee([feeId])) const addSubmittables = add.map(({ poolId, fee }) => { return api.tx.poolFees.proposeNewFee(poolId, 'Top', { @@ -4339,15 +4340,14 @@ export function getPoolsModule(inst: Centrifuge) { feeType: { [fee.feeType]: { limit: { [fee.limit]: fee.amount } } }, }) }) + const removedFeeIds = new Set(remove) + const remainingFeeIds = new Set(poolFees.map((fee) => fee.id).filter((id) => !removedFeeIds.has(id))) const updatedMetadata = { ...metadata, pool: { ...metadata.pool, poolFees: [ - ...(metadata?.pool?.poolFees?.filter((fee) => { - if (remove.length) return remove.find((f) => f !== fee.id) - return true - }) || []), + ...(metadata?.pool?.poolFees?.filter((fee) => remainingFeeIds.has(fee.id)) || []), ...add.map((metadata, index) => { return { id: parseInt(lastFeeId.toHuman() as string, 10) + index + 1, From 131269cc51182c0964bfd78e2981fcdc13969a81 Mon Sep 17 00:00:00 2001 From: Jeroen <1748621+hieronx@users.noreply.github.com> Date: Mon, 2 Sep 2024 16:59:15 +0200 Subject: [PATCH 4/7] Show P&L for DYF (#2423) * Show P&L for DYF * Add to table --- centrifuge-app/src/pages/Loan/KeyMetrics.tsx | 5 +---- centrifuge-app/src/pages/Loan/TransactionTable.tsx | 8 ++++++++ 2 files changed, 9 insertions(+), 4 deletions(-) diff --git a/centrifuge-app/src/pages/Loan/KeyMetrics.tsx b/centrifuge-app/src/pages/Loan/KeyMetrics.tsx index f5330a2d2..3d5bb5345 100644 --- a/centrifuge-app/src/pages/Loan/KeyMetrics.tsx +++ b/centrifuge-app/src/pages/Loan/KeyMetrics.tsx @@ -122,10 +122,7 @@ export function KeyMetrics({ pool, loan }: Props) { }, ] : []), - ...(loan.pricing.maturityDate && - 'valuationMethod' in loan.pricing && - loan.pricing.valuationMethod === 'oracle' && - loan.pricing.notional.gtn(0) + ...('valuationMethod' in loan.pricing && loan.pricing.valuationMethod === 'oracle' ? [ sumRealizedProfitFifo ? { diff --git a/centrifuge-app/src/pages/Loan/TransactionTable.tsx b/centrifuge-app/src/pages/Loan/TransactionTable.tsx index 5d9e75ef7..50fb80ec1 100644 --- a/centrifuge-app/src/pages/Loan/TransactionTable.tsx +++ b/centrifuge-app/src/pages/Loan/TransactionTable.tsx @@ -216,6 +216,14 @@ export const TransactionTable = ({ header: `Principal (${currency})`, cell: (row: Row) => (row.position ? `${formatBalance(row.position, undefined, 2, 2)}` : '-'), }, + { + align: 'left', + header: `Realized P&L`, + cell: (row: Row) => + row.realizedProfitFifo + ? `${row.type !== 'REPAID' ? '-' : ''}${formatBalance(row.realizedProfitFifo, undefined, 2, 2)}` + : '-', + }, ]), ] as Column[] From 663eb16fe0959a4e54ee4748a2f0ae1d1d219283 Mon Sep 17 00:00:00 2001 From: Katty Barroso <51223655+kattylucy@users.noreply.github.com> Date: Tue, 3 Sep 2024 14:11:49 -0500 Subject: [PATCH 5/7] Conditionally add maturity date (#2424) --- centrifuge-app/src/components/LoanList.tsx | 53 ++++++++++++++++------ 1 file changed, 38 insertions(+), 15 deletions(-) diff --git a/centrifuge-app/src/components/LoanList.tsx b/centrifuge-app/src/components/LoanList.tsx index baa15d147..9b5876f27 100644 --- a/centrifuge-app/src/components/LoanList.tsx +++ b/centrifuge-app/src/components/LoanList.tsx @@ -36,6 +36,7 @@ type Row = (Loan | TinlakeLoan) & { idSortKey: number originationDateSortKey: string status: 'Created' | 'Active' | 'Closed' | '' + maturityDate: string | null } type Props = { @@ -96,6 +97,24 @@ export function LoanList({ loans }: Props) { } }) || [] + const rows: Row[] = filters.data.map((loan) => ({ + nftIdSortKey: loan.asset.nftId, + idSortKey: parseInt(loan.id, 10), + outstandingDebtSortKey: loan.status !== 'Closed' && loan?.outstandingDebt?.toDecimal().toNumber(), + originationDateSortKey: + loan.status === 'Active' && + loan?.originationDate && + 'interestRate' in loan.pricing && + !loan?.pricing.interestRate?.isZero() && + !loan?.totalBorrowed?.isZero() + ? loan.originationDate + : '', + maturityDate: loan.pricing.maturityDate, + ...loan, + })) + + const hasMaturityDate = rows.some((loan) => loan.maturityDate) + const columns = [ { align: 'left', @@ -121,6 +140,23 @@ export function LoanList({ loans }: Props) { sortKey: 'originationDateSortKey', }, ]), + ...(hasMaturityDate + ? [ + { + align: 'left', + header: , + cell: (l: Row) => { + if (l.poolId.startsWith('0x') && l.id !== '0' && l.maturityDate) { + return formatDate(l.maturityDate) + } + return l?.maturityDate && 'valuationMethod' in l.pricing && l.pricing.valuationMethod !== 'cash' + ? formatDate(l.maturityDate) + : '-' + }, + sortKey: 'maturityDate', + }, + ] + : []), { align: 'right', header: , @@ -147,21 +183,6 @@ export function LoanList({ loans }: Props) { }, ].filter(Boolean) as Column[] - const rows: Row[] = filters.data.map((loan) => ({ - nftIdSortKey: loan.asset.nftId, - idSortKey: parseInt(loan.id, 10), - outstandingDebtSortKey: loan.status !== 'Closed' && loan?.outstandingDebt?.toDecimal().toNumber(), - originationDateSortKey: - loan.status === 'Active' && - loan?.originationDate && - 'interestRate' in loan.pricing && - !loan?.pricing.interestRate?.isZero() && - !loan?.totalBorrowed?.isZero() - ? loan.originationDate - : '', - ...loan, - })) - const pinnedData: Row[] = [ { id: '0', @@ -198,6 +219,7 @@ export function LoanList({ loans }: Props) { ? loan.originationDate : '', ...loan, + maturityDate: loan.pricing.maturityDate, } }), ] @@ -216,6 +238,7 @@ export function LoanList({ loans }: Props) { pageSize={20} page={pagination.page} pinnedData={pinnedData} + defaultSortKey="maturityDate" /> From 6908e7b27c119582b2932b73ebcfcfb1ac4c2fbc Mon Sep 17 00:00:00 2001 From: Katty Barroso <51223655+kattylucy@users.noreply.github.com> Date: Tue, 3 Sep 2024 14:46:49 -0500 Subject: [PATCH 6/7] Pool overview page redesign (#2402) * Remove alternative theme * Refactor base layout * Add fixes to pools * Update menu * Bug fixes * Calculate YoY * Fix linter errors * Design fixes * Add review feedback * Fix storybook colors * TS feeback * Add margin transaction history --- .../src/components/CardTotalValueLocked.tsx | 98 -------- .../Charts/PoolPerformanceChart.tsx | 2 +- .../src/components/DebugFlags/config.ts | 6 - centrifuge-app/src/components/DemoBanner.tsx | 4 +- centrifuge-app/src/components/Footer.tsx | 15 +- .../components/LayoutBase/LayoutSection.tsx | 2 +- .../src/components/LayoutBase/index.tsx | 45 ++-- .../src/components/LayoutBase/styles.tsx | 140 +++++++----- .../src/components/LogoCentrifuge.tsx | 24 +- .../src/components/Menu/GovernanceMenu.tsx | 7 +- .../src/components/Menu/IssuerMenu.tsx | 34 ++- .../src/components/Menu/NavManagementMenu.tsx | 3 +- .../src/components/Menu/PageLink.tsx | 7 +- .../src/components/Menu/PoolLink.tsx | 5 +- centrifuge-app/src/components/Menu/Toggle.tsx | 5 + centrifuge-app/src/components/Menu/index.tsx | 6 +- .../PoolOverview/TrancheTokenCards.tsx | 2 +- .../src/components/Report/PoolReportPage.tsx | 13 +- centrifuge-app/src/components/Resolutions.tsx | 2 +- centrifuge-app/src/components/Root.tsx | 214 +++++++++--------- centrifuge-app/src/config.ts | 43 +--- centrifuge-app/src/pages/AccountNFTs.tsx | 7 +- centrifuge-app/src/pages/Collection.tsx | 7 +- centrifuge-app/src/pages/Collections.tsx | 7 +- centrifuge-app/src/pages/ConvertAddress.tsx | 10 +- .../src/pages/InvestmentDisclaimer.tsx | 21 +- .../src/pages/IssuerCreatePool/index.tsx | 7 +- .../src/pages/IssuerPool/Access/index.tsx | 5 +- .../pages/IssuerPool/Assets/CreateLoan.tsx | 7 +- .../src/pages/IssuerPool/Assets/index.tsx | 5 +- .../Configuration/CreateLoanTemplate.tsx | 7 +- .../Configuration/ViewLoanTemplate.tsx | 7 +- .../pages/IssuerPool/Configuration/index.tsx | 5 +- .../src/pages/IssuerPool/Investors/index.tsx | 5 +- .../src/pages/IssuerPool/Liquidity/index.tsx | 5 +- .../src/pages/IssuerPool/Overview/index.tsx | 5 +- .../src/pages/IssuerPool/PoolFees/index.tsx | 5 +- .../src/pages/IssuerPool/Pricing/index.tsx | 5 +- centrifuge-app/src/pages/Loan/index.tsx | 15 +- centrifuge-app/src/pages/MintNFT.tsx | 7 +- centrifuge-app/src/pages/MultisigApproval.tsx | 7 +- centrifuge-app/src/pages/NFT.tsx | 7 +- .../src/pages/NavManagement/Overview.tsx | 5 +- centrifuge-app/src/pages/NotFound.tsx | 7 +- .../src/pages/Pool/Assets/index.tsx | 5 +- .../src/pages/Pool/Liquidity/index.tsx | 37 ++- .../src/pages/Pool/Overview/index.tsx | 28 +-- .../src/pages/Pool/PoolFees/index.tsx | 5 +- centrifuge-app/src/pages/Pool/index.tsx | 2 +- centrifuge-app/src/pages/PoolTransactions.tsx | 23 +- centrifuge-app/src/pages/Pools.tsx | 73 ++++-- .../pages/Portfolio/TransactionHistory.tsx | 9 +- centrifuge-app/src/pages/Portfolio/index.tsx | 7 +- centrifuge-app/src/pages/Prime/Detail.tsx | 13 +- centrifuge-app/src/pages/Prime/index.tsx | 7 +- centrifuge-app/src/pages/Swaps.tsx | 10 +- centrifuge-app/src/utils/useListedPools.ts | 91 +++++++- .../src/components/WalletMenu/WalletMenu.tsx | 2 +- fabric/.storybook/preview.jsx | 8 +- fabric/src/components/Banner/index.tsx | 2 +- fabric/src/components/Button/WalletButton.tsx | 6 +- fabric/src/components/Card/index.ts | 2 +- fabric/src/components/CurrencyInput/index.tsx | 2 +- fabric/src/components/Tabs/index.tsx | 6 +- fabric/src/components/Text/index.tsx | 8 +- fabric/src/theme/altairDark.ts | 8 +- fabric/src/theme/altairLight.ts | 4 +- fabric/src/theme/centrifugeDark.ts | 34 --- ...{centrifugeLight.ts => centrifugeTheme.ts} | 8 +- fabric/src/theme/index.ts | 3 +- fabric/src/theme/tokens/colors.ts | 29 ++- fabric/src/theme/tokens/modeDark.ts | 112 --------- .../theme/tokens/{modeLight.ts => theme.ts} | 61 ++--- fabric/src/theme/types.ts | 5 +- 74 files changed, 613 insertions(+), 842 deletions(-) delete mode 100644 centrifuge-app/src/components/CardTotalValueLocked.tsx delete mode 100644 fabric/src/theme/centrifugeDark.ts rename fabric/src/theme/{centrifugeLight.ts => centrifugeTheme.ts} (81%) delete mode 100644 fabric/src/theme/tokens/modeDark.ts rename fabric/src/theme/tokens/{modeLight.ts => theme.ts} (69%) diff --git a/centrifuge-app/src/components/CardTotalValueLocked.tsx b/centrifuge-app/src/components/CardTotalValueLocked.tsx deleted file mode 100644 index 836bfcbcc..000000000 --- a/centrifuge-app/src/components/CardTotalValueLocked.tsx +++ /dev/null @@ -1,98 +0,0 @@ -import { Box, Stack, Text, TextWithPlaceholder, Tooltip } from '@centrifuge/fabric' -import * as React from 'react' -import { useTheme } from 'styled-components' -import { config } from '../config' -import { Dec } from '../utils/Decimal' -import { formatDate } from '../utils/date' -import { formatBalance } from '../utils/formatting' -import { useListedPools } from '../utils/useListedPools' -import type { DataPoint } from './Charts/TotalValueLocked' -import { tooltipText } from './Tooltips' - -const TotalValueLocked = React.lazy(() => import('./Charts/TotalValueLocked')) - -export function CardTotalValueLocked() { - const { colors } = useTheme() - const [hovered, setHovered] = React.useState(undefined) - const [, listedTokens] = useListedPools() - - const chartHeight = 100 - const balanceProps = { - as: 'strong', - fontSize: [28, 32], - } - const headingProps = { - as: 'h2', - variant: 'heading3', - } - - const totalValueLocked = React.useMemo(() => { - return ( - listedTokens - ?.map((tranche) => ({ - valueLocked: tranche.totalIssuance - .toDecimal() - .mul(tranche.tokenPrice?.toDecimal() ?? Dec(0)) - .toNumber(), - })) - .reduce((prev, curr) => prev.add(curr.valueLocked), Dec(0)) ?? Dec(0) - ) - }, [listedTokens]) - - return ( - - - {hovered ? ( - <> - - TVL on{' '} - - - {formatBalance(Dec(hovered?.tvl || 0), config.baseCurrency)} - - ) : ( - <> - - {tooltipText.tvl.label} - - - {formatBalance(Dec(totalValueLocked || 0), config.baseCurrency)} - - - )} - - - - - }> - - - - - - ) -} diff --git a/centrifuge-app/src/components/Charts/PoolPerformanceChart.tsx b/centrifuge-app/src/components/Charts/PoolPerformanceChart.tsx index 67bef122a..ce2bc15c3 100644 --- a/centrifuge-app/src/components/Charts/PoolPerformanceChart.tsx +++ b/centrifuge-app/src/components/Charts/PoolPerformanceChart.tsx @@ -79,7 +79,7 @@ function PoolPerformanceChart() { } return { day: new Date(day.timestamp), nav: Number(nav), price: Number(price) } }) || [], - [isSingleTranche, truncatedPoolStates] + [isSingleTranche, truncatedPoolStates, todayAssetValue, todayPrice] ) const today = { diff --git a/centrifuge-app/src/components/DebugFlags/config.ts b/centrifuge-app/src/components/DebugFlags/config.ts index 721323ed4..2eddcf28f 100644 --- a/centrifuge-app/src/components/DebugFlags/config.ts +++ b/centrifuge-app/src/components/DebugFlags/config.ts @@ -38,7 +38,6 @@ export type Key = | 'persistDebugFlags' | 'showUnusedFlags' | 'allowInvestBelowMin' - | 'alternativeTheme' | 'editPoolConfig' | 'editPoolVisibility' | 'showAdvancedAccounts' @@ -59,11 +58,6 @@ export const flagsConfig = { default: false, type: 'checkbox', }, - alternativeTheme: { - alwaysShow: true, - default: false, - type: 'checkbox', - }, convertAddress: { Component: ConvertAddressDialogWithButton, alwaysShow: true, diff --git a/centrifuge-app/src/components/DemoBanner.tsx b/centrifuge-app/src/components/DemoBanner.tsx index e0cf0a046..dadf079a6 100644 --- a/centrifuge-app/src/components/DemoBanner.tsx +++ b/centrifuge-app/src/components/DemoBanner.tsx @@ -25,14 +25,14 @@ export const DemoBanner = () => { isOpen={isOpen} onClose={() => onClose()} title={ - + Welcome to the demo environment of the Centrifuge App. All data and wallet transactions are not real as this is purely a testing environment. Read{' '} { - const theme = useTheme() const [isDialogOpen, setIsDialogOpen] = React.useState(false) return ( <> setIsDialogOpen(false)} /> - + - + Need help? - + Documentation setIsDialogOpen(true)}> - + Investment disclaimer - + Data privacy policy - + Imprint diff --git a/centrifuge-app/src/components/LayoutBase/LayoutSection.tsx b/centrifuge-app/src/components/LayoutBase/LayoutSection.tsx index 0a3a522be..2cdb7f2cc 100644 --- a/centrifuge-app/src/components/LayoutBase/LayoutSection.tsx +++ b/centrifuge-app/src/components/LayoutBase/LayoutSection.tsx @@ -12,7 +12,7 @@ type Props = { export function LayoutSection({ title, titleAddition, subtitle, headerRight, children, ...boxProps }: Props) { return ( - + {(title || titleAddition || subtitle || headerRight) && ( diff --git a/centrifuge-app/src/components/LayoutBase/index.tsx b/centrifuge-app/src/components/LayoutBase/index.tsx index b38313e48..5005fbf4c 100644 --- a/centrifuge-app/src/components/LayoutBase/index.tsx +++ b/centrifuge-app/src/components/LayoutBase/index.tsx @@ -1,18 +1,17 @@ import { WalletMenu } from '@centrifuge/centrifuge-react' import { Stack, Text } from '@centrifuge/fabric' import * as React from 'react' +import { Outlet } from 'react-router' import { useIsAboveBreakpoint } from '../../utils/useIsAboveBreakpoint' import { Footer } from '../Footer' -import { LoadBoundary } from '../LoadBoundary' -import { LogoLink } from '../LogoLink' +import { LogoLink } from '../LogoLink-deprecated' import { Menu } from '../Menu' import { BasePadding } from './BasePadding' import { + ContentWrapper, FooterContainer, - HeaderBackground, Inner, LogoContainer, - MainContainer, Root, ToolbarContainer, WalletContainer, @@ -20,47 +19,33 @@ import { WalletPositioner, } from './styles' -type LayoutBaseProps = { - children?: React.ReactNode - gap?: number | number[] -} - -export function LayoutBase({ children, gap }: LayoutBaseProps) { +export function LayoutBase(): JSX.Element { const isMedium = useIsAboveBreakpoint('M') - return ( + + + + + + + - - - + - - - - - - - - - - - - - {children} - - - {isMedium && (