1  import { Trans } from '@lingui/macro';
  2  import { AlertColor, Typography } from '@mui/material';
  3  import { useRootStore } from 'src/store/root';
  4  import { GENERAL } from 'src/utils/mixPanelEvents';
  5  
  6  import { HealthFactorNumber } from '../../../components/HealthFactorNumber';
  7  import { BasicModal } from '../../../components/primitives/BasicModal';
  8  import { FormattedNumber } from '../../../components/primitives/FormattedNumber';
  9  import { Link } from '../../../components/primitives/Link';
 10  import { HFContent } from './components/HFContent';
 11  import { InfoWrapper } from './components/InfoWrapper';
 12  import { LTVContent } from './components/LTVContent';
 13  
 14  interface LiquidationRiskParametresInfoModalProps {
 15    open: boolean;
 16    setOpen: (value: boolean) => void;
 17    healthFactor: string;
 18    loanToValue: string;
 19    currentLoanToValue: string;
 20    currentLiquidationThreshold: string;
 21  }
 22  
 23  export const LiquidationRiskParametresInfoModal = ({
 24    open,
 25    setOpen,
 26    healthFactor,
 27    loanToValue,
 28    currentLoanToValue,
 29    currentLiquidationThreshold,
 30  }: LiquidationRiskParametresInfoModalProps) => {
 31    let healthFactorColor: AlertColor = 'success';
 32    const hf = Number(healthFactor);
 33    if (hf > 1.1 && hf <= 3) {
 34      healthFactorColor = 'warning';
 35    } else if (hf <= 1.1) {
 36      healthFactorColor = 'error';
 37    }
 38    const trackEvent = useRootStore((store) => store.trackEvent);
 39  
 40    let ltvColor: AlertColor = 'success';
 41    const ltvPercent = Number(loanToValue) * 100;
 42    const currentLtvPercent = Number(currentLoanToValue) * 100;
 43    const liquidationThresholdPercent = Number(currentLiquidationThreshold) * 100;
 44    if (ltvPercent >= Math.min(currentLtvPercent, liquidationThresholdPercent)) {
 45      ltvColor = 'error';
 46    } else if (ltvPercent > currentLtvPercent / 2 && ltvPercent < currentLtvPercent) {
 47      ltvColor = 'warning';
 48    }
 49  
 50    return (
 51      <BasicModal open={open} setOpen={setOpen}>
 52        <Typography variant="h2" mb={6}>
 53          <Trans>Liquidation risk parameters</Trans>
 54        </Typography>
 55        <Typography mb={6}>
 56          <Trans>
 57            Your health factor and loan to value determine the assurance of your collateral. To avoid
 58            liquidations you can supply more collateral or repay borrow positions.
 59          </Trans>{' '}
 60          <Link
 61            onClick={() => {
 62              trackEvent(GENERAL.EXTERNAL_LINK, {
 63                Link: 'HF Risk Link',
 64              });
 65            }}
 66            href="https://docs.aave.com/faq/"
 67            sx={{ textDecoration: 'underline' }}
 68            color="text.primary"
 69            variant="description"
 70          >
 71            <Trans>Learn more</Trans>
 72          </Link>
 73        </Typography>
 74  
 75        <InfoWrapper
 76          topTitle={<Trans>Health factor</Trans>}
 77          topDescription={
 78            <Trans>
 79              Safety of your deposited collateral against the borrowed assets and its underlying
 80              value.
 81            </Trans>
 82          }
 83          topValue={
 84            <HealthFactorNumber
 85              value={healthFactor}
 86              variant="main12"
 87              sx={{ color: 'common.white' }}
 88            />
 89          }
 90          bottomText={
 91            <Trans>
 92              If the health factor goes below 1, the liquidation of your collateral might be
 93              triggered.
 94            </Trans>
 95          }
 96          color={healthFactorColor}
 97        >
 98          <HFContent healthFactor={healthFactor} />
 99        </InfoWrapper>
100  
101        <InfoWrapper
102          topTitle={<Trans>Current LTV</Trans>}
103          topDescription={
104            <Trans>Your current loan to value based on your collateral supplied.</Trans>
105          }
106          topValue={
107            <FormattedNumber
108              value={loanToValue}
109              percent
110              variant="main12"
111              color="common.white"
112              symbolsColor="common.white"
113            />
114          }
115          bottomText={
116            <Trans>
117              If your loan to value goes above the liquidation threshold your collateral supplied may
118              be liquidated.
119            </Trans>
120          }
121          color={ltvColor}
122        >
123          <LTVContent
124            loanToValue={loanToValue}
125            currentLoanToValue={currentLoanToValue}
126            currentLiquidationThreshold={currentLiquidationThreshold}
127            color={ltvColor}
128          />
129        </InfoWrapper>
130      </BasicModal>
131    );
132  };