Merge branch 'main' into fix-holders

centrifuge · Jan 5, 2024 · 5741320 · 5741320
2 parents 9dac822 + 71e48a5
commit 5741320
Show file tree

Hide file tree

Showing 8 changed files with 104 additions and 72 deletions.
diff --git a/centrifuge-app/src/components/Menu/index.tsx b/centrifuge-app/src/components/Menu/index.tsx
@@ -43,12 +43,10 @@ export function Menu() {
         Pools
       </PageLink>
 
-      {address && (
-        <PageLink to="/portfolio" stacked={!isLarge}>
-          <IconPieChart />
-          Portfolio
-        </PageLink>
-      )}
+      <PageLink to="/portfolio" stacked={!isLarge}>
+        <IconPieChart />
+        Portfolio
+      </PageLink>
 
       {address && (transactions ?? null) && (
         <PageLink to="/history" stacked={!isLarge}>

diff --git 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 ? (
     <Shelf gap={8}>
       <AssetClassChart data={shares} currency="USD" total={total.toNumber()} />
       <Shelf as="ul" alignSelf="stretch" alignItems="stretch" flex={1} gap={6}>
@@ -84,5 +84,11 @@ export function AssetAllocation({ address }: { address: string }) {
         ))}
       </Shelf>
     </Shelf>
-  ) : null
+  ) : (
+    <Shelf borderRadius="4px" backgroundColor="backgroundSecondary" justifyContent="center" p="10px">
+      <Text color="textSecondary" variant="body2">
+        No allocation displayed yet
+      </Text>
+    </Shelf>
+  )
 }
diff --git 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 }) {
             </Shelf>
           </Shelf>
         </Stack>
+        {transactions?.investorTransactions.length === 0 || !address ? null : (
+          <>
+            <Stack gap={1}>
+              <Shelf justifyContent="flex-end" pr="20px">
+                {rangeFilters.map((rangeFilter, index) => (
+                  <React.Fragment key={rangeFilter.label}>
+                    <RangeFilterButton gap={1} onClick={() => setRange(rangeFilter)}>
+                      <Text variant="body3">
+                        <Text variant={rangeFilter.value === range.value && 'emphasized'}>{rangeFilter.label}</Text>
+                      </Text>
+                      <Box
+                        width="100%"
+                        backgroundColor={rangeFilter.value === range.value ? '#000000' : '#E0E0E0'}
+                        height="3px"
+                      />
+                    </RangeFilterButton>
+                    {index !== rangeFilters.length - 1 && (
+                      <Box width="24px" backgroundColor="#E0E0E0" height="3px" alignSelf="flex-end" />
+                    )}
+                  </React.Fragment>
+                ))}
+              </Shelf>
+            </Stack>
 
-        <Stack gap={1}>
-          <Shelf justifyContent="flex-end" pr="20px">
-            {rangeFilters.map((rangeFilter, index) => (
-              <React.Fragment key={rangeFilter.label}>
-                <RangeFilterButton gap={1} onClick={() => setRange(rangeFilter)}>
-                  <Text variant="body3">
-                    <Text variant={rangeFilter.value === range.value && 'emphasized'}>{rangeFilter.label}</Text>
-                  </Text>
-                  <Box
-                    width="100%"
-                    backgroundColor={rangeFilter.value === range.value ? '#000000' : '#E0E0E0'}
-                    height="3px"
-                  />
-                </RangeFilterButton>
-                {index !== rangeFilters.length - 1 && (
-                  <Box width="24px" backgroundColor="#E0E0E0" height="3px" alignSelf="flex-end" />
-                )}
-              </React.Fragment>
-            ))}
-          </Shelf>
-        </Stack>
-
-        <Box width="100%" height="300px">
-          <PortfolioValue rangeValue={range.value} address={address} />
-        </Box>
+            <Box width="100%" height="300px">
+              <PortfolioValue rangeValue={range.value} address={address} />
+            </Box>
+          </>
+        )}
       </Box>
     </Box>
   )

