Update retry transaction logic to use network nonce

2 files changed, 39 insertions, 3 deletions

diff --git a/ui/app/components/transaction-list/transaction-list.component.js b/ui/app/components/transaction-list/transaction-list.component.js
index c1e1885f3..e30476d8c 100644
--- a/ui/app/components/transaction-list/transaction-list.component.js
+++ b/ui/app/components/transaction-list/transaction-list.component.js
@@ -20,6 +20,20 @@ export default class TransactionList extends PureComponent {
     completedTransactions: PropTypes.array,
     transactionToRetry: PropTypes.object,
     selectedToken: PropTypes.object,
+    updateNetworkNonce: PropTypes.func,
+  }
+
+  componentDidMount () {
+    this.props.updateNetworkNonce()
+  }
+
+  componentDidUpdate (prevProps) {
+    const { pendingTransactions: prevPendingTransactions = [] } = prevProps
+    const { pendingTransactions = [], updateNetworkNonce } = this.props
+
+    if (pendingTransactions.length > prevPendingTransactions.length) {
+      updateNetworkNonce()
+    }
   }
 
   shouldShowRetry = transaction => {
diff --git a/ui/app/components/transaction-list/transaction-list.container.js b/ui/app/components/transaction-list/transaction-list.container.js
index e1d19e787..1ec1f9ccf 100644
--- a/ui/app/components/transaction-list/transaction-list.container.js
+++ b/ui/app/components/transaction-list/transaction-list.container.js
@@ -7,22 +7,44 @@ import {
   submittedPendingTransactionsSelector,
   completedTransactionsSelector,
 } from '../../selectors/transactions'
+import { getSelectedAddress } from '../../selectors'
 import { selectedTokenSelector } from '../../selectors/tokens'
-import { getLatestSubmittedTxWithEarliestNonce } from '../../helpers/transactions.util'
+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: getLatestSubmittedTxWithEarliestNonce(submittedPendingTransactions),
+    transactionToRetry: getLatestSubmittedTxWithNonce(submittedPendingTransactions, networkNonce),
     selectedToken: selectedTokenSelector(state),
+    selectedAddress: getSelectedAddress(state),
+  }
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    updateNetworkNonce: address => dispatch(updateNetworkNonce(address)),
+  }
+}
+
+const mergeProps = (stateProps, dispatchProps, ownProps) => {
+  const { selectedAddress, ...restStateProps } = stateProps
+  const { updateNetworkNonce, ...restDispatchProps } = dispatchProps
+
+  return {
+    ...restStateProps,
+    ...restDispatchProps,
+    ...ownProps,
+    updateNetworkNonce: () => updateNetworkNonce(selectedAddress),
   }
 }
 
 export default compose(
   withRouter,
-  connect(mapStateToProps)
+  connect(mapStateToProps, mapDispatchToProps, mergeProps)
 )(TransactionList)