Add realized unrealized values to invest/redeem drawer

centrifuge · Oct 15, 2024 · 5727c81 · 5727c81
1 parent 84a31f5
commit 5727c81
Show file tree

Hide file tree

Showing 3 changed files with 80 additions and 18 deletions.
diff --git a/centrifuge-app/src/components/InvestRedeem/InvestRedeem.tsx b/centrifuge-app/src/components/InvestRedeem/InvestRedeem.tsx
@@ -1,3 +1,4 @@
+import { CurrencyBalance } from '@centrifuge/centrifuge-js'
 import { ConnectionGuard, useGetNetworkName, useWallet } from '@centrifuge/centrifuge-react'
 import { Network } from '@centrifuge/centrifuge-react/dist/components/WalletProvider/types'
 import { useGetExplorerUrl } from '@centrifuge/centrifuge-react/dist/components/WalletProvider/utils'
@@ -36,9 +37,18 @@ import { RedeemForm } from './RedeemForm'
 export type InvestRedeemProps = {
   poolId: string
   trancheId: string
-  metadata: PoolMetaDataPartial
+  metadata?: PoolMetaDataPartial
 } & InputProps
 
+type HeaderProps = {
+  sumUnrealizedProfitAtMarketPrice?: CurrencyBalance
+  sumRealizedProfitFifoByPeriod?: CurrencyBalance
+} & InputProps
+
+type InputProps = {
+  defaultView?: 'invest' | 'redeem'
+}
+
 // @ts-ignore
 const listFormatter = new Intl.ListFormat('en')
 
@@ -73,7 +83,7 @@ export function InvestRedeem({ poolId, trancheId, ...rest }: InvestRedeemProps)
       >
         <LiquidityRewardsProvider poolId={poolId} trancheId={trancheId}>
           <InvestRedeemProvider poolId={poolId} trancheId={trancheId}>
-            <Header />
+            <Header {...rest} />
             <InvestRedeemInput {...rest} />
             {!isTinlakePool && (connectedType === 'substrate' || isEvmOnSubstrate) && <LiquidityRewardsContainer />}
             <Footer />
@@ -84,10 +94,6 @@ export function InvestRedeem({ poolId, trancheId, ...rest }: InvestRedeemProps)
   )
 }
 
-type InputProps = {
-  defaultView?: 'invest' | 'redeem'
-}
-
 function InvestRedeemInput({ defaultView: defaultViewProp }: InputProps) {
   const { state } = useInvestRedeem()
   const { render: renderGmp } = useGmp()
@@ -149,10 +155,9 @@ function InvestRedeemInput({ defaultView: defaultViewProp }: InputProps) {
   )
 }
 
