Restore History title on wide viewport (#8277)

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.
MetaMask · Apr 1, 2020 · 043ed6c · 043ed6c
1 parent 6b6615b
commit 043ed6c
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 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
@@ -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
@@ -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
@@ -189,7 +189,7 @@ export default class Home extends PureComponent {
                         <div className="home__balance-wrapper">
                           <TransactionViewBalance />
                         </div>
-                        <TransactionList />
+                        <TransactionList isWideViewport />
                       </div>
                     </>
                   )