fix slider

components/shared/LeverageSlider.tsx

@@ -1,11 +1,18 @@
 import Decimal from 'decimal.js'
-import { ChangeEvent, useCallback, useEffect, useRef, useState } from 'react'
+import {
+  ChangeEvent,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
 import { floorToDecimal } from 'utils/numbers'
 
 const PERCENTAGE_SHORTCUTS = [10, 25, 50, 75, 100]
 
 const LeverageSlider = ({
-  amount,
+  amount = 0,
   decimals,
   handleStartDrag,
   handleEndDrag,
@@ -21,10 +28,14 @@ const LeverageSlider = ({
   onChange: (x: string) => void
   step: number
 }) => {
-  const [value, setValue] = useState(0)
   const [percent, setPercent] = useState(0)
   const inputEl = useRef<HTMLInputElement>(null)
 
+  const sliderValue = useMemo(() => {
+    if (!amount || isNaN(amount)) return 0
+    return amount
+  }, [amount])
+
   useEffect(() => {
     if (inputEl.current) {
       const target = inputEl.current
@@ -34,9 +45,9 @@ const LeverageSlider = ({
       target.style.backgroundSize =
         max - min === 0
           ? '0% 100%'
-          : ((value - min) * 100) / (max - min) + '% 100%'
+          : ((sliderValue - min) * 100) / (max - min) + '% 100%'
     }
-  }, [leverageMax, value])
+  }, [leverageMax, sliderValue])
 
   const handleShortcutButtons = useCallback(
     (percent: number) => {
@@ -49,7 +60,6 @@ const LeverageSlider = ({
         amount = floorToDecimal(amountDecimal, decimals).toFixed()
       }
       onChange(amount)
-      setValue(parseFloat(amount))
     },
     [decimals, leverageMax],
   )
@@ -57,10 +67,9 @@ const LeverageSlider = ({
   useEffect(() => {
     if (amount) {
       const percent = ((amount - leverageMax) / leverageMax) * 100 + 100
-      setValue(amount)
+      onChange(amount.toString())
       setPercent(Math.ceil(percent))
     } else {
-      setValue(0)
       setPercent(0)
     }
   }, [amount, leverageMax])
@@ -74,7 +83,6 @@ const LeverageSlider = ({
     target.style.backgroundSize = percent + '% 100%'
 
     onChange(e.target.value)
-    setValue(parseFloat(e.target.value))
     setPercent(Math.round(percent))
   }
 
@@ -90,7 +98,7 @@ const LeverageSlider = ({
         step={step}
         className="w-full focus:outline-none"
         onChange={handleSliderChange}
-        value={value}
+        value={sliderValue}
         onMouseDown={handleStartDrag}
         onMouseUp={handleEndDrag}
         onKeyDown={handleStartDrag}