Issuer details and bug fixes

centrifuge · Sep 26, 2024 · eba6d48 · eba6d48
1 parent 2a138bd
commit eba6d48
Show file tree

Hide file tree

Showing 11 changed files with 122 additions and 65 deletions.
diff --git a/centrifuge-app/src/components/Charts/PoolPerformanceChart.tsx b/centrifuge-app/src/components/Charts/PoolPerformanceChart.tsx
@@ -432,14 +432,12 @@ function CustomLegend({
       color: 'textGold',
       label: 'Junior APY',
       value: formatPercentage(data.juniorAPY ?? 0),
-      type: 'singleTrancheTokenPrice',
       show: true,
     },
     {
       color: 'textPrimary',
       label: 'Senior APY',
       value: formatPercentage(data.seniorAPY ?? 0),
-      type: 'singleTrancheTokenPrice',
       show: !!data.seniorAPY,
     },
   ]
@@ -461,7 +459,13 @@ function CustomLegend({
             <Stack key={index} pl={1} display="flex" marginRight="20px">
               <Box display="flex" alignItems="center">
                 <Dot color={item.color} />
-                <Tooltips type={item.type} label={item.label} />
+                {item.type ? (
+                  <Tooltips type={item.type} label={item.label} />
+                ) : (
+                  <Text variant="body3" style={{ lineHeight: 1.8 }}>
+                    {item.label}
+                  </Text>
+                )}
               </Box>
               <Text variant="heading1">{item.value}</Text>
             </Stack>

diff --git a/centrifuge-app/src/components/Charts/PriceChart.tsx b/centrifuge-app/src/components/Charts/PriceChart.tsx
@@ -1,4 +1,4 @@
-import { Box, Select, Shelf, Stack, Text } from '@centrifuge/fabric'
+import { Box, Select, Shelf, Stack, StatusChip, Text } from '@centrifuge/fabric'
 import React from 'react'
 import { Area, AreaChart, CartesianGrid, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts'
 import { useTheme } from 'styled-components'
@@ -34,10 +34,12 @@ export const PriceChart = ({ data, currency, filter, setFilter }: PriceChartProp
             </Text>
           )}
           {priceDifference && (
-            <Text variant="body3" color={priceDifference.gte(0) ? 'statusOk' : 'statusCritical'}>
-              {' '}
-              {priceDifference.gte(0) ? '+' : ''} {priceDifference.mul(100).toFixed(2)}%
-            </Text>
+            <StatusChip status={priceDifference.gte(0) ? 'ok' : 'critical'}>
+              <Text variant="body3" color={priceDifference.gte(0) ? 'statusOk' : 'statusCritical'}>
+                {' '}
+                {priceDifference.gte(0) ? '+' : ''} {priceDifference.mul(100).toFixed(2)}%
+              </Text>
+            </StatusChip>
           )}
         </Shelf>
         {filter && setFilter && (
@@ -50,16 +52,17 @@ export const PriceChart = ({ data, currency, filter, setFilter }: PriceChartProp
               ]}
               onChange={(option) => setFilter(option.target.value as FilterOptions)}
               defaultValue={filter}
+              hideBorder
             />
           </Box>
         )}
       </Shelf>
       <ResponsiveContainer width="100%" height="100%" minHeight="200px">
         <AreaChart data={data || []} margin={{ top: 18, left: -10 }}>
           <defs>
-            <linearGradient id="colorPrice" x1="0" y1="0" x2="0" y2="1">
-              <stop offset="5%" stopColor={'#626262'} stopOpacity={0.4} />
-              <stop offset="95%" stopColor={'#908f8f'} stopOpacity={0} />
+            <linearGradient id="colorPoolValue" x1="0" y1="0" x2="0" y2="1">
+              <stop offset="5%" stopColor={theme.colors.textGold} stopOpacity={0.4} />
+              <stop offset="95%" stopColor={theme.colors.textGold} stopOpacity={0.2} />
             </linearGradient>
           </defs>
           <XAxis
@@ -90,7 +93,7 @@ export const PriceChart = ({ data, currency, filter, setFilter }: PriceChartProp
               return tick.toFixed(6)
             }}
             domain={['dataMin - 0.001', 'dataMax + 0.001']}
-            interval={'preserveStartEnd'}
+            interval="preserveStartEnd"
           />
           <CartesianGrid stroke={theme.colors.borderPrimary} />
           <Tooltip content={<CustomizedTooltip currency={currency} precision={6} />} />
