Skip to content

Commit

Permalink
Feedback changes
Browse files Browse the repository at this point in the history
  • Loading branch information
@kattylucy
kattylucy committed Dec 9, 2024
1 parent 6b049e0 commit bde6d62
Show file tree
Hide file tree
Showing 7 changed files with 139 additions and 127 deletions.
2 changes: 0 additions & 2 deletions centrifuge-app/src/pages/IssuerCreatePool/PoolDetailsSection.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,8 +29,6 @@ export const PoolDetailsSection = () => {
const form = useFormikContext<PoolMetadataInput>()
const createLabel = (label: string) => `${label}${isTestEnv ? '' : '*'}`

console.log(form.values)

return (
<Box>
<Text variant="heading2" fontWeight={700}>
Expand Down
184 changes: 98 additions & 86 deletions centrifuge-app/src/pages/IssuerCreatePool/PoolSetupSection.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { evmToSubstrateAddress, PoolMetadataInput } from '@centrifuge/centrifuge-js'
import { useCentEvmChainId } from '@centrifuge/centrifuge-react'
import { useCentEvmChainId, useWallet } from '@centrifuge/centrifuge-react'
import {
Box,
Checkbox,
Expand All @@ -15,13 +15,15 @@ import {
TextInput,
} from '@centrifuge/fabric'
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 { AddButton } from './PoolDetailsSection'
import { CheckboxOption, Line, StyledGrid } from './PoolStructureSection'
import { CreatePoolValues } from './types'
import { validate } from './validate'

const FEE_TYPES = [
Expand Down Expand Up @@ -55,8 +57,13 @@ const TaxDocument = () => {
export const PoolSetupSection = () => {
const theme = useTheme()
const chainId = useCentEvmChainId()
const form = useFormikContext<PoolMetadataInput>()
const form = useFormikContext<CreatePoolValues>()
const { values } = form
const { selectedAccount } = useWallet().substrate

useEffect(() => {
form.setFieldValue('adminMultisig.signers[0]', selectedAccount?.address)
}, [])

Check warning on line 66 in centrifuge-app/src/pages/IssuerCreatePool/PoolSetupSection.tsx

View workflow job for this annotation

GitHub Actions / build-app 

React Hook useEffect has missing dependencies: 'form' and 'selectedAccount?.address'. Either include them or remove the dependency array

Check warning on line 66 in centrifuge-app/src/pages/IssuerCreatePool/PoolSetupSection.tsx

View workflow job for this annotation

GitHub Actions / ff-prod / build-app 

React Hook useEffect has missing dependencies: 'form' and 'selectedAccount?.address'. Either include them or remove the dependency array

return (
<Box>
Expand Down Expand Up @@ -127,9 +134,9 @@ export const PoolSetupSection = () => {
<Field name={`adminMultisig.signers.0`} validate={validate.addressValidate}>
{({ field }: FieldProps) => (
<FieldWithErrorMessage
{...field}
as={TextInput}
placeholder="Type address..."
{...field}
onBlur={field.onBlur}
/>
)}
Expand Down Expand Up @@ -168,7 +175,7 @@ export const PoolSetupSection = () => {
onBlur={field.onBlur}
errorMessage={meta.touched && meta.error ? meta.error : undefined}
value={field.value}
options={values.adminMultisig?.signers.map((_: string, i: number) => ({
options={values.adminMultisig?.signers.map((_: string | number, i: any) => ({
label: i + 1,
value: i + 1,
}))}
Expand Down Expand Up @@ -238,15 +245,15 @@ export const PoolSetupSection = () => {
<Grid gridTemplateColumns={['1fr', '1fr 1fr']} gap={3}>
<Field
as={TextInput}
name={`poolFees.${1}.position`}
value="Top of waterfall"
name={`poolFees.${0}.position`}
value={values.poolFees[0].feePosition}
disabled
label={<Tooltips type="feePosition" label={<Text variant="heading4">Fee position</Text>} />}
/>
<Field
as={TextInput}
name={`poolFees.${1}.type`}
value="Fixed"
name={`poolFees.${0}.feeType`}
value={values.poolFees[0].feeType}
disabled
label={<Tooltips type="feeType" label={<Text variant="heading4">Fee type</Text>} />}
/>
Expand All @@ -255,97 +262,103 @@ export const PoolSetupSection = () => {
label={<Text variant="heading4">Fees in % of NAV</Text>}
symbol="%"
name={`poolFees.${1}.percentOfNav`}
value="0.4"
value={values.poolFees[0].percentOfNav}
disabled
/>
<Field
as={TextInput}
name={`poolFees.${1}.walletAddress`}
value={import.meta.env.REACT_APP_TREASURY}
value={values.poolFees[0].walletAddress}
disabled
label={<Text variant="heading4">Wallet address</Text>}
/>
</Grid>
</StyledGrid>
</Box>

{/* POOL FEES */}
<FieldArray name="poolFees">
{({ push, remove }) => (
<>
{values.poolFees.map((_, index) => (
<Box mt={4} mb={3} key={index}>
<StyledGrid mt={3} gap={1}>
<Box display="flex" justifyContent="space-between" alignItems="center">
<Text variant="heading3">Pool fees {index + 1}</Text>
<IconButton onClick={() => remove(index)}>
<IconTrash color="textSecondary" />
</IconButton>
</Box>
<Line />
<Grid gridTemplateColumns={['1fr', '1fr 1fr']} gap={3}>
<FieldWithErrorMessage
as={TextInput}
label="Name"
maxLength={30}
name={`poolFees.${index}.name`}
placeholder="Type here..."
/>
<Field name={`poolFees.${index}.category`}>
{({ field, meta }: FieldProps) => (
<Select
name="category"
label="Category"
onChange={(event) => form.setFieldValue(`poolFees.${index}.category`, event.target.value)}
onBlur={field.onBlur}
errorMessage={meta.touched && meta.error ? meta.error : undefined}
value={field.value}
options={feeCategories.map((cat) => ({ label: cat, value: cat }))}
/>
)}
</Field>
<Field name={`poolFees.${index}.feePosition`}>
{({ field, meta }: FieldProps) => (
<Select
label="Fee position"
name={`poolFees.${index}.feePosition`}
onChange={(event) => form.setFieldValue(`poolFees.${index}.feePosition`, event.target.value)}
onBlur={field.onBlur}
errorMessage={meta.touched && meta.error ? meta.error : undefined}
value={field.value}
options={FEE_POSISTIONS}
/>
)}
</Field>
<Field name={`poolFees.${index}.feeType`}>
{({ field, meta }: FieldProps) => (
<Select
label="Fee type"
name={`poolFees.${index}.feeType`}
onChange={(event) => form.setFieldValue(`poolFees.${index}.feeType`, event.target.value)}
onBlur={field.onBlur}
errorMessage={meta.touched && meta.error ? meta.error : undefined}
value={field.value}
options={FEE_TYPES}
/>
)}
</Field>
<FieldWithErrorMessage
as={NumberInput}
label="Max fees in % of NAV"
symbol="%"
name={`poolFees.${index}.percentOfNav`}
placeholder="Type here..."
/>
<FieldWithErrorMessage
as={TextInput}
label="Wallet address"
name={`poolFees.${index}.walletAddress`}
placeholder="Type here..."
/>
</Grid>
</StyledGrid>
</Box>
))}
{values.poolFees.map((_, index) => {
if (index === 0) return

Check warning on line 284 in centrifuge-app/src/pages/IssuerCreatePool/PoolSetupSection.tsx

View workflow job for this annotation

GitHub Actions / build-app 

Array.prototype.map() expects a return value from arrow function

Check warning on line 284 in centrifuge-app/src/pages/IssuerCreatePool/PoolSetupSection.tsx

View workflow job for this annotation

GitHub Actions / ff-prod / build-app 

Array.prototype.map() expects a return value from arrow function
return (
<Box mt={4} mb={3} key={index}>
<StyledGrid mt={3} gap={1}>
<Box display="flex" justifyContent="space-between" alignItems="center">
<Text variant="heading3">Pool fees {index + 1}</Text>
<IconButton onClick={() => remove(index)}>
<IconTrash color="textSecondary" />
</IconButton>
</Box>
<Line />
<Grid gridTemplateColumns={['1fr', '1fr 1fr']} gap={3}>
<FieldWithErrorMessage
as={TextInput}
label="Name"
maxLength={30}
name={`poolFees.${index}.name`}
placeholder="Type here..."
/>
<Field name={`poolFees.${index}.category`}>
{({ field, meta }: FieldProps) => (
<Select
name="category"
label="Category"
onChange={(event) => form.setFieldValue(`poolFees.${index}.category`, event.target.value)}
onBlur={field.onBlur}
errorMessage={meta.touched && meta.error ? meta.error : undefined}
value={field.value}
options={feeCategories.map((cat) => ({ label: cat, value: cat }))}
/>
)}
</Field>
<Field name={`poolFees.${index}.feePosition`}>
{({ field, meta }: FieldProps) => (
<Select
label="Fee position"
name={`poolFees.${index}.feePosition`}
onChange={(event) =>
form.setFieldValue(`poolFees.${index}.feePosition`, event.target.value)
}
onBlur={field.onBlur}
errorMessage={meta.touched && meta.error ? meta.error : undefined}
value={field.value}
options={FEE_POSISTIONS}
/>
)}
</Field>
<Field name={`poolFees.${index}.feeType`}>
{({ field, meta }: FieldProps) => (
<Select
label="Fee type"
name={`poolFees.${index}.feeType`}
onChange={(event) => form.setFieldValue(`poolFees.${index}.feeType`, event.target.value)}
onBlur={field.onBlur}
errorMessage={meta.touched && meta.error ? meta.error : undefined}
value={field.value}
options={FEE_TYPES}
/>
)}
</Field>
<FieldWithErrorMessage
as={NumberInput}
label="Max fees in % of NAV"
symbol="%"
name={`poolFees.${index}.percentOfNav`}
placeholder="Type here..."
/>
<FieldWithErrorMessage
as={TextInput}
label="Wallet address"
name={`poolFees.${index}.walletAddress`}
placeholder="Type here..."
/>
</Grid>
</StyledGrid>
</Box>
)
})}
<Box display="flex" justifyContent="flex-end" mt={2}>
<AddButton
onClick={() =>
Expand Down Expand Up @@ -399,7 +412,7 @@ export const PoolSetupSection = () => {
{({ field, meta }: FieldProps) => (
<Box mb={4}>
<FileUpload
name={`onboarding.${tranche.tokenName}`}
name={`onboarding.tranches.${tranche.tokenName}`}
file={field.value}
onFileChange={async (file) => {
form.setFieldTouched(`onboarding.tranches.${tranche.tokenName}`, true, false)
Expand All @@ -409,7 +422,6 @@ export const PoolSetupSection = () => {
errorMessage={meta.touched && meta.error ? meta.error : undefined}
accept="application/pdf"
small
onBlur={field.onBlur}
/>
</Box>
)}
Expand Down
51 changes: 25 additions & 26 deletions centrifuge-app/src/pages/IssuerCreatePool/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import {
AddFee,
CurrencyBalance,
CurrencyKey,
FileType,
Expand Down Expand Up @@ -37,7 +38,7 @@ import { config } from '../../config'
import { PoolDetailsSection } from './PoolDetailsSection'
import { PoolSetupSection } from './PoolSetupSection'
import { Line, PoolStructureSection } from './PoolStructureSection'
import { CreatePoolValues, initialValues, PoolFee } from './types'
import { CreatePoolValues, initialValues } from './types'
import { pinFileIfExists, pinFiles } from './utils'
import { validateValues } from './validate'

Expand Down Expand Up @@ -324,31 +325,35 @@ const IssuerCreatePoolPage = () => {

// Pool fees
const feeId = await firstValueFrom(centrifuge.pools.getNextPoolFeeId())
const metadataPoolFees: Pick<PoolFee, 'name' | 'id' | 'feePosition' | 'feeType'>[] = []
const feeInput: PoolFeesCreatePool = []

values.poolFees.forEach((fee, index) => {
metadataPoolFees.push({
const poolFees: AddFee['fee'][] = values.poolFees.map((fee) => {
return {
name: fee.name,
id: feeId ? feeId + index : 0,
feePosition: fee.feePosition,
destination: fee.walletAddress,
amount: Rate.fromPercent(fee.percentOfNav),
feeType: fee.feeType,
})

feeInput.push([
limit: 'ShareOfPortfolioValuation',
account: fee.feeType === 'chargedUpTo' ? fee.walletAddress : undefined,
feePosition: fee.feePosition,
}
})
metadataValues.poolFees = poolFees.map((fee, i) => ({
name: fee.name,
id: feeId + i,
feePosition: fee.feePosition,
feeType: fee.feeType,
}))

const feeInput = poolFees.map((fee) => {
return [
'Top',
{
destination: fee.walletAddress,
editor: fee.feeType === 'chargedUpTo' ? { account: fee.walletAddress } : 'Root',
feeType: {
[fee.feeType]: { limit: { ['ShareOfPortfolioValuation']: Rate.fromPercent(fee.percentOfNav) } },
},
destination: fee.destination,
editor: fee?.account ? { account: fee.account } : 'Root',
feeType: { [fee.feeType]: { limit: { [fee.limit]: fee?.amount } } },
},
])
]
})

metadataValues.poolFees = metadataPoolFees

// Multisign
metadataValues.adminMultisig =
values.adminMultisigEnabled && values.adminMultisig.threshold > 1
Expand Down Expand Up @@ -429,12 +434,6 @@ const IssuerCreatePoolPage = () => {
}))
}, [values, step])

Check warning on line 435 in centrifuge-app/src/pages/IssuerCreatePool/index.tsx

View workflow job for this annotation

GitHub Actions / build-app 

React Hook useEffect has a missing dependency: 'checkStepCompletion'. Either include it or remove the dependency array

Check warning on line 435 in centrifuge-app/src/pages/IssuerCreatePool/index.tsx

View workflow job for this annotation

GitHub Actions / ff-prod / build-app 

React Hook useEffect has a missing dependency: 'checkStepCompletion'. Either include it or remove the dependency array

const isCreatePoolEnabled =
values.assetOriginators.length > 0 &&
values.assetOriginators[0] !== '' &&
values.adminMultisig.signers.length > 0 &&
values.adminMultisig.signers[0] !== ''

return (
<>
<PreimageHashDialog
Expand Down Expand Up @@ -497,7 +496,7 @@ const IssuerCreatePoolPage = () => {
small
onClick={handleNextStep}
loading={createProxiesIsPending || transactionIsPending || form.isSubmitting}
disabled={step === 3 && !isCreatePoolEnabled} // Disable the button if on step 3 and conditions aren't met
disabled={step === 3}
>
{step === 3 ? 'Create pool' : 'Next'}
</Button>
Expand Down
Loading

0 comments on commit bde6d62

Please sign in to comment.