Enables Cancel button in confirmation screen.

2 files changed, 12 insertions, 2 deletions

diff --git a/ui/app/components/pending-tx.js b/ui/app/components/pending-tx.js
index 0bc995afb..69dd2107a 100644
--- a/ui/app/components/pending-tx.js
+++ b/ui/app/components/pending-tx.js
@@ -48,6 +48,7 @@ function mapDispatchToProps (dispatch) {
   return {
     setCurrentCurrencyToUSD: () => dispatch(actions.setCurrentCurrency('USD')),
     backToAccountDetail: address => dispatch(actions.backToAccountDetail(address)),
+    cancelTransaction: ({ id }) => dispatch(actions.cancelTx({ id }))
   }
 }
 
@@ -306,7 +307,7 @@ PendingTx.prototype.render = function () {
       ]),
 
       h('form#pending-tx-form.flex-column.flex-center', {
-        onSubmit: this.onSubmit,
+        // onSubmit: this.onSubmit,
       }, [
         // Reset Button
         // h('button', {
@@ -320,7 +321,9 @@ PendingTx.prototype.render = function () {
         h('button.confirm-screen-confirm-button', ['CONFIRM']),
 
         // Cancel Button
-        h('button.cancel.btn-light.confirm-screen-cancel-button', {}, 'CANCEL'),
+        h('div.cancel.btn-light.confirm-screen-cancel-button', {
+          onClick: (event) => this.cancel(event, txMeta),
+        }, 'CANCEL'),
       ]),
     ])
   )
@@ -366,6 +369,7 @@ PendingTx.prototype.onSubmit = function (event) {
   const txMeta = this.gatherTxMeta()
   const valid = this.checkValidity()
   this.setState({ valid, submitting: true })
+
   if (valid && this.verifyGasParams()) {
     this.props.sendTransaction(txMeta, event)
   } else {
@@ -374,6 +378,11 @@ PendingTx.prototype.onSubmit = function (event) {
   }
 }
 
+PendingTx.prototype.cancel = function (event, txMeta) {
+  event.preventDefault()
+  this.props.cancelTransaction(txMeta)
+}
+
 PendingTx.prototype.checkValidity = function () {
   const form = this.getFormEl()
   const valid = form.checkValidity()
diff --git a/ui/app/css/itcss/components/confirm.scss b/ui/app/css/itcss/components/confirm.scss
index 12322462e..e8169ffea 100644
--- a/ui/app/css/itcss/components/confirm.scss
+++ b/ui/app/css/itcss/components/confirm.scss
@@ -249,6 +249,7 @@ section .confirm-screen-account-number,
   padding-bottom: 15px;
   font-size: 16px;
   box-shadow: none;
+  cursor: pointer;
 }
 
 #pending-tx-form {