From 6bc8cc819a16118acc010d0efdec90afbda14590 Mon Sep 17 00:00:00 2001 From: Dan Date: Mon, 14 May 2018 11:00:50 -0230 Subject: Merge branch 'develop' into i3725-refactor-send-component- --- ui/app/components/send/currency-display.js | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) (limited to 'ui/app/components/send/currency-display.js') diff --git a/ui/app/components/send/currency-display.js b/ui/app/components/send/currency-display.js index a7bd5d7ea..90fb2b66c 100644 --- a/ui/app/components/send/currency-display.js +++ b/ui/app/components/send/currency-display.js @@ -89,7 +89,6 @@ CurrencyDisplay.prototype.render = function () { } = this.props const valueToRender = this.getValueToRender() - const convertedValueToRender = this.getConvertedValueToRender(valueToRender) return h('div', { @@ -97,22 +96,24 @@ CurrencyDisplay.prototype.render = function () { style: { borderColor: inError ? 'red' : null, }, - onClick: () => this.currencyInput.focus(), + onClick: () => this.currencyInput && this.currencyInput.focus(), }, [ h('div.currency-display__primary-row', [ h('div.currency-display__input-wrapper', [ - h(CurrencyInput, { + h(readOnly ? 'input' : CurrencyInput, { className: primaryBalanceClassName, value: `${valueToRender}`, placeholder: '0', readOnly, - onInputChange: newValue => { - handleChange(this.getAmount(newValue)) - }, - inputRef: input => { this.currencyInput = input }, + ...(!readOnly ? { + onInputChange: newValue => { + handleChange(this.getAmount(newValue)) + }, + inputRef: input => { this.currencyInput = input }, + } : {}), }), h('span.currency-display__currency-symbol', primaryCurrency), -- cgit From ea28c8a437cddd0c2cb69809a23f1f9a0ceba0dc Mon Sep 17 00:00:00 2001 From: Dan Date: Mon, 28 May 2018 14:11:23 -0230 Subject: Replaces currency-input.js with NumericInput --- ui/app/components/send/currency-display.js | 57 ++++++++++++++++++++++-------- 1 file changed, 42 insertions(+), 15 deletions(-) (limited to 'ui/app/components/send/currency-display.js') diff --git a/ui/app/components/send/currency-display.js b/ui/app/components/send/currency-display.js index 90fb2b66c..b98ebee09 100644 --- a/ui/app/components/send/currency-display.js +++ b/ui/app/components/send/currency-display.js @@ -1,10 +1,10 @@ const Component = require('react').Component const h = require('react-hyperscript') const inherits = require('util').inherits -const CurrencyInput = require('../currency-input') const { conversionUtil, multiplyCurrencies } = require('../../conversion-util') const currencyFormatter = require('currency-formatter') const currencies = require('currency-formatter/currencies') +const NumericInput = require('react-numeric-input') module.exports = CurrencyDisplay @@ -21,21 +21,36 @@ function toHexWei (value) { }) } +CurrencyDisplay.prototype.componentWillMount = function () { + this.setState({ + valueToRender: this.getValueToRender(this.props), + }) +} + +CurrencyDisplay.prototype.componentWillReceiveProps = function (nextProps) { + const currentValueToRender = this.getValueToRender(this.props) + const newValueToRender = this.getValueToRender(nextProps) + if (currentValueToRender !== newValueToRender) { + this.setState({ + valueToRender: newValueToRender, + }) + } +} + CurrencyDisplay.prototype.getAmount = function (value) { const { selectedToken } = this.props const { decimals } = selectedToken || {} const multiplier = Math.pow(10, Number(decimals || 0)) - const sendAmount = multiplyCurrencies(value, multiplier, {toNumericBase: 'hex'}) + const sendAmount = multiplyCurrencies(value || '0', multiplier, {toNumericBase: 'hex'}) return selectedToken ? sendAmount : toHexWei(value) } -CurrencyDisplay.prototype.getValueToRender = function () { - const { selectedToken, conversionRate, value } = this.props - +CurrencyDisplay.prototype.getValueToRender = function ({ selectedToken, conversionRate, value }) { + if (value === '0x0') return '' const { decimals, symbol } = selectedToken || {} const multiplier = Math.pow(10, Number(decimals || 0)) @@ -76,6 +91,19 @@ CurrencyDisplay.prototype.getConvertedValueToRender = function (nonFormattedValu : convertedValue } +CurrencyDisplay.prototype.handleChange = function (newVal) { + this.setState({ valueToRender: newVal }) + this.props.onChange(this.getAmount(newVal)) +} + +CurrencyDisplay.prototype.getInputWidth = function (valueToRender, readOnly) { + const valueString = String(valueToRender) + const valueLength = valueString.length || 1 + const dynamicBuffer = readOnly ? 0 : 1 + const decimalPointDeficit = !readOnly && valueString.match(/\./) ? -0.5 : 0 + return (valueLength + dynamicBuffer + decimalPointDeficit) + 'ch' +} + CurrencyDisplay.prototype.render = function () { const { className = 'currency-display', @@ -85,10 +113,10 @@ CurrencyDisplay.prototype.render = function () { convertedCurrency, readOnly = false, inError = false, - handleChange, + onBlur, } = this.props + const { valueToRender } = this.state - const valueToRender = this.getValueToRender() const convertedValueToRender = this.getConvertedValueToRender(valueToRender) return h('div', { @@ -103,21 +131,20 @@ CurrencyDisplay.prototype.render = function () { h('div.currency-display__input-wrapper', [ - h(readOnly ? 'input' : CurrencyInput, { + h(NumericInput, { className: primaryBalanceClassName, value: `${valueToRender}`, - placeholder: '0', + placeholder: `0 ${primaryCurrency}`, readOnly, ...(!readOnly ? { - onInputChange: newValue => { - handleChange(this.getAmount(newValue)) - }, - inputRef: input => { this.currencyInput = input }, + onChange: e => this.handleChange(e), + onBlur: () => onBlur(this.getAmount(valueToRender)), } : {}), + style: false, + format: num => `${num} ${primaryCurrency}`, + parse: stringWithCurrency => stringWithCurrency && stringWithCurrency.match(/^([.\d]+)/)[1], }), - h('span.currency-display__currency-symbol', primaryCurrency), - ]), ]), -- cgit From f33bb3e2fd8ba1cc30dac11017f26ba82c26a82d Mon Sep 17 00:00:00 2001 From: Dan Date: Tue, 29 May 2018 16:24:44 -0230 Subject: Stop using external NumericInput component. --- ui/app/components/send/currency-display.js | 23 +++++++++++++++-------- 1 file changed, 15 insertions(+), 8 deletions(-) (limited to 'ui/app/components/send/currency-display.js') diff --git a/ui/app/components/send/currency-display.js b/ui/app/components/send/currency-display.js index b98ebee09..60032bca4 100644 --- a/ui/app/components/send/currency-display.js +++ b/ui/app/components/send/currency-display.js @@ -4,7 +4,6 @@ const inherits = require('util').inherits const { conversionUtil, multiplyCurrencies } = require('../../conversion-util') const currencyFormatter = require('currency-formatter') const currencies = require('currency-formatter/currencies') -const NumericInput = require('react-numeric-input') module.exports = CurrencyDisplay @@ -92,6 +91,7 @@ CurrencyDisplay.prototype.getConvertedValueToRender = function (nonFormattedValu } CurrencyDisplay.prototype.handleChange = function (newVal) { + console.log(`%^ 95 newVal`, newVal); this.setState({ valueToRender: newVal }) this.props.onChange(this.getAmount(newVal)) } @@ -124,27 +124,34 @@ CurrencyDisplay.prototype.render = function () { style: { borderColor: inError ? 'red' : null, }, - onClick: () => this.currencyInput && this.currencyInput.focus(), + onClick: () => { + this.currencyInput && this.currencyInput.focus() + }, }, [ h('div.currency-display__primary-row', [ h('div.currency-display__input-wrapper', [ - h(NumericInput, { + h('input', { className: primaryBalanceClassName, value: `${valueToRender}`, - placeholder: `0 ${primaryCurrency}`, + placeholder: '0', + type: 'number', readOnly, ...(!readOnly ? { - onChange: e => this.handleChange(e), + onChange: e => this.handleChange(e.target.value), onBlur: () => onBlur(this.getAmount(valueToRender)), } : {}), - style: false, - format: num => `${num} ${primaryCurrency}`, - parse: stringWithCurrency => stringWithCurrency && stringWithCurrency.match(/^([.\d]+)/)[1], + ref: input => { this.currencyInput = input }, + style: { + width: this.getInputWidth(valueToRender, readOnly), + }, + min: 0, }), + h('span.currency-display__currency-symbol', primaryCurrency), + ]), ]), -- cgit From 7f23e017b22ecdc111c2c14f97d632f5490cb5c8 Mon Sep 17 00:00:00 2001 From: Dan Date: Tue, 29 May 2018 22:20:17 -0230 Subject: Delete currency-input.js --- ui/app/components/send/currency-display.js | 1 - 1 file changed, 1 deletion(-) (limited to 'ui/app/components/send/currency-display.js') diff --git a/ui/app/components/send/currency-display.js b/ui/app/components/send/currency-display.js index 60032bca4..0b52a69b5 100644 --- a/ui/app/components/send/currency-display.js +++ b/ui/app/components/send/currency-display.js @@ -91,7 +91,6 @@ CurrencyDisplay.prototype.getConvertedValueToRender = function (nonFormattedValu } CurrencyDisplay.prototype.handleChange = function (newVal) { - console.log(`%^ 95 newVal`, newVal); this.setState({ valueToRender: newVal }) this.props.onChange(this.getAmount(newVal)) } -- cgit From 166fda58777748141859c0a674a5fce454cfc3d3 Mon Sep 17 00:00:00 2001 From: Dan Date: Tue, 22 May 2018 05:40:06 -0230 Subject: Simplify gas estimate actions and add local estimateGasPriceFromRecentBlocks method. --- ui/app/components/send/currency-display.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'ui/app/components/send/currency-display.js') diff --git a/ui/app/components/send/currency-display.js b/ui/app/components/send/currency-display.js index 90fb2b66c..52dc56cb0 100644 --- a/ui/app/components/send/currency-display.js +++ b/ui/app/components/send/currency-display.js @@ -5,6 +5,7 @@ const CurrencyInput = require('../currency-input') const { conversionUtil, multiplyCurrencies } = require('../../conversion-util') const currencyFormatter = require('currency-formatter') const currencies = require('currency-formatter/currencies') +const ethUtil = require('ethereumjs-util') module.exports = CurrencyDisplay @@ -35,18 +36,17 @@ CurrencyDisplay.prototype.getAmount = function (value) { CurrencyDisplay.prototype.getValueToRender = function () { const { selectedToken, conversionRate, value } = this.props - const { decimals, symbol } = selectedToken || {} const multiplier = Math.pow(10, Number(decimals || 0)) return selectedToken - ? conversionUtil(value, { + ? conversionUtil(ethUtil.addHexPrefix(value), { fromNumericBase: 'hex', toCurrency: symbol, conversionRate: multiplier, invertConversionRate: true, }) - : conversionUtil(value, { + : conversionUtil(ethUtil.addHexPrefix(value), { fromNumericBase: 'hex', toNumericBase: 'dec', fromDenomination: 'WEI', -- cgit From 2eddb7b65245b7c11a3928098eea06064b9b22cf Mon Sep 17 00:00:00 2001 From: Dan Date: Tue, 22 May 2018 12:57:15 -0230 Subject: Support smaller decimals in currency-display --- ui/app/components/send/currency-display.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ui/app/components/send/currency-display.js') diff --git a/ui/app/components/send/currency-display.js b/ui/app/components/send/currency-display.js index 52dc56cb0..6cd11f6ef 100644 --- a/ui/app/components/send/currency-display.js +++ b/ui/app/components/send/currency-display.js @@ -50,7 +50,7 @@ CurrencyDisplay.prototype.getValueToRender = function () { fromNumericBase: 'hex', toNumericBase: 'dec', fromDenomination: 'WEI', - numberOfDecimals: 6, + numberOfDecimals: 9, conversionRate, }) } -- cgit From 67c74cd5b6dba059f954be6867a20e1f97197f7d Mon Sep 17 00:00:00 2001 From: Dan Date: Thu, 31 May 2018 12:07:23 -0230 Subject: Fix currency display send integration tests. --- ui/app/components/send/currency-display.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ui/app/components/send/currency-display.js') diff --git a/ui/app/components/send/currency-display.js b/ui/app/components/send/currency-display.js index 0b52a69b5..ff61bd1e7 100644 --- a/ui/app/components/send/currency-display.js +++ b/ui/app/components/send/currency-display.js @@ -49,7 +49,7 @@ CurrencyDisplay.prototype.getAmount = function (value) { } CurrencyDisplay.prototype.getValueToRender = function ({ selectedToken, conversionRate, value }) { - if (value === '0x0') return '' + if (value === '0x0') return '0' const { decimals, symbol } = selectedToken || {} const multiplier = Math.pow(10, Number(decimals || 0)) -- cgit From 990b69c6552b5571391ea5fbf05b5fbef1e0ab10 Mon Sep 17 00:00:00 2001 From: Dan Date: Thu, 31 May 2018 12:23:12 -0230 Subject: Improve input width calculation in currency-display.js --- ui/app/components/send/currency-display.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) (limited to 'ui/app/components/send/currency-display.js') diff --git a/ui/app/components/send/currency-display.js b/ui/app/components/send/currency-display.js index ff61bd1e7..360dd15d4 100644 --- a/ui/app/components/send/currency-display.js +++ b/ui/app/components/send/currency-display.js @@ -98,9 +98,8 @@ CurrencyDisplay.prototype.handleChange = function (newVal) { CurrencyDisplay.prototype.getInputWidth = function (valueToRender, readOnly) { const valueString = String(valueToRender) const valueLength = valueString.length || 1 - const dynamicBuffer = readOnly ? 0 : 1 - const decimalPointDeficit = !readOnly && valueString.match(/\./) ? -0.5 : 0 - return (valueLength + dynamicBuffer + decimalPointDeficit) + 'ch' + const decimalPointDeficit = valueString.match(/\./) ? -0.5 : 0 + return (valueLength + decimalPointDeficit + 0.75) + 'ch' } CurrencyDisplay.prototype.render = function () { -- cgit From ffd42c59da1e3728786d8e8cd20a9c95ea279de0 Mon Sep 17 00:00:00 2001 From: Dan Date: Sat, 2 Jun 2018 01:58:01 -0230 Subject: Default currency-display valueToRender to empty string when not readOnly ('0' if readOnly). --- ui/app/components/send/currency-display.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'ui/app/components/send/currency-display.js') diff --git a/ui/app/components/send/currency-display.js b/ui/app/components/send/currency-display.js index ede08dbc0..3bc9ad226 100644 --- a/ui/app/components/send/currency-display.js +++ b/ui/app/components/send/currency-display.js @@ -49,8 +49,8 @@ CurrencyDisplay.prototype.getAmount = function (value) { : toHexWei(value) } -CurrencyDisplay.prototype.getValueToRender = function ({ selectedToken, conversionRate, value }) { - if (value === '0x0') return '0' +CurrencyDisplay.prototype.getValueToRender = function ({ selectedToken, conversionRate, value, readOnly }) { + if (value === '0x0') return readOnly ? '0' : '' const { decimals, symbol } = selectedToken || {} const multiplier = Math.pow(10, Number(decimals || 0)) -- cgit