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.

2 files changed, 18 insertions, 8 deletions

diff --git a/ui/app/pages/confirm-transaction-base/confirm-transaction-base.component.js b/ui/app/pages/confirm-transaction-base/confirm-transaction-base.component.js
index 1cbe5951d..678f64844 100644
--- a/ui/app/pages/confirm-transaction-base/confirm-transaction-base.component.js
+++ b/ui/app/pages/confirm-transaction-base/confirm-transaction-base.component.js
@@ -99,15 +99,18 @@ export default class ConfirmTransactionBase extends Component {
     submitError: null,
   }
 
-  componentDidUpdate () {
+  componentDidUpdate (prevProps) {
     const {
       transactionStatus,
       showTransactionConfirmedModal,
       history,
       clearConfirmTransaction,
     } = this.props
+    const { transactionStatus: prevTxStatus } = prevProps
+    const statusUpdated = transactionStatus !== prevTxStatus
+    const txDroppedOrConfirmed = transactionStatus === DROPPED_STATUS || transactionStatus === CONFIRMED_STATUS
 
-    if (transactionStatus === DROPPED_STATUS || transactionStatus === CONFIRMED_STATUS) {
+    if (statusUpdated && txDroppedOrConfirmed) {
       showTransactionConfirmedModal({
         onSubmit: () => {
           clearConfirmTransaction()
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>
     )