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 };