DebtCeilingMaxedTooltip.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 DebtCeilingMaxedTooltipProps = TextWithTooltipProps & { 10 debtCeiling: AssetCapData; 11 }; 12 13 export const DebtCeilingMaxedTooltip = ({ debtCeiling, ...rest }: DebtCeilingMaxedTooltipProps) => { 14 if (!debtCeiling || !debtCeiling.isMaxed) return null; 15 16 return ( 17 <Box sx={{ ml: 2 }}> 18 <TextWithTooltip {...rest} icon={<ExclamationIcon />} iconColor="error.main" iconSize={18}> 19 <> 20 <Trans> 21 Protocol debt ceiling is at 100% for this asset. Futher borrowing against this asset is 22 unavailable. 23 </Trans>{' '} 24 <Link 25 href="https://docs.aave.com/faq/aave-v3-features#how-does-isolation-mode-affect-my-borrowing-power" 26 underline="always" 27 > 28 <Trans>Learn more</Trans> 29 </Link> 30 </> 31 </TextWithTooltip> 32 </Box> 33 ); 34 };