1  import { ArrowNarrowRightIcon } from '@heroicons/react/solid';
 2  import { Trans } from '@lingui/macro';
 3  import { Box, Skeleton, Stack, SvgIcon, Typography } from '@mui/material';
 4  import { useTokenOutForTokenIn } from 'src/hooks/token-wrapper/useTokenWrapper';
 5  
 6  import { FormattedNumber } from '../primitives/FormattedNumber';
 7  
 8  export const WrappedTokenTooltipContent = ({
 9    decimals,
10    tokenWrapperAddress,
11    tokenInSymbol,
12    tokenOutSymbol,
13  }: {
14    decimals: number;
15    tokenWrapperAddress: string;
16    tokenInSymbol: string;
17    tokenOutSymbol: string;
18  }) => {
19    const { isLoading: loadingExchangeRate, data: exchangeRate } = useTokenOutForTokenIn(
20      '1',
21      decimals,
22      tokenWrapperAddress
23    );
24  
25    return (
26      <Stack direction="column" gap={3}>
27        <Typography variant="tooltip">
28          <Trans>
29            DAI balance will be converted via DSR contracts and then supplied as sDAI. Switching
30            incurs no additional costs and no slippage.
31          </Trans>
32        </Typography>
33        <Stack direction="row" alignItems="center" justifyContent="space-between">
34          <Box>
35            <Typography variant="secondary12">
36              <Trans>Exchange rate</Trans>
37            </Typography>
38          </Box>
39          {loadingExchangeRate ? (
40            <Skeleton variant="rectangular" width={120} height={14} />
41          ) : (
42            <Stack direction="row" alignItems="center" gap={1}>
43              <FormattedNumber
44                value="1"
45                visibleDecimals={0}
46                variant="secondary12"
47                color="text.primary"
48              />
49              <Typography variant="tooltip">{tokenInSymbol}</Typography>
50              <SvgIcon color="primary" sx={{ fontSize: '12px' }}>
51                <ArrowNarrowRightIcon />
52              </SvgIcon>
53              <FormattedNumber
54                value={exchangeRate || '0'}
55                visibleDecimals={4}
56                variant="secondary12"
57                color="text.primary"
58              />
59              <Typography variant="tooltip">{tokenOutSymbol}</Typography>
60            </Stack>
61          )}
62        </Stack>
63      </Stack>
64    );
65  };