Add UI feedback

centrifuge · Oct 11, 2024 · a9f92c0 · a9f92c0
1 parent 95f9a88
commit a9f92c0
Show file tree

Hide file tree

Showing 8 changed files with 77 additions and 57 deletions.
diff --git 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
@@ -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: <IconBalanceSheet color="white" /> },
-  { label: 'Profit & loss', href: '/profit-and-loss', icon: <IconProfitAndLoss color="white" /> },
-  { label: 'Cash flow statement', href: '/cash-flow-statement', icon: <IconCashflow color="white" /> },
-]
-
 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: <IconBalanceSheet color={theme.colors.textSecondary} /> },
+    {
+      label: 'Profit & loss',
+      href: '/profit-and-loss',
+      icon: <IconProfitAndLoss color={theme.colors.textSecondary} />,
+    },
+    {
+      label: 'Cash flow statement',
+      href: '/cash-flow-statement',
+      icon: <IconCashflow color={theme.colors.textSecondary} />,
+    },
+  ]
   return (
     <>
       <Box display="flex" justifyContent="space-between" alignItems="center">
@@ -89,7 +98,7 @@ export function ReportDetails({ metadata }: IssuerSectionProps) {
             >
               <Box display="flex" alignItems="center">
                 {link.icon}
-                <Text color="white" style={{ marginLeft: 4 }}>
+                <Text color="white" style={{ marginLeft: 8 }}>
                   {link.label}
                 </Text>
               </Box>
@@ -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 ? (
-    <Stack gap={1}>
-      <Text color={inverted ? 'textPrimary' : 'white'} variant={inverted ? 'heading2' : 'heading4'}>
-        Pool analysis
-      </Text>
-      <Stack gap={0}>
-        <Text variant="body3" color="textSecondary">
-          Reviewer: {report?.author?.name || 'N/A'}
-        </Text>
-        <Text variant="body3" color="textSecondary">
-          Title: {report?.author?.title || 'N/A'}
+    isEmpty ? null : (
+      <Stack gap={1}>
+        <Text color={inverted ? 'textPrimary' : 'white'} variant={inverted ? 'heading2' : 'heading4'}>
+          Pool analysis
         </Text>
+        <Stack gap={0}>
+          <Text variant="body3" color="textSecondary">
+            Reviewer: {report?.author?.name || 'N/A'}
+          </Text>
+          <Text variant="body3" color="textSecondary">
+            Title: {report?.author?.title || 'N/A'}
+          </Text>
+        </Stack>
       </Stack>
-    </Stack>
+    )
   ) : null
 }
diff --git a/centrifuge-app/src/components/LiquidityTransactionsSection.tsx b/centrifuge-app/src/components/LiquidityTransactionsSection.tsx
@@ -144,7 +144,7 @@ export default function LiquidityTransactionsSection({
             <AnchorButton
               href={dataUrl}
               download={`Pool-${pool.id}-${dataNames.join('-')}.csv`}
-              variant="secondary"
+              variant="inverted"
               icon={IconDownload}
               small
             >

diff --git 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 fontWeight={500} as="h2" variant="body1">
+    <Text fontWeight={500} as="h2" variant={isOneTranche ? 'heading1' : 'body1'}>
       {text}
     </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 && (
             <Stack>

diff --git a/centrifuge-app/src/components/PoolOverview/KeyMetrics.tsx b/centrifuge-app/src/components/PoolOverview/KeyMetrics.tsx
@@ -89,19 +89,21 @@ 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(() => {
     if (!metadata?.tranches) return null
 
     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
@@ -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 <InvestButton poolId={poolId} trancheId={row.value[1].id} />
         },
@@ -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) => (
           <Text paddingY={2} fontWeight={col.header === 'APY' ? '600' : '400'} variant="heading2">
             {col.formatter(row.value[index], row)}
           </Text>
         ),
+        ...col,
       }
     })
   }, [columnConfig])

diff --git 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: <SortableTableHeader label="Transaction" />,
-      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 (
           <Text as="span" variant="body3">
             {label}{' '}
-            <RouterTextLink to={`${base}${assetId.split('-')[1]}`}>
+            <RouterTextLink to={`${base}${isCashTransfer ? fromAssetId?.split('-')[1] : assetId.split('-')[1]}`}>
               {isCashTransfer ? fromAssetName : assetName}
             </RouterTextLink>{' '}
             {toAssetName ? (

diff --git 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 (
     <>
       <InvestRedeemDrawer open={open} onClose={() => setOpen(false)} {...props} />
-      <Button
-        aria-label={`Invest in ${props.trancheId}`}
-        onClick={() => connectAndOpen()}
-        style={{ marginLeft: 'auto', width: isMedium ? 'auto' : ' 100%' }}
-      >
+      <Button aria-label={`Invest in ${props.trancheId}`} onClick={() => connectAndOpen()} style={{ width: '120px' }}>
         Invest
       </Button>
     </>