Skip to content

Commit

Permalink
Add image and description custom fields
Browse files Browse the repository at this point in the history
  • Loading branch information
@kattylucy
kattylucy committed Feb 10, 2025
1 parent 2d2713d commit d0dc5e0
Show file tree
Hide file tree
Showing 3 changed files with 106 additions and 59 deletions.
1 change: 1 addition & 0 deletions centrifuge-app/src/components/Dashboard/assets/AssetTemplateSection.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,7 @@ export function AssetTemplateSection({ label, input, name }: { label: string; in
max={input.max}
/>
)

default: {
const { type, ...rest } = input.type as any
return (
Expand Down
149 changes: 102 additions & 47 deletions centrifuge-app/src/components/Dashboard/assets/CreateAssetForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,20 @@ import {
Box,
Divider,
IconHelpCircle,
ImageUpload,
RadioButton,
Tabs,
TabsItem,
Text,
TextAreaInput,
TextInput,
} from '@centrifuge/fabric'
import { Field, FieldProps, useFormikContext } from 'formik'
import { useState } from 'react'
import { useTheme } from 'styled-components'
import { FieldWithErrorMessage } from '../../../../src/components/FieldWithErrorMessage'
import { Tooltips, tooltipText } from '../../../../src/components/Tooltips'
import { validate } from '../../../../src/pages/IssuerCreatePool/validate'
import { LoanTemplate } from '../../../../src/types'
import { useMetadata } from '../../../../src/utils/useMetadata'
import { AssetTemplateSection } from './AssetTemplateSection'
Expand All @@ -37,6 +41,8 @@ export function CreateAssetsForm() {
const sectionsName = templateMetadata?.sections?.map((s) => s.name) ?? []
const [selectedTabIndex, setSelectedTabIndex] = useState(0)

console.log(templateMetadata)

const renderBody = (index: number) => {
const sectionsAttrs =
templateMetadata?.sections
Expand All @@ -48,16 +54,27 @@ export function CreateAssetsForm() {
})
.flat() ?? []
const attrs = { ...templateMetadata?.attributes }
return sectionsAttrs.map((section) => {
if (section.index === index) {
const name = `attributes.${section.attr}`
return (
<Box mt={2} mb={2}>
<AssetTemplateSection label={attrs[section.attr].label} input={attrs[section.attr].input} name={name} />
</Box>
)
}
})
return (
<Box
p={2}
backgroundColor="backgroundSecondary"
borderRadius={8}
border={`1px solid ${theme.colors.borderPrimary}`}
mb={2}
>
{sectionsAttrs.map((section) => {

Check warning on line 65 in centrifuge-app/src/components/Dashboard/assets/CreateAssetForm.tsx

View workflow job for this annotation

GitHub Actions / build-app 

Array.prototype.map() expects a value to be returned at the end of arrow function

Check warning on line 65 in centrifuge-app/src/components/Dashboard/assets/CreateAssetForm.tsx

View workflow job for this annotation

GitHub Actions / ff-prod / build-app 

Array.prototype.map() expects a value to be returned at the end of arrow function
if (section.index === index) {
const name = `attributes.${section.attr}`
if (!attrs[section.attr]) return <></>
return (
<Box mt={2} mb={2}>
<AssetTemplateSection label={attrs[section.attr].label} input={attrs[section.attr].input} name={name} />
</Box>
)
}
})}
</Box>
)
}

return (
Expand Down Expand Up @@ -107,42 +124,44 @@ export function CreateAssetsForm() {
{hasTemplates && canCreateAssets && form.values.assetType !== 'cash' && (
<Box mt={3}>
{form.values.assetType === 'custom' && (
<Tabs selectedIndex={selectedTabIndex} onChange={(index) => setSelectedTabIndex(index)}>
<TabsItem styleOverrides={{ padding: '8px' }} showBorder>
<Field name="customType">
{({ field, form }: FieldProps) => (
<Box display="flex" alignItems="center" onClick={() => form.setFieldValue('customType', 'atPar')}>
<Text>At par</Text>
<Tooltips
type="atPar"
label={
<Box ml={1}>{<IconHelpCircle size="iconSmall" color={theme.colors.textSecondary} />}</Box>
}
/>
</Box>
)}
</Field>
</TabsItem>
<TabsItem styleOverrides={{ padding: '8px' }} showBorder>
<Field name="customType">
{({ field, form }: FieldProps) => (
<Box
display="flex"
alignItems="center"
onClick={() => form.setFieldValue('customType', 'discountedCashFlow')}
>
<Text>Discounted cash flow</Text>
<Tooltips
type="discountedCashFlow"
label={
<Box ml={1}>{<IconHelpCircle size="iconSmall" color={theme.colors.textSecondary} />}</Box>
}
/>
</Box>
)}
</Field>
</TabsItem>
</Tabs>
<Box mt={2} mb={2}>
<Tabs selectedIndex={selectedTabIndex} onChange={(index) => setSelectedTabIndex(index)}>
<TabsItem styleOverrides={{ padding: '8px' }} showBorder>
<Field name="customType">
{({ field, form }: FieldProps) => (
<Box display="flex" alignItems="center" onClick={() => form.setFieldValue('customType', 'atPar')}>
<Text>At par</Text>
<Tooltips
type="atPar"
label={
<Box ml={1}>{<IconHelpCircle size="iconSmall" color={theme.colors.textSecondary} />}</Box>
}
/>
</Box>
)}
</Field>
</TabsItem>
<TabsItem styleOverrides={{ padding: '8px' }} showBorder>
<Field name="customType">
{({ field, form }: FieldProps) => (
<Box
display="flex"
alignItems="center"
onClick={() => form.setFieldValue('customType', 'discountedCashFlow')}
>
<Text>Discounted cash flow</Text>
<Tooltips
type="discountedCashFlow"
label={
<Box ml={1}>{<IconHelpCircle size="iconSmall" color={theme.colors.textSecondary} />}</Box>
}
/>
</Box>
)}
</Field>
</TabsItem>
</Tabs>
</Box>
)}
<Accordion
items={[
Expand All @@ -153,9 +172,45 @@ export function CreateAssetsForm() {
}))),
]}
/>
<Divider color="backgroundSecondary" mt={2} />
{(templateMetadata?.options?.image || templateId.options.description) && (
<Box mb={2}>
<Divider color="backgroundSecondary" />
</Box>
)}
{templateMetadata?.options?.image && (
<Box padding={2}>
<Field name="image" validate={validate.nftImage}>
{({ field, meta, form }: FieldProps) => (
<ImageUpload
file={field.value}
onFileChange={(file) => {
form.setFieldTouched('image', true, false)
form.setFieldValue('image', file)
}}
accept="JPG/PNG/SVG, max 1MB"
label="Asset image"
errorMessage={meta.touched ? meta.error : undefined}
/>
)}
</Field>
</Box>
)}
{templateMetadata?.options?.description && (
<Box padding={2}>
<FieldWithErrorMessage
name="description"
as={TextAreaInput}
label="Description"
placeholder="Add asset description paragraph..."
maxLength={100}
/>
</Box>
)}
</Box>
)}
<Box mb={2}>
<Divider color="backgroundSecondary" />
</Box>
</Box>
)
}
15 changes: 3 additions & 12 deletions fabric/src/components/Accordion/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,17 +32,7 @@ const Toggle = styled(Shelf)`

export function Accordion({ items, ...boxProps }: AccordionProps) {
return (
<Root
as="ul"
pl={0}
aria-label="Accordion Control Group Buttons"
borderRadius="card"
borderStyle="solid"
borderWidth={1}
borderColor="borderPrimary"
role="list"
{...boxProps}
>
<Root as="ul" pl={0} aria-label="Accordion Control Group Buttons" role="list" {...boxProps}>
{items.map((entry, index) => (
<AccordionEntry {...entry} key={index} borderTopWidth={index > 0 ? 1 : 0} />
))}
Expand All @@ -58,6 +48,7 @@ function AccordionEntry({ title, body, ...boxProps }: AccordionProps['items'][nu
<Box as="li" borderStyle="solid" borderWidth={0} borderColor="borderPrimary" {...boxProps}>
<Toggle
as="button"
type="button"
id={`accordion-control-${id}`}
width="100%"
p={2}
Expand All @@ -73,7 +64,7 @@ function AccordionEntry({ title, body, ...boxProps }: AccordionProps['items'][nu
<CollapsibleChevron open={open} />
</Toggle>
<Collapsible id={`content-${id}`} open={open}>
<Box p={2}>
<Box>
<Text variant="body2">{body}</Text>
</Box>
</Collapsible>
Expand Down

0 comments on commit d0dc5e0

Please sign in to comment.