Default weight change to 70/30 (#211)

* dt weight tests

* update weights

* validation and defaults tweaks

src/components/atoms/Input/index.tsx

@@ -71,7 +71,7 @@ export default function Input(props: Partial<InputProps>): ReactElement {
       </Label>
       <InputElement size={size} {...field} {...props} />
 
-      {field && field.name !== 'price' && hasError && (
+      {field && hasError && (
         <div className={styles.error}>
           <ErrorMessage name={field.name} />
         </div>

src/components/organisms/AssetContent/Pricing/FormPricing/Coin.tsx

@@ -1,4 +1,4 @@
-import React, { ReactElement } from 'react'
+import React, { ChangeEvent, ReactElement } from 'react'
 import stylesIndex from './index.module.css'
 import styles from './Coin.module.css'
 import InputElement from '../../../../atoms/Input/InputElement'

src/components/organisms/AssetContent/Pricing/FormPricing/Dynamic.tsx

@@ -9,7 +9,7 @@ import Coin from './Coin'
 import styles from './Dynamic.module.css'
 import Fees from './Fees'
 import stylesIndex from './index.module.css'
-import { useFormikContext } from 'formik'
+import { FormikContextType, useFormikContext } from 'formik'
 import { PriceOptionsMarket } from '../../../../../@types/MetaData'
 import { DDO } from '@oceanprotocol/lib'
 import Price from './Price'
@@ -28,7 +28,8 @@ export default function Dynamic({
   const [firstPrice, setFirstPrice] = useState<string>()
 
   // Connect with form
-  const { values } = useFormikContext()
+  const { values }: FormikContextType<PriceOptionsMarket> = useFormikContext()
+
   const {
     price,
     weightOnDataToken,
@@ -36,7 +37,7 @@ export default function Dynamic({
     swapFee,
     dtAmount,
     oceanAmount
-  } = values as PriceOptionsMarket
+  } = values
 
   const [error, setError] = useState<string>()
 

src/components/organisms/AssetContent/Pricing/index.tsx

@@ -104,6 +104,7 @@ export default function Pricing({ ddo }: { ddo: DDO }): ReactElement {
       <Formik
         initialValues={initialValues}
         validationSchema={validationSchema}
+        validateOnChange
         onSubmit={async (values, { setSubmitting }) => {
           // move user's focus to top of screen
           window.scrollTo({ top: 0, left: 0, behavior: 'smooth' })

src/models/FormPricing.ts

@@ -2,10 +2,14 @@ import { PriceOptionsMarket } from '../@types/MetaData'
 import * as Yup from 'yup'
 
 export const validationSchema = Yup.object().shape<PriceOptionsMarket>({
-  price: Yup.number().min(1, 'Must be greater than 1').required('Required'),
+  price: Yup.number()
-  dtAmount: Yup.number().min(9, 'Must be greater than 9').required('Required'),
+    .min(1, (param) => `Must be more or equal to ${param.min}`)
+    .required('Required'),
+  dtAmount: Yup.number()
+    .min(9, (param) => `Must be more or equal to ${param.min}`)
+    .required('Required'),
   oceanAmount: Yup.number()
-    .min(1, 'Must be greater than 0')
+    .min(21, (param) => `Must be more or equal to ${param.min}`)
     .required('Required'),
   type: Yup.string()
     .matches(/fixed|dynamic/g)
@@ -13,7 +17,7 @@ export const validationSchema = Yup.object().shape<PriceOptionsMarket>({
   weightOnDataToken: Yup.string().required('Required'),
   weightOnOcean: Yup.string().required('Required'),
   swapFee: Yup.number()
-    .min(0.1, 'Must be more or equal to 0.1')
+    .min(0.1, (param) => `Must be more or equal to ${param.min}`)
     .max(10, 'Maximum is 10%')
     .required('Required')
     .nullable()
@@ -22,9 +26,9 @@ export const validationSchema = Yup.object().shape<PriceOptionsMarket>({
 export const initialValues: PriceOptionsMarket = {
   price: 1,
   type: 'dynamic',
-  dtAmount: 10,
+  dtAmount: 9,
-  oceanAmount: 10,
+  oceanAmount: 21,
-  weightOnOcean: '5', // 50% on OCEAN
+  weightOnOcean: '7', // 70% on OCEAN
-  weightOnDataToken: '5', // 50% on datatoken
+  weightOnDataToken: '3', // 30% on datatoken
   swapFee: 0.1 // in %
 }