Group transactions by nonce (#5886)

1 files changed, 31 insertions, 16 deletions

diff --git a/ui/app/components/transaction-list-item/transaction-list-item.container.js b/ui/app/components/transaction-list-item/transaction-list-item.container.js
index 61ecb04d0..73d9d8250 100644
--- a/ui/app/components/transaction-list-item/transaction-list-item.container.js
+++ b/ui/app/components/transaction-list-item/transaction-list-item.container.js
@@ -6,6 +6,7 @@ import TransactionListItem from './transaction-list-item.component'
 import { setSelectedToken, showModal, showSidebar } from '../../actions'
 import { hexToDecimal } from '../../helpers/conversions.util'
 import { getTokenData } from '../../helpers/transactions.util'
+import { increaseLastGasPrice } from '../../helpers/confirm-transaction/util'
 import { formatDate } from '../../util'
 import {
   fetchBasicGasAndTimeEstimates,
@@ -14,26 +15,13 @@ import {
   setCustomGasLimit,
 } from '../../ducks/gas.duck'
 
-const mapStateToProps = (state, ownProps) => {
-  const { transaction: { txParams: { value, nonce, data } = {}, time } = {} } = ownProps
-
-  const tokenData = data && getTokenData(data)
-  const nonceAndDate = nonce ? `#${hexToDecimal(nonce)} - ${formatDate(time)}` : formatDate(time)
-
-  return {
-    value,
-    nonceAndDate,
-    tokenData,
-  }
-}
-
 const mapDispatchToProps = dispatch => {
   return {
     fetchBasicGasAndTimeEstimates: () => dispatch(fetchBasicGasAndTimeEstimates()),
     fetchGasEstimates: (blockTime) => dispatch(fetchGasEstimates(blockTime)),
     setSelectedToken: tokenAddress => dispatch(setSelectedToken(tokenAddress)),
-    retryTransaction: (transaction) => {
-      dispatch(setCustomGasPrice(transaction.txParams.gasPrice))
+    retryTransaction: (transaction, gasPrice) => {
+      dispatch(setCustomGasPrice(gasPrice || transaction.txParams.gasPrice))
       dispatch(setCustomGasLimit(transaction.txParams.gas))
       dispatch(showSidebar({
         transitionName: 'sidebar-left',
@@ -47,8 +35,35 @@ const mapDispatchToProps = dispatch => {
   }
 }
 
+const mergeProps = (stateProps, dispatchProps, ownProps) => {
+  const { transactionGroup: { primaryTransaction, initialTransaction } = {} } = ownProps
+  const { retryTransaction, ...restDispatchProps } = dispatchProps
+  const { txParams: { nonce, data } = {}, time } = initialTransaction
+  const { txParams: { value } = {} } = primaryTransaction
+
+  const tokenData = data && getTokenData(data)
+  const nonceAndDate = nonce ? `#${hexToDecimal(nonce)} - ${formatDate(time)}` : formatDate(time)
+
+  return {
+    ...stateProps,
+    ...restDispatchProps,
+    ...ownProps,
+    value,
+    nonceAndDate,
+    tokenData,
+    transaction: initialTransaction,
+    primaryTransaction,
+    retryTransaction: (transactionId, gasPrice) => {
+      const { transactionGroup: { transactions = [] } } = ownProps
+      const transaction = transactions.find(tx => tx.id === transactionId) || {}
+      const increasedGasPrice = increaseLastGasPrice(gasPrice)
+      retryTransaction(transaction, increasedGasPrice)
+    },
+  }
+}
+
 export default compose(
   withRouter,
-  connect(mapStateToProps, mapDispatchToProps),
+  connect(null, mapDispatchToProps, mergeProps),
   withMethodData,
 )(TransactionListItem)