Prime page - redesign

centrifuge-app/src/components/AssetSummary.tsx

@@ -1,4 +1,4 @@
-import { Shelf, Stack, Text } from '@centrifuge/fabric'
+import { Box, Shelf, Stack, Text } from '@centrifuge/fabric'
 import * as React from 'react'
 import { useTheme } from 'styled-components'
 
@@ -7,6 +7,7 @@ type Props = {
     label: React.ReactNode
     value: React.ReactNode
     heading: boolean
+    children?: React.ReactNode
   }[]
   children?: React.ReactNode
 }
@@ -22,12 +23,17 @@ export function AssetSummary({ data, children }: Props) {
       mx={[2, 2, 2, 2, 5]}
     >
       <Shelf gap={2}>
-        {data?.map(({ label, value, heading }, index) => (
+        {data?.map(({ label, value, heading, children }, index) => (
           <Stack key={`${value}-${label}-${index}`}>
             <Text variant={heading ? 'body2' : 'body3'} color="textSecondary" style={{ margin: 0, padding: 0 }}>
               {label}
             </Text>
-            <Text variant={heading ? 'heading' : 'heading2'}>{value}</Text>
+            <Box display="flex" alignItems="center">
+              <Text variant={heading ? 'heading' : 'heading1'} style={{ marginRight: 8 }}>
+                {value}
+              </Text>
+              {children && children}
+            </Box>
           </Stack>
         ))}
         {children}

centrifuge-app/src/components/Charts/PoolPerformanceChart.tsx

@@ -22,7 +22,7 @@ type ChartData = {
   seniorTokenPrice?: number | null
   currency?: string
   seniorAPY: number | null | undefined
-  juniorAPY: number | null
+  juniorAPY: number | null | undefined
 }
 
 type GraphDataItemWithType = {
@@ -48,6 +48,7 @@ type CustomTickProps = {
   payload: {
     value: ValueType
   }
+  filterValue?: number
 }
 
 const rangeFilters = [
@@ -499,17 +500,21 @@ function CustomLegend({
   )
 }
 
-export const CustomTick = ({ x, y, payload }: CustomTickProps) => {
+export const CustomTick = ({ x, y, payload, filterValue }: CustomTickProps) => {
   const theme = useTheme()
 
   let dateValue: Date | null = null
-
   if (payload.value instanceof Date) {
     dateValue = payload.value
   } else if (typeof payload.value === 'string' || typeof payload.value === 'number') {
     dateValue = new Date(payload.value)
   }
 
+  const dateFormat: Intl.DateTimeFormatOptions =
+    typeof filterValue !== 'undefined' && filterValue <= 90
+      ? { month: 'short' as const, day: 'numeric' as const }
+      : { month: 'short' as const }
+
   return (
     <g transform={`translate(${x},${y})`}>
       <text
@@ -519,7 +524,7 @@ export const CustomTick = ({ x, y, payload }: CustomTickProps) => {
         dy={16}
         textAnchor="middle"
       >
-        {dateValue ? dateValue.toLocaleString('en-US', { month: 'short' }) : ''}
+        {dateValue ? dateValue.toLocaleString('en-US', dateFormat) : ''}
       </text>
     </g>
   )

centrifuge-app/src/components/DataTable.tsx

@@ -20,7 +20,7 @@ import Decimal from 'decimal.js-light'
 import { getIn } from 'formik'
 import * as React from 'react'
 import { Link, LinkProps } from 'react-router-dom'
-import styled from 'styled-components'
+import styled, { useTheme } from 'styled-components'
 import { FiltersState } from '../utils/useFilters'
 import { FilterButton } from './FilterButton'
 import { QuickAction } from './QuickAction'
@@ -50,7 +50,7 @@ export type DataTableProps<T = any> = {
   footer?: React.ReactNode
   pageSize?: number
   page?: number
-  headerStyles?: React.CSSProperties
+  hideHeader?: boolean
   hideBorder?: boolean
 } & GroupedProps
 
@@ -100,10 +100,11 @@ export const DataTable = <T extends Record<string, any>>({
   defaultSortOrder = 'desc',
   pageSize = Infinity,
   page = 1,
-  headerStyles,
+  hideHeader,
   scrollable = false,
   hideBorder,
 }: DataTableProps<T>) => {
+  const theme = useTheme()
   const tableRef = React.useRef<HTMLDivElement>(null)
   const [offsetTop, setOffsetTop] = React.useState(0)
   const [orderBy, setOrderBy] = React.useState<Record<string, OrderBy>>(
@@ -147,7 +148,19 @@ export const DataTable = <T extends Record<string, any>>({
       offsetTop={offsetTop}
     >
       {showHeader && (
-        <HeaderRow styles={headerStyles} scrollable={scrollable} hideBorder={hideBorder}>
+        <HeaderRow
+          styles={
+            hideHeader
+              ? {
+                  backgroundColor: 'transparent',
+                  border: 'transparent',
+                  borderBottom: `1px solid ${theme.colors.backgroundInverted}`,
+                }
+              : {}
+          }
+          scrollable={scrollable}
+          hideBorder={hideBorder}
+        >
           {columns.map((col, i) => (
             <HeaderCol key={i} align={col?.align} isLabel={col.isLabel}>
               <Text variant="body3">

centrifuge-app/src/components/LayoutBase/LayoutSection.tsx

@@ -10,7 +10,7 @@ type Props = {
   children: React.ReactNode
 } & BoxProps
 
-export function LayoutSection({ title, titleAddition, subtitle, headerRight, children, ...boxProps }: Props) {
+export function LayoutSection({ title, titleAddition, subtitle, headerRight, children, gap = 2, ...boxProps }: Props) {
   return (
     <BasePadding as="section" gap={3} pt={20} pb={20} {...boxProps}>
       {(title || titleAddition || subtitle || headerRight) && (
@@ -37,7 +37,7 @@ export function LayoutSection({ title, titleAddition, subtitle, headerRight, chi
           <Box ml="auto">{headerRight}</Box>
         </Shelf>
       )}
-      <Stack gap={2} maxWidth="mainContent">
+      <Stack gap={gap} maxWidth="mainContent">
         {children}
       </Stack>
     </BasePadding>

centrifuge-app/src/components/Menu/index.tsx

@@ -52,7 +52,7 @@ export function Menu() {
   const isLarge = useIsAboveBreakpoint('L')
   const address = useAddress('substrate')
   const { showSwaps } = useDebugFlags()
-  const transactions = useTransactionsByAddress(address)
+  const { data: transactions } = useTransactionsByAddress(address)
 
   return (
     <Shelf

centrifuge-app/src/components/PoolOverview/TrancheTokenCards.tsx

@@ -155,16 +155,7 @@ export const TrancheTokenCards = ({
         overflow="auto"
         borderBottom={`1px solid ${theme.colors.borderPrimary}`}
       >
-        <DataTable
-          headerStyles={{
-            backgroundColor: 'white',
-            border: 'transparent',
-            borderBottom: `1px solid ${theme.colors.backgroundInverted}`,
-          }}
-          columns={columns}
-          data={dataTable}
-          hideBorder
-        />
+        <DataTable columns={columns} data={dataTable} hideBorder hideHeader />
       </Box>
     </Shelf>
   )

centrifuge-app/src/components/Portfolio/CardPortfolioValue.tsx

@@ -1,124 +1,68 @@
 import { evmToSubstrateAddress } from '@centrifuge/centrifuge-js'
-import { Box, Shelf, Stack, Text, TextWithPlaceholder } from '@centrifuge/fabric'
+import { formatBalance } from '@centrifuge/centrifuge-react'
+import { Box, Select, Text, TextWithPlaceholder } from '@centrifuge/fabric'
 import * as React from 'react'
-import styled, { useTheme } from 'styled-components'
-import { config } from '../../config'
+import { useTheme } from 'styled-components'
 import { Dec } from '../../utils/Decimal'
 import { isEvmAddress } from '../../utils/address'
-import { formatBalance } from '../../utils/formatting'
 import { useTransactionsByAddress } from '../../utils/usePools'
-import { LoadBoundary } from '../LoadBoundary'
+import { Spinner } from '../Spinner'
 import { useHoldings } from './Holdings'
 import { PortfolioValue } from './PortfolioValue'
 
-const RangeFilterButton = styled(Stack)`
-  &:hover {
-    cursor: pointer;
-  }
-`
-
 const rangeFilters = [
   { value: '30d', label: '30 days' },
   { value: '90d', label: '90 days' },
   { value: 'ytd', label: 'Year to date' },
   { value: 'all', label: 'All' },
-] as const
+]
+
+type RangeValue = (typeof rangeFilters)[number]['value']
 
-export function CardPortfolioValue({
-  address,
-  chainId,
-  showGraph = true,
-}: {
-  address?: string
-  chainId?: number
-  showGraph?: boolean
-}) {
+export function CardPortfolioValue({ address, chainId }: { address?: string; chainId?: number }) {
   const tokens = useHoldings(address, chainId)
   const centAddress = address && chainId && isEvmAddress(address) ? evmToSubstrateAddress(address, chainId) : address
-  const transactions = useTransactionsByAddress(showGraph ? centAddress : undefined)
+  const { data: transactions, isLoading } = useTransactionsByAddress(centAddress)
 
   const { colors } = useTheme()
 
-  const [range, setRange] = React.useState<(typeof rangeFilters)[number]>({ value: 'ytd', label: 'Year to date' })
+  const [range, setRange] = React.useState<RangeValue>('ytd')
 
   const currentPortfolioValue = tokens.reduce((sum, token) => sum.add(token.position.mul(token.tokenPrice)), Dec(0))
 
-  const balanceProps = {
-    as: 'strong',
-    fontSize: [16, 18],
-  }
-  const headingProps = {
-    as: 'p',
-    variant: 'body3',
-  }
-
   return (
     <Box position="relative">
-      <Box
-        role="article"
-        borderRadius="card"
-        borderStyle="solid"
-        borderWidth={1}
-        borderColor="borderPrimary"
-        p={2}
-        style={{
-          boxShadow: `0px 3px 2px -2px ${colors.borderPrimary}`,
-          height: 450,
-        }}
-        background={colors.backgroundPage}
-      >
-        <Stack gap={2}>
-          <Text variant="heading2">Overview</Text>
-
-          <Shelf gap={1} alignContent="center" height="48px">
-            <Box width="3px" backgroundColor={colors.textGold} height="48px" />
-            <Shelf gap={4}>
-              <Stack gap="4px">
-                <Text {...headingProps}>Current portfolio value</Text>
-                <TextWithPlaceholder {...balanceProps} isLoading={!currentPortfolioValue}>
-                  {formatBalance(currentPortfolioValue || 0, config.baseCurrency)}
-                </TextWithPlaceholder>
-              </Stack>
-            </Shelf>
-          </Shelf>
-        </Stack>
-        {showGraph && centAddress && transactions?.investorTransactions.length ? (
-          <>
-            <Stack gap={1}>
-              <Shelf justifyContent="flex-end" pr="20px">
-                {rangeFilters.map((rangeFilter, index) => (
-                  <React.Fragment key={rangeFilter.label}>
-                    <RangeFilterButton gap={1} onClick={() => setRange(rangeFilter)}>
-                      <Text variant="body3">
-                        <Text variant={rangeFilter.value === range.value && 'emphasized'}>{rangeFilter.label}</Text>
-                      </Text>
-                      <Box
-                        width="100%"
-                        backgroundColor={rangeFilter.value === range.value ? '#000000' : '#E0E0E0'}
-                        height="3px"
-                      />
-                    </RangeFilterButton>
-                    {index !== rangeFilters.length - 1 && (
-                      <Box width="24px" backgroundColor="#E0E0E0" height="3px" alignSelf="flex-end" />
-                    )}
-                  </React.Fragment>
-                ))}
-              </Shelf>
-            </Stack>
-
-            <Box width="100%" height="300px">
-              <LoadBoundary>
-                {transactions?.investorTransactions.length ? (
-                  <PortfolioValue rangeValue={range.value} address={centAddress} />
-                ) : (
-                  <Box width="100%" height="100%" display="flex" alignItems="center" justifyContent="center">
-                    <Text>No data available</Text>
-                  </Box>
-                )}
-              </LoadBoundary>
+      <Box role="article" borderRadius="card" borderStyle="solid" borderWidth={1} borderColor="borderPrimary" p={2}>
+        <Box>
+          <Text variant="heading4">Overview</Text>
+          <Box display="flex" alignItems="center" justifyContent="space-between">
+            <Box alignContent="center" mb={2} mt={3}>
+              <Box display="flex" alignItems="center">
+                <Box backgroundColor={colors.textGold} height={10} width={10} borderRadius="50%" marginRight={1} />
+                <Text variant="body3" color="textSecondary" style={{ fontWeight: 500 }}>
+                  Portfolio value
+                </Text>
+              </Box>
+              <TextWithPlaceholder isLoading={!currentPortfolioValue} variant="heading1">
+                {formatBalance(currentPortfolioValue || 0)}
+              </TextWithPlaceholder>
             </Box>
-          </>
-        ) : null}
+            <Select options={rangeFilters} onChange={(e) => setRange(e.target.value as RangeValue)} hideBorder />
+          </Box>
+          <Box width="100%" height={300} minHeight={300} position="relative">
+            {isLoading && centAddress ? (
+              <Box width="100%" height={300} display="flex" alignItems="center" justifyContent="center">
+                <Spinner />
+              </Box>
+            ) : transactions?.investorTransactions.length ? (
+              <PortfolioValue rangeValue={range} address={centAddress} />
+            ) : (
+              <Box width="100%" height="100%" display="flex" alignItems="center" justifyContent="center">
+                <Text>No data available</Text>
+              </Box>
+            )}
+          </Box>
+        </Box>
       </Box>
     </Box>
   )