mars-v2-frontend/src/components/Earn/Lend/Table/Columns/DepositCap.tsx
Bob van der Helm d2afe06b16
Mp 3367 staking interactions (#613)
* ♻️ Refactor borrowRate to be in full numbers

* Enter into HLS Staking strategy

* HLS Staking deposited table + Portfolio pages

* tidy: refactored the masks for HealthBar

---------

Co-authored-by: Linkie Link <linkielink.dev@gmail.com>
2023-11-03 15:01:15 +01:00

56 lines
1.6 KiB
TypeScript

import { Row } from '@tanstack/react-table'
import { FormattedNumber } from 'components/FormattedNumber'
import Loading from 'components/Loading'
import TitleAndSubCell from 'components/TitleAndSubCell'
import { demagnify } from 'utils/formatters'
export const DEPOSIT_CAP_META = {
accessorKey: 'marketDepositCap',
header: 'Deposit Cap',
id: 'marketDepositCap',
}
export const marketDepositCapSortingFn = (
a: Row<LendingMarketTableData>,
b: Row<LendingMarketTableData>,
): number => {
const assetA = a.original.asset
const assetB = b.original.asset
if (!a.original.marketDepositCap || !b.original.marketDepositCap) return 0
const marketDepositCapA = demagnify(a.original.marketDepositCap, assetA)
const marketDepositCapB = demagnify(b.original.marketDepositCap, assetB)
return marketDepositCapA - marketDepositCapB
}
interface Props {
isLoading: boolean
data: LendingMarketTableData
}
export default function DepositCap(props: Props) {
if (props.isLoading) return <Loading />
const { marketDepositCap, marketDepositAmount, asset } = props.data
const percent = marketDepositAmount.dividedBy(marketDepositCap).multipliedBy(100)
return (
<TitleAndSubCell
className='text-xs'
title={
<FormattedNumber
amount={marketDepositCap.toNumber()}
options={{ abbreviated: true, decimals: asset.decimals }}
animate
/>
}
sub={
<FormattedNumber
amount={percent.toNumber()}
options={{ minDecimals: 2, maxDecimals: 2, suffix: '% used' }}
animate
/>
}
/>
)
}