71 lines
2.2 KiB
TypeScript
71 lines
2.2 KiB
TypeScript
import DisplayCurrency from 'components/common/DisplayCurrency'
|
|
import { FormattedNumber } from 'components/common/FormattedNumber'
|
|
import TitleAndSubCell from 'components/common/TitleAndSubCell'
|
|
import useAssetIncentivesApy from 'hooks/useAssetIncentiveApy'
|
|
import useCurrentWalletBalance from 'hooks/useCurrentWalletBalance'
|
|
import { BNCoin } from 'types/classes/BNCoin'
|
|
|
|
interface Props {
|
|
data: LendingMarketTableData
|
|
}
|
|
|
|
function DetailsHeader({ data }: Props) {
|
|
const { asset, cap, accountLentAmount } = data
|
|
const { data: assetApy } = useAssetIncentivesApy(asset.denom)
|
|
const balanceInWallet = useCurrentWalletBalance(asset.denom)
|
|
|
|
return (
|
|
<div className='flex gap-6 border-b border-white/5 px-6 py-4 gradient-header'>
|
|
{assetApy && (
|
|
<>
|
|
<TitleAndSubCell
|
|
title={
|
|
<div className='flex flex-row'>
|
|
<FormattedNumber amount={assetApy.toNumber()} options={{ suffix: '%' }} animate />
|
|
<FormattedNumber
|
|
className='ml-2 text-xs'
|
|
amount={assetApy.dividedBy(365).toNumber()}
|
|
options={{ suffix: '%/day' }}
|
|
animate
|
|
/>
|
|
</div>
|
|
}
|
|
sub={'APY'}
|
|
/>
|
|
<div className='h-100 w-[1px] bg-white/10'></div>
|
|
</>
|
|
)}
|
|
{accountLentAmount && (
|
|
<>
|
|
<TitleAndSubCell
|
|
title={
|
|
<DisplayCurrency
|
|
coin={new BNCoin({ denom: asset.denom, amount: accountLentAmount })}
|
|
/>
|
|
}
|
|
sub={'Deposited'}
|
|
/>
|
|
<div className='h-100 w-[1px] bg-white/10'></div>
|
|
</>
|
|
)}
|
|
{balanceInWallet && (
|
|
<>
|
|
<TitleAndSubCell
|
|
title={<DisplayCurrency coin={new BNCoin(balanceInWallet)} />}
|
|
sub={'In Wallet'}
|
|
/>
|
|
<div className='h-100 w-[1px] bg-white/10'></div>
|
|
</>
|
|
)}
|
|
<TitleAndSubCell
|
|
title={
|
|
<DisplayCurrency coin={new BNCoin({ denom: asset.denom, amount: cap.max.toString() })} />
|
|
}
|
|
sub={'Deposit Cap'}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default DetailsHeader
|