Dynamic price publish input fields fixes (#1302)

* update ocean amount on price change

* add min ocean amount requirement

* add min ocean value when price is not grater than 0

* review fixes

* use min ocean and dataToken amounts from initialValues

* removed weightOnDataToken from useEffect and updated comments

* fix amountOcean bug

* remove min attribute from Coin, move logic to yup validation

* remove unused imports and change min amountOcean test name

* default amountDataToken from 50 → 100

* ref #1340

* change min datatoken and ocean amount to 100

* update ocean amount min validation and validation message

* replace data tokens with datatokens in min ocean amount message

Co-authored-by: Matthias Kretschmann <m@kretschmann.io>

src/components/Publish/Pricing/Dynamic.tsx

@@ -20,7 +20,6 @@ export default function Dynamic({ content }: { content: any }): ReactElement {
   const { dataTokenOptions } = values.services[0]
 
   const {
-    price,
     weightOnDataToken,
     weightOnOcean,
     swapFee,

src/components/Publish/Pricing/index.tsx

@@ -5,6 +5,7 @@ import Tabs from '@shared/atoms/Tabs'
 import { isValidNumber } from '@utils/numbers'
 import Decimal from 'decimal.js'
 import { FormPublishData } from '../_types'
+import { initialValues } from '../_constants'
 import Dynamic from './Dynamic'
 import Fixed from './Fixed'
 import Free from './Free'
@@ -28,7 +29,19 @@ export default function PricingFields(): ReactElement {
     type !== 'free' && setFieldValue('pricing.amountDataToken', 1000)
   }
 
-  // Always update everything when price value changes
+  // Update ocean amount when price is changed
+  useEffect(() => {
+    if (type === 'fixed' || type === 'free') return
+
+    const amountOcean =
+      isValidNumber(weightOnOcean) && isValidNumber(price) && price > 0
+        ? new Decimal(price).mul(new Decimal(weightOnOcean).mul(10)).mul(2)
+        : new Decimal(initialValues.pricing.amountOcean)
+
+    setFieldValue('pricing.amountOcean', amountOcean)
+  }, [price, weightOnOcean, type, setFieldValue])
+
+  // Update dataToken value when ocean amount is changed
   useEffect(() => {
     if (type === 'fixed' || type === 'free') return
 
@@ -36,22 +49,16 @@ export default function PricingFields(): ReactElement {
       isValidNumber(amountOcean) &&
       isValidNumber(weightOnOcean) &&
       isValidNumber(price) &&
-      isValidNumber(weightOnDataToken)
+      isValidNumber(weightOnDataToken) &&
+      price > 0
         ? new Decimal(amountOcean)
             .dividedBy(new Decimal(weightOnOcean))
             .dividedBy(new Decimal(price))
             .mul(new Decimal(weightOnDataToken))
-        : 0
+        : new Decimal(initialValues.pricing.amountDataToken)
 
     setFieldValue('pricing.amountDataToken', amountDataToken)
-  }, [
+  }, [amountOcean, weightOnOcean, weightOnDataToken, type, setFieldValue])
-    price,
-    amountOcean,
-    weightOnOcean,
-    weightOnDataToken,
-    type,
-    setFieldValue
-  ])
 
   const tabs = [
     appConfig.allowFixedPricing === 'true'

src/components/Publish/_constants.tsx

@@ -87,8 +87,8 @@ export const initialValues: FormPublishData = {
         : allowFixedPricing === 'true'
         ? 'fixed'
         : 'free',
-    amountDataToken: allowDynamicPricing === 'true' ? 50 : 1000,
+    amountDataToken: allowDynamicPricing === 'true' ? 100 : 1000,
-    amountOcean: 50,
+    amountOcean: 100,
     weightOnOcean: '5', // 50% on OCEAN
     weightOnDataToken: '5', // 50% on datatoken
     swapFee: 0.1, // in %

src/components/Publish/_validation.ts

@@ -1,5 +1,7 @@
 import { MAX_DECIMALS } from '@utils/constants'
+import { initialValues } from './_constants'
 import * as Yup from 'yup'
+import Decimal from 'decimal.js'
 
 // TODO: conditional validation
 // e.g. when algo is selected, Docker image is required
@@ -78,11 +80,24 @@ const validationPricing = {
       (param) => maxDecimalsValidation.test(param?.toString())
     )
     .required('Required'),
-  amountDataToken: Yup.number()
+  amountDataToken: Yup.number().required('Required'),
-    .min(50, (param) => `Must be more or equal to ${param.min}`)
-    .required('Required'),
   amountOcean: Yup.number()
-    .min(50, (param) => `Must be more or equal to ${param.min}`)
+    .test('validator-min-amountOcean', '', function (value) {
+      const minValue =
+        this.parent.price > 0
+          ? new Decimal(this.parent.price)
+              .mul(this.parent.weightOnOcean)
+              .mul(10)
+              .mul(2)
+              .toDecimalPlaces(MAX_DECIMALS)
+              .toString()
+          : initialValues.pricing.amountOcean.toString()
+      return value < parseInt(minValue)
+        ? this.createError({
+            message: `Must be more or equal to ${minValue}, as at least ${initialValues.pricing.amountDataToken} datatokens are required for this pool to work properly`
+          })
+        : true
+    })
     .max(
       1000000,
       (param: { max: number }) => `Must be less than or equal to ${param.max}`