From 9f1f0bff1ea3267702a2ab75af293e6265e255e4 Mon Sep 17 00:00:00 2001 From: Dan Finlay Date: Wed, 22 Mar 2017 10:35:02 -0700 Subject: Some progress --- ui/app/components/hex-as-decimal-input.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) (limited to 'ui/app/components/hex-as-decimal-input.js') diff --git a/ui/app/components/hex-as-decimal-input.js b/ui/app/components/hex-as-decimal-input.js index c89ed0416..b2f1917f2 100644 --- a/ui/app/components/hex-as-decimal-input.js +++ b/ui/app/components/hex-as-decimal-input.js @@ -23,7 +23,7 @@ function HexAsDecimalInput () { HexAsDecimalInput.prototype.render = function () { const props = this.props - const { value, onChange } = props + const { value, onChange, min } = props const toEth = props.toEth const suffix = props.suffix const decimalValue = decimalize(value, toEth) @@ -38,8 +38,9 @@ HexAsDecimalInput.prototype.render = function () { textRendering: 'geometricPrecision', }, }, [ - h('input.ether-balance.ether-balance-amount', { + h('input.hex-input', { type: 'number', + min, style: extend({ display: 'block', textAlign: 'right', -- cgit v1.2.3 From 77907038ffe0edbe5e3472f98fd10d73b76464b8 Mon Sep 17 00:00:00 2001 From: Dan Finlay Date: Wed, 22 Mar 2017 15:14:33 -0700 Subject: Got basic validations working --- ui/app/components/hex-as-decimal-input.js | 114 ++++++++++++++++++++++-------- 1 file changed, 83 insertions(+), 31 deletions(-) (limited to 'ui/app/components/hex-as-decimal-input.js') diff --git a/ui/app/components/hex-as-decimal-input.js b/ui/app/components/hex-as-decimal-input.js index b2f1917f2..bbd86b254 100644 --- a/ui/app/components/hex-as-decimal-input.js +++ b/ui/app/components/hex-as-decimal-input.js @@ -9,6 +9,7 @@ module.exports = HexAsDecimalInput inherits(HexAsDecimalInput, Component) function HexAsDecimalInput () { + this.state = { invalid: null } Component.call(this) } @@ -23,50 +24,101 @@ function HexAsDecimalInput () { HexAsDecimalInput.prototype.render = function () { const props = this.props - const { value, onChange, min } = props + const state = this.state + + const { value, onChange, min, max } = props + const toEth = props.toEth const suffix = props.suffix const decimalValue = decimalize(value, toEth) const style = props.style return ( - h('.flex-row', { - style: { - alignItems: 'flex-end', - lineHeight: '13px', - fontFamily: 'Montserrat Light', - textRendering: 'geometricPrecision', - }, - }, [ - h('input.hex-input', { - type: 'number', - min, - style: extend({ - display: 'block', - textAlign: 'right', - backgroundColor: 'transparent', - border: '1px solid #bdbdbd', - - }, style), - value: decimalValue, - onChange: (event) => { - const hexString = (event.target.value === '') ? '' : hexify(event.target.value) - onChange(hexString) + h('.flex-column', [ + h('.flex-row', { + style: { + alignItems: 'flex-end', + lineHeight: '13px', + fontFamily: 'Montserrat Light', + textRendering: 'geometricPrecision', }, - }), - h('div', { + }, [ + h('input.hex-input', { + type: 'number', + required: true, + min: min, + max: max, + style: extend({ + display: 'block', + textAlign: 'right', + backgroundColor: 'transparent', + border: '1px solid #bdbdbd', + + }, style), + value: parseInt(decimalValue), + onChange: (event) => { + const target = event.target + const valid = target.checkValidity() + if (valid) { + this.setState({ invalid: null }) + } + const hexString = (event.target.value === '') ? '' : hexify(event.target.value) + onChange(hexString) + }, + onInvalid: (event) => { + const msg = this.constructWarning() + if (msg === state.invalid) { + return + } + this.setState({ invalid: msg }) + event.preventDefault() + }, + }), + h('div', { + style: { + color: ' #AEAEAE', + fontSize: '12px', + marginLeft: '5px', + marginRight: '6px', + width: '20px', + }, + }, suffix), + ]), + + state.invalid ? h('span.error', { style: { - color: ' #AEAEAE', - fontSize: '12px', - marginLeft: '5px', - marginRight: '6px', - width: '20px', + position: 'absolute', + right: '0px', + textAlign: 'right', + transform: 'translateY(26px)', + padding: '3px', + background: 'rgba(255,255,255,0.85)', + zIndex: '1', + textTransform: 'capitalize', + border: '2px solid #E20202', }, - }, suffix), + }, state.invalid) : null, ]) ) } +HexAsDecimalInput.prototype.constructWarning = function () { + const { name, min, max } = this.props + let message = name ? name + ' ' : '' + + if (min && max) { + message += `must be greater than or equal to ${min} and less than or equal to ${max}.` + } else if (min) { + message += `must be greater than or equal to ${min}.` + } else if (max) { + message += `must be less than or equal to ${max}.` + } else { + message += 'Invalid input.' + } + + return message +} + function hexify (decimalString) { const hexBN = new BN(decimalString, 10) return '0x' + hexBN.toString('hex') -- cgit v1.2.3 From bda821f14478b67b5fee6e862fc2a5458594e672 Mon Sep 17 00:00:00 2001 From: Dan Finlay Date: Thu, 23 Mar 2017 14:57:35 -0700 Subject: Override browser default validation message --- ui/app/components/hex-as-decimal-input.js | 1 + 1 file changed, 1 insertion(+) (limited to 'ui/app/components/hex-as-decimal-input.js') diff --git a/ui/app/components/hex-as-decimal-input.js b/ui/app/components/hex-as-decimal-input.js index bbd86b254..e39805787 100644 --- a/ui/app/components/hex-as-decimal-input.js +++ b/ui/app/components/hex-as-decimal-input.js @@ -72,6 +72,7 @@ HexAsDecimalInput.prototype.render = function () { } this.setState({ invalid: msg }) event.preventDefault() + return false }, }), h('div', { -- cgit v1.2.3 From 3400ed0955b7f31ddb0be182736fc1e7ae20d4da Mon Sep 17 00:00:00 2001 From: Dan Finlay Date: Thu, 23 Mar 2017 16:02:40 -0700 Subject: Fix a couple things Sorry apparently the gas fixes weren't in the last commit, but are in this one. As reported in previous commit, fixes a bug where initial estimate is not derived from the network. Also fixes a bug where clicking "reset" does not clear our custom validation warnings. --- ui/app/components/hex-as-decimal-input.js | 29 ++++++++++++++++++++++++----- 1 file changed, 24 insertions(+), 5 deletions(-) (limited to 'ui/app/components/hex-as-decimal-input.js') diff --git a/ui/app/components/hex-as-decimal-input.js b/ui/app/components/hex-as-decimal-input.js index e39805787..96a11b84f 100644 --- a/ui/app/components/hex-as-decimal-input.js +++ b/ui/app/components/hex-as-decimal-input.js @@ -56,12 +56,11 @@ HexAsDecimalInput.prototype.render = function () { }, style), value: parseInt(decimalValue), + onBlur: (event) => { + this.updateValidity(event) + }, onChange: (event) => { - const target = event.target - const valid = target.checkValidity() - if (valid) { - this.setState({ invalid: null }) - } + this.updateValidity(event) const hexString = (event.target.value === '') ? '' : hexify(event.target.value) onChange(hexString) }, @@ -103,6 +102,26 @@ HexAsDecimalInput.prototype.render = function () { ) } +HexAsDecimalInput.prototype.setValid = function (message) { + this.setState({ invalid: null }) +} + +HexAsDecimalInput.prototype.updateValidity = function (event) { + const target = event.target + const value = this.props.value + const newValue = target.value + + if (value === newValue) { + return + } + + const valid = target.checkValidity() + console.log('change triggered checking validity and found ' + valid) + if (valid) { + this.setState({ invalid: null }) + } +} + HexAsDecimalInput.prototype.constructWarning = function () { const { name, min, max } = this.props let message = name ? name + ' ' : '' -- cgit v1.2.3 From 9bea31a402d0b343bae6a9ef055efa2b83be9071 Mon Sep 17 00:00:00 2001 From: Dan Finlay Date: Thu, 23 Mar 2017 16:36:33 -0700 Subject: Fix initial tx fee estimation --- ui/app/components/hex-as-decimal-input.js | 1 - 1 file changed, 1 deletion(-) (limited to 'ui/app/components/hex-as-decimal-input.js') diff --git a/ui/app/components/hex-as-decimal-input.js b/ui/app/components/hex-as-decimal-input.js index 96a11b84f..e37aaa8c3 100644 --- a/ui/app/components/hex-as-decimal-input.js +++ b/ui/app/components/hex-as-decimal-input.js @@ -116,7 +116,6 @@ HexAsDecimalInput.prototype.updateValidity = function (event) { } const valid = target.checkValidity() - console.log('change triggered checking validity and found ' + valid) if (valid) { this.setState({ invalid: null }) } -- cgit v1.2.3