fix remove liquidity issues (#1258)

* reset slider after transaction

* fix issue on remove button hover

* restore transform on Button.module.css

* added check on accountId to avoid failing calls

* disable remove button on amountPercent = 0

src/@context/Pool/index.tsx

@@ -56,7 +56,13 @@ function PoolProvider({ children }: { children: ReactNode }): ReactElement {
   // const [fetchInterval, setFetchInterval] = useState<NodeJS.Timeout>()
 
   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)

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 {

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;

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}