Implement new priceSlippage properties to show fiat amounts

MetaMask · Dec 1, 2020 · c9d3065 · c9d3065
1 parent 5dab102
commit c9d3065
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 15 deletions.
diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
@@ -1743,7 +1743,11 @@
   },
   "swapPriceDifference": {
     "message": "Swapping $1 $2 (~$3) for $4 $5 (~$6)",
-    "description": "This message represents the price slippage for the swap.  $1 is a percentage with up to two decimals (ex: 2.89)."
+    "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 native currency amounts."
+  },
+  "swapPriceDifferenceError": {
+    "message": "Price differential error: $1",
+    "description": "$1 is the error reported by the API."
   },
   "swapPriceDifferenceTooltip": {
     "message": "The difference in market prices can be affected by fees taken by intermediaries, size of market, size of trade, or market inefficiencies."

diff --git a/...ents/app/user-preferenced-currency-display/user-preferenced-currency-display.component.js b/...ents/app/user-preferenced-currency-display/user-preferenced-currency-display.component.js
@@ -19,7 +19,6 @@ export default function UserPreferencedCurrencyDisplay({
     fiatNumberOfDecimals,
     numberOfDecimals: propsNumberOfDecimals,
   })
-
   const prefixComponent = useMemo(() => {
     return (
       currency === ETH &&

diff --git a/ui/app/pages/swaps/view-quote/view-quote.js b/ui/app/pages/swaps/view-quote/view-quote.js
@@ -7,6 +7,7 @@ import classnames from 'classnames'
 import { I18nContext } from '../../../contexts/i18n'
 import SelectQuotePopover from '../select-quote-popover'
 import { useEqualityCheck } from '../../../hooks/useEqualityCheck'
+import { useEthFiatAmount } from '../../../hooks/useEthFiatAmount'
 import { useNewMetricEvent } from '../../../hooks/useMetricEvent'
 import { useSwapsEthToken } from '../../../hooks/useSwapsEthToken'
 import { MetaMetricsContext } from '../../../contexts/metametrics.new'
@@ -462,23 +463,27 @@ export default function ViewQuote() {
       : 'ETH',
   ])
 
-  debugger;
-
-
   const shouldShowPriceDifferenceWarning =
     !showInsufficientWarning &&
     ['high', 'medium'].includes(usedQuote?.priceSlippage?.bucket)
 
-  const priceDifferenceMessage = t('swapPriceDifference', [
-    sourceTokenValue, // Number of source token to swap
-    usedQuote.sourceTokenInfo.symbol, // Source token symbol
-    '', // Source tokens total value
-    destinationTokenValue, // Number of destination tokens in return
-    usedQuote.destinationTokenInfo.symbol, // Destination token symbol,
-    '', // Destination tokens total value
-  ]);
+  const priceSlippageFromSource = useEthFiatAmount(
+    usedQuote?.priceSlippage?.sourceAmountInETH || 0,
+  )
+  const priceSlippageFromDestination = useEthFiatAmount(
+    usedQuote?.priceSlippage?.destinationAmountInEth || 0,
+  )
 
-  debugger;
+  const priceDifferenceMessage = usedQuote?.priceSlippage?.calculationError
+    ? t('swapPriceDifferenceError', usedQuote.priceSlippage.calculationError)
+    : t('swapPriceDifference', [
+        sourceTokenValue, // Number of source token to swap
+        usedQuote.sourceTokenInfo.symbol, // Source token symbol
+        priceSlippageFromSource, // Source tokens total value
+        destinationTokenValue, // Number of destination tokens in return
+        usedQuote.destinationTokenInfo.symbol, // Destination token symbol,
+        priceSlippageFromDestination, // Destination tokens total value
+      ])
 
   return (
     <div className="view-quote">
@@ -493,7 +498,7 @@ export default function ViewQuote() {
             onQuoteDetailsIsOpened={quoteDetailsOpened}
           />
         )}
-        {true /* shouldShowPriceDifferenceWarning */ && (
+        {shouldShowPriceDifferenceWarning && (
           <div
             className={classnames(
               'view-quote__price-difference-warning-wrapper',