From d7fed2deb57fc397a39f8cf9769118db646ac4d1 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Tue, 13 Oct 2020 14:16:50 +0200
Subject: [PATCH] make slider/output work

---
 .../organisms/AssetActions/Pool/Remove.tsx    | 20 +++++++++----------
 .../organisms/AssetActions/Pool/index.tsx     |  2 --
 2 files changed, 10 insertions(+), 12 deletions(-)

diff --git a/src/components/organisms/AssetActions/Pool/Remove.tsx b/src/components/organisms/AssetActions/Pool/Remove.tsx
index d1b017d7e..34dd54c57 100644
--- a/src/components/organisms/AssetActions/Pool/Remove.tsx
+++ b/src/components/organisms/AssetActions/Pool/Remove.tsx
@@ -5,31 +5,26 @@ import Header from './Header'
 import { toast } from 'react-toastify'
 import Actions from './Actions'
 import { Logger } from '@oceanprotocol/lib'
-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 [amountPercent, setAmountPercent] = useState('0')
   const [amountPoolShares, setAmountPoolShares] = useState('0')
-  const [amountOcean, setAmountOcean] = useState('0')
-  const [amountDatatoken, setAmountDatatoken] = useState('0')
+  const [amountOcean, setAmountOcean] = useState<string>()
+  const [amountDatatoken, setAmountDatatoken] = useState<string>()
   const [isLoading, setIsLoading] = useState<boolean>()
-  const [txId, setTxId] = useState<string>('')
+  const [txId, setTxId] = useState<string>()
 
   async function handleRemoveLiquidity() {
     setIsLoading(true)
@@ -53,12 +48,13 @@ export default function Remove({
     setAmountPercent(e.target.value)
   }
 
+  // Check and set outputs when percentage changes
   useEffect(() => {
-    if (!ocean) return
+    if (!ocean || !poolTokens) return
 
     async function getValues() {
       const amountPoolShares =
-        (Number(poolTokens) / Number(amountPercent)) * 100
+        (Number(amountPercent) / Number(poolTokens)) * 100
       setAmountPoolShares(`${amountPoolShares}`)
 
       const amountOcean = await ocean.pool.getPoolSharesForRemoveOcean(
@@ -97,6 +93,10 @@ export default function Remove({
         </div>
       </form>
 
+      <p>You will spend</p>
+
+      <Token symbol="pool shares" balance={amountPoolShares} noIcon />
+
       <p>You will receive</p>
 
       <Token symbol="OCEAN" balance={amountOcean} />
diff --git a/src/components/organisms/AssetActions/Pool/index.tsx b/src/components/organisms/AssetActions/Pool/index.tsx
index 48d15eb46..f2a1990e1 100644
--- a/src/components/organisms/AssetActions/Pool/index.tsx
+++ b/src/components/organisms/AssetActions/Pool/index.tsx
@@ -129,8 +129,6 @@ export default function Pool({ ddo }: { ddo: DDO }): ReactElement {
           setShowRemove={setShowRemove}
           poolAddress={price.address}
           poolTokens={poolTokens}
-          totalPoolTokens={totalPoolTokens}
-          userLiquidity={userLiquidity}
           dtSymbol={dtSymbol}
         />
       ) : (