Group transactions by nonce (#5886)

3 files changed, 68 insertions, 43 deletions

diff --git a/ui/app/components/transaction-list-item/index.scss b/ui/app/components/transaction-list-item/index.scss
index 449974734..9e73a546c 100644
--- a/ui/app/components/transaction-list-item/index.scss
+++ b/ui/app/components/transaction-list-item/index.scss
@@ -117,12 +117,6 @@
     }
   }
 
-  &__details-container {
-    padding: 8px 16px 16px;
-    background: #f3f4f7;
-    width: 100%;
-  }
-
   &__expander {
     max-height: 0px;
     width: 100%;
diff --git a/ui/app/components/transaction-list-item/transaction-list-item.component.js b/ui/app/components/transaction-list-item/transaction-list-item.component.js
index 5334484db..ecd8b4cef 100644
--- a/ui/app/components/transaction-list-item/transaction-list-item.component.js
+++ b/ui/app/components/transaction-list-item/transaction-list-item.component.js
@@ -18,6 +18,7 @@ export default class TransactionListItem extends PureComponent {
     history: PropTypes.object,
     methodData: PropTypes.object,
     nonceAndDate: PropTypes.string,
+    primaryTransaction: PropTypes.object,
     retryTransaction: PropTypes.func,
     setSelectedToken: PropTypes.func,
     showCancelModal: PropTypes.func,
@@ -26,6 +27,7 @@ export default class TransactionListItem extends PureComponent {
     token: PropTypes.object,
     tokenData: PropTypes.object,
     transaction: PropTypes.object,
+    transactionGroup: PropTypes.object,
     value: PropTypes.string,
     fetchBasicGasAndTimeEstimates: PropTypes.func,
     fetchGasEstimates: PropTypes.func,
@@ -51,36 +53,48 @@ export default class TransactionListItem extends PureComponent {
     this.setState({ showTransactionDetails: !showTransactionDetails })
   }
 
-  handleCancel = () => {
-    const { transaction: { id, txParams: { gasPrice } } = {}, showCancelModal } = this.props
-    showCancelModal(id, gasPrice)
+  handleCancel = id => {
+    const {
+      primaryTransaction: { txParams: { gasPrice } } = {},
+      transaction: { id: initialTransactionId },
+      showCancelModal,
+    } = this.props
+
+    const cancelId = id || initialTransactionId
+    showCancelModal(cancelId, gasPrice)
   }
 
-  handleRetry = () => {
+  /**
+   * @name handleRetry
+   * @description Resubmits a transaction. Retrying a transaction within a list of transactions with
+   * the same nonce requires keeping the original value while increasing the gas price of the latest
+   * transaction.
+   * @param {number} id - Transaction id
+   */
+  handleRetry = id => {
     const {
-      transaction: { txParams: { to } = {} },
+      primaryTransaction: { txParams: { gasPrice } } = {},
+      transaction: { txParams: { to } = {}, id: initialTransactionId },
       methodData: { name } = {},
       setSelectedToken,
+      retryTransaction,
+      fetchBasicGasAndTimeEstimates,
+      fetchGasEstimates,
     } = this.props
 
     if (name === TOKEN_METHOD_TRANSFER) {
       setSelectedToken(to)
     }
 
-    return this.resubmit()
-  }
+    const retryId = id || initialTransactionId
 
-  resubmit () {
-    const { transaction, retryTransaction, fetchBasicGasAndTimeEstimates, fetchGasEstimates } = this.props
-    fetchBasicGasAndTimeEstimates().then(basicEstimates => {
-      fetchGasEstimates(basicEstimates.blockTime)
-    }).then(() => {
-      retryTransaction(transaction)
-    })
+    return fetchBasicGasAndTimeEstimates()
+      .then(basicEstimates => fetchGasEstimates(basicEstimates.blockTime))
+      .then(retryTransaction(retryId, gasPrice))
   }
 
   renderPrimaryCurrency () {
-    const { token, transaction: { txParams: { data } = {} } = {}, value } = this.props
+    const { token, primaryTransaction: { txParams: { data } = {} } = {}, value } = this.props
 
     return token
       ? (
@@ -118,12 +132,14 @@ export default class TransactionListItem extends PureComponent {
   render () {
     const {
       assetImages,
+      transaction,
       methodData,
       nonceAndDate,
+      primaryTransaction,
       showCancel,
       showRetry,
       tokenData,
-      transaction,
+      transactionGroup,
     } = this.props
     const { txParams = {} } = transaction
     const { showTransactionDetails } = this.state
@@ -156,11 +172,11 @@ export default class TransactionListItem extends PureComponent {
           </div>
           <TransactionStatus
             className="transaction-list-item__status"
-            statusKey={getStatusKey(transaction)}
+            statusKey={getStatusKey(primaryTransaction)}
             title={(
-              (transaction.err && transaction.err.rpc)
-                ? transaction.err.rpc.message
-                : transaction.err && transaction.err.message
+              (primaryTransaction.err && primaryTransaction.err.rpc)
+                ? primaryTransaction.err.rpc.message
+                : primaryTransaction.err && primaryTransaction.err.message
             )}
           />
           { this.renderPrimaryCurrency() }
@@ -173,7 +189,7 @@ export default class TransactionListItem extends PureComponent {
             showTransactionDetails && (
               <div className="transaction-list-item__details-container">
                 <TransactionListItemDetails
-                  transaction={transaction}
+                  transactionGroup={transactionGroup}
                   onRetry={this.handleRetry}
                   showRetry={showRetry && methodData.done}
                   onCancel={this.handleCancel}
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)