Prime page fixes (#2117)

centrifuge · May 14, 2024 · cb9c08e · cb9c08e
1 parent 954ff6e
commit cb9c08e
Show file tree

Hide file tree

Showing 14 changed files with 356 additions and 209 deletions.
diff --git a/centrifuge-app/src/components/Charts/CashflowsChart.tsx b/centrifuge-app/src/components/Charts/CashflowsChart.tsx
@@ -34,7 +34,7 @@ export const CashflowsChart = ({ poolStates, pool }: Props) => {
   const [range, setRange] = React.useState<(typeof rangeFilters)[number]>({ value: 'ytd', label: 'Year to date' })
 
   const poolAge = pool.createdAt ? daysBetween(pool.createdAt, new Date()) : 0
-  const rangeNumber = getRangeNumber(range.value, poolAge)
+  const rangeNumber = getRangeNumber(range.value, poolAge) ?? 100
 
   const data = React.useMemo(
     () =>

diff --git a/centrifuge-app/src/components/Charts/PoolPerformanceChart.tsx b/centrifuge-app/src/components/Charts/PoolPerformanceChart.tsx
@@ -53,7 +53,7 @@ function PoolPerformanceChart() {
   })
 
   const [range, setRange] = React.useState<(typeof rangeFilters)[number]>({ value: 'ytd', label: 'Year to date' })
-  const rangeNumber = getRangeNumber(range.value, poolAge)
+  const rangeNumber = getRangeNumber(range.value, poolAge) ?? 100
 
   const data: ChartData[] = React.useMemo(
     () =>

diff --git a/centrifuge-app/src/components/Charts/utils.ts b/centrifuge-app/src/components/Charts/utils.ts
@@ -15,7 +15,7 @@ export const getRangeNumber = (rangeValue: string, poolAge?: number) => {
     return daysSinceJanuary1 + 1
   }
 
-  if (rangeValue === 'all' && poolAge) {
+  if (rangeValue === 'all') {
     return poolAge
   }
 

diff --git a/centrifuge-app/src/components/Portfolio/CardPortfolioValue.tsx b/centrifuge-app/src/components/Portfolio/CardPortfolioValue.tsx
@@ -5,6 +5,7 @@ import { config } from '../../config'
 import { Dec } from '../../utils/Decimal'
 import { formatBalance } from '../../utils/formatting'
 import { useTransactionsByAddress } from '../../utils/usePools'
+import { LoadBoundary } from '../LoadBoundary'
 import { useHoldings } from './Holdings'
 import { PortfolioValue } from './PortfolioValue'
 
@@ -18,7 +19,7 @@ const rangeFilters = [
   { value: '30d', label: '30 days' },
   { value: '90d', label: '90 days' },
   { value: 'ytd', label: 'Year to date' },
-  // { value: 'all', label: 'All' },
+  { value: 'all', label: 'All' },
 ] as const
 
 export function CardPortfolioValue({ address }: { address?: string }) {
@@ -100,7 +101,9 @@ export function CardPortfolioValue({ address }: { address?: string }) {
             </Stack>
 
             <Box width="100%" height="300px">
-              <PortfolioValue rangeValue={range.value} address={address} />
+              <LoadBoundary>
+                <PortfolioValue rangeValue={range.value} address={address} />
+              </LoadBoundary>
             </Box>
           </>
         ) : null}

diff --git a/centrifuge-app/src/components/Portfolio/Holdings.tsx b/centrifuge-app/src/components/Portfolio/Holdings.tsx
@@ -44,7 +44,7 @@ type Row = {
   marketValue: Decimal
   position: Decimal
   tokenPrice: Decimal
-  canInvestRedeem: boolean
+  showActions: boolean
   address?: string
   connectedNetwork?: string
 }
@@ -95,7 +95,7 @@ const columns: Column[] = [
   {
     align: 'left',
     header: '', // invest redeem buttons
-    cell: ({ canInvestRedeem, poolId, trancheId, currency, connectedNetwork }: Row) => {
+    cell: ({ showActions, poolId, trancheId, currency, connectedNetwork }: Row) => {
       const isTinlakePool = poolId.startsWith('0x')
       return (
         <Grid gap={1} justifySelf="end">
@@ -109,34 +109,37 @@ const columns: Column[] = [
             >
               View on Tinlake
             </AnchorButton>
-          ) : canInvestRedeem ? (
-            <Shelf>
-              <RouterLinkButton to={`?redeem=${poolId}-${trancheId}`} small variant="tertiary" icon={IconMinus}>
-                Redeem
-              </RouterLinkButton>
-              <RouterLinkButton to={`?invest=${poolId}-${trancheId}`} small variant="tertiary" icon={IconPlus}>
-                Invest
-              </RouterLinkButton>
-            </Shelf>
-          ) : connectedNetwork === 'Centrifuge' ? (
-            <Shelf>
-              <RouterLinkButton to={`?receive=${currency?.symbol}`} small variant="tertiary" icon={IconDownload}>
-                Receive
-              </RouterLinkButton>
-              <RouterLinkButton to={`?send=${currency?.symbol}`} small variant="tertiary" icon={IconSend}>
-                Send
-              </RouterLinkButton>
-            </Shelf>
+          ) : showActions ? (
+            trancheId ? (
+              <Shelf>
+                <RouterLinkButton to={`?redeem=${poolId}-${trancheId}`} small variant="tertiary" icon={IconMinus}>
+                  Redeem
+                </RouterLinkButton>
+                <RouterLinkButton to={`?invest=${poolId}-${trancheId}`} small variant="tertiary" icon={IconPlus}>
+                  Invest
+                </RouterLinkButton>
+              </Shelf>
+            ) : connectedNetwork === 'Centrifuge' ? (
+              <Shelf>
+                <RouterLinkButton to={`?receive=${currency?.symbol}`} small variant="tertiary" icon={IconDownload}>
+                  Receive
+                </RouterLinkButton>
+                <RouterLinkButton to={`?send=${currency?.symbol}`} small variant="tertiary" icon={IconSend}>
+                  Send
+                </RouterLinkButton>
+              </Shelf>
+            ) : null
           ) : null}
         </Grid>
       )
     },
   },
 ]
 
-export function useHoldings(address?: string, canInvestRedeem = true) {
+export function useHoldings(address?: string, showActions = true) {
   const { data: tinlakeBalances } = useTinlakeBalances(address && isEvmAddress(address) ? address : undefined)
   const centBalances = useBalances(address && isSubstrateAddress(address) ? address : undefined)
+
   const wallet = useWallet()
   const tinlakePools = useTinlakePools()
   const portfolioTokens = usePortfolioTokens(address)
@@ -147,7 +150,7 @@ export function useHoldings(address?: string, canInvestRedeem = true) {
     ...portfolioTokens.map((token) => ({
       ...token,
       tokenPrice: token.tokenPrice.toDecimal() || Dec(0),
-      canInvestRedeem,
+      showActions,
     })),
     ...(tinlakeBalances?.tranches.filter((tranche) => !tranche.balance.isZero()) || []).map((balance) => {
       const pool = tinlakePools.data?.pools?.find((pool) => pool.id === balance.poolId)
@@ -160,7 +163,7 @@ export function useHoldings(address?: string, canInvestRedeem = true) {
         trancheId: balance.trancheId,
         poolId: balance.poolId,
         currency: tranche.currency,
-        canInvestRedeem,
+        showActions,
         connectedNetwork: wallet.connectedNetworkName,
       }
     }),
@@ -173,7 +176,7 @@ export function useHoldings(address?: string, canInvestRedeem = true) {
         trancheId: '',
         poolId: '',
         currency: currency.currency,
-        canInvestRedeem: false,
+        showActions: false,
         connectedNetwork: wallet.connectedNetworkName,
       }
     }),
@@ -189,7 +192,7 @@ export function useHoldings(address?: string, canInvestRedeem = true) {
           position: currency.balance.toDecimal(),
           tokenPrice: Dec(1),
           marketValue: currency.balance.toDecimal(),
-          canInvestRedeem: false,
+          showActions: false,
           connectedNetwork: wallet.connectedNetworkName,
         }
       }) || []),
@@ -211,7 +214,7 @@ export function useHoldings(address?: string, canInvestRedeem = true) {
             position: centBalances?.native.balance.toDecimal().sub(centBalances.native.locked.toDecimal()) || Dec(0),
             tokenPrice: CFGPrice ? Dec(CFGPrice) : Dec(0),
             marketValue: CFGPrice ? centBalances?.native.balance.toDecimal().mul(CFGPrice) ?? Dec(0) : Dec(0),
-            canInvestRedeem: false,
+            showActions: false,
             connectedNetwork: wallet.connectedNetworkName,
           },
         ]
@@ -221,7 +224,7 @@ export function useHoldings(address?: string, canInvestRedeem = true) {
   return tokens
 }
 
-export function Holdings({ canInvestRedeem = true, address }: { canInvestRedeem?: boolean; address?: string }) {
+export function Holdings({ showActions = true, address }: { showActions?: boolean; address?: string }) {
   const { search, pathname } = useLocation()
   const history = useHistory()
   const params = new URLSearchParams(search)
@@ -233,7 +236,7 @@ export function Holdings({ canInvestRedeem = true, address }: { canInvestRedeem?
   const [investPoolId, investTrancheId] = openInvestDrawer?.split('-') || []
   const [redeemPoolId, redeemTrancheId] = openRedeemDrawer?.split('-') || []
 
-  const tokens = useHoldings(address, canInvestRedeem)
+  const tokens = useHoldings(address, showActions)
 
   return address && tokens.length ? (
     <>

diff --git a/centrifuge-app/src/components/Portfolio/PortfolioValue.tsx b/centrifuge-app/src/components/Portfolio/PortfolioValue.tsx
@@ -32,6 +32,7 @@ export function PortfolioValue({ rangeValue, address }: { rangeValue: string; ad
   const dailyPortfolioValue = useDailyPortfolioValue(address, rangeNumber)
 
   const getXAxisInterval = () => {
+    if (!rangeNumber) return dailyPortfolioValue ? Math.floor(dailyPortfolioValue.length / 10) : 45
     if (rangeNumber <= 30) return 5
     if (rangeNumber > 30 && rangeNumber <= 90) {
       return 14

diff --git a/centrifuge-app/src/components/Portfolio/Transactions.tsx b/centrifuge-app/src/components/Portfolio/Transactions.tsx
@@ -15,7 +15,6 @@ import {
 import * as React from 'react'
 import { TransactionTypeChip } from '../../components/Portfolio/TransactionTypeChip'
 import { formatDate } from '../../utils/date'
-import { Dec } from '../../utils/Decimal'
 import { getCSVDownloadUrl } from '../../utils/getCSVDownloadUrl'
 import { usePools, useTransactionsByAddress } from '../../utils/usePools'
 import { Column, DataTable, SortableTableHeader } from '../DataTable'
@@ -33,7 +32,7 @@ type Row = {
   action: InvestorTransactionType | AssetTransactionType
   date: number
   tranche?: Token
-  tranchePrice: string
+  tranchePrice: number
   amount: TokenBalance
   hash: string
   pool?: Pool
@@ -81,9 +80,9 @@ export function Transactions({ onlyMostRecent, narrow, txTypes, address, tranche
     {
       align: 'right',
       header: 'Token price',
-      cell: ({ tranche, pool }: Row) => (
+      cell: ({ tranche, tranchePrice, pool }: Row) => (
         <Text as="span" variant="body3">
-          {formatBalance(tranche?.tokenPrice?.toDecimal() || Dec(1), pool?.currency.symbol, 4)}
+          {formatBalance(tranchePrice, pool?.currency.symbol, 4)}
         </Text>
       ),
     },
@@ -130,13 +129,13 @@ export function Transactions({ onlyMostRecent, narrow, txTypes, address, tranche
           date: new Date(tx.timestamp).getTime(),
           action: tx.type,
           tranche,
-          tranchePrice: tranche?.tokenPrice?.toDecimal().toString() || '',
+          tranchePrice: tx?.tokenPrice?.toFloat() ?? 1,
           amount: tx.currencyAmount,
           hash: tx.hash,
           poolId: tx.poolId,
           pool,
           trancheId: tx.trancheId,
-        } as Row
+        } satisfies Row
       })
     return txs
   }, [transactions?.investorTransactions, onlyMostRecent, txTypes, pools, trancheId])