From a19e7bca04c15585f413ab8b14ccebcc178f2ce5 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Tue, 10 Nov 2020 13:52:02 +0100
Subject: [PATCH] Default weight change to 70/30 (#211)

* dt weight tests

* update weights

* validation and defaults tweaks
---
 src/components/atoms/Input/index.tsx          |  2 +-
 .../AssetContent/Pricing/FormPricing/Coin.tsx |  2 +-
 .../Pricing/FormPricing/Dynamic.tsx           |  7 ++++---
 .../organisms/AssetContent/Pricing/index.tsx  |  1 +
 src/models/FormPricing.ts                     | 20 +++++++++++--------
 5 files changed, 19 insertions(+), 13 deletions(-)

diff --git a/src/components/atoms/Input/index.tsx b/src/components/atoms/Input/index.tsx
index 1b230c234..de263bb11 100644
--- a/src/components/atoms/Input/index.tsx
+++ b/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>
diff --git a/src/components/organisms/AssetContent/Pricing/FormPricing/Coin.tsx b/src/components/organisms/AssetContent/Pricing/FormPricing/Coin.tsx
index f91e1ee21..96022c057 100644
--- a/src/components/organisms/AssetContent/Pricing/FormPricing/Coin.tsx
+++ b/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'
diff --git a/src/components/organisms/AssetContent/Pricing/FormPricing/Dynamic.tsx b/src/components/organisms/AssetContent/Pricing/FormPricing/Dynamic.tsx
index 2912ba49d..a7acb0fc5 100644
--- a/src/components/organisms/AssetContent/Pricing/FormPricing/Dynamic.tsx
+++ b/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>()
 
diff --git a/src/components/organisms/AssetContent/Pricing/index.tsx b/src/components/organisms/AssetContent/Pricing/index.tsx
index 523aff99e..87ec4c089 100644
--- a/src/components/organisms/AssetContent/Pricing/index.tsx
+++ b/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' })
diff --git a/src/models/FormPricing.ts b/src/models/FormPricing.ts
index 707dc1072..b9b407271 100644
--- a/src/models/FormPricing.ts
+++ b/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'),
-  dtAmount: Yup.number().min(9, 'Must be greater than 9').required('Required'),
+  price: Yup.number()
+    .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,
-  oceanAmount: 10,
-  weightOnOcean: '5', // 50% on OCEAN
-  weightOnDataToken: '5', // 50% on datatoken
+  dtAmount: 9,
+  oceanAmount: 21,
+  weightOnOcean: '7', // 70% on OCEAN
+  weightOnDataToken: '3', // 30% on datatoken
   swapFee: 0.1 // in %
 }