fixup

centrifuge · Sep 25, 2024 · 358530f · 358530f
1 parent 58bf009
commit 358530f
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 28 deletions.
diff --git a/centrifuge-app/src/components/InvestRedeem/InvestRedeem.tsx b/centrifuge-app/src/components/InvestRedeem/InvestRedeem.tsx
@@ -187,7 +187,9 @@ function Footer() {
     <>
       {state.actingAddress && connectedType === 'substrate' && (
         <Stack gap={2}>
-          <Text variant="heading4">Transaction history</Text>
+          <Text variant="heading6" color="textPrimary" fontWeight={600}>
+            Transaction history
+          </Text>
           <Transactions onlyMostRecent narrow address={state.actingAddress} trancheId={state.trancheId} />
         </Stack>
       )}

diff --git a/centrifuge-app/src/components/InvestRedeem/InvestRedeemDrawer.tsx b/centrifuge-app/src/components/InvestRedeem/InvestRedeemDrawer.tsx
@@ -1,10 +1,20 @@
 import { Drawer, Stack, Text } from '@centrifuge/fabric'
+import Decimal from 'decimal.js-light'
 import * as React from 'react'
 import { useDailyPoolStates, usePool } from '../../utils/usePools'
 import { FilterOptions, PriceChart } from '../Charts/PriceChart'
 import { LoadBoundary } from '../LoadBoundary'
 import { InvestRedeem } from './InvestRedeem'
 
+type TrancheState = {
+  price: Decimal | any
+}
+
+type DailyPoolStateProps = {
+  timestamp: string
+  tranches: { [trancheId: string]: TrancheState }
+}
+
 export function InvestRedeemDrawer({
   poolId,
   trancheId,
@@ -17,33 +27,8 @@ export function InvestRedeemDrawer({
   poolId: string
   trancheId: string
   defaultView?: 'invest' | 'redeem'
-}) {
-  return (
-    <Drawer isOpen={open} onClose={onClose}>
-      <LoadBoundary>
-        <InvestRedeem poolId={poolId} trancheId={trancheId} defaultView={defaultView} />
-      </LoadBoundary>
-      <LoadBoundary>
-        <Stack gap={12} borderColor="rgba(0,0,0,0.08)" borderWidth="1px" borderStyle="solid" borderRadius="8px" p={2}>
-          <Text variant="heading6" color="textPrimary" fontWeight={600}>
-            Performance
-          </Text>
-          <TokenPriceChart poolId={poolId} trancheId={trancheId} />
-        </Stack>
-      </LoadBoundary>
-    </Drawer>
-  )
-}
-
-const TokenPriceChart = React.memo(function TokenPriceChart({
-  poolId,
-  trancheId,
-}: {
-  poolId: string
-  trancheId: string
 }) {
   const [filter, setFilter] = React.useState<FilterOptions>('30days')
-  const pool = usePool(poolId)
 
   const dateFrom = React.useMemo(() => {
     if (filter === 'YTD') {
@@ -70,9 +55,49 @@ const TokenPriceChart = React.memo(function TokenPriceChart({
 
   const { poolStates: dailyPoolStates } = useDailyPoolStates(poolId, new Date(dateFrom)) || {}
 
+  if (!dailyPoolStates?.length) return
+
+  return (
+    <Drawer isOpen={open} onClose={onClose}>
+      <LoadBoundary>
+        <InvestRedeem poolId={poolId} trancheId={trancheId} defaultView={defaultView} />
+      </LoadBoundary>
+      <LoadBoundary>
+        <Stack gap={12} borderColor="rgba(0,0,0,0.08)" borderWidth="1px" borderStyle="solid" borderRadius="8px" p={2}>
+          <Text variant="heading6" color="textPrimary" fontWeight={600}>
+            Performance
+          </Text>
+          <TokenPriceChart
+            poolId={poolId}
+            trancheId={trancheId}
+            dailyPoolStates={dailyPoolStates}
+            filter={filter}
+            setFilter={setFilter}
+          />
+        </Stack>
+      </LoadBoundary>
+    </Drawer>
+  )
+}
+
+const TokenPriceChart = React.memo(function TokenPriceChart({
+  poolId,
+  trancheId,
+  dailyPoolStates,
+  filter,
+  setFilter,
+}: {
+  poolId: string
+  trancheId: string
+  dailyPoolStates: DailyPoolStateProps[]
+  filter: FilterOptions | undefined
+  setFilter: any
+}) {
+  const pool = usePool(poolId)
+
   const data = React.useMemo(() => {
     const tokenData =
-      dailyPoolStates?.map((state) => {
+      dailyPoolStates?.map((state: DailyPoolStateProps) => {
         return { price: state.tranches[trancheId].price?.toFloat() || 0, day: new Date(state.timestamp) }
       }) || []
     if (tokenData.length > 0) {
@@ -88,6 +113,8 @@ const TokenPriceChart = React.memo(function TokenPriceChart({
     return tokenData
   }, [dailyPoolStates, pool?.tranches, trancheId])
 
+  if (!data.length) return
+
   return (
     <PriceChart
       data={data}

diff --git a/centrifuge-app/src/components/Portfolio/Transactions.tsx b/centrifuge-app/src/components/Portfolio/Transactions.tsx
@@ -13,6 +13,7 @@ import {
   usePagination,
 } from '@centrifuge/fabric'
 import * as React from 'react'
+import { useTheme } from 'styled-components'
 import { TransactionTypeChip } from '../../components/Portfolio/TransactionTypeChip'
 import { formatDate } from '../../utils/date'
 import { getCSVDownloadUrl } from '../../utils/getCSVDownloadUrl'
@@ -43,6 +44,7 @@ type Row = {
 
 export function Transactions({ onlyMostRecent, narrow, txTypes, address, trancheId }: TransactionsProps) {
   const explorer = useGetExplorerUrl()
+  const theme = useTheme()
   const columns = [
     {
       align: 'left',
@@ -206,7 +208,7 @@ export function Transactions({ onlyMostRecent, narrow, txTypes, address, tranche
       </Stack>
     </PaginationProvider>
   ) : (
-    <Shelf borderRadius="4px" backgroundColor="backgroundSecondary" justifyContent="center" p="10px">
+    <Shelf border={`1px solid ${theme.colors.backgroundTertiary}`} borderRadius="6px" justifyContent="center" p={2}>
       <Text color="textSecondary" variant="body2">
         No transactions displayed yet
       </Text>