Skip to content

Commit

Permalink
Add realized unrealized values to invest/redeem drawer
Browse files Browse the repository at this point in the history
  • Loading branch information
kattylucy committed Oct 15, 2024
1 parent 84a31f5 commit 517a559
Show file tree
Hide file tree
Showing 3 changed files with 77 additions and 16 deletions.
63 changes: 54 additions & 9 deletions centrifuge-app/src/components/InvestRedeem/InvestRedeem.tsx
Original file line number Diff line number Diff line change
@@ -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'
Expand Down Expand Up @@ -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')

Expand Down Expand Up @@ -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 />
Expand All @@ -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()
Expand Down Expand Up @@ -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>
Expand All @@ -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"
Expand All @@ -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>
)
}
Expand Down
28 changes: 22 additions & 6 deletions centrifuge-app/src/components/InvestRedeem/InvestRedeemDrawer.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
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 { useDailyPoolStates, usePool } from '../../utils/usePools'
Expand Down Expand Up @@ -31,6 +31,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') {
Expand All @@ -57,10 +58,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])

Check warning on line 76 in centrifuge-app/src/components/InvestRedeem/InvestRedeemDrawer.tsx

View workflow job for this annotation

GitHub Actions / build-app

React Hook React.useMemo has a missing dependency: 'pool.currency.decimals'. Either include it or remove the dependency array

Check warning on line 76 in centrifuge-app/src/components/InvestRedeem/InvestRedeemDrawer.tsx

View workflow job for this annotation

GitHub Actions / ff-prod / build-app

React Hook React.useMemo has a missing dependency: 'pool.currency.decimals'. Either include it or remove the dependency array

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 ? (
Expand Down Expand Up @@ -95,22 +113,20 @@ export function InvestRedeemDrawer({
}

const TokenPriceChart = React.memo(function TokenPriceChart({
poolId,
pool,
trancheId,
dailyPoolStates,
filter,
setFilter,
index,
}: {
poolId: string
pool: Pool
trancheId: string
dailyPoolStates: DailyPoolStateProps[]
filter: FilterOptions
setFilter: any
index: number
}) {
const pool = usePool(poolId)

const data = React.useMemo(() => {
const tokenData =
dailyPoolStates?.map((state) => {
Expand Down
2 changes: 1 addition & 1 deletion centrifuge-app/src/components/PoolCard/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down

0 comments on commit 517a559

Please sign in to comment.