62 lines
1.8 KiB
TypeScript
62 lines
1.8 KiB
TypeScript
import { Row } from '@tanstack/react-table'
|
|
import classNames from 'classnames'
|
|
|
|
import { FormattedNumber } from 'components/common/FormattedNumber'
|
|
import Loading from 'components/common/Loading'
|
|
import TitleAndSubCell from 'components/common/TitleAndSubCell'
|
|
import { demagnify } from 'utils/formatters'
|
|
|
|
export const DEPOSIT_CAP_META = {
|
|
accessorKey: 'marketDepositCap',
|
|
header: 'Deposit Cap',
|
|
id: 'marketDepositCap',
|
|
meta: { className: 'w-40' },
|
|
}
|
|
|
|
export const marketDepositCapSortingFn = (
|
|
a: Row<LendingMarketTableData>,
|
|
b: Row<LendingMarketTableData>,
|
|
): number => {
|
|
const assetA = a.original.asset
|
|
const assetB = b.original.asset
|
|
if (!a.original.cap.max || !b.original.cap.max) return 0
|
|
|
|
const marketDepositCapA = demagnify(a.original.cap.max, assetA)
|
|
const marketDepositCapB = demagnify(b.original.cap.max, assetB)
|
|
return marketDepositCapA - marketDepositCapB
|
|
}
|
|
|
|
interface Props {
|
|
isLoading: boolean
|
|
data: LendingMarketTableData
|
|
}
|
|
export default function DepositCap(props: Props) {
|
|
if (props.isLoading) return <Loading />
|
|
const { cap, asset } = props.data
|
|
const percent = cap.used.dividedBy(cap.max).multipliedBy(100)
|
|
const depositCapUsed = Math.min(percent.toNumber(), 100)
|
|
|
|
return (
|
|
<TitleAndSubCell
|
|
className='text-xs'
|
|
title={
|
|
<FormattedNumber
|
|
amount={cap.max.toNumber()}
|
|
options={{ abbreviated: true, decimals: asset.decimals }}
|
|
animate
|
|
/>
|
|
}
|
|
sub={
|
|
<FormattedNumber
|
|
amount={depositCapUsed}
|
|
options={{ minDecimals: 2, maxDecimals: 2, suffix: '% used' }}
|
|
animate
|
|
className={classNames(
|
|
depositCapUsed >= 100 ? 'text-loss/60' : depositCapUsed > 90 ? 'text-info/60' : '',
|
|
)}
|
|
/>
|
|
}
|
|
/>
|
|
)
|
|
}
|