mirror of
https://github.com/oceanprotocol/market.git
synced 2024-06-29 00:57:50 +02:00
refactor to make live validation work
This commit is contained in:
parent
041dfcee08
commit
2a13a760bd
|
@ -10,7 +10,7 @@ const cx = classNames.bind(styles)
|
|||
|
||||
export interface InputProps {
|
||||
name: string
|
||||
label?: string
|
||||
label?: string | ReactNode
|
||||
placeholder?: string
|
||||
required?: boolean
|
||||
help?: string
|
||||
|
@ -54,8 +54,7 @@ export default function Input(props: Partial<InputProps>): ReactElement {
|
|||
} = props
|
||||
|
||||
const hasError =
|
||||
props.form?.touched[field.name] &&
|
||||
typeof props.form.errors[field.name] === 'string'
|
||||
props.form?.touched[field.name] && props.form?.errors[field.name]
|
||||
|
||||
const styleClasses = cx({
|
||||
field: true,
|
||||
|
@ -72,7 +71,7 @@ export default function Input(props: Partial<InputProps>): ReactElement {
|
|||
</Label>
|
||||
<InputElement small={small} {...field} {...props} />
|
||||
|
||||
{field && (
|
||||
{field && field.name !== 'price' && (
|
||||
<div className={styles.error}>
|
||||
<ErrorMessage name={field.name} />
|
||||
</div>
|
||||
|
|
|
@ -6,24 +6,23 @@ import { ReactComponent as Logo } from '../../../../images/logo.svg'
|
|||
import Conversion from '../../../atoms/Price/Conversion'
|
||||
import { DataTokenOptions } from '@oceanprotocol/react'
|
||||
import RefreshName from './RefreshName'
|
||||
import { useField } from 'formik'
|
||||
|
||||
export default function Coin({
|
||||
datatokenOptions,
|
||||
name,
|
||||
value,
|
||||
weight,
|
||||
onOceanChange,
|
||||
generateName,
|
||||
readOnly
|
||||
}: {
|
||||
datatokenOptions: DataTokenOptions
|
||||
name: string
|
||||
value: string
|
||||
weight: string
|
||||
onOceanChange?: (event: ChangeEvent<HTMLInputElement>) => void
|
||||
generateName?: () => void
|
||||
readOnly?: boolean
|
||||
}): ReactElement {
|
||||
const [field, meta, helpers] = useField(name)
|
||||
|
||||
return (
|
||||
<div className={styles.coin}>
|
||||
<figure className={styles.icon}>
|
||||
|
@ -43,15 +42,15 @@ export default function Coin({
|
|||
|
||||
<div className={styles.data}>
|
||||
<InputElement
|
||||
value={value}
|
||||
value={field.value}
|
||||
name={name}
|
||||
type="number"
|
||||
onChange={onOceanChange}
|
||||
readOnly={readOnly}
|
||||
prefix={datatokenOptions?.symbol || 'DT'}
|
||||
{...field}
|
||||
/>
|
||||
{datatokenOptions?.symbol === 'OCEAN' && (
|
||||
<Conversion price={value} className={stylesIndex.conversion} />
|
||||
<Conversion price={field.value} className={stylesIndex.conversion} />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -15,22 +15,18 @@ export default function Dynamic({
|
|||
ocean,
|
||||
priceOptions,
|
||||
datatokenOptions,
|
||||
onOceanChange,
|
||||
onLiquidityProviderFeeChange,
|
||||
generateName,
|
||||
content
|
||||
}: {
|
||||
ocean: string
|
||||
priceOptions: PriceOptions
|
||||
datatokenOptions: DataTokenOptions
|
||||
onOceanChange: (event: ChangeEvent<HTMLInputElement>) => void
|
||||
onLiquidityProviderFeeChange: (event: ChangeEvent<HTMLInputElement>) => void
|
||||
generateName: () => void
|
||||
content: any
|
||||
}): ReactElement {
|
||||
const { appConfig } = useSiteMetadata()
|
||||
const { account, balance, chainId, refreshBalance } = useOcean()
|
||||
const { weightOnDataToken, tokensToMint, liquidityProviderFee } = priceOptions
|
||||
const { weightOnDataToken } = priceOptions
|
||||
|
||||
const [error, setError] = useState<string>()
|
||||
const correctNetwork = isCorrectNetwork(chainId)
|
||||
|
@ -77,33 +73,25 @@ export default function Dynamic({
|
|||
</aside>
|
||||
|
||||
<h4 className={styles.title}>
|
||||
Data Token Liquidity Pool{' '}
|
||||
<Tooltip content={content.tooltips.poolInfo} />
|
||||
Datatoken Liquidity Pool <Tooltip content={content.tooltips.poolInfo} />
|
||||
</h4>
|
||||
|
||||
<div className={styles.tokens}>
|
||||
<Coin
|
||||
name="ocean"
|
||||
name="price.price"
|
||||
datatokenOptions={{ symbol: 'OCEAN', name: 'Ocean Token' }}
|
||||
value={ocean}
|
||||
weight={`${100 - Number(Number(weightOnDataToken) * 10)}%`}
|
||||
onOceanChange={onOceanChange}
|
||||
/>
|
||||
<Coin
|
||||
name="tokensToMint"
|
||||
name="price.tokensToMint"
|
||||
datatokenOptions={datatokenOptions}
|
||||
value={tokensToMint.toString()}
|
||||
weight={`${Number(weightOnDataToken) * 10}%`}
|
||||
generateName={generateName}
|
||||
readOnly
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Fees
|
||||
liquidityProviderFee={liquidityProviderFee}
|
||||
onLiquidityProviderFeeChange={onLiquidityProviderFeeChange}
|
||||
tooltips={content.tooltips}
|
||||
/>
|
||||
<Fees tooltips={content.tooltips} />
|
||||
|
||||
<footer className={styles.summary}>
|
||||
You will get: <br />
|
||||
|
|
|
@ -1,57 +1,68 @@
|
|||
import React, { ChangeEvent } from 'react'
|
||||
import InputElement from '../../../atoms/Input/InputElement'
|
||||
import Label from '../../../atoms/Input/Label'
|
||||
import React, { ChangeEvent, ReactElement } from 'react'
|
||||
import Tooltip from '../../../atoms/Tooltip'
|
||||
import styles from './Fees.module.css'
|
||||
import { useSiteMetadata } from '../../../../hooks/useSiteMetadata'
|
||||
import { useField } from 'formik'
|
||||
import Input from '../../../atoms/Input'
|
||||
|
||||
export default function Fees({
|
||||
liquidityProviderFee,
|
||||
onLiquidityProviderFeeChange,
|
||||
tooltips
|
||||
}: {
|
||||
liquidityProviderFee: string
|
||||
onLiquidityProviderFeeChange: (event: ChangeEvent<HTMLInputElement>) => void
|
||||
tooltips: { [key: string]: string }
|
||||
}) {
|
||||
}): ReactElement {
|
||||
const { appConfig } = useSiteMetadata()
|
||||
const [field, meta, helpers] = useField('price.liquidityProviderFee')
|
||||
|
||||
// TODO: trigger Yup inline validation
|
||||
function handleLiquidityProviderFeeChange(
|
||||
event: ChangeEvent<HTMLInputElement>
|
||||
) {
|
||||
helpers.setValue(event.target.value)
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className={styles.fees}>
|
||||
<div>
|
||||
<Label htmlFor="liquidityProviderFee">
|
||||
Liquidity Provider Fee{' '}
|
||||
<Input
|
||||
label={
|
||||
<>
|
||||
Liquidity Provider Fee
|
||||
<Tooltip content={tooltips.liquidityProviderFee} />
|
||||
</Label>
|
||||
<InputElement
|
||||
</>
|
||||
}
|
||||
type="number"
|
||||
value={liquidityProviderFee}
|
||||
name="liquidityProviderFee"
|
||||
value={field.value}
|
||||
name="price.liquidityProviderFee"
|
||||
postfix="%"
|
||||
onChange={onLiquidityProviderFeeChange}
|
||||
onChange={handleLiquidityProviderFeeChange}
|
||||
min="0.1"
|
||||
max="0.9"
|
||||
step="0.1"
|
||||
small
|
||||
{...field}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="communityFee">
|
||||
Community Fee <Tooltip content={tooltips.communityFee} />
|
||||
</Label>
|
||||
<InputElement
|
||||
|
||||
<Input
|
||||
label={
|
||||
<>
|
||||
Community Fee
|
||||
<Tooltip content={tooltips.communityFee} />
|
||||
</>
|
||||
}
|
||||
value="0.1"
|
||||
name="communityFee"
|
||||
postfix="%"
|
||||
readOnly
|
||||
small
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<Label htmlFor="marketplaceFee">
|
||||
Marketplace Fee <Tooltip content={tooltips.marketplaceFee} />
|
||||
</Label>
|
||||
<InputElement
|
||||
|
||||
<Input
|
||||
label={
|
||||
<>
|
||||
Marketplace Fee
|
||||
<Tooltip content={tooltips.marketplaceFee} />
|
||||
</>
|
||||
}
|
||||
value={appConfig.marketFeeAmount}
|
||||
name="marketplaceFee"
|
||||
postfix="%"
|
||||
|
@ -59,6 +70,7 @@ export default function Fees({
|
|||
small
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{meta.error && meta.touched && <div>{meta.error}</div>}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
|
@ -1,42 +1,41 @@
|
|||
import React, { ReactElement, ChangeEvent } from 'react'
|
||||
import React, { ReactElement } from 'react'
|
||||
import stylesIndex from './index.module.css'
|
||||
import styles from './Fixed.module.css'
|
||||
import FormHelp from '../../../atoms/Input/Help'
|
||||
import Label from '../../../atoms/Input/Label'
|
||||
import InputElement from '../../../atoms/Input/InputElement'
|
||||
import Conversion from '../../../atoms/Price/Conversion'
|
||||
import { DataTokenOptions } from '@oceanprotocol/react'
|
||||
import RefreshName from './RefreshName'
|
||||
import { useField } from 'formik'
|
||||
import Input from '../../../atoms/Input'
|
||||
|
||||
export default function Fixed({
|
||||
ocean,
|
||||
datatokenOptions,
|
||||
onChange,
|
||||
generateName,
|
||||
content
|
||||
}: {
|
||||
ocean: string
|
||||
datatokenOptions: DataTokenOptions
|
||||
onChange: (event: ChangeEvent<HTMLInputElement>) => void
|
||||
generateName: () => void
|
||||
content: any
|
||||
}): ReactElement {
|
||||
const [field, meta, helpers] = useField('price.price')
|
||||
|
||||
return (
|
||||
<div className={styles.fixed}>
|
||||
<FormHelp className={stylesIndex.help}>{content.info}</FormHelp>
|
||||
|
||||
<div className={styles.grid}>
|
||||
<div className={styles.form}>
|
||||
<Label htmlFor="ocean">Ocean Token</Label>
|
||||
<InputElement
|
||||
value={ocean}
|
||||
name="ocean"
|
||||
<Input
|
||||
label="Ocean Token"
|
||||
value={field.value}
|
||||
name="price.price"
|
||||
type="number"
|
||||
prefix="OCEAN"
|
||||
onChange={onChange}
|
||||
{...field}
|
||||
/>
|
||||
<Conversion price={ocean} className={stylesIndex.conversion} />
|
||||
<Conversion price={field.value} className={stylesIndex.conversion} />
|
||||
</div>
|
||||
{meta.error && meta.touched && <div>{meta.error}</div>}
|
||||
{datatokenOptions && (
|
||||
<div className={styles.datatoken}>
|
||||
<h4>
|
||||
|
|
|
@ -44,26 +44,11 @@ export default function Price(props: InputProps): ReactElement {
|
|||
const content = data.content.edges[0].node.childPagesJson.price
|
||||
const { ocean } = useOcean()
|
||||
|
||||
const [field, meta, helpers] = useField(props)
|
||||
const [field, meta, helpers] = useField(props.name)
|
||||
const priceOptions: PriceOptions = field.value
|
||||
|
||||
const [amountOcean, setAmountOcean] = useState('1')
|
||||
const [tokensToMint, setTokensToMint] = useState<number>()
|
||||
const [datatokenOptions, setDatatokenOptions] = useState<DataTokenOptions>()
|
||||
const [liquidityProviderFee, setLiquidityProviderFee] = useState<string>(
|
||||
priceOptions.liquidityProviderFee
|
||||
)
|
||||
|
||||
function handleOceanChange(event: ChangeEvent<HTMLInputElement>) {
|
||||
setAmountOcean(event.target.value)
|
||||
}
|
||||
|
||||
// TODO: trigger Yup inline validation
|
||||
function handleLiquidityProviderFeeChange(
|
||||
event: ChangeEvent<HTMLInputElement>
|
||||
) {
|
||||
setLiquidityProviderFee(event.target.value)
|
||||
}
|
||||
|
||||
function handleTabChange(tabName: string) {
|
||||
const type = tabName.toLowerCase()
|
||||
|
@ -79,14 +64,10 @@ export default function Price(props: InputProps): ReactElement {
|
|||
// Always update everything when amountOcean changes
|
||||
useEffect(() => {
|
||||
const tokensToMint =
|
||||
Number(amountOcean) * Number(priceOptions.weightOnDataToken)
|
||||
Number(field.value.price) * Number(priceOptions.weightOnDataToken)
|
||||
setTokensToMint(tokensToMint)
|
||||
helpers.setValue({ ...field.value, price: amountOcean, tokensToMint })
|
||||
}, [amountOcean])
|
||||
|
||||
useEffect(() => {
|
||||
helpers.setValue({ ...field.value, liquidityProviderFee })
|
||||
}, [liquidityProviderFee])
|
||||
helpers.setValue({ ...field.value, tokensToMint })
|
||||
}, [field.value.price])
|
||||
|
||||
// Generate new DT name & symbol
|
||||
useEffect(() => {
|
||||
|
@ -98,9 +79,7 @@ export default function Price(props: InputProps): ReactElement {
|
|||
title: content.fixed.title,
|
||||
content: (
|
||||
<Fixed
|
||||
ocean={amountOcean}
|
||||
datatokenOptions={datatokenOptions}
|
||||
onChange={handleOceanChange}
|
||||
generateName={generateName}
|
||||
content={content.fixed}
|
||||
/>
|
||||
|
@ -110,11 +89,9 @@ export default function Price(props: InputProps): ReactElement {
|
|||
title: content.dynamic.title,
|
||||
content: (
|
||||
<Dynamic
|
||||
ocean={amountOcean}
|
||||
priceOptions={{ ...priceOptions, tokensToMint, liquidityProviderFee }}
|
||||
ocean={field.value.price}
|
||||
priceOptions={{ ...priceOptions, tokensToMint }}
|
||||
datatokenOptions={datatokenOptions}
|
||||
onOceanChange={handleOceanChange}
|
||||
onLiquidityProviderFeeChange={handleLiquidityProviderFeeChange}
|
||||
generateName={generateName}
|
||||
content={content.dynamic}
|
||||
/>
|
||||
|
|
|
@ -6,19 +6,17 @@ export const validationSchema = Yup.object().shape<MetadataPublishForm>({
|
|||
// ---- required fields ----
|
||||
name: Yup.string().required('Required'),
|
||||
author: Yup.string().required('Required'),
|
||||
price: Yup.object().shape({
|
||||
price: Yup.number().required('Required'),
|
||||
price: Yup.object()
|
||||
.shape({
|
||||
price: Yup.number().min(1, 'Must be greater than 0').required('Required'),
|
||||
tokensToMint: Yup.number().required('Required'),
|
||||
type: Yup.string()
|
||||
.matches(/fixed|dynamic/g)
|
||||
.required('Required'),
|
||||
weightOnDataToken: Yup.string().required('Required'),
|
||||
liquidityProviderFee: Yup.string()
|
||||
.length(3)
|
||||
.min(0.1)
|
||||
.max(0.9)
|
||||
.required('Required')
|
||||
}),
|
||||
liquidityProviderFee: Yup.string().min(0.1).max(0.9).required('Required')
|
||||
})
|
||||
.required('Required'),
|
||||
files: Yup.array<FileMetadata>().required('Required').nullable(),
|
||||
description: Yup.string().required('Required'),
|
||||
license: Yup.string().required('Required'),
|
||||
|
|
Loading…
Reference in New Issue
Block a user