1  import { DotsHorizontalIcon } from '@heroicons/react/solid';
 2  import { Trans } from '@lingui/macro';
 3  import { useLingui } from '@lingui/react';
 4  import { Button, ListItemIcon, ListItemText, SvgIcon, Typography } from '@mui/material';
 5  import Menu from '@mui/material/Menu';
 6  import MenuItem from '@mui/material/MenuItem';
 7  import React from 'react';
 8  import { useWeb3Context } from 'src/libs/hooks/useWeb3Context';
 9  import { useRootStore } from 'src/store/root';
10  import { NAV_BAR } from 'src/utils/mixPanelEvents';
11  
12  import { Link } from '../components/primitives/Link';
13  import { moreNavigation } from '../ui-config/menu-items';
14  
15  export function MoreMenu() {
16    const { i18n } = useLingui();
17    const { currentAccount: walletAddress } = useWeb3Context();
18    const trackEvent = useRootStore((store) => store.trackEvent);
19  
20    const [anchorEl, setAnchorEl] = React.useState<Element | null>(null);
21    const open = Boolean(anchorEl);
22    const handleClick = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
23      setAnchorEl(event.currentTarget);
24      trackEvent(NAV_BAR.MORE);
25    };
26    const handleClose = () => {
27      setAnchorEl(null);
28    };
29  
30    return (
31      <>
32        <Button
33          aria-label="more"
34          id="more-button"
35          aria-controls={open ? 'more-menu' : undefined}
36          aria-expanded={open ? 'true' : undefined}
37          aria-haspopup="true"
38          onClick={handleClick}
39          sx={{
40            color: '#F1F1F3',
41            minWidth: 'unset',
42            p: '6px 8px',
43            '&:hover': {
44              bgcolor: 'rgba(250, 251, 252, 0.08)',
45            },
46          }}
47        >
48          <Trans>More</Trans>
49          <SvgIcon color="inherit" sx={{ ml: 1 }}>
50            <DotsHorizontalIcon />
51          </SvgIcon>
52        </Button>
53  
54        <Menu
55          id="more-menu"
56          MenuListProps={{
57            'aria-labelledby': 'more-button',
58          }}
59          anchorEl={anchorEl}
60          open={open}
61          onClose={handleClose}
62          keepMounted={true}
63        >
64          <MenuItem divider={true} component={Link} onClick={handleClose} href="/v3-migration">
65            <Typography variant="subheader1">
66              <Trans>Migrate to Aave V3</Trans>
67            </Typography>
68          </MenuItem>
69          {moreNavigation.map((item, index) => (
70            <MenuItem
71              component={Link}
72              href={item.makeLink ? item.makeLink(walletAddress) : item.link}
73              key={index}
74              onClick={() => trackEvent(NAV_BAR.MORE_NAV, { nav_link: item.title })}
75            >
76              <ListItemIcon>
77                <SvgIcon sx={{ fontSize: '20px' }}>{item.icon}</SvgIcon>
78              </ListItemIcon>
79              <ListItemText>{i18n._(item.title)}</ListItemText>
80            </MenuItem>
81          ))}
82        </Menu>
83      </>
84    );
85  }