Fixes based on feedback (#2446)

- Pool card should display 1,2,3,4 depending on screen size - Remove pool min investment field
centrifuge · Sep 12, 2024 · bc5d865 · bc5d865
1 parent ff650de
commit bc5d865
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 44 deletions.
diff --git a/centrifuge-app/src/components/LayoutBase/styles.tsx b/centrifuge-app/src/components/LayoutBase/styles.tsx
@@ -116,13 +116,15 @@ export const WalletPositioner = styled(Shelf)`
 `
 
 export const WalletInner = styled(Stack)`
-  height: ${HEADER_HEIGHT}px;
+  height: 80px;
   justify-content: center;
   pointer-events: auto;
   width: 250px;
+  margin-right: 40px;
 
   @media (min-width: ${({ theme }) => theme.breakpoints[BREAK_POINT_COLUMNS]}) {
     justify-content: flex-end;
+    height: 50px;
   }
 `
 

diff --git a/centrifuge-app/src/components/PoolCard/index.tsx b/centrifuge-app/src/components/PoolCard/index.tsx
@@ -47,6 +47,26 @@ const StyledRouterTextLink = styled(RouterTextLink)`
   margin-top: 8px;
   text-decoration: none;
 `
+const StyledCard = styled(Card)`
+  width: 100%;
+  max-width: 100%;
+  height: 320px;
+  margin-right: 12px;
+  margin-bottom: 12px;
+  padding: 12px;
+
+  &:hover {
+    border: 1px solid ${({ theme }) => theme.colors.backgroundInverted};
+  }
+
+  @media (min-width: ${({ theme }) => theme.breakpoints['M']}) {
+    width: auto;
+  }
+
+  @media (min-width: ${({ theme }) => theme.breakpoints['XL']}) {
+    width: auto;
+  }
+`
 
 export type PoolCardProps = {
   poolId?: string
@@ -102,7 +122,7 @@ export function PoolCard({
   }) as TrancheData[]
 
   return (
-    <Card marginRight={20} marginBottom={20} padding={18} height={320}>
+    <StyledCard>
       <RouterTextLink to={`${poolId}`} style={{ textDecoration: 'none' }}>
         <CardHeader marginBottom={12}>
           <Box>
@@ -114,15 +134,15 @@ export function PoolCard({
           {iconUri ? (
             <Box as="img" src={iconUri} alt="" height={38} width={38} borderRadius="4px" />
           ) : (
-            <Thumbnail type="pool" label="LP" size="small" />
+            <Thumbnail type="pool" label="LP" size="large" />
           )}
         </CardHeader>
         <Divider />
         <Box display="flex" justifyContent="space-between" alignItems="center" marginY="8px">
           <Text as="span" variant="body3" color="textButtonPrimaryDisabled">
-            TVL ({currencySymbol})
+            {currencySymbol && `TVL (${currencySymbol})`}
           </Text>
-          <Text variant="heading1">{valueLocked ? formatBalance(valueLocked, '') : '-'}</Text>
+          <Text variant="heading1">{valueLocked ? formatBalance(valueLocked, '') : ''}</Text>
         </Box>
         <Box
           bg={isOneTranche ? 'white' : 'backgroundSecondary'}
@@ -165,14 +185,14 @@ export function PoolCard({
           </Box>
         )}
         <Box display="flex" justifyContent="space-between">
-          <Text variant="body2">Asset Type</Text>
-          <Text variant="body2">{assetClass ?? '-'}</Text>
+          <Text variant="body2">{assetClass && '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>
+          <Text variant="body2">{metaData?.pool?.investorType && 'Investor Type'}</Text>
+          <Text variant="body2"> {metaData?.pool?.investorType ?? ''}</Text>
         </Box>
       </RouterTextLink>
-    </Card>
+    </StyledCard>
   )
 }
diff --git a/centrifuge-app/src/components/PoolList.tsx b/centrifuge-app/src/components/PoolList.tsx
@@ -31,6 +31,7 @@ export function PoolList() {
   const [listedPools, , metadataIsLoading] = useListedPools()
   const isLarge = useIsAboveBreakpoint('L')
   const isMedium = useIsAboveBreakpoint('M')
+  const isExtraLarge = useIsAboveBreakpoint('XL')
 
   const centPools = listedPools.filter(({ id }) => !id.startsWith('0x')) as Pool[]
   const centPoolsMetaData: PoolMetaDataPartial[] = useMetadataMulti<PoolMetadata>(
@@ -50,7 +51,6 @@ export function PoolList() {
 
     const sortedPools = [...openInvestmentPools, ...upcomingPools, ...tinlakePools]
     return [pools, search ? filterPools([...pools, ...upcomingPools], new URLSearchParams(search)) : sortedPools]
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [listedPools, search])
 
   const archivedPools = pools.filter((pool) => pool?.status?.includes('Archived'))
@@ -69,22 +69,22 @@ export function PoolList() {
     <Stack>
       <Stack>
         <Box overflow="auto">
-          <Box
-            as="ul"
-            role="list"
-            display="grid"
-            gridTemplateColumns={isLarge ? 'repeat(3, 1fr)' : isMedium ? 'repeat(2, 1fr)' : 'repeat(1, 1fr)'}
-          >
+          <Box as="ul" role="list" display="flex" flexWrap="wrap">
             {metadataIsLoading
               ? Array(6)
                   .fill(true)
                   .map((_, index) => (
-                    <Box as="li" key={index}>
+                    <Box as="li" key={index} width={isExtraLarge ? '25%' : isLarge ? '33%' : isMedium ? '48%' : '100%'}>
                       <PoolCard />
                     </Box>
                   ))
               : filteredPools.map((pool) => (
-                  <PoolCardBox as="li" key={pool.poolId} status={pool.status}>
+                  <PoolCardBox
+                    as="li"
+                    key={pool.poolId}
+                    status={pool.status}
+                    width={isExtraLarge ? '25%' : isLarge ? '33%' : isMedium ? '48%' : '100%'}
+                  >
                     <PoolCard {...pool} />
                   </PoolCardBox>
                 ))}
@@ -111,16 +111,17 @@ export function PoolList() {
 function ArchivedPools({ pools }: { pools: PoolCardProps[] }) {
   const isMedium = useIsAboveBreakpoint('M')
   const isLarge = useIsAboveBreakpoint('L')
+  const isExtraLarge = useIsAboveBreakpoint('XL')
   return (
     <Stack gap={1} overflow="auto">
-      <Box
-        as="ul"
-        role="list"
-        display="grid"
-        gridTemplateColumns={isLarge ? 'repeat(3, 1fr)' : isMedium ? 'repeat(2, 1fr)' : 'repeat(1, 1fr)'}
-      >
+      <Box as="ul" role="list" display="flex" flexWrap="wrap">
         {pools.map((pool) => (
-          <PoolCardBox as="li" key={pool.poolId} status={pool.status}>
+          <PoolCardBox
+            as="li"
+            key={pool.poolId}
+            status={pool.status}
+            width={isExtraLarge ? '25%' : isLarge ? '33%' : isMedium ? '48%' : '100%'}
+          >
             <PoolCard {...pool} />
           </PoolCardBox>
         ))}

diff --git a/centrifuge-app/src/pages/IssuerCreatePool/index.tsx b/centrifuge-app/src/pages/IssuerCreatePool/index.tsx
@@ -116,7 +116,6 @@ export type CreatePoolValues = Omit<
   ratingAgency: string
   ratingValue: string
   ratingReport: File | null
-  minPoolInvestment: number
 }
 
 const initialValues: CreatePoolValues = {
@@ -130,7 +129,6 @@ const initialValues: CreatePoolValues = {
   epochMinutes: 50, // in minutes
   listed: !import.meta.env.REACT_APP_DEFAULT_UNLIST_POOLS,
   investorType: '',
-  minPoolInvestment: 0,
 
   issuerName: '',
   issuerRepName: '',
@@ -724,20 +722,6 @@ function CreatePoolForm() {
                   }}
                 </Field>
               </Box>
-              <Box gridColumn="span 2">
-                <Field name="minPoolInvestment" validate={validate.minPoolInvestment}>
-                  {({ field, form }: FieldProps) => (
-                    <CurrencyInput
-                      {...field}
-                      name="minPoolInvestment"
-                      label="Minimum investment amount*"
-                      placeholder="0"
-                      currency={form.values.currency}
-                      onChange={(value) => form.setFieldValue('minPoolInvestment', value)}
-                    />
-                  )}
-                </Field>
-              </Box>
               <Box gridColumn="span 2">
                 <Field name="maxReserve" validate={validate.maxReserve}>
                   {({ field, form }: FieldProps) => (

diff --git a/centrifuge-app/src/pages/IssuerCreatePool/validate.ts b/centrifuge-app/src/pages/IssuerCreatePool/validate.ts
@@ -31,7 +31,6 @@ export const validate = {
   maxReserve: combine(required(), nonNegativeNumber(), max(Number.MAX_SAFE_INTEGER)),
   poolType: required(),
   investorType: required(),
-  minPoolInvestment: required(),
 
   epochHours: combine(required(), nonNegativeNumber(), integer(), max(24 * 7 /* 1 week */)),
   epochMinutes: combine(required(), nonNegativeNumber(), integer(), max(59)),

diff --git a/centrifuge-js/src/modules/pools.ts b/centrifuge-js/src/modules/pools.ts
@@ -645,7 +645,6 @@ interface TrancheFormValues {
   interestRate: number | ''
   minRiskBuffer: number | ''
   minInvestment: number | ''
-  targetAPY: number | ''
 }
 
 export type IssuerDetail = {