From 401e20da8ec77c646f53b431d451ae2dad3ee98b Mon Sep 17 00:00:00 2001 From: Sophia Date: Wed, 27 Dec 2023 05:16:05 -0500 Subject: [PATCH 1/2] Update copy to asset type (#1831) --- centrifuge-app/src/pages/IssuerPool/Assets/CreateLoan.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/centrifuge-app/src/pages/IssuerPool/Assets/CreateLoan.tsx b/centrifuge-app/src/pages/IssuerPool/Assets/CreateLoan.tsx index cc18419162..f152a3a09f 100644 --- a/centrifuge-app/src/pages/IssuerPool/Assets/CreateLoan.tsx +++ b/centrifuge-app/src/pages/IssuerPool/Assets/CreateLoan.tsx @@ -405,7 +405,7 @@ function IssuerCreateLoan() { {({ field, meta, form }: FieldProps) => ( form.setFieldValue('pricing.valuationMethod', event.target.value, false)} errorMessage={meta.touched && meta.error ? meta.error : undefined} options={[ @@ -414,7 +414,7 @@ function IssuerCreateLoan() { { value: 'oracle', label: 'Fungible asset - external pricing' }, { value: 'cash', label: 'Cash' }, ]} - placeholder="Choose valuation method" + placeholder="Choose asset type" /> )} From 71e48a548bba13d719492ac064c33f57a906f16b Mon Sep 17 00:00:00 2001 From: Sophia Date: Wed, 27 Dec 2023 08:29:39 -0500 Subject: [PATCH 2/2] Centrifuge App: Empty portfolio state (#1832) * Add fallbacks for portfolio components * Add explore pools link * Fix prime bug in holdings * Add connect wallet CTA * Remove comment --- centrifuge-app/src/components/Menu/index.tsx | 10 ++-- .../components/Portfolio/AssetAllocation.tsx | 12 +++- .../Portfolio/CardPortfolioValue.tsx | 57 ++++++++++--------- .../src/components/Portfolio/Holdings.tsx | 22 ++++--- .../src/components/Portfolio/Transactions.tsx | 13 +++-- centrifuge-app/src/pages/Portfolio/index.tsx | 52 ++++++++++++----- centrifuge-app/src/pages/Prime/Detail.tsx | 6 +- 7 files changed, 102 insertions(+), 70 deletions(-) diff --git a/centrifuge-app/src/components/Menu/index.tsx b/centrifuge-app/src/components/Menu/index.tsx index e87947243e..27b8335cc0 100644 --- a/centrifuge-app/src/components/Menu/index.tsx +++ b/centrifuge-app/src/components/Menu/index.tsx @@ -43,12 +43,10 @@ export function Menu() { Pools - {address && ( - - - Portfolio - - )} + + + Portfolio + {address && (transactions ?? null) && ( diff --git a/centrifuge-app/src/components/Portfolio/AssetAllocation.tsx b/centrifuge-app/src/components/Portfolio/AssetAllocation.tsx index e19d67f171..1e2cb2c041 100644 --- a/centrifuge-app/src/components/Portfolio/AssetAllocation.tsx +++ b/centrifuge-app/src/components/Portfolio/AssetAllocation.tsx @@ -15,7 +15,7 @@ const assetClassLabels = { } type AssetClass = 'publicCredit' | 'privateCredit' -export function AssetAllocation({ address }: { address: string }) { +export function AssetAllocation({ address }: { address?: string }) { const balances = useBalances(address) const pools = usePools() const theme = useTheme() @@ -48,7 +48,7 @@ export function AssetAllocation({ address }: { address: string }) { }) .sort((a, b) => (b.value > a.value ? 1 : a === b ? 0 : -1)) - return !!balances?.tranches && !!balances?.tranches.length ? ( + return address && !!balances?.tranches && !!balances?.tranches.length ? ( @@ -84,5 +84,11 @@ export function AssetAllocation({ address }: { address: string }) { ))} - ) : null + ) : ( + + + No allocation displayed yet + + + ) } diff --git a/centrifuge-app/src/components/Portfolio/CardPortfolioValue.tsx b/centrifuge-app/src/components/Portfolio/CardPortfolioValue.tsx index e234187635..e1c2403d04 100644 --- a/centrifuge-app/src/components/Portfolio/CardPortfolioValue.tsx +++ b/centrifuge-app/src/components/Portfolio/CardPortfolioValue.tsx @@ -4,6 +4,7 @@ import styled, { useTheme } from 'styled-components' import { config } from '../../config' import { Dec } from '../../utils/Decimal' import { formatBalance } from '../../utils/formatting' +import { useTransactionsByAddress } from '../../utils/usePools' import { PortfolioValue } from './PortfolioValue' import { usePortfolioTokens } from './usePortfolio' @@ -20,8 +21,9 @@ const rangeFilters = [ // { value: 'all', label: 'All' }, ] as const -export function CardPortfolioValue({ address }: { address: string }) { +export function CardPortfolioValue({ address }: { address?: string }) { const portfolioTokens = usePortfolioTokens(address) + const transactions = useTransactionsByAddress(address) const { colors } = useTheme() @@ -76,32 +78,35 @@ export function CardPortfolioValue({ address }: { address: string }) { + {transactions?.investorTransactions.length === 0 || !address ? null : ( + <> + + + {rangeFilters.map((rangeFilter, index) => ( + + setRange(rangeFilter)}> + + {rangeFilter.label} + + + + {index !== rangeFilters.length - 1 && ( + + )} + + ))} + + - - - {rangeFilters.map((rangeFilter, index) => ( - - setRange(rangeFilter)}> - - {rangeFilter.label} - - - - {index !== rangeFilters.length - 1 && ( - - )} - - ))} - - - - - - + + + + + )} ) diff --git a/centrifuge-app/src/components/Portfolio/Holdings.tsx b/centrifuge-app/src/components/Portfolio/Holdings.tsx index 0e4ac4f45f..92074f532c 100644 --- a/centrifuge-app/src/components/Portfolio/Holdings.tsx +++ b/centrifuge-app/src/components/Portfolio/Holdings.tsx @@ -9,6 +9,7 @@ import { IconMinus, IconPlus, IconSend, + Shelf, Text, Thumbnail, } from '@centrifuge/fabric' @@ -29,7 +30,6 @@ import { usePool, usePoolMetadata, usePools } from '../../utils/usePools' import { Column, DataTable, SortableTableHeader } from '../DataTable' import { Eththumbnail } from '../EthThumbnail' import { InvestRedeemDrawer } from '../InvestRedeem/InvestRedeemDrawer' -import { LayoutSection } from '../LayoutBase/LayoutSection' import { RouterLinkButton } from '../RouterLinkButton' import { Tooltips } from '../Tooltips' import { TransferTokensDrawer } from './TransferTokensDrawer' @@ -132,15 +132,7 @@ const columns: Column[] = [ }, ] -export function HoldingsSection({ address }: { address: string }) { - return ( - - - - ) -} - -export function Holdings({ canInvestRedeem = true, address }: { canInvestRedeem?: boolean; address: string }) { +export function Holdings({ canInvestRedeem = true, address }: { canInvestRedeem?: boolean; address?: string }) { const centBalances = useBalances(address) const wallet = useWallet() const { data: tinlakeBalances } = useTinlakeBalances() @@ -229,7 +221,7 @@ export function Holdings({ canInvestRedeem = true, address }: { canInvestRedeem? : []), ] - return tokens.length ? ( + return address && tokens.length ? ( <> - ) : null + ) : ( + + + No holdings displayed yet + + + ) } const TokenWithIcon = ({ poolId, currency }: Row) => { diff --git a/centrifuge-app/src/components/Portfolio/Transactions.tsx b/centrifuge-app/src/components/Portfolio/Transactions.tsx index 5845cd3af3..cb790ba3ef 100644 --- a/centrifuge-app/src/components/Portfolio/Transactions.tsx +++ b/centrifuge-app/src/components/Portfolio/Transactions.tsx @@ -14,7 +14,6 @@ import { } from '@centrifuge/fabric' import * as React from 'react' import { TransactionTypeChip } from '../../components/Portfolio/TransactionTypeChip' -import { Spinner } from '../../components/Spinner' import { formatDate } from '../../utils/date' import { Dec } from '../../utils/Decimal' import { getCSVDownloadUrl } from '../../utils/getCSVDownloadUrl' @@ -26,7 +25,7 @@ type TransactionsProps = { onlyMostRecent?: boolean narrow?: boolean txTypes?: InvestorTransactionType[] - address: string + address?: string trancheId?: string } @@ -161,7 +160,7 @@ export function Transactions({ onlyMostRecent, narrow, txTypes, address, tranche const pagination = usePagination({ data: investorTransactions, pageSize: onlyMostRecent ? 3 : 15 }) - return investorTransactions?.length ? ( + return address && investorTransactions?.length ? ( @@ -196,9 +195,11 @@ export function Transactions({ onlyMostRecent, narrow, txTypes, address, tranche )} - ) : investorTransactions ? ( - No transactions ) : ( - + + + No transactions displayed yet + + ) } diff --git a/centrifuge-app/src/pages/Portfolio/index.tsx b/centrifuge-app/src/pages/Portfolio/index.tsx index 54104e0a1e..751716812b 100644 --- a/centrifuge-app/src/pages/Portfolio/index.tsx +++ b/centrifuge-app/src/pages/Portfolio/index.tsx @@ -1,12 +1,13 @@ -import { Stack, Text } from '@centrifuge/fabric' +import { useWallet } from '@centrifuge/centrifuge-react' +import { Button, Stack, Text } from '@centrifuge/fabric' import * as React from 'react' import { LayoutBase } from '../../components/LayoutBase' -import { BasePadding } from '../../components/LayoutBase/BasePadding' import { LayoutSection } from '../../components/LayoutBase/LayoutSection' import { AssetAllocation } from '../../components/Portfolio/AssetAllocation' import { CardPortfolioValue } from '../../components/Portfolio/CardPortfolioValue' -import { HoldingsSection } from '../../components/Portfolio/Holdings' +import { Holdings } from '../../components/Portfolio/Holdings' import { Transactions } from '../../components/Portfolio/Transactions' +import { RouterLinkButton } from '../../components/RouterLinkButton' import { useAddress } from '../../utils/useAddress' import { useTransactionsByAddress } from '../../utils/usePools' @@ -19,16 +20,10 @@ export default function PortfolioPage() { } function Portfolio() { - const address = useAddress('substrate') + const address = useAddress() const transactions = useTransactionsByAddress(address) + const { showNetworks } = useWallet() - if (!address) { - return ( - - You need to connect your wallet to see your portfolio - - ) - } return ( <> @@ -42,13 +37,40 @@ function Portfolio() { - - {transactions !== null && ( - - + {transactions?.investorTransactions.length === 0 ? ( + + + + The portfolio page is empty as there are no investments available for display at the moment. Go explore + some pools on Centrifuge, where you can earn yield from real-world assets. + + + View pools + + + + ) : null} + + {!address && ( + + + To view your investments, you need to connect your wallet. + + )} + + + + + + + + + diff --git a/centrifuge-app/src/pages/Prime/Detail.tsx b/centrifuge-app/src/pages/Prime/Detail.tsx index 6de6f88da4..4e633e9f45 100644 --- a/centrifuge-app/src/pages/Prime/Detail.tsx +++ b/centrifuge-app/src/pages/Prime/Detail.tsx @@ -5,7 +5,7 @@ import { useParams } from 'react-router' import { LayoutBase } from '../../components/LayoutBase' import { LayoutSection } from '../../components/LayoutBase/LayoutSection' import { CardPortfolioValue } from '../../components/Portfolio/CardPortfolioValue' -import { HoldingsSection } from '../../components/Portfolio/Holdings' +import { Holdings } from '../../components/Portfolio/Holdings' import { Transactions } from '../../components/Portfolio/Transactions' import { Resolutions } from '../../components/Resolutions' import { RouterTextLink } from '../../components/TextLink' @@ -47,7 +47,9 @@ function PrimeDetail() { - + + +