2023-02-15 15:39:46 +01:00
|
|
|
import React, { useState, useContext, useRef } from 'react';
|
2022-03-18 20:07:05 +01:00
|
|
|
import browser from 'webextension-polyfill';
|
2021-02-04 19:15:23 +01:00
|
|
|
import { useHistory } from 'react-router-dom';
|
|
|
|
import { useSelector } from 'react-redux';
|
2023-05-23 14:51:39 +02:00
|
|
|
///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
|
|
|
|
import { getCustodianIconForAddress } from '../../../selectors/institutional/selectors';
|
|
|
|
import Box from '../../ui/box';
|
|
|
|
import { DISPLAY, AlignItems } from '../../../helpers/constants/design-system';
|
|
|
|
///: END:ONLY_INCLUDE_IN
|
2021-02-04 19:15:23 +01:00
|
|
|
import SelectedAccount from '../selected-account';
|
|
|
|
import ConnectedStatusIndicator from '../connected-status-indicator';
|
2021-04-28 21:53:59 +02:00
|
|
|
import { getEnvironmentType } from '../../../../app/scripts/lib/util';
|
|
|
|
import { ENVIRONMENT_TYPE_POPUP } from '../../../../shared/constants/app';
|
2023-04-03 17:31:04 +02:00
|
|
|
import {
|
|
|
|
MetaMetricsEventCategory,
|
|
|
|
MetaMetricsEventName,
|
|
|
|
} from '../../../../shared/constants/metametrics';
|
2021-02-04 19:15:23 +01:00
|
|
|
import { CONNECTED_ACCOUNTS_ROUTE } from '../../../helpers/constants/routes';
|
|
|
|
import { useI18nContext } from '../../../hooks/useI18nContext';
|
2023-05-23 14:51:39 +02:00
|
|
|
import {
|
|
|
|
getOriginOfCurrentTab,
|
|
|
|
///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
|
|
|
|
getSelectedAddress,
|
|
|
|
///: END:ONLY_INCLUDE_IN
|
|
|
|
} from '../../../selectors';
|
2022-04-01 21:11:12 +02:00
|
|
|
import { MetaMetricsContext } from '../../../contexts/metametrics';
|
2023-04-19 23:16:49 +02:00
|
|
|
import { ButtonIcon, IconName } from '../../component-library';
|
2021-02-04 19:15:23 +01:00
|
|
|
import AccountOptionsMenu from './account-options-menu';
|
2020-05-22 19:11:42 +02:00
|
|
|
|
2020-11-03 00:41:28 +01:00
|
|
|
export default function MenuBar() {
|
2021-02-04 19:15:23 +01:00
|
|
|
const t = useI18nContext();
|
2022-03-14 19:12:38 +01:00
|
|
|
const trackEvent = useContext(MetaMetricsContext);
|
2021-02-04 19:15:23 +01:00
|
|
|
const history = useHistory();
|
|
|
|
const [accountOptionsMenuOpen, setAccountOptionsMenuOpen] = useState(false);
|
|
|
|
const origin = useSelector(getOriginOfCurrentTab);
|
2023-05-23 14:51:39 +02:00
|
|
|
///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
|
|
|
|
const selectedAddress = useSelector(getSelectedAddress);
|
|
|
|
const custodianIcon = useSelector((state) =>
|
|
|
|
getCustodianIconForAddress(state, selectedAddress),
|
|
|
|
);
|
|
|
|
///: END:ONLY_INCLUDE_IN
|
2023-02-15 15:39:46 +01:00
|
|
|
const ref = useRef(false);
|
2020-05-29 20:14:25 +02:00
|
|
|
|
2020-11-03 00:41:28 +01:00
|
|
|
const showStatus =
|
|
|
|
getEnvironmentType() === ENVIRONMENT_TYPE_POPUP &&
|
|
|
|
origin &&
|
2022-03-18 20:07:05 +01:00
|
|
|
origin !== browser.runtime.id;
|
2020-05-22 19:11:42 +02:00
|
|
|
|
|
|
|
return (
|
|
|
|
<div className="menu-bar">
|
2023-04-13 18:54:03 +02:00
|
|
|
{showStatus ? (
|
2020-11-03 00:41:28 +01:00
|
|
|
<ConnectedStatusIndicator
|
|
|
|
onClick={() => history.push(CONNECTED_ACCOUNTS_ROUTE)}
|
|
|
|
/>
|
|
|
|
) : null}
|
2023-05-23 14:51:39 +02:00
|
|
|
{
|
|
|
|
///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
|
|
|
|
custodianIcon && (
|
|
|
|
<Box
|
|
|
|
display={DISPLAY.FLEX}
|
|
|
|
alignItems={AlignItems.center}
|
|
|
|
className="menu-bar__custody-logo"
|
|
|
|
data-testid="custody-logo"
|
|
|
|
>
|
|
|
|
<img
|
|
|
|
src={custodianIcon}
|
|
|
|
className="menu-bar__custody-logo--icon"
|
|
|
|
alt=""
|
|
|
|
/>
|
|
|
|
</Box>
|
|
|
|
)
|
|
|
|
///: END:ONLY_INCLUDE_IN
|
|
|
|
}
|
2020-05-22 19:11:42 +02:00
|
|
|
<SelectedAccount />
|
2023-02-15 15:39:46 +01:00
|
|
|
<span style={{ display: 'inherit' }} ref={ref}>
|
|
|
|
<ButtonIcon
|
2023-04-19 23:16:49 +02:00
|
|
|
iconName={IconName.MoreVertical}
|
2023-02-15 15:39:46 +01:00
|
|
|
className="menu-bar__account-options"
|
|
|
|
data-testid="account-options-menu-button"
|
|
|
|
ariaLabel={t('accountOptions')}
|
|
|
|
onClick={() => {
|
|
|
|
trackEvent({
|
2023-04-03 17:31:04 +02:00
|
|
|
event: MetaMetricsEventName.NavAccountMenuOpened,
|
|
|
|
category: MetaMetricsEventCategory.Navigation,
|
2023-02-15 15:39:46 +01:00
|
|
|
properties: {
|
|
|
|
location: 'Home',
|
|
|
|
},
|
|
|
|
});
|
|
|
|
setAccountOptionsMenuOpen(true);
|
|
|
|
}}
|
|
|
|
/>
|
|
|
|
</span>
|
2023-04-13 18:54:03 +02:00
|
|
|
{accountOptionsMenuOpen && (
|
|
|
|
<AccountOptionsMenu
|
|
|
|
anchorElement={ref.current}
|
|
|
|
onClose={() => setAccountOptionsMenuOpen(false)}
|
|
|
|
/>
|
|
|
|
)}
|
2020-05-22 19:11:42 +02:00
|
|
|
</div>
|
2021-02-04 19:15:23 +01:00
|
|
|
);
|
2020-05-22 19:11:42 +02:00
|
|
|
}
|