From dfbd6ae2845c5b33dec4d161ffbe9c35827e169d Mon Sep 17 00:00:00 2001
From: Katty Barroso <51223655+kattylucy@users.noreply.github.com>
Date: Wed, 27 Nov 2024 16:29:31 +0100
Subject: [PATCH] Pool structure - create pool (#2543)

* Add pool structure UI changes

* Small UI fix

* Avoid deletion on entries if less than one

* Add logic to single / multi sign

* Fix linter errors
---
 .../src/components/PoolCard/index.tsx         |   2 +-
 .../PoolOverview/TrancheTokenCards.tsx        |   7 +-
 centrifuge-app/src/components/Tooltips.tsx    |  20 +
 .../IssuerCreatePool/IssuerCategories.tsx     |  17 +-
 .../IssuerCreatePool/PoolDetailsSection.tsx   |   2 -
 .../IssuerCreatePool/PoolSetupSection.tsx     | 345 ++++++++++--------
 .../IssuerCreatePool/PoolStructureSection.tsx |   7 +-
 .../src/pages/IssuerCreatePool/index.tsx      |   2 +-
 .../src/pages/IssuerCreatePool/oldindex.tsx   |   5 +
 .../src/pages/IssuerCreatePool/types.ts       |   3 +-
 .../IssuerPool/Access/AssetOriginators.tsx    |   1 +
 .../src/pages/Pool/Assets/index.tsx           |   4 +-
 centrifuge-js/src/modules/pools.ts            |   8 +-
 13 files changed, 253 insertions(+), 170 deletions(-)

diff --git a/centrifuge-app/src/components/PoolCard/index.tsx b/centrifuge-app/src/components/PoolCard/index.tsx
index 82b4109a3b..a68974abc1 100644
--- a/centrifuge-app/src/components/PoolCard/index.tsx
+++ b/centrifuge-app/src/components/PoolCard/index.tsx
@@ -199,7 +199,7 @@ export function PoolCard({
         }
       })
       .reverse()
