Post launch feedback updates (#2511)

* Add rating to pool card and cleanup * Fix mobile issues on pool overview page * Increase height of card * Add fixes to data report tab and data table * Add feedback 25/10 - Fix chart to calculate domain instead of rounding - remove junior from tooltip tranche if only one tranche - fix borders - adjust pool list to use grid system (easier to maintain than flex) - remove underline from tooltip for ratings * Fix table scrolling * Update buttons border * Fix bug on graph * Fix view all button * Fix wallet button hover and align items * Fix loading on page * Type fix
centrifuge · Oct 30, 2024 · a562c77 · a562c77
1 parent c211d2d
commit a562c77
Show file tree

Hide file tree

Showing 24 changed files with 427 additions and 387 deletions.
diff --git a/centrifuge-app/src/components/Charts/PoolPerformanceChart.tsx b/centrifuge-app/src/components/Charts/PoolPerformanceChart.tsx
@@ -276,11 +276,7 @@ function PoolPerformanceChart() {
                 tickFormatter={(tick: number) => formatBalanceAbbreviated(tick, '', 2)}
                 yAxisId="right"
                 orientation="right"
-                domain={
-                  selectedTabIndex === 0
-                    ? ['auto', 'auto']
-                    : [(dataMin: number) => [Math.round(dataMin)], (dataMax: number) => [Math.round(dataMax)]]
-                }
+                domain={selectedTabIndex === 0 ? ['auto', 'auto'] : ['dataMin', 'dataMax']}
               />
               <CartesianGrid stroke={theme.colors.borderPrimary} vertical={false} />
               <Tooltip
@@ -290,11 +286,13 @@ function PoolPerformanceChart() {
                       <TooltipContainer>
                         <TooltipTitle>{formatDate(payload[0].payload.day)}</TooltipTitle>
                         {payload.map(({ name, value }, index) => {
+                          const hasSeniorTranche = payload.length >= 3
+
                           const labelMap: Record<string, string> = {
                             nav: 'NAV',
-                            juniorTokenPrice: 'Junior Token Price',
+                            juniorTokenPrice: hasSeniorTranche ? 'Junior Token Price' : 'Token Price',
                             seniorTokenPrice: 'Senior Token Price',
-                            juniorAPY: 'Junior APY',
+                            juniorAPY: hasSeniorTranche ? 'Junior APY' : 'APY',
                             seniorAPY: 'Senior APY',
                             default: 'Cash',
                           }

diff --git a/centrifuge-app/src/components/DataTable.tsx b/centrifuge-app/src/components/DataTable.tsx
@@ -51,6 +51,7 @@ export type DataTableProps<T = any> = {
   pageSize?: number
   page?: number
   headerStyles?: React.CSSProperties
+  hideBorder?: boolean
 } & GroupedProps
 
 export type OrderBy = 'asc' | 'desc'
@@ -101,11 +102,22 @@ export const DataTable = <T extends Record<string, any>>({
   page = 1,
   headerStyles,
   scrollable = false,
+  hideBorder,
 }: DataTableProps<T>) => {
+  const tableRef = React.useRef<HTMLDivElement>(null)
+  const [offsetTop, setOffsetTop] = React.useState(0)
   const [orderBy, setOrderBy] = React.useState<Record<string, OrderBy>>(
     defaultSortKey ? { [defaultSortKey]: defaultSortOrder } : {}
   )
 
+  React.useEffect(() => {
+    if (tableRef.current) {
+      const rect = tableRef.current.getBoundingClientRect()
+      const offsetFromTopOfScreen = rect.top + window.scrollY
+      setOffsetTop(offsetFromTopOfScreen)
+    }
+  }, [])
+
   const [currentSortKey, setCurrentSortKey] = React.useState(defaultSortKey || '')
 
   const updateSortOrder = (sortKey: Column['sortKey']) => {
@@ -125,11 +137,19 @@ export const DataTable = <T extends Record<string, any>>({
   const templateColumns = `[start] ${columns.map((col) => col.width ?? 'minmax(min-content, 1fr)').join(' ')} [end]`
 
   return (
-    <TableGrid gridTemplateColumns={templateColumns} gridAutoRows="auto" gap={0} rowGap={0} scrollable={scrollable}>
+    <TableGrid
+      ref={tableRef}
+      gridTemplateColumns={templateColumns}
+      gridAutoRows="auto"
+      gap={0}
+      rowGap={0}
+      scrollable={scrollable}
+      offsetTop={offsetTop}
+    >
       {showHeader && (
-        <HeaderRow styles={headerStyles} scrollable={scrollable}>
+        <HeaderRow styles={headerStyles} scrollable={scrollable} hideBorder={hideBorder}>
           {columns.map((col, i) => (
-            <HeaderCol key={i} align={col?.align}>
+            <HeaderCol key={i} align={col?.align} isLabel={col.isLabel}>
               <Text variant="body3">
                 {col?.header && typeof col.header !== 'string' && col?.sortKey && React.isValidElement(col.header)
                   ? React.cloneElement(col.header as React.ReactElement<any>, {
@@ -142,6 +162,7 @@ export const DataTable = <T extends Record<string, any>>({
           ))}
         </HeaderRow>
       )}
+
       {pinnedData?.map((row, i) => (
         <DataRow
           hoverable={hoverable}
@@ -150,6 +171,7 @@ export const DataTable = <T extends Record<string, any>>({
           to={onRowClicked ? onRowClicked(row) : undefined}
           key={keyField ? row[keyField] : i}
           tabIndex={onRowClicked ? 0 : undefined}
+          hideBorder={hideBorder}
         >
           {columns.map((col, index) => (
             <DataCol variant="body2" align={col?.align} key={index} isLabel={col.isLabel}>
@@ -167,6 +189,7 @@ export const DataTable = <T extends Record<string, any>>({
             to={onRowClicked ? onRowClicked(row) : undefined}
             key={keyField ? row[keyField] : i}
             tabIndex={onRowClicked ? 0 : undefined}
+            hideBorder={hideBorder}
           >
             {columns.map((col, index) => (
               <DataCol
@@ -184,7 +207,7 @@ export const DataTable = <T extends Record<string, any>>({
       })}
       {/* summary row is not included in sorting */}
       {summary && (
-        <DataRow data-testId={`row-summary-${groupIndex ?? 0}`}>
+        <DataRow data-testId={`row-summary-${groupIndex ?? 0}`} hideBorder={hideBorder}>
           {columns.map((col, i) => (
             <DataCol variant="body2" key={`${col.sortKey}-${i}`} align={col?.align}>
               {col.cell(summary, i)}
@@ -202,11 +225,12 @@ export const DataTable = <T extends Record<string, any>>({
   )
 }
 
-const TableGrid = styled(Grid)<{ scrollable?: boolean }>`
-  ${({ scrollable }) =>
+const TableGrid = styled(Grid)<{ scrollable?: boolean; offsetTop?: number }>`
+  ${({ scrollable, offsetTop }) =>
     scrollable &&
     css({
-      maxHeight: 'calc(100vh - 180px)',
+      maxHeight: `calc(100vh - ${offsetTop}px)`,
+      paddingBottom: 20,
       overflowY: 'auto',
       overflowX: 'auto',
     })}
@@ -216,31 +240,37 @@ const Row = styled('div')`
   display: grid;
   grid-template-columns: subgrid;
   grid-column: start / end;
-  box-shadow: ${({ theme }) => `-1px 0 0 0 ${theme.colors.borderPrimary}, 1px 0 0 0 ${theme.colors.borderPrimary}`};
 `
 
-const HeaderRow = styled(Row)<{ styles?: any; scrollable?: boolean }>(({ styles, scrollable }) =>
-  css({
-    backgroundColor: 'backgroundSecondary',
-    borderStyle: 'solid',
-    borderWidth: '1px 0',
-    borderColor: 'borderPrimary',
-    position: scrollable ? 'sticky' : 'static',
-    top: scrollable ? 0 : 'auto',
-    zIndex: scrollable ? 10 : 'auto',
-    borderTopLeftRadius: '8px',
-    borderTopRightRadius: '8px',
-    ...styles,
-  })
+const HeaderRow = styled(Row)<{ styles?: any; scrollable?: boolean; hideBorder?: boolean }>(
+  ({ styles, scrollable, hideBorder }) =>
+    css({
+      backgroundColor: 'backgroundSecondary',
+      borderStyle: 'solid',
+      borderWidth: hideBorder ? 0 : 1,
+      borderColor: hideBorder ? 'transparent' : 'borderPrimary',
+      position: scrollable ? 'sticky' : 'static',
+      top: scrollable ? 0 : 'auto',
+      zIndex: scrollable ? 10 : 'auto',
+      borderTopLeftRadius: hideBorder ? 0 : '8px',
+      borderTopRightRadius: hideBorder ? 0 : '8px',
+      ...styles,
+    })
 )
 
 export const DataRow = styled(Row)<any>`
-  ${({ hoverable, as: comp }) =>
+  ${({ hoverable, as: comp, hideBorder }) =>
     css({
       width: '100%',
       borderBottomStyle: 'solid',
-      borderBottomWidth: '1px',
-      borderBottomColor: 'borderPrimary',
+      borderBottomWidth: hideBorder ? 0 : '1px',
+      borderBottomColor: hideBorder ? 'transparent' : 'borderPrimary',
+      borderLeftStyle: 'solid',
+      borderLeftWidth: hideBorder ? 0 : '1px',
+      borderLeftColor: hideBorder ? 'transparent' : 'borderPrimary',
+      borderRightStyle: 'solid',
+      borderRightWidth: hideBorder ? 0 : '1px',
+      borderRightColor: hideBorder ? 'transparent' : 'borderPrimary',
       backgroundColor: 'transparent',
       // using a&:hover caused the background sometimes not to update when switching themes
       '&:hover':
@@ -275,6 +305,13 @@ export const DataCol = styled(Text)<{ align: Column['align']; isLabel?: boolean
   min-width: 0;
   overflow: hidden;
   white-space: nowrap;
+  ${({ isLabel }) =>
+    isLabel &&
+    css({
+      position: 'sticky',
+      left: 0,
+      zIndex: 1,
+    })}
 
   ${({ align }) => {
     switch (align) {
@@ -296,10 +333,19 @@ export const DataCol = styled(Text)<{ align: Column['align']; isLabel?: boolean
   }}
 `
 
-const HeaderCol = styled(DataCol)`
+const HeaderCol = styled(DataCol)<{ isLabel?: boolean }>`
   height: 32px;
   align-items: center;
 
+  ${({ isLabel }) =>
+    isLabel &&
+    css({
+      position: 'sticky',
+      left: 0,
+      zIndex: 2,
+      backgroundColor: 'backgroundSecondary',
+    })}
+
   &:has(:focus-visible) {
     box-shadow: inset 0 0 0 3px var(--fabric-focus);
   }

diff --git a/centrifuge-app/src/components/IssuerSection.tsx b/centrifuge-app/src/components/IssuerSection.tsx
@@ -3,6 +3,7 @@ import { useCentrifuge } from '@centrifuge/centrifuge-react'
 import {
   AnchorButton,
   Box,
+  Grid,
   IconBalanceSheet,
   IconCashflow,
   IconChevronRight,
@@ -27,6 +28,10 @@ type IssuerSectionProps = {
   metadata: Partial<PoolMetadata> | undefined
 }
 
+const ButtonSections = styled(RouterTextLink)`
+  text-decoration: unset;
+`
+
 const StyledBox = styled(Box)`
   padding: 24px;
   &:hover {
@@ -35,7 +40,10 @@ const StyledBox = styled(Box)`
   }
 `
 
-const HoverBox = styled(StyledBox)`
+const StyledRouterTextLink = styled(RouterTextLink)`
+  color: white;
+  text-decoration: unset;
+  font-size: 14px;
   padding: 8px 22px;
   background-color: ${SUBTLE_GRAY};
   border: 3px solid transparent;
@@ -44,12 +52,6 @@ const HoverBox = styled(StyledBox)`
     border-radius: 4px;
     border-color: #91969b1a;
   }
-`
-
-const StyledRouterTextLink = styled(RouterTextLink)`
-  color: white;
-  text-decoration: unset;
-  font-size: 14px;
   :active {
     color: white;
   }
@@ -97,14 +99,12 @@ export function ReportDetails({ metadata }: IssuerSectionProps) {
         <Text color="white" variant="heading4">
           Reports
         </Text>
-        <HoverBox backgroundColor={SUBTLE_GRAY}>
-          <StyledRouterTextLink to={`${pathname}/reporting`}>View all</StyledRouterTextLink>
-        </HoverBox>
+        <StyledRouterTextLink to={`${pathname}/reporting`}>View all</StyledRouterTextLink>
       </Box>
 
       <Box marginY={2} backgroundColor={SUBTLE_GRAY} borderRadius={10}>
         {reportLinks.map((link, i) => (
-          <StyledRouterTextLink to={`${pathname}/reporting${link.href}`} key={`${link.label}-${i}`}>
+          <ButtonSections to={`${pathname}/reporting${link.href}`} key={`${link.label}-${i}`}>
             <StyledBox
               borderBottom={i === reportLinks.length - 1 ? null : `2px solid ${SUBTLE_GRAY}`}
               display="flex"
@@ -119,7 +119,7 @@ export function ReportDetails({ metadata }: IssuerSectionProps) {
               </Box>
               <IconChevronRight color="white" />
             </StyledBox>
-          </StyledRouterTextLink>
+          </ButtonSections>
         ))}
       </Box>
 
@@ -174,15 +174,15 @@ export function IssuerDetails({ metadata }: IssuerSectionProps) {
         )}
         <Links links={links} />
       </Shelf>
-      <Box pt={4} display="flex" justifyContent="space-between">
-        <Box width={metadata?.pool?.issuer?.categories?.length ? '50%' : '100%'} marginRight={3}>
+      <Grid height="fit-content" gridTemplateColumns={['1fr', '1fr 1fr']} gap={[2, 2]}>
+        <Box marginRight={3}>
           <Text variant="heading2">{metadata?.pool?.issuer.name}</Text>
           <Text variant="body2" style={{ marginTop: '12px', lineHeight: '22px', letterSpacing: '-0.14px' }}>
             {metadata?.pool?.issuer.description}
           </Text>
         </Box>
         {metadata?.pool?.issuer?.categories?.length ? (
-          <Box width="50%" bg="white" padding={2} borderRadius={10} ml={1} height="min-content" alignSelf="center">
+          <Box bg="white" padding={2} borderRadius={10} ml={1} height="min-content" alignSelf="center">
             {metadata?.pool?.issuer?.categories.map((category) => (
               <Box display="flex" justifyContent="space-between" padding={1}>
                 <Text color="textSecondary" variant="body3" style={{ minWidth: 120, textTransform: 'capitalize' }}>
@@ -195,7 +195,7 @@ export function IssuerDetails({ metadata }: IssuerSectionProps) {
             ))}
           </Box>
         ) : null}
-      </Box>
+      </Grid>
       <ExecutiveSummaryDialog
         issuerName={metadata?.pool?.issuer.name ?? ''}
         href={cent.metadata.parseMetadataUrl(metadata?.pool?.links.executiveSummary?.uri ?? '')}

diff --git a/centrifuge-app/src/components/LayoutBase/BasePadding.tsx b/centrifuge-app/src/components/LayoutBase/BasePadding.tsx
@@ -5,7 +5,7 @@ type BaseSectionProps = BoxProps & {
   children: React.ReactNode
 }
 
-export const BASE_PADDING = [2, 2, 3, 3, 5]
+export const BASE_PADDING = [2, 2, 2, 2, 5]
 
 export function BasePadding({ children, ...boxProps }: BaseSectionProps) {
   return (

diff --git a/centrifuge-app/src/components/LayoutBase/index.tsx b/centrifuge-app/src/components/LayoutBase/index.tsx
@@ -4,6 +4,7 @@ import * as React from 'react'
 import { Outlet } from 'react-router'
 import { useIsAboveBreakpoint } from '../../utils/useIsAboveBreakpoint'
 import { Footer } from '../Footer'
+import { LoadBoundary } from '../LoadBoundary'
 import { LogoLink } from '../LogoLink-deprecated'
 import { Menu } from '../Menu'
 import { BasePadding } from './BasePadding'
@@ -57,7 +58,9 @@ export function LayoutBase(): JSX.Element {
       )}
       {/* The ID functions so we can deactive scrolling in certain pages, example in the data page */}
       <ContentWrapper id="content-wrapper">
-        <Outlet />
+        <LoadBoundary>
+          <Outlet />
+        </LoadBoundary>
       </ContentWrapper>
     </Root>
   )

diff --git a/centrifuge-app/src/components/LayoutBase/styles.tsx b/centrifuge-app/src/components/LayoutBase/styles.tsx
@@ -147,7 +147,7 @@ export const WalletInner = styled(Stack)`
   @media (min-width: ${({ theme }) => theme.breakpoints[BREAK_POINT_COLUMNS]}) {
     justify-content: flex-end;
     height: 50px;
-    margin-right: 30px;
+    margin-right: 20px;
     margin-top: 15px;
   }
 `