From b3d78ed8a1fbea059344b04416fb21bdb1b73f86 Mon Sep 17 00:00:00 2001 From: Dan Date: Wed, 20 Jun 2018 13:18:23 -0230 Subject: Remove send_ directory, revert to just having send Revert accidentally changed constants. Require defaults in ens-input, gas-fee-display and confirm screens. --- .../send/currency-display/currency-display.js | 169 +++++++++++++++++++++ 1 file changed, 169 insertions(+) create mode 100644 ui/app/components/send/currency-display/currency-display.js (limited to 'ui/app/components/send/currency-display/currency-display.js') diff --git a/ui/app/components/send/currency-display/currency-display.js b/ui/app/components/send/currency-display/currency-display.js new file mode 100644 index 00000000..1b9f7738 --- /dev/null +++ b/ui/app/components/send/currency-display/currency-display.js @@ -0,0 +1,169 @@ +const Component = require('react').Component +const h = require('react-hyperscript') +const inherits = require('util').inherits +const { conversionUtil, multiplyCurrencies } = require('../../../conversion-util') +const { removeLeadingZeroes } = require('../send.utils') +const currencyFormatter = require('currency-formatter') +const currencies = require('currency-formatter/currencies') +const ethUtil = require('ethereumjs-util') + +module.exports = CurrencyDisplay + +inherits(CurrencyDisplay, Component) +function CurrencyDisplay () { + Component.call(this) +} + +function toHexWei (value) { + return conversionUtil(value, { + fromNumericBase: 'dec', + toNumericBase: 'hex', + toDenomination: 'WEI', + }) +} + +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 || '0', multiplier, {toNumericBase: 'hex'}) + + return selectedToken + ? sendAmount + : toHexWei(value) +} + +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)) + + return selectedToken + ? conversionUtil(ethUtil.addHexPrefix(value), { + fromNumericBase: 'hex', + toNumericBase: 'dec', + toCurrency: symbol, + conversionRate: multiplier, + invertConversionRate: true, + }) + : conversionUtil(ethUtil.addHexPrefix(value), { + fromNumericBase: 'hex', + toNumericBase: 'dec', + fromDenomination: 'WEI', + numberOfDecimals: 9, + conversionRate, + }) +} + +CurrencyDisplay.prototype.getConvertedValueToRender = function (nonFormattedValue) { + const { primaryCurrency, convertedCurrency, conversionRate } = this.props + + let convertedValue = conversionUtil(nonFormattedValue, { + fromNumericBase: 'dec', + fromCurrency: primaryCurrency, + toCurrency: convertedCurrency, + numberOfDecimals: 2, + conversionRate, + }) + convertedValue = Number(convertedValue).toFixed(2) + + const upperCaseCurrencyCode = convertedCurrency.toUpperCase() + + return currencies.find(currency => currency.code === upperCaseCurrencyCode) + ? currencyFormatter.format(Number(convertedValue), { + code: upperCaseCurrencyCode, + }) + : convertedValue +} + +CurrencyDisplay.prototype.handleChange = function (newVal) { + this.setState({ valueToRender: removeLeadingZeroes(newVal) }) + this.props.onChange(this.getAmount(newVal)) +} + +CurrencyDisplay.prototype.getInputWidth = function (valueToRender, readOnly) { + const valueString = String(valueToRender) + const valueLength = valueString.length || 1 + const decimalPointDeficit = valueString.match(/\./) ? -0.5 : 0 + return (valueLength + decimalPointDeficit + 0.75) + 'ch' +} + +CurrencyDisplay.prototype.render = function () { + const { + className = 'currency-display', + primaryBalanceClassName = 'currency-display__input', + convertedBalanceClassName = 'currency-display__converted-value', + primaryCurrency, + convertedCurrency, + readOnly = false, + inError = false, + onBlur, + step, + } = this.props + const { valueToRender } = this.state + + const convertedValueToRender = this.getConvertedValueToRender(valueToRender) + + return h('div', { + className, + style: { + borderColor: inError ? 'red' : null, + }, + onClick: () => { + this.currencyInput && this.currencyInput.focus() + }, + }, [ + + h('div.currency-display__primary-row', [ + + h('div.currency-display__input-wrapper', [ + + h('input', { + className: primaryBalanceClassName, + value: `${valueToRender}`, + placeholder: '0', + type: 'number', + readOnly, + ...(!readOnly ? { + onChange: e => this.handleChange(e.target.value), + onBlur: () => onBlur(this.getAmount(valueToRender)), + } : {}), + ref: input => { this.currencyInput = input }, + style: { + width: this.getInputWidth(valueToRender, readOnly), + }, + min: 0, + step, + }), + + h('span.currency-display__currency-symbol', primaryCurrency), + + ]), + + ]), + + h('div', { + className: convertedBalanceClassName, + }, `${convertedValueToRender} ${convertedCurrency.toUpperCase()}`), + + ]) + +} + -- cgit From 8d8de0508ab3cb67870d0c00469ee39f3be06714 Mon Sep 17 00:00:00 2001 From: Sara Reynolds Date: Wed, 11 Jul 2018 15:00:14 -0400 Subject: Fixes conversion status for tokens without conversion rates --- .../send/currency-display/currency-display.js | 43 +++++++++++++++------- 1 file changed, 29 insertions(+), 14 deletions(-) (limited to 'ui/app/components/send/currency-display/currency-display.js') diff --git a/ui/app/components/send/currency-display/currency-display.js b/ui/app/components/send/currency-display/currency-display.js index 1b9f7738..70fc9de7 100644 --- a/ui/app/components/send/currency-display/currency-display.js +++ b/ui/app/components/send/currency-display/currency-display.js @@ -82,16 +82,21 @@ CurrencyDisplay.prototype.getConvertedValueToRender = function (nonFormattedValu numberOfDecimals: 2, conversionRate, }) - convertedValue = Number(convertedValue).toFixed(2) - const upperCaseCurrencyCode = convertedCurrency.toUpperCase() - - return currencies.find(currency => currency.code === upperCaseCurrencyCode) - ? currencyFormatter.format(Number(convertedValue), { - code: upperCaseCurrencyCode, - }) - : convertedValue -} + if (conversionRate == 0 && nonFormattedValue != 0) { + convertedValue = null + return convertedValue + } + else { + convertedValue == Number(convertedValue).toFixed(2) + const upperCaseCurrencyCode = convertedCurrency.toUpperCase() + return currencies.find(currency => currency.code === upperCaseCurrencyCode) + ? currencyFormatter.format(Number(convertedValue), { + code: upperCaseCurrencyCode, + }) + : convertedValue + } + } CurrencyDisplay.prototype.handleChange = function (newVal) { this.setState({ valueToRender: removeLeadingZeroes(newVal) }) @@ -105,6 +110,7 @@ CurrencyDisplay.prototype.getInputWidth = function (valueToRender, readOnly) { return (valueLength + decimalPointDeficit + 0.75) + 'ch' } + CurrencyDisplay.prototype.render = function () { const { className = 'currency-display', @@ -121,6 +127,19 @@ CurrencyDisplay.prototype.render = function () { const convertedValueToRender = this.getConvertedValueToRender(valueToRender) + function onlyRenderConversions() { + if (convertedValueToRender == null) { + return h('div', { + className: convertedBalanceClassName, + }, 'No Conversion Rate') + } + else { + return h('div', { + className: convertedBalanceClassName, + }, `${convertedValueToRender} ${convertedCurrency.toUpperCase()}`) + } + } + return h('div', { className, style: { @@ -157,11 +176,7 @@ CurrencyDisplay.prototype.render = function () { ]), - ]), - - h('div', { - className: convertedBalanceClassName, - }, `${convertedValueToRender} ${convertedCurrency.toUpperCase()}`), + ]), onlyRenderConversions(), ]) -- cgit From 4014b279d7f02dcf90a289d7ef5d3cd27d953ee4 Mon Sep 17 00:00:00 2001 From: Sara Reynolds Date: Fri, 13 Jul 2018 13:11:43 -0700 Subject: Update onlyRenderConversions function to method and account for edge cases --- .../send/currency-display/currency-display.js | 50 +++++++++++----------- 1 file changed, 24 insertions(+), 26 deletions(-) (limited to 'ui/app/components/send/currency-display/currency-display.js') diff --git a/ui/app/components/send/currency-display/currency-display.js b/ui/app/components/send/currency-display/currency-display.js index 70fc9de7..12ddc3d5 100644 --- a/ui/app/components/send/currency-display/currency-display.js +++ b/ui/app/components/send/currency-display/currency-display.js @@ -75,6 +75,10 @@ CurrencyDisplay.prototype.getValueToRender = function ({ selectedToken, conversi CurrencyDisplay.prototype.getConvertedValueToRender = function (nonFormattedValue) { const { primaryCurrency, convertedCurrency, conversionRate } = this.props + if (conversionRate == 0 || conversionRate == null || converstionRate == undefined && nonFormattedValue != 0) { + return null + } + let convertedValue = conversionUtil(nonFormattedValue, { fromNumericBase: 'dec', fromCurrency: primaryCurrency, @@ -83,19 +87,13 @@ CurrencyDisplay.prototype.getConvertedValueToRender = function (nonFormattedValu conversionRate, }) - if (conversionRate == 0 && nonFormattedValue != 0) { - convertedValue = null - return convertedValue - } - else { - convertedValue == Number(convertedValue).toFixed(2) - const upperCaseCurrencyCode = convertedCurrency.toUpperCase() - return currencies.find(currency => currency.code === upperCaseCurrencyCode) - ? currencyFormatter.format(Number(convertedValue), { - code: upperCaseCurrencyCode, - }) + convertedValue == Number(convertedValue).toFixed(2) + const upperCaseCurrencyCode = convertedCurrency.toUpperCase() + return currencies.find(currency => currency.code === upperCaseCurrencyCode) + ? currencyFormatter.format(Number(convertedValue), { + code: upperCaseCurrencyCode, + }) : convertedValue - } } CurrencyDisplay.prototype.handleChange = function (newVal) { @@ -110,6 +108,19 @@ CurrencyDisplay.prototype.getInputWidth = function (valueToRender, readOnly) { return (valueLength + decimalPointDeficit + 0.75) + 'ch' } +CurrencyDisplay.prototype.onlyRenderConversions = function (convertedValueToRender) { + const{ + convertedBalanceClassName = 'currency-display__converted-value', + convertedCurrency, + } = this.props + + return h('div', { + className: convertedBalanceClassName, + }, convertedValueToRender == null + ? 'No Conversion Rate' + : `${convertedValueToRender} ${convertedCurrency.toUpperCase()}` +) + } CurrencyDisplay.prototype.render = function () { const { @@ -127,19 +138,6 @@ CurrencyDisplay.prototype.render = function () { const convertedValueToRender = this.getConvertedValueToRender(valueToRender) - function onlyRenderConversions() { - if (convertedValueToRender == null) { - return h('div', { - className: convertedBalanceClassName, - }, 'No Conversion Rate') - } - else { - return h('div', { - className: convertedBalanceClassName, - }, `${convertedValueToRender} ${convertedCurrency.toUpperCase()}`) - } - } - return h('div', { className, style: { @@ -176,7 +174,7 @@ CurrencyDisplay.prototype.render = function () { ]), - ]), onlyRenderConversions(), + ]), this.onlyRenderConversions(convertedValueToRender), ]) -- cgit From 684fc710ee6db33e3ca4e5c5777874e46ccef3b1 Mon Sep 17 00:00:00 2001 From: Sara Reynolds Date: Mon, 16 Jul 2018 13:02:12 -0700 Subject: Fix edge cases and add translation compatibility --- .../send/currency-display/currency-display.js | 18 ++++++++++++------ 1 file changed, 12 insertions(+), 6 deletions(-) (limited to 'ui/app/components/send/currency-display/currency-display.js') diff --git a/ui/app/components/send/currency-display/currency-display.js b/ui/app/components/send/currency-display/currency-display.js index 12ddc3d5..3bef25e2 100644 --- a/ui/app/components/send/currency-display/currency-display.js +++ b/ui/app/components/send/currency-display/currency-display.js @@ -6,6 +6,11 @@ const { removeLeadingZeroes } = require('../send.utils') const currencyFormatter = require('currency-formatter') const currencies = require('currency-formatter/currencies') const ethUtil = require('ethereumjs-util') +const PropTypes = require('prop-types') + +CurrencyDisplay.contextTypes = { + t: PropTypes.func, +} module.exports = CurrencyDisplay @@ -75,11 +80,13 @@ CurrencyDisplay.prototype.getValueToRender = function ({ selectedToken, conversi CurrencyDisplay.prototype.getConvertedValueToRender = function (nonFormattedValue) { const { primaryCurrency, convertedCurrency, conversionRate } = this.props - if (conversionRate == 0 || conversionRate == null || converstionRate == undefined && nonFormattedValue != 0) { - return null + if (conversionRate == 0 || conversionRate == null || conversionRate == undefined) { + if (nonFormattedValue != 0) { + return null + } } - let convertedValue = conversionUtil(nonFormattedValue, { + const convertedValue = conversionUtil(nonFormattedValue, { fromNumericBase: 'dec', fromCurrency: primaryCurrency, toCurrency: convertedCurrency, @@ -109,15 +116,14 @@ CurrencyDisplay.prototype.getInputWidth = function (valueToRender, readOnly) { } CurrencyDisplay.prototype.onlyRenderConversions = function (convertedValueToRender) { - const{ + const { convertedBalanceClassName = 'currency-display__converted-value', convertedCurrency, } = this.props - return h('div', { className: convertedBalanceClassName, }, convertedValueToRender == null - ? 'No Conversion Rate' + ? this.context.t('noConversionRateAvailable') : `${convertedValueToRender} ${convertedCurrency.toUpperCase()}` ) } -- cgit From dcf8e0ed12de61bf58b4d27010b5b8b6d93bd7dd Mon Sep 17 00:00:00 2001 From: Sara Reynolds Date: Mon, 16 Jul 2018 16:50:08 -0700 Subject: lint fix --- ui/app/components/send/currency-display/currency-display.js | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) (limited to 'ui/app/components/send/currency-display/currency-display.js') diff --git a/ui/app/components/send/currency-display/currency-display.js b/ui/app/components/send/currency-display/currency-display.js index 3bef25e2..2b8eaa41 100644 --- a/ui/app/components/send/currency-display/currency-display.js +++ b/ui/app/components/send/currency-display/currency-display.js @@ -80,13 +80,13 @@ CurrencyDisplay.prototype.getValueToRender = function ({ selectedToken, conversi CurrencyDisplay.prototype.getConvertedValueToRender = function (nonFormattedValue) { const { primaryCurrency, convertedCurrency, conversionRate } = this.props - if (conversionRate == 0 || conversionRate == null || conversionRate == undefined) { - if (nonFormattedValue != 0) { + if (conversionRate === 0 || conversionRate === null || conversionRate === undefined) { + if (nonFormattedValue !== 0) { return null } } - const convertedValue = conversionUtil(nonFormattedValue, { + let convertedValue = conversionUtil(nonFormattedValue, { fromNumericBase: 'dec', fromCurrency: primaryCurrency, toCurrency: convertedCurrency, @@ -94,7 +94,7 @@ CurrencyDisplay.prototype.getConvertedValueToRender = function (nonFormattedValu conversionRate, }) - convertedValue == Number(convertedValue).toFixed(2) + convertedValue = Number(convertedValue).toFixed(2) const upperCaseCurrencyCode = convertedCurrency.toUpperCase() return currencies.find(currency => currency.code === upperCaseCurrencyCode) ? currencyFormatter.format(Number(convertedValue), { @@ -132,9 +132,7 @@ CurrencyDisplay.prototype.render = function () { const { className = 'currency-display', primaryBalanceClassName = 'currency-display__input', - convertedBalanceClassName = 'currency-display__converted-value', primaryCurrency, - convertedCurrency, readOnly = false, inError = false, onBlur, -- cgit