1  import { valueToBigNumber } from '@aave/math-utils';
 2  import { Trans } from '@lingui/macro';
 3  import { Typography } from '@mui/material';
 4  import { useMemo } from 'react';
 5  import { FormattedNumber } from 'src/components/primitives/FormattedNumber';
 6  import { NoData } from 'src/components/primitives/NoData';
 7  import { Warning } from 'src/components/primitives/Warning';
 8  
 9  const calculateValues = (v2Amount: string, v2Price: string, v3Price?: string) => {
10    if (!v3Price) return { v3Amount: undefined, v3TotalPrice: undefined };
11    const v2PriceBn = valueToBigNumber(v2Price);
12    const ratio = v2PriceBn.div(v3Price);
13    const v3Amount = ratio.multipliedBy(v2Amount);
14    const v3TotalPrice = v3Amount.multipliedBy(v3Price);
15  
16    return { v3Amount: v3Amount.toString(), v3TotalPrice: v3TotalPrice.toString() };
17  };
18  
19  type StETHMigrationWarningProps = {
20    v3Price?: string;
21    v2Price: string;
22    v2Amount: string;
23  };
24  
25  export const StETHMigrationWarning: React.FC<StETHMigrationWarningProps> = ({
26    v2Amount,
27    v2Price,
28    v3Price,
29  }) => {
30    const { v3Amount, v3TotalPrice } = useMemo(
31      () => calculateValues(v2Amount, v2Price, v3Price),
32      [v2Amount, v2Price, v3Price]
33    );
34  
35    return (
36      <Warning
37        icon={false}
38        sx={{
39          mb: 4,
40        }}
41        severity="error"
42      >
43        <Typography variant="caption" component="span">
44          <Trans>
45            stETH tokens will be migrated to Wrapped stETH using Lido Protocol wrapper which leads to
46            supply balance change after migration:{' '}
47            {v3Amount ? (
48              <>
49                <FormattedNumber variant="caption" value={v3Amount} />
50                {' ('}
51                <FormattedNumber
52                  variant="caption"
53                  value={v3TotalPrice}
54                  symbol="USD"
55                  symbolsColor="error.100"
56                />
57                {').'}
58              </>
59            ) : (
60              <NoData variant="caption" component="span" />
61            )}
62          </Trans>{' '}
63        </Typography>
64      </Warning>
65    );
66  };