Remove slider quick wins (#222)

* make max display into max button

* effect refactor, get amountOcean as early as possible

* fix slider styles in Chrome

* max button fixes

* fix debounce

Signed-off-by: mihaisc <mihai.scarlat@smartcontrol.ro>

* remove console.log

* lower threshold

Co-authored-by: mihaisc <mihai.scarlat@smartcontrol.ro>

src/components/atoms/Input/InputElement.module.css

@@ -211,16 +211,28 @@
 }
 
 input[type='range'] {
-  background: none;
+  background: transparent;
+  appearance: none;
 }
 
 input[type='range']:focus {
   outline: none;
 }
 
-input[type='range']::-webkit-slider-thumb,
+/* Selectors need to be split up to work in both engines */
+input[type='range']::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  margin-top: -0.5rem;
+  background: var(--brand-gradient);
+  border: 2px solid var(--border-color);
+  width: var(--font-size-h4);
+  height: var(--font-size-h4);
+  border-radius: 50%;
+  cursor: pointer;
+  box-shadow: 0 2px 9px 0 rgba(0, 0, 0, 0.2);
+}
+
 input[type='range']::-moz-range-thumb {
-  appearance: none;
   background: var(--brand-gradient);
   border: 2px solid var(--border-color);
   width: var(--font-size-large);
@@ -230,7 +242,14 @@ input[type='range']::-moz-range-thumb {
   box-shadow: 0 2px 9px 0 rgba(0, 0, 0, 0.2);
 }
 
-input[type='range']::-webkit-slider-runnable-track,
+input[type='range']::-webkit-slider-runnable-track {
+  margin-top: -1rem;
+  background: var(--border-color);
+  border-radius: var(--border-radius);
+  height: 0.3rem;
+  border: none;
+}
+
 input[type='range']::-moz-range-track {
   background: var(--border-color);
   border-radius: var(--border-radius);

src/components/organisms/AssetActions/Pool/Remove.module.css

@@ -2,6 +2,7 @@
   composes: addInput from './Add/index.module.css';
   padding-left: calc(var(--spacer) * 2);
   padding-right: calc(var(--spacer) * 2);
+  padding-bottom: calc(var(--spacer) / 2);
 }
 
 .userLiquidity {
@@ -31,15 +32,6 @@
   margin-right: -2rem;
 }
 
-.range button {
-  margin-top: calc(var(--spacer) / 4);
-  margin-bottom: 0;
-  position: absolute;
-  bottom: 1rem;
-  right: 2rem;
-  font-size: var(--font-size-mini);
-}
-
 .slider {
   position: relative;
   z-index: 1;
@@ -47,11 +39,18 @@
 
 .maximum {
   position: absolute;
-  right: -1.5rem;
-  bottom: 1.5rem;
-  font-size: var(--font-size-small);
-  z-index: 0;
-  pointer-events: none;
+  right: -2rem;
+  bottom: 2rem;
+  font-size: var(--font-size-mini);
+  min-width: 5rem;
+  text-align: center;
+}
+
+.toggle {
+  margin-top: calc(var(--spacer) / 2);
+  margin-bottom: 0;
+  font-size: var(--font-size-mini);
+  margin-bottom: -2rem;
 }
 
 .output {

src/components/organisms/AssetActions/Pool/Remove.tsx

@@ -3,7 +3,8 @@ import React, {
   useState,
   ChangeEvent,
   useEffect,
-  FormEvent
+  FormEvent,
+  useRef
 } from 'react'
 import styles from './Remove.module.css'
 import { useOcean } from '@oceanprotocol/react'
@@ -14,7 +15,7 @@ import { Logger } from '@oceanprotocol/lib'
 import Token from './Token'
 import FormHelp from '../../../atoms/Input/Help'
 import Button from '../../../atoms/Button'
-import { getMaxValuesRemove } from './utils'
+import { getMaxPercentRemove } from './utils'
 import { graphql, useStaticQuery } from 'gatsby'
 import PriceUnit from '../../../atoms/Price/PriceUnit'
 import debounce from 'lodash.debounce'
@@ -100,67 +101,46 @@ export default function Remove({
     }
   }
 
-  function handleAmountPercentChange(e: ChangeEvent<HTMLInputElement>) {
-    setAmountPercent(e.target.value)
-  }
-
-  function handleAdvancedButton(e: FormEvent<HTMLButtonElement>) {
-    e.preventDefault()
-    setIsAdvanced(!isAdvanced)
-  }
-
+  // Get and set max percentage
   useEffect(() => {
     if (!ocean || !poolTokens) return
-    async function resetValues() {
-      setAmountPoolShares(`0`)
-      setAmountPercent('0')
-      setAmountOcean('0')
 
-      if (isAdvanced === true) {
-        setAmountMaxPercent('100')
-        setAmountDatatoken('0')
-      } else {
-        const { amountMaxPercent } = await getMaxValuesRemove(
-          ocean,
-          poolAddress,
-          poolTokens,
-          `0`
-        )
-        setAmountMaxPercent(amountMaxPercent)
-      }
+    async function getMax() {
+      const amountMaxPercent =
+        isAdvanced === true
+          ? '100'
+          : await getMaxPercentRemove(ocean, poolAddress, poolTokens)
+      setAmountMaxPercent(amountMaxPercent)
     }
-    resetValues()
-  }, [isAdvanced])
-
-  // Check and set outputs when percentage changes
-  useEffect(() => {
-    if (!ocean || !poolTokens) return
-
-    const getValues = debounce(async () => {
-      const amountPoolShares =
-        (Number(amountPercent) / 100) * Number(poolTokens)
-      setAmountPoolShares(`${amountPoolShares}`)
+    getMax()
+  }, [ocean, isAdvanced, poolAddress, poolTokens])
 
+  const getValues = useRef(
+    debounce(async (newAmountPoolShares, isAdvanced) => {
       if (isAdvanced === true) {
         const tokens = await ocean.pool.getTokensRemovedforPoolShares(
           poolAddress,
-          `${amountPoolShares}`
+          `${newAmountPoolShares}`
         )
         setAmountOcean(tokens?.oceanAmount)
         setAmountDatatoken(tokens?.dtAmount)
-      } else {
-        const { amountOcean } = await getMaxValuesRemove(
-          ocean,
-          poolAddress,
-          poolTokens,
-          `${amountPoolShares}`
-        )
-        setAmountOcean(amountOcean)
+        return
       }
-    }, 300)
-    getValues()
+
+      const amountOcean = await ocean.pool.getOceanRemovedforPoolShares(
+        poolAddress,
+        newAmountPoolShares
+      )
+      setAmountOcean(amountOcean)
+    }, 150)
+  )
+  // Check and set outputs when amountPoolShares changes
+  useEffect(() => {
+    if (!ocean || !poolTokens) return
+    console.log('eff', amountPoolShares, isAdvanced)
+    getValues.current(amountPoolShares, isAdvanced)
   }, [
-    amountPercent,
+    amountPoolShares,
     isAdvanced,
     ocean,
     poolTokens,
@@ -168,6 +148,37 @@ export default function Remove({
     totalPoolTokens
   ])
 
+  // Set amountPoolShares based on set slider value
+  function handleAmountPercentChange(e: ChangeEvent<HTMLInputElement>) {
+    setAmountPercent(e.target.value)
+    if (!poolTokens) return
+
+    const amountPoolShares = (Number(e.target.value) / 100) * Number(poolTokens)
+    setAmountPoolShares(`${amountPoolShares}`)
+  }
+
+  function handleMaxButton(e: ChangeEvent<HTMLInputElement>) {
+    e.preventDefault()
+    setAmountPercent(amountMaxPercent)
+
+    const amountPoolShares =
+      (Number(amountMaxPercent) / 100) * Number(poolTokens)
+    setAmountPoolShares(`${amountPoolShares}`)
+  }
+
+  function handleAdvancedButton(e: FormEvent<HTMLButtonElement>) {
+    e.preventDefault()
+    setIsAdvanced(!isAdvanced)
+
+    setAmountPoolShares('0')
+    setAmountPercent('0')
+    setAmountOcean('0')
+
+    if (isAdvanced === true) {
+      setAmountDatatoken('0')
+    }
+  }
+
   return (
     <div className={styles.remove}>
       <Header title={content.title} backAction={() => setShowRemove(false)} />
@@ -190,17 +201,25 @@ export default function Remove({
               value={amountPercent}
               onChange={handleAmountPercentChange}
             />
-            {isAdvanced === false && (
-              <span
-                className={styles.maximum}
-              >{`${amountMaxPercent}% max.`}</span>
-            )}
+            <Button
+              style="text"
+              size="small"
+              className={styles.maximum}
+              onClick={handleMaxButton}
+            >
+              {`${amountMaxPercent}% max`}
+            </Button>
           </div>
 
           <FormHelp>
             {isAdvanced === true ? content.advanced : content.simple}
           </FormHelp>
-          <Button style="text" size="small" onClick={handleAdvancedButton}>
+          <Button
+            style="text"
+            size="small"
+            onClick={handleAdvancedButton}
+            className={styles.toggle}
+          >
             {isAdvanced === true ? 'Simple' : 'Advanced'}
           </Button>
         </div>

src/components/organisms/AssetActions/Pool/utils.ts

@@ -1,11 +1,10 @@
 import { Ocean } from '@oceanprotocol/lib'
 
-export async function getMaxValuesRemove(
+export async function getMaxPercentRemove(
   ocean: Ocean,
   poolAddress: string,
-  poolTokens: string,
-  amountPoolShares: string
-): Promise<{ amountMaxPercent: string; amountOcean: string }> {
+  poolTokens: string
+): Promise<string> {
   const amountMaxOcean = await ocean.pool.getOceanMaxRemoveLiquidity(
     poolAddress
   )
@@ -22,10 +21,5 @@ export async function getMaxValuesRemove(
     amountMaxPercent = '100'
   }
 
-  const amountOcean = await ocean.pool.getOceanRemovedforPoolShares(
-    poolAddress,
-    amountPoolShares
-  )
-
-  return { amountMaxPercent, amountOcean }
+  return amountMaxPercent
 }