49 lines
1.5 KiB
TypeScript
49 lines
1.5 KiB
TypeScript
import React, { useMemo } from 'react'
|
|
|
|
import Button from 'components/common/Button'
|
|
import { ArrowRight } from 'components/common/Icons'
|
|
import LeverageSummary from 'components/Modals/HLS/Deposit/LeverageSummary'
|
|
import TokenInputWithSlider from 'components/common/TokenInput/TokenInputWithSlider'
|
|
import { getLeveragedApy } from 'utils/math'
|
|
|
|
interface Props {
|
|
amount: BigNumber
|
|
asset: BorrowAsset
|
|
max: BigNumber
|
|
onChangeAmount: (amount: BigNumber) => void
|
|
onClickBtn: () => void
|
|
positionValue: BigNumber
|
|
leverage: number
|
|
maxLeverage: number
|
|
baseApy: number
|
|
warningMessages: string[]
|
|
}
|
|
|
|
export default function Leverage(props: Props) {
|
|
const apy = useMemo(() => {
|
|
if (!props.asset.borrowRate) return 0
|
|
return getLeveragedApy(props.baseApy, props.asset.borrowRate, props.leverage)
|
|
}, [props.asset.borrowRate, props.baseApy, props.leverage])
|
|
|
|
return (
|
|
<div id='item-1' className='flex-col gap-6 flex justify-between h-full p-4'>
|
|
<TokenInputWithSlider
|
|
amount={props.amount}
|
|
asset={props.asset}
|
|
max={props.max}
|
|
onChange={props.onChangeAmount}
|
|
maxText='Max borrow'
|
|
leverage={{
|
|
current: props.leverage,
|
|
max: props.maxLeverage,
|
|
}}
|
|
warningMessages={props.warningMessages}
|
|
/>
|
|
<div className='flex flex-col gap-6'>
|
|
<LeverageSummary asset={props.asset} positionValue={props.positionValue} apy={apy} />
|
|
<Button onClick={props.onClickBtn} text='Continue' rightIcon={<ArrowRight />} />
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|