From 1a9206018af8532d5c8f602f42b408cbe820665f Mon Sep 17 00:00:00 2001 From: Daniel <80175477+dan437@users.noreply.github.com> Date: Fri, 21 May 2021 19:02:23 +0200 Subject: [PATCH] Improve UI + content for price difference notifications (#11145) --- app/_locales/en/messages.json | 17 +++-- app/_locales/es/messages.json | 6 -- app/_locales/es_419/messages.json | 6 -- app/_locales/it/messages.json | 9 --- app/_locales/ja/messages.json | 6 -- app/_locales/zh_CN/messages.json | 6 -- ui/pages/swaps/view-quote/index.scss | 66 ++++++++++--------- .../view-quote/view-quote-price-difference.js | 38 ++++++----- .../view-quote-price-difference.test.js | 2 +- 9 files changed, 70 insertions(+), 86 deletions(-) diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json index 082b19b54..bda06fe82 100644 --- a/app/_locales/en/messages.json +++ b/app/_locales/en/messages.json @@ -1936,18 +1936,18 @@ "message": "You are about to swap $1 $2 (~$3) for $4 $5 (~$6).", "description": "This message represents the price slippage for the swap. $1 and $4 are a number (ex: 2.89), $2 and $5 are symbols (ex: ETH), and $3 and $6 are fiat currency amounts." }, - "swapPriceDifferenceAcknowledgement": { - "message": "I'm aware" - }, "swapPriceDifferenceTitle": { "message": "Price difference of ~$1%", "description": "$1 is a number (ex: 1.23) that represents the price difference." }, - "swapPriceDifferenceTooltip": { - "message": "The difference in market prices can be affected by fees taken by intermediaries, size of market, size of trade, or market inefficiencies." + "swapPriceImpactTooltip": { + "message": "Price impact is the difference between the current market price and the amount received during transaction execution. Price impact is a function of the size of your trade relative to the size of the liquidity pool." }, - "swapPriceDifferenceUnavailable": { - "message": "Market price is unavailable. Make sure you feel comfortable with the returned amount before proceeding." + "swapPriceUnavailableDescription": { + "message": "Price impact could not be determined due to lack of market price data. Please confirm that you are comfortable with the amount of tokens you are about to receive before swapping." + }, + "swapPriceUnavailableTitle": { + "message": "Check your rate before proceeding" }, "swapProcessing": { "message": "Processing" @@ -2203,6 +2203,9 @@ "tokenSymbol": { "message": "Token Symbol" }, + "tooltipApproveButton": { + "message": "I understand" + }, "total": { "message": "Total" }, diff --git a/app/_locales/es/messages.json b/app/_locales/es/messages.json index 0240a8c4d..39a786e9c 100644 --- a/app/_locales/es/messages.json +++ b/app/_locales/es/messages.json @@ -1628,12 +1628,6 @@ "message": "Diferencia de precio de ~$1%", "description": "$1 is a number (ex: 1.23) that represents the price difference." }, - "swapPriceDifferenceTooltip": { - "message": "La diferencia en los precios de mercado puede verse afectada por las tarifas cobradas por los intermediarios, el tamaño del mercado, el tamaño del comercio o las ineficiencias del mercado." - }, - "swapPriceDifferenceUnavailable": { - "message": "El precio de mercado no está disponible. Asegúrese de sentirse cómodo con el monto devuelto antes de continuar." - }, "swapProcessing": { "message": "Procesando" }, diff --git a/app/_locales/es_419/messages.json b/app/_locales/es_419/messages.json index 1227d3ffe..a4fd64e03 100644 --- a/app/_locales/es_419/messages.json +++ b/app/_locales/es_419/messages.json @@ -1619,12 +1619,6 @@ "message": "Diferencia de precio de ~$1%", "description": "$1 is a number (ex: 1.23) that represents the price difference." }, - "swapPriceDifferenceTooltip": { - "message": "La diferencia en los precios de mercado puede verse afectada por las tarifas cobradas por los intermediarios, el tamaño del mercado, el tamaño del comercio o las ineficiencias del mercado." - }, - "swapPriceDifferenceUnavailable": { - "message": "El precio de mercado no está disponible. Asegúrese de sentirse cómodo con el monto devuelto antes de continuar." - }, "swapProcessing": { "message": "Procesando" }, diff --git a/app/_locales/it/messages.json b/app/_locales/it/messages.json index 24cbab3b7..161086c29 100644 --- a/app/_locales/it/messages.json +++ b/app/_locales/it/messages.json @@ -1621,19 +1621,10 @@ "message": "Stai per scambiare $1 $2 (~$3) per $4 $5 (~$6).", "description": "This message represents the price slippage for the swap. $1 and $4 are a number (ex: 2.89), $2 and $5 are symbols (ex: ETH), and $3 and $6 are fiat currency amounts." }, - "swapPriceDifferenceAcknowledgement": { - "message": "Sono consapevole" - }, "swapPriceDifferenceTitle": { "message": "Differenza di prezzo di circa ~$1%", "description": "$1 is a number (ex: 1.23) that represents the price difference." }, - "swapPriceDifferenceTooltip": { - "message": "La differenza tra i prezzi del mercato può essere influenzata da commissioni prelevate da intermediari, dimensione del mercato, dimensione dello scambio, o inefficienze del mercato." - }, - "swapPriceDifferenceUnavailable": { - "message": "Il prezzo di mercato non è disponibile. Assicurati di sentirti a tuo agio con l'importo restituito prima di procedere." - }, "swapProcessing": { "message": "In elaborazione" }, diff --git a/app/_locales/ja/messages.json b/app/_locales/ja/messages.json index 495011458..6b10b2c45 100644 --- a/app/_locales/ja/messages.json +++ b/app/_locales/ja/messages.json @@ -1628,12 +1628,6 @@ "message": "価格差は $1% です", "description": "$1 is a number (ex: 1.23) that represents the price difference." }, - "swapPriceDifferenceTooltip": { - "message": "市場価格の違いは、仲介業者が負担する手数料、市場規模、取引量、または取引価格差の影響を受けることがあります。" - }, - "swapPriceDifferenceUnavailable": { - "message": "マーケット価格は利用できません。続行する前に、返金額に問題がないことを確認してください。" - }, "swapProcessing": { "message": "処理中" }, diff --git a/app/_locales/zh_CN/messages.json b/app/_locales/zh_CN/messages.json index 25bbd9d44..cb1950b2c 100644 --- a/app/_locales/zh_CN/messages.json +++ b/app/_locales/zh_CN/messages.json @@ -1619,12 +1619,6 @@ "message": "价格差异 ~$1%", "description": "$1 is a number (ex: 1.23) that represents the price difference." }, - "swapPriceDifferenceTooltip": { - "message": "市场价格的差异可能受到中介机构收取的费用、市场规模、交易规模或市场效率低下的影响。" - }, - "swapPriceDifferenceUnavailable": { - "message": "市场价格不可用。 请确认您对退回的数额感到满意后再继续。" - }, "swapProcessing": { "message": "处理中" }, diff --git a/ui/pages/swaps/view-quote/index.scss b/ui/pages/swaps/view-quote/index.scss index 20c2ea0b4..bdc9bde88 100644 --- a/ui/pages/swaps/view-quote/index.scss +++ b/ui/pages/swaps/view-quote/index.scss @@ -95,45 +95,52 @@ &-wrapper { width: 100%; - &.medium .actionable-message, - &.fiat-error .actionable-message { - border-color: $Yellow-500; - background: $Yellow-100; + &.low, + &.medium, + &.high { + .actionable-message { + .actionable-message__message { + color: inherit; + } - .actionable-message__message { - color: inherit; + button { + font-size: $font-size-h8; + padding: 4px 12px; + border-radius: 42px; + } } + } - button { - background: $Yellow-500; - border-radius: 42px; + &.low { + .actionable-message { + button { + background: $Blue-500; + color: #fff; + } + } + } + + &.medium { + .actionable-message { + border-color: $Yellow-500; + background: $Yellow-100; + + button { + background: $Yellow-500; + } } } &.high { .actionable-message { - border-color: $Red-500; - background: $Red-100; + border-color: $Red-300; + background: $Red-000; - .actionable-message__message { - color: $Red-500; + button { + background: $Red-500; + color: #fff; } } - - button { - background: $Red-500; - color: #fff; - border-radius: 42px; - - /* Offsets the width of ActionableMessage icon */ - margin-right: -22px; - } - } - - /* Hides info tooltip if there's a fiat error message */ - &.fiat-error div[data-tooltipped] { - /* !important overrides style being applied directly to tooltip by component */ - display: none !important; } } @@ -160,10 +167,9 @@ width: 100%; align-items: center; justify-content: center; - width: intrinsic; /* Safari/WebKit uses a non-standard name */ - width: max-content; max-width: 340px; margin-top: 8px; + margin-bottom: 28px; @media screen and (min-width: 576px) { &--thin { diff --git a/ui/pages/swaps/view-quote/view-quote-price-difference.js b/ui/pages/swaps/view-quote/view-quote-price-difference.js index 61d1ad52b..327aaaf49 100644 --- a/ui/pages/swaps/view-quote/view-quote-price-difference.js +++ b/ui/pages/swaps/view-quote/view-quote-price-difference.js @@ -6,6 +6,11 @@ import { I18nContext } from '../../../contexts/i18n'; import ActionableMessage from '../actionable-message'; import Tooltip from '../../../components/ui/tooltip'; +import Box from '../../../components/ui/box'; +import { + JUSTIFY_CONTENT, + DISPLAY, +} from '../../../helpers/constants/design-system'; export default function ViewQuotePriceDifference(props) { const { @@ -28,9 +33,10 @@ export default function ViewQuotePriceDifference(props) { let priceDifferenceAcknowledgementText = ''; if (priceSlippageUnknownFiatValue) { // A calculation error signals we cannot determine dollar value - priceDifferenceMessage = t('swapPriceDifferenceUnavailable'); - priceDifferenceClass = 'fiat-error'; - priceDifferenceAcknowledgementText = t('continue'); + priceDifferenceTitle = t('swapPriceUnavailableTitle'); + priceDifferenceMessage = t('swapPriceUnavailableDescription'); + priceDifferenceClass = 'high'; + priceDifferenceAcknowledgementText = t('tooltipApproveButton'); } else { priceDifferenceTitle = t('swapPriceDifferenceTitle', [ priceDifferencePercentage, @@ -44,9 +50,7 @@ export default function ViewQuotePriceDifference(props) { priceSlippageFromDestination, // Destination tokens total value ]); priceDifferenceClass = usedQuote.priceSlippage.bucket; - priceDifferenceAcknowledgementText = t( - 'swapPriceDifferenceAcknowledgement', - ); + priceDifferenceAcknowledgementText = t('tooltipApproveButton'); } return ( @@ -60,11 +64,22 @@ export default function ViewQuotePriceDifference(props) { message={
- {priceDifferenceTitle && ( +
{priceDifferenceTitle}
- )} + + + + {priceDifferenceMessage} {!acknowledged && (
@@ -78,13 +93,6 @@ export default function ViewQuotePriceDifference(props) {
)}
- - -
} /> diff --git a/ui/pages/swaps/view-quote/view-quote-price-difference.test.js b/ui/pages/swaps/view-quote/view-quote-price-difference.test.js index f18950464..cd94ab4a0 100644 --- a/ui/pages/swaps/view-quote/view-quote-price-difference.test.js +++ b/ui/pages/swaps/view-quote/view-quote-price-difference.test.js @@ -144,6 +144,6 @@ describe('View Price Quote Difference', () => { 'Could not determine price.'; renderComponent(props); - expect(component.html()).toContain('fiat-error'); + expect(component.html()).toContain('high'); }); });