@@ -102,7 +105,7 @@ export const PriceChart = ({ data, currency, filter, setFilter }: PriceChartProp
             fill="url(#colorPrice)"
             name="Price"
             activeDot={{ fill: '#908f8f' }}
-            stroke="#908f8f"
+            stroke={theme.colors.textGold}
           />
         </AreaChart>
       </ResponsiveContainer>

diff --git a/centrifuge-app/src/components/InvestRedeem/InvestRedeem.tsx b/centrifuge-app/src/components/InvestRedeem/InvestRedeem.tsx
@@ -187,7 +187,9 @@ function Footer() {
     <>
       {state.actingAddress && connectedType === 'substrate' && (
         <Stack gap={2}>
-          <Text variant="heading4">Transaction history</Text>
+          <Text variant="heading6" color="textPrimary" fontWeight={600}>
+            Transaction history
+          </Text>
           <Transactions onlyMostRecent narrow address={state.actingAddress} trancheId={state.trancheId} />
         </Stack>
       )}

diff --git a/centrifuge-app/src/components/InvestRedeem/InvestRedeemDrawer.tsx b/centrifuge-app/src/components/InvestRedeem/InvestRedeemDrawer.tsx
@@ -1,10 +1,20 @@
-import { Box, Drawer, Stack, Text } from '@centrifuge/fabric'
+import { Drawer, Stack, Text } from '@centrifuge/fabric'
+import Decimal from 'decimal.js-light'
 import * as React from 'react'
 import { useDailyPoolStates, usePool } from '../../utils/usePools'
 import { FilterOptions, PriceChart } from '../Charts/PriceChart'
 import { LoadBoundary } from '../LoadBoundary'
 import { InvestRedeem } from './InvestRedeem'
 
+type TrancheState = {
+  price: Decimal | any
+}
+
+type DailyPoolStateProps = {
+  timestamp: string
+  tranches: { [trancheId: string]: TrancheState }
+}
+
 export function InvestRedeemDrawer({
   poolId,
   trancheId,
@@ -17,35 +27,8 @@ export function InvestRedeemDrawer({
   poolId: string
   trancheId: string
   defaultView?: 'invest' | 'redeem'
-}) {
-  return (
-    <Drawer isOpen={open} onClose={onClose}>
-      <LoadBoundary>
-        <InvestRedeem poolId={poolId} trancheId={trancheId} defaultView={defaultView} />
-      </LoadBoundary>
-      <LoadBoundary>
-        <Stack gap={12}>
-          <Text variant="heading6" color="textPrimary" fontWeight={600}>
-            Price
-          </Text>
-          <Box borderColor="rgba(0,0,0,0.08)" borderWidth="1px" borderStyle="solid" borderRadius="2px" p="6px">
-            <TokenPriceChart poolId={poolId} trancheId={trancheId} />
-          </Box>
-        </Stack>
-      </LoadBoundary>
-    </Drawer>
-  )
-}
-
-const TokenPriceChart = React.memo(function TokenPriceChart({
-  poolId,
-  trancheId,
-}: {
-  poolId: string
-  trancheId: string
 }) {
   const [filter, setFilter] = React.useState<FilterOptions>('30days')
-  const pool = usePool(poolId)
 
   const dateFrom = React.useMemo(() => {
     if (filter === 'YTD') {
@@ -72,9 +55,49 @@ const TokenPriceChart = React.memo(function TokenPriceChart({
 
   const { poolStates: dailyPoolStates } = useDailyPoolStates(poolId, new Date(dateFrom)) || {}
 
+  if (!dailyPoolStates?.length) return
+
+  return (
+    <Drawer isOpen={open} onClose={onClose}>
+      <LoadBoundary>
+        <InvestRedeem poolId={poolId} trancheId={trancheId} defaultView={defaultView} />
+      </LoadBoundary>
+      <LoadBoundary>
+        <Stack gap={12} borderColor="rgba(0,0,0,0.08)" borderWidth="1px" borderStyle="solid" borderRadius="8px" p={2}>
+          <Text variant="heading6" color="textPrimary" fontWeight={600}>
+            Performance
+          </Text>
+          <TokenPriceChart
+            poolId={poolId}
+            trancheId={trancheId}
+            dailyPoolStates={dailyPoolStates}
+            filter={filter}
+            setFilter={setFilter}
+          />
+        </Stack>
+      </LoadBoundary>
+    </Drawer>
+  )
+}
+
+const TokenPriceChart = React.memo(function TokenPriceChart({
+  poolId,
+  trancheId,
+  dailyPoolStates,
+  filter,
+  setFilter,
+}: {
+  poolId: string
+  trancheId: string
+  dailyPoolStates: DailyPoolStateProps[]
+  filter: FilterOptions | undefined
+  setFilter: any
+}) {
+  const pool = usePool(poolId)
+
   const data = React.useMemo(() => {
     const tokenData =
-      dailyPoolStates?.map((state) => {
+      dailyPoolStates?.map((state: DailyPoolStateProps) => {
         return { price: state.tranches[trancheId].price?.toFloat() || 0, day: new Date(state.timestamp) }
       }) || []
     if (tokenData.length > 0) {
@@ -90,6 +113,8 @@ const TokenPriceChart = React.memo(function TokenPriceChart({
     return tokenData
   }, [dailyPoolStates, pool?.tranches, trancheId])
 
+  if (!data.length) return
+
   return (
     <PriceChart
       data={data}

diff --git a/centrifuge-app/src/components/IssuerSection.tsx b/centrifuge-app/src/components/IssuerSection.tsx
@@ -15,6 +15,7 @@ import {
 import * as React from 'react'
 import { useLocation } from 'react-router'
 import styled from 'styled-components'
+import { formatPercentage } from '../utils/formatting'
 import { ExecutiveSummaryDialog } from './Dialogs/ExecutiveSummaryDialog'
 import { LabelValueStack } from './LabelValueStack'
 import { AnchorPillButton, PillButton } from './PillButton'
@@ -113,6 +114,12 @@ export function IssuerDetails({ metadata }: IssuerSectionProps) {
       onClick: () => setIsDialogOpen(true),
     },
   ]
+
+  const formatCamelCase = (text: string | undefined) => {
+    if (!text) return
+    return text.replace(/([A-Z])/g, ' $1').replace(/^./, (str) => str.toUpperCase())
+  }
+
   return (
     <Stack>
       <Shelf display="flex" justifyContent="space-between" marginBottom={12}>
@@ -127,11 +134,27 @@ export function IssuerDetails({ metadata }: IssuerSectionProps) {
         )}
         <Links links={links} />
       </Shelf>
-      <Box pt={4}>
-        <Text variant="heading2">{metadata?.pool?.name}</Text>
-        <Text variant="body2" style={{ marginTop: '12px' }}>
-          {metadata?.pool?.issuer.description}
-        </Text>
+      <Box pt={4} display="flex" justifyContent="space-between">
+        <Box>
+          <Text variant="heading2">{metadata?.pool?.issuer.name}</Text>
+          <Text variant="body2" style={{ marginTop: '12px' }}>
+            {metadata?.pool?.issuer.description}
+          </Text>
+        </Box>
+        {metadata?.pool?.issuer?.categories?.length ? (
+          <Box width="50%" bg="white" padding="8px" borderRadius={10} ml={1}>
+            {metadata?.pool?.issuer?.categories.map((category) => (
+              <Box display="flex" justifyContent="space-between" padding={1}>
+                <Text color="textSecondary" variant="body2" style={{ minWidth: 120, textTransform: 'capitalize' }}>
+                  {formatCamelCase(category.customType) || formatCamelCase(category.type)}
+                </Text>
+                <Text variant="body2" style={{ fontWeight: 500 }}>
+                  {category.type.includes('Rate') ? formatPercentage(category.value) : category.value}
+                </Text>
+              </Box>
+            ))}
+          </Box>
+        ) : null}
       </Box>
       <ExecutiveSummaryDialog
         issuerName={metadata?.pool?.issuer.name ?? ''}

diff --git a/centrifuge-app/src/components/PoolList.tsx b/centrifuge-app/src/components/PoolList.tsx
@@ -1,6 +1,6 @@
 import Centrifuge, { Pool, PoolMetadata } from '@centrifuge/centrifuge-js'
 import { useCentrifuge } from '@centrifuge/centrifuge-react'
-import { Box, Shelf, Stack, Text } from '@centrifuge/fabric'
+import { Box, IconChevronRight, Shelf, Stack, Text } from '@centrifuge/fabric'
 import * as React from 'react'
 import { useLocation } from 'react-router'
 import styled from 'styled-components'
@@ -93,14 +93,17 @@ export function PoolList() {
       </Stack>
       {!metadataIsLoading && archivedPools.length > 0 && (
         <>
-          <Text
-            style={{ cursor: 'pointer', marginBottom: 12 }}
-            color="textSecondary"
-            onClick={() => setShowArchived((show) => !show)}
-            variant="body2"
-          >
-            {showArchived ? 'Hide archived pools' : 'View archived pools >'}
-          </Text>
+          <Box display="flex" alignItems="center" marginBottom={1}>
+            <Text
+              style={{ cursor: 'pointer' }}
+              color="textSecondary"
+              onClick={() => setShowArchived((show) => !show)}
+              variant="body2"
+            >
+              {showArchived ? 'Hide archived pools' : 'View archived pools'}
+            </Text>
+            {!showArchived && <IconChevronRight color="textSecondary" size={18} />}
+          </Box>
           {showArchived && <ArchivedPools pools={archivedPools} />}
         </>
       )}

diff --git a/centrifuge-app/src/components/Portfolio/Transactions.tsx b/centrifuge-app/src/components/Portfolio/Transactions.tsx
@@ -13,6 +13,7 @@ import {
   usePagination,
 } from '@centrifuge/fabric'
 import * as React from 'react'
+import { useTheme } from 'styled-components'
 import { TransactionTypeChip } from '../../components/Portfolio/TransactionTypeChip'
 import { formatDate } from '../../utils/date'
 import { getCSVDownloadUrl } from '../../utils/getCSVDownloadUrl'
@@ -43,6 +44,7 @@ type Row = {
 
 export function Transactions({ onlyMostRecent, narrow, txTypes, address, trancheId }: TransactionsProps) {
   const explorer = useGetExplorerUrl()
+  const theme = useTheme()
   const columns = [
     {
       align: 'left',
@@ -206,7 +208,7 @@ export function Transactions({ onlyMostRecent, narrow, txTypes, address, tranche
       </Stack>
     </PaginationProvider>
   ) : (
-    <Shelf borderRadius="4px" backgroundColor="backgroundSecondary" justifyContent="center" p="10px">
+    <Shelf border={`1px solid ${theme.colors.backgroundTertiary}`} borderRadius="6px" justifyContent="center" p={2}>
       <Text color="textSecondary" variant="body2">
         No transactions displayed yet
       </Text>

diff --git a/centrifuge-js/src/modules/pools.ts b/centrifuge-js/src/modules/pools.ts
@@ -2693,7 +2693,6 @@ export function getPoolsModule(inst: Centrifuge) {
                     : new Perquintill(0),
                 }
               })
-              console.log('🚀 ~ tranches:', tranches)
               return { ...state, poolState, poolValue, tranches }
             }) || [],
           trancheStates,

diff --git a/fabric/.storybook/preview.jsx b/fabric/.storybook/preview.jsx
@@ -1,13 +1,9 @@
 import * as React from 'react'
 import { ThemeProvider } from 'styled-components'
 import { Box, GlobalStyle } from '../src'
-import altairDark from '../src/theme/altairDark'
-import altairLight from '../src/theme/altairLight'
 import centrifugeTheme from '../src/theme/centrifugeTheme'
 
 const themes = {
-  altairDark,
-  altairLight,
   centrifugeTheme,
 }
 

diff --git a/fabric/src/components/TextInput/index.tsx b/fabric/src/components/TextInput/index.tsx
@@ -54,7 +54,7 @@ export const StyledInputBox = styled(Shelf)<{ hideBorder?: boolean }>`
   position: relative;
   background: ${({ theme }) => theme.colors.backgroundPage};
   border: ${({ hideBorder, theme }) => (hideBorder ? 'none' : `1px solid ${theme.colors.borderPrimary}`)};
-  border-radius: ${({ theme }) => theme.radii.input}px;
+  border-radius: ${({ hideBorder, theme }) => (hideBorder ? 'none' : `${theme.radii.input}px`)};
 
   &::before {
     content: '';

diff --git a/fabric/src/theme/tokens/theme.ts b/fabric/src/theme/tokens/theme.ts
@@ -102,7 +102,7 @@ const colors = {
   backgroundButtonInvertedHover: grayScale[100],
   backgroundButtonInvertedPressed: grayScale[100],
   backgroundButtonInvertedDisabled: grayScale[100],
-  textButtonInverted: grayScale[600],
+  textButtonInverted: black,
   textButtonInvertedFocus: grayScale[600],
   textButtonInvertedHover: grayScale[600],
   textButtonInvertedPressed: grayScale[600],