mirror of
https://github.com/oceanprotocol/market.git
synced 2024-06-30 22:01:44 +02:00
remove all the custom field change overwrites
This commit is contained in:
parent
a9aeed4aec
commit
9ce1f6f7d5
|
@ -1,4 +1,4 @@
|
||||||
import React, { ChangeEvent, ReactElement, useEffect } from 'react'
|
import React, { ReactElement, useEffect } from 'react'
|
||||||
import styles from './FormAdd.module.css'
|
import styles from './FormAdd.module.css'
|
||||||
import Input from '@shared/FormInput'
|
import Input from '@shared/FormInput'
|
||||||
import {
|
import {
|
||||||
|
@ -20,7 +20,6 @@ export default function FormAdd({
|
||||||
tokenInAddress,
|
tokenInAddress,
|
||||||
tokenInSymbol,
|
tokenInSymbol,
|
||||||
amountMax,
|
amountMax,
|
||||||
setAmount,
|
|
||||||
totalPoolTokens,
|
totalPoolTokens,
|
||||||
totalBalance,
|
totalBalance,
|
||||||
poolAddress,
|
poolAddress,
|
||||||
|
@ -30,7 +29,6 @@ export default function FormAdd({
|
||||||
tokenInAddress: string
|
tokenInAddress: string
|
||||||
tokenInSymbol: string
|
tokenInSymbol: string
|
||||||
amountMax: string
|
amountMax: string
|
||||||
setAmount: (value: string) => void
|
|
||||||
totalPoolTokens: string
|
totalPoolTokens: string
|
||||||
totalBalance: PoolBalance
|
totalBalance: PoolBalance
|
||||||
poolAddress: string
|
poolAddress: string
|
||||||
|
@ -41,24 +39,8 @@ export default function FormAdd({
|
||||||
const { isAssetNetwork } = useAsset()
|
const { isAssetNetwork } = useAsset()
|
||||||
|
|
||||||
// Connect with form
|
// Connect with form
|
||||||
const {
|
const { setFieldValue, values }: FormikContextType<FormAddLiquidity> =
|
||||||
touched,
|
useFormikContext()
|
||||||
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)
|
|
||||||
}
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
async function calculatePoolShares() {
|
async function calculatePoolShares() {
|
||||||
|
@ -76,7 +58,7 @@ export default function FormAdd({
|
||||||
const poolTokens = await poolInstance.calcPoolOutGivenSingleIn(
|
const poolTokens = await poolInstance.calcPoolOutGivenSingleIn(
|
||||||
poolAddress,
|
poolAddress,
|
||||||
tokenInAddress,
|
tokenInAddress,
|
||||||
`${values.amount}`
|
values.amount
|
||||||
)
|
)
|
||||||
setNewPoolTokens(poolTokens)
|
setNewPoolTokens(poolTokens)
|
||||||
const newPoolShareDecimal =
|
const newPoolShareDecimal =
|
||||||
|
@ -124,13 +106,12 @@ export default function FormAdd({
|
||||||
name="amount"
|
name="amount"
|
||||||
max={amountMax}
|
max={amountMax}
|
||||||
min="0"
|
min="0"
|
||||||
value={`${values.amount}`}
|
value={values.amount}
|
||||||
step="any"
|
step="any"
|
||||||
prefix={tokenInSymbol}
|
prefix={tokenInSymbol}
|
||||||
placeholder="0"
|
placeholder="0"
|
||||||
field={field}
|
field={field}
|
||||||
form={form}
|
form={form}
|
||||||
onChange={handleFieldChange}
|
|
||||||
disabled={!isAssetNetwork}
|
disabled={!isAssetNetwork}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
|
@ -142,10 +123,7 @@ export default function FormAdd({
|
||||||
style="text"
|
style="text"
|
||||||
size="small"
|
size="small"
|
||||||
disabled={!web3}
|
disabled={!web3}
|
||||||
onClick={() => {
|
onClick={() => setFieldValue('amount', amountMax)}
|
||||||
setAmount(amountMax)
|
|
||||||
setFieldValue('amount', amountMax)
|
|
||||||
}}
|
|
||||||
>
|
>
|
||||||
Use Max
|
Use Max
|
||||||
</Button>
|
</Button>
|
||||||
|
|
|
@ -16,11 +16,11 @@ import content from '../../../../../../content/price.json'
|
||||||
import { LoggerInstance, Pool } from '@oceanprotocol/lib'
|
import { LoggerInstance, Pool } from '@oceanprotocol/lib'
|
||||||
|
|
||||||
export interface FormAddLiquidity {
|
export interface FormAddLiquidity {
|
||||||
amount: number
|
amount: string
|
||||||
}
|
}
|
||||||
|
|
||||||
const initialValues: FormAddLiquidity = {
|
const initialValues: FormAddLiquidity = {
|
||||||
amount: undefined
|
amount: ''
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function Add({
|
export default function Add({
|
||||||
|
@ -49,7 +49,6 @@ export default function Add({
|
||||||
const { debug } = useUserPreferences()
|
const { debug } = useUserPreferences()
|
||||||
const [txId, setTxId] = useState<string>()
|
const [txId, setTxId] = useState<string>()
|
||||||
const [amountMax, setAmountMax] = useState<string>()
|
const [amountMax, setAmountMax] = useState<string>()
|
||||||
const [amount, setAmount] = useState<string>('0')
|
|
||||||
const [newPoolTokens, setNewPoolTokens] = useState('0')
|
const [newPoolTokens, setNewPoolTokens] = useState('0')
|
||||||
const [newPoolShare, setNewPoolShare] = useState('0')
|
const [newPoolShare, setNewPoolShare] = useState('0')
|
||||||
const [isWarningAccepted, setIsWarningAccepted] = useState(false)
|
const [isWarningAccepted, setIsWarningAccepted] = useState(false)
|
||||||
|
@ -57,7 +56,7 @@ export default function Add({
|
||||||
// Live validation rules
|
// Live validation rules
|
||||||
// https://github.com/jquense/yup#number
|
// https://github.com/jquense/yup#number
|
||||||
const validationSchema: Yup.SchemaOf<FormAddLiquidity> = Yup.object().shape({
|
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}`)
|
.min(0.00001, (param) => `Must be more or equal to ${param.min}`)
|
||||||
.max(
|
.max(
|
||||||
Number(amountMax),
|
Number(amountMax),
|
||||||
|
@ -99,7 +98,7 @@ export default function Add({
|
||||||
])
|
])
|
||||||
|
|
||||||
// Submit
|
// Submit
|
||||||
async function handleAddLiquidity(amount: number, resetForm: () => void) {
|
async function handleAddLiquidity(amount: string, resetForm: () => void) {
|
||||||
const poolInstance = new Pool(web3, LoggerInstance)
|
const poolInstance = new Pool(web3, LoggerInstance)
|
||||||
const minPoolAmountOut = '0' // ? TODO: how to get?
|
const minPoolAmountOut = '0' // ? TODO: how to get?
|
||||||
|
|
||||||
|
@ -108,7 +107,7 @@ export default function Add({
|
||||||
accountId,
|
accountId,
|
||||||
poolAddress,
|
poolAddress,
|
||||||
tokenInAddress,
|
tokenInAddress,
|
||||||
`${amount}`,
|
amount,
|
||||||
minPoolAmountOut
|
minPoolAmountOut
|
||||||
)
|
)
|
||||||
setTxId(result?.transactionHash)
|
setTxId(result?.transactionHash)
|
||||||
|
@ -142,7 +141,6 @@ export default function Add({
|
||||||
tokenInAddress={tokenInAddress}
|
tokenInAddress={tokenInAddress}
|
||||||
tokenInSymbol={tokenInSymbol}
|
tokenInSymbol={tokenInSymbol}
|
||||||
amountMax={amountMax}
|
amountMax={amountMax}
|
||||||
setAmount={setAmount}
|
|
||||||
totalPoolTokens={totalPoolTokens}
|
totalPoolTokens={totalPoolTokens}
|
||||||
totalBalance={totalBalance}
|
totalBalance={totalBalance}
|
||||||
poolAddress={poolAddress}
|
poolAddress={poolAddress}
|
||||||
|
@ -178,16 +176,16 @@ export default function Add({
|
||||||
isDisabled={
|
isDisabled={
|
||||||
!isValid ||
|
!isValid ||
|
||||||
!isWarningAccepted ||
|
!isWarningAccepted ||
|
||||||
!amount ||
|
!values.amount ||
|
||||||
amount === '' ||
|
values.amount === '' ||
|
||||||
amount === '0'
|
values.amount === '0'
|
||||||
}
|
}
|
||||||
isLoading={isSubmitting}
|
isLoading={isSubmitting}
|
||||||
loaderMessage="Adding Liquidity..."
|
loaderMessage="Adding Liquidity..."
|
||||||
successMessage="Successfully added liquidity."
|
successMessage="Successfully added liquidity."
|
||||||
actionName={content.pool.add.action}
|
actionName={content.pool.add.action}
|
||||||
action={submitForm}
|
action={submitForm}
|
||||||
amount={amount}
|
amount={values.amount}
|
||||||
tokenAddress={tokenInAddress}
|
tokenAddress={tokenInAddress}
|
||||||
tokenSymbol={tokenInSymbol}
|
tokenSymbol={tokenInSymbol}
|
||||||
txId={txId}
|
txId={txId}
|
||||||
|
|
Loading…
Reference in New Issue
Block a user