Create pool bugs and fixes

centrifuge-app/src/pages/IssuerCreatePool/PoolDetailsSection.tsx

@@ -138,7 +138,7 @@ export const PoolDetailsSection = () => {
                 <FileUpload
                   file={field.value}
                   onFileChange={(file) => form.setFieldValue('issuerLogo', file)}
-                  accept="image/*"
+                  accept="image/png, image/jpeg, image/jpg"
                   fileTypeText="SVG, PNG, or JPG (max. 1MB; 480x480px)"
                   label="Issuer logo"
                 />
@@ -164,7 +164,7 @@ export const PoolDetailsSection = () => {
                 />
               )}
             </Field>
-            <Field name="issuerShortDescription" validate={!isTestEnv && validate.issuerShortDescription}>
+            <Field name="issuerShortDescription" validate={validate.issuerShortDescription}>
               {({ field, meta, form }: FieldProps) => (
                 <FieldWithErrorMessage
                   name="issuerShortDescription"
@@ -181,10 +181,10 @@ export const PoolDetailsSection = () => {
             </Field>
           </Grid>
           <Box gridColumn="span 2">
-            <Field name="issuerDescription" validate={!isTestEnv && validate.issuerDescription}>
+            <Field name="issuerDescription" validate={validate.issuerDescription}>
               {({ field, meta, form }: FieldProps) => (
                 <FieldWithErrorMessage
-                  validate={!isTestEnv && validate.issuerDescription}
+                  validate={validate.issuerDescription}
                   name="issuerDescription"
                   as={TextAreaInput}
                   label="Overview page description (max. 3000 characters)*"
@@ -202,13 +202,15 @@ export const PoolDetailsSection = () => {
               label="Website URL"
               placeholder="www.example.com"
               isUrl
+              validate={validate.websiteNotRequired()}
             />
             <FieldWithErrorMessage
               name="forum"
               as={TextInput}
               label="Governance forum"
               placeholder="www.example.com"
               isUrl
+              validate={validate.websiteNotRequired()}
             />
             <FieldWithErrorMessage
               name="email"
@@ -275,7 +277,14 @@ export const PoolDetailsSection = () => {
       <Box mt={4} mb={3}>
         <Text variant="heading2">Service analysis</Text>
         <StyledGrid gridTemplateColumns={['1fr', '1fr 1fr']} gap={3} mt={3}>
-          <FieldWithErrorMessage name="reportUrl" as={TextInput} label="Report URL" placeholder="Type here..." isUrl />
+          <FieldWithErrorMessage
+            name="reportUrl"
+            as={TextInput}
+            label="Report URL"
+            placeholder="Type here..."
+            isUrl
+            validate={validate.websiteNotRequired()}
+          />
           <FieldWithErrorMessage
             name="reportAuthorName"
             as={TextInput}
@@ -298,7 +307,7 @@ export const PoolDetailsSection = () => {
                 }}
                 label="Reviewer avatar"
                 placeholder="Choose file"
-                accept="image/*"
+                accept="image/png, image/jpeg, image/jpg"
                 small
               />
             )}

centrifuge-app/src/pages/IssuerCreatePool/PoolSetupSection.tsx

@@ -57,6 +57,8 @@ export const PoolSetupSection = () => {
   const form = useFormikContext<PoolMetadataInput>()
   const { values } = form
 
+  console.log(values)
+
   return (
     <Box>
       <Text variant="heading2" fontWeight={700}>
@@ -410,26 +412,7 @@ export const PoolSetupSection = () => {
           )}
           {values.onboardingExperience === 'external' && (
             <Box>
-              {values.tranches.map((tranche, index) => (
-                <Field key={index} name={`onboarding.tranches.${tranche.tokenName}`}>
-                  {({ field, meta }: FieldProps) => (
-                    <Box mb={4}>
-                      <FieldWithErrorMessage
-                        {...field}
-                        as={TextInput}
-                        name={`onboarding.tranches.${tranche.tokenName}`}
-                        value={field.value}
-                        label={<Text variant="heading4">Onboarding URL {tranche.tokenName}</Text>}
-                        isUrl
-                        placeholder="www.example.com"
-                        onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
-                          form.setFieldValue(`onboarding.tranches.${tranche.tokenName}`, e.target.value)
-                        }
-                      />
-                    </Box>
-                  )}
-                </Field>
-              ))}
+              <Field as={TextInput} name="onboarding.externalOnboardingUrl" label="External onboarding URL" />
               <TaxDocument />
             </Box>
           )}

centrifuge-app/src/pages/IssuerCreatePool/PoolStructureSection.tsx

@@ -297,7 +297,7 @@ export const PoolStructureSection = () => {
                       placeholder={getTrancheName(index)}
                       maxLength={30}
                       name={`tranches.${index}.tokenName`}
-                      disabled={values.tranches.length === 1}
+                      disabled
                       value={getTrancheName(index)}
                       onChange={(e: React.ChangeEvent<HTMLInputElement>) => handleTrancheNameChange(e, index, form)}
                     />
@@ -312,7 +312,7 @@ export const PoolStructureSection = () => {
                           <Tooltips type="minimumInvestment" label={<Text variant="heading4">Min. investment*</Text>} />
                         }
                         placeholder="0.00"
-                        currency={values.currency}
+                        currency={values.assetDenomination}
                         errorMessage={meta.touched ? meta.error : undefined}
                         onChange={(value) => form.setFieldValue(field.name, value)}
                         onBlur={() => form.setFieldTouched(field.name, true)}
@@ -358,8 +358,8 @@ export const PoolStructureSection = () => {
                           as={NumberInput}
                           placeholder="0.00"
                           symbol="%"
-                          name={`tranches.${index}.interestRate`}
-                          validate={validate.interestRate}
+                          name={`tranches.${index}.apyPercentage`}
+                          validate={validate.apyPercentage}
                         />
                       </Box>
                     </Grid>
@@ -392,7 +392,7 @@ export const PoolStructureSection = () => {
                             />
                           }
                           placeholder="0.00"
-                          currency={values.currency}
+                          currency={values.assetDenomination}
                           errorMessage={meta.touched ? meta.error : undefined}
                           onChange={(value) => form.setFieldValue(field.name, value)}
                           onBlur={() => form.setFieldTouched(field.name, true)}
@@ -402,7 +402,7 @@ export const PoolStructureSection = () => {
                   </Box>
                   <Box width="227px">
                     <Field name={`tranches.${index}.apy`}>
-                      {({ field, form }: FieldProps) => (
+                      {({ field }: FieldProps) => (
                         <TextInput
                           {...field}
                           label={

centrifuge-app/src/pages/IssuerCreatePool/index.tsx

@@ -33,7 +33,6 @@
 import { useCreatePoolFee } from '../../../src/utils/useCreatePoolFee'
 import { usePoolCurrencies } from '../../../src/utils/useCurrencies'
 import { useIsAboveBreakpoint } from '../../../src/utils/useIsAboveBreakpoint'
-import { usePools } from '../../../src/utils/usePools'
 import { config } from '../../config'
 import { PoolDetailsSection } from './PoolDetailsSection'
 import { PoolSetupSection } from './PoolSetupSection'
@@ -42,6 +41,8 @@
 import { pinFileIfExists, pinFiles } from './utils'
 import { validateValues } from './validate'
 
+const PROPOSAL_URL = 'https://centrifuge.subsquare.io/democracy/referenda'
+
 const StyledBox = styled(Box)`
   padding: 48px 80px 0px 80px;
   @media (max-width: ${({ theme }) => theme.breakpoints.S}) {
@@ -61,7 +62,7 @@
     'issuerShortDescription',
     'issuerDescription',
   ],
-  3: ['investmentDetails', 'liquidityDetails'],
+  3: ['assetOriginators', 'adminMultisig'],
 }
 
 const txMessage = {
@@ -79,7 +80,6 @@
   const currencies = usePoolCurrencies()
   const centrifuge = useCentrifuge()
   const api = useCentrifugeApi()
-  const pools = usePools()
   const { poolCreationType } = useDebugFlags()
   const consts = useCentrifugeConsts()
   const { chainDecimals } = useCentrifugeConsts()
@@ -95,7 +95,7 @@
   const [createdModal, setCreatedModal] = useState(false)
   const [preimageHash, setPreimageHash] = useState('')
   const [isPreimageDialogOpen, setIsPreimageDialogOpen] = useState(false)
-  const [createdPoolId, setCreatedPoolId] = useState('')
+  const [proposalId, setProposalId] = useState(null)
 
   useEffect(() => {
     if (createType === 'notePreimage') {
@@ -106,6 +106,7 @@
             const event = events.find(({ event }) => api.events.preimage.Noted.is(event))
             const parsedEvent = event?.toJSON() as any
             if (!parsedEvent) return false
+            console.info('Preimage hash: ', parsedEvent.event.data[0])
             setPreimageHash(parsedEvent.event.data[0])
             setIsPreimageDialogOpen(true)
           })
@@ -115,16 +116,6 @@
     }
   }, [centrifuge, createType])
 
-  useEffect(() => {
-    if (createdPoolId && pools?.find((p) => p.id === createdPoolId)) {
-      // Redirecting only when we find the newly created pool in the data from usePools
-      // Otherwise the Issue Overview page will throw an error when it can't find the pool
-      // It can take a second for the new data to come in after creating the pool
-      navigate(`/issuer/${createdPoolId}`)
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [pools, createdPoolId])
-
   const { execute: createProxies, isLoading: createProxiesIsPending } = useCentrifugeTransaction(
     `${txMessage[createType]} 1/2`,
     (cent) => {
@@ -236,11 +227,16 @@
           setIsMultisigDialogOpen(true)
         }
         const [, , , , poolId] = args
-        console.log(poolId, result)
         if (createType === 'immediate') {
-          setCreatedPoolId(poolId)
+          navigate(`/pools/${poolId}`)
         } else {
-          setCreatedModal(true)
+          const event = result.events.find(({ event }) => api.events.democracy.Proposed.is(event))
+          if (event) {
+            const eventData = event.toHuman() as any
+            const proposalId = eventData.event.data.proposalIndex.replace(/\D/g, '')
+            setCreatedModal(true)
+            setProposalId(proposalId)
+          }
         }
       },
     }
@@ -286,12 +282,14 @@
       }
 
       // Pool ratings
-      if (values.poolRatings) {
+      if (values.poolRatings[0].agency === '') {
+        metadataValues.poolRatings = []
+      } else {
         const newRatingReports = await Promise.all(
           values.poolRatings.map((rating) => pinFileIfExists(centrifuge, rating.reportFile ?? null))
         )
 
         const ratings = values.poolRatings.map((rating, index) => {
           const pinnedReport = newRatingReports[index]
           return {
             agency: rating.agency ?? '',
@@ -300,8 +298,6 @@
             reportFile: pinnedReport ? { uri: pinnedReport.uri, mime: rating.reportFile?.type ?? '' } : null,
           }
         })
-
-        metadataValues.poolRatings = ratings
       }
 
       // Tranches
@@ -345,7 +341,7 @@
             destination: fee.walletAddress,
             editor: fee.feeType === 'chargedUpTo' ? { account: fee.walletAddress } : 'Root',
             feeType: {
               [fee.feeType]: { limit: { ['ShareOfPortfolioValuation']: Rate.fromPercent(fee.percentOfNav) } },
             },
           },
         ])
@@ -431,8 +427,14 @@
       ...prev,
       [step]: checkStepCompletion(step),
     }))
   }, [values, step])
 
+  const isCreatePoolEnabled =
+    values.assetOriginators.length > 0 &&
+    values.assetOriginators[0] !== '' &&
+    values.adminMultisig.signers.length > 0 &&
+    values.adminMultisig.signers[0] !== ''
+
   return (
     <>
       <PreimageHashDialog
@@ -495,6 +497,7 @@
                 small
                 onClick={handleNextStep}
                 loading={createProxiesIsPending || transactionIsPending || form.isSubmitting}
+                disabled={step === 3 && !isCreatePoolEnabled} // Disable the button if on step 3 and conditions aren't met
               >
                 {step === 3 ? 'Create pool' : 'Next'}
               </Button>
@@ -514,7 +517,9 @@
               <Button onClick={() => setCreatedModal(false)} variant="inverted" style={{ width: 140, marginRight: 16 }}>
                 Close
               </Button>
-              <Button style={{ width: 160 }}>See proposal</Button>
+              <Button style={{ width: 160 }} onClick={() => navigate(`${PROPOSAL_URL}/${proposalId}`)}>
+                See proposal
+              </Button>
             </Box>
           </Box>
         </Dialog>