diff --git 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 (
-    <LayoutSection title="Holdings">
-      <Holdings address={address} />
-    </LayoutSection>
-  )
-}
-
-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 ? (
     <>
       <InvestRedeemDrawer
         poolId={investPoolId || redeemPoolId || ''}
@@ -245,7 +237,13 @@ export function Holdings({ canInvestRedeem = true, address }: { canInvestRedeem?
       />
       <DataTable columns={columns} data={tokens} defaultSortKey="position" />
     </>
-  ) : null
+  ) : (
+    <Shelf borderRadius="4px" backgroundColor="backgroundSecondary" justifyContent="center" p="10px">
+      <Text color="textSecondary" variant="body2">
+        No holdings displayed yet
+      </Text>
+    </Shelf>
+  )
 }
 
 const TokenWithIcon = ({ poolId, currency }: Row) => {

diff --git 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 ? (
     <PaginationProvider pagination={pagination}>
       <Stack gap={2}>
         <Box overflow="auto" width="100%">
@@ -196,9 +195,11 @@ export function Transactions({ onlyMostRecent, narrow, txTypes, address, tranche
         )}
       </Stack>
     </PaginationProvider>
-  ) : investorTransactions ? (
-    <Text>No transactions</Text>
   ) : (
-    <Spinner />
+    <Shelf borderRadius="4px" backgroundColor="backgroundSecondary" justifyContent="center" p="10px">
+      <Text color="textSecondary" variant="body2">
+        No transactions displayed yet
+      </Text>
+    </Shelf>
   )
 }
diff --git 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) => (
                       <Select_DEPRECATED
                         {...field}
-                        label="Valuation method"
+                        label="Asset type"
                         onChange={(event) => 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"
                       />
                     )}
                   </Field>

diff --git 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 (
-      <BasePadding>
-        <Text as="strong">You need to connect your wallet to see your portfolio</Text>
-      </BasePadding>
-    )
-  }
   return (
     <>
       <LayoutSection backgroundColor="backgroundSecondary" pt={5} pb={3}>
@@ -42,13 +37,40 @@ function Portfolio() {
         </Stack>
         <CardPortfolioValue address={address} />
       </LayoutSection>
-      <HoldingsSection address={address} />
 
-      {transactions !== null && (
-        <LayoutSection title="Transaction history">
-          <Transactions onlyMostRecent address={address} />
+      {transactions?.investorTransactions.length === 0 ? (
+        <LayoutSection>
+          <Stack maxWidth="700px" gap={2}>
+            <Text variant="body2">
+              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.
+            </Text>
+            <RouterLinkButton style={{ display: 'inline-flex' }} variant="primary" to="/pools">
+              View pools
+            </RouterLinkButton>
+          </Stack>
+        </LayoutSection>
+      ) : null}
+
+      {!address && (
+        <LayoutSection>
+          <Stack maxWidth="700px" gap={2}>
+            <Text variant="body2">To view your investments, you need to connect your wallet.</Text>
+            <Button style={{ display: 'inline-flex' }} variant="primary" onClick={() => showNetworks()}>
+              Connect wallet
+            </Button>
+          </Stack>
         </LayoutSection>
       )}
+
+      <LayoutSection title="Holdings">
+        <Holdings address={address} />
+      </LayoutSection>
+
+      <LayoutSection title="Transaction history">
+        <Transactions onlyMostRecent address={address} />
+      </LayoutSection>
+
       <LayoutSection title="Allocation">
         <AssetAllocation address={address} />
       </LayoutSection>

diff --git 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() {
         </Shelf>
         <CardPortfolioValue address={centAddress} />
       </LayoutSection>
-      <HoldingsSection address={centAddress} />
+      <LayoutSection title="Holdings">
+        <Holdings address={centAddress} />
+      </LayoutSection>
       <LayoutSection title="Transaction history">
         <Transactions onlyMostRecent address={centAddress} />
       </LayoutSection>