refactor to use Formik for better live validation

src/components/organisms/AssetActions/Pool/Add.tsx

@@ -12,7 +12,9 @@ import Actions from './Actions'
 import Tooltip from '../../../atoms/Tooltip'
 import { ReactComponent as Caret } from '../../../../images/caret.svg'
 import { graphql, useStaticQuery } from 'gatsby'
-import FormHelp from '../../../atoms/Input/Help'
+import * as Yup from 'yup'
+import { Field, Formik } from 'formik'
+import Input from '../../../atoms/Input'
 
 const contentQuery = graphql`
   query PoolAddQuery {
@@ -37,6 +39,10 @@ const contentQuery = graphql`
   }
 `
 
+const initialValues: Partial<{ amount: number }> = {
+  amount: 1
+}
+
 export default function Add({
   setShowAdd,
   poolAddress,
@@ -58,21 +64,12 @@ export default function Add({
   const content = data.content.edges[0].node.childContentJson.pool.add
 
   const { ocean, accountId, balance } = useOcean()
-  const [amount, setAmount] = useState('')
   const [txId, setTxId] = useState<string>('')
   const [isLoading, setIsLoading] = useState<boolean>()
   const [coin, setCoin] = useState<string>('OCEAN')
   const [dtBalance, setDtBalance] = useState<string>()
   const [amountMax, setAmountMax] = useState<string>()
 
-  const newPoolTokens =
-    totalBalance &&
-    ((Number(amount) / Number(totalBalance.ocean)) * 100).toFixed(2)
-
-  const newPoolShare =
-    totalBalance &&
-    ((Number(newPoolTokens) / Number(totalPoolTokens)) * 100).toFixed(2)
-
   // Get datatoken balance when datatoken selected
   useEffect(() => {
     if (!ocean || coin === 'OCEAN') return
@@ -98,16 +95,21 @@ export default function Add({
     getMaximum()
   }, [ocean, poolAddress, coin])
 
-  async function handleAddLiquidity() {
+  async function handleAddLiquidity(amount: number, resetForm: () => void) {
     setIsLoading(true)
 
     try {
       const result =
         coin === 'OCEAN'
-          ? await ocean.pool.addOceanLiquidity(accountId, poolAddress, amount)
+          ? await ocean.pool.addOceanLiquidity(
-          : await ocean.pool.addDTLiquidity(accountId, poolAddress, amount)
+              accountId,
+              poolAddress,
+              `${amount}`
+            )
+          : await ocean.pool.addDTLiquidity(accountId, poolAddress, `${amount}`)
 
       setTxId(result?.transactionHash)
+      resetForm()
     } catch (error) {
       console.error(error.message)
       toast.error(error.message)
@@ -116,13 +118,15 @@ export default function Add({
     }
   }
 
-  function handleAmountChange(e: ChangeEvent<HTMLInputElement>) {
+  const validationSchema = Yup.object().shape<{ amount: number }>({
-    setAmount(e.target.value)
+    amount: Yup.number()
-  }
+      .min(1, 'Must be more or equal to 1')
-
+      .max(
-  function handleMax() {
+        Number(amountMax),
-    setAmount(amountMax)
+        `Must be less or equal to ${Number(amountMax).toFixed(2)}`
-  }
+      )
+      .required('Required')
+  })
 
   // TODO: this is only a prototype and is an accessibility nightmare.
   // Needs to be refactored to either use custom select element instead of tippy.js,
@@ -139,6 +143,27 @@ export default function Add({
     <>
       <Header title={content.title} backAction={() => setShowAdd(false)} />
 
+      <Formik
+        initialValues={initialValues}
+        validationSchema={validationSchema}
+        onSubmit={async (values, { setSubmitting, resetForm }) => {
+          console.log('Hello')
+          // kick off
+          await handleAddLiquidity(values.amount, resetForm)
+          setSubmitting(false)
+        }}
+      >
+        {({ values, setFieldValue, submitForm }) => {
+          const newPoolTokens =
+            totalBalance &&
+            ((values.amount / Number(totalBalance.ocean)) * 100).toFixed(2)
+
+          const newPoolShare =
+            totalBalance &&
+            ((Number(newPoolTokens) / Number(totalPoolTokens)) * 100).toFixed(2)
+
+          return (
+            <>
               <div className={styles.addInput}>
                 <div className={styles.userLiquidity}>
                   <div>
@@ -155,9 +180,9 @@ export default function Add({
                   </div>
                 </div>
 
-        <InputElement
+                <Field name="amount">
-          value={amount}
+                  {({ field }: { field: any }) => (
-          name="coin"
+                    <Input
                       type="number"
                       max={amountMax}
                       prefix={
@@ -172,15 +197,17 @@ export default function Add({
                         </Tooltip>
                       }
                       placeholder="0"
-          onChange={handleAmountChange}
+                      field={field}
                     />
+                  )}
+                </Field>
 
-        {(balance.ocean || dtBalance) > amount && (
+                {(Number(balance.ocean) || dtBalance) > values.amount && (
                   <Button
                     className={styles.buttonMax}
                     style="text"
                     size="small"
-            onClick={handleMax}
+                    onClick={() => setFieldValue('amount', amountMax)}
                   >
                     Use Max
                   </Button>
@@ -203,9 +230,13 @@ export default function Add({
                 isLoading={isLoading}
                 loaderMessage="Adding Liquidity..."
                 actionName={content.action}
-        action={handleAddLiquidity}
+                action={submitForm}
                 txId={txId}
               />
             </>
           )
+        }}
+      </Formik>
+    </>
+  )
 }