mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
739075662c
* Migrating Icon to typescript and deprecating JS component * gw suggestions (#18434) --------- Co-authored-by: Garrett Bear <gwhisten@gmail.com>
160 lines
4.6 KiB
JavaScript
160 lines
4.6 KiB
JavaScript
import React, { useContext } from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import { useHistory } from 'react-router-dom';
|
|
import { useDispatch } from 'react-redux';
|
|
import {
|
|
CONNECTED_ROUTE,
|
|
SETTINGS_ROUTE,
|
|
DEFAULT_ROUTE,
|
|
} from '../../../helpers/constants/routes';
|
|
import { lockMetamask } from '../../../store/actions';
|
|
import { useI18nContext } from '../../../hooks/useI18nContext';
|
|
import { ICON_NAMES } from '../../component-library/icon/deprecated';
|
|
import { Menu, MenuItem } from '../../ui/menu';
|
|
import { getEnvironmentType } from '../../../../app/scripts/lib/util';
|
|
import { ENVIRONMENT_TYPE_FULLSCREEN } from '../../../../shared/constants/app';
|
|
import { SUPPORT_LINK } from '../../../../shared/lib/ui-utils';
|
|
|
|
import { MetaMetricsContext } from '../../../contexts/metametrics';
|
|
import {
|
|
MetaMetricsEventName,
|
|
MetaMetricsEventCategory,
|
|
MetaMetricsContextProp,
|
|
} from '../../../../shared/constants/metametrics';
|
|
|
|
export const GlobalMenu = ({ closeMenu, anchorElement }) => {
|
|
const t = useI18nContext();
|
|
const dispatch = useDispatch();
|
|
const trackEvent = useContext(MetaMetricsContext);
|
|
const history = useHistory();
|
|
|
|
return (
|
|
<Menu anchorElement={anchorElement} onHide={closeMenu}>
|
|
<MenuItem
|
|
iconName={ICON_NAMES.CONNECT}
|
|
onClick={() => {
|
|
history.push(CONNECTED_ROUTE);
|
|
trackEvent({
|
|
event: MetaMetricsEventName.NavConnectedSitesOpened,
|
|
category: MetaMetricsEventCategory.Navigation,
|
|
properties: {
|
|
location: 'Account Options',
|
|
},
|
|
});
|
|
closeMenu();
|
|
}}
|
|
>
|
|
{t('connectedSites')}
|
|
</MenuItem>
|
|
<MenuItem
|
|
iconName={ICON_NAMES.DIAGRAM}
|
|
onClick={() => {
|
|
const portfolioUrl = process.env.PORTFOLIO_URL;
|
|
global.platform.openTab({
|
|
url: `${portfolioUrl}?metamaskEntry=ext`,
|
|
});
|
|
trackEvent(
|
|
{
|
|
category: MetaMetricsEventCategory.Home,
|
|
event: MetaMetricsEventName.PortfolioLinkClicked,
|
|
properties: {
|
|
url: portfolioUrl,
|
|
},
|
|
},
|
|
{
|
|
contextPropsIntoEventProperties: [
|
|
MetaMetricsContextProp.PageTitle,
|
|
],
|
|
},
|
|
);
|
|
closeMenu();
|
|
}}
|
|
data-testid="global-menu-portfolio"
|
|
>
|
|
{t('portfolioView')}
|
|
</MenuItem>
|
|
{getEnvironmentType() === ENVIRONMENT_TYPE_FULLSCREEN ? null : (
|
|
<MenuItem
|
|
iconName={ICON_NAMES.EXPAND}
|
|
onClick={() => {
|
|
global.platform.openExtensionInBrowser();
|
|
trackEvent({
|
|
event: MetaMetricsEventName.AppWindowExpanded,
|
|
category: MetaMetricsEventCategory.Navigation,
|
|
properties: {
|
|
location: 'Account Options',
|
|
},
|
|
});
|
|
closeMenu();
|
|
}}
|
|
data-testid="global-menu-expand"
|
|
>
|
|
{t('expandView')}
|
|
</MenuItem>
|
|
)}
|
|
<MenuItem
|
|
iconName={ICON_NAMES.MESSAGE_QUESTION}
|
|
onClick={() => {
|
|
global.platform.openTab({ url: SUPPORT_LINK });
|
|
trackEvent(
|
|
{
|
|
category: MetaMetricsEventCategory.Home,
|
|
event: MetaMetricsEventName.SupportLinkClicked,
|
|
properties: {
|
|
url: SUPPORT_LINK,
|
|
},
|
|
},
|
|
{
|
|
contextPropsIntoEventProperties: [
|
|
MetaMetricsContextProp.PageTitle,
|
|
],
|
|
},
|
|
);
|
|
closeMenu();
|
|
}}
|
|
data-testid="global-menu-support"
|
|
>
|
|
{t('support')}
|
|
</MenuItem>
|
|
<MenuItem
|
|
iconName={ICON_NAMES.SETTING}
|
|
onClick={() => {
|
|
history.push(SETTINGS_ROUTE);
|
|
trackEvent({
|
|
category: MetaMetricsEventCategory.Navigation,
|
|
event: MetaMetricsEventName.NavSettingsOpened,
|
|
properties: {
|
|
location: 'Main Menu',
|
|
},
|
|
});
|
|
closeMenu();
|
|
}}
|
|
>
|
|
{t('settings')}
|
|
</MenuItem>
|
|
<MenuItem
|
|
iconName={ICON_NAMES.LOCK}
|
|
onClick={() => {
|
|
dispatch(lockMetamask());
|
|
history.push(DEFAULT_ROUTE);
|
|
closeMenu();
|
|
}}
|
|
data-testid="global-menu-lock"
|
|
>
|
|
{t('lockMetaMask')}
|
|
</MenuItem>
|
|
</Menu>
|
|
);
|
|
};
|
|
|
|
GlobalMenu.propTypes = {
|
|
/**
|
|
* The element that the menu should display next to
|
|
*/
|
|
anchorElement: PropTypes.instanceOf(window.Element),
|
|
/**
|
|
* Function that closes this menu
|
|
*/
|
|
closeMenu: PropTypes.func.isRequired,
|
|
};
|