From 36a75e6736ced8fcc8c50ff44693739f693677d0 Mon Sep 17 00:00:00 2001 From: Norbi <37236152+KatunaNorbert@users.noreply.github.com> Date: Thu, 14 Apr 2022 15:48:56 +0300 Subject: [PATCH] Dynamic price publish input fields fixes (#1302) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 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 --- src/components/Publish/Pricing/Dynamic.tsx | 1 - src/components/Publish/Pricing/index.tsx | 29 ++++++++++++++-------- src/components/Publish/_constants.tsx | 4 +-- src/components/Publish/_validation.ts | 23 ++++++++++++++--- 4 files changed, 39 insertions(+), 18 deletions(-) diff --git a/src/components/Publish/Pricing/Dynamic.tsx b/src/components/Publish/Pricing/Dynamic.tsx index 4dbb2b491..7940aeab4 100644 --- a/src/components/Publish/Pricing/Dynamic.tsx +++ b/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, diff --git a/src/components/Publish/Pricing/index.tsx b/src/components/Publish/Pricing/index.tsx index 796b8cd64..ce9049573 100644 --- a/src/components/Publish/Pricing/index.tsx +++ b/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) - }, [ - price, - amountOcean, - weightOnOcean, - weightOnDataToken, - type, - setFieldValue - ]) + }, [amountOcean, weightOnOcean, weightOnDataToken, type, setFieldValue]) const tabs = [ appConfig.allowFixedPricing === 'true' diff --git a/src/components/Publish/_constants.tsx b/src/components/Publish/_constants.tsx index 8a9223197..2ea897630 100644 --- a/src/components/Publish/_constants.tsx +++ b/src/components/Publish/_constants.tsx @@ -87,8 +87,8 @@ export const initialValues: FormPublishData = { : allowFixedPricing === 'true' ? 'fixed' : 'free', - amountDataToken: allowDynamicPricing === 'true' ? 50 : 1000, - amountOcean: 50, + amountDataToken: allowDynamicPricing === 'true' ? 100 : 1000, + amountOcean: 100, weightOnOcean: '5', // 50% on OCEAN weightOnDataToken: '5', // 50% on datatoken swapFee: 0.1, // in % diff --git a/src/components/Publish/_validation.ts b/src/components/Publish/_validation.ts index bbae3841f..93e285ab6 100644 --- a/src/components/Publish/_validation.ts +++ b/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() - .min(50, (param) => `Must be more or equal to ${param.min}`) - .required('Required'), + amountDataToken: Yup.number().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}`