Issuer details and bug fixes

centrifuge · Sep 24, 2024 · 58bf009 · 58bf009
1 parent 2a138bd
commit 58bf009
Show file tree

Hide file tree

Showing 9 changed files with 66 additions and 40 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/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
@@ -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-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],