1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-11 20:27:12 +01:00
metamask-extension/ui/components/app/menu-bar/menu-bar.js

76 lines
2.8 KiB
JavaScript
Raw Normal View History

import React, { useState, useContext, useRef } from 'react';
import browser from 'webextension-polyfill';
import { useHistory } from 'react-router-dom';
import { useSelector } from 'react-redux';
import SelectedAccount from '../selected-account';
import ConnectedStatusIndicator from '../connected-status-indicator';
import { getEnvironmentType } from '../../../../app/scripts/lib/util';
import { ENVIRONMENT_TYPE_POPUP } from '../../../../shared/constants/app';
import {
MetaMetricsEventCategory,
MetaMetricsEventName,
} from '../../../../shared/constants/metametrics';
import { CONNECTED_ACCOUNTS_ROUTE } from '../../../helpers/constants/routes';
import { useI18nContext } from '../../../hooks/useI18nContext';
import { getOriginOfCurrentTab } from '../../../selectors';
import { MetaMetricsContext } from '../../../contexts/metametrics';
import { ButtonIcon } from '../../component-library';
import { ICON_NAMES } from '../../component-library/icon/deprecated';
import { GlobalMenu } from '../../multichain/global-menu';
import AccountOptionsMenu from './account-options-menu';
2020-11-03 00:41:28 +01:00
export default function MenuBar() {
const t = useI18nContext();
const trackEvent = useContext(MetaMetricsContext);
const history = useHistory();
const [accountOptionsMenuOpen, setAccountOptionsMenuOpen] = useState(false);
const origin = useSelector(getOriginOfCurrentTab);
const ref = useRef(false);
2020-11-03 00:41:28 +01:00
const showStatus =
getEnvironmentType() === ENVIRONMENT_TYPE_POPUP &&
origin &&
origin !== browser.runtime.id;
return (
<div className="menu-bar">
{showStatus ? ( // TODO: Move the connection status menu icon to the correct position in header once we implement the new header
2020-11-03 00:41:28 +01:00
<ConnectedStatusIndicator
onClick={() => history.push(CONNECTED_ACCOUNTS_ROUTE)}
/>
) : null}
<SelectedAccount />
<span style={{ display: 'inherit' }} ref={ref}>
<ButtonIcon
iconName={ICON_NAMES.MORE_VERTICAL}
className="menu-bar__account-options"
data-testid="account-options-menu-button"
ariaLabel={t('accountOptions')}
onClick={() => {
trackEvent({
event: MetaMetricsEventName.NavAccountMenuOpened,
category: MetaMetricsEventCategory.Navigation,
properties: {
location: 'Home',
},
});
setAccountOptionsMenuOpen(true);
}}
/>
</span>
{accountOptionsMenuOpen &&
(process.env.MULTICHAIN ? (
<GlobalMenu
anchorElement={ref.current}
closeMenu={() => setAccountOptionsMenuOpen(false)}
/>
) : (
<AccountOptionsMenu
anchorElement={ref.current}
onClose={() => setAccountOptionsMenuOpen(false)}
/>
))}
</div>
);
}