1  import { Trans } from '@lingui/macro';
  2  import type { Theme } from '@mui/material';
  3  import { Box, Typography } from '@mui/material';
  4  import LinearProgress, {
  5    linearProgressClasses,
  6    LinearProgressProps,
  7  } from '@mui/material/LinearProgress';
  8  import { AssetCapHookData } from 'src/hooks/useAssetCaps';
  9  
 10  import { FormattedNumber } from '../primitives/FormattedNumber';
 11  import { Link } from '../primitives/Link';
 12  import { TextWithTooltip } from '../TextWithTooltip';
 13  
 14  type DebtCeilingTooltipProps = {
 15    debt: string;
 16    ceiling: string;
 17    usageData: AssetCapHookData;
 18  };
 19  
 20  export const DebtCeilingStatus = ({
 21    debt,
 22    ceiling,
 23    usageData,
 24  }: LinearProgressProps & DebtCeilingTooltipProps) => {
 25    const determineColor = (theme: Theme): string => {
 26      if (usageData.isMaxed || usageData.percentUsed >= 99.99) {
 27        return theme.palette.error.main;
 28      } else if (usageData.percentUsed >= 98) {
 29        return theme.palette.warning.main;
 30      } else {
 31        return theme.palette.success.main;
 32      }
 33    };
 34  
 35    const progressBarStyles = {
 36      borderRadius: 5,
 37      my: 2,
 38      height: 5,
 39      [`&.${linearProgressClasses.colorPrimary}`]: {
 40        backgroundColor: (theme: Theme) =>
 41          theme.palette.grey[theme.palette.mode === 'light' ? 200 : 800],
 42      },
 43      [`& .${linearProgressClasses.bar}`]: {
 44        borderRadius: 5,
 45        backgroundColor: (theme: Theme) => determineColor(theme),
 46      },
 47    };
 48  
 49    return (
 50      <>
 51        <Box display="flex" justifyContent="space-between" alignItems="center">
 52          <Box display="flex" alignItems="center">
 53            <Typography color="text.secondary" component="span">
 54              <Trans>Isolated Debt Ceiling</Trans>
 55            </Typography>
 56            <TextWithTooltip>
 57              <>
 58                <Trans>
 59                  Debt ceiling limits the amount possible to borrow against this asset by protocol
 60                  users. Debt ceiling is specific to assets in isolation mode and is denoted in USD.
 61                </Trans>{' '}
 62                <Link
 63                  href="https://docs.aave.com/faq/aave-v3-features#how-does-isolation-mode-affect-my-borrowing-power"
 64                  underline="always"
 65                >
 66                  <Trans>Learn more</Trans>
 67                </Link>
 68              </>
 69            </TextWithTooltip>
 70          </Box>
 71          <Box>
 72            <FormattedNumber
 73              value={debt}
 74              variant="main14"
 75              symbol="USD"
 76              symbolsVariant="secondary14"
 77              visibleDecimals={2}
 78            />
 79            <Typography
 80              component="span"
 81              color="text.secondary"
 82              variant="secondary14"
 83              sx={{ display: 'inline-block', mx: 1 }}
 84            >
 85              <Trans>of</Trans>
 86            </Typography>
 87            <FormattedNumber
 88              value={ceiling}
 89              variant="main14"
 90              symbol="USD"
 91              symbolsVariant="secondary14"
 92              visibleDecimals={2}
 93            />
 94          </Box>
 95        </Box>
 96        <LinearProgress
 97          sx={progressBarStyles}
 98          variant="determinate"
 99          // We show at minimum, 1% color to represent small values
100          value={usageData.percentUsed <= 1 ? 1 : usageData.percentUsed}
101        />
102      </>
103    );
104  };