Merge pull request #1677 from MetaMask/i1676-quickclick

Prevent Duplicate Submission with Quick Clicking

CHANGELOG.md

@@ -7,6 +7,7 @@
 - Fix bug where slowly mined txs would sometimes be incorrectly marked as failed.
 - Fix bug where badge count did not reflect personal_sign pending messages.
 - Seed word confirmation wording is now scarier.
+- Prevent users from submitting two duplicate transactions by disabling submit.
 
 ## 3.7.8 2017-6-12
 

ui/app/components/pending-tx.js

@@ -27,6 +27,7 @@ function PendingTx () {
   this.state = {
     valid: true,
     txData: null,
+    submitting: false,
   }
 }
 
@@ -316,7 +317,7 @@ PendingTx.prototype.render = function () {
             type: 'submit',
             value: 'ACCEPT',
             style: { marginLeft: '10px' },
-            disabled: insufficientBalance || !this.state.valid || !isValidAddress,
+            disabled: insufficientBalance || !this.state.valid || !isValidAddress || this.state.submitting,
           }),
 
           h('button.cancel.btn-red', {
@@ -412,11 +413,12 @@ PendingTx.prototype.onSubmit = function (event) {
   event.preventDefault()
   const txMeta = this.gatherTxMeta()
   const valid = this.checkValidity()
-  this.setState({ valid })
+  this.setState({ valid, submitting: true })
   if (valid && this.verifyGasParams()) {
     this.props.sendTransaction(txMeta, event)
   } else {
     this.props.dispatch(actions.displayWarning('Invalid Gas Parameters'))
+    this.setState({ submitting: false })
   }
 }