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/BackButton.tsx

@@ -0,0 +1,54 @@
+import { Box, IconArrowLeft, Text } from '@centrifuge/fabric'
+import { ReactNode } from 'react'
+import styled from 'styled-components'
+import { RouterLinkButton } from './RouterLinkButton'
+
+const StyledRouterLinkButton = styled(RouterLinkButton)`
+  margin-left: 14px;
+  border-radius: 50%;
+  margin: 0px;
+  padding: 0px;
+  width: fit-content;
+  margin-left: 30px;
+  border: 4px solid transparent;
+  width: 30px;
+  height: 30px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  > span {
+    width: 34px;
+    border: 4px solid transparent;
+  }
+  &:hover {
+    background-color: ${({ theme }) => theme.colors.backgroundSecondary};
+    span {
+      color: ${({ theme }) => theme.colors.textPrimary};
+    }
+  }
+`
+
+export const BackButton = ({
+  to,
+  children,
+  label,
+  align,
+}: {
+  to: string
+  children?: ReactNode
+  label: string
+  align?: string
+}) => {
+  return (
+    <Box display="flex" alignItems="center" width="55%" justifyContent={align || 'space-between'} mt={15} mb={24}>
+      <StyledRouterLinkButton to={to} small icon={<IconArrowLeft />} variant="tertiary" />
+      <Box display="flex" alignItems="center">
+        <Text variant="heading1" style={{ marginRight: 8 }}>
+          {label}
+        </Text>
+        {children}
+      </Box>
+    </Box>
+  )
+}

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

@@ -1,11 +1,19 @@
 import { CurrencyBalance, CurrencyMetadata } from '@centrifuge/centrifuge-js'
