diff --git a/src/components/Asset/AssetActions/Pool/Remove.tsx b/src/components/Asset/AssetActions/Pool/Remove.tsx index 7956a75d3..d6fa05348 100644 --- a/src/components/Asset/AssetActions/Pool/Remove.tsx +++ b/src/components/Asset/AssetActions/Pool/Remove.tsx @@ -3,14 +3,13 @@ import React, { useState, ChangeEvent, useEffect, - FormEvent, useRef } from 'react' import styles from './Remove.module.css' import Header from './Header' import { toast } from 'react-toastify' import Actions from './Actions' -import { LoggerInstance } from '@oceanprotocol/lib' +import { LoggerInstance, Pool } from '@oceanprotocol/lib' import Token from './Token' import FormHelp from '@shared/FormInput/Help' import Button from '@shared/atoms/Button' @@ -23,57 +22,51 @@ import Decimal from 'decimal.js' import { useAsset } from '@context/Asset' import content from '../../../../../content/price.json' +const slippagePresets = ['5', '10', '15', '25', '50'] + export default function Remove({ setShowRemove, poolAddress, poolTokens, totalPoolTokens, - datatokenSymbol, + baseTokenAddress, + baseTokenSymbol, fetchAllData }: { setShowRemove: (show: boolean) => void poolAddress: string poolTokens: string totalPoolTokens: string - datatokenSymbol: string + baseTokenAddress: string + baseTokenSymbol: string fetchAllData: () => void }): ReactElement { - const slippagePresets = ['5', '10', '15', '25', '50'] - const { accountId } = useWeb3() + const { accountId, web3 } = useWeb3() const { isAssetNetwork } = useAsset() const [amountPercent, setAmountPercent] = useState('0') const [amountMaxPercent, setAmountMaxPercent] = useState('100') const [amountPoolShares, setAmountPoolShares] = useState('0') const [amountOcean, setAmountOcean] = useState('0') - const [amountDatatoken, setAmountDatatoken] = useState('0') - const [isAdvanced, setIsAdvanced] = useState(false) const [isLoading, setIsLoading] = useState() const [txId, setTxId] = useState() const [slippage, setSlippage] = useState('5') const [minOceanAmount, setMinOceanAmount] = useState('0') - const [minDatatokenAmount, setMinDatatokenAmount] = useState('0') Decimal.set({ toExpNeg: -18, precision: 18, rounding: 1 }) async function handleRemoveLiquidity() { setIsLoading(true) + try { - // const result = - // isAdvanced === true - // ? await ocean.pool.removePoolLiquidity( - // accountId, - // poolAddress, - // amountPoolShares, - // minDatatokenAmount, - // minOceanAmount - // ) - // : await ocean.pool.removeOceanLiquidityWithMinimum( - // accountId, - // poolAddress, - // amountPoolShares, - // minOceanAmount - // ) - // setTxId(result?.transactionHash) + const poolInstance = new Pool(web3, LoggerInstance) + const result = await poolInstance.exitswapPoolAmountIn( + accountId, + poolAddress, + baseTokenAddress, + amountPoolShares, + minOceanAmount + ) + setTxId(result?.transactionHash) fetchAllData() } catch (error) { LoggerInstance.error(error.message) @@ -88,26 +81,14 @@ export default function Remove({ if (!accountId || !poolTokens) return async function getMax() { - // const amountMaxPercent = - // isAdvanced === true - // ? '100' - // : await getMaxPercentRemove(poolAddress, poolTokens) + // const amountMaxPercent = await getMaxPercentRemove(poolAddress, poolTokens) // setAmountMaxPercent(amountMaxPercent) } getMax() - }, [accountId, isAdvanced, poolAddress, poolTokens]) + }, [accountId, poolAddress, poolTokens]) const getValues = useRef( - debounce(async (newAmountPoolShares, isAdvanced) => { - // if (isAdvanced === true) { - // const tokens = await ocean.pool.getTokensRemovedforPoolShares( - // poolAddress, - // `${newAmountPoolShares}` - // ) - // setAmountOcean(tokens?.oceanAmount) - // setAmountDatatoken(tokens?.dtAmount) - // return - // } + debounce(async (newAmountPoolShares) => { // const amountOcean = await ocean.pool.getOceanRemovedforPoolShares( // poolAddress, // newAmountPoolShares @@ -118,15 +99,8 @@ export default function Remove({ // Check and set outputs when amountPoolShares changes useEffect(() => { if (!accountId || !poolTokens) return - getValues.current(amountPoolShares, isAdvanced) - }, [ - amountPoolShares, - isAdvanced, - accountId, - poolTokens, - poolAddress, - totalPoolTokens - ]) + getValues.current(amountPoolShares) + }, [amountPoolShares, accountId, poolTokens, poolAddress, totalPoolTokens]) useEffect(() => { const minOceanAmount = new Decimal(amountOcean) @@ -134,14 +108,8 @@ export default function Remove({ .dividedBy(100) .toString() - const minDatatokenAmount = new Decimal(amountDatatoken) - .mul(new Decimal(100).minus(new Decimal(slippage))) - .dividedBy(100) - .toString() - setMinOceanAmount(minOceanAmount.slice(0, 18)) - setMinDatatokenAmount(minDatatokenAmount.slice(0, 18)) - }, [slippage, amountOcean, amountDatatoken, isAdvanced]) + }, [slippage, amountOcean]) // Set amountPoolShares based on set slider value function handleAmountPercentChange(e: ChangeEvent) { @@ -168,22 +136,6 @@ export default function Remove({ setAmountPoolShares(`${amountPoolShares.slice(0, 18)}`) } - function handleAdvancedButton(e: FormEvent) { - e.preventDefault() - setIsAdvanced(!isAdvanced) - - setAmountPoolShares('0') - setAmountPercent('0') - setAmountOcean('0') - setSlippage('5') - setMinOceanAmount('0') - setMinDatatokenAmount('0') - - if (isAdvanced === true) { - setAmountDatatoken('0') - } - } - function handleSlippageChange(e: ChangeEvent) { setSlippage(e.target.value) } @@ -219,20 +171,7 @@ export default function Remove({ - - {isAdvanced === true - ? content.pool.remove.advanced - : content.pool.remove.simple} - - + {content.pool.remove.simple}
@@ -242,14 +181,7 @@ export default function Remove({

{content.pool.remove.output.titleOut} minimum

- {isAdvanced === true ? ( - <> - - - - ) : ( - - )} +
diff --git a/src/components/Asset/AssetActions/Pool/index.tsx b/src/components/Asset/AssetActions/Pool/index.tsx index 31aec10c7..ffa86d0e6 100644 --- a/src/components/Asset/AssetActions/Pool/index.tsx +++ b/src/components/Asset/AssetActions/Pool/index.tsx @@ -33,6 +33,7 @@ interface PoolInfo { weightDt: string datatokenSymbol: string baseTokenSymbol: string + baseTokenAddress: string totalPoolTokens: string totalLiquidityInOcean: Decimal } @@ -162,6 +163,7 @@ export default function Pool(): ReactElement { weightDt: getWeight(poolData.datatokenWeight), datatokenSymbol: poolData.datatoken.symbol, baseTokenSymbol: poolData.baseToken.symbol, + baseTokenAddress: poolData.baseToken.address, totalPoolTokens: poolData.totalShares, totalLiquidityInOcean } @@ -352,7 +354,8 @@ export default function Pool(): ReactElement { poolAddress={price?.address} poolTokens={poolInfoUser?.poolShares} totalPoolTokens={poolInfo?.totalPoolTokens} - datatokenSymbol={poolInfo?.datatokenSymbol} + baseTokenAddress={poolInfo?.baseTokenAddress} + baseTokenSymbol={poolInfo?.baseTokenSymbol} fetchAllData={fetchAllData} /> ) : (