7439bea0d8
* ✨Add basic modal for HLS staking * ✨UI components for Manage * ✨All Manage actions (except change lev) * 🐛hls intro icons + checkbox, hide repay when no debt, clickable dropdown * fix build
81 lines
2.5 KiB
TypeScript
81 lines
2.5 KiB
TypeScript
import React, { useMemo } from 'react'
|
|
|
|
import DisplayCurrency from 'components/DisplayCurrency'
|
|
import { FormattedNumber } from 'components/FormattedNumber'
|
|
import { InfoCircle } from 'components/Icons'
|
|
import AprBreakdown from 'components/Modals/HLS/Deposit/Summary/ApyBreakdown'
|
|
import Container from 'components/Modals/HLS/Deposit/Summary/Container'
|
|
import Text from 'components/Text'
|
|
import { Tooltip } from 'components/Tooltip'
|
|
import { BNCoin } from 'types/classes/BNCoin'
|
|
|
|
interface Props {
|
|
baseApy: number
|
|
borrowRate: number
|
|
leverage: number
|
|
positionValue: BNCoin
|
|
}
|
|
|
|
export default function YourPosition(props: Props) {
|
|
const netApy = useMemo(
|
|
() => props.baseApy * props.leverage - props.borrowRate,
|
|
[props.baseApy, props.borrowRate, props.leverage],
|
|
)
|
|
const apyItems = useMemo(
|
|
() => [
|
|
{
|
|
title: 'Base APY',
|
|
amount: props.baseApy,
|
|
},
|
|
{
|
|
title: 'Levered APY',
|
|
amount: props.baseApy * props.leverage,
|
|
},
|
|
{
|
|
title: 'Borrow Rate',
|
|
amount: props.borrowRate,
|
|
},
|
|
],
|
|
[props.baseApy, props.borrowRate, props.leverage],
|
|
)
|
|
|
|
return (
|
|
<Container title='Your Position'>
|
|
<div className='flex justify-between mb-2'>
|
|
<Text className='text-white/60 text-xs'>Total Position Value</Text>
|
|
<DisplayCurrency
|
|
coin={props.positionValue}
|
|
className='text-white/60 place-self-end text-xs'
|
|
/>
|
|
</div>
|
|
<div className='flex justify-between mb-2'>
|
|
<Text className='text-white/60 text-xs'>Leverage</Text>
|
|
<FormattedNumber
|
|
amount={props.leverage}
|
|
options={{ suffix: 'x' }}
|
|
className='text-white/60 place-self-end text-xs'
|
|
/>
|
|
</div>
|
|
<div className='flex justify-between'>
|
|
<Text className='text-xs group/apytooltip' tag='span'>
|
|
<Tooltip
|
|
content={<AprBreakdown items={apyItems} />}
|
|
type='info'
|
|
className='items-center flex gap-2 group-hover/apytooltip:text-white text-white/60 cursor-pointer'
|
|
>
|
|
<>
|
|
<span className='mt-0.5'>Net APY</span>{' '}
|
|
<InfoCircle className='w-4 h-4 text-white/40 inline group-hover/apytooltip:text-white transition-all' />
|
|
</>
|
|
</Tooltip>
|
|
</Text>
|
|
<FormattedNumber
|
|
className='text-white/60 place-self-end text-xs'
|
|
amount={netApy}
|
|
options={{ suffix: '%', minDecimals: 0, maxDecimals: 2 }}
|
|
/>
|
|
</div>
|
|
</Container>
|
|
)
|
|
}
|