use slider prototype

src/components/organisms/AssetActions/Pool/Remove.module.css

@@ -12,11 +12,14 @@
   composes: userLiquidity from './Add.module.css';
 }
 
-.removeRow {
+.range {
-  position: relative;
+  text-align: center;
-  margin-bottom: var(--spacer);
 }
 
-.removeRow:last-child {
+.range h3 {
-  margin-bottom: 0;
+  margin-bottom: calc(var(--spacer) / 4);
+}
+
+.range input {
+  width: 100%;
 }

src/components/organisms/AssetActions/Pool/Remove.tsx

@@ -1,47 +1,44 @@
-import React, { ReactElement, useState, ChangeEvent } from 'react'
+import React, { ReactElement, useState, ChangeEvent, useEffect } from 'react'
 import styles from './Remove.module.css'
 import { useOcean } from '@oceanprotocol/react'
 import Header from './Header'
 import { toast } from 'react-toastify'
-import InputElement from '../../../atoms/Input/InputElement'
 import Actions from './Actions'
 import { Logger } from '@oceanprotocol/lib'
-import Button from '../../../atoms/Button'
-import PriceUnit from '../../../atoms/Price/PriceUnit'
 import { Balance } from '.'
+import Token from './Token'
 
 export default function Remove({
   setShowRemove,
   poolAddress,
+  poolTokens,
   totalPoolTokens,
   userLiquidity,
   dtSymbol
 }: {
   setShowRemove: (show: boolean) => void
   poolAddress: string
+  poolTokens: string
   totalPoolTokens: string
   userLiquidity: Balance
   dtSymbol: string
 }): ReactElement {
   const { ocean, accountId } = useOcean()
-  const [amountOcean, setAmountOcean] = useState('')
+  const [amountPercent, setAmountPercent] = useState('0')
-  const [amountDatatoken, setAmountDatatoken] = useState('')
+  const [amountPoolShares, setAmountPoolShares] = useState('0')
+  const [amountOcean, setAmountOcean] = useState('0')
+  const [amountDatatoken, setAmountDatatoken] = useState('0')
   const [isLoading, setIsLoading] = useState<boolean>()
   const [txId, setTxId] = useState<string>('')
 
   async function handleRemoveLiquidity() {
     setIsLoading(true)
 
-    // TODO: can remove OCEAN & DT in one transaction?
-    // exitswapExternAmountOut? exitswapPoolAmountIn?
-    // TODO: when user hits 'use max', use pool.exitPool()
-
     try {
-      const result = await ocean.pool.removeOceanLiquidity(
+      const result = await ocean.pool.removePoolLiquidity(
         accountId,
         poolAddress,
-        amountOcean,
+        amountPoolShares
-        totalPoolTokens
       )
       setTxId(result.transactionHash)
     } catch (error) {
@@ -52,26 +49,32 @@ export default function Remove({
     }
   }
 
-  // TODO: enforce correct weight rules
+  function handleAmountPercentChange(e: ChangeEvent<HTMLInputElement>) {
-  function handleOceanAmountChange(e: ChangeEvent<HTMLInputElement>) {
+    setAmountPercent(e.target.value)
-    setAmountOcean(e.target.value)
-    setAmountDatatoken(`${Number(e.target.value) * 9}`)
   }
 
-  function handleMaxOcean() {
+  useEffect(() => {
-    setAmountOcean(`${userLiquidity.ocean}`)
+    if (!ocean) return
-    setAmountDatatoken(`${userLiquidity.ocean * 9}`)
-  }
 
-  function handleMaxDatatoken() {
+    async function getValues() {
-    setAmountDatatoken(`${userLiquidity.datatoken}`)
+      const amountPoolShares =
-    setAmountOcean(`${userLiquidity.ocean / 9}`)
+        (Number(poolTokens) / Number(amountPercent)) * 100
-  }
+      setAmountPoolShares(`${amountPoolShares}`)
 
-  function handleDatatokenAmountChange(e: ChangeEvent<HTMLInputElement>) {
+      const amountOcean = await ocean.pool.getPoolSharesForRemoveOcean(
-    setAmountDatatoken(e.target.value)
+        poolAddress,
-    setAmountOcean(`${Number(e.target.value) / 9}`)
+        `${amountPoolShares}`
-  }
+      )
+      setAmountOcean(amountOcean)
+
+      const amountDatatoken = await ocean.pool.getPoolSharesForRemoveDT(
+        poolAddress,
+        `${amountPoolShares}`
+      )
+      setAmountDatatoken(amountDatatoken)
+    }
+    getValues()
+  }, [amountPercent, ocean, poolTokens, poolAddress])
 
   return (
     <div className={styles.remove}>
@@ -81,65 +84,24 @@ export default function Remove({
       />
 
       <form className={styles.removeInput}>
-        <fieldset className={styles.removeRow}>
+        <div className={styles.range}>
-          <div className={styles.userLiquidity}>
+          <h3>{amountPercent}%</h3>
-            <span>Your pool liquidity: </span>
+          <input
-            <PriceUnit price={`${userLiquidity.ocean}`} symbol="OCEAN" small />
+            type="range"
-          </div>
+            min="0"
-          <InputElement
+            max="100"
-            value={amountOcean}
+            step="25"
-            name="ocean"
+            value={amountPercent}
-            type="number"
+            onChange={handleAmountPercentChange}
-            prefix="OCEAN"
-            placeholder="0"
-            onChange={handleOceanAmountChange}
           />
-
+        </div>
-          {userLiquidity.ocean > Number(amountOcean) && (
-            <Button
-              className={styles.buttonMax}
-              style="text"
-              size="small"
-              onClick={handleMaxOcean}
-            >
-              Use Max
-            </Button>
-          )}
-        </fieldset>
-
-        <fieldset className={styles.removeRow}>
-          <div className={styles.userLiquidity}>
-            <span>Your pool liquidity: </span>
-            <PriceUnit
-              price={`${userLiquidity.datatoken}`}
-              symbol={dtSymbol}
-              small
-            />
-          </div>
-          <InputElement
-            value={amountDatatoken}
-            name="ocean"
-            type="number"
-            prefix={dtSymbol}
-            placeholder="0"
-            onChange={handleDatatokenAmountChange}
-          />
-
-          {userLiquidity.datatoken > Number(amountDatatoken) && (
-            <Button
-              className={styles.buttonMax}
-              style="text"
-              size="small"
-              onClick={handleMaxDatatoken}
-            >
-              Use Max
-            </Button>
-          )}
-        </fieldset>
       </form>
 
       <p>You will receive</p>
 
+      <Token symbol="OCEAN" balance={amountOcean} />
+      <Token symbol={dtSymbol} balance={amountDatatoken} />
+
       <Actions
         isLoading={isLoading}
         loaderMessage="Removing Liquidity..."

src/components/organisms/AssetActions/Pool/index.tsx

@@ -128,6 +128,7 @@ export default function Pool({ ddo }: { ddo: DDO }): ReactElement {
         <Remove
           setShowRemove={setShowRemove}
           poolAddress={price.address}
+          poolTokens={poolTokens}
           totalPoolTokens={totalPoolTokens}
           userLiquidity={userLiquidity}
           dtSymbol={dtSymbol}