Group transactions by nonce (#5886)

2 files changed, 29 insertions, 29 deletions

diff --git a/ui/app/components/transaction-list/transaction-list.component.js b/ui/app/components/transaction-list/transaction-list.component.js
index eef60186d..c1e3b3d1c 100644
--- a/ui/app/components/transaction-list/transaction-list.component.js
+++ b/ui/app/components/transaction-list/transaction-list.component.js
@@ -12,13 +12,11 @@ export default class TransactionList extends PureComponent {
   static defaultProps = {
     pendingTransactions: [],
     completedTransactions: [],
-    transactionToRetry: {},
   }
 
   static propTypes = {
     pendingTransactions: PropTypes.array,
     completedTransactions: PropTypes.array,
-    transactionToRetry: PropTypes.object,
     selectedToken: PropTypes.object,
     updateNetworkNonce: PropTypes.func,
     assetImages: PropTypes.object,
@@ -37,26 +35,34 @@ export default class TransactionList extends PureComponent {
     }
   }
 
-  shouldShowRetry = transaction => {
-    const { transactionToRetry } = this.props
-    const { id, submittedTime } = transaction
-    return id === transactionToRetry.id && Date.now() - submittedTime > 30000
+  shouldShowRetry = (transactionGroup, isEarliestNonce) => {
+    const { transactions = [], hasRetried } = transactionGroup
+    const [earliestTransaction = {}] = transactions
+    const { submittedTime } = earliestTransaction
+    return Date.now() - submittedTime > 30000 && isEarliestNonce && !hasRetried
+  }
+
+  shouldShowCancel (transactionGroup) {
+    const { hasCancelled } = transactionGroup
+    return !hasCancelled
   }
 
   renderTransactions () {
     const { t } = this.context
     const { pendingTransactions = [], completedTransactions = [] } = this.props
+    const pendingLength = pendingTransactions.length
+
     return (
       <div className="transaction-list__transactions">
         {
-          pendingTransactions.length > 0 && (
+          pendingLength > 0 && (
             <div className="transaction-list__pending-transactions">
               <div className="transaction-list__header">
                 { `${t('queue')} (${pendingTransactions.length})` }
               </div>
               {
-                pendingTransactions.map((transaction, index) => (
-                  this.renderTransaction(transaction, index, true)
+                pendingTransactions.map((transactionGroup, index) => (
+                  this.renderTransaction(transactionGroup, index, true, index === pendingLength - 1)
                 ))
               }
             </div>
@@ -68,8 +74,8 @@ export default class TransactionList extends PureComponent {
           </div>
           {
             completedTransactions.length > 0
-              ? completedTransactions.map((transaction, index) => (
-                  this.renderTransaction(transaction, index)
+              ? completedTransactions.map((transactionGroup, index) => (
+                  this.renderTransaction(transactionGroup, index)
                 ))
               : this.renderEmpty()
           }
@@ -78,21 +84,22 @@ export default class TransactionList extends PureComponent {
     )
   }
 
-  renderTransaction (transaction, index, showCancel) {
+  renderTransaction (transactionGroup, index, isPendingTx = false, isEarliestNonce = false) {
     const { selectedToken, assetImages } = this.props
+    const { transactions = [] } = transactionGroup
 
-    return transaction.key === TRANSACTION_TYPE_SHAPESHIFT
+    return transactions[0].key === TRANSACTION_TYPE_SHAPESHIFT
       ? (
         <ShapeShiftTransactionListItem
-          { ...transaction }
+          { ...transactions[0] }
           key={`shapeshift${index}`}
         />
       ) : (
         <TransactionListItem
-          transaction={transaction}
-          key={transaction.id}
-          showRetry={this.shouldShowRetry(transaction)}
-          showCancel={showCancel}
+          transactionGroup={transactionGroup}
+          key={`${transactionGroup.nonce}:${index}`}
+          showRetry={isPendingTx && this.shouldShowRetry(transactionGroup, isEarliestNonce)}
+          showCancel={isPendingTx && this.shouldShowCancel(transactionGroup)}
           token={selectedToken}
           assetImages={assetImages}
         />
diff --git a/ui/app/components/transaction-list/transaction-list.container.js b/ui/app/components/transaction-list/transaction-list.container.js
index 2e946c67d..e70ca15c5 100644
--- a/ui/app/components/transaction-list/transaction-list.container.js
+++ b/ui/app/components/transaction-list/transaction-list.container.js
@@ -3,24 +3,17 @@ import { withRouter } from 'react-router-dom'
 import { compose } from 'recompose'
 import TransactionList from './transaction-list.component'
 import {
-  pendingTransactionsSelector,
-  submittedPendingTransactionsSelector,
-  completedTransactionsSelector,
+  nonceSortedCompletedTransactionsSelector,
+  nonceSortedPendingTransactionsSelector,
 } from '../../selectors/transactions'
 import { getSelectedAddress, getAssetImages } from '../../selectors'
 import { selectedTokenSelector } from '../../selectors/tokens'
-import { getLatestSubmittedTxWithNonce } from '../../helpers/transactions.util'
 import { updateNetworkNonce } from '../../actions'
 
 const mapStateToProps = state => {
-  const pendingTransactions = pendingTransactionsSelector(state)
-  const submittedPendingTransactions = submittedPendingTransactionsSelector(state)
-  const networkNonce = state.appState.networkNonce
-
   return {
-    completedTransactions: completedTransactionsSelector(state),
-    pendingTransactions,
-    transactionToRetry: getLatestSubmittedTxWithNonce(submittedPendingTransactions, networkNonce),
+    completedTransactions: nonceSortedCompletedTransactionsSelector(state),
+    pendingTransactions: nonceSortedPendingTransactionsSelector(state),
     selectedToken: selectedTokenSelector(state),
     selectedAddress: getSelectedAddress(state),
     assetImages: getAssetImages(state),