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

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>

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,

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'

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'