41 lines
1.1 KiB
TypeScript
41 lines
1.1 KiB
TypeScript
import React from 'react'
|
|
|
|
import { FormattedNumber } from 'components/FormattedNumber'
|
|
import Loading from 'components/Loading'
|
|
import useMarketBorrowings from 'hooks/useMarketBorrowings'
|
|
|
|
export const APY_META = { accessorKey: 'apy', header: 'APY Range' }
|
|
|
|
interface Props {
|
|
vault: Vault
|
|
}
|
|
|
|
export default function Apy(props: Props) {
|
|
const { vault } = props
|
|
const { data: marketBorrowings } = useMarketBorrowings()
|
|
|
|
const borrowRate = marketBorrowings.find((asset) => asset.denom === vault.hls?.borrowDenom)
|
|
?.borrowRate
|
|
|
|
if (vault.apy === null || borrowRate === null) return <Loading />
|
|
|
|
const APYs = [vault.apy, vault.apy * (vault.hls?.maxLeverage || 1) - (borrowRate || 0) * 100]
|
|
|
|
return (
|
|
<>
|
|
<FormattedNumber
|
|
amount={Math.min(...APYs)}
|
|
options={{ minDecimals: 2, maxDecimals: 2, suffix: '-' }}
|
|
className='text-xs inline'
|
|
animate
|
|
/>
|
|
<FormattedNumber
|
|
amount={Math.max(...APYs)}
|
|
options={{ minDecimals: 2, maxDecimals: 2, suffix: '%' }}
|
|
className='text-xs inline'
|
|
animate
|
|
/>
|
|
</>
|
|
)
|
|
}
|