1  import { CogIcon } from '@heroicons/react/solid';
  2  import { Trans } from '@lingui/macro';
  3  import { Button, ListItemText, Menu, MenuItem, SvgIcon, Typography } from '@mui/material';
  4  import React, { useState } from 'react';
  5  import { useModalContext } from 'src/hooks/useModal';
  6  import { DEFAULT_LOCALE } from 'src/libs/LanguageProvider';
  7  import { useRootStore } from 'src/store/root';
  8  import { PROD_ENV } from 'src/utils/marketsAndNetworksConfig';
  9  import { SETTINGS } from 'src/utils/mixPanelEvents';
 10  
 11  import { DarkModeSwitcher } from './components/DarkModeSwitcher';
 12  import { LanguageListItem, LanguagesList } from './components/LanguageSwitcher';
 13  import { TestNetModeSwitcher } from './components/TestNetModeSwitcher';
 14  
 15  export const LANG_MAP = {
 16    en: 'English',
 17    es: 'Spanish',
 18    fr: 'French',
 19    el: 'Greek',
 20  };
 21  type LanguageCode = keyof typeof LANG_MAP;
 22  
 23  // Define the type for the language codes
 24  
 25  // Example usage
 26  
 27  export function SettingsMenu() {
 28    const [settingsOpen, setSettingsOpen] = useState(false);
 29    const [languagesOpen, setLanguagesOpen] = useState(false);
 30    const { openReadMode } = useModalContext();
 31    const [anchorEl, setAnchorEl] = useState<Element | null>(null);
 32    const trackEvent = useRootStore((store) => store.trackEvent);
 33    const handleSettingsClick = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
 34      setAnchorEl(event.currentTarget);
 35      setSettingsOpen(true);
 36      setLanguagesOpen(false);
 37    };
 38  
 39    const handleLanguageClick = () => {
 40      const savedLocale = localStorage.getItem('LOCALE') || DEFAULT_LOCALE;
 41      const langCode = savedLocale as LanguageCode;
 42      setSettingsOpen(false);
 43      setLanguagesOpen(true);
 44      trackEvent(SETTINGS.LANGUAGE, { language: LANG_MAP[langCode] });
 45    };
 46  
 47    const handleCloseLanguage = () => {
 48      setSettingsOpen(true);
 49      setLanguagesOpen(false);
 50    };
 51  
 52    const handleClose = () => {
 53      setAnchorEl(null);
 54      setSettingsOpen(false);
 55      setLanguagesOpen(false);
 56    };
 57  
 58    const handleOpenReadMode = () => {
 59      setSettingsOpen(false);
 60      openReadMode();
 61    };
 62  
 63    return (
 64      <>
 65        <Button
 66          variant="surface"
 67          aria-label="settings"
 68          id="settings-button"
 69          aria-controls={settingsOpen ? 'settings-menu' : undefined}
 70          aria-expanded={settingsOpen ? 'true' : undefined}
 71          aria-haspopup="true"
 72          onClick={handleSettingsClick}
 73          sx={{ p: '7px 8px', minWidth: 'unset', ml: 2 }}
 74        >
 75          <SvgIcon sx={{ color: '#F1F1F3' }} fontSize="small">
 76            <CogIcon />
 77          </SvgIcon>
 78        </Button>
 79  
 80        <Menu
 81          id="settings-menu"
 82          MenuListProps={{
 83            'aria-labelledby': 'settings-button',
 84          }}
 85          anchorEl={anchorEl}
 86          open={settingsOpen}
 87          onClose={handleClose}
 88          sx={{ '.MuiMenuItem-root.Mui-disabled': { opacity: 1 } }}
 89          keepMounted={true}
 90        >
 91          <MenuItem disabled sx={{ mb: '4px' }}>
 92            <Typography variant="subheader2" color="text.secondary">
 93              <Trans>Global settings</Trans>
 94            </Typography>
 95          </MenuItem>
 96  
 97          <DarkModeSwitcher component={MenuItem} />
 98          {PROD_ENV && <TestNetModeSwitcher />}
 99          <LanguageListItem onClick={handleLanguageClick} component={MenuItem} />
100          <MenuItem onClick={handleOpenReadMode}>
101            <ListItemText>
102              <Trans>Watch wallet</Trans>
103            </ListItemText>
104          </MenuItem>
105        </Menu>
106  
107        <Menu
108          id="settings-menu"
109          MenuListProps={{
110            'aria-labelledby': 'settings-button',
111          }}
112          anchorEl={anchorEl}
113          open={languagesOpen}
114          onClose={handleClose}
115          keepMounted={true}
116        >
117          <LanguagesList onClick={handleCloseLanguage} component={MenuItem} />
118        </Menu>
119      </>
120    );
121  }