import React, { useContext } from 'react'; import PropTypes from 'prop-types'; import { useHistory } from 'react-router-dom'; import { useDispatch, useSelector } from 'react-redux'; import { CONNECTED_ROUTE, SETTINGS_ROUTE, DEFAULT_ROUTE, ///: BEGIN:ONLY_INCLUDE_IN(snaps) NOTIFICATIONS_ROUTE, ///: END:ONLY_INCLUDE_IN(snaps) } from '../../../helpers/constants/routes'; import { lockMetamask } from '../../../store/actions'; import { useI18nContext } from '../../../hooks/useI18nContext'; import { IconName, ///: BEGIN:ONLY_INCLUDE_IN(snaps) Text, ///: END:ONLY_INCLUDE_IN(snaps) } from '../../component-library'; 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'; ///: BEGIN:ONLY_INCLUDE_IN(build-beta,build-flask) import { SUPPORT_REQUEST_LINK } from '../../../helpers/constants/common'; ///: END:ONLY_INCLUDE_IN import { MetaMetricsContext } from '../../../contexts/metametrics'; import { MetaMetricsEventName, MetaMetricsEventCategory, MetaMetricsContextProp, } from '../../../../shared/constants/metametrics'; ///: BEGIN:ONLY_INCLUDE_IN(build-mmi) import { getMmiPortfolioEnabled, getMmiPortfolioUrl, } from '../../../selectors/institutional/selectors'; ///: END:ONLY_INCLUDE_IN import { ///: BEGIN:ONLY_INCLUDE_IN(build-mmi) getMetaMetricsId, ///: END:ONLY_INCLUDE_IN(build-mmi) getSelectedAddress, ///: BEGIN:ONLY_INCLUDE_IN(snaps) getUnreadNotificationsCount, ///: END:ONLY_INCLUDE_IN } from '../../../selectors'; ///: BEGIN:ONLY_INCLUDE_IN(snaps) import { AlignItems, BackgroundColor, Display, JustifyContent, TextAlign, TextColor, TextVariant, } from '../../../helpers/constants/design-system'; ///: END:ONLY_INCLUDE_IN import { AccountDetailsMenuItem, ViewExplorerMenuItem } from '..'; const METRICS_LOCATION = 'Global Menu'; export const GlobalMenu = ({ closeMenu, anchorElement }) => { const t = useI18nContext(); const dispatch = useDispatch(); const trackEvent = useContext(MetaMetricsContext); const history = useHistory(); const address = useSelector(getSelectedAddress); const hasUnapprovedTransactions = useSelector( (state) => Object.keys(state.metamask.unapprovedTxs).length > 0, ); ///: BEGIN:ONLY_INCLUDE_IN(build-mmi) const metaMetricsId = useSelector(getMetaMetricsId); const mmiPortfolioUrl = useSelector(getMmiPortfolioUrl); const mmiPortfolioEnabled = useSelector(getMmiPortfolioEnabled); ///: END:ONLY_INCLUDE_IN ///: BEGIN:ONLY_INCLUDE_IN(snaps) const unreadNotificationsCount = useSelector(getUnreadNotificationsCount); ///: END:ONLY_INCLUDE_IN let supportText = t('support'); let supportLink = SUPPORT_LINK; ///: BEGIN:ONLY_INCLUDE_IN(build-beta,build-flask) supportText = t('needHelpSubmitTicket'); supportLink = SUPPORT_REQUEST_LINK; ///: END:ONLY_INCLUDE_IN return ( { history.push(CONNECTED_ROUTE); trackEvent({ event: MetaMetricsEventName.NavConnectedSitesOpened, category: MetaMetricsEventCategory.Navigation, properties: { location: METRICS_LOCATION, }, }); closeMenu(); }} data-testid="global-menu-connected-sites" > {t('connectedSites')} { ///: BEGIN:ONLY_INCLUDE_IN(build-mmi) mmiPortfolioEnabled && ( { trackEvent({ category: MetaMetricsEventCategory.Navigation, event: MetaMetricsEventName.MMIPortfolioButtonClicked, }); window.open( `${mmiPortfolioUrl}?metametricsId=${metaMetricsId}`, '_blank', ); closeMenu(); }} data-testid="global-menu-mmi-portfolio" > {t('portfolioDashboard')} ) ///: END:ONLY_INCLUDE_IN } {getEnvironmentType() === ENVIRONMENT_TYPE_FULLSCREEN ? null : ( { global.platform.openExtensionInBrowser(); trackEvent({ event: MetaMetricsEventName.AppWindowExpanded, category: MetaMetricsEventCategory.Navigation, properties: { location: METRICS_LOCATION, }, }); closeMenu(); }} data-testid="global-menu-expand" > {t('expandView')} )} { ///: BEGIN:ONLY_INCLUDE_IN(snaps) <> { closeMenu(); history.push(NOTIFICATIONS_ROUTE); }} > {t('notifications')} {unreadNotificationsCount > 0 && ( {unreadNotificationsCount > 99 ? '99+' : unreadNotificationsCount} )} ///: END:ONLY_INCLUDE_IN(snaps) } { global.platform.openTab({ url: supportLink }); trackEvent( { category: MetaMetricsEventCategory.Home, event: MetaMetricsEventName.SupportLinkClicked, properties: { url: supportLink, location: METRICS_LOCATION, }, }, { contextPropsIntoEventProperties: [ MetaMetricsContextProp.PageTitle, ], }, ); closeMenu(); }} data-testid="global-menu-support" > {supportText} { history.push(SETTINGS_ROUTE); trackEvent({ category: MetaMetricsEventCategory.Navigation, event: MetaMetricsEventName.NavSettingsOpened, properties: { location: METRICS_LOCATION, }, }); closeMenu(); }} data-testid="global-menu-settings" > {t('settings')} { dispatch(lockMetamask()); history.push(DEFAULT_ROUTE); trackEvent({ category: MetaMetricsEventCategory.Navigation, event: MetaMetricsEventName.AppLocked, properties: { location: METRICS_LOCATION, }, }); closeMenu(); }} data-testid="global-menu-lock" > {t('lockMetaMask')} ); }; 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, };