1  import { ChainId } from '@aave/contract-helpers';
 2  import { Trans } from '@lingui/macro';
 3  import { AlertProps, Button, Typography } from '@mui/material';
 4  import { useWeb3Context } from 'src/libs/hooks/useWeb3Context';
 5  import { TrackEventProps } from 'src/store/analyticsSlice';
 6  import { useRootStore } from 'src/store/root';
 7  import { GENERAL } from 'src/utils/mixPanelEvents';
 8  
 9  import { Warning } from '../../primitives/Warning';
10  
11  export type ChangeNetworkWarningProps = AlertProps & {
12    funnel?: string;
13    networkName: string;
14    chainId: ChainId;
15    event?: TrackEventProps;
16  };
17  
18  export const ChangeNetworkWarning = ({
19    networkName,
20    chainId,
21    event,
22    funnel,
23    ...rest
24  }: ChangeNetworkWarningProps) => {
25    const { switchNetwork, switchNetworkError } = useWeb3Context();
26    const trackEvent = useRootStore((store) => store.trackEvent);
27  
28    const handleSwitchNetwork = () => {
29      trackEvent(GENERAL.SWITCH_NETWORK, { funnel, ...event?.eventParams, network: networkName });
30      switchNetwork(chainId);
31    };
32    return (
33      <Warning severity="error" icon={false} {...rest}>
34        {switchNetworkError ? (
35          <Typography>
36            <Trans>
37              Seems like we can&apos;t switch the network automatically. Please check if you can
38              change it from the wallet.
39            </Trans>
40          </Typography>
41        ) : (
42          <Typography variant="description">
43            <Trans>Please switch to {networkName}.</Trans>{' '}
44            <Button
45              variant="text"
46              sx={{ ml: '2px', verticalAlign: 'top' }}
47              onClick={handleSwitchNetwork}
48              disableRipple
49            >
50              <Typography variant="description">
51                <Trans>Switch Network</Trans>
52              </Typography>
53            </Button>
54          </Typography>
55        )}
56      </Warning>
57    );
58  };