-function Header() {
+function Header({ sumRealizedProfitFifoByPeriod, sumUnrealizedProfitAtMarketPrice }: HeaderProps) {
   const { state } = useInvestRedeem()
   const { connectedType } = useWallet()
-
   return (
     <Stack gap={2}>
       <Text variant="heading2">{state.trancheCurrency?.symbol} investment overview</Text>
@@ -161,7 +166,7 @@ function Header() {
           <TextWithPlaceholder variant="body3" color="textSecondary">
             Investment position
           </TextWithPlaceholder>
-          <Shelf gap={'3px'}>
+          <Shelf gap="3px">
             <TextWithPlaceholder
               variant="heading2"
               fontWeight="bold"
@@ -177,6 +182,46 @@ function Header() {
           </Shelf>
         </Stack>
       )}
+      <Box display="flex" justifyContent="space-between" width="50%">
+        <Stack>
+          <TextWithPlaceholder variant="body3" color="textSecondary">
+            Realized P&L
+          </TextWithPlaceholder>
+          <Shelf gap={'3px'}>
+            <TextWithPlaceholder
+              variant="heading2"
+              fontWeight="bold"
+              isLoading={state.isDataLoading}
+              width={12}
+              variance={0}
+            >
+              {formatBalance(sumRealizedProfitFifoByPeriod ?? 0, undefined, 2, 0)}
+            </TextWithPlaceholder>
+            <TextWithPlaceholder variant="heading2" isLoading={state.isDataLoading} width={12} variance={0}>
+              {state.poolCurrency?.displayName}
+            </TextWithPlaceholder>
+          </Shelf>
+        </Stack>
+        <Stack>
+          <TextWithPlaceholder variant="body3" color="textSecondary">
+            Unrealized P&L
+          </TextWithPlaceholder>
+          <Shelf gap={'3px'}>
+            <TextWithPlaceholder
+              variant="heading2"
+              fontWeight="bold"
+              isLoading={state.isDataLoading}
+              width={12}
+              variance={0}
+            >
+              {formatBalance(sumUnrealizedProfitAtMarketPrice ?? 0, undefined, 2, 0)}
+            </TextWithPlaceholder>
+            <TextWithPlaceholder variant="heading2" isLoading={state.isDataLoading} width={12} variance={0}>
+              {state.poolCurrency?.displayName}
+            </TextWithPlaceholder>
+          </Shelf>
+        </Stack>
+      </Box>
     </Stack>
   )
 }

diff --git a/centrifuge-app/src/components/InvestRedeem/InvestRedeemDrawer.tsx b/centrifuge-app/src/components/InvestRedeem/InvestRedeemDrawer.tsx
@@ -1,6 +1,7 @@
-import { DailyPoolState, Perquintill } from '@centrifuge/centrifuge-js'
+import { CurrencyBalance, DailyPoolState, Perquintill, Pool } from '@centrifuge/centrifuge-js'
 import { Box, Drawer, Stack, Tabs, TabsItem, Text } from '@centrifuge/fabric'
 import * as React from 'react'
+import { TinlakePool } from 'src/utils/tinlake/useTinlakePools'
 import { useDailyPoolStates, usePool } from '../../utils/usePools'
 import { FilterOptions, PriceChart } from '../Charts/PriceChart'
 import { LoadBoundary } from '../LoadBoundary'
@@ -31,6 +32,7 @@ export function InvestRedeemDrawer({
 }) {
   const [filter, setFilter] = React.useState<FilterOptions>('30days')
   const [index, setIndex] = React.useState(0)
+  const pool = usePool(poolId)
 
   const dateFrom = React.useMemo(() => {
     if (filter === 'YTD') {
@@ -57,10 +59,27 @@ export function InvestRedeemDrawer({
 
   const { poolStates: dailyPoolStates } = useDailyPoolStates(poolId, new Date(dateFrom)) || {}
 
+  const realizedUnrealizedValues = React.useMemo(() => {
+    const today = dailyPoolStates?.find(
+      (state) => new Date(state.timestamp).toDateString() === new Date().toDateString()
+    )
+
+    const sumRealizedProfitFifoByPeriod = new CurrencyBalance(
+      today?.sumRealizedProfitFifoByPeriod ?? 0,
+      pool.currency.decimals
+    ).toDecimal()
+    const sumUnrealizedProfitAtMarketPrice = new CurrencyBalance(
+      today?.sumUnrealizedProfitAtMarketPrice ?? 0,
+      pool.currency.decimals
+    )
+
+    return { sumRealizedProfitFifoByPeriod, sumUnrealizedProfitAtMarketPrice }
+  }, [dailyPoolStates])
+
   return (
     <Drawer isOpen={open} onClose={onClose}>
       <LoadBoundary>
-        <InvestRedeem poolId={poolId} trancheId={trancheId} defaultView={defaultView} />
+        <InvestRedeem poolId={poolId} trancheId={trancheId} defaultView={defaultView} {...realizedUnrealizedValues} />
       </LoadBoundary>
       <LoadBoundary>
         {dailyPoolStates?.length ? (
@@ -80,7 +99,7 @@ export function InvestRedeemDrawer({
             </Box>
 
             <TokenPriceChart
-              poolId={poolId}
+              pool={pool}
               trancheId={trancheId}
               dailyPoolStates={dailyPoolStates}
               filter={filter}
@@ -95,22 +114,20 @@ export function InvestRedeemDrawer({
 }
 
 const TokenPriceChart = React.memo(function TokenPriceChart({
-  poolId,
+  pool,
   trancheId,
   dailyPoolStates,
   filter,
   setFilter,
   index,
 }: {
-  poolId: string
+  pool: Pool | TinlakePool
   trancheId: string
   dailyPoolStates: DailyPoolStateProps[]
   filter: FilterOptions
   setFilter: any
   index: number
 }) {
-  const pool = usePool(poolId)
-
   const data = React.useMemo(() => {
     const tokenData =
       dailyPoolStates?.map((state) => {
@@ -134,7 +151,7 @@ const TokenPriceChart = React.memo(function TokenPriceChart({
     return tokenData
   }, [dailyPoolStates, pool?.tranches, trancheId, filter])
 
-  if (!data.length) return
+  if (!data.length || !pool) return
 
   return (
     <PriceChart

diff --git a/centrifuge-app/src/components/PoolCard/index.tsx b/centrifuge-app/src/components/PoolCard/index.tsx
@@ -239,7 +239,7 @@ export function PoolCard({
               </Text>
             </Box>
           ))}
-        <Box display="flex" justifyContent="space-between">
+        <Box display="flex" justifyContent="space-between" mt={1}>
           <Text variant="body2">Asset type</Text>
           <Text variant="body2">{assetClass ?? '-'}</Text>
         </Box>