-  }, [isTinlakePool, metaData?.tranches, tinlakeKey, tranches])
+  }, [isTinlakePool, metaData?.tranches, tinlakeKey, tranches, createdAt, poolId])
 
   return (
     <RouterTextLink to={`${poolId}`} style={{ textDecoration: 'none' }}>
diff --git a/centrifuge-app/src/components/PoolOverview/TrancheTokenCards.tsx b/centrifuge-app/src/components/PoolOverview/TrancheTokenCards.tsx
index be41ed4ab6..927b584c4c 100644
--- a/centrifuge-app/src/components/PoolOverview/TrancheTokenCards.tsx
+++ b/centrifuge-app/src/components/PoolOverview/TrancheTokenCards.tsx
@@ -42,9 +42,6 @@ export const TrancheTokenCards = ({
     return 'mezzanine'
   }
 
-  const getTarget = (tranche: Token) =>
-    (isTinlakePool && tranche.seniority === 0) || poolId === DYF_POOL_ID || poolId === NS3_POOL_ID
-
   const columns = useMemo(() => {
     return [
       {
@@ -121,6 +118,8 @@ export const TrancheTokenCards = ({
   }, [pool.tranches, metadata, poolId, pool?.currency.symbol])
 
   const dataTable = useMemo(() => {
+    const getTarget = (tranche: Token) =>
+      (isTinlakePool && tranche.seniority === 0) || poolId === DYF_POOL_ID || poolId === NS3_POOL_ID
     return trancheTokens.map((tranche) => {
       const calculateApy = (trancheToken: Token) => {
         if (isTinlakePool && getTrancheText(trancheToken) === 'senior') return formatPercentage(trancheToken.apy)
@@ -145,7 +144,7 @@ export const TrancheTokenCards = ({
         isTarget: getTarget(tranche),
       }
     })
-  }, [trancheTokens, getTarget])
+  }, [trancheTokens, daysSinceCreation, isTinlakePool, poolId])
 
   return (
     <Shelf gap={3}>
diff --git a/centrifuge-app/src/components/Tooltips.tsx b/centrifuge-app/src/components/Tooltips.tsx
index c7bc13c28b..0bca55ddcf 100644
--- a/centrifuge-app/src/components/Tooltips.tsx
+++ b/centrifuge-app/src/components/Tooltips.tsx
@@ -358,6 +358,26 @@ export const tooltipText = {
     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.',
   },
+  singleMultisign: {
+    label: '',
+    body: 'Setup a wallet where only one private key is required to authorise changes to the pool configuration.',
+  },
+  multiMultisign: {
+    label: '',
+    body: 'Setup a wallet that requires multiple private keys to authorise changes to the pool configuration.',
+  },
+  centrifugeOnboarding: {
+    label: '',
+    body: 'Investors will go through the Centrifuge onboarding provider, Shuftipro, before they can invest in your pool.',
+  },
+  externalOnboarding: {
+    label: '',
+    body: 'You can select the provider you want to KYC/onboard your investors.',
+  },
+  noneOnboarding: {
+    label: '',
+    body: 'You can directly whitelist the addresses that can invest in the pool.',
+  },
 }
 
 export type TooltipsProps = {
diff --git a/centrifuge-app/src/pages/IssuerCreatePool/IssuerCategories.tsx b/centrifuge-app/src/pages/IssuerCreatePool/IssuerCategories.tsx
index 09b981e850..4d70a2f345 100644
--- a/centrifuge-app/src/pages/IssuerCreatePool/IssuerCategories.tsx
+++ b/centrifuge-app/src/pages/IssuerCreatePool/IssuerCategories.tsx
@@ -16,13 +16,15 @@ const PROVIDERS = [
   { label: 'Other', value: 'other' },
 ]
 
-const LabelWithDeleteButton = ({ onDelete }: { onDelete: () => void }) => {
+const LabelWithDeleteButton = ({ onDelete, hideButton }: { onDelete: () => void; hideButton: boolean }) => {
   return (
     <Box display="flex" justifyContent="space-between" alignItems="center">
       <Text variant="heading4">Name of provider</Text>
-      <IconButton onClick={onDelete}>
-        <IconTrash color="textSecondary" />
-      </IconButton>
+      {!hideButton && (
+        <IconButton onClick={onDelete}>
+          <IconTrash color="textSecondary" />
+        </IconButton>
+      )}
     </Box>
   )
 }
@@ -56,7 +58,12 @@ export const IssuerCategoriesSection = () => {
                     {({ field, meta }: FieldProps) => (
                       <TextInput
                         {...field}
-                        label={<LabelWithDeleteButton onDelete={() => remove(index)} />}
+                        label={
+                          <LabelWithDeleteButton
+                            onDelete={() => remove(index)}
+                            hideButton={form.values.issuerCategories.length === 1}
+                          />
+                        }
                         placeholder="Type here..."
                         maxLength={100}
                       />
diff --git a/centrifuge-app/src/pages/IssuerCreatePool/PoolDetailsSection.tsx b/centrifuge-app/src/pages/IssuerCreatePool/PoolDetailsSection.tsx
index 7975d4fa94..97178d4d75 100644
--- a/centrifuge-app/src/pages/IssuerCreatePool/PoolDetailsSection.tsx
+++ b/centrifuge-app/src/pages/IssuerCreatePool/PoolDetailsSection.tsx
@@ -11,7 +11,6 @@ import {
   TextInput,
 } from '@centrifuge/fabric'
 import { Field, FieldProps, useFormikContext } from 'formik'
-import { useTheme } from 'styled-components'
 import { FieldWithErrorMessage } from '../../../src/components/FieldWithErrorMessage'
 import { Tooltips } from '../../../src/components/Tooltips'
 import { isTestEnv } from '../../../src/config'
@@ -27,7 +26,6 @@ export const AddButton = ({ onClick }: { onClick: () => void }) => (
 )
 
 export const PoolDetailsSection = () => {
-  const theme = useTheme()
   const form = useFormikContext<PoolMetadataInput>()
   const createLabel = (label: string) => `${label}${isTestEnv ? '' : '*'}`
 
diff --git a/centrifuge-app/src/pages/IssuerCreatePool/PoolSetupSection.tsx b/centrifuge-app/src/pages/IssuerCreatePool/PoolSetupSection.tsx
index 92dd2f95fe..b3bfede001 100644
--- a/centrifuge-app/src/pages/IssuerCreatePool/PoolSetupSection.tsx
+++ b/centrifuge-app/src/pages/IssuerCreatePool/PoolSetupSection.tsx
@@ -1,7 +1,6 @@
 import { PoolMetadataInput } from '@centrifuge/centrifuge-js'
 import {
   Box,
-  Button,
   Checkbox,
   FileUpload,
   Grid,
@@ -14,16 +13,14 @@ import {
   Text,
   TextInput,
 } from '@centrifuge/fabric'
-import { Field, FieldProps, useFormikContext } from 'formik'
+import { Field, FieldArray, FieldProps, useFormikContext } from 'formik'
 import { useTheme } from 'styled-components'
 import { FieldWithErrorMessage } from '../../../src/components/FieldWithErrorMessage'
 import { Tooltips } from '../../../src/components/Tooltips'
-import { feeCategories, isTestEnv } from '../../../src/config'
+import { feeCategories } from '../../../src/config'
 import { AddButton } from './PoolDetailsSection'
 import { CheckboxOption, Line, StyledGrid } from './PoolStructureSection'
 
-const MAX_FEES = 5
-
 const FEE_TYPES = [
   { label: 'Direct charge', value: 'chargedUpTo' },
   { label: 'Fixed %', value: 'fixed' },
@@ -35,18 +32,12 @@ export const PoolSetupSection = () => {
   const theme = useTheme()
   const form = useFormikContext<PoolMetadataInput>()
   const { values } = form
-  const createLabel = (label: string) => `${label}${isTestEnv ? '' : '*'}`
 
   return (
     <Box>
-      <Box display="flex" justifyContent="space-between" alignItems="center">
-        <Text variant="heading2" fontWeight={700}>
-          Management setup
-        </Text>
-        <Button small style={{ width: 163 }}>
-          Disable
-        </Button>
-      </Box>
+      <Text variant="heading2" fontWeight={700}>
+        Management setup
+      </Text>
 
       <Box mt={4} mb={3}>
         <Text variant="heading2">Pool managers*</Text>
@@ -57,29 +48,57 @@ export const PoolSetupSection = () => {
           <Box>
             <Text variant="body2">Security requirement</Text>
             <CheckboxOption
-              height={44}
-              name="securityRequirement"
+              height={40}
+              name="adminMultisigEnabled"
               label="Single"
-              value="single"
+              value={false}
+              id="singleMultisign"
               icon={<IconHelpCircle size="iconSmall" color={theme.colors.textSecondary} />}
             />
             <CheckboxOption
-              height={44}
-              name="securityRequirement"
+              height={40}
+              name="adminMultisigEnabled"
               label="Multi-sig"
-              value="multi"
+              value={true}
+              id="multiMultisign"
               icon={<IconHelpCircle size="iconSmall" color={theme.colors.textSecondary} />}
             />
           </Box>
-          <Grid gap={2}>
+          <Box>
             <Text variant="body2">Wallet addresses</Text>
-            <Field name="walletAddress">
-              {({ field, form }: FieldProps) => <TextInput placeholder="Type here..." {...field} />}
-            </Field>
-            <Field name="walletAddress">
-              {({ field, form }: FieldProps) => <TextInput placeholder="Type here..." {...field} />}
-            </Field>
-          </Grid>
+            <FieldArray name="adminMultisig.signers">
+              {({ push }) => (
+                <>
+                  {values.adminMultisigEnabled ? (
+                    values.adminMultisig?.signers?.map((_, index) => (
+                      <Box key={index} mt={2}>
+                        <Field name={`adminMultisig.signers.${index}`}>
+                          {({ field }: FieldProps) => <TextInput placeholder="Type here..." {...field} />}
+                        </Field>
+                      </Box>
+                    ))
+                  ) : (
+                    <Box mt={2}>
+                      <Field name={`adminMultisig.signers.0`}>
+                        {({ field }: FieldProps) => <TextInput placeholder="Type here..." {...field} />}
+                      </Field>
+                    </Box>
+                  )}
+                  {values.adminMultisigEnabled && (
+                    <Box display="flex" justifyContent="flex-end" mt={2}>
+                      <AddButton
+                        onClick={() => {
+                          if (form.values.adminMultisig && form.values.adminMultisig.signers?.length <= 10) {
+                            push('')
+                          }
+                        }}
+                      />
+                    </Box>
+                  )}
+                </>
+              )}
+            </FieldArray>
+          </Box>
         </StyledGrid>
       </Box>
       <Box mt={2} mb={2}>
@@ -88,12 +107,18 @@ export const PoolSetupSection = () => {
             {({ field, meta, form }: FieldProps) => (
               <Select
                 name="subAssetClass"
-                label="Configuration change threshold (1 out of 2 managers)"
+                label={`Configuration change threshold (1 out of ${Math.max(
+                  values?.adminMultisig?.signers?.length ?? 0,
+                  1
+                )} managers)`}
                 onChange={(event) => form.setFieldValue('subAssetClass', event.target.value)}
                 onBlur={field.onBlur}
                 errorMessage={meta.touched && meta.error ? meta.error : undefined}
                 value={field.value}
-                options={[{ value: '1', label: 1 }]}
+                options={form.values.adminMultisig.signers.map((_: string, i: number) => ({
+                  label: i + 1,
+                  value: i + 1,
+                }))}
                 placeholder="Select..."
               />
             )}
@@ -109,25 +134,35 @@ export const PoolSetupSection = () => {
       </Box>
 
       <Box mt={4} mb={3}>
-        <Text variant="heading2">Pool delegates</Text>
-        <Text variant="body2" color="textSecondary">
-          Pool managers can authorize additional addresses to perform designated pool actions.
-        </Text>
-        <StyledGrid gridTemplateColumns={['1fr', '1fr 1fr']} gap={3} mt={3}>
-          <Grid>
-            <Text color="textSecondary" variant="body3">
-              Add or remove addresses that can:
-            </Text>
-            <Field name="walletAddress">
-              {({ field, form }: FieldProps) => (
-                <TextInput label="Originate assets and invest in the pool*" placeholder="Type address..." {...field} />
-              )}
-            </Field>
-          </Grid>
-          <Box display="flex" alignItems="flex-end" justifyContent="flex-end">
-            <AddButton />
-          </Box>
-        </StyledGrid>
+        <FieldArray name="assetOriginators">
+          {({ push }) => (
+            <StyledGrid gridTemplateColumns={['3fr 1fr']} gap={2}>
+              <Box gridColumn="1 / span 1">
+                <Text color="textSecondary" variant="body3">
+                  Add or remove addresses that can:
+                </Text>
+                <Text variant="heading2">Originate assets and invest in the pool*</Text>
+                {form.values.assetOriginators?.map((_: string, index: number) => (
+                  <Box key={index} mt={2}>
+                    <Field name={`assetOriginators.${index}`}>
+                      {({ field }: FieldProps) => <TextInput placeholder="Type address..." {...field} />}
+                    </Field>
+                  </Box>
+                ))}
+              </Box>
+
+              <Box gridColumn="2 / span 1" alignSelf="end">
+                <AddButton
+                  onClick={() => {
+                    if (form.values.adminMultisig && form.values.adminMultisig.signers?.length <= 10) {
+                      push('')
+                    }
+                  }}
+                />
+              </Box>
+            </StyledGrid>
+          )}
+        </FieldArray>
       </Box>
 
       <Box mt={4} mb={3}>
@@ -169,94 +204,95 @@ export const PoolSetupSection = () => {
         </StyledGrid>
       </Box>
 
-      {values.poolFees.map((s, index) => (
-        <Box mt={4} mb={3}>
-          <StyledGrid mt={3} gap={1}>
-            <Box display="flex" justifyContent="space-between" alignItems="center">
-              <Text variant="heading3">Pool fees {index + 1}</Text>
-              <IconButton>
-                <IconTrash color="textSecondary" />
-              </IconButton>
-            </Box>
-            <Line />
-            <Grid gridTemplateColumns={['1fr', '1fr 1fr']} gap={3}>
-              <FieldWithErrorMessage
-                as={TextInput}
-                label="Name"
-                maxLength={30}
-                name={`poolFees.${index}.name`}
-                key={index}
-                placeholder="Type here..."
-              />
-              <Field name={`poolFees.${index}.category`}>
-                {({ field, form, meta }: FieldProps) => (
-                  <Select
-                    name="category"
-                    label="Category"
-                    onChange={(event) => form.setFieldValue(`poolFees.${index}.category`, event.target.value)}
-                    onBlur={field.onBlur}
-                    errorMessage={meta.touched && meta.error ? meta.error : undefined}
-                    value={field.value}
-                    options={feeCategories.map((cat) => ({ label: cat, value: cat }))}
-                  />
-                )}
-              </Field>
-              <Field name={`poolFees.${index}.feePosition`}>
-                {({ field, meta }: FieldProps) => {
-                  return (
-                    <Select
-                      label="Fee position"
-                      name={`poolFees.${index}.feePosition`}
-                      onChange={(event) => {
-                        form.setFieldValue(`poolFees.${index}.feePosition`, event.target.value)
-                      }}
-                      onBlur={field.onBlur}
-                      errorMessage={meta.touched && meta.error ? meta.error : undefined}
-                      value={field.value}
-                      options={FEE_POSISTIONS}
+      <FieldArray name="poolFees">
+        {({ push, remove }) => (
+          <>
+            {form.values.poolFees.map((_, index) => (
+              <Box mt={4} mb={3} key={index}>
+                <StyledGrid mt={3} gap={1}>
+                  <Box display="flex" justifyContent="space-between" alignItems="center">
+                    <Text variant="heading3">Pool fees {index + 1}</Text>
+                    {form.values.poolFees.length > 1 && (
+                      <IconButton onClick={() => remove(index)}>
+                        <IconTrash color="textSecondary" />
+                      </IconButton>
+                    )}
+                  </Box>
+                  <Line />
+                  <Grid gridTemplateColumns={['1fr', '1fr 1fr']} gap={3}>
+                    <FieldWithErrorMessage
+                      as={TextInput}
+                      label="Name"
+                      maxLength={30}
+                      name={`poolFees.${index}.name`}
+                      placeholder="Type here..."
                     />
-                  )
-                }}
-              </Field>
-
-              <Field name={`poolFees.${index}.feeType`}>
-                {({ field, meta }: FieldProps) => {
-                  return (
-                    <Select
-                      label="Fee type"
-                      name={`poolFees.${index}.feeType`}
-                      onChange={(event) => {
-                        form.setFieldValue(`poolFees.${index}.feeType`, event.target.value)
-                      }}
-                      onBlur={field.onBlur}
-                      errorMessage={meta.touched && meta.error ? meta.error : undefined}
-                      value={field.value}
-                      options={FEE_TYPES}
+                    <Field name={`poolFees.${index}.category`}>
+                      {({ field, meta }: FieldProps) => (
+                        <Select
+                          name="category"
+                          label="Category"
+                          onChange={(event) => form.setFieldValue(`poolFees.${index}.category`, event.target.value)}
+                          onBlur={field.onBlur}
+                          errorMessage={meta.touched && meta.error ? meta.error : undefined}
+                          value={field.value}
+                          options={feeCategories.map((cat) => ({ label: cat, value: cat }))}
+                        />
+                      )}
+                    </Field>
+                    <Field name={`poolFees.${index}.feePosition`}>
+                      {({ field, meta }: FieldProps) => (
+                        <Select
+                          label="Fee position"
+                          name={`poolFees.${index}.feePosition`}
+                          onChange={(event) => form.setFieldValue(`poolFees.${index}.feePosition`, event.target.value)}
+                          onBlur={field.onBlur}
+                          errorMessage={meta.touched && meta.error ? meta.error : undefined}
+                          value={field.value}
+                          options={FEE_POSISTIONS}
+                        />
+                      )}
+                    </Field>
+                    <Field name={`poolFees.${index}.feeType`}>
+                      {({ field, meta }: FieldProps) => (
+                        <Select
+                          label="Fee type"
+                          name={`poolFees.${index}.feeType`}
+                          onChange={(event) => form.setFieldValue(`poolFees.${index}.feeType`, event.target.value)}
+                          onBlur={field.onBlur}
+                          errorMessage={meta.touched && meta.error ? meta.error : undefined}
+                          value={field.value}
+                          options={FEE_TYPES}
+                        />
+                      )}
+                    </Field>
+                    <FieldWithErrorMessage
+                      as={NumberInput}
+                      label="Max fees in % of NAV"
+                      symbol="%"
+                      name={`poolFees.${index}.percentOfNav`}
+                      placeholder="Type here..."
                     />
-                  )
-                }}
-              </Field>
-              <FieldWithErrorMessage
-                as={NumberInput}
-                label="Max fees in % of NAV"
-                symbol="%"
-                name={`poolFees.${index}.percentOfNav`}
-                placeholder="Type here..."
-              />
-              <FieldWithErrorMessage
-                as={TextInput}
-                label="Wallet address"
-                name={`poolFees.${index}.walletAddress`}
-                placeholder="Type here..."
+                    <FieldWithErrorMessage
+                      as={TextInput}
+                      label="Wallet address"
+                      name={`poolFees.${index}.walletAddress`}
+                      placeholder="Type here..."
+                    />
+                  </Grid>
+                </StyledGrid>
+              </Box>
+            ))}
+            <Box display="flex" justifyContent="flex-end" mt={2}>
+              <AddButton
+                onClick={() =>
+                  push({ name: '', category: '', feePosition: '', feeType: '', percentOfNav: '', walletAddress: '' })
+                }
               />
-            </Grid>
-          </StyledGrid>
-        </Box>
-      ))}
-
-      <Box alignSelf="flex-end" mt={3} mb={3} display="flex" justifyContent="flex-end">
-        <AddButton />
-      </Box>
+            </Box>
+          </>
+        )}
+      </FieldArray>
 
       <Box mt={4} mb={3}>
         <Text variant="heading2">Investor onboarding</Text>
@@ -265,46 +301,55 @@ export const PoolSetupSection = () => {
             <Text variant="heading4">Onboarding experience</Text>
             <CheckboxOption
               height={44}
-              name="centrifuge"
+              name="onboardingExperience"
               label="Centrifuge onboarding"
               value="centrifuge"
+              id="centrifugeOnboarding"
               icon={<IconHelpCircle size="iconSmall" color={theme.colors.textSecondary} />}
+              styles={{ marginTop: 1 }}
             />
             <CheckboxOption
               height={44}
-              name="external"
+              name="onboardingExperience"
               label="External"
               value="external"
+              id="externalOnboarding"
               icon={<IconHelpCircle size="iconSmall" color={theme.colors.textSecondary} />}
             />
             <CheckboxOption
               height={44}
-              name="none"
+              name="onboardingExperience"
               label="None"
               value="none"
+              id="noneOnboarding"
               icon={<IconHelpCircle size="iconSmall" color={theme.colors.textSecondary} />}
             />
           </Box>
           <Box>
             <Field name="subscriptionDocuments">
               {({ field, meta, form }: FieldProps) => (
-                <FileUpload
-                  name="subscriptionDocuments"
-                  file={field.value}
-                  onFileChange={async (file) => {
-                    form.setFieldTouched('poolIcon', true, false)
-                    form.setFieldValue('poolIcon', file)
-                  }}
-                  label="Click to upload"
-                  errorMessage={meta.touched && meta.error ? meta.error : undefined}
-                  accept="application/pdf"
-                  small
-                />
+                <Box>
+                  <FileUpload
+                    name="subscriptionDocuments"
+                    file={field.value}
+                    onFileChange={async (file) => {
+                      form.setFieldTouched('poolIcon', true, false)
+                      form.setFieldValue('poolIcon', file)
+                    }}
+                    label="Click to upload"
+                    errorMessage={meta.touched && meta.error ? meta.error : undefined}
+                    accept="application/pdf"
+                    small
+                  />
+                </Box>
               )}
             </Field>
             <Box mt={8}>
               <Text variant="heading4">Tax document requirement</Text>
-              <Checkbox label="Require investors to upload tax documents before signing the subscription agreement." />
+              <Checkbox
+                label="Require investors to upload tax documents before signing the subscription agreement."
+                variant="square"
+              />
             </Box>
           </Box>
         </StyledGrid>
diff --git a/centrifuge-app/src/pages/IssuerCreatePool/PoolStructureSection.tsx b/centrifuge-app/src/pages/IssuerCreatePool/PoolStructureSection.tsx
index 8342f2ae20..9a529063d3 100644
--- a/centrifuge-app/src/pages/IssuerCreatePool/PoolStructureSection.tsx
+++ b/centrifuge-app/src/pages/IssuerCreatePool/PoolStructureSection.tsx
@@ -57,15 +57,17 @@ export const CheckboxOption = ({
   sublabel,
   id,
   height,
+  styles,
 }: {
   name: string
   label: string
   sublabel?: string
-  value: string | number
+  value: string | number | boolean
   disabled?: boolean
   icon?: React.ReactNode
   id?: keyof typeof tooltipText
   height?: number
+  styles?: React.CSSProperties
 }) => {
   const theme = useTheme()
 
@@ -81,6 +83,7 @@ export const CheckboxOption = ({
       justifyContent={icon ? 'space-between' : 'center'}
       height={height || 70}
       alignItems={icon ? 'center' : 'flex-start'}
+      {...styles}
     >
       <Field name={name} validate={validate[name as keyof typeof validate]}>
         {({ field, form, meta }: FieldProps) => (
@@ -88,7 +91,7 @@ export const CheckboxOption = ({
             {...field}
             errorMessage={meta.touched && meta.error ? meta.error : undefined}
             label={label}
-            value={value}
+            value={value.toString()}
             disabled={disabled}
             onChange={(val) => form.setFieldValue(name, val.target.checked ? value : null)}
             onBlur={field.onBlur}
diff --git a/centrifuge-app/src/pages/IssuerCreatePool/index.tsx b/centrifuge-app/src/pages/IssuerCreatePool/index.tsx
index c59e87d611..018cde8203 100644
--- a/centrifuge-app/src/pages/IssuerCreatePool/index.tsx
+++ b/centrifuge-app/src/pages/IssuerCreatePool/index.tsx
@@ -39,7 +39,7 @@ const IssuerCreatePoolPage = () => {
   const [stepCompleted, setStepCompleted] = useState({ 1: false, 2: false, 3: false })
 
   const form = useFormik({
-    initialValues: initialValues,
+    initialValues,
     validate: (values) => validateValues(values),
     validateOnMount: true,
     onSubmit: () => console.log('a'),
diff --git a/centrifuge-app/src/pages/IssuerCreatePool/oldindex.tsx b/centrifuge-app/src/pages/IssuerCreatePool/oldindex.tsx
index 17fe1b6875..79609964cd 100644
--- a/centrifuge-app/src/pages/IssuerCreatePool/oldindex.tsx
+++ b/centrifuge-app/src/pages/IssuerCreatePool/oldindex.tsx
@@ -259,6 +259,11 @@ function CreatePoolForm() {
           cent.pools.createPool(poolArgs, { createType: options?.createType, batch: true }),
         ]).pipe(
           switchMap(([api, poolSubmittable]) => {
+            // BATCH https://polkadot.js.org/docs/kusama/extrinsics/#batchcalls-veccall
+            api.tx.utlity
+              .batch
+              // create pool current functionality + pure proxy functionality goes here
+              ()
             const adminProxyDelegates = multisigAddr
               ? [multisigAddr]
               : (adminMultisig && values.adminMultisig?.signers?.filter((addr) => addr !== address)) ?? []
diff --git a/centrifuge-app/src/pages/IssuerCreatePool/types.ts b/centrifuge-app/src/pages/IssuerCreatePool/types.ts
index 4cbb8e55cd..b6f9c8eac5 100644
--- a/centrifuge-app/src/pages/IssuerCreatePool/types.ts
+++ b/centrifuge-app/src/pages/IssuerCreatePool/types.ts
@@ -102,8 +102,9 @@ export const initialValues: CreatePoolValues = {
   reportAuthorAvatar: null,
   reportUrl: '',
 
+  assetOriginators: [''],
   adminMultisig: {
-    signers: [],
+    signers: ['', ''],
     threshold: 1,
   },
   adminMultisigEnabled: false,
diff --git a/centrifuge-app/src/pages/IssuerPool/Access/AssetOriginators.tsx b/centrifuge-app/src/pages/IssuerPool/Access/AssetOriginators.tsx
index 6c61ee51fc..4f8e173d6b 100644
--- a/centrifuge-app/src/pages/IssuerPool/Access/AssetOriginators.tsx
+++ b/centrifuge-app/src/pages/IssuerPool/Access/AssetOriginators.tsx
@@ -208,6 +208,7 @@ function AOForm({
           }),
           newMetadata ? cent.pools.setMetadata([poolId, newMetadata], { batch: true }) : of(null),
         ]).pipe(
+          // THIS IS WHERE PROXIES ARE BEING CREATED
           switchMap(([permissionTx, setMetadataTx]) => {
             const numProxyTypesPerHotWallet = 4
             const deposit = proxyDepositFactor
diff --git a/centrifuge-app/src/pages/Pool/Assets/index.tsx b/centrifuge-app/src/pages/Pool/Assets/index.tsx
index ffc089c64a..f2f8171f3a 100644
--- a/centrifuge-app/src/pages/Pool/Assets/index.tsx
+++ b/centrifuge-app/src/pages/Pool/Assets/index.tsx
@@ -44,8 +44,8 @@ export function PoolDetailAssets() {
   if (!poolId) throw new Error('Pool not found')
 
   const pool = usePool(poolId)
-  const { data: loans, isLoading } = useLoans(poolId)
-  const { isLoading: isLoadingSnapshots, data: snapshots } = useAllPoolAssetSnapshots(poolId, new Date().toString())
+  const { data: loans } = useLoans(poolId)
+  const { data: snapshots } = useAllPoolAssetSnapshots(poolId, new Date().toString())
   const isTinlakePool = poolId.startsWith('0x')
   const basePath = useBasePath()
   const cashLoans = (loans ?? []).filter(
diff --git a/centrifuge-js/src/modules/pools.ts b/centrifuge-js/src/modules/pools.ts
index 149218fbde..553d5cb399 100644
--- a/centrifuge-js/src/modules/pools.ts
+++ b/centrifuge-js/src/modules/pools.ts
@@ -674,6 +674,7 @@ export interface PoolMetadataInput {
   tranches: TrancheFormValues[]
 
   // details
+  poolName: string
   assetDenomination: string
   investorType: string
   poolIcon: FileType | null
@@ -716,7 +717,10 @@ export interface PoolMetadataInput {
   poolFees: { id: number; name: string; feePosition: 'Top of waterfall'; category?: string; feeType: FeeTypes }[]
 
   poolType: 'open' | 'closed'
+
+  adminMultisigEnabled: boolean
 }
+
 export type WithdrawAddress = {
   name?: string
   address: string
@@ -776,7 +780,7 @@ export type PoolMetadata = {
     {
       icon?: FileType | null
       minInitialInvestment?: string
-      targetAPY?: string // only junior tranche (index: 0) has targetAPY
+      apy: string
     }
   >
   loanTemplates?: {
@@ -1118,7 +1122,7 @@ export function getPoolsModule(inst: Centrifuge) {
     metadata.tranches.forEach((tranche, index) => {
       tranchesById[computeTrancheId(index, poolId)] = {
         minInitialInvestment: CurrencyBalance.fromFloat(tranche.minInvestment, currencyDecimals).toString(),
-        targetAPY: tranche.targetAPY,
+        apy: tranche.apy,
       }
     })