diff --git a/src/components/organisms/AssetActions/Pool/Remove.module.css b/src/components/organisms/AssetActions/Pool/Remove.module.css index 9549df334..9c279b9a5 100644 --- a/src/components/organisms/AssetActions/Pool/Remove.module.css +++ b/src/components/organisms/AssetActions/Pool/Remove.module.css @@ -32,6 +32,20 @@ margin-bottom: 0; } +.slider { + position: relative; + z-index: 1; +} + +.maximum { + position: absolute; + right: -1.5rem; + bottom: 1.5rem; + font-size: var(--font-size-small); + z-index: 0; + pointer-events: none; +} + .output { composes: output from './Add.module.css'; } diff --git a/src/components/organisms/AssetActions/Pool/Remove.tsx b/src/components/organisms/AssetActions/Pool/Remove.tsx index 4bbc8ac15..c9130e969 100644 --- a/src/components/organisms/AssetActions/Pool/Remove.tsx +++ b/src/components/organisms/AssetActions/Pool/Remove.tsx @@ -10,18 +10,45 @@ import { useOcean } from '@oceanprotocol/react' import Header from './Header' import { toast } from 'react-toastify' import Actions from './Actions' -import { Logger } from '@oceanprotocol/lib' +import { Logger, Ocean } from '@oceanprotocol/lib' import Token from './Token' import FormHelp from '../../../atoms/Input/Help' import Button from '../../../atoms/Button' const help = { simple: - 'You will get the equivalent value in OCEAN, limited to xxx% of the total liquidity.', + 'You will get the equivalent value in OCEAN, limited to 60% of the total liquidity.', advanced: 'You will get OCEAN and Datatokens equivalent to your pool share, without any limit.' } +async function getMaxValues( + ocean: Ocean, + poolAddress: string, + poolTokens: string, + amountPoolShares: string +) { + const amountMaxOcean = await ocean.pool.getOceanMaxRemoveLiquidity( + poolAddress + ) + + const amountMaxPoolShares = await ocean.pool.getPoolSharesRequiredToRemoveOcean( + poolAddress, + amountMaxOcean + ) + + const amountMaxPercent = `${Math.floor( + (Number(amountMaxPoolShares) / Number(poolTokens)) * 100 + )}` + + const amountOcean = await ocean.pool.getOceanRemovedforPoolShares( + poolAddress, + amountPoolShares + ) + + return { amountMaxPercent, amountOcean } +} + export default function Remove({ setShowRemove, poolAddress, @@ -96,20 +123,13 @@ export default function Remove({ setAmountOcean(tokens?.oceanAmount) setAmountDatatoken(tokens?.dtAmount) } else { - const amountMaxOcean = await ocean.pool.getOceanMaxRemoveLiquidity( - poolAddress - ) - console.log(amountMaxOcean) - - // TODO: Calculate maximum percentage a user can remove based on maximum OCEAN - // to limit the range slider - // const maxPercent = ?? - // setAmountMaxPercent(maxPercent) - - const amountOcean = await ocean.pool.getOceanRemovedforPoolShares( + const { amountMaxPercent, amountOcean } = await getMaxValues( + ocean, poolAddress, + poolTokens, `${amountPoolShares}` ) + setAmountMaxPercent(amountMaxPercent) setAmountOcean(amountOcean) } } @@ -126,14 +146,20 @@ export default function Remove({