/ src / components / transactions / Warnings / DebtCeilingWarning.tsx
DebtCeilingWarning.tsx
 1  import { Trans } from '@lingui/macro';
 2  import { AlertProps } from '@mui/material';
 3  import { AssetCapData } from 'src/hooks/useAssetCaps';
 4  
 5  import { Link } from '../../primitives/Link';
 6  import { Warning } from '../../primitives/Warning';
 7  
 8  type DebtCeilingWarningProps = AlertProps & {
 9    debtCeiling: AssetCapData;
10    icon?: boolean;
11  };
12  
13  export const DebtCeilingWarning = ({
14    debtCeiling,
15    icon = true,
16    ...rest
17  }: DebtCeilingWarningProps) => {
18    // Don't show a warning when less than 98% utilized
19    if (!debtCeiling.percentUsed || debtCeiling.percentUsed < 98) return null;
20  
21    const severity = debtCeiling.isMaxed ? 'error' : 'warning';
22  
23    const renderText = () => {
24      return debtCeiling.isMaxed ? (
25        <Trans>
26          Protocol debt ceiling is at 100% for this asset. Further borrowing against this asset is
27          unavailable.
28        </Trans>
29      ) : (
30        <Trans>
31          Maximum amount available to borrow against this asset is limited because debt ceiling is at{' '}
32          {debtCeiling.percentUsed.toFixed(2)}%.
33        </Trans>
34      );
35    };
36  
37    return (
38      <Warning severity={severity} icon={icon} {...rest}>
39        {renderText()}{' '}
40        <Link
41          href="https://docs.aave.com/faq/aave-v3-features#how-does-isolation-mode-affect-my-borrowing-power"
42          underline="always"
43        >
44          <Trans>Learn more</Trans>
45        </Link>
46      </Warning>
47    );
48  };