From 8d8de0508ab3cb67870d0c00469ee39f3be06714 Mon Sep 17 00:00:00 2001 From: Sara Reynolds Date: Wed, 11 Jul 2018 15:00:14 -0400 Subject: [PATCH 1/5] Fixes conversion status for tokens without conversion rates --- .../send/currency-display/currency-display.js | 43 +++++++++++++------ 1 file changed, 29 insertions(+), 14 deletions(-) diff --git a/ui/app/components/send/currency-display/currency-display.js b/ui/app/components/send/currency-display/currency-display.js index 1b9f7738c38e..70fc9de70e81 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(), ]) From 4014b279d7f02dcf90a289d7ef5d3cd27d953ee4 Mon Sep 17 00:00:00 2001 From: Sara Reynolds Date: Fri, 13 Jul 2018 13:11:43 -0700 Subject: [PATCH 2/5] Update onlyRenderConversions function to method and account for edge cases --- .../send/currency-display/currency-display.js | 50 +++++++++---------- 1 file changed, 24 insertions(+), 26 deletions(-) diff --git a/ui/app/components/send/currency-display/currency-display.js b/ui/app/components/send/currency-display/currency-display.js index 70fc9de70e81..12ddc3d538f3 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), ]) From 684fc710ee6db33e3ca4e5c5777874e46ccef3b1 Mon Sep 17 00:00:00 2001 From: Sara Reynolds Date: Mon, 16 Jul 2018 13:02:12 -0700 Subject: [PATCH 3/5] Fix edge cases and add translation compatibility --- app/_locales/en/messages.json | 3 +++ .../send/currency-display/currency-display.js | 18 ++++++++++++------ 2 files changed, 15 insertions(+), 6 deletions(-) diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json index 35e28c087002..03f62424cd4f 100644 --- a/app/_locales/en/messages.json +++ b/app/_locales/en/messages.json @@ -584,6 +584,9 @@ "noDeposits": { "message": "No deposits received" }, + "noConversionRateAvailable":{ + "message": "No Conversion Rate Available" + }, "noTransactionHistory": { "message": "No transaction history." }, diff --git a/ui/app/components/send/currency-display/currency-display.js b/ui/app/components/send/currency-display/currency-display.js index 12ddc3d538f3..3bef25e29389 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()}` ) } From dcf8e0ed12de61bf58b4d27010b5b8b6d93bd7dd Mon Sep 17 00:00:00 2001 From: Sara Reynolds Date: Mon, 16 Jul 2018 16:50:08 -0700 Subject: [PATCH 4/5] lint fix --- .../send/currency-display/currency-display.js | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/ui/app/components/send/currency-display/currency-display.js b/ui/app/components/send/currency-display/currency-display.js index 3bef25e29389..2b8eaa41f70f 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, From 4737ea49c72b24a712b7c3215bed93383ce3ad81 Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Mon, 16 Jul 2018 17:09:57 -0700 Subject: [PATCH 5/5] Increase clickable area and padding of Retry Transaction bar --- test/integration/lib/tx-list-items.js | 4 ++-- ui/app/components/tx-list-item.js | 24 ++++++++----------- .../itcss/components/transaction-list.scss | 10 ++++---- 3 files changed, 16 insertions(+), 22 deletions(-) diff --git a/test/integration/lib/tx-list-items.js b/test/integration/lib/tx-list-items.js index 6b67b1d2eeb5..b7aca44d5676 100644 --- a/test/integration/lib/tx-list-items.js +++ b/test/integration/lib/tx-list-items.js @@ -31,8 +31,8 @@ async function runTxListItemsTest (assert, done) { assert.equal($(unapprovedTx).hasClass('tx-list-pending-item-container'), true, 'unapprovedTx has the correct class') const retryTx = txListItems[1] - const retryTxLink = await findAsync($(retryTx), '.tx-list-item-retry-link') - assert.equal(retryTxLink[0].textContent, 'Increase the gas price on your transaction', 'retryTx has expected link') + const retryTxLink = await findAsync($(retryTx), '.tx-list-item-retry-container span') + assert.equal(retryTxLink[0].textContent, 'Taking too long? Increase the gas price on your transaction', 'retryTx has expected link') const approvedTx = txListItems[2] const approvedTxRenderedStatus = await findAsync($(approvedTx), '.tx-list-status') diff --git a/ui/app/components/tx-list-item.js b/ui/app/components/tx-list-item.js index e539514ec793..0d693b8052d4 100644 --- a/ui/app/components/tx-list-item.js +++ b/ui/app/components/tx-list-item.js @@ -307,20 +307,16 @@ TxListItem.prototype.render = function () { ]), ]), - this.showRetryButton() && h('div.tx-list-item-retry-container', [ - - h('span.tx-list-item-retry-copy', 'Taking too long?'), - - h('span.tx-list-item-retry-link', { - onClick: (event) => { - event.stopPropagation() - if (isTokenTx) { - this.setSelectedToken(txParams.to) - } - this.resubmit() - }, - }, 'Increase the gas price on your transaction'), - + this.showRetryButton() && h('.tx-list-item-retry-container', { + onClick: (event) => { + event.stopPropagation() + if (isTokenTx) { + this.setSelectedToken(txParams.to) + } + this.resubmit() + }, + }, [ + h('span', 'Taking too long? Increase the gas price on your transaction'), ]), ]), // holding on icon from design diff --git a/ui/app/css/itcss/components/transaction-list.scss b/ui/app/css/itcss/components/transaction-list.scss index d03faf486118..1d45ff13b16d 100644 --- a/ui/app/css/itcss/components/transaction-list.scss +++ b/ui/app/css/itcss/components/transaction-list.scss @@ -129,12 +129,14 @@ .tx-list-item-retry-container { background: #d1edff; width: 100%; - border-radius: 4px; - font-size: 0.8em; + border-radius: 12px; + font-size: .75rem; display: flex; justify-content: center; margin-left: 44px; width: calc(100% - 44px); + padding: 4px; + cursor: pointer; @media screen and (min-width: 576px) and (max-width: 679px) { flex-flow: column; @@ -151,10 +153,6 @@ } } -.tx-list-item-retry-copy { - font-family: Roboto; -} - .tx-list-item-retry-link { text-decoration: underline; margin-left: 6px;