From 42d2ece8c22a63b096f8f06097984d9a64433abc Mon Sep 17 00:00:00 2001 From: Dan Miller Date: Mon, 29 Mar 2021 12:08:03 -0230 Subject: [PATCH] Ensure that the correct default currency symbols are used for fees on the view quote screen --- ui/app/helpers/utils/formatters.js | 5 ++- ...swaps-gas-customization-modal.container.js | 41 ++++++++++++------- ui/app/pages/swaps/swaps.util.js | 7 +++- ui/app/pages/swaps/view-quote/view-quote.js | 4 ++ ui/app/selectors/custom-gas.js | 34 +++++++++++---- 5 files changed, 65 insertions(+), 26 deletions(-) diff --git a/ui/app/helpers/utils/formatters.js b/ui/app/helpers/utils/formatters.js index c75e30f1cfe5..710770bf33fb 100644 --- a/ui/app/helpers/utils/formatters.js +++ b/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}`; } diff --git a/ui/app/pages/swaps/swaps-gas-customization-modal/swaps-gas-customization-modal.container.js b/ui/app/pages/swaps/swaps-gas-customization-modal/swaps-gas-customization-modal.container.js index 2a717fc36c5f..15efd88d6097 100644 --- a/ui/app/pages/swaps/swaps-gas-customization-modal/swaps-gas-customization-modal.container.js +++ b/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, ); } diff --git a/ui/app/pages/swaps/swaps.util.js b/ui/app/pages/swaps/swaps.util.js index 21370786d458..f4da20606f8b 100644 --- a/ui/app/pages/swaps/swaps.util.js +++ b/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, }; } diff --git a/ui/app/pages/swaps/view-quote/view-quote.js b/ui/app/pages/swaps/view-quote/view-quote.js index 02cf4b4647ea..59537781d46a 100644 --- a/ui/app/pages/swaps/view-quote/view-quote.js +++ b/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); diff --git a/ui/app/selectors/custom-gas.js b/ui/app/selectors/custom-gas.js index 2ac6b4767851..c84c48c71443 100644 --- a/ui/app/selectors/custom-gas.js +++ b/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), },