fix min validation input bug (#195)

* fix min validation input bug

* tweak pool transactions number output so 0.00001 shows up

src/components/molecules/PoolTransactions.tsx

@@ -10,8 +10,8 @@ import { formatCurrency } from '@coingecko/cryptoformat'
 import { useUserPreferences } from '../../providers/UserPreferences'
 
 function formatNumber(number: number, locale: string) {
-  return formatCurrency(number, '', locale, false, {
-    significantFigures: 4
+  return formatCurrency(number, '', locale, true, {
+    significantFigures: 6
   })
 }
 

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

@@ -43,11 +43,21 @@ export default function FormAdd({
   const {
     touched,
     setTouched,
-    handleChange,
     setFieldValue,
+    validateField,
     values
   }: FormikContextType<FormAddLiquidity> = useFormikContext()
 
+  function handleFieldChange(e: ChangeEvent<HTMLInputElement>) {
+    // Workaround so validation kicks in on first touch
+    !touched?.amount && setTouched({ amount: true })
+
+    // 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)
+  }
+
   useEffect(() => {
     async function calculatePoolShares() {
       if (!values.amount) {
@@ -104,15 +114,12 @@ export default function FormAdd({
             name="amount"
             max={amountMax}
             value={`${values.amount}`}
+            step="any"
             prefix={<CoinSelect dtSymbol={dtSymbol} setCoin={setCoin} />}
             placeholder="0"
             field={field}
             form={form}
-            onChange={(e: ChangeEvent<HTMLInputElement>) => {
-              // Workaround so validation kicks in on first touch
-              !touched?.amount && setTouched({ amount: true })
-              handleChange(e)
-            }}
+            onChange={handleFieldChange}
             disabled={!ocean}
           />
         )}
@@ -123,6 +130,7 @@ export default function FormAdd({
           className={styles.buttonMax}
           style="text"
           size="small"
+          disabled={!ocean}
           onClick={() => setFieldValue('amount', amountMax)}
         >
           Use Max

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

@@ -11,6 +11,7 @@ import FormAdd from './FormAdd'
 import styles from './index.module.css'
 import Token from '../Token'
 import Alert from '../../../../atoms/Alert'
+import { useUserPreferences } from '../../../../../providers/UserPreferences'
 
 const contentQuery = graphql`
   query PoolAddQuery {
@@ -67,6 +68,7 @@ export default function Add({
   const content = data.content.edges[0].node.childContentJson.pool.add
 
   const { ocean, accountId, balance } = useOcean()
+  const { debug } = useUserPreferences()
   const [txId, setTxId] = useState<string>()
   const [coin, setCoin] = useState('OCEAN')
   const [dtBalance, setDtBalance] = useState<string>()
@@ -79,7 +81,7 @@ export default function Add({
   // https://github.com/jquense/yup#number
   const validationSchema = Yup.object().shape<FormAddLiquidity>({
     amount: Yup.number()
-      .min(0.0001, 'Must be more or equal to 0.0001')
+      .min(0.00001, (param) => `Must be more or equal to ${param.min}`)
       .max(
         Number(amountMax),
         `Maximum you can add is ${Number(amountMax).toFixed(2)} ${coin}`
@@ -154,7 +156,7 @@ export default function Add({
           setSubmitting(false)
         }}
       >
-        {({ isSubmitting, submitForm }) => (
+        {({ isSubmitting, submitForm, values }) => (
           <>
             <div className={styles.addInput}>
               {isWarningAccepted ? (
@@ -204,6 +206,11 @@ export default function Add({
               action={submitForm}
               txId={txId}
             />
+            {debug && (
+              <pre>
+                <code>{JSON.stringify(values, null, 2)}</code>
+              </pre>
+            )}
           </>
         )}
       </Formik>