1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-04 23:14:56 +01:00
metamask-extension/ui/components/app/menu-bar/menu-bar.js

66 lines
2.3 KiB
JavaScript
Raw Normal View History

import React, { useState, useContext } 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 { EVENT, EVENT_NAMES } 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 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();
2022-07-31 20:26:40 +02:00
const [accountOptionsButtonElement, setAccountOptionsButtonElement] =
useState(null);
const [accountOptionsMenuOpen, setAccountOptionsMenuOpen] = useState(false);
const origin = useSelector(getOriginOfCurrentTab);
2020-11-03 00:41:28 +01:00
const showStatus =
getEnvironmentType() === ENVIRONMENT_TYPE_POPUP &&
origin &&
origin !== browser.runtime.id;
return (
<div className="menu-bar">
2020-11-03 00:41:28 +01:00
{showStatus ? (
<ConnectedStatusIndicator
onClick={() => history.push(CONNECTED_ACCOUNTS_ROUTE)}
/>
) : null}
<SelectedAccount />
<button
className="fas fa-ellipsis-v menu-bar__account-options"
data-testid="account-options-menu-button"
ref={setAccountOptionsButtonElement}
title={t('accountOptions')}
onClick={() => {
trackEvent({
event: EVENT_NAMES.NAV_ACCOUNT_MENU_OPENED,
category: EVENT.CATEGORIES.NAVIGATION,
properties: {
location: 'Home',
},
});
setAccountOptionsMenuOpen(true);
}}
/>
2020-11-03 00:41:28 +01:00
{accountOptionsMenuOpen && (
<AccountOptionsMenu
anchorElement={accountOptionsButtonElement}
onClose={() => setAccountOptionsMenuOpen(false)}
/>
)}
</div>
);
}