Get nonce for showing retry button using ethQuery transaction count.

5 files changed, 51 insertions, 6 deletions

diff --git a/test/integration/lib/tx-list-items.js b/test/integration/lib/tx-list-items.js
index b7aca44d5..9075efe03 100644
--- a/test/integration/lib/tx-list-items.js
+++ b/test/integration/lib/tx-list-items.js
@@ -14,6 +14,11 @@ QUnit.test('renders list items successfully', (assert) => {
   })
 })
 
+global.ethQuery = global.ethQuery || {}
+global.ethQuery.getTransactionCount = (_, cb) => {
+  cb(null, '0x3')
+}
+
 async function runTxListItemsTest (assert, done) {
   console.log('*** start runTxListItemsTest')
   const selectState = await queryAsync($, 'select')
diff --git a/ui/app/actions.js b/ui/app/actions.js
index 4f71d911b..9edb3511a 100644
--- a/ui/app/actions.js
+++ b/ui/app/actions.js
@@ -143,6 +143,8 @@ var actions = {
   exportAccountComplete,
   SET_ACCOUNT_LABEL: 'SET_ACCOUNT_LABEL',
   setAccountLabel,
+  updateNetworkNonce,
+  SET_NETWORK_NONCE: 'SET_NETWORK_NONCE',
   // tx conf screen
   COMPLETED_TX: 'COMPLETED_TX',
   TRANSACTION_ERROR: 'TRANSACTION_ERROR',
@@ -2116,6 +2118,24 @@ function updateFeatureFlags (updatedFeatureFlags) {
   }
 }
 
+function setNetworkNonce (networkNonce) {
+  return {
+    type: actions.SET_NETWORK_NONCE,
+    value: networkNonce,
+  }
+}
+
+function updateNetworkNonce (address) {
+  return (dispatch) => {
+    return new Promise((resolve, reject) => {
+      global.ethQuery.getTransactionCount(address, (err, data) => {
+        dispatch(setNetworkNonce(data))
+        resolve(data)
+      })
+    })
+  }
+}
+
 function setMouseUserState (isMouseUser) {
   return {
     type: actions.SET_MOUSE_USER_STATE,
diff --git a/ui/app/components/tx-list-item.js b/ui/app/components/tx-list-item.js
index 7513ba267..474d62638 100644
--- a/ui/app/components/tx-list-item.js
+++ b/ui/app/components/tx-list-item.js
@@ -35,6 +35,7 @@ function mapStateToProps (state) {
     currentCurrency: getCurrentCurrency(state),
     contractExchangeRates: state.metamask.contractExchangeRates,
     selectedAddressTxList: state.metamask.selectedAddressTxList,
+    networkNonce: state.appState.networkNonce,
   }
 }
 
@@ -209,6 +210,7 @@ TxListItem.prototype.showRetryButton = function () {
     selectedAddressTxList,
     transactionId,
     txParams,
+    networkNonce,
   } = this.props
   if (!txParams) {
     return false
@@ -222,11 +224,7 @@ TxListItem.prototype.showRetryButton = function () {
   const currentTxIsLatestWithNonce = lastSubmittedTxWithCurrentNonce &&
     lastSubmittedTxWithCurrentNonce.id === transactionId
   if (currentSubmittedTxs.length > 0) {
-    const earliestSubmitted = currentSubmittedTxs.reduce((tx1, tx2) => {
-      if (tx1.submittedTime < tx2.submittedTime) return tx1
-      return tx2
-    })
-    currentTxSharesEarliestNonce = currentNonce === earliestSubmitted.txParams.nonce
+    currentTxSharesEarliestNonce = currentNonce === networkNonce
   }
 
   return currentTxSharesEarliestNonce && currentTxIsLatestWithNonce && Date.now() - transactionSubmittedTime > 30000
diff --git a/ui/app/components/tx-list.js b/ui/app/components/tx-list.js
index 554febcff..6e8d5d3eb 100644
--- a/ui/app/components/tx-list.js
+++ b/ui/app/components/tx-list.js
@@ -8,7 +8,7 @@ const selectors = require('../selectors')
 const TxListItem = require('./tx-list-item')
 const ShiftListItem = require('./shift-list-item')
 const { formatDate } = require('../util')
-const { showConfTxPage } = require('../actions')
+const { showConfTxPage, updateNetworkNonce } = require('../actions')
 const classnames = require('classnames')
 const { tokenInfoGetter } = require('../token-util')
 const { withRouter } = require('react-router-dom')
@@ -28,12 +28,14 @@ function mapStateToProps (state) {
   return {
     txsToRender: selectors.transactionsSelector(state),
     conversionRate: selectors.conversionRateSelector(state),
+    selectedAddress: selectors.getSelectedAddress(state),
   }
 }
 
 function mapDispatchToProps (dispatch) {
   return {
     showConfTxPage: ({ id }) => dispatch(showConfTxPage({ id })),
+    updateNetworkNonce: (address) => dispatch(updateNetworkNonce(address))
   }
 }
 
@@ -44,6 +46,20 @@ function TxList () {
 
 TxList.prototype.componentWillMount = function () {
   this.tokenInfoGetter = tokenInfoGetter()
+  this.props.updateNetworkNonce(this.props.selectedAddress)
+}
+
+TxList.prototype.componentDidUpdate = function (prevProps) {
+  const oldTxsToRender = prevProps.txsToRender
+  const {
+    txsToRender: newTxsToRender,
+    selectedAddress,
+    updateNetworkNonce,
+  } = this.props
+
+  if (newTxsToRender.length > oldTxsToRender.length) {
+    updateNetworkNonce(selectedAddress)
+  }
 }
 
 TxList.prototype.render = function () {
diff --git a/ui/app/reducers/app.js b/ui/app/reducers/app.js
index 50d8bcba7..e4e4c8581 100644
--- a/ui/app/reducers/app.js
+++ b/ui/app/reducers/app.js
@@ -65,6 +65,7 @@ function reduceApp (state, action) {
     buyView: {},
     isMouseUser: false,
     gasIsLoading: false,
+    networkNonce: null,
   }, state.appState)
 
   switch (action.type) {
@@ -701,6 +702,11 @@ function reduceApp (state, action) {
         gasIsLoading: false,
       })
 
+    case actions.SET_NETWORK_NONCE:
+      return extend(appState, {
+        networkNonce: action.value,
+      })
+
     default:
       return appState
   }