From 001f3dff8bde7faae3c504372d945ff444932418 Mon Sep 17 00:00:00 2001
From: Katty Barroso <51223655+kattylucy@users.noreply.github.com>
Date: Mon, 20 Jan 2025 11:55:53 +0100
Subject: [PATCH] Create pool QA (#2563)

* Make element scrollable after clicking next

* Make APY target as default

* Add please select as a value on dropdown

* Fix address field

* Fix bug creating with EVM address

* Validate fields for categories and ratings if more than one selected

* Display the formatted address

* Fix values on pool overview page

* Fix multisign address format

* Switch to demo

* Add pool name to the first step

* Fix label for rating report

* Change to pool structure

* Fix linter warnings
---
 centrifuge-app/.env-config/.env.development   | 31 ++++----
 .../components/PoolOverview/KeyMetrics.tsx    | 12 ++-
 .../IssuerCreatePool/FormAddressInput.tsx     |  2 +
 .../IssuerCreatePool/IssuerCategories.tsx     |  1 -
 .../IssuerCreatePool/PoolDetailsSection.tsx   | 47 +++++------
 .../pages/IssuerCreatePool/PoolRatings.tsx    |  2 +-
 .../IssuerCreatePool/PoolSetupSection.tsx     | 60 +++++++++-----
 .../IssuerCreatePool/PoolStructureSection.tsx | 15 +++-
 .../src/pages/IssuerCreatePool/index.tsx      | 78 ++++++++++++-------
 .../src/pages/IssuerCreatePool/types.ts       |  2 +-
 .../src/pages/IssuerCreatePool/validate.ts    | 11 +++
 11 files changed, 161 insertions(+), 100 deletions(-)

diff --git a/centrifuge-app/.env-config/.env.development b/centrifuge-app/.env-config/.env.development
index 5114861124..b8a57d14e6 100644
--- a/centrifuge-app/.env-config/.env.development
+++ b/centrifuge-app/.env-config/.env.development
@@ -1,21 +1,24 @@
-REACT_APP_COLLATOR_WSS_URL=wss://fullnode.development.cntrfg.com
-REACT_APP_DEFAULT_UNLIST_POOLS=false
-REACT_APP_FAUCET_URL=https://europe-central2-peak-vista-185616.cloudfunctions.net/faucet-api-dev
+REACT_APP_COLLATOR_WSS_URL=wss://fullnode.demo.k-f.dev,wss://fullnode-apps.demo.k-f.dev
+REACT_APP_DEFAULT_UNLIST_POOLS=true
+REACT_APP_FAUCET_URL=https://europe-central2-peak-vista-185616.cloudfunctions.net/faucet-api-demo
 REACT_APP_IPFS_GATEWAY=https://centrifuge.mypinata.cloud/
-REACT_APP_IS_DEMO=false
-REACT_APP_NETWORK=centrifuge
-REACT_APP_ONBOARDING_API_URL=https://europe-central2-peak-vista-185616.cloudfunctions.net/onboarding-api-dev
-REACT_APP_PINNING_API_URL=https://europe-central2-peak-vista-185616.cloudfunctions.net/pinning-api-dev
+REACT_APP_IS_DEMO=true
+REACT_APP_ONBOARDING_API_URL=https://europe-central2-peak-vista-185616.cloudfunctions.net/onboarding-api-demo
+REACT_APP_PINNING_API_URL=https://europe-central2-peak-vista-185616.cloudfunctions.net/pinning-api-demo
 REACT_APP_POOL_CREATION_TYPE=immediate
-REACT_APP_RELAY_WSS_URL=wss://fullnode-relay.development.cntrfg.com
-REACT_APP_SUBQUERY_URL=https://api.subquery.network/sq/centrifuge/pools-development
-REACT_APP_SUBSCAN_URL=https://centrifuge.subscan.io
+REACT_APP_RELAY_WSS_URL=wss://frag-moonbase-relay-rpc-ws.g.moonbase.moonbeam.network
+REACT_APP_SUBQUERY_URL=https://api.subquery.network/sq/centrifuge/pools-demo-multichain
+REACT_APP_SUBSCAN_URL=
 REACT_APP_TINLAKE_NETWORK=goerli
 REACT_APP_INFURA_KEY=8cd8e043ee8d4001b97a1c37e08fd9dd
-REACT_APP_ONFINALITY_KEY=0e1c049f-d876-4e77-a45f-b5afdf5739b2
+REACT_APP_ALCHEMY_KEY=KNR-1LZhNqWOxZS2AN8AFeaiESBV10qZ
 REACT_APP_WHITELISTED_ACCOUNTS=
-REACT_APP_TINLAKE_SUBGRAPH_URL=https://api.goldsky.com/api/public/project_clhi43ef5g4rw49zwftsvd2ks/subgraphs/main/prod/gn
+REACT_APP_NETWORK=centrifuge
 REACT_APP_REWARDS_TREE_URL=https://storage.googleapis.com/rad-rewards-trees-kovan-staging/latest.json
+REACT_APP_MEMBERLIST_ADMIN_PURE_PROXY=kALwmJutBq95s41U9fWnoApCUgvPqPGTh1GSmFnQh5f9fWo93
 REACT_APP_WALLETCONNECT_ID=c32fa79350803519804a67fcab0b742a
-REACT_APP_MEMBERLIST_ADMIN_PURE_PROXY=kAJ27w29x7gHM75xajP2yXVLjVBaKmmUTxHwgRuCoAcWaoEiz
-REACT_APP_TREASURY=kAJkmGxAd6iqX9JjWTdhXgCf2PL1TAphTRYrmEqzBrYhwbXAn
\ No newline at end of file
+REACT_APP_TINLAKE_SUBGRAPH_URL=https://api.goldsky.com/api/public/project_clhi43ef5g4rw49zwftsvd2ks/subgraphs/main/prod/gn
+REACT_APP_TREASURY=kAJkmGxAd6iqX9JjWTdhXgCf2PL1TAphTRYrmEqzBrYhwbXAn
+REACT_APP_PRIME_IPFS_HASH=QmQfcuHM3EGrtpjhitDwJsgie5THLPtRNzvk7N3uymgHGc
+REACT_APP_ONFINALITY_KEY=0e1c049f-d876-4e77-a45f-b5afdf5739b2
+REACT_APP_TENDERLY_KEY=18aMTJlpNb1lElcYNkkunC
\ No newline at end of file
diff --git a/centrifuge-app/src/components/PoolOverview/KeyMetrics.tsx b/centrifuge-app/src/components/PoolOverview/KeyMetrics.tsx
index 107302352f..f5c24d4b47 100644
--- a/centrifuge-app/src/components/PoolOverview/KeyMetrics.tsx
+++ b/centrifuge-app/src/components/PoolOverview/KeyMetrics.tsx
@@ -136,6 +136,8 @@ export const KeyMetrics = ({ poolId }: Props) => {
       metric:
         centrifugeTargetAPYs[poolId as keyof typeof centrifugeTargetAPYs] || tinlakeData[poolId as TinlakeDataKey]
           ? 'Target APY'
+          : metadata?.tranches
+          ? Object.values(metadata?.tranches)[0].apy
           : '30-day APY',
       value: tinlakeData[poolId as TinlakeDataKey]
         ? tinlakeData[poolId as TinlakeDataKey]
@@ -218,10 +220,16 @@ export const KeyMetrics = ({ poolId }: Props) => {
           {metrics.map(({ metric, value }, index) => {
             return (
               <Box key={index} display="flex" justifyContent="space-between" paddingY={1} alignItems="center">
-                <Text color="textSecondary" variant="body2" textOverflow="ellipsis" whiteSpace="nowrap">
+                <Text
+                  textTransform="capitalize"
+                  color="textSecondary"
+                  variant="body2"
+                  textOverflow="ellipsis"
+                  whiteSpace="nowrap"
+                >
                   {metric}
                 </Text>
-                <Text variant="body2" textOverflow="ellipsis" whiteSpace="nowrap">
+                <Text textTransform="capitalize" variant="body2" textOverflow="ellipsis" whiteSpace="nowrap">
                   {value}
                 </Text>
               </Box>
diff --git a/centrifuge-app/src/pages/IssuerCreatePool/FormAddressInput.tsx b/centrifuge-app/src/pages/IssuerCreatePool/FormAddressInput.tsx
index 16467788b8..a920086323 100644
--- a/centrifuge-app/src/pages/IssuerCreatePool/FormAddressInput.tsx
+++ b/centrifuge-app/src/pages/IssuerCreatePool/FormAddressInput.tsx
@@ -1,6 +1,7 @@
 import { evmToSubstrateAddress } from '@centrifuge/centrifuge-js'
 import { useCentrifugeUtils } from '@centrifuge/centrifuge-react'
 import { TextInput } from '@centrifuge/fabric'
+import { isAddress } from '@polkadot/util-crypto'
 import { useField } from 'formik'
 import React from 'react'
 import { FieldWithErrorMessage } from '../../../src/components/FieldWithErrorMessage'
@@ -43,6 +44,7 @@ export const FormAddressInput = ({ name, chainId, placeholder }: FormAddressInpu
       onBlur={handleBlur}
       errorMessage={meta.touched && meta.error ? meta.error : undefined}
       as={TextInput}
+      value={isEvmAddress(field.value) || isAddress(field.value) ? utils.formatAddress(field.value) : field.value}
     />
   )
 }
diff --git a/centrifuge-app/src/pages/IssuerCreatePool/IssuerCategories.tsx b/centrifuge-app/src/pages/IssuerCreatePool/IssuerCategories.tsx
index c797f437ad..26ca8b6bf3 100644
--- a/centrifuge-app/src/pages/IssuerCreatePool/IssuerCategories.tsx
+++ b/centrifuge-app/src/pages/IssuerCreatePool/IssuerCategories.tsx
@@ -73,7 +73,6 @@ export const IssuerCategoriesSection = () => {
                             placeholder="Type here..."
                             maxLength={100}
                             as={TextInput}
-                            errorMessage={meta.touched && meta.error ? meta.error : undefined}
                             onBlur={field.onBlur}
                           />
                         )}
diff --git a/centrifuge-app/src/pages/IssuerCreatePool/PoolDetailsSection.tsx b/centrifuge-app/src/pages/IssuerCreatePool/PoolDetailsSection.tsx
index 8060ff1053..a5c8ba7dd8 100644
--- a/centrifuge-app/src/pages/IssuerCreatePool/PoolDetailsSection.tsx
+++ b/centrifuge-app/src/pages/IssuerCreatePool/PoolDetailsSection.tsx
@@ -38,35 +38,6 @@ export const PoolDetailsSection = () => {
         Pool Details
       </Text>
       <StyledGrid gridTemplateColumns={['1fr', '1fr 1fr']} gap={3} mt={2}>
-        <Grid gap={2}>
-          <FieldWithErrorMessage
-            name="poolName"
-            as={TextInput}
-            label="Pool name*"
-            placeholder="Type here..."
-            maxLength={100}
-            validate={validate.poolName}
-            onChange={(e: React.ChangeEvent<HTMLInputElement>) => form.setFieldValue('poolName', e.target.value)}
-          />
-          <Field name="poolIcon" validate={validate.poolIcon}>
-            {({ field, meta, form }: FieldProps) => (
-              <ImageUpload
-                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"
-                placeholder="SVG (in square size)"
-                id="poolIcon"
-                height={144}
-              />
-            )}
-          </Field>
-        </Grid>
         <Grid gap={2}>
           <Field name="investorType" validate={validate.investorType}>
             {({ field, meta, form }: FieldProps) => (
@@ -115,6 +86,24 @@ export const PoolDetailsSection = () => {
             )}
           </Field>
         </Grid>
+        <Field name="poolIcon" validate={validate.poolIcon}>
+          {({ field, meta, form }: FieldProps) => (
+            <ImageUpload
+              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"
+              placeholder="SVG (in square size)"
+              id="poolIcon"
+              height={144}
+            />
+          )}
+        </Field>
       </StyledGrid>
 
       <Box mt={4} mb={3}>
diff --git a/centrifuge-app/src/pages/IssuerCreatePool/PoolRatings.tsx b/centrifuge-app/src/pages/IssuerCreatePool/PoolRatings.tsx
index fd8ea61eb9..bf9f1e8ac5 100644
--- a/centrifuge-app/src/pages/IssuerCreatePool/PoolRatings.tsx
+++ b/centrifuge-app/src/pages/IssuerCreatePool/PoolRatings.tsx
@@ -66,7 +66,7 @@ export const PoolRatingsSection = () => {
                           form.setFieldValue(`poolRatings.${index}.reportFile`, file)
                         }}
                         accept="application/pdf"
-                        label="Executive summary PDF"
+                        label="Rating report PDF"
                         placeholder="Choose file"
                         small
                         errorMessage={meta.touched && meta.error ? meta.error : undefined}
diff --git a/centrifuge-app/src/pages/IssuerCreatePool/PoolSetupSection.tsx b/centrifuge-app/src/pages/IssuerCreatePool/PoolSetupSection.tsx
index 5cd4b716f2..3d03ae7115 100644
--- a/centrifuge-app/src/pages/IssuerCreatePool/PoolSetupSection.tsx
+++ b/centrifuge-app/src/pages/IssuerCreatePool/PoolSetupSection.tsx
@@ -1,5 +1,5 @@
 import { PoolMetadataInput } from '@centrifuge/centrifuge-js'
-import { useCentEvmChainId, useWallet } from '@centrifuge/centrifuge-react'
+import { useCentEvmChainId, useCentrifugeUtils, useWallet } from '@centrifuge/centrifuge-react'
 import {
   Box,
   Checkbox,
@@ -14,12 +14,14 @@ import {
   Text,
   TextInput,
 } from '@centrifuge/fabric'
+import { isAddress } from '@polkadot/util-crypto'
 import { Field, FieldArray, FieldProps, useFormikContext } from 'formik'
 import { useEffect } from 'react'
 import { useTheme } from 'styled-components'
 import { FieldWithErrorMessage } from '../../../src/components/FieldWithErrorMessage'
 import { Tooltips } from '../../../src/components/Tooltips'
 import { feeCategories } from '../../../src/config'
+import { isEvmAddress } from '../../../src/utils/address'
 import { FormAddressInput } from './FormAddressInput'
 import { AddButton } from './PoolDetailsSection'
 import { CheckboxOption, Line, StyledGrid } from './PoolStructureSection'
@@ -48,7 +50,11 @@ const TaxDocument = () => {
         {({ field }: FieldProps) => (
           <Checkbox
             {...field}
-            label="Require investors to upload tax documents before signing the subscription agreement."
+            label={
+              <Text variant="body2">
+                Require investors to upload tax documents before signing the subscription agreement.
+              </Text>
+            }
             onChange={(val) => form.setFieldValue('onboarding.taxInfoRequired', val.target.checked ? true : false)}
           />
         )}
@@ -62,12 +68,14 @@ export const PoolSetupSection = () => {
   const chainId = useCentEvmChainId()
   const form = useFormikContext<CreatePoolValues>()
   const { values } = form
-  const { selectedAccount } = useWallet().substrate
+  const utils = useCentrifugeUtils()
+  const ctx = useWallet()
+  const { substrate, connectedType } = ctx
 
   useEffect(() => {
-    form.setFieldValue('adminMultisig.signers[0]', selectedAccount?.address)
-  }, [])
-  console.log(values)
+    form.setFieldValue('adminMultisig.signers[0]', substrate.selectedAddress)
+  }, [substrate, form])
+
   return (
     <Box>
       <Text variant="heading2" fontWeight={700}>
@@ -89,6 +97,7 @@ export const PoolSetupSection = () => {
               icon={<IconHelpCircle size="iconSmall" color={theme.colors.textSecondary} />}
               onChange={() => {
                 form.setFieldValue('adminMultisigEnabled', false)
+                form.setFieldValue('adminMultisig.signers', [substrate.selectedAddress])
               }}
               isChecked={!values.adminMultisigEnabled}
               id="singleMultisign"
@@ -133,18 +142,26 @@ export const PoolSetupSection = () => {
                       </Box>
                     ))
                   ) : (
-                    <Box mt={2}>
-                      <Field name={`adminMultisig.signers.0`} validate={validate.addressValidate}>
-                        {({ field }: FieldProps) => (
-                          <FieldWithErrorMessage
-                            {...field}
-                            as={TextInput}
-                            placeholder="Type address..."
-                            onBlur={field.onBlur}
-                          />
-                        )}
-                      </Field>
-                    </Box>
+                    <Field name={`adminMultisig.signers.0`} validate={validate.addressValidate}>
+                      {({ field, form }: FieldProps) => {
+                        const isValidAddress =
+                          connectedType === 'evm' ? isEvmAddress(field.value) : isAddress(field.value)
+
+                        return (
+                          <Box mt={2}>
+                            <FieldWithErrorMessage
+                              {...field}
+                              as={TextInput}
+                              placeholder="Type address..."
+                              value={isValidAddress ? utils.formatAddress(field.value) : field.value}
+                              onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                                form.setFieldValue(field.name, e.target.value)
+                              }
+                            />
+                          </Box>
+                        )
+                      }}
+                    </Field>
                   )}
                   {values.adminMultisigEnabled && (
                     <Box display="flex" justifyContent="flex-end" mt={2}>
@@ -280,7 +297,7 @@ export const PoolSetupSection = () => {
         {({ push, remove }) => (
           <>
             {values.poolFees.map((_, index) => {
-              if (index === 0) return
+              if (index === 0) return null
               return (
                 <Box mt={4} mb={3} key={index}>
                   <StyledGrid mt={3} gap={1}>
@@ -308,7 +325,10 @@ export const PoolSetupSection = () => {
                             onBlur={field.onBlur}
                             errorMessage={meta.touched && meta.error ? meta.error : undefined}
                             value={field.value}
-                            options={feeCategories.map((cat) => ({ label: cat, value: cat }))}
+                            options={[
+                              { label: 'Please select', value: '' },
+                              ...feeCategories.map((cat) => ({ label: cat, value: cat })),
+                            ]}
                           />
                         )}
                       </Field>
diff --git a/centrifuge-app/src/pages/IssuerCreatePool/PoolStructureSection.tsx b/centrifuge-app/src/pages/IssuerCreatePool/PoolStructureSection.tsx
index 4e047c0191..902f6c39b5 100644
--- a/centrifuge-app/src/pages/IssuerCreatePool/PoolStructureSection.tsx
+++ b/centrifuge-app/src/pages/IssuerCreatePool/PoolStructureSection.tsx
@@ -180,7 +180,7 @@ export const PoolStructureSection = () => {
       </Text>
       <StyledGrid gridTemplateColumns={['1fr', '1fr', '1fr 1fr']} gap={3} mt={2}>
         <Box>
-          <Text variant="body2">Pool type *</Text>
+          <Text variant="body2">Pool structure *</Text>
           <CheckboxOption
             height={113}
             name="poolStructure"
@@ -196,6 +196,17 @@ export const PoolStructureSection = () => {
             disabled
             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 mt={2}>
+            <FieldWithErrorMessage
+              name="poolName"
+              as={TextInput}
+              label="Pool name*"
+              placeholder="Type here..."
+              maxLength={100}
+              validate={validate.poolName}
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) => form.setFieldValue('poolName', e.target.value)}
+            />
+          </Box>
         </Box>
         <Box>
           <Text variant="body2">Define tranche structure *</Text>
@@ -269,7 +280,7 @@ export const PoolStructureSection = () => {
               {({ field, meta, form }: FieldProps) => (
                 <Select
                   name="subAssetClass"
-                  label="Secondary asset class"
+                  label="Secondary asset class*"
                   onChange={(event) => form.setFieldValue('subAssetClass', event.target.value)}
                   onBlur={field.onBlur}
                   errorMessage={meta.touched && meta.error ? meta.error : undefined}
diff --git a/centrifuge-app/src/pages/IssuerCreatePool/index.tsx b/centrifuge-app/src/pages/IssuerCreatePool/index.tsx
index 09d89dc8b4..f1a536e637 100644
--- a/centrifuge-app/src/pages/IssuerCreatePool/index.tsx
+++ b/centrifuge-app/src/pages/IssuerCreatePool/index.tsx
@@ -15,7 +15,7 @@ import { Box, Button, Dialog, Step, Stepper, Text } from '@centrifuge/fabric'
 import { createKeyMulti, sortAddresses } from '@polkadot/util-crypto'
 import BN from 'bn.js'
 import { Form, FormikProvider, useFormik } from 'formik'
-import { useEffect, useRef, useState } from 'react'
+import { useCallback, useEffect, useRef, useState } from 'react'
 import { useNavigate } from 'react-router'
 import { combineLatest, firstValueFrom, switchMap, tap } from 'rxjs'
 import styled, { useTheme } from 'styled-components'
@@ -76,6 +76,7 @@ const txMessage = {
 const IssuerCreatePoolPage = () => {
   const theme = useTheme()
   const formRef = useRef<HTMLFormElement>(null)
+  const containerRef = useRef<HTMLDivElement>(null)
   const isSmall = useIsAboveBreakpoint('S')
   const address = useAddress('substrate')
   const navigate = useNavigate()
@@ -127,7 +128,7 @@ const IssuerCreatePoolPage = () => {
       // It can take a second for the new data to come in after creating the pool
       navigate(`/issuer/${poolId}`)
     }
-  }, [poolId, pools])
+  }, [poolId, pools, navigate])
 
   const { execute: createProxies, isLoading: createProxiesIsPending } = useCentrifugeTransaction(
     `${txMessage[createType]} 1/2`,
@@ -426,33 +427,44 @@ const IssuerCreatePoolPage = () => {
 
   const { values, errors } = form
 
-  const checkStepCompletion = (stepNumber: number) => {
-    const fields = stepFields[stepNumber]
-    return fields.every(
-      (field) =>
-        values[field as keyof typeof values] !== null &&
-        values[field as keyof typeof values] !== '' &&
-        !errors[field as keyof typeof errors]
-    )
-  }
+  const checkStepCompletion = useCallback(
+    (stepNumber: number) => {
+      const fields = stepFields[stepNumber]
 
-  const handleNextStep = () => {
-    if (step === 3) {
-      form.handleSubmit()
-    } else {
-      setStep((prevStep) => prevStep + 1)
-    }
-  }
+      let isValid = fields.every((field) => {
+        const value = values[field as keyof typeof values]
+        const error = errors[field as keyof typeof errors]
+        return value !== null && value !== '' && !error
+      })
+
+      if (values.issuerCategories.length > 1 && errors.issuerCategories) {
+        isValid = false
+      }
+
+      if (values.poolRatings.length > 1 && errors.poolRatings) {
+        isValid = false
+      }
+
+      return isValid
+    },
+    [values, errors]
+  )
 
   useEffect(() => {
     setStepCompleted((prev) => ({
       ...prev,
       [step]: checkStepCompletion(step),
     }))
-  }, [values, errors, step, stepFields])
+  }, [values, errors, step, checkStepCompletion])
+
+  useEffect(() => {
+    if (containerRef.current) {
+      containerRef.current.scrollTo({ top: 0, behavior: 'smooth' })
+    }
+  }, [step, containerRef])
 
   return (
-    <>
+    <div ref={containerRef} style={{ maxHeight: '100vh', overflowY: 'auto' }}>
       <PreimageHashDialog
         preimageHash={preimageHash}
         open={isPreimageDialogOpen}
@@ -508,15 +520,21 @@ const IssuerCreatePoolPage = () => {
                   Previous
                 </Button>
               )}
-              <Button
-                style={{ width: 163 }}
-                small
-                onClick={handleNextStep}
-                loading={createProxiesIsPending || transactionIsPending || form.isSubmitting}
-                disabled={step === 3 ? !(Object.keys(errors).length === 0) : false}
-              >
-                {step === 3 ? 'Create pool' : 'Next'}
-              </Button>
+              {step === 3 ? (
+                <Button
+                  style={{ width: 163 }}
+                  small
+                  onClick={() => form.handleSubmit()}
+                  loading={createProxiesIsPending || transactionIsPending || form.isSubmitting}
+                  disabled={Object.keys(errors).length > 0}
+                >
+                  Create pool
+                </Button>
+              ) : (
+                <Button style={{ width: 163 }} small onClick={() => setStep((prevStep) => prevStep + 1)}>
+                  Next
+                </Button>
+              )}
             </Box>
           </StyledBox>
         </Form>
@@ -540,7 +558,7 @@ const IssuerCreatePoolPage = () => {
           </Box>
         </Dialog>
       )}
-    </>
+    </div>
   )
 }
 
diff --git a/centrifuge-app/src/pages/IssuerCreatePool/types.ts b/centrifuge-app/src/pages/IssuerCreatePool/types.ts
index cacc80029e..dc58457501 100644
--- a/centrifuge-app/src/pages/IssuerCreatePool/types.ts
+++ b/centrifuge-app/src/pages/IssuerCreatePool/types.ts
@@ -31,7 +31,7 @@ export const createEmptyTranche = (trancheName: string): Tranche => ({
   interestRate: 0,
   minRiskBuffer: trancheName === 'Junior' ? '' : 0,
   minInvestment: 1000,
-  apy: '90d',
+  apy: 'target',
   apyPercentage: null,
 })
 
diff --git a/centrifuge-app/src/pages/IssuerCreatePool/validate.ts b/centrifuge-app/src/pages/IssuerCreatePool/validate.ts
index af2ca35979..9822061509 100644
--- a/centrifuge-app/src/pages/IssuerCreatePool/validate.ts
+++ b/centrifuge-app/src/pages/IssuerCreatePool/validate.ts
@@ -114,6 +114,17 @@ export const validateValues = (values: CreatePoolValues) => {
     })
   }
 
+  if (values.issuerCategories.length > 1) {
+    values.issuerCategories.forEach((category, i) => {
+      if (category.type === '') {
+        errors = setIn(errors, `issuerCategories.${i}.type`, 'Field is required')
+      }
+      if (category.value === '') {
+        errors = setIn(errors, `issuerCategories.${i}.value`, 'Field is required')
+      }
+    })
+  }
+
   if (values.poolRatings.length > 1) {
     values.poolRatings.forEach((rating, i) => {
       if (rating.agency === '') {