set swap input amount to 0 on token switch

components/modals/BorrowModal.tsx

@@ -1,5 +1,6 @@
 import { toUiDecimals } from '@blockworks-foundation/mango-v4'
 import { ChevronDownIcon } from '@heroicons/react/solid'
+import Decimal from 'decimal.js'
 import { useTranslation } from 'next-i18next'
 import Image from 'next/image'
 import React, { ChangeEvent, useCallback, useMemo, useState } from 'react'
@@ -176,6 +177,7 @@ function BorrowModal({ isOpen, onClose, token }: ModalCombinedProps) {
                 <p className="text-th-fgd-3">0.00x</p>
               </div>
               <BorrowLeverageSlider
+                amount={new Decimal(inputAmount)}
                 tokenMax={tokenMax}
                 onChange={(x) => setInputAmount(x)}
               />

components/swap/LeverageSlider.tsx

@@ -1,9 +1,10 @@
 import { ChangeEvent, useEffect, useMemo, useRef, useState } from 'react'
 import { toUiDecimals } from '@blockworks-foundation/mango-v4'
 import mangoStore from '../../store/state'
+import Decimal from 'decimal.js'
 
 type LeverageSliderProps = {
-  amount?: number
+  amount: Decimal
   inputToken?: string
   outputToken?: string
   onChange: (x: string) => void
@@ -14,11 +15,11 @@ const LeverageSlider = ({
   leverageMax,
   onChange,
 }: {
-  amount?: number
+  amount: Decimal
   leverageMax: number
   onChange: (x: any) => any
 }) => {
-  const [value, setValue] = useState(0)
+  const [value, setValue] = useState<Decimal>(new Decimal(0))
   const inputEl = useRef<HTMLInputElement>(null)
 
   useEffect(() => {
@@ -30,16 +31,14 @@ const LeverageSlider = ({
       target.style.backgroundSize =
         max - min === 0
           ? '0% 100%'
-          : ((value - min) * 100) / (max - min) + '% 100%'
+          : ((value.toNumber() - min) * 100) / (max - min) + '% 100%'
     }
   }, [leverageMax, value])
 
   useEffect(() => {
-    if (amount) {
-      onChange(amount)
-      setValue(amount)
-    }
-  }, [amount])
+    onChange(amount.toString())
+    setValue(amount)
+  }, [amount, onChange])
 
   const handleSliderChange = (e: ChangeEvent<HTMLInputElement>) => {
     let target = e.target
@@ -50,7 +49,7 @@ const LeverageSlider = ({
     target.style.backgroundSize = ((val - min) * 100) / (max - min) + '% 100%'
 
     onChange(e.target.value)
-    setValue(parseFloat(e.target.value))
+    setValue(new Decimal(e.target.value))
   }
 
   return (
@@ -65,7 +64,7 @@ const LeverageSlider = ({
         step={0.000001}
         className="w-full"
         onChange={handleSliderChange}
-        value={value}
+        value={value.toNumber()}
       ></input>
     </>
   )
@@ -113,15 +112,21 @@ export const SwapLeverageSlider = ({
 }
 
 export const BorrowLeverageSlider = ({
+  amount,
   tokenMax,
   onChange,
 }: {
+  amount: Decimal
   tokenMax: number
   onChange: (x: any) => any
 }) => {
   return (
     <>
-      <LeverageSlider leverageMax={tokenMax} onChange={onChange} />
+      <LeverageSlider
+        amount={amount}
+        leverageMax={tokenMax}
+        onChange={onChange}
+      />
     </>
   )
 }

components/swap/Swap.tsx

@@ -123,7 +123,7 @@ const Swap = () => {
       s.swap.inputTokenInfo = outputTokenInfo
       s.swap.outputTokenInfo = inputTokenInfo
     })
-
+    setAmountInformValue('')
     setAnimateSwitchArrow(
       (prevanimateSwitchArrow) => prevanimateSwitchArrow + 1
     )
@@ -320,7 +320,7 @@ const Swap = () => {
             <p className="text-th-fgd-1">0.00x</p>
           </div>
           <SwapLeverageSlider
-            amount={amountIn.toNumber()}
+            amount={amountIn}
             inputToken={inputToken}
             outputToken={outputToken}
             onChange={(x) => setAmountInformValue(x)}