From 4d6c4282475a2664c73efb06ab6f90fe987abce2 Mon Sep 17 00:00:00 2001
From: katty barroso <kattybarroso1321@gmail.com>
Date: Thu, 14 Nov 2024 17:29:06 +0100
Subject: [PATCH] Add pool details section UI

---
 .../IssuerCreatePool/PoolDetailsSection.tsx   | 418 ++++++++++++++++++
 .../IssuerCreatePool/PoolStructureSection.tsx |  49 +-
 .../src/pages/IssuerCreatePool/index.tsx      |  40 +-
 .../IssuerCreatePool/{types.tsx => types.ts}  |  10 +-
 .../src/pages/IssuerCreatePool/validate.ts    |  28 +-
 fabric/src/components/FileUpload/index.tsx    | 158 ++++---
 fabric/src/components/Stepper/index.tsx       |  61 +--
 fabric/src/components/TextInput/index.tsx     |   6 +-
 fabric/src/icon-svg/icon-upload.svg           |  11 +-
 fabric/src/theme/tokens/colors.ts             |   2 +-
 10 files changed, 646 insertions(+), 137 deletions(-)
 create mode 100644 centrifuge-app/src/pages/IssuerCreatePool/PoolDetailsSection.tsx
 rename centrifuge-app/src/pages/IssuerCreatePool/{types.tsx => types.ts} (95%)

