2022-09-02 16:52:07 -07:00
|
|
|
import Decimal from 'decimal.js'
|
2022-09-14 17:02:16 -07:00
|
|
|
import { ChangeEvent, useEffect, useMemo, useRef, useState } from 'react'
|
2022-08-20 11:17:57 -07:00
|
|
|
import mangoStore from '../../store/mangoStore'
|
2022-09-22 14:35:07 -07:00
|
|
|
import { getTokenInMax, useTokenMax } from './useTokenMax'
|
2022-07-12 19:02:36 -07:00
|
|
|
|
2022-07-12 20:58:13 -07:00
|
|
|
const LeverageSlider = ({
|
2022-08-17 18:21:16 -07:00
|
|
|
amount,
|
2022-08-15 15:18:23 -07:00
|
|
|
leverageMax,
|
|
|
|
onChange,
|
|
|
|
}: {
|
2022-08-17 21:13:50 -07:00
|
|
|
amount: number
|
2022-08-15 15:18:23 -07:00
|
|
|
leverageMax: number
|
2022-08-18 13:50:34 -07:00
|
|
|
onChange: (x: string) => any
|
2022-08-15 15:18:23 -07:00
|
|
|
}) => {
|
2022-08-17 21:13:50 -07:00
|
|
|
const [value, setValue] = useState(0)
|
2022-08-17 15:17:12 -07:00
|
|
|
const inputEl = useRef<HTMLInputElement>(null)
|
2022-08-17 21:13:50 -07:00
|
|
|
const inputTokenInfo = mangoStore((s) => s.swap.inputTokenInfo)
|
2022-08-17 15:17:12 -07:00
|
|
|
|
|
|
|
useEffect(() => {
|
|
|
|
if (inputEl.current) {
|
|
|
|
const target = inputEl.current
|
|
|
|
const min = parseFloat(target.min)
|
|
|
|
const max = leverageMax
|
|
|
|
|
|
|
|
target.style.backgroundSize =
|
|
|
|
max - min === 0
|
|
|
|
? '0% 100%'
|
2022-08-17 21:13:50 -07:00
|
|
|
: ((value - min) * 100) / (max - min) + '% 100%'
|
2022-08-17 15:17:12 -07:00
|
|
|
}
|
2022-08-17 18:21:16 -07:00
|
|
|
}, [leverageMax, value])
|
|
|
|
|
|
|
|
useEffect(() => {
|
2022-08-18 13:50:34 -07:00
|
|
|
if (amount) {
|
2022-09-02 16:52:07 -07:00
|
|
|
onChange(new Decimal(amount).toFixed())
|
2022-08-18 13:50:34 -07:00
|
|
|
setValue(amount)
|
|
|
|
}
|
2022-08-17 20:17:22 -07:00
|
|
|
}, [amount])
|
2022-08-17 15:17:12 -07:00
|
|
|
|
2022-08-15 15:18:23 -07:00
|
|
|
const handleSliderChange = (e: ChangeEvent<HTMLInputElement>) => {
|
2022-08-16 20:42:16 -07:00
|
|
|
let target = e.target
|
|
|
|
const min = parseFloat(target.min)
|
|
|
|
const max = parseFloat(target.max)
|
|
|
|
const val = parseFloat(target.value)
|
|
|
|
|
|
|
|
target.style.backgroundSize = ((val - min) * 100) / (max - min) + '% 100%'
|
2022-08-17 14:36:38 -07:00
|
|
|
|
2022-08-15 15:18:23 -07:00
|
|
|
onChange(e.target.value)
|
2022-08-17 21:13:50 -07:00
|
|
|
setValue(parseFloat(e.target.value))
|
2022-08-15 15:18:23 -07:00
|
|
|
}
|
|
|
|
|
|
|
|
return (
|
|
|
|
<>
|
|
|
|
<label htmlFor="default-range" className="block text-sm"></label>
|
|
|
|
<input
|
2022-08-17 15:17:12 -07:00
|
|
|
ref={inputEl}
|
2022-08-15 15:18:23 -07:00
|
|
|
id="default-range"
|
|
|
|
type="range"
|
|
|
|
min="0"
|
|
|
|
max={leverageMax}
|
2022-08-17 21:13:50 -07:00
|
|
|
step={inputTokenInfo ? 1 / 10 ** inputTokenInfo?.decimals : 6}
|
2022-08-16 20:42:16 -07:00
|
|
|
className="w-full"
|
2022-08-15 15:18:23 -07:00
|
|
|
onChange={handleSliderChange}
|
2022-08-17 21:25:30 -07:00
|
|
|
value={value}
|
2022-08-15 15:18:23 -07:00
|
|
|
></input>
|
|
|
|
</>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
export const SwapLeverageSlider = ({
|
2022-08-17 18:21:16 -07:00
|
|
|
amount,
|
2022-07-12 20:58:13 -07:00
|
|
|
onChange,
|
2022-09-22 14:35:07 -07:00
|
|
|
useMargin,
|
2022-08-18 13:50:34 -07:00
|
|
|
}: {
|
|
|
|
amount: number
|
|
|
|
onChange: (x: string) => void
|
2022-09-22 14:35:07 -07:00
|
|
|
useMargin: boolean
|
2022-08-18 13:50:34 -07:00
|
|
|
}) => {
|
2022-08-25 11:22:54 -07:00
|
|
|
const mangoAccount = mangoStore((s) => s.mangoAccount.current)
|
2022-09-22 14:35:07 -07:00
|
|
|
const { amountWithBorrow } = useTokenMax(useMargin)
|
2022-07-12 19:02:36 -07:00
|
|
|
|
2022-08-15 15:18:23 -07:00
|
|
|
return (
|
|
|
|
<>
|
2022-08-25 11:22:54 -07:00
|
|
|
{!mangoAccount ? (
|
2022-08-19 14:25:31 -07:00
|
|
|
<LeverageSlider amount={amount} leverageMax={100} onChange={onChange} />
|
|
|
|
) : (
|
|
|
|
<LeverageSlider
|
|
|
|
amount={amount}
|
2022-09-02 16:52:07 -07:00
|
|
|
leverageMax={amountWithBorrow.toNumber()}
|
2022-08-19 14:25:31 -07:00
|
|
|
onChange={onChange}
|
|
|
|
/>
|
|
|
|
)}
|
2022-08-15 15:18:23 -07:00
|
|
|
</>
|
|
|
|
)
|
|
|
|
}
|
2022-07-12 19:02:36 -07:00
|
|
|
|
2022-09-22 14:35:07 -07:00
|
|
|
// export const BorrowLeverageSlider = ({
|
|
|
|
// amount,
|
|
|
|
// tokenMax,
|
|
|
|
// onChange,
|
|
|
|
// }: {
|
|
|
|
// amount: number
|
|
|
|
// tokenMax: number
|
|
|
|
// onChange: (x: string) => any
|
|
|
|
// }) => {
|
|
|
|
// return (
|
|
|
|
// <>
|
|
|
|
// <LeverageSlider
|
|
|
|
// amount={amount}
|
|
|
|
// leverageMax={tokenMax}
|
|
|
|
// onChange={onChange}
|
|
|
|
// />
|
|
|
|
// </>
|
|
|
|
// )
|
|
|
|
// }
|
2022-07-12 19:02:36 -07:00
|
|
|
|
|
|
|
export default LeverageSlider
|