-import { Card, Shelf, Stack, Text } from '@centrifuge/fabric'
+import { Box, Card, Select, Shelf, Stack, Text } from '@centrifuge/fabric'
+import { useState } from 'react'
 import { CartesianGrid, Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts'
 import { useTheme } from 'styled-components'
 import { formatDate } from '../../utils/date'
 import { formatBalance, formatBalanceAbbreviated } from '../../utils/formatting'
 import { TooltipContainer, TooltipTitle } from './Tooltip'
 
+const rangeFilters = [
+  { value: '30d', label: '30 days' },
+  { value: '90d', label: '90 days' },
+  { value: 'ytd', label: 'Year to date' },
+  { value: 'all', label: 'All' },
+]
+
 type ChartData = {
   name: string
   yAxis: Number
@@ -14,21 +22,65 @@
 interface Props {
   data: ChartData[]
   currency?: CurrencyMetadata
+  tooltip?: (value: any) => { value: any; label: string }
+  withFilters?: boolean
+  filters: {
+    type: 'default' | { value: string; label: string }
+    title: string
+    legend: [
+      {
+        label: string
+        color: string
+        value: string
+      }
+    ]
+  }
 }
 
-export const SimpleLineChart = ({ data, currency }: Props) => {
+const Dot = ({ color }: { color: string }) => (
+  <Box width="8px" height="8px" borderRadius="50%" backgroundColor={color} marginRight="4px" />
+)
+
+// We use the chart for pages: asset, prime, portfolio
+export const SimpleLineChart = ({ data, currency, tooltip, filters }: Props) => {
   const theme = useTheme()
   const chartColor = theme.colors.accentPrimary
 
+  const [range, setRange] = useState<(typeof rangeFilters)[number]>(rangeFilters[0])
+
+  const toggleRange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    const value = e.target.value
+    const range = rangeFilters.find((range) => range.value === value)
+    setRange(range ?? rangeFilters[0])
+  }
+
+  console.log(data)
+
   return (
     <Card padding={3} variant="secondary">
+      {filters && <Text variant="heading4">{filters.title}</Text>}
+      {filters && (
+        <Box mb={3} display="flex" justifyContent="space-between" alignItems="center">
+          {filters.legend.map((legend) => (
+            <Box mt={3}>
+              <Box display="flex" alignItems="center">
+                <Dot color={legend.color} />
+                <Text variant="body3" color="textSecondary">
+                  {legend.label}
+                </Text>
+              </Box>
+              <Text variant="heading1">{legend.value}</Text>
+            </Box>
+          ))}
+          <Select options={rangeFilters} onChange={toggleRange} hideBorder />
+        </Box>
+      )}
       <Stack gap={2}>
         {!data.length && (
           <Text variant="body3" style={{ margin: '80px auto 0px' }}>
             No data available
           </Text>
         )}
-
         <Shelf gap={4} width="100%">
           {data?.length ? (
             <ResponsiveContainer width="100%" height={200} minHeight={200} maxHeight={200}>
@@ -70,6 +122,15 @@
                         <TooltipContainer>
                           <TooltipTitle>{formatDate(payload[0].payload.name)}</TooltipTitle>
                           {payload.map(({ value }, index) => {
+                            if (tooltip) {
+                              const { label, value: val } = tooltip(payload[0].payload)
+                              return (
+                                <Shelf justifyContent="space-between" pl="4px" key={index}>
+                                  <Text variant="body3">{label}</Text>
+                                  <Text variant="body3">{val}</Text>
+                                </Shelf>
+                              )
+                            }
                             return (
                               <Shelf justifyContent="space-between" pl="4px" key={index}>
                                 <Text variant="body3">Value</Text>

centrifuge-app/src/pages/Loan/index.tsx

@@ -7,23 +7,11 @@ import {
   PricingInfo,
   TinlakeLoan,
 } from '@centrifuge/centrifuge-js'
-import {
-  Box,
-  Button,
-  Card,
-  Drawer,
-  Grid,
-  IconArrowLeft,
-  Shelf,
-  Spinner,
-  Stack,
-  Text,
-  truncate,
-} from '@centrifuge/fabric'
+import { Box, Button, Card, Drawer, Grid, Shelf, Spinner, Stack, Text, truncate } from '@centrifuge/fabric'
 import * as React from 'react'
 import { useParams } from 'react-router'
-import styled from 'styled-components'
 import { AssetSummary } from '../../../src/components/AssetSummary'
+import { BackButton } from '../../../src/components/BackButton'
 import { SimpleLineChart } from '../../../src/components/Charts/SimpleLineChart'
 import { LoanLabel, getLoanLabelStatus } from '../../../src/components/LoanLabel'
 import { Dec } from '../../../src/utils/Decimal'
@@ -33,7 +21,6 @@ import { LayoutSection } from '../../components/LayoutBase/LayoutSection'
 import { LoadBoundary } from '../../components/LoadBoundary'
 import { PageSection } from '../../components/PageSection'
 import { TransactionHistoryTable } from '../../components/PoolOverview/TransactionHistory'
-import { RouterLinkButton } from '../../components/RouterLinkButton'
 import { Tooltips } from '../../components/Tooltips'
 import { nftMetadataSchema } from '../../schemas'
 import { LoanTemplate } from '../../types'
@@ -62,28 +49,6 @@ function isTinlakeLoan(loan: LoanType | TinlakeLoan): loan is TinlakeLoan {
   return loan.poolId.startsWith('0x')
 }
 
-const StyledRouterLinkButton = styled(RouterLinkButton)`
-  margin-left: 14px;
-  border-radius: 50%;
-  margin: 0px;
-  padding: 0px;
-  width: fit-content;
-  margin-left: 30px;
-  border: 4px solid transparent;
-
-  > span {
-    width: 34px;
-    border: 4px solid transparent;
-  }
-  &:hover {
-    background-color: ${({ theme }) => theme.colors.backgroundSecondary};
-    border: ${({ theme }) => `4px solid ${theme.colors.backgroundTertiary}`};
-    span {
-      color: ${({ theme }) => theme.colors.textPrimary};
-    }
-  }
-`
-
 const positiveNetflows = ['DEPOSIT_FROM_INVESTMENTS', 'INCREASE_DEBT']
 
 function ActionButtons({ loan }: { loan: LoanType }) {
@@ -219,15 +184,9 @@ function Loan() {
 
   return (
     <Stack>
-      <Box display="flex" alignItems="center" width="55%" justifyContent="space-between" mt={15} mb={24}>
-        <StyledRouterLinkButton to={`${basePath}/${poolId}/assets`} small icon={IconArrowLeft} variant="tertiary" />
-        <Box display="flex" alignItems="center">
-          <Text variant="heading1" style={{ marginRight: 8 }}>
-            {name}
-          </Text>
-          {loan && <LoanLabel loan={loan} />}
-        </Box>
-      </Box>
+      <BackButton label={name} to={`${basePath}/${poolId}/assets`}>
+        {loan && <LoanLabel loan={loan} />}
+      </BackButton>
 
       <AssetSummary
         data={