diff --git a/src/components/organisms/AssetActions/Pool/Add.tsx b/src/components/organisms/AssetActions/Pool/Add.tsx index d9b04c998..8ec83092d 100644 --- a/src/components/organisms/AssetActions/Pool/Add.tsx +++ b/src/components/organisms/AssetActions/Pool/Add.tsx @@ -1,4 +1,4 @@ -import React, { ReactElement, useState, ChangeEvent, useEffect } from 'react' +import React, { ReactElement, useState, useEffect, ChangeEvent } from 'react' import styles from './Add.module.css' import { useOcean } from '@oceanprotocol/react' import Header from './Header' @@ -12,7 +12,7 @@ import Tooltip from '../../../atoms/Tooltip' import { ReactComponent as Caret } from '../../../../images/caret.svg' import { graphql, useStaticQuery } from 'gatsby' import * as Yup from 'yup' -import { Field, FieldInputProps, Formik } from 'formik' +import { Field, Formik } from 'formik' import Input from '../../../atoms/Input' const contentQuery = graphql` @@ -100,14 +100,23 @@ export default function Add({ if (!ocean) return async function getMaximum() { - const amountMax = + const amountMaxPool = coin === 'OCEAN' ? await ocean.pool.getOceanMaxAddLiquidity(poolAddress) : await ocean.pool.getDTMaxAddLiquidity(poolAddress) + + const amountMax = + coin === 'OCEAN' + ? Number(balance.ocean) > Number(amountMaxPool) + ? amountMaxPool + : balance.ocean + : Number(dtBalance) > Number(amountMaxPool) + ? amountMaxPool + : dtBalance setAmountMax(amountMax) } getMaximum() - }, [ocean, poolAddress, coin]) + }, [ocean, poolAddress, coin, dtBalance, balance.ocean]) // Submit async function handleAddLiquidity(amount: number, resetForm: () => void) { @@ -152,7 +161,15 @@ export default function Add({ setSubmitting(false) }} > - {({ values, isSubmitting, setFieldValue, submitForm }) => { + {({ + values, + touched, + setTouched, + isSubmitting, + setFieldValue, + submitForm, + handleChange + }) => { // TODO: move these 2 const to some useEffect() so it dos not // constantly re-renders all the time const newPoolTokens = @@ -186,6 +203,7 @@ export default function Add({ } @@ -200,6 +218,11 @@ export default function Add({ placeholder="0" field={field} form={form} + onChange={(e) => { + // Workaround so validation kicks in on first touch + !touched?.amount && setTouched({ amount: true }) + handleChange(e) + }} /> )} diff --git a/src/components/pages/Publish/PublishForm.tsx b/src/components/pages/Publish/PublishForm.tsx index 568594034..56121f1ce 100644 --- a/src/components/pages/Publish/PublishForm.tsx +++ b/src/components/pages/Publish/PublishForm.tsx @@ -1,7 +1,7 @@ import React, { ReactElement, useEffect, FormEvent } from 'react' import styles from './PublishForm.module.css' import { useOcean } from '@oceanprotocol/react' -import { useFormikContext, Form, Field } from 'formik' +import { useFormikContext, Field } from 'formik' import Input from '../../atoms/Input' import Button from '../../atoms/Button' import { FormContent, FormFieldProps } from '../../../@types/Form' @@ -37,7 +37,7 @@ export default function PublishForm({ } return ( -
status === 'empty' && setStatus(null)} @@ -61,6 +61,6 @@ export default function PublishForm({ )} -
+ ) }