From 926838862a6753e87b62e3bc38f9896325803005 Mon Sep 17 00:00:00 2001
From: EnzoVezzaro <enzo-vezzaro@live.it>
Date: Tue, 22 Mar 2022 11:50:51 -0400
Subject: [PATCH] Fix No error message for swapping more than max tokens
 (#1230)

* moved Error (field) component in shared components

- moved Error.tsx from Pricing
- change paths to Error.tsx in publish

* added Error component with field validation

* change setTimeout with lodash.debounce
---
 .../Pricing => @shared/FormInput}/Error.tsx      |  0
 .../Asset/AssetActions/Trade/TradeInput.tsx      | 16 ++++++++++------
 src/components/Publish/Pricing/Coin.tsx          |  2 +-
 src/components/Publish/Pricing/Fees.tsx          |  2 +-
 src/components/Publish/Pricing/Price.tsx         |  2 +-
 5 files changed, 13 insertions(+), 9 deletions(-)
 rename src/components/{Publish/Pricing => @shared/FormInput}/Error.tsx (100%)

diff --git a/src/components/Publish/Pricing/Error.tsx b/src/components/@shared/FormInput/Error.tsx
similarity index 100%
rename from src/components/Publish/Pricing/Error.tsx
rename to src/components/@shared/FormInput/Error.tsx
diff --git a/src/components/Asset/AssetActions/Trade/TradeInput.tsx b/src/components/Asset/AssetActions/Trade/TradeInput.tsx
index 6e29cf5fb..a6552c74b 100644
--- a/src/components/Asset/AssetActions/Trade/TradeInput.tsx
+++ b/src/components/Asset/AssetActions/Trade/TradeInput.tsx
@@ -4,10 +4,13 @@ import {
   Field,
   FieldInputProps,
   FormikContextType,
-  useFormikContext
+  useFormikContext,
+  useField
 } from 'formik'
-import Input from '@shared/FormInput'
+import debounce from 'lodash.debounce'
 import Button from '@shared/atoms/Button'
+import Input from '@shared/FormInput'
+import Error from '@shared/FormInput/Error'
 import { FormTradeData, TradeItem } from './_types'
 import UserLiquidity from '../UserLiquidity'
 import { useWeb3 } from '@context/Web3'
@@ -28,11 +31,10 @@ export default function TradeInput({
   // Connect with form
   const {
     handleChange,
-    setFieldValue,
     validateForm,
     values
   }: FormikContextType<FormTradeData> = useFormikContext()
-
+  const [field, meta] = useField(name)
   const isTopField =
     (name === 'baseToken' && values.type === 'buy') ||
     (name === 'datatoken' && values.type === 'sell')
@@ -61,11 +63,13 @@ export default function TradeInput({
             form={form}
             value={`${field.value}`}
             onChange={(e: ChangeEvent<HTMLInputElement>) => {
-              handleValueChange(name, Number(e.target.value))
-              validateForm()
               handleChange(e)
+              handleValueChange(name, Number(e.target.value))
+              // debounce needed to avoid validating the wrong (pass) value
+              debounce(() => validateForm(), 100)
             }}
             disabled={!accountId || disabled}
+            additionalComponent={<Error meta={meta} />}
           />
         )}
       </Field>
diff --git a/src/components/Publish/Pricing/Coin.tsx b/src/components/Publish/Pricing/Coin.tsx
index 8a2b4bff6..60d38be5d 100644
--- a/src/components/Publish/Pricing/Coin.tsx
+++ b/src/components/Publish/Pricing/Coin.tsx
@@ -4,7 +4,7 @@ import InputElement from '@shared/FormInput/InputElement'
 import Logo from '@images/logo.svg'
 import Conversion from '@shared/Price/Conversion'
 import { useField } from 'formik'
-import Error from './Error'
+import Error from '@shared/FormInput/Error'
 
 export default function Coin({
   datatokenOptions,
diff --git a/src/components/Publish/Pricing/Fees.tsx b/src/components/Publish/Pricing/Fees.tsx
index 3936dbcbf..96ff70e22 100644
--- a/src/components/Publish/Pricing/Fees.tsx
+++ b/src/components/Publish/Pricing/Fees.tsx
@@ -3,7 +3,7 @@ import Tooltip from '@shared/atoms/Tooltip'
 import styles from './Fees.module.css'
 import { useField } from 'formik'
 import Input from '@shared/FormInput'
-import Error from './Error'
+import Error from '@shared/FormInput/Error'
 import { getOpcFees } from '../../../@utils/subgraph'
 import { OpcFeesQuery_opc as OpcFeesData } from '../../../@types/subgraph/OpcFeesQuery'
 import { useWeb3 } from '@context/Web3'
diff --git a/src/components/Publish/Pricing/Price.tsx b/src/components/Publish/Pricing/Price.tsx
index 6484670fe..b18b80292 100644
--- a/src/components/Publish/Pricing/Price.tsx
+++ b/src/components/Publish/Pricing/Price.tsx
@@ -2,7 +2,7 @@ import Conversion from '@shared/Price/Conversion'
 import { Field, useField, useFormikContext } from 'formik'
 import React, { ReactElement } from 'react'
 import Input from '@shared/FormInput'
-import Error from './Error'
+import Error from '@shared/FormInput/Error'
 import PriceUnit from '@shared/Price/PriceUnit'
 import styles from './Price.module.css'
 import { FormPublishData } from '../_types'