From 5b0b723ba9a750acbb4804a2f238242d66292379 Mon Sep 17 00:00:00 2001
From: katty barroso <kattybarroso1321@gmail.com>
Date: Tue, 12 Nov 2024 14:30:38 +0100
Subject: [PATCH] Add pool structure

---
 centrifuge-app/src/components/Tooltips.tsx    |  12 +
 .../IssuerCreatePool/PoolStructureSection.tsx | 206 ++++++++++++++++--
 .../src/pages/IssuerCreatePool/types.tsx      |  19 +-
 centrifuge-js/src/modules/pools.ts            |  12 +-
 fabric/src/theme/tokens/colors.ts             |   2 +-
 fabric/src/theme/tokens/theme.ts              |   2 +-
 6 files changed, 223 insertions(+), 30 deletions(-)

diff --git a/centrifuge-app/src/components/Tooltips.tsx b/centrifuge-app/src/components/Tooltips.tsx
index 67c170adbe..c7bc13c28b 100644
--- a/centrifuge-app/src/components/Tooltips.tsx
+++ b/centrifuge-app/src/components/Tooltips.tsx
@@ -346,6 +346,18 @@ export const tooltipText = {
     label: 'Total NAV',
     body: 'Total nav minus accrued fees',
   },
+  oneTranche: {
+    label: '',
+    body: 'This pool will only have one investment class where all investors share the same level of risk and return.',
+  },
+  twoTranches: {
+    label: '',
+    body: 'This pool will have two classes. Senior tranche which has priority in receiving returns. And Junior tranche which is the last to receive returns (after Senior tranche obligations are met) but receives higher yield as compensation for the higher risk.',
+  },
+  threeTranches: {
+    label: '',
+    body: 'This pool will have three classes. Senior tranche is the safest tranche with priority in repayment. Mezzanine tranche has intermediate risk and receives payment after Senior tranche obligations are met. Junior tranche which only receives returns after both Senior and Mezzanine tranches are paid.',
+  },
 }
 
 export type TooltipsProps = {
diff --git a/centrifuge-app/src/pages/IssuerCreatePool/PoolStructureSection.tsx b/centrifuge-app/src/pages/IssuerCreatePool/PoolStructureSection.tsx
index 3aa1edf26c..37d67d81ba 100644
--- a/centrifuge-app/src/pages/IssuerCreatePool/PoolStructureSection.tsx
+++ b/centrifuge-app/src/pages/IssuerCreatePool/PoolStructureSection.tsx
@@ -1,8 +1,25 @@
-import { Box, Checkbox, Grid, IconHelpCircle, Text } from '@centrifuge/fabric'
-import { Field, FieldProps } from 'formik'
-import { useTheme } from 'styled-components'
+import { PoolMetadataInput } from '@centrifuge/centrifuge-js'
+import { Box, Checkbox, CurrencyInput, Grid, IconHelpCircle, Select, Text, TextInput } from '@centrifuge/fabric'
+import { Field, FieldProps, useFormikContext } from 'formik'
+import styled, { useTheme } from 'styled-components'
+import { Tooltips, tooltipText } from '../../../src/components/Tooltips'
+import { config } from '../../config'
 import { validate } from './validate'
 
+export const StyledGrid = styled(Grid)`
+  background-color: ${({ theme }) => theme.colors.backgroundSecondary};
+  padding: 40px;
+  border: ${({ theme }) => `1px solid ${theme.colors.borderPrimary}`};
+  border-radius: 8px;
+`
+
+export const StyledBox = styled(StyledGrid)``
+
+const ASSET_CLASSES = Object.keys(config.assetClasses).map((key) => ({
+  label: key,
+  value: key,
+}))
+
 const CheckboxOption = ({
   name,
   label,
@@ -10,6 +27,7 @@ const CheckboxOption = ({
   disabled = false,
   icon,
   sublabel,
+  id,
 }: {
   name: string
   label: string
@@ -17,6 +35,7 @@ const CheckboxOption = ({
   value: string | number
   disabled?: boolean
   icon?: React.ReactNode
+  id?: keyof typeof tooltipText
 }) => {
   const theme = useTheme()
   return (
@@ -47,7 +66,7 @@ const CheckboxOption = ({
           />
         )}
       </Field>
-      {icon && <Box ml={3}>{icon}</Box>}
+      {icon && <Tooltips type={id} label={<Box ml={3}>{icon}</Box>} />}
       {sublabel && (
         <Text variant="body2" color="textSecondary" style={{ marginLeft: 26, lineHeight: 'normal' }}>
           {sublabel}
@@ -59,31 +78,51 @@ const CheckboxOption = ({
 
 export const PoolStructureSection = () => {
   const theme = useTheme()
+  const form = useFormikContext<PoolMetadataInput>()
+  const { values } = form
+
+  console.log(values)
+
+  const subAssetClasses =
+    config.assetClasses[form.values.assetClass]?.map((label) => ({
+      label,
+      value: label,
+    })) ?? []
+
+  const getTrancheName = (index: number) => {
+    switch (index) {
+      case 0:
+        return 'Junior'
+      case 1:
+        return values.tranches.length === 2 ? 'Senior' : 'Mezzanine'
+      case 2:
+        return 'Senior'
+      default:
+        return ''
+    }
+  }
+
+  const handleTrancheNameChange = (e: React.ChangeEvent<HTMLInputElement>, index: number, form: any) => {
+    const newValue = e.target.value
+    const poolName = values.poolName
+    const suffix = newValue.startsWith(poolName) ? newValue.substring(poolName.length).trim() : newValue
+    form.setFieldValue(`tranches.${index}.tokenName`, `${poolName} ${suffix}`)
+  }
 
   return (
     <div>
       <Text variant="heading2" fontWeight={700}>
         Pool Structure
       </Text>
-      <Grid
-        backgroundColor={theme.colors.backgroundSecondary}
-        padding={4}
-        border={`1px solid ${theme.colors.borderPrimary}`}
-        mt={24}
-        borderRadius={8}
-        gridTemplateColumns={['1fr', '1fr 1fr']}
-        gap={3}
-      >
+      <StyledGrid gridTemplateColumns={['1fr', '1fr 1fr']} gap={3} mt={2}>
         <Box>
           <Text variant="body2">Pool type *</Text>
-
           <CheckboxOption
             name="poolStructure"
             label="Revolving pool"
             value="revolving"
             sublabel="Dynamic and flexible pools that allow continuous inflows and outflows of assets. Investors can add or withdraw funds at any time, and the pool remains active indefinitely."
           />
-
           <CheckboxOption
             name="poolStructure"
             label="Static pool (coming soon)"
@@ -92,32 +131,159 @@ export const PoolStructureSection = () => {
             sublabel="Fixed pool of assets where funds remain locked. There are no continuous inflows or outflows during the investment period, and the pool has a defined maturity date."
           />
         </Box>
-
         <Box>
           <Text variant="body2">Define tranche structure *</Text>
-
           <CheckboxOption
             name="trancheStructure"
             label="Single tranche"
+            id="oneTranche"
             value={1}
             icon={<IconHelpCircle size="iconSmall" color={theme.colors.textSecondary} />}
           />
-
           <CheckboxOption
             name="trancheStructure"
             label="Two tranches"
+            id="oneTranche"
             value={2}
             icon={<IconHelpCircle size="iconSmall" color={theme.colors.textSecondary} />}
           />
-
           <CheckboxOption
             name="trancheStructure"
             label="Three tranches"
+            id="oneTranche"
             value={3}
             icon={<IconHelpCircle size="iconSmall" color={theme.colors.textSecondary} />}
           />
         </Box>
-      </Grid>
+      </StyledGrid>
+      <Box mt={4} mb={3}>
+        <Text>Asset setup</Text>
+        <StyledGrid gridTemplateColumns={['1fr', '1fr 1fr']} gap={3} mt={3}>
+          <Box>
+            <Field name="assetClass" validate={validate.assetClass}>
+              {({ field, meta, form }: FieldProps) => (
+                <Select
+                  name="assetClass"
+                  label={
+                    <Tooltips
+                      type="assetClass"
+                      label={<Text variant="heading4">Primary asset class*</Text>}
+                      size="sm"
+                    />
+                  }
+                  onChange={(event) => {
+                    form.setFieldValue('assetClass', event.target.value)
+                    form.setFieldValue('subAssetClass', '', false)
+                  }}
+                  onBlur={field.onBlur}
+                  errorMessage={meta.touched && meta.error ? meta.error : undefined}
+                  value={field.value}
+                  options={ASSET_CLASSES}
+                  placeholder="Please select..."
+                />
+              )}
+            </Field>
+            <Box mt={3}>
+              <Field name="assetDenomination" validate={validate.currency}>
+                {({ field, form, meta }: FieldProps) => {
+                  return (
+                    <Select
+                      name="assetDenomination"
+                      label={<Tooltips type="currency" label={<Text variant="heading4">Asset denomination*</Text>} />}
+                      onChange={(event) => form.setFieldValue('assetDenomination', event.target.value)}
+                      onBlur={field.onBlur}
+                      errorMessage={meta.touched && meta.error ? meta.error : undefined}
+                      value={field.value}
+                      options={[
+                        { value: 'usdc', label: 'USDC' },
+                        { value: 'usdt', label: 'USDT (coming soon)', disabled: true },
+                        { value: 'dai', label: 'DAI (coming soon)', disabled: true },
+                      ]}
+                      placeholder="Select..."
+                    />
+                  )
+                }}
+              </Field>
+            </Box>
+          </Box>
+          <Box>
+            <Field name="subAssetClass" validate={validate.subAssetClass}>
+              {({ field, meta, form }: FieldProps) => (
+                <Select
+                  name="subAssetClass"
+                  label="Secondary asset class"
+                  onChange={(event) => form.setFieldValue('subAssetClass', event.target.value)}
+                  onBlur={field.onBlur}
+                  errorMessage={meta.touched && meta.error ? meta.error : undefined}
+                  value={field.value}
+                  options={subAssetClasses}
+                  placeholder="Select..."
+                />
+              )}
+            </Field>
+          </Box>
+        </StyledGrid>
+      </Box>
+      <Box mt={4} mb={3}>
+        <Text>Tranches</Text>
+        {Array.from({ length: values.trancheStructure }).map((_, index) => (
+          <StyledBox key={index} mt={3}>
+            <Text variant="heading3">Tranche {index + 1}</Text>
+            <Box border={`.5px solid ${theme.colors.borderPrimary}`} width="100%" mt={2} mb={2} />
+            <Grid gridTemplateColumns={['1fr', '1fr 1fr']} gap={3}>
+              <Box>
+                <Field name={`tranches.${index}.tokenName`}>
+                  {({ field, form }: FieldProps) => (
+                    <TextInput
+                      {...field}
+                      label="Token name"
+                      placeholder={getTrancheName(index)}
+                      maxLength={30}
+                      name={`tranches.${index}.tokenName`}
+                      disabled={values.tranches.length === 1}
+                      value={getTrancheName(index)}
+                      onChange={(e: React.ChangeEvent<HTMLInputElement>) => handleTrancheNameChange(e, index, form)}
+                    />
+                  )}
+                </Field>
+                <Box mt={3}>
+                  <Field name={`tranches.${index}.minInvestment`} validate={validate.minInvestment}>
+                    {({ field, form, meta }: FieldProps) => (
+                      <CurrencyInput
+                        {...field}
+                        label={
+                          <Tooltips type="minimumInvestment" label={<Text variant="heading4">Min. investment*</Text>} />
+                        }
+                        placeholder="0.00"
+                        currency={values.currency}
+                        errorMessage={meta.touched ? meta.error : undefined}
+                        onChange={(value) => form.setFieldValue(field.name, value)}
+                        onBlur={() => form.setFieldTouched(field.name, true)}
+                      />
+                    )}
+                  </Field>
+                </Box>
+              </Box>
+              <Box>
+                <Field name={`tranches.${index}.symbolName`} validate={validate.symbolName}>
+                  {({ field, form, meta }: FieldProps) => (
+                    <TextInput
+                      {...field}
+                      onChange={(e) => form.setFieldValue(field.name, e.target.value)}
+                      errorMessage={meta.touched ? meta.error : undefined}
+                      label={<Tooltips type="tokenSymbol" label={<Text variant="heading4">Token symbol*</Text>} />}
+                      placeholder="4-12 characters"
+                      minLength={4}
+                      maxLength={12}
+                      //   disabled={isUpdating}
+                    />
+                  )}
+                </Field>
+              </Box>
+            </Grid>
+          </StyledBox>
+        ))}
+      </Box>
     </div>
   )
 }
diff --git a/centrifuge-app/src/pages/IssuerCreatePool/types.tsx b/centrifuge-app/src/pages/IssuerCreatePool/types.tsx
index e618b262e5..705de6d08c 100644
--- a/centrifuge-app/src/pages/IssuerCreatePool/types.tsx
+++ b/centrifuge-app/src/pages/IssuerCreatePool/types.tsx
@@ -26,6 +26,10 @@ export type CreatePoolValues = Omit<
   PoolMetadataInput,
   'poolIcon' | 'issuerLogo' | 'executiveSummary' | 'adminMultisig' | 'poolFees' | 'poolReport' | 'poolRatings'
 > & {
+  trancheStructure: 1 | 2 | 3
+  poolStructure: string
+  assetDenomination: string
+
   poolIcon: File | null
   issuerLogo: File | null
   executiveSummary: File | null
@@ -54,21 +58,27 @@ export type CreatePoolValues = Omit<
     reportUrl?: string
     reportFile?: File | null
   }[]
-  poolStructure: string
 }
 
 export const initialValues: CreatePoolValues = {
-  poolIcon: null,
-  poolName: '',
+  // pool structure
+  poolStructure: '',
+  trancheStructure: 1,
   assetClass: 'Private credit',
+  assetDenomination: '',
   subAssetClass: '',
+
+  // pool structure -> tranches
+  tranches: [createEmptyTranche('')],
+
+  poolIcon: null,
+  poolName: '',
   currency: isTestEnv ? 'USDC' : 'Native USDC',
   maxReserve: 1000000,
   epochHours: 23, // in hours
   epochMinutes: 50, // in minutes
   listed: !import.meta.env.REACT_APP_DEFAULT_UNLIST_POOLS,
   investorType: '',
-  poolStructure: '',
   issuerName: '',
   issuerRepName: '',
   issuerLogo: null,
@@ -88,7 +98,6 @@ export const initialValues: CreatePoolValues = {
 
   poolRatings: [],
 
-  tranches: [createEmptyTranche('')],
   adminMultisig: {
     signers: [],
     threshold: 1,
diff --git a/centrifuge-js/src/modules/pools.ts b/centrifuge-js/src/modules/pools.ts
index cc995d9d89..df31cf3746 100644
--- a/centrifuge-js/src/modules/pools.ts
+++ b/centrifuge-js/src/modules/pools.ts
@@ -665,18 +665,24 @@ export type PoolReport = {
 }
 
 export interface PoolMetadataInput {
+  // pool structure
+  poolStructure: string
+  trancheStructure: number
+  assetClass: 'Public credit' | 'Private credit'
+  subAssetClass: string
+  assetDenomination: string
+
+  // pool structure -> tranches
+
   // details
   poolIcon: FileType | null
   poolName: string
-  assetClass: 'Public credit' | 'Private credit'
-  subAssetClass: string
   currency: string
   maxReserve: number | ''
   epochHours: number | ''
   epochMinutes: number | ''
   listed?: boolean
   investorType: string
-  poolStructure: string
 
   // issuer
   issuerName: string
diff --git a/fabric/src/theme/tokens/colors.ts b/fabric/src/theme/tokens/colors.ts
index 25548cb8b7..ba4cf42d8a 100644
--- a/fabric/src/theme/tokens/colors.ts
+++ b/fabric/src/theme/tokens/colors.ts
@@ -5,7 +5,7 @@ export const grayScale = {
   10: '#cfcfcf33',
   50: '#F6F6F6',
   100: '#E7E7E7',
-  300: '#6A7280',
+  300: '#CFCFCF',
   500: '#91969B',
   600: '#667085',
   800: '#252B34',
diff --git a/fabric/src/theme/tokens/theme.ts b/fabric/src/theme/tokens/theme.ts
index 73f8be47db..651ea32ba1 100644
--- a/fabric/src/theme/tokens/theme.ts
+++ b/fabric/src/theme/tokens/theme.ts
@@ -17,7 +17,7 @@ const statusPromoteBg = '#f8107114'
 const colors = {
   textPrimary: grayScale[800],
   textSecondary: grayScale[500],
-  textDisabled: grayScale[300],
+  textDisabled: '#6A7280',
   textInverted: 'white',
   textGold: gold,