1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
metamask-extension/ui/components/app/app-header/app-header.component.js
2021-04-28 14:53:59 -05:00

140 lines
3.6 KiB
JavaScript

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';
import NetworkDisplay from '../network-display';
export default class AppHeader extends PureComponent {
static propTypes = {
history: PropTypes.object,
networkDropdownOpen: PropTypes.bool,
showNetworkDropdown: PropTypes.func,
hideNetworkDropdown: PropTypes.func,
toggleAccountMenu: PropTypes.func,
selectedAddress: PropTypes.string,
isUnlocked: PropTypes.bool,
hideNetworkIndicator: PropTypes.bool,
disabled: PropTypes.bool,
disableNetworkIndicator: PropTypes.bool,
isAccountMenuOpen: PropTypes.bool,
onClick: PropTypes.func,
};
static contextTypes = {
t: PropTypes.func,
metricsEvent: PropTypes.func,
};
handleNetworkIndicatorClick(event) {
event.preventDefault();
event.stopPropagation();
const {
networkDropdownOpen,
showNetworkDropdown,
hideNetworkDropdown,
disabled,
disableNetworkIndicator,
} = this.props;
if (disabled || disableNetworkIndicator) {
return;
}
if (networkDropdownOpen === false) {
this.context.metricsEvent({
eventOpts: {
category: 'Navigation',
action: 'Home',
name: 'Opened Network Menu',
},
});
showNetworkDropdown();
} else {
hideNetworkDropdown();
}
}
renderAccountMenu() {
const {
isUnlocked,
toggleAccountMenu,
selectedAddress,
disabled,
isAccountMenuOpen,
} = this.props;
return (
isUnlocked && (
<div
className={classnames('account-menu__icon', {
'account-menu__icon--disabled': disabled,
})}
onClick={() => {
if (!disabled) {
!isAccountMenuOpen &&
this.context.metricsEvent({
eventOpts: {
category: 'Navigation',
action: 'Home',
name: 'Opened Main Menu',
},
});
toggleAccountMenu();
}
}}
>
<Identicon address={selectedAddress} diameter={32} addBorder />
</div>
)
);
}
render() {
const {
history,
isUnlocked,
hideNetworkIndicator,
disableNetworkIndicator,
disabled,
onClick,
} = this.props;
return (
<div
className={classnames('app-header', {
'app-header--back-drop': isUnlocked,
})}
>
<div className="app-header__contents">
<MetaFoxLogo
unsetIconHeight
onClick={async () => {
if (onClick) {
await onClick();
}
history.push(DEFAULT_ROUTE);
}}
/>
<div className="app-header__account-menu-container">
{!hideNetworkIndicator && (
<div className="app-header__network-component-wrapper">
<NetworkDisplay
colored={false}
outline
iconClassName="app-header__network-down-arrow"
onClick={(event) => this.handleNetworkIndicatorClick(event)}
disabled={disabled || disableNetworkIndicator}
/>
</div>
)}
{this.renderAccountMenu()}
</div>
</div>
</div>
);
}
}