Ensure home screen does not render if there are unapproved txs (#6501)

* Ensure that the confirm screen renders before the home screen if there are unapproved txs.

* Only render confirm screen before home screen on mount.

1 files changed, 13 insertions, 6 deletions

diff --git a/ui/app/pages/home/home.component.js b/ui/app/pages/home/home.component.js
index 29d93a9fa..4d96c3131 100644
--- a/ui/app/pages/home/home.component.js
+++ b/ui/app/pages/home/home.component.js
@@ -23,21 +23,27 @@ export default class Home extends PureComponent {
     providerRequests: PropTypes.array,
   }
 
+  componentWillMount () {
+    const {
+      history,
+      unconfirmedTransactionsCount = 0,
+    } = this.props
+
+    if (unconfirmedTransactionsCount > 0) {
+      history.push(CONFIRM_TRANSACTION_ROUTE)
+    }
+  }
+
   componentDidMount () {
     const {
       history,
       suggestedTokens = {},
-      unconfirmedTransactionsCount = 0,
     } = this.props
 
     // suggested new tokens
     if (Object.keys(suggestedTokens).length > 0) {
         history.push(CONFIRM_ADD_SUGGESTED_TOKEN_ROUTE)
     }
-
-    if (unconfirmedTransactionsCount > 0) {
-      history.push(CONFIRM_TRANSACTION_ROUTE)
-    }
   }
 
   render () {
@@ -45,6 +51,7 @@ export default class Home extends PureComponent {
       forgottenPassword,
       seedWords,
       providerRequests,
+      history,
     } = this.props
 
     // seed words
@@ -69,7 +76,7 @@ export default class Home extends PureComponent {
             query="(min-width: 576px)"
             render={() => <WalletView />}
           />
-          <TransactionView />
+          { !history.location.pathname.match(/^\/confirm-transaction/) ? <TransactionView /> : null }
         </div>
       </div>
     )