From e56b8c5055a19ccfb88ef71f4cef13fb6d05a54a Mon Sep 17 00:00:00 2001 From: Dan Date: Fri, 25 Aug 2017 13:48:52 -0230 Subject: Refactor tooltip to remove external lib; tooltip now updating gas fee in parent. --- ui/app/components/input-number.js | 57 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 57 insertions(+) create mode 100644 ui/app/components/input-number.js (limited to 'ui/app/components/input-number.js') diff --git a/ui/app/components/input-number.js b/ui/app/components/input-number.js new file mode 100644 index 000000000..5b4265459 --- /dev/null +++ b/ui/app/components/input-number.js @@ -0,0 +1,57 @@ +const Component = require('react').Component +const h = require('react-hyperscript') +const inherits = require('util').inherits +const findDOMNode = require('react-dom').findDOMNode + +module.exports = InputNumber + +inherits(InputNumber, Component) +function InputNumber () { + Component.call(this) + + this.state = { + value: 0, + } + + this.setValue = this.setValue.bind(this); +} + +InputNumber.prototype.componentWillMount == function () { + const { initValue = 0 } = this.props + + this.setState({ value: initValue }); +} + +InputNumber.prototype.setValue = function (newValue) { + const { fixed, min, onChange } = this.props + + if (fixed) newValue = Number(newValue.toFixed(4)) + + if (newValue >= min) { + this.setState({ value: newValue }) + onChange(newValue) + } +} + +InputNumber.prototype.render = function () { + const { unitLabel, step = 1, min, placeholder } = this.props + const { value } = this.state + + return h('div.customize-gas-input-wrapper', {}, [ + h('input.customize-gas-input', { + placeholder, + type: 'number', + value, + onChange: (e) => this.setValue(Number(e.target.value)) + }), + h('span.gas-tooltip-input-detail', {}, [unitLabel]), + h('div.gas-tooltip-input-arrows', {}, [ + h('i.fa.fa-angle-up', { + onClick: () => this.setValue(value + step) + }), + h('i.fa.fa-angle-down', { + onClick: () => this.setValue(value - step) + }), + ]), + ]) +} -- cgit v1.2.3 From c9e134a996f69367155aab416abb683fb82d4b9a Mon Sep 17 00:00:00 2001 From: Dan Date: Fri, 25 Aug 2017 20:53:30 -0230 Subject: Fully connect gas data in send form and tooltip to state; final styling improvements. Fully connect gas fields in send form and tooltip to state --- ui/app/components/input-number.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'ui/app/components/input-number.js') diff --git a/ui/app/components/input-number.js b/ui/app/components/input-number.js index 5b4265459..c8bdd5ec5 100644 --- a/ui/app/components/input-number.js +++ b/ui/app/components/input-number.js @@ -16,9 +16,9 @@ function InputNumber () { this.setValue = this.setValue.bind(this); } -InputNumber.prototype.componentWillMount == function () { +InputNumber.prototype.componentWillMount = function () { const { initValue = 0 } = this.props - + this.setState({ value: initValue }); } @@ -36,7 +36,7 @@ InputNumber.prototype.setValue = function (newValue) { InputNumber.prototype.render = function () { const { unitLabel, step = 1, min, placeholder } = this.props const { value } = this.state - + return h('div.customize-gas-input-wrapper', {}, [ h('input.customize-gas-input', { placeholder, -- cgit v1.2.3 From e7b3ef0708290a81dad5c469adaa6fab3f1c45b5 Mon Sep 17 00:00:00 2001 From: Dan Date: Tue, 29 Aug 2017 12:20:48 -0230 Subject: Lint fixes --- ui/app/components/input-number.js | 17 ++++++++--------- 1 file changed, 8 insertions(+), 9 deletions(-) (limited to 'ui/app/components/input-number.js') diff --git a/ui/app/components/input-number.js b/ui/app/components/input-number.js index c8bdd5ec5..e3bbaf380 100644 --- a/ui/app/components/input-number.js +++ b/ui/app/components/input-number.js @@ -1,7 +1,6 @@ const Component = require('react').Component const h = require('react-hyperscript') const inherits = require('util').inherits -const findDOMNode = require('react-dom').findDOMNode module.exports = InputNumber @@ -13,13 +12,13 @@ function InputNumber () { value: 0, } - this.setValue = this.setValue.bind(this); + this.setValue = this.setValue.bind(this) } InputNumber.prototype.componentWillMount = function () { const { initValue = 0 } = this.props - - this.setState({ value: initValue }); + + this.setState({ value: initValue }) } InputNumber.prototype.setValue = function (newValue) { @@ -34,23 +33,23 @@ InputNumber.prototype.setValue = function (newValue) { } InputNumber.prototype.render = function () { - const { unitLabel, step = 1, min, placeholder } = this.props + const { unitLabel, step = 1, placeholder } = this.props const { value } = this.state - + return h('div.customize-gas-input-wrapper', {}, [ h('input.customize-gas-input', { placeholder, type: 'number', value, - onChange: (e) => this.setValue(Number(e.target.value)) + onChange: (e) => this.setValue(Number(e.target.value)), }), h('span.gas-tooltip-input-detail', {}, [unitLabel]), h('div.gas-tooltip-input-arrows', {}, [ h('i.fa.fa-angle-up', { - onClick: () => this.setValue(value + step) + onClick: () => this.setValue(value + step), }), h('i.fa.fa-angle-down', { - onClick: () => this.setValue(value - step) + onClick: () => this.setValue(value - step), }), ]), ]) -- cgit v1.2.3 From 663cb758b345d7138b9e9c68489e1859dbfaa78e Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Mon, 11 Sep 2017 00:45:06 -0700 Subject: Style send token screen --- ui/app/components/input-number.js | 1 + 1 file changed, 1 insertion(+) (limited to 'ui/app/components/input-number.js') diff --git a/ui/app/components/input-number.js b/ui/app/components/input-number.js index e3bbaf380..63e841288 100644 --- a/ui/app/components/input-number.js +++ b/ui/app/components/input-number.js @@ -49,6 +49,7 @@ InputNumber.prototype.render = function () { onClick: () => this.setValue(value + step), }), h('i.fa.fa-angle-down', { + style: { cursor: 'pointer' }, onClick: () => this.setValue(value - step), }), ]), -- cgit v1.2.3 From 836bf2e1a38bb6917f1b7fe9db0604c8143c7adf Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Mon, 11 Sep 2017 23:18:54 -0700 Subject: Add frontend validation to send-token --- ui/app/components/input-number.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ui/app/components/input-number.js') diff --git a/ui/app/components/input-number.js b/ui/app/components/input-number.js index 63e841288..2824d77aa 100644 --- a/ui/app/components/input-number.js +++ b/ui/app/components/input-number.js @@ -22,7 +22,7 @@ InputNumber.prototype.componentWillMount = function () { } InputNumber.prototype.setValue = function (newValue) { - const { fixed, min, onChange } = this.props + const { fixed, min = -1, onChange } = this.props if (fixed) newValue = Number(newValue.toFixed(4)) -- cgit v1.2.3 From 803eaaf968161f16aaf72d59b979dfbb7fb9b352 Mon Sep 17 00:00:00 2001 From: Dan J Miller Date: Fri, 13 Oct 2017 16:19:22 -0400 Subject: [NewUI] SendV2-#8: Send container handles tokens; gas info dynamic from state (#2364) * Adds memo field to send-v2. * Vertical align transaction with flexbox. * Customize Gas UI * Remove internal state from InputNumber and fix use in gastooltip. * Move customize-gas-modal to its own folder and minor cleanup * Create send container, get account info from state, and make currency display more reusable * Adjusts send-v2 and container for send-token. Dynamically getting suggested gas prices. --- ui/app/components/input-number.js | 29 +++++++++-------------------- 1 file changed, 9 insertions(+), 20 deletions(-) (limited to 'ui/app/components/input-number.js') diff --git a/ui/app/components/input-number.js b/ui/app/components/input-number.js index 2824d77aa..16347fd5e 100644 --- a/ui/app/components/input-number.js +++ b/ui/app/components/input-number.js @@ -1,6 +1,7 @@ const Component = require('react').Component const h = require('react-hyperscript') const inherits = require('util').inherits +const { addCurrencies } = require('../conversion-util') module.exports = InputNumber @@ -8,49 +9,37 @@ inherits(InputNumber, Component) function InputNumber () { Component.call(this) - this.state = { - value: 0, - } - this.setValue = this.setValue.bind(this) } -InputNumber.prototype.componentWillMount = function () { - const { initValue = 0 } = this.props - - this.setState({ value: initValue }) -} - InputNumber.prototype.setValue = function (newValue) { - const { fixed, min = -1, onChange } = this.props + const { fixed, min = -1, max = Infinity, onChange } = this.props - if (fixed) newValue = Number(newValue.toFixed(4)) + newValue = Number(fixed ? newValue.toFixed(4) : newValue) - if (newValue >= min) { - this.setState({ value: newValue }) + if (newValue >= min && newValue <= max) { onChange(newValue) } } InputNumber.prototype.render = function () { - const { unitLabel, step = 1, placeholder } = this.props - const { value } = this.state + const { unitLabel, step = 1, placeholder, value = 0 } = this.props return h('div.customize-gas-input-wrapper', {}, [ h('input.customize-gas-input', { placeholder, type: 'number', - value, - onChange: (e) => this.setValue(Number(e.target.value)), + value: value, + onChange: (e) => this.setValue(e.target.value), }), h('span.gas-tooltip-input-detail', {}, [unitLabel]), h('div.gas-tooltip-input-arrows', {}, [ h('i.fa.fa-angle-up', { - onClick: () => this.setValue(value + step), + onClick: () => this.setValue(addCurrencies(value, step)), }), h('i.fa.fa-angle-down', { style: { cursor: 'pointer' }, - onClick: () => this.setValue(value - step), + onClick: () => this.setValue(addCurrencies(value, step * -1)), }), ]), ]) -- cgit v1.2.3 From 220da24f9ab4a57a10bc1fc3e249c511a98ecb46 Mon Sep 17 00:00:00 2001 From: Dan Date: Thu, 26 Oct 2017 13:36:34 -0230 Subject: Change min gas price to 0.1 GWEI --- ui/app/components/input-number.js | 26 ++++++++++++++++++++++---- 1 file changed, 22 insertions(+), 4 deletions(-) (limited to 'ui/app/components/input-number.js') diff --git a/ui/app/components/input-number.js b/ui/app/components/input-number.js index 16347fd5e..e28807c13 100644 --- a/ui/app/components/input-number.js +++ b/ui/app/components/input-number.js @@ -1,7 +1,12 @@ const Component = require('react').Component const h = require('react-hyperscript') const inherits = require('util').inherits -const { addCurrencies } = require('../conversion-util') +const { + addCurrencies, + conversionGTE, + conversionLTE, + toNegative, +} = require('../conversion-util') module.exports = InputNumber @@ -17,8 +22,21 @@ InputNumber.prototype.setValue = function (newValue) { newValue = Number(fixed ? newValue.toFixed(4) : newValue) - if (newValue >= min && newValue <= max) { + const newValueGreaterThanMin = conversionGTE( + { value: newValue, fromNumericBase: 'dec' }, + { value: min, fromNumericBase: 'hex' }, + ) + + const newValueLessThanMax = conversionLTE( + { value: newValue, fromNumericBase: 'dec' }, + { value: max, fromNumericBase: 'hex' }, + ) + if (newValueGreaterThanMin && newValueLessThanMax) { onChange(newValue) + } else if (!newValueGreaterThanMin) { + onChange(min) + } else if (!newValueLessThanMax) { + onChange(max) } } @@ -29,7 +47,7 @@ InputNumber.prototype.render = function () { h('input.customize-gas-input', { placeholder, type: 'number', - value: value, + value, onChange: (e) => this.setValue(e.target.value), }), h('span.gas-tooltip-input-detail', {}, [unitLabel]), @@ -39,7 +57,7 @@ InputNumber.prototype.render = function () { }), h('i.fa.fa-angle-down', { style: { cursor: 'pointer' }, - onClick: () => this.setValue(addCurrencies(value, step * -1)), + onClick: () => this.setValue(addCurrencies(value, toNegative(step))), }), ]), ]) -- cgit v1.2.3 From 716bbf67d7180ffe0f59d07484d30231ed5f5e49 Mon Sep 17 00:00:00 2001 From: Dan Date: Mon, 30 Oct 2017 19:16:56 -0230 Subject: Set gas price allows for WEI precision. --- ui/app/components/input-number.js | 17 ++++++++++++----- 1 file changed, 12 insertions(+), 5 deletions(-) (limited to 'ui/app/components/input-number.js') diff --git a/ui/app/components/input-number.js b/ui/app/components/input-number.js index e28807c13..da4d739aa 100644 --- a/ui/app/components/input-number.js +++ b/ui/app/components/input-number.js @@ -5,6 +5,7 @@ const { addCurrencies, conversionGTE, conversionLTE, + subtractCurrencies, toNegative, } = require('../conversion-util') @@ -17,18 +18,24 @@ function InputNumber () { this.setValue = this.setValue.bind(this) } +function isValidInput (text) { + const re = /^([1-9]\d*|0)(\.|\.\d*)?$/ + return re.test(text) +} + InputNumber.prototype.setValue = function (newValue) { + if (newValue && !isValidInput(newValue)) return const { fixed, min = -1, max = Infinity, onChange } = this.props - newValue = Number(fixed ? newValue.toFixed(4) : newValue) + newValue = fixed ? newValue.toFixed(4) : newValue const newValueGreaterThanMin = conversionGTE( - { value: newValue, fromNumericBase: 'dec' }, + { value: newValue || '0', fromNumericBase: 'dec' }, { value: min, fromNumericBase: 'hex' }, ) const newValueLessThanMax = conversionLTE( - { value: newValue, fromNumericBase: 'dec' }, + { value: newValue || '0', fromNumericBase: 'dec' }, { value: max, fromNumericBase: 'hex' }, ) if (newValueGreaterThanMin && newValueLessThanMax) { @@ -46,8 +53,8 @@ InputNumber.prototype.render = function () { return h('div.customize-gas-input-wrapper', {}, [ h('input.customize-gas-input', { placeholder, - type: 'number', value, + step, onChange: (e) => this.setValue(e.target.value), }), h('span.gas-tooltip-input-detail', {}, [unitLabel]), @@ -57,7 +64,7 @@ InputNumber.prototype.render = function () { }), h('i.fa.fa-angle-down', { style: { cursor: 'pointer' }, - onClick: () => this.setValue(addCurrencies(value, toNegative(step))), + onClick: () => this.setValue(subtractCurrencies(value, step)), }), ]), ]) -- cgit v1.2.3 From 8c6e1232e417f5a2974b5aa1cc479dac4925df63 Mon Sep 17 00:00:00 2001 From: Dan Date: Mon, 6 Nov 2017 16:14:46 -0330 Subject: Lint fixes. --- ui/app/components/input-number.js | 1 - 1 file changed, 1 deletion(-) (limited to 'ui/app/components/input-number.js') diff --git a/ui/app/components/input-number.js b/ui/app/components/input-number.js index da4d739aa..12dec2957 100644 --- a/ui/app/components/input-number.js +++ b/ui/app/components/input-number.js @@ -6,7 +6,6 @@ const { conversionGTE, conversionLTE, subtractCurrencies, - toNegative, } = require('../conversion-util') module.exports = InputNumber -- cgit v1.2.3 From bbdb35c35a03c42eb4a950756bf280e6e15513b5 Mon Sep 17 00:00:00 2001 From: Dan Date: Wed, 15 Nov 2017 15:00:35 -0330 Subject: Use currency input component in input number, to improve input behaviour in gas estimator --- ui/app/components/input-number.js | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) (limited to 'ui/app/components/input-number.js') diff --git a/ui/app/components/input-number.js b/ui/app/components/input-number.js index 12dec2957..fd8c5c309 100644 --- a/ui/app/components/input-number.js +++ b/ui/app/components/input-number.js @@ -1,6 +1,7 @@ const Component = require('react').Component const h = require('react-hyperscript') const inherits = require('util').inherits +const CurrencyInput = require('./currency-input') const { addCurrencies, conversionGTE, @@ -50,11 +51,13 @@ InputNumber.prototype.render = function () { const { unitLabel, step = 1, placeholder, value = 0 } = this.props return h('div.customize-gas-input-wrapper', {}, [ - h('input.customize-gas-input', { - placeholder, + h(CurrencyInput, { + className: 'customize-gas-input', value, - step, - onChange: (e) => this.setValue(e.target.value), + placeholder, + onInputChange: newValue => { + this.setValue(newValue) + }, }), h('span.gas-tooltip-input-detail', {}, [unitLabel]), h('div.gas-tooltip-input-arrows', {}, [ -- cgit v1.2.3