Got basic validations working

1 files changed, 77 insertions, 56 deletions

diff --git a/ui/app/components/pending-tx.js b/ui/app/components/pending-tx.js
index 2ab6f25a9..f6fb6f85e 100644
--- a/ui/app/components/pending-tx.js
+++ b/ui/app/components/pending-tx.js
@@ -17,11 +17,15 @@ function mapStateToProps (state) {
 inherits(PendingTx, Component)
 function PendingTx () {
   Component.call(this)
+  this.state = { valid: true }
 }
 
 PendingTx.prototype.render = function () {
   const props = this.props
-  const newProps = extend(props, {ref: 'details'})
+  const newProps = extend(props, {
+    ref: 'details',
+    validChanged: this.validChanged.bind(this),
+  })
   const txData = props.txData
 
   return (
@@ -30,70 +34,87 @@ PendingTx.prototype.render = function () {
       key: txData.id,
     }, [
 
-      // tx info
-      h(PendingTxDetails, newProps),
-
-      h('style', `
-        .conf-buttons button {
-          margin-left: 10px;
-          text-transform: uppercase;
-        }
-      `),
-
-      txData.simulationFails ?
-        h('.error', {
-          style: {
-            marginLeft: 50,
-            fontSize: '0.9em',
-          },
-        }, 'Transaction Error. Exception thrown in contract code.')
-      : null,
-
-      props.insufficientBalance ?
-        h('span.error', {
-          style: {
-            marginLeft: 50,
-            fontSize: '0.9em',
-          },
-        }, 'Insufficient balance for transaction')
-      : null,
-
-      // send + cancel
-      h('.flex-row.flex-space-around.conf-buttons', {
-        style: {
-          display: 'flex',
-          justifyContent: 'flex-end',
-          margin: '14px 25px',
+      h('form#pending-tx-form', {
+        onSubmit: (event) => {
+          event.preventDefault()
+          const form = document.querySelector('form#pending-tx-form')
+          const valid = form.checkValidity()
+          this.setState({ valid })
+
+          if (valid && this.refs.details.verifyGasParams()) {
+            props.sendTransaction(txData, event)
+          } else {
+            this.props.dispatch(actions.displayWarning('Invalid Gas Parameters'))
+          }
         },
       }, [
 
+        // tx info
+        h(PendingTxDetails, newProps),
+
+        h('style', `
+          .conf-buttons button {
+            margin-left: 10px;
+            text-transform: uppercase;
+          }
+        `),
+
+        txData.simulationFails ?
+          h('.error', {
+            style: {
+              marginLeft: 50,
+              fontSize: '0.9em',
+            },
+          }, 'Transaction Error. Exception thrown in contract code.')
+        : null,
+
         props.insufficientBalance ?
-          h('button', {
-            onClick: props.buyEth,
-          }, 'Buy Ether')
+          h('span.error', {
+            style: {
+              marginLeft: 50,
+              fontSize: '0.9em',
+            },
+          }, 'Insufficient balance for transaction')
         : null,
 
-        h('button', {
-          onClick: () => {
-            this.refs.details.resetGasFields()
-          },
-        }, 'Reset'),
-
-        h('button.confirm.btn-green', {
-          disabled: props.insufficientBalance,
-          onClick: (txData, event) => {
-            if (this.refs.details.verifyGasParams()) {
-              props.sendTransaction(txData, event)
-            } else {
-              this.props.dispatch(actions.displayWarning('Invalid Gas Parameters'))
-            }
+        // send + cancel
+        h('.flex-row.flex-space-around.conf-buttons', {
+          style: {
+            display: 'flex',
+            justifyContent: 'flex-end',
+            margin: '14px 25px',
           },
-        }, 'Accept'),
+        }, [
+
 
-        h('button.cancel.btn-red', {
-          onClick: props.cancelTransaction,
-        }, 'Reject'),
+          props.insufficientBalance ?
+            h('button', {
+              onClick: props.buyEth,
+            }, 'Buy Ether')
+          : null,
+
+          h('button', {
+            onClick: () => {
+              this.refs.details.resetGasFields()
+            },
+          }, 'Reset'),
+
+          h('input.confirm.btn-green', {
+            type: 'submit',
+            value: 'ACCEPT',
+            style: { marginLeft: '10px' },
+            disabled: props.insufficientBalance || !this.state.valid,
+          }),
+
+          h('button.cancel.btn-red', {
+            onClick: props.cancelTransaction,
+          }, 'Reject'),
+        ]),
       ]),
     ])
   )
 }
+
+PendingTx.prototype.validChanged = function (newValid) {
+  this.setState({ valid: newValid })
+}