Improve UI + content for price difference notifications (#11145)

2024-12-23 01:39:44 +01:00 · 2021-05-21 19:02:23 +02:00 · 2021-05-21 19:02:23 +02:00 · 1a9206018a
commit 1a9206018a
parent df6cb42594
9 changed files with 70 additions and 86 deletions
--- 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"
  },
--- 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"
  },
--- 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"
  },
--- 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"
  },
--- 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": "処理中"
  },
--- 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": "处理中"
  },
--- 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 {
--- 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={
          <div className="view-quote__price-difference-warning-contents">
            <div className="view-quote__price-difference-warning-contents-text">
-              {priceDifferenceTitle && (
+              <Box
+                display={DISPLAY.FLEX}
+                justifyContent={JUSTIFY_CONTENT.SPACE_BETWEEN}
+                paddingBottom={2}
+              >
                <div className="view-quote__price-difference-warning-contents-title">
                  {priceDifferenceTitle}
                </div>
-              )}
+                <Tooltip
+                  position="bottom"
+                  theme="white"
+                  title={t('swapPriceImpactTooltip')}
+                >
+                  <i className="fa fa-info-circle" />
+                </Tooltip>
+              </Box>
              {priceDifferenceMessage}
              {!acknowledged && (
                <div className="view-quote__price-difference-warning-contents-actions">
@ -78,13 +93,6 @@ export default function ViewQuotePriceDifference(props) {
                </div>
              )}
            </div>
-            <Tooltip
-              position="bottom"
-              theme="white"
-              title={t('swapPriceDifferenceTooltip')}
-            >
-              <i className="fa fa-info-circle" />
-            </Tooltip>
          </div>
        }
      />
--- 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');
  });
 });