1  import { normalizeBN, valueToBigNumber } from '@aave/math-utils';
 2  import { SwitchHorizontalIcon } from '@heroicons/react/outline';
 3  import { Trans } from '@lingui/macro';
 4  import { Box, ButtonBase, SvgIcon, Typography } from '@mui/material';
 5  import { OptimalRate } from '@paraswap/sdk';
 6  import { useMemo, useState } from 'react';
 7  import { DarkTooltip } from 'src/components/infoTooltips/DarkTooltip';
 8  import { FormattedNumber } from 'src/components/primitives/FormattedNumber';
 9  
10  type SwitchRatesProps = {
11    rates: OptimalRate;
12    srcSymbol: string;
13    destSymbol: string;
14  };
15  
16  export const SwitchRates = ({ rates, srcSymbol, destSymbol }: SwitchRatesProps) => {
17    const [isSwitched, setIsSwitched] = useState(false);
18  
19    const rate = useMemo(() => {
20      const amount1 = normalizeBN(rates.srcAmount, rates.srcDecimals);
21      const amount2 = normalizeBN(rates.destAmount, rates.destDecimals);
22      return isSwitched ? amount1.div(amount2) : amount2.div(amount1);
23    }, [isSwitched, rates.srcAmount, rates.destAmount]);
24  
25    const priceImpact = useMemo(() => {
26      const price1 = valueToBigNumber(rates.srcUSD);
27      const price2 = valueToBigNumber(rates.destUSD);
28      return price2.minus(price1).div(price1);
29    }, [rates.srcUSD, rates.destUSD]);
30  
31    return (
32      <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', mt: 6 }}>
33        <FormattedNumber
34          visibleDecimals={0}
35          variant="main12"
36          symbol={isSwitched ? destSymbol : srcSymbol}
37          symbolsVariant="secondary12"
38          symbolsColor="text.secondary"
39          value={'1'}
40        />
41        <ButtonBase
42          onClick={() => setIsSwitched((isSwitched) => !isSwitched)}
43          disableTouchRipple
44          sx={{ mx: 1 }}
45        >
46          <SvgIcon sx={{ fontSize: '12px' }}>
47            <SwitchHorizontalIcon />
48          </SvgIcon>
49        </ButtonBase>
50        <FormattedNumber
51          variant="main12"
52          symbol={isSwitched ? srcSymbol : destSymbol}
53          symbolsVariant="secondary12"
54          symbolsColor="text.secondary"
55          value={rate.toString()}
56          visibleDecimals={3}
57        />
58        <DarkTooltip
59          title={
60            <Typography variant="caption">
61              <Trans>Price impact</Trans>
62            </Typography>
63          }
64        >
65          <Box sx={{ display: 'flex', cursor: 'pointer' }}>
66            <Typography variant="caption">{'('}</Typography>
67            <FormattedNumber variant="caption" value={priceImpact.toString()} percent />
68            <Typography variant="caption">{')'}</Typography>
69          </Box>
70        </DarkTooltip>
71      </Box>
72    );
73  };