1  import { InformationCircleIcon } from '@heroicons/react/outline';
  2  import { Trans } from '@lingui/macro';
  3  import { Box, Link, SvgIcon, Typography, TypographyProps, useTheme } from '@mui/material';
  4  import { ReactNode } from 'react';
  5  
  6  import { ContentWithTooltip } from '../ContentWithTooltip';
  7  
  8  const contentSx = {
  9    borderRadius: '4px',
 10    display: 'inline-flex',
 11    alignItems: 'center',
 12    p: '2px',
 13    mt: '2px',
 14    cursor: 'pointer',
 15    '&:hover': { opacity: 0.6 },
 16  };
 17  
 18  interface InfoIconProps {
 19    color?: string;
 20  }
 21  const InfoIcon = ({ color }: InfoIconProps) => (
 22    <SvgIcon
 23      sx={{
 24        ml: '3px',
 25        color: color ? color : 'text.muted',
 26        fontSize: '14px',
 27      }}
 28    >
 29      <InformationCircleIcon />
 30    </SvgIcon>
 31  );
 32  export const IsolatedEnabledBadge = ({
 33    typographyProps,
 34  }: {
 35    typographyProps?: TypographyProps;
 36  }) => {
 37    const theme = useTheme();
 38  
 39    const sx = {
 40      border: `1px solid ${theme.palette.warning.main}`,
 41      color: theme.palette.warning.main,
 42      ...contentSx,
 43    };
 44    return (
 45      <ContentWithTooltip
 46        withoutHover
 47        tooltipContent={
 48          <IsolationModeTooltipTemplate
 49            content={
 50              <Trans>
 51                Isolated assets have limited borrowing power and other assets cannot be used as
 52                collateral.
 53              </Trans>
 54            }
 55          />
 56        }
 57      >
 58        <Box sx={sx}>
 59          <Typography
 60            variant="secondary12"
 61            sx={{
 62              lineHeight: '0.75rem',
 63            }}
 64            color={theme.palette.warning.main}
 65            {...typographyProps}
 66          >
 67            <Trans>Isolated</Trans>
 68          </Typography>
 69          <InfoIcon color={theme.palette.warning.main} />
 70        </Box>
 71      </ContentWithTooltip>
 72    );
 73  };
 74  
 75  export const IsolatedDisabledBadge = () => {
 76    return (
 77      <ContentWithTooltip
 78        tooltipContent={
 79          <IsolationModeTooltipTemplate
 80            content={
 81              <Trans>
 82                Asset can be only used as collateral in isolation mode with limited borrowing power.
 83                To enter isolation mode, disable all other collateral.
 84              </Trans>
 85            }
 86          />
 87        }
 88      >
 89        <Box sx={contentSx}>
 90          <Typography variant="description" color="error.main">
 91            <Trans>Unavailable</Trans>
 92          </Typography>
 93          <InfoIcon />
 94        </Box>
 95      </ContentWithTooltip>
 96    );
 97  };
 98  
 99  export const UnavailableDueToIsolationBadge = () => {
100    return (
101      <ContentWithTooltip
102        tooltipContent={
103          <IsolationModeTooltipTemplate
104            content={<Trans>Collateral usage is limited because of isolation mode.</Trans>}
105          />
106        }
107      >
108        <Box sx={contentSx}>
109          <Typography variant="description" color="error.main">
110            <Trans>Unavailable</Trans>
111          </Typography>
112          <InfoIcon />
113        </Box>
114      </ContentWithTooltip>
115    );
116  };
117  
118  const IsolationModeTooltipTemplate = ({ content }: { content: ReactNode }) => {
119    return (
120      <Box>
121        <Box sx={{ mb: 4 }}>{content}</Box>
122        <Typography variant="subheader2" color="text.secondary">
123          <Trans>
124            Learn more in our{' '}
125            <Link href="https://docs.aave.com/faq/aave-v3-features#isolation-mode" fontWeight={500}>
126              FAQ guide
127            </Link>
128          </Trans>
129        </Typography>
130      </Box>
131    );
132  };