aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--app/_locales/en/messages.json3
-rw-r--r--test/integration/lib/tx-list-items.js4
-rw-r--r--ui/app/components/send/currency-display/currency-display.js39
-rw-r--r--ui/app/components/tx-list-item.js24
-rw-r--r--ui/app/css/itcss/components/transaction-list.scss10
5 files changed, 47 insertions, 33 deletions
diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index f0927af9c..8619d6716 100644
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@@ -623,6 +623,9 @@
"noDeposits": {
"message": "No deposits received"
},
+ "noConversionRateAvailable":{
+ "message": "No Conversion Rate Available"
+ },
"noTransactionHistory": {
"message": "No transaction history."
},
diff --git a/test/integration/lib/tx-list-items.js b/test/integration/lib/tx-list-items.js
index 6b67b1d2e..b7aca44d5 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/send/currency-display/currency-display.js b/ui/app/components/send/currency-display/currency-display.js
index 1b9f7738c..2b8eaa41f 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,6 +80,12 @@ 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) {
+ return null
+ }
+ }
+
let convertedValue = conversionUtil(nonFormattedValue, {
fromNumericBase: 'dec',
fromCurrency: primaryCurrency,
@@ -82,16 +93,15 @@ CurrencyDisplay.prototype.getConvertedValueToRender = function (nonFormattedValu
numberOfDecimals: 2,
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), {
code: upperCaseCurrencyCode,
})
- : convertedValue
-}
+ : convertedValue
+ }
CurrencyDisplay.prototype.handleChange = function (newVal) {
this.setState({ valueToRender: removeLeadingZeroes(newVal) })
@@ -105,13 +115,24 @@ 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
+ ? this.context.t('noConversionRateAvailable')
+ : `${convertedValueToRender} ${convertedCurrency.toUpperCase()}`
+)
+ }
+
CurrencyDisplay.prototype.render = function () {
const {
className = 'currency-display',
primaryBalanceClassName = 'currency-display__input',
- convertedBalanceClassName = 'currency-display__converted-value',
primaryCurrency,
- convertedCurrency,
readOnly = false,
inError = false,
onBlur,
@@ -157,11 +178,7 @@ CurrencyDisplay.prototype.render = function () {
]),
- ]),
-
- h('div', {
- className: convertedBalanceClassName,
- }, `${convertedValueToRender} ${convertedCurrency.toUpperCase()}`),
+ ]), this.onlyRenderConversions(convertedValueToRender),
])
diff --git a/ui/app/components/tx-list-item.js b/ui/app/components/tx-list-item.js
index e539514ec..0d693b805 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 d03faf486..1d45ff13b 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;
generated by cgit v1.2.3 (git 2.25.1) at 2024-08-22 23:18:46 +0800