/ src / components / infoTooltips / SupplyCapMaxedTooltip.tsx
SupplyCapMaxedTooltip.tsx
 1  import { ExclamationIcon } from '@heroicons/react/outline';
 2  import { Trans } from '@lingui/macro';
 3  import { Box } from '@mui/material';
 4  import { AssetCapData } from 'src/hooks/useAssetCaps';
 5  
 6  import { Link } from '../primitives/Link';
 7  import { TextWithTooltip, TextWithTooltipProps } from '../TextWithTooltip';
 8  
 9  type SupplyCapMaxedTooltipProps = TextWithTooltipProps & {
10    supplyCap: AssetCapData;
11  };
12  
13  export const SupplyCapMaxedTooltip = ({ supplyCap, ...rest }: SupplyCapMaxedTooltipProps) => {
14    if (!supplyCap || !supplyCap.isMaxed) return null;
15  
16    return (
17      <Box sx={{ ml: 2 }}>
18        <TextWithTooltip {...rest} icon={<ExclamationIcon />} iconColor="warning.main" iconSize={18}>
19          <>
20            <Trans>Protocol supply cap at 100% for this asset. Further supply unavailable.</Trans>{' '}
21            <Link
22              href="https://docs.aave.com/developers/whats-new/supply-borrow-caps"
23              underline="always"
24            >
25              <Trans>Learn more</Trans>
26            </Link>
27          </>
28        </TextWithTooltip>
29      </Box>
30    );
31  };