Add feedback redesign (#2487)

* Add feedback redesign * Add hard code for tinlake * UI changes * Add logic around invest button Fix flow invest button * Make table scrollable but filters fixed to top * UI fixes * Add nav bar style changes * Add realized unrealized values to invest/redeem drawer * UI/UX fixes * Temporal fix - hard coded apy for DYF * Remove order exec button from tinlake pools * Add hard coded values
centrifuge · Oct 15, 2024 · 466b704 · 466b704
1 parent 5c80408
commit 466b704
Show file tree

Hide file tree

Showing 42 changed files with 786 additions and 486 deletions.
diff --git a/centrifuge-app/src/components/Charts/PoolPerformanceChart.tsx b/centrifuge-app/src/components/Charts/PoolPerformanceChart.tsx
@@ -22,7 +22,6 @@ type ChartData = {
   currency?: string
   seniorAPY: number | null | undefined
   juniorAPY: number | null
-  isToday: boolean
 }
 
 type GraphDataItemWithType = {
@@ -115,7 +114,7 @@ function PoolPerformanceChart() {
     return true
   })
 
-  const [range, setRange] = React.useState<(typeof rangeFilters)[number]>({ value: 'all', label: 'All' })
+  const [range, setRange] = React.useState<(typeof rangeFilters)[number]>(rangeFilters[0])
   const rangeNumber = getRangeNumber(range.value, poolAge) ?? 100
 
   // querying chain for more accurate data, since data for today from subquery is not necessarily up to date
@@ -124,6 +123,16 @@ function PoolPerformanceChart() {
     ? formatBalance(pool?.tranches[pool.tranches.length - 1].tokenPrice || 0, undefined, 5, 5)
     : null
 
+  const todayJuniorApy = pool?.tranches
+    ?.find((pool) => pool.seniority === 0)
+    ?.yield30DaysAnnualized?.toPercent()
+    .toNumber()
+
+  const todaySeniorApy = pool?.tranches
+    ?.find((pool) => pool.seniority === 1)
+    ?.yield30DaysAnnualized?.toPercent()
+    .toNumber()
+
   const trancheTodayPrice = calculateTranchePrices(pool as Pool)
 
   const data: ChartData[] = React.useMemo(
@@ -151,9 +160,8 @@ function PoolPerformanceChart() {
             nav: todayAssetValue,
             juniorTokenPrice: tranchePrices.juniorTokenPrice ?? 0,
             seniorTokenPrice: tranchePrices.seniorTokenPrice ?? null,
-            juniorAPY: formattedJuniorAPY,
-            seniorAPY: formattedSeniorAPY,
-            isToday: true,
+            juniorAPY: pool.id === '1655476167' ? 15 : todayJuniorApy,
+            seniorAPY: todaySeniorApy,
           }
         }
 
@@ -164,20 +172,17 @@ function PoolPerformanceChart() {
           seniorTokenPrice: seniorTokenPrice !== 0 ? seniorTokenPrice : null,
           juniorAPY: formattedJuniorAPY,
           seniorAPY: formattedSeniorAPY,
-          isToday: false,
         }
       }) || [],
-    [truncatedPoolStates, todayAssetValue, pool, range]
+    [truncatedPoolStates, todayAssetValue, pool, range, todayJuniorApy, todaySeniorApy]
   )
 
-  const todayData = data.find((day) => day.isToday)
-
   const today = {
     nav: todayAssetValue,
     price: todayPrice,
     currency: pool.currency.symbol,
-    juniorAPY: todayData?.juniorAPY,
-    seniorAPY: todayData?.seniorAPY,
+    juniorAPY: pool.id === '1655476167' ? 15 : todayJuniorApy,
+    seniorAPY: todaySeniorApy,
     ...trancheTodayPrice,
   }
 
