Redesign prime detail page

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/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={

centrifuge-app/src/pages/Prime/Detail.tsx

@@ -1,20 +1,25 @@
 import { addressToHex } from '@centrifuge/centrifuge-js'
 import { useCentrifugeUtils } from '@centrifuge/centrifuge-react'
-import { Box, Shelf, Text } from '@centrifuge/fabric'
+import { Box, Stack, Text } from '@centrifuge/fabric'
 import { useParams } from 'react-router'
-import { LayoutSection } from '../../components/LayoutBase/LayoutSection'
-import { CardPortfolioValue } from '../../components/Portfolio/CardPortfolioValue'
-import { Holdings } from '../../components/Portfolio/Holdings'
-import { Transactions } from '../../components/Portfolio/Transactions'
-import { Resolutions } from '../../components/Resolutions'
-import { RouterTextLink } from '../../components/TextLink'
+import { useTheme } from 'styled-components'
+import { AssetSummary } from '../../../src/components/AssetSummary'
+import { BackButton } from '../../../src/components/BackButton'
+import { CardPortfolioValue } from '../../../src/components/Portfolio/CardPortfolioValue'
+import { useDailyPortfolioValue } from '../../../src/components/Portfolio/usePortfolio'
+import { config } from '../../../src/config'
+import { Dec } from '../../../src/utils/Decimal'
+import { formatBalance, formatBalanceAbbreviated } from '../../../src/utils/formatting'
+import { useTransactionsByAddress } from '../../../src/utils/usePools'
+import { useHoldings } from '../../components/Portfolio/Holdings'
 import { useDAOConfig } from '../../utils/useDAOConfig'
 
 export default function PrimeDetailPage() {
   return <PrimeDetail />
 }
 
-function PrimeDetail() {
+const PrimeDetail = () => {
+  const theme = useTheme()
   const { dao: daoSlug } = useParams<{ dao: string }>()
   const { data: DAOs, isLoading } = useDAOConfig()
   const dao = DAOs?.find((d) => d.slug === daoSlug)
@@ -25,30 +30,75 @@ function PrimeDetail() {
       ? utils.evmToSubstrateAddress(dao.address, dao.network)
       : addressToHex(dao.address))
 
+  const tokens = useHoldings(centAddress)
+  const currentPortfolioValue = tokens.reduce((sum, token) => sum.add(token.position.mul(token.tokenPrice)), Dec(0))
+  const transactions = useTransactionsByAddress(centAddress)
+  const dailyPortfolioValue = useDailyPortfolioValue(centAddress ?? '', 90)
+
+  const chartData = dailyPortfolioValue?.map((day) => ({
+    name: day.dateInMilliseconds,
+    yAxis: day.portfolioValue.toNumber(),
+  }))
+
+  const filters = {
+    type: 'default',
+    title: 'Overview',
+    legend: [
+      {
+        label: 'Portfolio value',
+        color: 'textGold',
+        value: '1,523.00',
+      },
+    ],
+  }
+
+  const valueFormatter = (value: any) => {
+    return { value: formatBalanceAbbreviated(value.yAxis, '', 2), label: 'Portfolio Value' }
+  }
+
   return !isLoading && dao && centAddress ? (
-    <>
-      <LayoutSection backgroundColor="backgroundSecondary" pt={12} pb={12}>
-        <Text variant="body3">
-          <Text color="textSecondary">
-            <RouterTextLink to="/prime" style={{ textDecoration: 'none' }}>
-              Prime
-            </RouterTextLink>
-          </Text>{' '}
-          / {dao.name} Investments
-        </Text>
-        <Shelf gap={2}>
-          <Box as="img" src={dao.logo} alt={dao.name} width="iconRegular" height="iconRegular" borderRadius="50%" />
-          <Text variant="heading1">{dao.name} Investments</Text>
-        </Shelf>
+    <Stack mx={1} my={1}>
+      <BackButton label={`${dao.name} Investements`} to="/prime" align="flex-start" />
+      <AssetSummary
+        data={[
+          {
+            label: 'Portfolio Value',
+            value: formatBalance(currentPortfolioValue || 0, ''),
+            heading: false,
+            children: (
+              <Box backgroundColor={theme.colors.statusOkBg} padding="4px" borderRadius={4}>
+                <Text variant="body4" color="statusOk" style={{ fontWeight: 500 }}>
+                  +25
+                </Text>
+                <Text variant="body4" color="statusOk">
+                  Since inception
+                </Text>
+              </Box>
+            ),
+          },
+          {
+            label: 'Realized P&L',
+            value: formatBalance(0, config.baseCurrency),
+            heading: false,
+          },
+          {
+            label: 'Unrealized P&L',
+            value: formatBalance(0, config.baseCurrency),
+            heading: false,
+          },
+        ]}
+      />
+      <Box mt={3} mx={[2, 2, 2, 2, 5]}>
         <CardPortfolioValue address={centAddress} />
-      </LayoutSection>
-      <LayoutSection title="Holdings" pt={12} pb={12}>
+      </Box>
+
+      {/* <LayoutSection title="Holdings" pt={12} pb={12}>
         <Holdings address={centAddress} showActions={false} />
       </LayoutSection>
       <LayoutSection title="Transaction history" pt={12} pb={12}>
         <Transactions onlyMostRecent address={centAddress} />
       </LayoutSection>
-      <Resolutions dao={dao} />
-    </>
+      <Resolutions dao={dao} /> */}
+    </Stack>
   ) : null
 }