make remove work

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<boolean>()
   const [txId, setTxId] = useState<string>()
   const [slippage, setSlippage] = useState<string>('5')
   const [minOceanAmount, setMinOceanAmount] = useState<string>('0')
-  const [minDatatokenAmount, setMinDatatokenAmount] = useState<string>('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<HTMLInputElement>) {
@@ -168,22 +136,6 @@ export default function Remove({
     setAmountPoolShares(`${amountPoolShares.slice(0, 18)}`)
   }
 
-  function handleAdvancedButton(e: FormEvent<HTMLButtonElement>) {
-    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<HTMLSelectElement>) {
     setSlippage(e.target.value)
   }
@@ -219,20 +171,7 @@ export default function Remove({
             </Button>
           </div>
 
-          <FormHelp>
-            {isAdvanced === true
-              ? content.pool.remove.advanced
-              : content.pool.remove.simple}
-          </FormHelp>
-          <Button
-            style="text"
-            size="small"
-            onClick={handleAdvancedButton}
-            disabled={!isAssetNetwork}
-            className={styles.toggle}
-          >
-            {isAdvanced === true ? 'Simple' : 'Advanced'}
-          </Button>
+          <FormHelp>{content.pool.remove.simple}</FormHelp>
         </div>
       </form>
       <div className={styles.output}>
@@ -242,14 +181,7 @@ export default function Remove({
         </div>
         <div>
           <p>{content.pool.remove.output.titleOut} minimum</p>
-          {isAdvanced === true ? (
-            <>
-              <Token symbol="OCEAN" balance={minOceanAmount} />
-              <Token symbol={datatokenSymbol} balance={minDatatokenAmount} />
-            </>
-          ) : (
-            <Token symbol="OCEAN" balance={minOceanAmount} />
-          )}
+          <Token symbol={baseTokenSymbol} balance={minOceanAmount} />
         </div>
       </div>
       <div className={styles.slippage}>

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}
         />
       ) : (