Ensure that the correct default currency symbols are used for fees on the view quote screen (#10753)

ui/app/helpers/utils/formatters.js

@@ -1,3 +1,4 @@
-export function formatETHFee(ethFee) {
-  return `${ethFee} ETH`;
+// TODO: Rename to reflect that this function is used for more cases than ETH, and update all uses.
+export function formatETHFee(ethFee, currencySymbol = 'ETH') {
+  return `${ethFee} ${currencySymbol}`;
 }

ui/app/pages/swaps/swaps-gas-customization-modal/swaps-gas-customization-modal.container.js

@@ -8,6 +8,8 @@ import {
   getDefaultActiveButtonIndex,
   getRenderableGasButtonData,
   getUSDConversionRate,
+  getNativeCurrency,
+  getSwapsDefaultToken,
 } from '../../../selectors';
 
 import {
@@ -21,7 +23,6 @@ import {
   shouldShowCustomPriceTooLowWarning,
   swapCustomGasModalClosed,
 } from '../../../ducks/swaps/swaps';
-
 import {
   addHexes,
   getValueFromWeiHex,
@@ -34,6 +35,9 @@ import SwapsGasCustomizationModalComponent from './swaps-gas-customization-modal
 const mapStateToProps = (state) => {
   const currentCurrency = getCurrentCurrency(state);
   const conversionRate = getConversionRate(state);
+  const nativeCurrencySymbol = getNativeCurrency(state);
+  const { symbol: swapsDefaultCurrencySymbol } = getSwapsDefaultToken(state);
+  const usedCurrencySymbol = nativeCurrencySymbol || swapsDefaultCurrencySymbol;
 
   const { modalState: { props: modalProps } = {} } = state.appState.modal || {};
   const {
@@ -63,6 +67,7 @@ const mapStateToProps = (state) => {
     true,
     conversionRate,
     currentCurrency,
+    usedCurrencySymbol,
   );
   const gasButtonInfo = [averageEstimateData, fastEstimateData];
 
@@ -74,13 +79,15 @@ const mapStateToProps = (state) => {
 
   const balance = getCurrentEthBalance(state);
 
-  const newTotalEth = sumHexWEIsToRenderableEth([
-    value,
-    customGasTotal,
-    customTotalSupplement,
-  ]);
+  const newTotalEth = sumHexWEIsToRenderableEth(
+    [value, customGasTotal, customTotalSupplement],
+    usedCurrencySymbol,
+  );
 
-  const sendAmount = sumHexWEIsToRenderableEth([value, '0x0']);
+  const sendAmount = sumHexWEIsToRenderableEth(
+    [value, '0x0'],
+    usedCurrencySymbol,
+  );
 
   const insufficientBalance = !isBalanceSufficient({
     amount: value,
@@ -112,14 +119,16 @@ const mapStateToProps = (state) => {
         currentCurrency,
         conversionRate,
       ),
-      originalTotalEth: sumHexWEIsToRenderableEth([
-        value,
-        customGasTotal,
-        customTotalSupplement,
-      ]),
+      originalTotalEth: sumHexWEIsToRenderableEth(
+        [value, customGasTotal, customTotalSupplement],
+        usedCurrencySymbol,
+      ),
       newTotalFiat,
       newTotalEth,
-      transactionFee: sumHexWEIsToRenderableEth(['0x0', customGasTotal]),
+      transactionFee: sumHexWEIsToRenderableEth(
+        ['0x0', customGasTotal],
+        usedCurrencySymbol,
+      ),
       sendAmount,
       extraInfoRow,
     },
@@ -158,13 +167,15 @@ export default connect(
   mapDispatchToProps,
 )(SwapsGasCustomizationModalComponent);
 
-function sumHexWEIsToRenderableEth(hexWEIs) {
+function sumHexWEIsToRenderableEth(hexWEIs, currencySymbol = 'ETH') {
   const hexWEIsSum = hexWEIs.filter(Boolean).reduce(addHexes);
   return formatETHFee(
     getValueFromWeiHex({
       value: hexWEIsSum,
-      toCurrency: 'ETH',
+      fromCurrency: currencySymbol,
+      toCurrency: currencySymbol,
       numberOfDecimals: 6,
     }),
+    currencySymbol,
   );
 }

ui/app/pages/swaps/swaps.util.js

@@ -427,6 +427,7 @@ export function getRenderableNetworkFeesForQuote({
   sourceSymbol,
   sourceAmount,
   chainId,
+  nativeCurrencySymbol,
 }) {
   const totalGasLimitForCalculation = new BigNumber(tradeGas || '0x0', 16)
     .plus(approveGas || '0x0', 16)
@@ -456,11 +457,15 @@ export function getRenderableNetworkFeesForQuote({
     numberOfDecimals: 2,
   });
   const formattedNetworkFee = formatCurrency(rawNetworkFees, currentCurrency);
+
+  const chainCurrencySymbolToUse =
+    nativeCurrencySymbol || SWAPS_CHAINID_DEFAULT_TOKEN_MAP[chainId].symbol;
+
   return {
     rawNetworkFees,
     rawEthFee: ethFee,
     feeInFiat: formattedNetworkFee,
-    feeInEth: `${ethFee} ${SWAPS_CHAINID_DEFAULT_TOKEN_MAP[chainId].symbol}`,
+    feeInEth: `${ethFee} ${chainCurrencySymbolToUse}`,
     nonGasFee,
   };
 }

ui/app/pages/swaps/view-quote/view-quote.js

@@ -38,6 +38,7 @@ import {
   getTokenExchangeRates,
   getSwapsDefaultToken,
   getCurrentChainId,
+  getNativeCurrency,
 } from '../../../selectors';
 import { toPrecisionWithoutTrailingZeros } from '../../../helpers/utils/util';
 import { getTokens } from '../../../ducks/metamask/metamask';
@@ -128,6 +129,7 @@ export default function ViewQuote() {
   const swapsQuoteRefreshTime = useSelector(getSwapsQuoteRefreshTime);
   const defaultSwapsToken = useSelector(getSwapsDefaultToken);
   const chainId = useSelector(getCurrentChainId);
+  const nativeCurrencySymbol = useSelector(getNativeCurrency);
 
   const { isBestQuote } = usedQuote;
 
@@ -223,6 +225,7 @@ export default function ViewQuote() {
     sourceSymbol: sourceTokenSymbol,
     sourceAmount: usedQuote.sourceAmount,
     chainId,
+    nativeCurrencySymbol,
   });
 
   const {
@@ -239,6 +242,7 @@ export default function ViewQuote() {
     sourceSymbol: sourceTokenSymbol,
     sourceAmount: usedQuote.sourceAmount,
     chainId,
+    nativeCurrencySymbol,
   });
 
   const tokenCost = new BigNumber(usedQuote.sourceAmount);

ui/app/selectors/custom-gas.js

@@ -134,13 +134,18 @@ export function basicPriceEstimateToETHTotal(
   });
 }
 
-export function getRenderableEthFee(estimate, gasLimit, numberOfDecimals = 9) {
+export function getRenderableEthFee(
+  estimate,
+  gasLimit,
+  numberOfDecimals = 9,
+  nativeCurrency = 'ETH',
+) {
   const value = conversionUtil(estimate, {
     fromNumericBase: 'dec',
     toNumericBase: 'hex',
   });
   const fee = basicPriceEstimateToETHTotal(value, gasLimit, numberOfDecimals);
-  return formatETHFee(fee);
+  return formatETHFee(fee, nativeCurrency);
 }
 
 export function getRenderableConvertedCurrencyFee(
@@ -186,12 +191,18 @@ export function getRenderableGasButtonData(
   showFiat,
   conversionRate,
   currentCurrency,
+  nativeCurrency,
 ) {
   const { safeLow, average, fast } = estimates;
 
   const slowEstimateData = {
     gasEstimateType: GAS_ESTIMATE_TYPES.SLOW,
-    feeInPrimaryCurrency: getRenderableEthFee(safeLow, gasLimit),
+    feeInPrimaryCurrency: getRenderableEthFee(
+      safeLow,
+      gasLimit,
+      9,
+      nativeCurrency,
+    ),
     feeInSecondaryCurrency: showFiat
       ? getRenderableConvertedCurrencyFee(
           safeLow,
@@ -204,7 +215,12 @@ export function getRenderableGasButtonData(
   };
   const averageEstimateData = {
     gasEstimateType: GAS_ESTIMATE_TYPES.AVERAGE,
-    feeInPrimaryCurrency: getRenderableEthFee(average, gasLimit),
+    feeInPrimaryCurrency: getRenderableEthFee(
+      average,
+      gasLimit,
+      9,
+      nativeCurrency,
+    ),
     feeInSecondaryCurrency: showFiat
       ? getRenderableConvertedCurrencyFee(
           average,
@@ -217,7 +233,12 @@ export function getRenderableGasButtonData(
   };
   const fastEstimateData = {
     gasEstimateType: GAS_ESTIMATE_TYPES.FAST,
-    feeInPrimaryCurrency: getRenderableEthFee(fast, gasLimit),
+    feeInPrimaryCurrency: getRenderableEthFee(
+      fast,
+      gasLimit,
+      9,
+      nativeCurrency,
+    ),
     feeInSecondaryCurrency: showFiat
       ? getRenderableConvertedCurrencyFee(
           fast,
@@ -295,7 +316,6 @@ export function getRenderableEstimateDataForSmallButtonsFromGWEI(state) {
         safeLow,
         gasLimit,
         NUMBER_OF_DECIMALS_SM_BTNS,
-        true,
       ),
       priceInHexWei: getGasPriceInHexWei(safeLow, true),
     },
@@ -313,7 +333,6 @@ export function getRenderableEstimateDataForSmallButtonsFromGWEI(state) {
         average,
         gasLimit,
         NUMBER_OF_DECIMALS_SM_BTNS,
-        true,
       ),
       priceInHexWei: getGasPriceInHexWei(average, true),
     },
@@ -331,7 +350,6 @@ export function getRenderableEstimateDataForSmallButtonsFromGWEI(state) {
         fast,
         gasLimit,
         NUMBER_OF_DECIMALS_SM_BTNS,
-        true,
       ),
       priceInHexWei: getGasPriceInHexWei(fast, true),
     },