Move home notifications upwards in DOM (#8138)

The notifications displayed on the home screen were being passed
through the `TransactionView` and `TransactionList` components before
being rendered. This was unnecessary because the notifications are
absolutely positioned.

They are now rendered directly in the home component where they're
defined. A helper function has been written to improve readability.

ui/app/components/app/transaction-list/transaction-list.component.js

@@ -10,13 +10,11 @@ export default class TransactionList extends PureComponent {
   }
 
   static defaultProps = {
-    children: null,
     pendingTransactions: [],
     completedTransactions: [],
   }
 
   static propTypes = {
-    children: PropTypes.node,
     pendingTransactions: PropTypes.array,
     completedTransactions: PropTypes.array,
     selectedToken: PropTypes.object,
@@ -155,7 +153,6 @@ export default class TransactionList extends PureComponent {
     return (
       <div className="transaction-list">
         { this.renderTransactions() }
-        { this.props.children }
       </div>
     )
   }

ui/app/components/app/transaction-view/transaction-view.component.js

@@ -10,14 +10,6 @@ export default class TransactionView extends PureComponent {
     t: PropTypes.func,
   }
 
-  static propTypes = {
-    children: PropTypes.node,
-  }
-
-  static defaultProps = {
-    children: null,
-  }
-
   render () {
     return (
       <div className="transaction-view">
@@ -28,9 +20,7 @@ export default class TransactionView extends PureComponent {
         <div className="transaction-view__balance-wrapper">
           <TransactionViewBalance />
         </div>
-        <TransactionList>
+        <TransactionList />
-          { this.props.children }
-        </TransactionList>
       </div>
     )
   }

ui/app/pages/home/home.component.js

@@ -85,10 +85,9 @@ export default class Home extends PureComponent {
     }
   }
 
-  render () {
+  renderNotifications () {
     const { t } = this.context
     const {
-      forgottenPassword,
       history,
       hasDaiV1Token,
       shouldShowSeedPhraseReminder,
@@ -101,20 +100,7 @@ export default class Home extends PureComponent {
       threeBoxLastUpdated,
     } = this.props
 
-    if (forgottenPassword) {
-      return <Redirect to={{ pathname: RESTORE_VAULT_ROUTE }} />
-    }
-
     return (
-      <div className="main-container">
-        <div className="home__container">
-          <Media
-            query="(min-width: 576px)"
-            render={() => <WalletView />}
-          />
-          { !history.location.pathname.match(/^\/confirm-transaction/)
-            ? (
-              <TransactionView>
       <MultipleNotifications>
         {
           shouldShowSeedPhraseReminder
@@ -163,9 +149,32 @@ export default class Home extends PureComponent {
             : null
         }
       </MultipleNotifications>
-              </TransactionView>
+    )
+  }
+
+  render () {
+    const {
+      forgottenPassword,
+      history,
+    } = this.props
+
+    if (forgottenPassword) {
+      return <Redirect to={{ pathname: RESTORE_VAULT_ROUTE }} />
+    }
+
+    return (
+      <div className="main-container">
+        <div className="home__container">
+          <Media
+            query="(min-width: 576px)"
+            render={() => <WalletView />}
+          />
+          { !history.location.pathname.match(/^\/confirm-transaction/)
+            ? (
+              <TransactionView />
             )
             : null }
+          { this.renderNotifications() }
         </div>
       </div>
     )