remove all the custom field change overwrites

src/components/Asset/AssetActions/Pool/Add/FormAdd.tsx

@@ -1,4 +1,4 @@
-import React, { ChangeEvent, ReactElement, useEffect } from 'react'
+import React, { ReactElement, useEffect } from 'react'
 import styles from './FormAdd.module.css'
 import Input from '@shared/FormInput'
 import {
@@ -20,7 +20,6 @@ export default function FormAdd({
   tokenInAddress,
   tokenInSymbol,
   amountMax,
-  setAmount,
   totalPoolTokens,
   totalBalance,
   poolAddress,
@@ -30,7 +29,6 @@ export default function FormAdd({
   tokenInAddress: string
   tokenInSymbol: string
   amountMax: string
-  setAmount: (value: string) => void
   totalPoolTokens: string
   totalBalance: PoolBalance
   poolAddress: string
@@ -41,24 +39,8 @@ export default function FormAdd({
   const { isAssetNetwork } = useAsset()
 
   // Connect with form
-  const {
-    touched,
-    setTouched,
-    setFieldValue,
-    validateField,
-    values
-  }: FormikContextType<FormAddLiquidity> = useFormikContext()
-
-  function handleFieldChange(e: ChangeEvent<HTMLInputElement>) {
-    // Workaround so validation kicks in on first touch
-    !touched?.amount && setTouched({ amount: true })
-    setAmount(e.target.value)
-
-    // Manually handle change events instead of using `handleChange` from Formik.
-    // Solves bug where 0.0 can't be typed.
-    validateField('amount')
-    setFieldValue('amount', e.target.value)
-  }
+  const { setFieldValue, values }: FormikContextType<FormAddLiquidity> =
+    useFormikContext()
 
   useEffect(() => {
     async function calculatePoolShares() {
@@ -76,7 +58,7 @@ export default function FormAdd({
       const poolTokens = await poolInstance.calcPoolOutGivenSingleIn(
         poolAddress,
         tokenInAddress,
-        `${values.amount}`
+        values.amount
       )
       setNewPoolTokens(poolTokens)
       const newPoolShareDecimal =
@@ -124,13 +106,12 @@ export default function FormAdd({
             name="amount"
             max={amountMax}
             min="0"
-            value={`${values.amount}`}
+            value={values.amount}
             step="any"
             prefix={tokenInSymbol}
             placeholder="0"
             field={field}
             form={form}
-            onChange={handleFieldChange}
             disabled={!isAssetNetwork}
           />
         )}
@@ -142,10 +123,7 @@ export default function FormAdd({
           style="text"
           size="small"
           disabled={!web3}
-          onClick={() => {
-            setAmount(amountMax)
-            setFieldValue('amount', amountMax)
-          }}
+          onClick={() => setFieldValue('amount', amountMax)}
         >
           Use Max
         </Button>

src/components/Asset/AssetActions/Pool/Add/index.tsx

@@ -16,11 +16,11 @@ import content from '../../../../../../content/price.json'
 import { LoggerInstance, Pool } from '@oceanprotocol/lib'
 
 export interface FormAddLiquidity {
-  amount: number
+  amount: string
 }
 
 const initialValues: FormAddLiquidity = {
-  amount: undefined
+  amount: ''
 }
 
 export default function Add({
@@ -49,7 +49,6 @@ export default function Add({
   const { debug } = useUserPreferences()
   const [txId, setTxId] = useState<string>()
   const [amountMax, setAmountMax] = useState<string>()
-  const [amount, setAmount] = useState<string>('0')
   const [newPoolTokens, setNewPoolTokens] = useState('0')
   const [newPoolShare, setNewPoolShare] = useState('0')
   const [isWarningAccepted, setIsWarningAccepted] = useState(false)
@@ -57,7 +56,7 @@ export default function Add({
   // Live validation rules
   // https://github.com/jquense/yup#number
   const validationSchema: Yup.SchemaOf<FormAddLiquidity> = Yup.object().shape({
-    amount: Yup.number()
+    amount: Yup.string()
       .min(0.00001, (param) => `Must be more or equal to ${param.min}`)
       .max(
         Number(amountMax),
@@ -99,7 +98,7 @@ export default function Add({
   ])
 
   // Submit
-  async function handleAddLiquidity(amount: number, resetForm: () => void) {
+  async function handleAddLiquidity(amount: string, resetForm: () => void) {
     const poolInstance = new Pool(web3, LoggerInstance)
     const minPoolAmountOut = '0' // ? TODO: how to get?
 
@@ -108,7 +107,7 @@ export default function Add({
         accountId,
         poolAddress,
         tokenInAddress,
-        `${amount}`,
+        amount,
         minPoolAmountOut
       )
       setTxId(result?.transactionHash)
@@ -142,7 +141,6 @@ export default function Add({
                   tokenInAddress={tokenInAddress}
                   tokenInSymbol={tokenInSymbol}
                   amountMax={amountMax}
-                  setAmount={setAmount}
                   totalPoolTokens={totalPoolTokens}
                   totalBalance={totalBalance}
                   poolAddress={poolAddress}
@@ -178,16 +176,16 @@ export default function Add({
               isDisabled={
                 !isValid ||
                 !isWarningAccepted ||
-                !amount ||
-                amount === '' ||
-                amount === '0'
+                !values.amount ||
+                values.amount === '' ||
+                values.amount === '0'
               }
               isLoading={isSubmitting}
               loaderMessage="Adding Liquidity..."
               successMessage="Successfully added liquidity."
               actionName={content.pool.add.action}
               action={submitForm}
-              amount={amount}
+              amount={values.amount}
               tokenAddress={tokenInAddress}
               tokenSymbol={tokenInSymbol}
               txId={txId}