Merge pull request #385 from poanetwork/vb-show-pendinng-nonce

Display value of current pending tx's nonce on send tx screen

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 ## Current Master
 
+- [#385](https://github.com/poanetwork/nifty-wallet/pull/385) - (Feature) Display value of current pending tx's nonce on send tx screen
 - [#384](https://github.com/poanetwork/nifty-wallet/pull/384) - (Fix) placement of HW Connect button title
 - [#383](https://github.com/poanetwork/nifty-wallet/pull/383) - (Chore) Replace POA-ETH Binance link to POA-BTC
 - [#382](https://github.com/poanetwork/nifty-wallet/pull/382) - (Fix) replace vulnerable npm dependencies with newer versions of packages, update chromedriver to match the latest Google Chrome release

app/scripts/metamask-controller.js

@@ -444,6 +444,7 @@ module.exports = class MetamaskController extends EventEmitter {
       markPasswordForgotten: this.markPasswordForgotten.bind(this),
       unMarkPasswordForgotten: this.unMarkPasswordForgotten.bind(this),
       getGasPrice: (cb) => cb(null, this.getGasPrice()),
+      getPendingNonce: nodeify(this.getPendingNonce, this),
 
       // shapeshift
       createShapeShiftTx: this.createShapeShiftTx.bind(this),

old-ui/app/components/send/send.js

@@ -29,6 +29,18 @@ const optionalDataValueStyle = {
 }
 
 class SendTransactionScreen extends PersistentForm {
+  constructor (props) {
+    super(props)
+    this.state = {
+      pendingNonce: null,
+    }
+  }
+
+  async getPendingNonce () {
+    const pendingNonce = await this.props.dispatch(actions.getPendingNonce(this.props.address))
+    this.setState({pendingNonce: pendingNonce})
+  }
+
   render () {
     this.persistentFormParentId = 'send-tx-form'
 
@@ -117,12 +129,17 @@ class SendTransactionScreen extends PersistentForm {
             dataset={{
               persistentFormid: 'tx-custom-nonce',
             }}
+            defaultValue={this.state.pendingNonce}
           />
         </section>
       </div>
     )
   }
 
+  componentDidMount () {
+    this.getPendingNonce()
+  }
+
   componentWillUnmount () {
     this.props.dispatch(actions.displayWarning(''))
   }

ui/app/actions.js

@@ -188,6 +188,7 @@ const actions = {
   signTokenTx: signTokenTx,
   updateTransaction,
   updateAndApproveTx,
+  getPendingNonce,
   cancelTx,
   cancelTxs,
   completedTx: completedTx,
@@ -1304,6 +1305,24 @@ function updateAndApproveTx (txData) {
   }
 }
 
+function getPendingNonce (address) {
+  log.info('actions: getPendingNonce')
+  return (dispatch) => {
+    log.debug(`actions calling background.getPendingNonce`)
+    dispatch(actions.showLoadingIndication())
+    return new Promise((resolve, reject) => {
+      background.getPendingNonce(address, (err, nonce) => {
+        if (err) {
+          dispatch(actions.displayWarning(err.message))
+          return reject(err)
+        }
+        dispatch(actions.hideLoadingIndication())
+        resolve(nonce)
+      })
+    })
+  }
+}
+
 function completedTx (id) {
   return {
     type: actions.COMPLETED_TX,