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() + const [amountDatatoken, setAmountDatatoken] = useState() const [isLoading, setIsLoading] = useState() - const [txId, setTxId] = useState('') + const [txId, setTxId] = useState() 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({ +

You will spend

+ + +

You will receive

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