From c29f4917ba753381421984a0e833c40a35f63be1 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/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 +-
 7 files changed, 49 insertions(+), 24 deletions(-)

diff --git a/centrifuge-app/src/components/Charts/PoolPerformanceChart.tsx b/centrifuge-app/src/components/Charts/PoolPerformanceChart.tsx
index 5beb7254f..d1702e70e 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/IssuerSection.tsx b/centrifuge-app/src/components/IssuerSection.tsx
index 306555986..d0848fc2e 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 width="50%">
+          <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 6d9b8d96e..224238419 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 7518ef8c2..9dd6e73b5 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 24da97cb2..3bfd399dd 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 b3b95086b..49d98d7ca 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 593c03e47..ebb7bf98a 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],