2021-02-04 19:15:23 +01:00
|
|
|
import React, { PureComponent } from 'react';
|
|
|
|
import PropTypes from 'prop-types';
|
|
|
|
import classnames from 'classnames';
|
|
|
|
import Identicon from '../../ui/identicon';
|
|
|
|
import MetaFoxLogo from '../../ui/metafox-logo';
|
|
|
|
import { DEFAULT_ROUTE } from '../../../helpers/constants/routes';
|
2023-04-03 17:31:04 +02:00
|
|
|
import {
|
|
|
|
MetaMetricsEventCategory,
|
|
|
|
MetaMetricsEventName,
|
|
|
|
} from '../../../../shared/constants/metametrics';
|
2021-02-04 19:15:23 +01:00
|
|
|
import NetworkDisplay from '../network-display';
|
2018-05-11 01:51:26 +02:00
|
|
|
|
2022-11-16 18:41:15 +01:00
|
|
|
///: BEGIN:ONLY_INCLUDE_IN(beta)
|
|
|
|
import BetaHeader from '../beta-header';
|
|
|
|
///: END:ONLY_INCLUDE_IN(beta)
|
|
|
|
|
2018-08-19 03:41:19 +02:00
|
|
|
export default class AppHeader extends PureComponent {
|
2018-05-11 01:51:26 +02:00
|
|
|
static propTypes = {
|
|
|
|
history: PropTypes.object,
|
|
|
|
networkDropdownOpen: PropTypes.bool,
|
|
|
|
showNetworkDropdown: PropTypes.func,
|
|
|
|
hideNetworkDropdown: PropTypes.func,
|
|
|
|
toggleAccountMenu: PropTypes.func,
|
|
|
|
selectedAddress: PropTypes.string,
|
|
|
|
isUnlocked: PropTypes.bool,
|
2019-01-23 16:25:34 +01:00
|
|
|
hideNetworkIndicator: PropTypes.bool,
|
|
|
|
disabled: PropTypes.bool,
|
2020-10-06 20:28:38 +02:00
|
|
|
disableNetworkIndicator: PropTypes.bool,
|
2019-03-05 16:45:01 +01:00
|
|
|
isAccountMenuOpen: PropTypes.bool,
|
2022-06-01 19:09:13 +02:00
|
|
|
///: BEGIN:ONLY_INCLUDE_IN(flask)
|
|
|
|
unreadNotificationsCount: PropTypes.number,
|
2023-03-06 20:35:00 +01:00
|
|
|
desktopEnabled: PropTypes.bool,
|
2022-06-01 19:09:13 +02:00
|
|
|
///: END:ONLY_INCLUDE_IN
|
2022-11-16 18:41:15 +01:00
|
|
|
///: BEGIN:ONLY_INCLUDE_IN(beta)
|
|
|
|
showBetaHeader: PropTypes.bool,
|
|
|
|
///: END:ONLY_INCLUDE_IN
|
2020-10-06 20:28:38 +02:00
|
|
|
onClick: PropTypes.func,
|
2021-02-04 19:15:23 +01:00
|
|
|
};
|
2018-05-11 01:51:26 +02:00
|
|
|
|
|
|
|
static contextTypes = {
|
|
|
|
t: PropTypes.func,
|
2022-03-29 15:46:24 +02:00
|
|
|
trackEvent: PropTypes.func,
|
2021-02-04 19:15:23 +01:00
|
|
|
};
|
2018-05-11 01:51:26 +02:00
|
|
|
|
2020-11-03 00:41:28 +01:00
|
|
|
handleNetworkIndicatorClick(event) {
|
2021-02-04 19:15:23 +01:00
|
|
|
event.preventDefault();
|
|
|
|
event.stopPropagation();
|
2018-05-11 01:51:26 +02:00
|
|
|
|
2020-11-03 00:41:28 +01:00
|
|
|
const {
|
|
|
|
networkDropdownOpen,
|
|
|
|
showNetworkDropdown,
|
|
|
|
hideNetworkDropdown,
|
2021-01-27 17:51:59 +01:00
|
|
|
disabled,
|
|
|
|
disableNetworkIndicator,
|
2021-02-04 19:15:23 +01:00
|
|
|
} = this.props;
|
2018-05-11 01:51:26 +02:00
|
|
|
|
2021-01-27 17:51:59 +01:00
|
|
|
if (disabled || disableNetworkIndicator) {
|
2021-02-04 19:15:23 +01:00
|
|
|
return;
|
2021-01-27 17:51:59 +01:00
|
|
|
}
|
|
|
|
|
2019-03-05 16:45:01 +01:00
|
|
|
if (networkDropdownOpen === false) {
|
2022-03-29 15:46:24 +02:00
|
|
|
this.context.trackEvent({
|
2023-04-03 17:31:04 +02:00
|
|
|
category: MetaMetricsEventCategory.Navigation,
|
|
|
|
event: MetaMetricsEventName.NavNetworkMenuOpened,
|
2022-08-16 18:39:23 +02:00
|
|
|
properties: {},
|
2021-02-04 19:15:23 +01:00
|
|
|
});
|
|
|
|
showNetworkDropdown();
|
2019-03-05 16:45:01 +01:00
|
|
|
} else {
|
2021-02-04 19:15:23 +01:00
|
|
|
hideNetworkDropdown();
|
2019-03-05 16:45:01 +01:00
|
|
|
}
|
2018-05-11 01:51:26 +02:00
|
|
|
}
|
|
|
|
|
2020-11-03 00:41:28 +01:00
|
|
|
renderAccountMenu() {
|
|
|
|
const {
|
|
|
|
isUnlocked,
|
|
|
|
toggleAccountMenu,
|
|
|
|
selectedAddress,
|
|
|
|
disabled,
|
|
|
|
isAccountMenuOpen,
|
2022-06-01 19:09:13 +02:00
|
|
|
///: BEGIN:ONLY_INCLUDE_IN(flask)
|
|
|
|
unreadNotificationsCount,
|
|
|
|
///: END:ONLY_INCLUDE_IN
|
2021-02-04 19:15:23 +01:00
|
|
|
} = this.props;
|
2018-05-11 01:51:26 +02:00
|
|
|
|
2020-11-03 00:41:28 +01:00
|
|
|
return (
|
|
|
|
isUnlocked && (
|
2022-06-15 19:49:18 +02:00
|
|
|
<button
|
2022-09-27 17:03:26 +02:00
|
|
|
data-testid="account-menu-icon"
|
2020-11-03 00:41:28 +01:00
|
|
|
className={classnames('account-menu__icon', {
|
|
|
|
'account-menu__icon--disabled': disabled,
|
|
|
|
})}
|
|
|
|
onClick={() => {
|
|
|
|
if (!disabled) {
|
|
|
|
!isAccountMenuOpen &&
|
2022-03-29 15:46:24 +02:00
|
|
|
this.context.trackEvent({
|
2023-04-03 17:31:04 +02:00
|
|
|
category: MetaMetricsEventCategory.Navigation,
|
|
|
|
event: MetaMetricsEventName.NavMainMenuOpened,
|
2022-08-16 18:39:23 +02:00
|
|
|
properties: {},
|
2021-02-04 19:15:23 +01:00
|
|
|
});
|
|
|
|
toggleAccountMenu();
|
2020-11-03 00:41:28 +01:00
|
|
|
}
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
<Identicon address={selectedAddress} diameter={32} addBorder />
|
2022-06-01 19:09:13 +02:00
|
|
|
{
|
|
|
|
///: BEGIN:ONLY_INCLUDE_IN(flask)
|
|
|
|
unreadNotificationsCount > 0 && (
|
|
|
|
<div className="account-menu__icon__notification-count">
|
|
|
|
{unreadNotificationsCount}
|
|
|
|
</div>
|
|
|
|
)
|
|
|
|
///: END:ONLY_INCLUDE_IN
|
|
|
|
}
|
2022-06-15 19:49:18 +02:00
|
|
|
</button>
|
2020-11-03 00:41:28 +01:00
|
|
|
)
|
2021-02-04 19:15:23 +01:00
|
|
|
);
|
2018-05-11 01:51:26 +02:00
|
|
|
}
|
|
|
|
|
2020-11-03 00:41:28 +01:00
|
|
|
render() {
|
2018-05-11 01:51:26 +02:00
|
|
|
const {
|
2019-01-23 16:25:34 +01:00
|
|
|
history,
|
|
|
|
hideNetworkIndicator,
|
2020-10-06 20:28:38 +02:00
|
|
|
disableNetworkIndicator,
|
2019-01-23 16:25:34 +01:00
|
|
|
disabled,
|
2020-10-06 20:28:38 +02:00
|
|
|
onClick,
|
2022-11-16 18:41:15 +01:00
|
|
|
///: BEGIN:ONLY_INCLUDE_IN(beta)
|
|
|
|
showBetaHeader,
|
|
|
|
///: END:ONLY_INCLUDE_IN(beta)
|
2023-03-06 20:35:00 +01:00
|
|
|
///: BEGIN:ONLY_INCLUDE_IN(flask)
|
2023-02-23 17:39:48 +01:00
|
|
|
desktopEnabled,
|
|
|
|
///: END:ONLY_INCLUDE_IN
|
2021-02-04 19:15:23 +01:00
|
|
|
} = this.props;
|
2018-05-11 01:51:26 +02:00
|
|
|
|
|
|
|
return (
|
2022-11-16 18:41:15 +01:00
|
|
|
<>
|
|
|
|
{
|
|
|
|
///: BEGIN:ONLY_INCLUDE_IN(beta)
|
|
|
|
showBetaHeader ? <BetaHeader /> : null
|
|
|
|
///: END:ONLY_INCLUDE_IN(beta)
|
|
|
|
}
|
|
|
|
|
|
|
|
<div className="app-header">
|
|
|
|
<div className="app-header__contents">
|
|
|
|
<MetaFoxLogo
|
|
|
|
unsetIconHeight
|
|
|
|
onClick={async () => {
|
|
|
|
if (onClick) {
|
|
|
|
await onClick();
|
|
|
|
}
|
|
|
|
history.push(DEFAULT_ROUTE);
|
|
|
|
}}
|
|
|
|
/>
|
2023-02-23 17:39:48 +01:00
|
|
|
{
|
2023-03-06 20:35:00 +01:00
|
|
|
///: BEGIN:ONLY_INCLUDE_IN(flask)
|
2023-02-23 17:39:48 +01:00
|
|
|
desktopEnabled && process.env.METAMASK_DEBUG && (
|
|
|
|
<div data-testid="app-header-desktop-dev-logo">
|
|
|
|
<MetaFoxLogo
|
|
|
|
unsetIconHeight
|
|
|
|
src="./images/logo/desktop.svg"
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
)
|
|
|
|
///: END:ONLY_INCLUDE_IN
|
|
|
|
}
|
2022-11-16 18:41:15 +01:00
|
|
|
<div className="app-header__account-menu-container">
|
|
|
|
{!hideNetworkIndicator && (
|
|
|
|
<div className="app-header__network-component-wrapper">
|
|
|
|
<NetworkDisplay
|
|
|
|
onClick={(event) => this.handleNetworkIndicatorClick(event)}
|
|
|
|
disabled={disabled || disableNetworkIndicator}
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
)}
|
|
|
|
{this.renderAccountMenu()}
|
|
|
|
</div>
|
2018-05-11 01:51:26 +02:00
|
|
|
</div>
|
|
|
|
</div>
|
2022-11-16 18:41:15 +01:00
|
|
|
</>
|
2021-02-04 19:15:23 +01:00
|
|
|
);
|
2018-05-11 01:51:26 +02:00
|
|
|
}
|
|
|
|
}
|