Fix account and network dropdowns in confirm screen

1 files changed, 39 insertions, 5 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
     }