From 22e82dc881ffa8a21ec9b2979b879d713835c790 Mon Sep 17 00:00:00 2001
From: Mark Stacey <markjstacey@gmail.com>
Date: Wed, 1 Apr 2020 17:41:07 -0300
Subject: [PATCH] Restore `History` title on wide viewport

The `History` title above the transaction history was changed in #8264
to only show when there are pending transactions, because it was
redundant to show an additional `History` title below a tab called
`History`. It was preserved when there were pending transactions
because the pending transactions are shown first in the list, followed
by the history, so the title served to divide the two lists.

This ended up breaking the fullscreen view though, which doesn't use
tabs yet. It has been updated to always show on fullscreen.
---
 .../transaction-list.component.js                 | 15 +++++++++------
 .../transaction-list.container.js                 | 13 ++++++++++++-
 ui/app/pages/home/home.component.js               |  2 +-
 3 files changed, 22 insertions(+), 8 deletions(-)

diff --git a/ui/app/components/app/transaction-list/transaction-list.component.js b/ui/app/components/app/transaction-list/transaction-list.component.js
index 0074225d1ec2..3f4a6210e3bd 100644
--- a/ui/app/components/app/transaction-list/transaction-list.component.js
+++ b/ui/app/components/app/transaction-list/transaction-list.component.js
@@ -15,6 +15,7 @@ export default class TransactionList extends PureComponent {
   }
 
   static propTypes = {
+    isWideViewport: PropTypes.bool.isRequired,
     pendingTransactions: PropTypes.array,
     completedTransactions: PropTypes.array,
     selectedToken: PropTypes.object,
@@ -80,7 +81,7 @@ export default class TransactionList extends PureComponent {
 
   renderTransactions () {
     const { t } = this.context
-    const { pendingTransactions = [], completedTransactions = [] } = this.props
+    const { isWideViewport, pendingTransactions = [], completedTransactions = [] } = this.props
     const pendingLength = pendingTransactions.length
 
     return (
@@ -101,11 +102,13 @@ export default class TransactionList extends PureComponent {
         }
         <div className="transaction-list__completed-transactions">
           {
-            pendingLength > 0 && (
-              <div className="transaction-list__header">
-                { t('history') }
-              </div>
-            )
+            isWideViewport || pendingLength > 0
+              ? (
+                <div className="transaction-list__header">
+                  { t('history') }
+                </div>
+              )
+              : null
           }
           {
             completedTransactions.length > 0
diff --git a/ui/app/components/app/transaction-list/transaction-list.container.js b/ui/app/components/app/transaction-list/transaction-list.container.js
index a6f08603f22f..036d1e8b92eb 100644
--- a/ui/app/components/app/transaction-list/transaction-list.container.js
+++ b/ui/app/components/app/transaction-list/transaction-list.container.js
@@ -1,4 +1,5 @@
 import { connect } from 'react-redux'
+import PropTypes from 'prop-types'
 import TransactionList from './transaction-list.component'
 import {
   nonceSortedCompletedTransactionsSelector,
@@ -43,4 +44,14 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => {
   }
 }
 
-export default connect(mapStateToProps, mapDispatchToProps, mergeProps)(TransactionList)
+const TransactionListContainer = connect(mapStateToProps, mapDispatchToProps, mergeProps)(TransactionList)
+
+TransactionListContainer.propTypes = {
+  isWideViewport: PropTypes.bool,
+}
+
+TransactionListContainer.defaultProps = {
+  isWideViewport: false,
+}
+
+export default TransactionListContainer
diff --git a/ui/app/pages/home/home.component.js b/ui/app/pages/home/home.component.js
index a60ff2eba3ff..475c15adc858 100644
--- a/ui/app/pages/home/home.component.js
+++ b/ui/app/pages/home/home.component.js
@@ -189,7 +189,7 @@ export default class Home extends PureComponent {
                         <div className="home__balance-wrapper">
                           <TransactionViewBalance />
                         </div>
-                        <TransactionList />
+                        <TransactionList isWideViewport />
                       </div>
                     </>
                   )