validation fixes

src/components/molecules/FormFields/Price/Coin.tsx

@@ -1,4 +1,4 @@
-import React, { ReactElement, ChangeEvent } from 'react'
+import React, { ReactElement } from 'react'
 import stylesIndex from './index.module.css'
 import styles from './Coin.module.css'
 import InputElement from '../../../atoms/Input/InputElement'
@@ -21,7 +21,7 @@ export default function Coin({
   generateName?: () => void
   readOnly?: boolean
 }): ReactElement {
-  const [field, meta, helpers] = useField(name)
+  const [field] = useField(name)
 
   return (
     <div className={styles.coin}>
@@ -42,8 +42,6 @@ export default function Coin({
 
       <div className={styles.data}>
         <InputElement
-          value={field.value}
-          name={name}
           type="number"
           readOnly={readOnly}
           prefix={datatokenOptions?.symbol || 'DT'}

src/components/molecules/FormFields/Price/Dynamic.tsx

@@ -18,7 +18,7 @@ export default function Dynamic({
   generateName,
   content
 }: {
-  ocean: string
+  ocean: number
   priceOptions: PriceOptions
   datatokenOptions: DataTokenOptions
   generateName: () => void

src/components/molecules/FormFields/Price/Fees.tsx

@@ -1,4 +1,4 @@
-import React, { ChangeEvent, ReactElement } from 'react'
+import React, { ReactElement } from 'react'
 import Tooltip from '../../../atoms/Tooltip'
 import styles from './Fees.module.css'
 import { useSiteMetadata } from '../../../../hooks/useSiteMetadata'
@@ -11,14 +11,7 @@ export default function Fees({
   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)
-  }
+  const [field, meta] = useField('price.liquidityProviderFee')
 
   return (
     <>
@@ -31,15 +24,15 @@ export default function Fees({
             </>
           }
           type="number"
-          value={field.value}
-          name="price.liquidityProviderFee"
           postfix="%"
-          onChange={handleLiquidityProviderFeeChange}
           min="0.1"
           max="0.9"
           step="0.1"
           small
           {...field}
+          additionalComponent={
+            meta.error && meta.touched && <div>{meta.error}</div>
+          }
         />
 
         <Input
@@ -70,7 +63,6 @@ export default function Fees({
           small
         />
       </div>
-      {meta.error && meta.touched && <div>{meta.error}</div>}
     </>
   )
 }

src/components/molecules/FormFields/Price/Fixed.tsx

@@ -17,7 +17,7 @@ export default function Fixed({
   generateName: () => void
   content: any
 }): ReactElement {
-  const [field, meta, helpers] = useField('price.price')
+  const [field, meta] = useField('price.price')
 
   return (
     <div className={styles.fixed}>

src/components/molecules/FormFields/Price/index.tsx

@@ -1,4 +1,4 @@
-import React, { ReactElement, useState, ChangeEvent, useEffect } from 'react'
+import React, { ReactElement, useState, useEffect } from 'react'
 import { graphql, useStaticQuery } from 'gatsby'
 import { InputProps } from '../../../atoms/Input'
 import styles from './index.module.css'
@@ -45,7 +45,7 @@ export default function Price(props: InputProps): ReactElement {
   const { ocean } = useOcean()
 
   const [field, meta, helpers] = useField(props.name)
-  const priceOptions: PriceOptions = field.value
+  const { price }: PriceOptions = field.value
 
   const [tokensToMint, setTokensToMint] = useState<number>()
   const [datatokenOptions, setDatatokenOptions] = useState<DataTokenOptions>()
@@ -63,11 +63,10 @@ export default function Price(props: InputProps): ReactElement {
 
   // Always update everything when amountOcean changes
   useEffect(() => {
-    const tokensToMint =
-      Number(field.value.price) * Number(priceOptions.weightOnDataToken)
+    const tokensToMint = Number(price) * Number(field.value.weightOnDataToken)
     setTokensToMint(tokensToMint)
     helpers.setValue({ ...field.value, tokensToMint })
-  }, [field.value.price])
+  }, [price])
 
   // Generate new DT name & symbol
   useEffect(() => {
@@ -89,8 +88,8 @@ export default function Price(props: InputProps): ReactElement {
       title: content.dynamic.title,
       content: (
         <Dynamic
-          ocean={field.value.price}
-          priceOptions={{ ...priceOptions, tokensToMint }}
+          ocean={price}
+          priceOptions={{ ...field.value, tokensToMint }}
           datatokenOptions={datatokenOptions}
           generateName={generateName}
           content={content.dynamic}

src/models/FormPublish.ts

@@ -8,13 +8,18 @@ export const validationSchema = Yup.object().shape<MetadataPublishForm>({
   author: Yup.string().required('Required'),
   price: Yup.object()
     .shape({
-      price: Yup.number().min(1, 'Must be greater than 0').required('Required'),
-      tokensToMint: Yup.number().required('Required'),
+      price: Yup.number()
+        .min(1, 'Must be greater than 0')
+        .positive()
+        .required('Required'),
+      tokensToMint: Yup.number().positive().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')
+      liquidityProviderFee: Yup.string()
+        .matches(/0.[0-9]/, 'Only values between 0.1 - 0.9 are allowed')
+        .required('Required')
     })
     .required('Required'),
   files: Yup.array<FileMetadata>().required('Required').nullable(),