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 · Jan 20, 2025 · 001f3df · 001f3df
1 parent 76c8b70
commit 001f3df
Show file tree

Hide file tree

Showing 11 changed files with 161 additions and 100 deletions.
diff --git 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
+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
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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}