Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,195 @@ | ||
| import { PoolMetadataInput } from '@centrifuge/centrifuge-js' | ||
| import { Box, 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' | ||
|
|
||
| export const Line = () => { | ||
| const theme = useTheme() | ||
| return <Box border={`.5px solid ${theme.colors.borderPrimary}`} width="100%" /> | ||
| } | ||
|
|
||
| export const PoolDetailsSection = () => { | ||
| const theme = useTheme() | ||
|
Check warning on line 17 in centrifuge-app/src/pages/IssuerCreatePool/PoolDetailsSection.tsx
|
||
| const form = useFormikContext<PoolMetadataInput>() | ||
|
Check warning on line 18 in centrifuge-app/src/pages/IssuerCreatePool/PoolDetailsSection.tsx
|
||
| const createLabel = (label: string) => `${label}${isTestEnv ? '' : '*'}` | ||
|
Check warning on line 19 in centrifuge-app/src/pages/IssuerCreatePool/PoolDetailsSection.tsx
|
||
|
|
||
| return ( | ||
| <Box> | ||
| <Text variant="heading2" fontWeight={700}> | ||
| Pool Details | ||
| </Text> | ||
| <StyledGrid gridTemplateColumns={['1fr', '1fr 1fr']} gap={3} mt={2}> | ||
| <Grid gap={2}> | ||
| <FieldWithErrorMessage | ||
| validate={validate.poolName} | ||
| name="poolName" | ||
| as={TextInput} | ||
| label="Pool name*" | ||
| placeholder="Type here..." | ||
| maxLength={100} | ||
| /> | ||
| <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> | ||
| </StyledGrid> | ||
| </Box> | ||
| </Box> | ||
| ) | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.