From ff1e134ac9cc908027cd94ed0571aec44f89ae72 Mon Sep 17 00:00:00 2001
From: Mark Stacey <markjstacey@gmail.com>
Date: Mon, 19 Oct 2020 20:58:48 -0230
Subject: [PATCH] Remove duplicate percent sign from MetaMask fee (#9647)

The MetaMask fee is shown with two percent signs on the view quote page, because the percent sign is embedded in the fee amount as well as in the localized message.

The fee amount used now comes from the API, and does not have a percent sign. The percent sign is now only in the localized message. This allows for different locales to display the percentage differently. The old hard-coded value with a percent sign embedded has been removed, as it is no longer used anywhere.
---
 ui/app/pages/swaps/swaps.util.js            | 2 --
 ui/app/pages/swaps/view-quote/view-quote.js | 4 +++-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/ui/app/pages/swaps/swaps.util.js b/ui/app/pages/swaps/swaps.util.js
index 92d20556e..d1805c1cb 100644
--- a/ui/app/pages/swaps/swaps.util.js
+++ b/ui/app/pages/swaps/swaps.util.js
@@ -315,7 +315,6 @@ export function quotesToRenderableData (quotes, gasPrice, conversionRate, curren
       conversionRate,
     )
 
-    const metaMaskFee = `0.875%`
     const slippageMultiplier = (new BigNumber(100 - slippage)).div(100)
     const minimumAmountReceived = (new BigNumber(destinationValue)).times(slippageMultiplier).toFixed(6)
 
@@ -348,7 +347,6 @@ export function quotesToRenderableData (quotes, gasPrice, conversionRate, curren
       destinationTokenValue: formatSwapsValueForDisplay(destinationValue),
       isBestQuote: quote.isBestQuote,
       liquiditySourceKey,
-      metaMaskFee,
       feeInEth,
       detailedNetworkFees: `${feeInEth} (${feeInFiat})`,
       networkFees: feeInFiat,
diff --git a/ui/app/pages/swaps/view-quote/view-quote.js b/ui/app/pages/swaps/view-quote/view-quote.js
index 3ebb16803..da08f7615 100644
--- a/ui/app/pages/swaps/view-quote/view-quote.js
+++ b/ui/app/pages/swaps/view-quote/view-quote.js
@@ -22,6 +22,7 @@ import {
   getBalanceError,
   getCustomSwapsGas,
   getDestinationTokenInfo,
+  getMetaMaskFeeAmount,
   getSwapsTradeTxParams,
   getTopQuote,
   navigateBackToBuildQuote,
@@ -200,7 +201,6 @@ export default function ViewQuote () {
     sourceTokenDecimals,
     sourceTokenSymbol,
     sourceTokenValue,
-    metaMaskFee,
   } = renderableDataForUsedQuote
 
   const { feeInFiat, feeInEth } = getRenderableGasFeesForQuote(
@@ -341,6 +341,8 @@ export default function ViewQuote () {
     }
   }, [sourceTokenSymbol, sourceTokenValue, destinationTokenSymbol, destinationTokenValue, fetchParams, topQuote, numberOfQuotes, feeInFiat, bestQuoteReviewedEvent, anonymousBestQuoteReviewedEvent])
 
+  const metaMaskFee = useSelector(getMetaMaskFeeAmount)
+
   const onFeeCardTokenApprovalClick = () => {
     anonymousEditSpendLimitOpened()
     editSpendLimitOpened()