diff --git a/centrifuge-app/src/pages/IssuerCreatePool/PoolDetailsSection.tsx b/centrifuge-app/src/pages/IssuerCreatePool/PoolDetailsSection.tsx
new file mode 100644
index 0000000000..de9bd5251d
--- /dev/null
+++ b/centrifuge-app/src/pages/IssuerCreatePool/PoolDetailsSection.tsx
@@ -0,0 +1,418 @@
+import { PoolMetadataInput } from '@centrifuge/centrifuge-js'
+import {
+  Box,
+  Button,
+  CurrencyInput,
+  FileUpload,
+  Grid,
+  Select,
+  Text,
+  TextAreaInput,
+  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'
+import { StyledGrid } from './PoolStructureSection'
+import { validate } from './validate'
+
+const PROVIDERS = [
+  { label: 'Fund admin', value: 'fundAdmin' },
+  { label: 'Trustee', value: 'trustee' },
+  { label: 'Pricing oracle provider', value: 'pricingOracleProvider' },
+  { label: 'Auditor', value: 'auditor' },
+  { label: 'Custodian', value: 'custodian' },
+  { label: 'Investment manager', value: 'Investment manager' },
+  { label: 'Sub-advisor', value: 'subadvisor' },
+  { label: 'Historical default rate', value: 'historicalDefaultRate' },
+  { label: 'Other', value: 'other' },
+]
+
+export const Line = () => {
+  const theme = useTheme()
+  return <Box border={`.5px solid ${theme.colors.borderPrimary}`} width="100%" />
+}
+
+export const PoolDetailsSection = () => {
+  const theme = useTheme()
+  const form = useFormikContext<PoolMetadataInput>()
+  const createLabel = (label: string) => `${label}${isTestEnv ? '' : '*'}`
+
+  return (
+    <Box>
+      <Text variant="heading2" fontWeight={700}>
+        Pool Details
+      </Text>
+      <StyledGrid gridTemplateColumns={['1fr', '1fr 1fr']} gap={3} mt={2}>
+        <Grid gap={2}>
+          <Field name="poolName" validate={validate.poolName}>
+            {({ field, meta, form }: FieldProps) => (
+              <FieldWithErrorMessage
+                name="poolName"
+                as={TextInput}
+                label="Pool name*"
+                placeholder="Type here..."
+                maxLength={100}
+              />
+            )}
+          </Field>
+          <Field name="poolIcon" validate={validate.poolIcon}>
+            {({ field, meta, form }: FieldProps) => (
+              <FileUpload
+                name="poolIcon"
+                file={field.value}
+                onFileChange={async (file) => {
+                  form.setFieldTouched('poolIcon', true, false)
+                  form.setFieldValue('poolIcon', file)
+                }}
+                label="Pool icon*"
+                errorMessage={meta.touched && meta.error ? meta.error : undefined}
+                accept="image/svg+xml"
+                fileTypeText="SVG (in square size)"
+              />
+            )}
+          </Field>
+        </Grid>
+        <Grid gap={2}>
+          <Field name="investorType" validate={validate.investorType}>
+            {({ field, meta, form }: FieldProps) => (
+              <FieldWithErrorMessage
+                name="investorType"
+                label={
+                  <Tooltips type="investorType" label={<Text variant="heading4">Investor type*</Text>} size="sm" />
+                }
+                onChange={(event: any) => form.setFieldValue('investorType', event.target.value)}
+                onBlur={field.onBlur}
+                errorMessage={meta.touched && meta.error ? meta.error : undefined}
+                value={field.value}
+                as={TextInput}
+                placeholder="Type here..."
+              />
+            )}
+          </Field>
+          <Field name="maxReserve" validate={validate.maxReserve}>
+            {({ field, form }: FieldProps) => (
+              <CurrencyInput
+                {...field}
+                name="maxReserve"
+                label="Initial maximum reserve*"
+                placeholder="0"
+                currency={form.values.currency}
+                onChange={(value) => form.setFieldValue('maxReserve', value)}
+              />
+            )}
+          </Field>
+          <Field name="poolType" validate={validate.poolType}>
+            {({ field, form, meta }: FieldProps) => (
+              <Select
+                name="poolType"
+                label={<Tooltips type="poolType" size="sm" label={<Text variant="heading4">Pool type*</Text>} />}
+                onChange={(event) => form.setFieldValue('poolType', event.target.value)}
+                onBlur={field.onBlur}
+                errorMessage={meta.touched && meta.error ? meta.error : undefined}
+                value={field.value}
+                options={[
+                  { label: 'Open', value: 'open' },
+                  { label: 'Closed', value: 'closed' },
+                ]}
+                placeholder="Select..."
+              />
+            )}
+          </Field>
+        </Grid>
+      </StyledGrid>
+
+      <Box mt={4} mb={3}>
+        <Text>Issuer</Text>
+        <StyledGrid gridTemplateColumns={['1fr', '1fr 1fr']} gap={3} mt={3}>
+          <Grid gap={2}>
+            <Field name="issuerName" validate={validate.issuerName}>
+              {({ field, meta, form }: FieldProps) => (
+                <FieldWithErrorMessage
+                  name="issuerName"
+                  label={
+                    <Tooltips type="issuerName" label={<Text variant="heading4">Legal name of the issuer*</Text>} />
+                  }
+                  onChange={(event: any) => form.setFieldValue('issuerName', event.target.value)}
+                  onBlur={field.onBlur}
+                  errorMessage={meta.touched && meta.error ? meta.error : undefined}
+                  value={field.value}
+                  as={TextInput}
+                  placeholder="Type here..."
+                  maxLength={100}
+                />
+              )}
+            </Field>
+            <Field name="issuerLogo" validate={validate.issuerLogo}>
+              {({ field, meta, form }: FieldProps) => (
+                <FileUpload
+                  file={field.value}
+                  onFileChange={(file) => {
+                    form.setFieldTouched('issuerLogo', true, false)
+                    form.setFieldValue('issuerLogo', file)
+                  }}
+                  accept="image/*"
+                  fileTypeText="SVG, PNG, or JPG (max. 1MB; 480x480px)"
+                  label="Issuer logo"
+                />
+              )}
+            </Field>
+          </Grid>
+          <Grid gap={2}>
+            <Field name="issuerRepName" validate={validate.issuerName}>
+              {({ field, meta, form }: FieldProps) => (
+                <FieldWithErrorMessage
+                  name="issuerRepName"
+                  label={
+                    <Tooltips
+                      type="issuerRepName"
+                      label={<Text variant="heading4">Legal name of the issuer representative</Text>}
+                    />
+                  }
+                  onChange={(event: any) => form.setFieldValue('issuerRepName', event.target.value)}
+                  onBlur={field.onBlur}
+                  errorMessage={meta.touched && meta.error ? meta.error : undefined}
+                  value={field.value}
+                  as={TextInput}
+                  placeholder="Type here..."
+                  maxLength={100}
+                />
+              )}
+            </Field>
+            <Field name="issuerShortDescription" validate={!isTestEnv && validate.issuerShortDescription}>
+              {({ field, meta, form }: FieldProps) => (
+                <FieldWithErrorMessage
+                  name="issuerShortDescription"
+                  label="Landing page description (max 100 characters)*"
+                  onChange={(event: any) => form.setFieldValue('issuerShortDescription', event.target.value)}
+                  onBlur={field.onBlur}
+                  errorMessage={meta.touched && meta.error ? meta.error : undefined}
+                  value={field.value}
+                  as={TextAreaInput}
+                  placeholder="Type here..."
+                  maxLength={100}
+                />
+              )}
+            </Field>
+          </Grid>
+          <Box gridColumn="span 2">
+            <Field name="issuerShortDescription" validate={!isTestEnv && validate.issuerDescription}>
+              {({ field, meta, form }: FieldProps) => (
+                <FieldWithErrorMessage
+                  validate={!isTestEnv && validate.issuerDescription}
+                  name="issuerDescription"
+                  as={TextAreaInput}
+                  label="Overview page description (max. 3000 characters)*"
+                  placeholder="Type here..."
+                  maxLength={1000}
+                  errorMessage={meta.touched && meta.error ? meta.error : undefined}
+                  // disabled={waitingForStoredIssuer}
+                />
+              )}
+            </Field>
+          </Box>
+          <Grid gap={2}>
+            <Field name="website" validate={!isTestEnv && validate.website}>
+              {({ field, meta, form }: FieldProps) => (
+                <FieldWithErrorMessage
+                  name="website"
+                  as={TextInput}
+                  label="Website URL"
+                  placeholder="https://www.example.com"
+                />
+              )}
+            </Field>
+            <Field name="forum" validate={validate.forum}>
+              {({ field, meta, form }: FieldProps) => (
+                <FieldWithErrorMessage
+                  name="forum"
+                  as={TextInput}
+                  label="Governance forum"
+                  placeholder="https://www.example.com"
+                />
+              )}
+            </Field>
+            <Field name="email" validate={!isTestEnv && validate.email}>
+              {({ field, meta, form }: FieldProps) => (
+                <FieldWithErrorMessage
+                  name="email"
+                  as={TextInput}
+                  label={createLabel('Email')}
+                  placeholder="Type here..."
+                />
+              )}
+            </Field>
+            <Field name="executiveSummary" validate={!isTestEnv && validate.executiveSummary}>
+              {({ field, meta, form }: FieldProps) => (
+                <FileUpload
+                  file={field.value}
+                  onFileChange={(file) => {
+                    form.setFieldTouched('executiveSummary', true, false)
+                    form.setFieldValue('executiveSummary', file)
+                  }}
+                  accept="application/pdf"
+                  label={createLabel('Executive summary PDF')}
+                  placeholder="Choose file"
+                  small
+                />
+              )}
+            </Field>
+          </Grid>
+          <Grid gap={2}>
+            <Field name="additionalInformation">
+              {({ field, meta, form }: FieldProps) => (
+                <FieldWithErrorMessage
+                  name="additionalInformation"
+                  as={TextInput}
+                  label="Additional information"
+                  placeholder="Title"
+                />
+              )}
+            </Field>
+            <Field name="issuerShortDescription">
+              {({ field, meta, form }: FieldProps) => (
+                <Box display="flex" flexDirection="column">
+                  <FieldWithErrorMessage
+                    name="issuerDescription"
+                    as={TextAreaInput}
+                    placeholder="Description"
+                    maxLength={3000}
+                    style={{ height: '220px' }}
+                  />
+                  <Text variant="body3" style={{ marginTop: 4 }}>
+                    (Max 3000 characters)
+                  </Text>
+                </Box>
+              )}
+            </Field>
+          </Grid>
+        </StyledGrid>
+      </Box>
+      <Box mt={4} mb={3}>
+        <Text>Service Providers</Text>
+        <StyledGrid gridTemplateColumns={['1fr', '1fr 1fr']} gap={3} mt={3}>
+          <Field name="assetClass" validate={validate.assetClass}>
+            {({ field, meta, form }: FieldProps) => (
+              <Select
+                name="assetClass"
+                label="Type"
+                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={PROVIDERS}
+                placeholder="Please select..."
+              />
+            )}
+          </Field>
+          <Field name="poolName" validate={validate.poolName}>
+            {({ field, meta, form }: FieldProps) => (
+              <FieldWithErrorMessage
+                name="poolName"
+                as={TextInput}
+                label="Name of provider"
+                placeholder="Type here..."
+                maxLength={100}
+              />
+            )}
+          </Field>
+          <Box width="163px">
+            <Button variant="secondary" small>
+              Add another
+            </Button>
+          </Box>
+        </StyledGrid>
+      </Box>
+      <Box mt={4} mb={3}>
+        <Text>Pool rating</Text>
+        <StyledGrid gridTemplateColumns={['1fr', '1fr 1fr']} gap={3} mt={3}>
+          <Field name="poolName" validate={validate.poolName}>
+            {({ field, meta, form }: FieldProps) => (
+              <FieldWithErrorMessage name="poolName" as={TextInput} label="Rating agency" placeholder="Type here..." />
+            )}
+          </Field>
+          <Field name="poolName" validate={validate.poolName}>
+            {({ field, meta, form }: FieldProps) => (
+              <FieldWithErrorMessage name="poolName" as={TextInput} label="Rating value" placeholder="Type here..." />
+            )}
+          </Field>
+          <Field name="poolName" validate={validate.poolName}>
+            {({ field, meta, form }: FieldProps) => (
+              <FieldWithErrorMessage
+                name="poolName"
+                as={TextInput}
+                label="Rating report URL"
+                placeholder="Type here..."
+              />
+            )}
+          </Field>
+          <Field name="executiveSummary" validate={!isTestEnv && validate.executiveSummary}>
+            {({ field, meta, form }: FieldProps) => (
+              <FileUpload
+                file={field.value}
+                onFileChange={(file) => {
+                  form.setFieldTouched('executiveSummary', true, false)
+                  form.setFieldValue('executiveSummary', file)
+                }}
+                accept="application/pdf"
+                label={createLabel('Executive summary PDF')}
+                placeholder="Choose file"
+                small
+              />
+            )}
+          </Field>
+          <Box width="163px">
+            <Button variant="secondary" small>
+              Add another
+            </Button>
+          </Box>
+        </StyledGrid>
+      </Box>
+      <Box mt={4} mb={3}>
+        <Text>Pool analysis</Text>
+        <StyledGrid gridTemplateColumns={['1fr', '1fr 1fr']} gap={3} mt={3}>
+          <Field name="poolName" validate={validate.poolName}>
+            {({ field, meta, form }: FieldProps) => (
+              <FieldWithErrorMessage name="poolName" as={TextInput} label="Report URL" placeholder="Type here..." />
+            )}
+          </Field>
+          <Field name="poolName" validate={validate.poolName}>
+            {({ field, meta, form }: FieldProps) => (
+              <FieldWithErrorMessage name="poolName" as={TextInput} label="Rewiewer name" placeholder="Type here..." />
+            )}
+          </Field>
+          <Field name="poolName" validate={validate.poolName}>
+            {({ field, meta, form }: FieldProps) => (
+              <FieldWithErrorMessage
+                name="poolName"
+                as={TextInput}
+                label="Rewiewer job title"
+                placeholder="Type here..."
+              />
+            )}
+          </Field>
+          <Field name="executiveSummary" validate={!isTestEnv && validate.executiveSummary}>
+            {({ field, meta, form }: FieldProps) => (
+              <FileUpload
+                file={field.value}
+                onFileChange={(file) => {
+                  form.setFieldTouched('executiveSummary', true, false)
+                  form.setFieldValue('executiveSummary', file)
+                }}
+                accept="application/pdf"
+                label="Reviewer avatar"
+                placeholder="Choose file"
+                small
+              />
+            )}
+          </Field>
+        </StyledGrid>
+      </Box>
+    </Box>
+  )
+}
diff --git a/centrifuge-app/src/pages/IssuerCreatePool/PoolStructureSection.tsx b/centrifuge-app/src/pages/IssuerCreatePool/PoolStructureSection.tsx
index 03aa26a592..73bb434a43 100644
--- a/centrifuge-app/src/pages/IssuerCreatePool/PoolStructureSection.tsx
+++ b/centrifuge-app/src/pages/IssuerCreatePool/PoolStructureSection.tsx
@@ -1,7 +1,6 @@
 import { PoolMetadataInput } from '@centrifuge/centrifuge-js'
 import {
   Box,
-  Button,
   Checkbox,
   CurrencyInput,
   Grid,
@@ -12,6 +11,7 @@ import {
   TextInput,
 } from '@centrifuge/fabric'
 import { Field, FieldProps, useFormikContext } from 'formik'
+import * as React from 'react'
 import styled, { useTheme } from 'styled-components'
 import { FieldWithErrorMessage } from '../../../src/components/FieldWithErrorMessage'
 import { Tooltips, tooltipText } from '../../../src/components/Tooltips'
@@ -32,16 +32,15 @@ export const StyledGrid = styled(Grid)`
   padding: 40px;
   border: ${({ theme }) => `1px solid ${theme.colors.borderPrimary}`};
   border-radius: 8px;
+  gap: 24px;
   @media (max-width: ${({ theme }) => theme.breakpoints.S}) {
     padding: 12px;
   }
 `
 
-export const StyledBox = styled(StyledGrid)``
-
-const Line = () => {
+export const Line = () => {
   const theme = useTheme()
-  return <Box border={`.5px solid ${theme.colors.borderPrimary}`} width="100%" mt={2} mb={2} />
+  return <Box border={`.5px solid ${theme.colors.borderPrimary}`} width="100%" />
 }
 
 const ASSET_CLASSES = Object.keys(config.assetClasses).map((key) => ({
@@ -57,6 +56,7 @@ const CheckboxOption = ({
   icon,
   sublabel,
   id,
+  height,
 }: {
   name: string
   label: string
@@ -65,8 +65,10 @@ const CheckboxOption = ({
   disabled?: boolean
   icon?: React.ReactNode
   id?: keyof typeof tooltipText
+  height?: number
 }) => {
   const theme = useTheme()
+
   return (
     <Box
       backgroundColor="white"
@@ -76,8 +78,8 @@ const CheckboxOption = ({
       border={`1px solid ${theme.colors.borderPrimary}`}
       display="flex"
       flexDirection={icon ? 'row' : 'column'}
-      justifyContent={icon ? 'space-between' : 'flex-start'}
-      height={icon ? 64 : null}
+      justifyContent={icon ? 'space-between' : 'center'}
+      height={height || 70}
       alignItems={icon ? 'center' : 'flex-start'}
     >
       <Field name={name} validate={validate[name]}>
@@ -109,8 +111,6 @@ export const PoolStructureSection = () => {
   const form = useFormikContext<PoolMetadataInput>()
   const { values } = form
 
-  console.log(values)
-
   const subAssetClasses =
     config.assetClasses[form.values.assetClass]?.map((label) => ({
       label,
@@ -142,16 +142,18 @@ export const PoolStructureSection = () => {
       <Text variant="heading2" fontWeight={700}>
         Pool Structure
       </Text>
-      <StyledGrid gridTemplateColumns={['1fr', '1fr 1fr']} gap={3} mt={2}>
+      <StyledGrid gridTemplateColumns={['1fr', '1fr', '1fr 1fr']} gap={3} mt={2}>
         <Box>
           <Text variant="body2">Pool type *</Text>
           <CheckboxOption
+            height={113}
             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
+            height={113}
             name="poolStructure"
             label="Static pool (coming soon)"
             value="static"
@@ -255,7 +257,7 @@ export const PoolStructureSection = () => {
       <Box mt={4} mb={3}>
         <Text>Tranches</Text>
         {Array.from({ length: values.trancheStructure }).map((_, index) => (
-          <StyledBox key={index} mt={3}>
+          <StyledGrid key={index} mt={3}>
             <Text variant="heading3">Tranche {index + 1}</Text>
             <Line />
             <Grid gridTemplateColumns={['1fr', '1fr 1fr']} gap={3}>
@@ -292,6 +294,7 @@ export const PoolStructureSection = () => {
                   </Field>
                 </Box>
               </Box>
+
               <Box>
                 <Field name={`tranches.${index}.symbolName`} validate={validate.symbolName}>
                   {({ field, form, meta }: FieldProps) => (
@@ -303,18 +306,18 @@ export const PoolStructureSection = () => {
                       placeholder="4-12 characters"
                       minLength={4}
                       maxLength={12}
-                      //   disabled={isUpdating}
                     />
                   )}
                 </Field>
+
                 <Box mt={3}>
                   {index === 0 ? (
                     <Grid gridTemplateColumns={['1fr', '1fr 1fr']} gap={3}>
-                      <Field name={`tranches.${index}.apy`} validate={validate.subAssetClass}>
+                      <Field name={`tranches.${index}.apy`} validate={validate.apy}>
                         {({ field, meta, form }: FieldProps) => (
                           <Select
                             label={<Tooltips type="apy" label={<Text variant="heading4">APY</Text>} />}
-                            onChange={(event) => form.setFieldValue('subAssetClass', event.target.value)}
+                            onChange={(event) => form.setFieldValue('apy', event.target.value)}
                             onBlur={field.onBlur}
                             errorMessage={meta.touched && meta.error ? meta.error : undefined}
                             value={field.value}
@@ -328,7 +331,7 @@ export const PoolStructureSection = () => {
                           as={NumberInput}
                           placeholder="0.00"
                           symbol="%"
-                          name={`tranches.${index}.apy`}
+                          name={`tranches.${index}.interestRate`}
                           validate={validate.interestRate}
                         />
                       </Box>
@@ -347,10 +350,11 @@ export const PoolStructureSection = () => {
                   )}
                 </Box>
               </Box>
-              {index === 1 || index === 2 ? (
+
+              {(index === 1 || index === 2) && (
                 <>
                   <Box>
-                    <Field name={`tranches.${index}.minInvestment`} validate={validate.minInvestment}>
+                    <Field name={`tranches.${index}.interestRate`} validate={validate.interestRate}>
                       {({ field, form, meta }: FieldProps) => (
                         <CurrencyInput
                           {...field}
@@ -392,18 +396,11 @@ export const PoolStructureSection = () => {
                     </Field>
                   </Box>
                 </>
-              ) : null}
+              )}
             </Grid>
-          </StyledBox>
+          </StyledGrid>
         ))}
       </Box>
-      <Box />
-      <Line />
-      <Box display="flex" justifyContent="flex-end" pt={2} pb={4}>
-        <Button style={{ width: 163 }} small>
-          Next
-        </Button>
-      </Box>
     </Box>
   )
 }
diff --git a/centrifuge-app/src/pages/IssuerCreatePool/index.tsx b/centrifuge-app/src/pages/IssuerCreatePool/index.tsx
index fc35d25d82..6615b99884 100644
--- a/centrifuge-app/src/pages/IssuerCreatePool/index.tsx
+++ b/centrifuge-app/src/pages/IssuerCreatePool/index.tsx
@@ -1,9 +1,10 @@
-import { Box, Step, Stepper, Text } from '@centrifuge/fabric'
+import { Box, Button, Step, Stepper, Text } from '@centrifuge/fabric'
 import { Form, FormikProvider, useFormik } from 'formik'
 import { useRef, useState } from 'react'
 import styled, { useTheme } from 'styled-components'
 import { useIsAboveBreakpoint } from '../../../src/utils/useIsAboveBreakpoint'
-import { PoolStructureSection } from './PoolStructureSection'
+import { PoolDetailsSection } from './PoolDetailsSection'
+import { Line, PoolStructureSection } from './PoolStructureSection'
 import { initialValues } from './types'
 import { validateValues } from './validate'
 
@@ -14,10 +15,6 @@ const StyledBox = styled(Box)`
   }
 `
 
-const PoolDetails = () => {
-  return <div></div>
-}
-
 const PoolSetup = () => {
   return <div></div>
 }
@@ -26,7 +23,7 @@ const IssuerCreatePoolPage = () => {
   const theme = useTheme()
   const formRef = useRef<HTMLFormElement>(null)
   const isSmall = useIsAboveBreakpoint('S')
-  const [step, setStep] = useState(1)
+  const [step, setStep] = useState(2)
 
   const form = useFormik({
     initialValues: initialValues,
@@ -35,6 +32,17 @@ const IssuerCreatePoolPage = () => {
     onSubmit: () => console.log('a'),
   })
 
+  const { validateForm, errors } = form
+
+  const handleNextStep = async () => {
+    const currentErrors = await validateForm()
+
+    // Ensure the form is valid before proceeding to the next step
+    if (Object.keys(currentErrors).length === 0) {
+      setStep((prevStep) => prevStep + 1)
+    }
+  }
+
   return (
     <>
       <FormikProvider value={form}>
@@ -56,8 +64,24 @@ const IssuerCreatePoolPage = () => {
           </Box>
           <StyledBox padding="48px 80px 0px 80px">
             {step === 1 && <PoolStructureSection />}
-            {step === 2 && <PoolDetails />}
+            {step === 2 && <PoolDetailsSection />}
             {step === 3 && <PoolSetup />}
+            <Line />
+            <Box display="flex" justifyContent="flex-end" mt={2} mb={4}>
+              {step !== 1 && (
+                <Button
+                  style={{ width: 163, marginRight: 8 }}
+                  small
+                  onClick={() => setStep(step - 1)}
+                  variant="inverted"
+                >
+                  Previous
+                </Button>
+              )}
+              <Button style={{ width: 163 }} small onClick={handleNextStep}>
+                {step === 3 ? 'Create pool' : 'Next'}
+              </Button>
+            </Box>
           </StyledBox>
         </Form>
       </FormikProvider>
diff --git a/centrifuge-app/src/pages/IssuerCreatePool/types.tsx b/centrifuge-app/src/pages/IssuerCreatePool/types.ts
similarity index 95%
rename from centrifuge-app/src/pages/IssuerCreatePool/types.tsx
rename to centrifuge-app/src/pages/IssuerCreatePool/types.ts
index 705de6d08c..4501a18263 100644
--- a/centrifuge-app/src/pages/IssuerCreatePool/types.tsx
+++ b/centrifuge-app/src/pages/IssuerCreatePool/types.ts
@@ -1,12 +1,13 @@
 import { FeeTypes, PoolMetadataInput } from '@centrifuge/centrifuge-js'
-import { isTestEnv } from '../../../src/config'
+import { isTestEnv } from '../../config'
 
 export interface Tranche {
   tokenName: string
   symbolName: string
-  interestRate: number | ''
   minRiskBuffer: number | ''
   minInvestment: number | ''
+  apy: string
+  interestRate: number | ''
 }
 export interface WriteOffGroupInput {
   days: number | ''
@@ -17,9 +18,10 @@ export interface WriteOffGroupInput {
 export const createEmptyTranche = (trancheName: string): Tranche => ({
   tokenName: trancheName,
   symbolName: '',
-  interestRate: trancheName === 'Junior' ? '' : 0,
+  interestRate: 0,
   minRiskBuffer: trancheName === 'Junior' ? '' : 0,
   minInvestment: 1000,
+  apy: '90d',
 })
 
 export type CreatePoolValues = Omit<
@@ -62,7 +64,7 @@ export type CreatePoolValues = Omit<
 
 export const initialValues: CreatePoolValues = {
   // pool structure
-  poolStructure: '',
+  poolStructure: 'revolving',
   trancheStructure: 1,
   assetClass: 'Private credit',
   assetDenomination: '',
diff --git a/centrifuge-app/src/pages/IssuerCreatePool/validate.ts b/centrifuge-app/src/pages/IssuerCreatePool/validate.ts
index cffec91272..18052c55e2 100644
--- a/centrifuge-app/src/pages/IssuerCreatePool/validate.ts
+++ b/centrifuge-app/src/pages/IssuerCreatePool/validate.ts
@@ -26,19 +26,32 @@ export const MB = 1024 ** 2
 export const validate = {
   nftImage: combine(imageFile(), maxFileSize(1 * MB)),
 
+  // pool structure
   poolStructure: required(),
   trancheStructure: required(),
+  assetClass: required(),
+  subAssetClass: required(),
+  currency: required(),
+
+  // tranches
+  tokenName: combine(required(), maxLength(100)),
+  symbolName: combine(required(), maxLength(12)),
+  minInvestment: combine(required(), nonNegativeNumber(), max(Number.MAX_SAFE_INTEGER)),
+  interestRate: combine(required(), positiveNumber(), max(Number.MAX_SAFE_INTEGER)),
+  minRiskBuffer: combine(required(), positiveNumber(), max(100)),
+  maxPriceVariation: combine(required(), min(0), max(10000)),
+  maturityDate: combine(required(), maturityDate()),
+  apy: required(),
 
+  // pool details
   poolName: combine(required(), maxLength(100)),
   poolIcon: combine(required(), mimeType('image/svg+xml', 'Icon must be an SVG file')),
-  assetClass: required(),
-  subAssetClass: required(),
   maxReserve: combine(required(), nonNegativeNumber(), max(Number.MAX_SAFE_INTEGER)),
   investorType: required(),
+  poolType: required(),
 
   epochHours: combine(required(), nonNegativeNumber(), integer(), max(24 * 7 /* 1 week */)),
   epochMinutes: combine(required(), nonNegativeNumber(), integer(), max(59)),
-  currency: required(),
 
   issuerName: combine(required(), maxLength(100)),
   issuerRepName: combine(required(), maxLength(100)),
@@ -53,15 +66,6 @@ export const validate = {
   issuerDetailTitle: combine(required(), maxLength(50)),
   issuerDetailBody: combine(required(), maxLength(3000)),
 
-  // tranches
-  tokenName: combine(required(), maxLength(100)),
-  symbolName: combine(required(), maxLength(12)),
-  minInvestment: combine(required(), nonNegativeNumber(), max(Number.MAX_SAFE_INTEGER)),
-  interestRate: combine(required(), positiveNumber(), max(Number.MAX_SAFE_INTEGER)),
-  minRiskBuffer: combine(required(), positiveNumber(), max(100)),
-  maxPriceVariation: combine(required(), min(0), max(10000)),
-  maturityDate: combine(required(), maturityDate()),
-
   // risk groups
   groupName: maxLength(30),
   advanceRate: combine(required(), positiveNumber(), max(100)),
diff --git a/fabric/src/components/FileUpload/index.tsx b/fabric/src/components/FileUpload/index.tsx
index a605c31f9d..7a204d8d97 100644
--- a/fabric/src/components/FileUpload/index.tsx
+++ b/fabric/src/components/FileUpload/index.tsx
@@ -1,21 +1,17 @@
 import * as React from 'react'
-import styled, { keyframes } from 'styled-components'
-import { InputAction, InputUnit, InputUnitProps, StyledTextInput, TextInputBox } from '../..'
-import IconSpinner from '../../icon/IconSpinner'
-import IconX from '../../icon/IconX'
+import styled from 'styled-components'
+import { Box, IconUpload, InputUnit, InputUnitProps, StyledTextInput, Text } from '../..'
 import { useControlledState } from '../../utils/useControlledState'
-import { Button } from '../Button'
-import { Flex } from '../Flex'
 import { Stack } from '../Stack'
 
-const rotate = keyframes`
-  0% {
-    transform: rotate(0);
-  }
-  100% {
-    transform: rotate(1turn);
-  }
-`
+// const rotate = keyframes`
+//   0% {
+//     transform: rotate(0);
+//   }
+//   100% {
+//     transform: rotate(1turn);
+//   }
+// `
 
 const FormField = styled.input`
   // Visually hidden
@@ -29,12 +25,22 @@ const FormField = styled.input`
   width: 1px;
 `
 
-const Spinner = styled(IconSpinner)`
-  animation: ${rotate} 600ms linear infinite;
-`
+// const Spinner = styled(IconSpinner)`
+//   animation: ${rotate} 600ms linear infinite;
+// `
 
-const FileDragOverContainer = styled(Stack)<{ $disabled?: boolean; $active: boolean }>`
+const FileDragOverContainer = styled(Stack)<{ $disabled?: boolean; $active: boolean; small?: boolean }>`
   position: relative;
+  height: ${({ small }) => (small ? '44px' : '144px')};
+  background-color: #ffffff;
+  border: 1px solid ${({ theme }) => theme.colors.borderPrimary};
+  border-radius: ${({ theme }) => theme.radii.input}px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  cursor: ${({ $disabled }) => ($disabled ? 'not-allowed' : 'pointer')};
+  padding: 16px;
   &::before {
     content: '';
     width: 100%;
@@ -50,6 +56,17 @@ const FileDragOverContainer = styled(Stack)<{ $disabled?: boolean; $active: bool
   }
 `
 
+const FileInputContent = styled(Box)`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  width: 100%;
+  padding: 16px 24px;
+  border-radius: ${({ theme }) => theme.radii.input}px;
+  background-color: #ffffff;
+`
+
 export type FileUploadProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'> &
   InputUnitProps & {
     file?: File | string | null
@@ -57,6 +74,8 @@ export type FileUploadProps = Omit<React.InputHTMLAttributes<HTMLInputElement>,
     onClear?: () => void
     validate?: (file: File) => string | undefined
     loading?: boolean
+    fileTypeText?: string
+    small?: boolean
   }
 
 export function FileUpload({
@@ -71,6 +90,8 @@ export function FileUpload({
   label,
   secondaryLabel,
   id,
+  fileTypeText,
+  small,
   ...inputProps
 }: FileUploadProps) {
   const defaultId = React.useId()
@@ -140,6 +161,12 @@ export function FileUpload({
     setDragOver(false)
   }
 
+  function handleContainerClick() {
+    if (!disabled) {
+      handleUploadBtnClick()
+    }
+  }
+
   return (
     <InputUnit
       id={id}
@@ -149,6 +176,7 @@ export function FileUpload({
       errorMessage={errorMessage}
       inputElement={
         <FileDragOverContainer
+          onClick={handleContainerClick}
           onDragOver={handleDrag}
           onDragEnter={handleDrag}
           onDragEnd={handleDragEnd}
@@ -156,45 +184,65 @@ export function FileUpload({
           onDrop={handleDrop}
           $active={dragOver}
           $disabled={disabled}
+          small={small}
         >
-          <TextInputBox
+          {small && (
+            <Box display="flex" justifyContent="space-between" width="100%">
+              <Text color="textSecondary">
+                {' '}
+                {(curFile && typeof curFile !== 'string' && curFile.name) || 'Click to upload'}
+              </Text>
+              <IconUpload size={20} />
+            </Box>
+          )}
+          {!small && (
+            <FileInputContent>
+              <Box
+                backgroundColor="backgroundSecondary"
+                borderRadius="100%"
+                height={40}
+                width={40}
+                display="flex"
+                justifyContent="center"
+                alignItems="center"
+                marginBottom={16}
+              >
+                <IconUpload size={20} />
+              </Box>
+              <Box>
+                <Text variant="heading4">
+                  {(curFile && typeof curFile !== 'string' && curFile.name) || 'Click to upload'}
+                </Text>
+                {curFile && typeof curFile !== 'string' && curFile.name ? (
+                  ''
+                ) : (
+                  <Text variant="body2" color="textSecondary">
+                    {' '}
+                    or drag and drop
+                  </Text>
+                )}
+              </Box>
+              {curFile && typeof curFile !== 'string' && curFile.name ? (
+                ''
+              ) : (
+                <Text variant="body3">{fileTypeText}</Text>
+              )}
+              <StyledTextInput
+                readOnly
+                value={curFile ? (typeof curFile === 'string' ? curFile : curFile.name) : ''}
+                style={{ cursor: 'pointer', flex: 1, opacity: 0 }}
+              />
+            </FileInputContent>
+          )}
+          <FormField
+            id={id}
+            type="file"
+            onChange={handleFileChange}
+            value=""
             disabled={disabled}
-            error={!!errorMessage}
-            inputElement={
-              <>
-                <FormField
-                  id={id}
-                  type="file"
-                  onChange={handleFileChange}
-                  value=""
-                  disabled={disabled}
-                  tabIndex={-1}
-                  ref={inputRef}
-                  {...inputProps}
-                />
-                <StyledTextInput
-                  readOnly
-                  onClick={handleUploadBtnClick}
-                  value={curFile ? (typeof curFile === 'string' ? curFile : curFile.name) : ''}
-                  placeholder={placeholder}
-                  style={{ cursor: 'pointer' }}
-                />
-              </>
-            }
-            symbol={
-              loading ? (
-                <Spinner size="iconSmall" color={disabled ? 'textDisabled' : 'textPrimary'} />
-              ) : curFile && !disabled ? (
-                <Flex bleedX="10px">
-                  <Button variant="tertiary" small onClick={handleClear} icon={IconX} disabled={disabled} />
-                </Flex>
-              ) : null
-            }
-            action={
-              <InputAction onClick={handleUploadBtnClick} disabled={disabled}>
-                Choose file
-              </InputAction>
-            }
+            tabIndex={-1}
+            ref={inputRef}
+            {...inputProps}
           />
         </FileDragOverContainer>
       }
diff --git a/fabric/src/components/Stepper/index.tsx b/fabric/src/components/Stepper/index.tsx
index a4a5d6d4c8..2042b3d46a 100644
--- a/fabric/src/components/Stepper/index.tsx
+++ b/fabric/src/components/Stepper/index.tsx
@@ -16,6 +16,7 @@ type EnrichedStepProps = {
 type StepProps = {
   label?: string
   empty?: boolean
+  isStepCompleted?: boolean
 }
 
 type StepperProps = {
@@ -45,10 +46,11 @@ const Hitearea = styled.button<{ direction?: string }>`
   cursor: pointer;
 `
 
-const Number = styled(Text)<{ isActive?: boolean }>`
-  background-color: ${({ theme, isActive }) => (isActive ? theme.colors.textGold : 'transparent')};
+const Number = styled(Text)<{ isActive?: boolean; done: boolean }>`
+  background-color: ${({ theme, isActive, done }) =>
+    isActive && !done ? theme.colors.textGold : done ? 'red' : 'transparent'};
   border: ${({ theme, isActive }) =>
-    isActive ? `1px solid ${theme.colors.textGold}` : `1.73px solid ${theme.colors.textDisabled}`};
+    isActive ? `1px solid ${theme.colors.textGold}` : `1.73px solid ${theme.colors.backgroundButtonPrimaryDisabled}`};
   border-radius: 100%;
   width: 32px;
   height: 32px;
@@ -57,9 +59,22 @@ const Number = styled(Text)<{ isActive?: boolean }>`
   font-weight: 500;
 `
 
-export const Step = (props: StepProps & EnrichedStepProps) => {
+const Line = ({ direction }: { direction: 'row' | 'column' }) => {
   const theme = useTheme()
-  const { isActive, count, isFinal, label, empty, setActiveStep, direction } = props
+  return (
+    <Box
+      borderTop={direction === 'row' ? `2px dashed ${theme.colors.backgroundButtonPrimaryDisabled}` : 'none'}
+      borderLeft={direction === 'column' ? `2px dashed ${theme.colors.backgroundButtonPrimaryDisabled}` : 'none'}
+      width={direction === 'row' ? '140px' : 0}
+      height={direction === 'column' ? 80 : 0}
+      mt={direction === 'row' ? 2 : 3}
+      mb={direction === 'row' ? 0 : 3}
+    />
+  )
+}
+
+export const Step = (props: StepProps & EnrichedStepProps) => {
+  const { isActive, count, label, empty, setActiveStep, direction } = props
 
   return (
     <Box
@@ -74,7 +89,7 @@ export const Step = (props: StepProps & EnrichedStepProps) => {
             !empty && setActiveStep && setActiveStep((count as number) + 1)
           }}
         >
-          <Number variant="body3" isActive={isActive}>
+          <Number variant="body3" isActive={isActive} done={props.isStepCompleted}>
             {count ? count + 1 : 1}
           </Number>
           <Text as="h3" variant="heading4" style={{ marginTop: 8 }}>
@@ -82,17 +97,6 @@ export const Step = (props: StepProps & EnrichedStepProps) => {
           </Text>
         </Hitearea>
       </ListItem>
-      {!isFinal && (
-        <Box
-          borderTop={direction === 'row' ? `3px dashed ${theme.colors.textDisabled}` : 'none'}
-          borderLeft={direction === 'column' ? `3px dashed ${theme.colors.textDisabled}` : 'none'}
-          width={direction === 'row' ? '140px' : 0}
-          height={direction === 'column' ? 80 : 0}
-          mt={direction === 'row' ? 2 : 3}
-          mb={direction === 'row' ? 0 : 3}
-          marginLeft={direction === 'row' ? '20px' : 0}
-        />
-      )}
     </Box>
   )
 }
@@ -122,16 +126,19 @@ export const Stepper = (props: StepperProps) => {
 
   const stepItems = steps.map((step, index) => {
     if (React.isValidElement(step)) {
-      return React.cloneElement(step as React.ReactElement<EnrichedStepProps & StepProps>, {
-        key: index,
-        activeStep: props.activeStep,
-        isFinal: index === stepsCount - 1,
-        isActive: index === props.activeStep - 1,
-        count: index,
-        setActiveStep: props.setActiveStep,
-        maxStep: maxStep.current,
-        direction: props.direction,
-      })
+      return (
+        <React.Fragment key={index}>
+          {React.cloneElement(step as React.ReactElement<EnrichedStepProps & StepProps>, {
+            activeStep: props.activeStep,
+            isActive: index === props.activeStep - 1,
+            count: index,
+            setActiveStep: props.setActiveStep,
+            maxStep: maxStep.current,
+            direction: props.direction,
+          })}
+          {index !== stepsCount - 1 && <Line direction={props.direction || 'column'} />}
+        </React.Fragment>
+      )
     }
     return step
   })
diff --git a/fabric/src/components/TextInput/index.tsx b/fabric/src/components/TextInput/index.tsx
index 98e112b882..51fc2598b6 100644
--- a/fabric/src/components/TextInput/index.tsx
+++ b/fabric/src/components/TextInput/index.tsx
@@ -34,6 +34,8 @@ export const StyledTextInput = styled.input`
 
   ::placeholder {
     color: ${({ theme }) => theme.colors.textDisabled};
+    font-weight: 400;
+    line-height: 24px;
   }
 
   // For number input
@@ -215,13 +217,13 @@ const StyledTextArea = styled.textarea`
   width: 100%;
   border: none;
   background: transparent;
-  min-height: 66px;
+  min-height: 140px;
   font-size: inherit;
   font-weight: inherit;
   font-family: inherit;
   line-height: inherit;
   color: inherit;
-  resize: vertical;
+  resize: none;
   padding: ${({ theme }) => theme.space[1]}px;
 
   ::placeholder {
diff --git a/fabric/src/icon-svg/icon-upload.svg b/fabric/src/icon-svg/icon-upload.svg
index 6d303aa0ad..fc0a1bdf23 100644
--- a/fabric/src/icon-svg/icon-upload.svg
+++ b/fabric/src/icon-svg/icon-upload.svg
@@ -1,3 +1,10 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M2 20.4142V16.4142H4V20.4142H20V16.4142H22V20.4142C22 21.5188 21.1046 22.4142 20 22.4142H4C2.89543 22.4142 2 21.5188 2 20.4142ZM7.70711 9.12129L11 5.8284V16.4142H13V5.8284L16.2929 9.12129L17.7071 7.70708L12 1.99997L6.29289 7.70708L7.70711 9.12129Z" fill="black"/>
+<svg width="21" height="21" viewBox="0 0 21 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="upload-cloud" clip-path="url(#clip0_4137_5049)">
+<path id="Icon" d="M13.9576 13.8332L10.6242 10.4999M10.6242 10.4999L7.2909 13.8332M10.6242 10.4999V17.9999M17.6159 15.8249C18.4287 15.3818 19.0708 14.6806 19.4408 13.8321C19.8108 12.9835 19.8877 12.0359 19.6594 11.1388C19.4311 10.2417 18.9105 9.44616 18.1798 8.87778C17.4491 8.30939 16.55 8.00052 15.6242 7.9999H14.5742C14.322 7.02427 13.8519 6.11852 13.1992 5.35073C12.5465 4.58295 11.7283 3.97311 10.806 3.56708C9.8837 3.16104 8.88136 2.96937 7.87433 3.00647C6.8673 3.04358 5.88179 3.30849 4.99188 3.78129C4.10197 4.2541 3.33083 4.92249 2.73642 5.73622C2.14201 6.54996 1.73981 7.48785 1.56005 8.4794C1.38029 9.47095 1.42766 10.4903 1.69858 11.461C1.9695 12.4316 2.45694 13.3281 3.12423 14.0832" stroke="#252B34" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<defs>
+<clipPath id="clip0_4137_5049">
+<rect width="20" height="20" fill="white" transform="translate(0.625 0.5)"/>
+</clipPath>
+</defs>
 </svg>
diff --git a/fabric/src/theme/tokens/colors.ts b/fabric/src/theme/tokens/colors.ts
index ba4cf42d8a..cce6516ab7 100644
--- a/fabric/src/theme/tokens/colors.ts
+++ b/fabric/src/theme/tokens/colors.ts
@@ -2,7 +2,7 @@ export const black = '#252B34'
 export const gold = '#FFC012'
 
 export const grayScale = {
-  10: '#cfcfcf33',
+  10: '##F2F4F7',
   50: '#F6F6F6',
   100: '#E7E7E7',
   300: '#CFCFCF',