add unrealizedpl column

centrifuge · Oct 18, 2023 · 823bc08 · 823bc08
1 parent 3938b22
commit 823bc08
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 38 deletions.
diff --git a/centrifuge-app/src/components/Portfolio/InvestedTokens.tsx b/centrifuge-app/src/components/Portfolio/InvestedTokens.tsx
@@ -9,9 +9,9 @@ import { SortButton } from '../SortButton'
 import { sortTokens } from './sortTokens'
 import { TokenListItem } from './TokenListItem'
 
-export const COLUMN_GAPS = '250px 180px 150px 180px'
+export const COLUMN_GAPS = '250px 180px 150px 180px 180px'
 
-export const InvestedTokens = () => {
+export const InvestedTokens = ({ canInvestRedeem = true }) => {
   const { search } = useLocation()
 
   const address = useAddress()
@@ -43,7 +43,7 @@ export const InvestedTokens = () => {
   return sortedTokens.length ? (
     <Stack as="article" gap={2}>
       <Text as="h2" variant="heading2">
-        Portfolio composition
+        Portfolio
       </Text>
 
       <Box overflow="auto">
@@ -59,11 +59,13 @@ export const InvestedTokens = () => {
           </Text>
 
           <SortButton label="Market Value" searchKey="market-value" justifySelf="start" />
+
+          <SortButton label="Unrealized P&L" searchKey="unrealized-pl" justifySelf="start" />
         </Grid>
 
         <Stack as="ul" role="list" gap={1} py={1}>
           {balances.map((balance, index) => (
-            <TokenListItem key={index} {...balance} />
+            <TokenListItem key={index} canInvestRedeem={canInvestRedeem} {...balance} />
           ))}
         </Stack>
       </Box>

diff --git a/centrifuge-app/src/components/Portfolio/TokenListItem.tsx b/centrifuge-app/src/components/Portfolio/TokenListItem.tsx
@@ -18,13 +18,15 @@ import { Eththumbnail } from '../EthThumbnail'
 import { Root } from '../ListItemCardStyles'
 import { COLUMN_GAPS } from './InvestedTokens'
 
-export type TokenCardProps = AccountTokenBalance
+export type TokenCardProps = AccountTokenBalance & {
+  canInvestRedeem?: boolean
+}
 
 const TokenName = styled(Text)`
   text-wrap: nowrap;
 `
 
-export function TokenListItem({ balance, currency, poolId, trancheId }: TokenCardProps) {
+export function TokenListItem({ balance, currency, poolId, trancheId, canInvestRedeem }: TokenCardProps) {
   const { sizes } = useTheme()
   const pool = usePool(poolId, false)
   const { data: metadata } = usePoolMetadata(pool)
@@ -36,7 +38,7 @@ export function TokenListItem({ balance, currency, poolId, trancheId }: TokenCar
   const icon = metadata?.pool?.icon?.uri ? cent.metadata.parseMetadataUrl(metadata.pool.icon.uri) : null
 
   return (
-    <Root as="article" minWidth="1060px">
+    <Root as="article" minWidth="1280px">
       <Grid gridTemplateColumns={`${COLUMN_GAPS} 1fr`} gap={3} p={2} alignItems="center">
         <Grid as="header" gridTemplateColumns={`${sizes.iconMedium}px 1fr`} alignItems="center" gap={2}>
           <Eththumbnail show={isTinlakePool}>
@@ -68,27 +70,34 @@ export function TokenListItem({ balance, currency, poolId, trancheId }: TokenCar
             : '-'}
         </Text>
 
-        <Shelf gap={2} justifySelf="end">
-          {isTinlakePool ? (
-            <AnchorButton
-              variant="tertiary"
-              icon={IconExternalLink}
-              href="https://legacy.tinlake.centrifuge.io/portfolio"
-              target="_blank"
-            >
-              View on Tinlake
-            </AnchorButton>
-          ) : (
-            <>
-              <Button variant="tertiary" icon={IconMinus}>
-                Redeem
-              </Button>
-              <Button variant="tertiary" icon={IconPlus}>
-                Invest
-              </Button>
-            </>
-          )}
-        </Shelf>
+        <Text textOverflow="ellipsis" variant="body2">
+          {/* TODO: calculate unrealized p&l */}
+          {trancheInfo?.tokenPrice?.toDecimal().mul(100000).toDecimalPlaces(0).toString()}
+        </Text>
+
+        {canInvestRedeem && (
+          <Shelf gap={2} justifySelf="end">
+            {isTinlakePool ? (
+              <AnchorButton
+                variant="tertiary"
+                icon={IconExternalLink}
+                href="https://legacy.tinlake.centrifuge.io/portfolio"
+                target="_blank"
+              >
+                View on Tinlake
+              </AnchorButton>
+            ) : (
+              <>
+                <Button variant="tertiary" icon={IconMinus}>
+                  Redeem
+                </Button>
+                <Button variant="tertiary" icon={IconPlus}>
+                  Invest
+                </Button>
+              </>
+            )}
+          </Shelf>
+        )}
       </Grid>
     </Root>
   )

diff --git a/centrifuge-app/src/components/Portfolio/sortTokens.ts b/centrifuge-app/src/components/Portfolio/sortTokens.ts
@@ -3,7 +3,7 @@ import { TinlakePool } from '../../utils/tinlake/useTinlakePools'
 import { TokenCardProps } from './TokenListItem'
 
 export const sortTokens = (
-  tranches: TokenCardProps[],
+  tokens: TokenCardProps[],
   pools: {
     centPools: Pool[]
     tinlakePools: TinlakePool[]
@@ -14,37 +14,63 @@ export const sortTokens = (
   const sortBy = searchParams.get('sort-by')
 
   if (sortBy === 'market-value') {
-    tranches.sort((trancheA, trancheB) => {
+    tokens.sort((trancheA, trancheB) => {
       const valueA = sortMarketValue(trancheA, pools)
       const valueB = sortMarketValue(trancheB, pools)
 
       return sortDirection === 'asc' ? valueA - valueB : valueB - valueA
     })
   }
 
+  if (sortBy === 'unrealized-pl') {
+    tokens.sort((tokenA, tokenB) => {
+      const valueA = sortUnrealizedPL(tokenA, pools)
+      const valueB = sortUnrealizedPL(tokenB, pools)
+
+      return sortDirection === 'asc' ? valueA - valueB : valueB - valueA
+    })
+  }
+
   if (sortBy === 'position' || (!sortDirection && !sortBy)) {
-    tranches.sort(({ balance: balanceA }, { balance: balanceB }) =>
+    tokens.sort(({ balance: balanceA }, { balance: balanceB }) =>
       sortDirection === 'asc'
         ? balanceA.toDecimal().toNumber() - balanceB.toDecimal().toNumber()
         : balanceB.toDecimal().toNumber() - balanceA.toDecimal().toNumber()
     )
   }
 
-  return tranches
+  return tokens
 }
 
 const sortMarketValue = (
-  tranche: TokenCardProps,
+  token: TokenCardProps,
+  pools: {
+    centPools: Pool[]
+    tinlakePools: TinlakePool[]
+  }
+) => {
+  const pool = token.poolId.startsWith('0x')
+    ? pools.tinlakePools?.find((p) => p.id.toLowerCase() === token.poolId.toLowerCase())
+    : pools.centPools?.find((p) => p.id === token.poolId)
+
+  const poolTranche = pool?.tranches.find(({ id }) => id === token.trancheId)
+
+  return poolTranche?.tokenPrice ? token.balance.toDecimal().mul(poolTranche.tokenPrice.toDecimal()).toNumber() : 0
+}
+
+const sortUnrealizedPL = (
+  token: TokenCardProps,
   pools: {
     centPools: Pool[]
     tinlakePools: TinlakePool[]
   }
 ) => {
-  const pool = tranche.poolId.startsWith('0x')
-    ? pools.tinlakePools?.find((p) => p.id.toLowerCase() === tranche.poolId.toLowerCase())
-    : pools.centPools?.find((p) => p.id === tranche.poolId)
+  /* TODO: calculate unrealized p&l */
+  const pool = token.poolId.startsWith('0x')
+    ? pools.tinlakePools?.find((p) => p.id.toLowerCase() === token.poolId.toLowerCase())
+    : pools.centPools?.find((p) => p.id === token.poolId)
 
-  const poolTranche = pool?.tranches.find(({ id }) => id === tranche.trancheId)
+  const poolTranche = pool?.tranches.find(({ id }) => id === token.trancheId)
 
-  return poolTranche?.tokenPrice ? tranche.balance.toDecimal().mul(poolTranche.tokenPrice.toDecimal()).toNumber() : 0
+  return poolTranche?.tokenPrice ? poolTranche.tokenPrice.toDecimal().mul(100000).toDecimalPlaces(0).toNumber() : 0
 }