oceanprotocol/market
1
0
Fork 0
mirror of https://github.com/oceanprotocol/market.git synced 2024-11-15 01:34:57 +01:00
Code Releases Activity

refactor to make live validation work

Browse Source
This commit is contained in:
Matthias Kretschmann 2020-09-21 14:23:04 +02:00
parent 041dfcee08
commit 2a13a760bd
Signed by: m
GPG Key ID: 606EEEF3C479A91F
7 changed files with 86 additions and 114 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/components/atoms/Input/index.tsx
View File

@ -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>

13
src/components/molecules/FormFields/Price/Coin.tsx
View File

@ -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>

22
src/components/molecules/FormFields/Price/Dynamic.tsx
View File

@ -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 />

74
src/components/molecules/FormFields/Price/Fees.tsx
View File

@ -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{' '}
<Tooltip content={tooltips.liquidityProviderFee} />
</Label>
<InputElement
<>
<div className={styles.fees}>
<Input
label={
<>
Liquidity Provider Fee
<Tooltip content={tooltips.liquidityProviderFee} />
</>
}
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>}
</>
)
}

25
src/components/molecules/FormFields/Price/Fixed.tsx
View File

@ -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>

35
src/components/molecules/FormFields/Price/index.tsx
View File

@ -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}
/>

24
src/models/FormPublish.ts
View File

@ -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'),
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')
}),
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().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'),