From 58bf009a8a3d5103d83e2fb7ee48b9e0fa86be85 Mon Sep 17 00:00:00 2001
From: katty barroso <kattybarroso1321@gmail.com>
Date: Tue, 24 Sep 2024 10:12:38 +0200
Subject: [PATCH] Issuer details and bug fixes

---
 .../Charts/PoolPerformanceChart.tsx           | 10 ++++--
 .../src/components/Charts/PriceChart.tsx      | 23 +++++++------
 .../InvestRedeem/InvestRedeemDrawer.tsx       | 10 +++---
 .../src/components/IssuerSection.tsx          | 33 ++++++++++++++++---
 centrifuge-app/src/components/PoolList.tsx    | 21 +++++++-----
 centrifuge-js/src/modules/pools.ts            |  1 -
 fabric/.storybook/preview.jsx                 |  4 ---
 fabric/src/components/TextInput/index.tsx     |  2 +-
 fabric/src/theme/tokens/theme.ts              |  2 +-
 9 files changed, 66 insertions(+), 40 deletions(-)

diff --git a/centrifuge-app/src/components/Charts/PoolPerformanceChart.tsx b/centrifuge-app/src/components/Charts/PoolPerformanceChart.tsx
index 5beb7254fb..d1702e70e3 100644
--- 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
index 48dde0ce78..65b1d10513 100644
--- 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,6 +52,7 @@ export const PriceChart = ({ data, currency, filter, setFilter }: PriceChartProp
               ]}
               onChange={(option) => setFilter(option.target.value as FilterOptions)}
               defaultValue={filter}
+              hideBorder
             />
           </Box>
         )}
@@ -57,9 +60,9 @@ export const PriceChart = ({ data, currency, filter, setFilter }: PriceChartProp
       <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/InvestRedeemDrawer.tsx b/centrifuge-app/src/components/InvestRedeem/InvestRedeemDrawer.tsx
index 1b222a8e54..a82ce8a813 100644
--- a/centrifuge-app/src/components/InvestRedeem/InvestRedeemDrawer.tsx
+++ b/centrifuge-app/src/components/InvestRedeem/InvestRedeemDrawer.tsx
@@ -1,4 +1,4 @@
-import { Box, Drawer, Stack, Text } from '@centrifuge/fabric'
+import { Drawer, Stack, Text } from '@centrifuge/fabric'
 import * as React from 'react'
 import { useDailyPoolStates, usePool } from '../../utils/usePools'
 import { FilterOptions, PriceChart } from '../Charts/PriceChart'
@@ -24,13 +24,11 @@ export function InvestRedeemDrawer({
         <InvestRedeem poolId={poolId} trancheId={trancheId} defaultView={defaultView} />
       </LoadBoundary>
       <LoadBoundary>
-        <Stack gap={12}>
+        <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}>
-            Price
+            Performance
           </Text>
-          <Box borderColor="rgba(0,0,0,0.08)" borderWidth="1px" borderStyle="solid" borderRadius="2px" p="6px">
-            <TokenPriceChart poolId={poolId} trancheId={trancheId} />
-          </Box>
+          <TokenPriceChart poolId={poolId} trancheId={trancheId} />
         </Stack>
       </LoadBoundary>
     </Drawer>
diff --git a/centrifuge-app/src/components/IssuerSection.tsx b/centrifuge-app/src/components/IssuerSection.tsx
index 3065559866..1388461e02 100644
--- 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
index 6d9b8d96e5..2242384190 100644
--- 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-js/src/modules/pools.ts b/centrifuge-js/src/modules/pools.ts
index 7518ef8c2a..9dd6e73b51 100644
--- 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
index 24da97cb2a..3bfd399ddc 100644
--- 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
index b3b95086b0..49d98d7ca2 100644
--- 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
index 593c03e477..ebb7bf98a0 100644
--- 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],