1  import { Trans } from '@lingui/macro';
 2  import { Box, FormControlLabel, ListItem, ListItemText, MenuItem, Switch } from '@mui/material';
 3  import React, { useState } from 'react';
 4  import { useRootStore } from 'src/store/root';
 5  import { SETTINGS } from 'src/utils/mixPanelEvents';
 6  
 7  interface TestNetModeSwitcherProps {
 8    component?: typeof MenuItem | typeof ListItem;
 9  }
10  
11  export const TestNetModeSwitcher = ({ component = ListItem }: TestNetModeSwitcherProps) => {
12    const testnetsEnabledId = 'testnetsEnabled';
13    const testnetsEnabledLocalstorage = localStorage.getItem(testnetsEnabledId) === 'true' || false;
14    const [testnetsEnabled, setTestnetsMode] = useState(testnetsEnabledLocalstorage);
15    const trackEvent = useRootStore((store) => store.trackEvent);
16  
17    const toggleTestnetsEnabled = () => {
18      const newState = !testnetsEnabled;
19      setTestnetsMode(!testnetsEnabled);
20      localStorage.setItem(testnetsEnabledId, newState ? 'true' : 'false');
21      // Set window.location to trigger a page reload when navigating to the the dashboard
22      window.location.href = '/';
23    };
24  
25    return (
26      <Box
27        component={component}
28        onClick={toggleTestnetsEnabled}
29        sx={{
30          cursor: 'pointer',
31          color: { xs: '#F1F1F3', md: 'text.primary' },
32          py: { xs: 1.5, md: 2 },
33        }}
34      >
35        <ListItemText>
36          <Trans>Testnet mode</Trans>
37        </ListItemText>
38        <FormControlLabel
39          sx={{ mr: 0 }}
40          value="testnetsMode"
41          control={
42            <Switch
43              disableRipple
44              onClick={() => trackEvent(SETTINGS.TESTNET_MODE)}
45              checked={testnetsEnabled}
46              sx={{ '.MuiSwitch-track': { bgcolor: { xs: '#FFFFFF1F', md: 'primary.light' } } }}
47            />
48          }
49          label={testnetsEnabled ? 'On' : 'Off'}
50          labelPlacement="start"
51        />
52      </Box>
53    );
54  };