diff --git a/src/components/Asset/AssetActions/Pool/Add/FormAdd.tsx b/src/components/Asset/AssetActions/Pool/Add/FormAdd.tsx index abcca693a..168e22d8d 100644 --- a/src/components/Asset/AssetActions/Pool/Add/FormAdd.tsx +++ b/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 = useFormikContext() - - function handleFieldChange(e: ChangeEvent) { - // 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 = + 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 diff --git a/src/components/Asset/AssetActions/Pool/Add/index.tsx b/src/components/Asset/AssetActions/Pool/Add/index.tsx index 4c5f3c148..a686eac5f 100644 --- a/src/components/Asset/AssetActions/Pool/Add/index.tsx +++ b/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() const [amountMax, setAmountMax] = useState() - const [amount, setAmount] = useState('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 = 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}