@@ -217,10 +222,10 @@ function PoolPerformanceChart() {
           Pool performance
         </Text>
         <Tabs selectedIndex={selectedTabIndex} onChange={(index) => setSelectedTabIndex(index)}>
-          <TabsItem styleOverrides={{ padding: '8px' }} showBorder>
+          <TabsItem styleOverrides={{ padding: '8px' }} showBorder variant="secondary">
             Price
           </TabsItem>
-          <TabsItem styleOverrides={{ padding: '8px' }} showBorder>
+          <TabsItem styleOverrides={{ padding: '8px' }} showBorder variant="secondary">
             APY
           </TabsItem>
         </Tabs>
@@ -258,15 +263,15 @@ function PoolPerformanceChart() {
               <YAxis
                 stroke="none"
                 tickLine={false}
-                style={{ fontSize: '10px', fill: theme.colors.textPrimary }}
+                style={{ fontSize: '10px', fill: theme.colors.textSecondary }}
                 tickFormatter={(tick: number) => formatBalanceAbbreviated(tick, '', 0)}
                 yAxisId="left"
                 width={80}
               />
               <YAxis
                 stroke="none"
                 tickLine={false}
-                style={{ fontSize: '10px', fill: theme.colors.textPrimary }}
+                style={{ fontSize: '10px', fill: theme.colors.textSecondary }}
                 tickFormatter={(tick: number) => formatBalanceAbbreviated(tick, '', 2)}
                 yAxisId="right"
                 orientation="right"
@@ -421,7 +426,7 @@ function CustomLegend({
     navData,
     {
       color: 'textGold',
-      label: 'Junior token price',
+      label: data.seniorTokenPrice ? 'Junior token price' : 'Token price',
       value: formatBalance(data.juniorTokenPrice ?? 0, '', 3),
       type: 'singleTrancheTokenPrice',
       show: true,
@@ -439,7 +444,7 @@ function CustomLegend({
     navData,
     {
       color: 'textGold',
-      label: 'Junior APY',
+      label: data.seniorAPY ? 'Junior APY' : 'APY',
       value: formatPercentage(data.juniorAPY ?? 0),
       show: !!data.juniorAPY,
     },
@@ -470,13 +475,15 @@ function CustomLegend({
           }
 
           return (
-            <Stack key={index} pl={1} display="flex" marginRight="20px">
+            <Stack key={index} display="flex" marginRight="20px">
               <Box display="flex" alignItems="center">
                 <Dot color={item.color} />
                 {hasType(item) ? (
-                  <Tooltips type={item.type} label={item.label} />
-                ) : (
                   <Text variant="body3" style={{ lineHeight: 1.8 }}>
+                    <Tooltips type={item.type} label={item.label} color="textSecondary" />
+                  </Text>
+                ) : (
+                  <Text color="textSecondary" variant="body3" style={{ lineHeight: 1.8 }}>
                     {item.label}
                   </Text>
                 )}
@@ -507,7 +514,7 @@ export const CustomTick = ({ x, y, payload }: CustomTickProps) => {
   return (
     <g transform={`translate(${x},${y})`}>
       <text
-        style={{ fontSize: '10px', fill: theme.colors.textPrimary, letterSpacing: '-0.5px' }}
+        style={{ fontSize: '10px', fill: theme.colors.textSecondary, letterSpacing: '-0.5px' }}
         x={0}
         y={0}
         dy={16}

diff --git a/centrifuge-app/src/components/Charts/PriceChart.tsx b/centrifuge-app/src/components/Charts/PriceChart.tsx
@@ -111,7 +111,7 @@ export const PriceChart = ({ data, currency, filter, setFilter, isPrice }: Price
             />
           )}
           <CartesianGrid stroke={theme.colors.borderPrimary} />
-          <Tooltip content={<CustomizedTooltip currency={currency} precision={6} />} />
+          <Tooltip content={<CustomizedTooltip currency={currency} precision={6} isRate={!isPrice} />} />
           <Area
             type="monotone"
             dataKey={isPrice ? 'price' : 'apy'}

diff --git a/centrifuge-app/src/components/Charts/SimpleBarChart.tsx b/centrifuge-app/src/components/Charts/SimpleBarChart.tsx
@@ -11,10 +11,12 @@ import { TooltipContainer, TooltipTitle } from './Tooltip'
 type SimpleBarChartProps = {
   currency?: CurrencyMetadata
   data: { name: string; yAxis: number }[]
+  groupBy?: string
 }
 
-export const SimpleBarChart = ({ currency, data }: SimpleBarChartProps) => {
+export const SimpleBarChart = ({ currency, data, groupBy }: SimpleBarChartProps) => {
   const theme = useTheme()
+  const isSmallerBar = groupBy === 'daily' || false
 
   const getOneDayPerMonth = () => {
     const seenMonths = new Set<string>()
@@ -56,7 +58,7 @@ export const SimpleBarChart = ({ currency, data }: SimpleBarChartProps) => {
             type="category"
             dataKey="name"
             ticks={getOneDayPerMonth()}
-            tick={<CustomTick />}
+            tick={(props) => <CustomTick {...props} />}
             angle={45}
           />
           <YAxis
@@ -92,7 +94,7 @@ export const SimpleBarChart = ({ currency, data }: SimpleBarChartProps) => {
             fill={theme.colors.backgroundTertiary}
             strokeWidth={0}
             fillOpacity={1}
-            maxBarSize={20}
+            barSize={isSmallerBar ? 20 : 80}
           />
         </BarChart>
       </ResponsiveContainer>

diff --git a/centrifuge-app/src/components/Charts/Tooltip.tsx b/centrifuge-app/src/components/Charts/Tooltip.tsx
@@ -4,9 +4,9 @@ import { TooltipProps } from 'recharts'
 import { formatDate } from '../../utils/date'
 import { formatBalance, formatPercentage } from '../../utils/formatting'
 
-type CustomizedTooltipProps = TooltipProps<any, any> & { currency: string; precision?: number }
+type CustomizedTooltipProps = TooltipProps<any, any> & { currency: string; precision?: number; isRate?: boolean }
 
-export function CustomizedTooltip({ payload, currency, precision }: CustomizedTooltipProps) {
+export function CustomizedTooltip({ payload, currency, precision, isRate }: CustomizedTooltipProps) {
   if (payload && payload?.length > 0) {
     return (
       <TooltipContainer>
@@ -15,7 +15,7 @@ export function CustomizedTooltip({ payload, currency, precision }: CustomizedTo
           <TooltipEntry name={name} color={color} key={`${dataKey}${index}`}>
             {typeof value !== 'number'
               ? formatBalance(value[1] - value[0], currency, precision)
-              : unit === 'percent'
+              : unit === 'percent' || isRate
               ? formatPercentage(value)
               : formatBalance(value, currency, precision)}
           </TooltipEntry>

diff --git a/centrifuge-app/src/components/DataTable.tsx b/centrifuge-app/src/components/DataTable.tsx
@@ -42,6 +42,7 @@ export type DataTableProps<T = any> = {
   defaultSortKey?: string
   defaultSortOrder?: OrderBy
   hoverable?: boolean
+  scrollable?: boolean
   /**
    * summary row is not included in sorting
    */
@@ -99,6 +100,7 @@ export const DataTable = <T extends Record<string, any>>({
   pageSize = Infinity,
   page = 1,
   headerStyles,
+  scrollable = false,
 }: DataTableProps<T>) => {
   const [orderBy, setOrderBy] = React.useState<Record<string, OrderBy>>(
     defaultSortKey ? { [defaultSortKey]: defaultSortOrder } : {}
@@ -123,9 +125,9 @@ 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}>
+    <TableGrid gridTemplateColumns={templateColumns} gridAutoRows="auto" gap={0} rowGap={0} scrollable={scrollable}>
       {showHeader && (
-        <HeaderRow styles={headerStyles}>
+        <HeaderRow styles={headerStyles} scrollable={scrollable}>
           {columns.map((col, i) => (
             <HeaderCol key={i} align={col?.align}>
               <Text variant="body3">
@@ -200,7 +202,15 @@ export const DataTable = <T extends Record<string, any>>({
   )
 }
 
-const TableGrid = styled(Grid)``
+const TableGrid = styled(Grid)<{ scrollable?: boolean }>`
+  ${({ scrollable }) =>
+    scrollable &&
+    css({
+      maxHeight: 'calc(100vh - 180px)',
+      overflowY: 'auto',
+      overflowX: 'auto',
+    })}
+`
 
 const Row = styled('div')`
   display: grid;
@@ -209,12 +219,17 @@ const Row = styled('div')`
   box-shadow: ${({ theme }) => `-1px 0 0 0 ${theme.colors.borderPrimary}, 1px 0 0 0 ${theme.colors.borderPrimary}`};
 `
 
-const HeaderRow = styled(Row)<{ styles?: any }>(({ styles }) =>
+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,
   })
 )
@@ -242,6 +257,10 @@ export const DataRow = styled(Row)<any>`
       '&:focus-visible': {
         boxShadow: 'inset 0 0 0 3px var(--fabric-focus)',
       },
+      '&:last-child': {
+        borderBottomLeftRadius: '8px',
+        borderBottomRightRadius: '8px',
+      },
     })}
 `