mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-12-23 09:52:26 +01:00
0bbfd38cc6
* added site connection menu component * reverted change for unlock page * updated snapshot * updated state with useSelector * updated state for connected * updated icons * updated test * updated snapshot * moved component to multichain folder * updated color * added multichain connection to menu bar * updated default color * updated css * updated multichain site with connected site info * updated ui for not connected state * removed scripts * updated lint errors * updated lint errors * updated stories * updated story for not connected to current state * updated story for not connected to current state * updated badge to 16px * updated badge position * updated snapshot * fixed lint errors * updated not connected state icon * updated constants for status and added new locale string
72 lines
2.7 KiB
JavaScript
72 lines
2.7 KiB
JavaScript
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 { 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 { ButtonIcon, ICON_NAMES } from '../../component-library';
|
|
import { GlobalMenu } from '../../multichain/global-menu';
|
|
import AccountOptionsMenu from './account-options-menu';
|
|
|
|
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);
|
|
|
|
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
|
|
<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: EVENT_NAMES.NAV_ACCOUNT_MENU_OPENED,
|
|
category: EVENT.CATEGORIES.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>
|
|
);
|
|
}
|