Add feedback review

centrifuge · Sep 6, 2024 · 65ab1db · 65ab1db
1 parent b7b824f
commit 65ab1db
Showing 1 changed file with 70 additions and 74 deletions.
diff --git a/centrifuge-app/src/components/PoolCard/index.tsx b/centrifuge-app/src/components/PoolCard/index.tsx
@@ -1,7 +1,6 @@
 import { CurrencyBalance, Rate } from '@centrifuge/centrifuge-js'
 import { Box, Card, Divider, Stack, Text, Thumbnail } from '@centrifuge/fabric'
 import Decimal from 'decimal.js-light'
-import { useNavigate } from 'react-router'
 import styled from 'styled-components'
 import { formatBalance, formatBalanceAbbreviated, formatPercentage } from '../../utils/formatting'
 import { CardHeader } from '../ListItemCardStyles'
@@ -29,11 +28,12 @@ export type MetaData = {
     investorType?: string
   }
 }
+
 export type Tranche = {
   id: string
   currency: {
     name: string
-    decimals: CurrencyBalance | number
+    decimals: number
   }
   interestRatePerSec: {
     toAprPercent: () => Decimal
@@ -72,7 +72,6 @@ export function PoolCard({
   tranches,
   metaData,
 }: PoolCardProps) {
-  const navigate = useNavigate()
   const isOneTranche = tranches && tranches?.length === 1
   const renderText = (text: string) => (
     <Text fontWeight={500} as="h2" variant="body1">
@@ -84,6 +83,10 @@ export function PoolCard({
     const words = tranche.currency.name.trim().split(' ')
     const metadata = metaData?.tranches[tranche.id] ?? null
     const trancheName = words[words.length - 1]
+    const investmentBalance = new CurrencyBalance(
+      metadata?.minInitialInvestment ?? 0,
+      tranche.currency.decimals
+    ).toDecimal()
 
     return {
       name: trancheName,
@@ -94,89 +97,82 @@ export function PoolCard({
           })
         : '-',
       minInvestment:
-        metadata && metadata.minInitialInvestment
-          ? formatBalanceAbbreviated(Number(metadata.minInitialInvestment), '', 0)
-          : '-',
+        metadata && metadata.minInitialInvestment ? formatBalanceAbbreviated(investmentBalance, '', 0) : '-',
     }
   }) as TrancheData[]
 
   return (
-    <Card
-      marginRight={20}
-      marginBottom={20}
-      onClick={() => navigate(`/pools/${poolId}`)}
-      padding={18}
-      style={{ cursor: 'pointer' }}
-      height={320}
-    >
-      <CardHeader marginBottom={12}>
-        <Box>
-          <PoolStatus status={status} />
-          <Text as="h2" fontWeight={500} style={{ marginTop: 4 }} variant="body1">
-            {name}
+    <Card marginRight={20} marginBottom={20} padding={18} height={320}>
+      <RouterTextLink to={`${poolId}`} style={{ textDecoration: 'none' }}>
+        <CardHeader marginBottom={12}>
+          <Box>
+            <PoolStatus status={status} />
+            <Text as="h2" fontWeight={500} style={{ marginTop: 4 }} variant="body1">
+              {name}
+            </Text>
+          </Box>
+          {iconUri ? (
+            <Box as="img" src={iconUri} alt="" height={38} width={38} borderRadius="4px" />
+          ) : (
+            <Thumbnail type="pool" label="LP" size="small" />
+          )}
+        </CardHeader>
+        <Divider />
+        <Box display="flex" justifyContent="space-between" alignItems="center" marginY="8px">
+          <Text as="span" variant="body3" color="textButtonPrimaryDisabled">
+            TVL ({currencySymbol})
           </Text>
+          <Text variant="heading1">{valueLocked ? formatBalance(valueLocked, '') : '-'}</Text>
         </Box>
-        {iconUri ? (
-          <Box as="img" src={iconUri} alt="" height={38} width={38} borderRadius="4px" />
-        ) : (
-          <Thumbnail type="pool" label="LP" size="small" />
-        )}
-      </CardHeader>
-      <Divider />
-      <Box display="flex" justifyContent="space-between" alignItems="center" marginY="8px">
-        <Text as="span" variant="body3" color="textButtonPrimaryDisabled">
-          TVL ({currencySymbol})
-        </Text>
-        <Text variant="heading1">{valueLocked ? formatBalance(valueLocked, '') : '-'}</Text>
-      </Box>
-      <Box
-        bg={isOneTranche ? 'white' : 'backgroundSecondary'}
-        marginY="8px"
-        borderRadius={4}
-        padding={isOneTranche ? 0 : '8px'}
-        display="flex"
-        justifyContent="space-between"
-        width={isOneTranche ? '50%' : '100%'}
-      >
-        {!isOneTranche && (
+        <Box
+          bg={isOneTranche ? 'white' : 'backgroundSecondary'}
+          marginY="8px"
+          borderRadius={4}
+          padding={isOneTranche ? 0 : '8px'}
+          display="flex"
+          justifyContent="space-between"
+          width={isOneTranche ? '50%' : '100%'}
+        >
+          {!isOneTranche && (
+            <Stack>
+              <Text as="span" variant="body3" color="textButtonPrimaryDisabled">
+                Tranches
+              </Text>
+              {tranchesData?.map((tranche) => renderText(tranche.name))}
+              {tranches && tranches.length > 2 ? (
+                <StyledRouterTextLink to={`/pools/${poolId}`}>View all</StyledRouterTextLink>
+              ) : null}
+            </Stack>
+          )}
+          <Stack>
+            <Text as="span" variant="body3" color="textButtonPrimaryDisabled">
+              APY
+            </Text>
+            {tranchesData?.map((tranche) => renderText(`${tranche.apr}`))}
+          </Stack>
           <Stack>
             <Text as="span" variant="body3" color="textButtonPrimaryDisabled">
-              Tranches
+              Min Investment
             </Text>
-            {tranchesData?.map((tranche) => renderText(tranche.name))}
-            {tranches && tranches.length > 2 ? (
-              <StyledRouterTextLink to={`/pools/${poolId}`}>View all</StyledRouterTextLink>
-            ) : null}
+            {tranchesData?.map((tranche) => renderText(`${tranche.minInvestment}`))}
           </Stack>
+        </Box>
+        {metaData?.pool?.issuer?.shortDescription && (
+          <Box marginY={12}>
+            <Text as="p" variant="body2" color="textButtonPrimaryDisabled">
+              {metaData?.pool?.issuer?.shortDescription}
+            </Text>
+          </Box>
         )}
-        <Stack>
-          <Text as="span" variant="body3" color="textButtonPrimaryDisabled">
-            APY
-          </Text>
-          {tranchesData?.map((tranche) => renderText(`${tranche.apr}`))}
-        </Stack>
-        <Stack>
-          <Text as="span" variant="body3" color="textButtonPrimaryDisabled">
-            Min Investment
-          </Text>
-          {tranchesData?.map((tranche) => renderText(`${tranche.minInvestment}`))}
-        </Stack>
-      </Box>
-      {metaData?.pool?.issuer?.shortDescription && (
-        <Box marginY={12}>
-          <Text as="p" variant="body2" color="textButtonPrimaryDisabled">
-            {metaData?.pool?.issuer?.shortDescription}
-          </Text>
+        <Box display="flex" justifyContent="space-between">
+          <Text variant="body2">Asset Type</Text>
+          <Text variant="body2">{assetClass ?? '-'}</Text>
+        </Box>
+        <Box display="flex" justifyContent="space-between">
+          <Text variant="body2">Investor Type</Text>
+          <Text variant="body2"> {metaData?.pool?.investorType || '-'}</Text>
         </Box>
-      )}
-      <Box display="flex" justifyContent="space-between">
-        <Text variant="body2">Asset Type</Text>
-        <Text variant="body2">{assetClass ?? '-'}</Text>
-      </Box>
-      <Box display="flex" justifyContent="space-between">
-        <Text variant="body2">Investor Type</Text>
-        <Text variant="body2"> {metaData?.pool?.investorType || '-'}</Text>
-      </Box>
+      </RouterTextLink>
     </Card>
   )
 }