Hide app-header when provider request pending (#5831)

2 files changed, 19 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 83ec4809d..83fcca620 100644
--- a/ui/app/components/app-header/app-header.component.js
+++ b/ui/app/components/app-header/app-header.component.js
@@ -23,6 +23,7 @@ export default class AppHeader extends PureComponent {
     toggleAccountMenu: PropTypes.func,
     selectedAddress: PropTypes.string,
     isUnlocked: PropTypes.bool,
+    providerRequests: PropTypes.array,
   }
 
   static contextTypes = {
@@ -40,12 +41,23 @@ export default class AppHeader extends PureComponent {
       : hideNetworkDropdown()
   }
 
+  /**
+   * Returns whether or not the user is in the middle of a confirmation prompt
+   *
+   * This accounts for both tx confirmations as well as provider approvals
+   *
+   * @returns {boolean}
+   */
   isConfirming () {
-    const { location } = this.props
-
-    return Boolean(matchPath(location.pathname, {
-      path: CONFIRM_TRANSACTION_ROUTE, exact: false,
-    }))
+    const { location, providerRequests } = this.props
+    const confirmTxRouteMatch = matchPath(location.pathname, {
+      exact: false,
+      path: CONFIRM_TRANSACTION_ROUTE,
+    })
+    const isConfirmingTx = Boolean(confirmTxRouteMatch)
+    const hasPendingProviderApprovals = Array.isArray(providerRequests) && providerRequests.length > 0
+
+    return isConfirmingTx || hasPendingProviderApprovals
   }
 
   renderAccountMenu () {
diff --git a/ui/app/components/app-header/app-header.container.js b/ui/app/components/app-header/app-header.container.js
index 30d3f8cc4..8b719bdf6 100644
--- a/ui/app/components/app-header/app-header.container.js
+++ b/ui/app/components/app-header/app-header.container.js
@@ -11,6 +11,7 @@ const mapStateToProps = state => {
   const {
     network,
     provider,
+    providerRequests,
     selectedAddress,
     isUnlocked,
   } = metamask
@@ -19,6 +20,7 @@ const mapStateToProps = state => {
     networkDropdownOpen,
     network,
     provider,
+    providerRequests,
     selectedAddress,
     isUnlocked,
   }