set swap input amount to 0 on token switch
This commit is contained in:
parent
8edd563239
commit
a74aaf4405
|
@ -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)}
|
||||
/>
|
||||
|
|
|
@ -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)
|
||||
onChange(amount.toString())
|
||||
setValue(amount)
|
||||
}
|
||||
}, [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}
|
||||
/>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
|
@ -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)}
|
||||
|
|
Loading…
Reference in New Issue