Merge pull request #4255 from MetaMask/i4233-dropdowns

Fix account and network dropdowns in confirm screen

2 files changed, 52 insertions, 6 deletions

diff --git a/ui/app/components/app-header/app-header.component.js b/ui/app/components/app-header/app-header.component.js
index cf36e0d79..62b04562a 100644
--- a/ui/app/components/app-header/app-header.component.js
+++ b/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
     }
 
diff --git a/ui/app/components/pending-tx/confirm-send-ether.js b/ui/app/components/pending-tx/confirm-send-ether.js
index 16dbd273b..c07c96ccc 100644
--- a/ui/app/components/pending-tx/confirm-send-ether.js
+++ b/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),