aboutsummaryrefslogtreecommitdiffstats
path: root/ui/app/components/pending-tx.js
diff options
context:
space:
mode:
Diffstat (limited to 'ui/app/components/pending-tx.js')
-rw-r--r--ui/app/components/pending-tx.js133
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 })
+}