diff options
author | Frankie <frankie.diamond@gmail.com> | 2018-05-13 01:02:39 +0800 |
---|---|---|
committer | GitHub <noreply@github.com> | 2018-05-13 01:02:39 +0800 |
commit | 6bd1b21d3b8f74c44214f814c3fe1c8770ab9e2d (patch) | |
tree | 8df5a7134f0cd0cc1beeed287b182b00354c188a /ui/app/components/app-header/app-header.component.js | |
parent | 76ab5c04fae20dc0fd2798ad8a336a0364032aff (diff) | |
parent | 0301b33a48fea3c345e2e49fa53693856770a254 (diff) | |
download | tangerine-wallet-browser-6bd1b21d3b8f74c44214f814c3fe1c8770ab9e2d.tar.gz tangerine-wallet-browser-6bd1b21d3b8f74c44214f814c3fe1c8770ab9e2d.tar.zst tangerine-wallet-browser-6bd1b21d3b8f74c44214f814c3fe1c8770ab9e2d.zip |
Merge pull request #4190 from MetaMask/i3614-unlock
Add new unlock screen design
Diffstat (limited to 'ui/app/components/app-header/app-header.component.js')
-rw-r--r-- | ui/app/components/app-header/app-header.component.js | 106 |
1 files changed, 106 insertions, 0 deletions
diff --git a/ui/app/components/app-header/app-header.component.js b/ui/app/components/app-header/app-header.component.js new file mode 100644 index 000000000..cf36e0d79 --- /dev/null +++ b/ui/app/components/app-header/app-header.component.js @@ -0,0 +1,106 @@ +import React, { Component } from 'react' +import PropTypes from 'prop-types' +import classnames from 'classnames' + +const { ENVIRONMENT_TYPE_NOTIFICATION } = require('../../../../app/scripts/lib/enums') +const { DEFAULT_ROUTE, CONFIRM_TRANSACTION_ROUTE } = require('../../routes') +const Identicon = require('../identicon') +const NetworkIndicator = require('../network') + +class AppHeader extends Component { + static propTypes = { + history: PropTypes.object, + location: PropTypes.object, + network: PropTypes.string, + provider: PropTypes.object, + networkDropdownOpen: PropTypes.bool, + showNetworkDropdown: PropTypes.func, + hideNetworkDropdown: PropTypes.func, + toggleAccountMenu: PropTypes.func, + selectedAddress: PropTypes.string, + isUnlocked: PropTypes.bool, + } + + static contextTypes = { + t: PropTypes.func, + } + + handleNetworkIndicatorClick (event) { + event.preventDefault() + event.stopPropagation() + + const { networkDropdownOpen, showNetworkDropdown, hideNetworkDropdown } = this.props + + return networkDropdownOpen === false + ? showNetworkDropdown() + : hideNetworkDropdown() + } + + renderAccountMenu () { + const { isUnlocked, toggleAccountMenu, selectedAddress } = this.props + + return isUnlocked && ( + <div + className="account-menu__icon" + onClick={toggleAccountMenu} + > + <Identicon + address={selectedAddress} + diameter={32} + /> + </div> + ) + } + + render () { + const { + network, + provider, + history, + location, + isUnlocked, + } = this.props + + if (window.METAMASK_UI_TYPE === ENVIRONMENT_TYPE_NOTIFICATION) { + return null + } + + return ( + <div + className={classnames('app-header', { 'app-header--back-drop': isUnlocked })}> + <div className="app-header__contents"> + <div + className="app-header__logo-container" + onClick={() => history.push(DEFAULT_ROUTE)} + > + <img + className="app-header__metafox" + src="/images/metamask-fox.svg" + height={42} + width={42} + /> + <div className="flex-row"> + <h1>{ this.context.t('appName') }</h1> + <div className="app-header__beta-label"> + { this.context.t('beta') } + </div> + </div> + </div> + <div className="app-header__account-menu-container"> + <div className="network-component-wrapper"> + <NetworkIndicator + network={network} + provider={provider} + onClick={event => this.handleNetworkIndicatorClick(event)} + disabled={location.pathname === CONFIRM_TRANSACTION_ROUTE} + /> + </div> + { this.renderAccountMenu() } + </div> + </div> + </div> + ) + } +} + +export default AppHeader |