000aa71e06
* fix: sorted assets by value * tidy: refactored AssetsSelectTable * fix: fixed the multipleVaultWithdraw Modal
57 lines
1.7 KiB
TypeScript
57 lines
1.7 KiB
TypeScript
import classNames from 'classnames'
|
|
import { HTMLAttributes } from 'react'
|
|
|
|
import { FormattedNumber } from 'components/common/FormattedNumber'
|
|
import { InfoCircle } from 'components/common/Icons'
|
|
import Text from 'components/common/Text'
|
|
import useAsset from 'hooks/assets/useAsset'
|
|
import { BNCoin } from 'types/classes/BNCoin'
|
|
|
|
interface Props extends HTMLAttributes<HTMLDivElement> {
|
|
action: 'buy' | 'deposit' | 'fund'
|
|
coins: BNCoin[]
|
|
showIcon?: boolean
|
|
}
|
|
|
|
export default function DepositCapMessage(props: Props) {
|
|
if (!props.coins.length) return null
|
|
|
|
return (
|
|
<div className={classNames('flex items-start', props.className)}>
|
|
{props.showIcon && <InfoCircle width={26} className='mr-5' />}
|
|
<div className='flex flex-col gap-2'>
|
|
<Text size='sm'>Deposit Cap Reached!</Text>
|
|
<Text size='xs' className='text-white/40'>{`Unfortunately you're not able to ${
|
|
props.action
|
|
} more than the following amount${props.coins.length > 1 ? 's' : ''}:`}</Text>
|
|
{props.coins.map((coin) => (
|
|
<AmountMessage key={coin.denom} coin={coin} />
|
|
))}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
interface AmountMessageProps {
|
|
coin: BNCoin
|
|
}
|
|
function AmountMessage(props: AmountMessageProps) {
|
|
const asset = useAsset(props.coin.denom)
|
|
if (!asset) return null
|
|
|
|
return (
|
|
<div key={props.coin.denom} className='flex gap-1'>
|
|
<Text size='xs'>Cap Left:</Text>
|
|
<FormattedNumber
|
|
amount={Math.max(0, props.coin.amount.toNumber())}
|
|
options={{
|
|
decimals: asset.decimals,
|
|
maxDecimals: asset.decimals,
|
|
suffix: ` ${asset.symbol}`,
|
|
}}
|
|
className='text-xs text-white/60'
|
|
/>
|
|
</div>
|
|
)
|
|
}
|