add percent buttons to slider

components/shared/LeverageSlider.tsx

@@ -1,17 +1,24 @@
-import { ChangeEvent, useEffect, useRef, useState } from 'react'
+import Decimal from 'decimal.js'
+import { ChangeEvent, useCallback, useEffect, useRef, useState } from 'react'
+import { floorToDecimal } from 'utils/numbers'
+
+const PERCENTAGE_SHORTCUTS = [10, 25, 50, 75, 100]
 
 const LeverageSlider = ({
   amount,
+  decimals,
   leverageMax,
   onChange,
   step,
 }: {
   amount: number
+  decimals?: number
   leverageMax: number
   onChange: (x: string) => void
   step: number
 }) => {
   const [value, setValue] = useState(0)
+  const [percent, setPercent] = useState(0)
   const inputEl = useRef<HTMLInputElement>(null)
 
   useEffect(() => {
@@ -27,11 +34,33 @@ const LeverageSlider = ({
     }
   }, [leverageMax, value])
 
+  const handleShortcutButtons = useCallback(
+    (percent: number) => {
+      setPercent(percent)
+      const maxDecimal = new Decimal(leverageMax)
+      const percentDecimal = new Decimal(percent).div(100)
+      const amountDecimal = maxDecimal.mul(percentDecimal)
+      let amount = amountDecimal.toFixed()
+      if (decimals) {
+        amount = floorToDecimal(amountDecimal, decimals).toFixed()
+      }
+      onChange(amount)
+      setValue(parseFloat(amount))
+    },
+    [decimals, leverageMax],
+  )
+
+  useEffect(() => {
+    const percent = ((value - leverageMax) / leverageMax) * 100 + 100
+    setPercent(Math.round(percent))
+  }, [leverageMax])
+
   useEffect(() => {
     if (amount) {
       setValue(amount)
     } else {
       setValue(0)
+      setPercent(0)
     }
   }, [amount])
 
@@ -40,11 +69,12 @@ const LeverageSlider = ({
     const min = parseFloat(target.min)
     const max = parseFloat(target.max)
     const val = parseFloat(target.value)
-
-    target.style.backgroundSize = ((val - min) * 100) / (max - min) + '% 100%'
+    const percent = ((val - min) * 100) / (max - min)
+    target.style.backgroundSize = percent + '% 100%'
 
     onChange(e.target.value)
     setValue(parseFloat(e.target.value))
+    setPercent(Math.round(percent))
   }
 
   return (
@@ -61,6 +91,20 @@ const LeverageSlider = ({
         onChange={handleSliderChange}
         value={value}
       ></input>
+      <div className="mt-1 flex justify-between">
+        {PERCENTAGE_SHORTCUTS.map((p) => (
+          <button
+            className={`text-xxs focus:outline-none md:hover:text-th-active ${
+              p <= percent ? 'text-th-active' : 'text-th-fgd-3'
+            }`}
+            key={p}
+            onClick={() => handleShortcutButtons(p)}
+            type="button"
+          >
+            {p}%
+          </button>
+        ))}
+      </div>
     </>
   )
 }

components/swap/SwapSlider.tsx

@@ -1,6 +1,7 @@
 import useMangoAccount from 'hooks/useMangoAccount'
 import LeverageSlider from '../shared/LeverageSlider'
 import { TokenMaxResults } from './useTokenMax'
+import mangoStore from '@store/mangoStore'
 
 const SwapSlider = ({
   amount,
@@ -17,6 +18,7 @@ const SwapSlider = ({
 }) => {
   const { mangoAccount } = useMangoAccount()
   const { amount: tokenMax, amountWithBorrow } = maxAmount(useMargin)
+  const { inputBank } = mangoStore((s) => s.swap)
 
   return (
     <>
@@ -30,6 +32,7 @@ const SwapSlider = ({
       ) : (
         <LeverageSlider
           amount={amount}
+          decimals={inputBank?.mintDecimals}
           leverageMax={
             useMargin ? amountWithBorrow.toNumber() : tokenMax.toNumber()
           }