Merge branch 'main' into fix-pool-creation

centrifuge · Sep 13, 2024 · 1d3c8e7 · 1d3c8e7
2 parents 667d541 + 626f373
commit 1d3c8e7
Show file tree

Hide file tree

Showing 8 changed files with 88 additions and 84 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/LiquidityEpochSection.tsx b/centrifuge-app/src/components/LiquidityEpochSection.tsx
@@ -78,30 +78,29 @@ function EpochStatusOngoing({ pool }: { pool: Pool }) {
 
   const { execute: closeEpochTx, isLoading: loadingClose } = useCentrifugeTransaction(
     'Start order execution',
-    (cent) => (args: [poolId: string, batchSolution: boolean, collect: boolean], options) =>
-      !args[2]
-        ? cent.pools.closeEpoch([args[0], args[1]], options)
-        : cent.pools.closeEpoch([args[0], args[1]], { batch: true }).pipe(
-            switchMap((closeTx) => {
-              const tx = api.tx.utility.batchAll(
-                [
-                  ...closeTx.method.args[0],
-                  orders?.length
-                    ? api.tx.utility.batch(
-                        orders
-                          .slice(0, MAX_COLLECT)
-                          .map((order) =>
-                            api.tx.investments[
-                              order.type === 'invest' ? 'collectInvestmentsFor' : 'collectRedemptionsFor'
-                            ](order.accountId, [pool.id, order.trancheId])
-                          )
+    (cent) => (args: [poolId: string, collect: boolean], options) =>
+      cent.pools.closeEpoch([args[0], false], { batch: true }).pipe(
+        switchMap((closeTx) => {
+          const tx = api.tx.utility.batchAll(
+            [
+              ...closeTx.method.args[0],
+              orders?.length
+                ? api.tx.utility.batch(
+                    orders
+                      .slice(0, MAX_COLLECT)
+                      .map((order) =>
+                        api.tx.investments[order.type === 'invest' ? 'collectInvestmentsFor' : 'collectRedemptionsFor'](
+                          order.accountId,
+                          [pool.id, order.trancheId]
+                        )
                       )
-                    : null,
-                ].filter(Boolean)
-              )
-              return cent.wrapSignAndSend(api, tx, options)
-            })
-          ),
+                  )
+                : null,
+            ].filter(Boolean)
+          )
+          return cent.wrapSignAndSend(api, tx, options)
+        })
+      ),
     {
       onSuccess: () => {
         console.log('Started order execution successfully')
@@ -112,7 +111,7 @@ function EpochStatusOngoing({ pool }: { pool: Pool }) {
   const closeEpoch = async () => {
     if (!pool) return // const batchCloseAndSolution = ordersLocked && !ordersFullyExecutable
     // also collect the first MAX_COLLECT open orders when orders are fully executable
-    closeEpochTx([pool.id, false, ordersFullyExecutable], {
+    closeEpochTx([pool.id, ordersFullyExecutable], {
       account,
       forceProxyType: ['Borrow', 'Invest'],
     })

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: '',
@@ -722,20 +720,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-app/src/pages/NavManagement/NavManagementAssetTable.tsx b/centrifuge-app/src/pages/NavManagement/NavManagementAssetTable.tsx
@@ -195,6 +195,11 @@ export function NavManagementAssetTable({ poolId }: { poolId: string }) {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [initialValues, isEditing, isLoading])
 
+
+  // NOTE: This assumes that pool.reserve.total comes from onchain state AND NOT from the runtime-apis
+  const totalAum = pool.nav.aum.toDecimal().add(pool.reserve.total.toDecimal())
+
+  // NOTE: current pending here in the app does include both pending + disbursed fees
   const pendingFees = React.useMemo(() => {
     return new CurrencyBalance(
       poolFees?.map((f) => f.amounts.pending).reduce((acc, f) => acc.add(f), new BN(0)) ?? new BN(0),
@@ -214,7 +219,6 @@ export function NavManagementAssetTable({ poolId }: { poolId: string }) {
     }, new CurrencyBalance(0, pool.currency.decimals))
   }, [externalLoans, pool?.nav, form.values.feed])
 
-  const totalAum = pool.nav.aum.toDecimal().add(pool.reserve.available.toDecimal())
   const pendingNav = totalAum.add(changeInValuation.toDecimal()).sub(pendingFees.toDecimal())
 
   // Only for single tranche pools
@@ -319,7 +323,13 @@ export function NavManagementAssetTable({ poolId }: { poolId: string }) {
   return (
     <>
       <LayoutSection pt={3}>
-        <NavOverviewCard poolId={pool.id} changeInValuation={changeInValuation.toDecimal().toNumber()} />
+        <NavOverviewCard
+            poolId={pool.id}
+            changeInValuation={changeInValuation.toDecimal().toNumber()}
+            totalAum={totalAum.toNumber()}
+            pendingFees={pendingFees.toDecimal().toNumber()}
+            pendingNav={pendingNav.toNumber()}
+        />
       </LayoutSection>
 
       <Stack pb={8}>
@@ -411,28 +421,18 @@ export function NavManagementAssetTable({ poolId }: { poolId: string }) {
   )
 }
 
-export function NavOverviewCard({ poolId, changeInValuation }: { poolId: string; changeInValuation: number }) {
+export function NavOverviewCard({ poolId, changeInValuation, totalAum, pendingFees, pendingNav }: { poolId: string; changeInValuation: number; totalAum: number; pendingFees: number; pendingNav: number}) {
   const pool = usePool(poolId)
-  const poolFees = usePoolFees(poolId)
   const today = new Date()
   today.setHours(0, 0, 0, 0)
 
-  const pendingFees = React.useMemo(() => {
-    return new CurrencyBalance(
-      poolFees?.map((f) => f.amounts.pending).reduce((acc, f) => acc.add(f), new BN(0)) ?? new BN(0),
-      pool.currency.decimals
-    )
-  }, [poolFees, pool.currency.decimals])
-
-  const totalAum = pool.nav.aum.toDecimal().add(pool.reserve.available.toDecimal())
-
   return (
     <VisualNavCard
       currency={pool.currency}
-      aum={totalAum.toNumber()}
+      aum={totalAum ?? 0}
       change={changeInValuation ?? 0}
-      pendingFees={pendingFees.toFloat()}
-      pendingNav={totalAum.add(changeInValuation).sub(pendingFees.toDecimal()).toNumber()}
+      pendingFees={pendingFees ?? 0}
+      pendingNav={pendingNav ?? 0}
     />
   )
 }

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 = {