diff --git a/src/@context/Pool/index.tsx b/src/@context/Pool/index.tsx index 34f28e5bb..de6ff8b68 100644 --- a/src/@context/Pool/index.tsx +++ b/src/@context/Pool/index.tsx @@ -56,7 +56,13 @@ function PoolProvider({ children }: { children: ReactNode }): ReactElement { // const [fetchInterval, setFetchInterval] = useState() const fetchAllData = useCallback(async () => { - if (!asset?.chainId || !asset?.accessDetails?.addressOrId || !owner) return + if ( + !accountId || + !asset?.chainId || + !asset?.accessDetails?.addressOrId || + !owner + ) + return const response = await getPoolData( asset.chainId, @@ -64,6 +70,7 @@ function PoolProvider({ children }: { children: ReactNode }): ReactElement { owner, accountId || '' ) + if (!response) return setPoolData(response.poolData) diff --git a/src/components/@shared/atoms/Button.module.css b/src/components/@shared/atoms/Button.module.css index d63783b26..e187b43cf 100644 --- a/src/components/@shared/atoms/Button.module.css +++ b/src/components/@shared/atoms/Button.module.css @@ -26,6 +26,7 @@ .button:last-child { margin-right: 0; + min-width: auto; } .button:hover, @@ -33,8 +34,8 @@ color: var(--brand-white); background: var(--brand-grey-light); text-decoration: none; - transform: translate3d(0, -0.05rem, 0); box-shadow: 0 12px 30px 0 rgba(0, 0, 0, 0.1); + transform: translate3d(0, -0.05rem, 0); } .button:active { diff --git a/src/components/Asset/AssetActions/Pool/Remove/index.module.css b/src/components/Asset/AssetActions/Pool/Remove/index.module.css index 0bdc13d89..f34cd2dbb 100644 --- a/src/components/Asset/AssetActions/Pool/Remove/index.module.css +++ b/src/components/Asset/AssetActions/Pool/Remove/index.module.css @@ -31,13 +31,17 @@ .maximum { position: absolute; - right: -2rem; - bottom: 2rem; + right: 0; + bottom: 2.5rem; font-size: var(--font-size-mini); min-width: 5rem; text-align: center; } +.maximum:hover { + transform: none; +} + .toggle { margin-top: calc(var(--spacer) / 2); margin-bottom: 0; diff --git a/src/components/Asset/AssetActions/Pool/Remove/index.tsx b/src/components/Asset/AssetActions/Pool/Remove/index.tsx index 07691f391..538c1c858 100644 --- a/src/components/Asset/AssetActions/Pool/Remove/index.tsx +++ b/src/components/Asset/AssetActions/Pool/Remove/index.tsx @@ -67,11 +67,16 @@ export default function Remove({ minOceanAmount ) setTxId(result?.transactionHash) + // fetch new data fetchAllData() } catch (error) { LoggerInstance.error(error.message) toast.error(error.message) } finally { + // reset slider after transaction + setAmountPercent('0') + setAmountOcean('0') + setMinOceanAmount('0') setIsLoading(false) } } @@ -80,8 +85,10 @@ export default function Remove({ if (!accountId || !poolTokens) return async function getMax() { + const poolTokensAmount = + !poolTokens || poolTokens === '0' ? '1' : poolTokens const maxTokensToRemoveFromPool = calcMaxExactOut(totalPoolTokens) - const poolTokensDecimal = new Decimal(poolTokens) + const poolTokensDecimal = new Decimal(poolTokensAmount) const maxTokensToRemoveForUser = maxTokensToRemoveFromPool.greaterThan( poolTokensDecimal ) @@ -105,6 +112,7 @@ export default function Remove({ tokenOutAddress, newAmountPoolShares ) + setAmountOcean(newAmountOcean) }, 150) ) @@ -116,6 +124,11 @@ export default function Remove({ }, [amountPoolShares, accountId, poolTokens, poolAddress, totalPoolTokens]) useEffect(() => { + if (!amountOcean || amountPercent === '0') { + setMinOceanAmount('0') + return + } + const minOceanAmount = new Decimal(amountOcean) .mul(new Decimal(100).minus(new Decimal(slippage))) .dividedBy(100) @@ -220,7 +233,12 @@ export default function Remove({ actionName={content.pool.remove.action} action={handleRemoveLiquidity} successMessage="Successfully removed liquidity." - isDisabled={!isAssetNetwork || amountOcean === '0'} + isDisabled={ + !isAssetNetwork || + amountPercent === '0' || + amountOcean === '0' || + poolTokens === '0' + } txId={txId} tokenAddress={tokenOutAddress} tokenSymbol={tokenOutSymbol}