Merge pull request #4255 from MetaMask/i4233-dropdowns

Fix account and network dropdowns in confirm screen

ui/app/app.js

@@ -1,7 +1,7 @@
 const { Component } = require('react')
 const PropTypes = require('prop-types')
 const connect = require('react-redux').connect
-const { Route, Switch, withRouter, matchPath } = require('react-router-dom')
+const { Route, Switch, withRouter } = require('react-router-dom')
 const { compose } = require('recompose')
 const h = require('react-hyperscript')
 const actions = require('./actions')
@@ -83,15 +83,6 @@ class App extends Component {
     )
   }
 
-  renderAppHeader () {
-    const { location } = this.props
-    const isInitializing = matchPath(location.pathname, {
-      path: INITIALIZE_ROUTE, exact: false,
-    })
-
-    return isInitializing ? null : h(AppHeader)
-  }
-
   render () {
     const {
       isLoading,
@@ -128,7 +119,7 @@ class App extends Component {
         // global modal
         h(Modal, {}, []),
 
-        this.renderAppHeader(),
+        h(AppHeader),
 
         // sidebar
         this.renderSidebar(),

ui/app/components/app-header/app-header.component.js

@@ -1,9 +1,13 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
+import { matchPath } from 'react-router-dom'
 
-const { ENVIRONMENT_TYPE_NOTIFICATION } = require('../../../../app/scripts/lib/enums')
-const { DEFAULT_ROUTE, CONFIRM_TRANSACTION_ROUTE } = require('../../routes')
+const {
+  ENVIRONMENT_TYPE_NOTIFICATION,
+  ENVIRONMENT_TYPE_POPUP,
+} = require('../../../../app/scripts/lib/enums')
+const { DEFAULT_ROUTE, INITIALIZE_ROUTE, CONFIRM_TRANSACTION_ROUTE } = require('../../routes')
 const Identicon = require('../identicon')
 const NetworkIndicator = require('../network')
 
@@ -36,13 +40,23 @@ class AppHeader extends Component {
       : hideNetworkDropdown()
   }
 
+  isConfirming () {
+    const { location } = this.props
+
+    return Boolean(matchPath(location.pathname, {
+      path: CONFIRM_TRANSACTION_ROUTE, exact: false,
+    }))
+  }
+
   renderAccountMenu () {
     const { isUnlocked, toggleAccountMenu, selectedAddress } = this.props
 
     return isUnlocked && (
       <div
-        className="account-menu__icon"
-        onClick={toggleAccountMenu}
+        className={classnames('account-menu__icon', {
+          'account-menu__icon--disabled': this.isConfirming(),
+        })}
+        onClick={() => this.isConfirming() || toggleAccountMenu()}
       >
         <Identicon
           address={selectedAddress}
@@ -52,6 +66,26 @@ class AppHeader extends Component {
     )
   }
 
+  hideAppHeader () {
+    const { location } = this.props
+
+    const isInitializing = Boolean(matchPath(location.pathname, {
+      path: INITIALIZE_ROUTE, exact: false,
+    }))
+
+    if (isInitializing) {
+      return true
+    }
+
+    if (window.METAMASK_UI_TYPE === ENVIRONMENT_TYPE_NOTIFICATION) {
+      return true
+    }
+
+    if (window.METAMASK_UI_TYPE === ENVIRONMENT_TYPE_POPUP && this.isConfirming()) {
+      return true
+    }
+  }
+
   render () {
     const {
       network,
@@ -61,7 +95,7 @@ class AppHeader extends Component {
       isUnlocked,
     } = this.props
 
-    if (window.METAMASK_UI_TYPE === ENVIRONMENT_TYPE_NOTIFICATION) {
+    if (this.hideAppHeader()) {
       return null
     }
 

ui/app/components/pending-tx/confirm-send-ether.js

@@ -28,6 +28,10 @@ const currencies = require('currency-formatter/currencies')
 
 const { MIN_GAS_PRICE_HEX } = require('../send/send-constants')
 const { SEND_ROUTE, DEFAULT_ROUTE } = require('../../routes')
+const {
+  ENVIRONMENT_TYPE_POPUP,
+  ENVIRONMENT_TYPE_NOTIFICATION,
+} = require('../../../../app/scripts/lib/enums')
 
 ConfirmSendEther.contextTypes = {
   t: PropTypes.func,
@@ -293,6 +297,14 @@ ConfirmSendEther.prototype.editTransaction = function (txMeta) {
   history.push(SEND_ROUTE)
 }
 
+ConfirmSendEther.prototype.renderNetworkDisplay = function () {
+  const windowType = window.METAMASK_UI_TYPE
+
+  return (windowType === ENVIRONMENT_TYPE_NOTIFICATION || windowType === ENVIRONMENT_TYPE_POPUP)
+    ? h(NetworkDisplay)
+    : null
+}
+
 ConfirmSendEther.prototype.render = function () {
   const {
     currentCurrency,
@@ -358,7 +370,7 @@ ConfirmSendEther.prototype.render = function () {
               visibility: !txMeta.lastGasPrice ? 'initial' : 'hidden',
             },
           }, 'Edit'),
-          window.METAMASK_UI_TYPE === 'notification' && h(NetworkDisplay),
+          this.renderNetworkDisplay(),
         ]),
         h('.page-container__title', title),
         h('.page-container__subtitle', subtitle),

ui/app/css/itcss/components/account-menu.scss

@@ -23,6 +23,10 @@
   &__icon {
     margin-left: 20px;
     cursor: pointer;
+
+    &--disabled {
+      cursor: initial;
+    }
   }
 
   &__header {

ui/app/css/itcss/components/header.scss

@@ -82,10 +82,6 @@
     display: flex;
     flex-flow: row nowrap;
     align-items: center;
-
-    .identicon {
-      cursor: pointer;
-    }
   }
 }