Fix gas_fees properties collected for swaps analytics events (#9727)

app/scripts/metamask-controller.js

@@ -155,7 +155,7 @@ export default class MetamaskController extends EventEmitter {
     })
 
     this.currencyRateController = new CurrencyRateController(
-      undefined,
+      { includeUSDRate: true },
       initState.CurrencyController,
     )
 

ui/app/components/app/gas-customization/gas-modal-page-container/tests/gas-modal-page-container-container.test.js

@@ -77,6 +77,7 @@ describe('gas-modal-page-container container', function () {
           },
           currentCurrency: 'abc',
           conversionRate: 50,
+          usdConversionRate: 123,
           preferences: {
             showFiatInTestnets: false,
           },

ui/app/ducks/swaps/swaps.js

@@ -49,7 +49,7 @@ import { calcTokenAmount } from '../../helpers/utils/token-util'
 import {
   getSelectedAccount,
   getTokenExchangeRates,
-  conversionRateSelector as getConversionRate,
+  getUSDConversionRate,
 } from '../../selectors'
 import {
   ERROR_FETCHING_QUOTES,
@@ -58,7 +58,6 @@ import {
   SWAP_FAILED_ERROR,
   SWAPS_FETCH_ORDER_CONFLICT,
 } from '../../helpers/constants/swaps'
-import { formatCurrency } from '../../helpers/utils/confirm-tx.util'
 import { TRANSACTION_CATEGORIES } from '../../../../shared/constants/transaction'
 
 const GAS_PRICES_LOADING_STATES = {
@@ -613,7 +612,7 @@ export const signAndSendTransactions = (history, metaMetricsEvent) => {
     usedTradeTxParams.gas = maxGasLimit
     usedTradeTxParams.gasPrice = usedGasPrice
 
-    const conversionRate = getConversionRate(state)
+    const usdConversionRate = getUSDConversionRate(state)
     const destinationValue = calcTokenAmount(
       usedQuote.destinationAmount,
       destinationTokenInfo.decimals || 18,
@@ -624,10 +623,10 @@ export const signAndSendTransactions = (history, metaMetricsEvent) => {
     const totalGasLimitEstimate = new BigNumber(usedGasLimitEstimate, 16)
       .plus(usedQuote.approvalNeeded?.gas || '0x0', 16)
       .toString(16)
-    const gasEstimateTotalInEth = getValueFromWeiHex({
+    const gasEstimateTotalInUSD = getValueFromWeiHex({
       value: calcGasTotal(totalGasLimitEstimate, usedGasPrice),
       toCurrency: 'usd',
-      conversionRate,
+      conversionRate: usdConversionRate,
       numberOfDecimals: 6,
     })
 
@@ -646,7 +645,7 @@ export const signAndSendTransactions = (history, metaMetricsEvent) => {
         usedQuote.aggregator === getTopQuote(state)?.aggregator
           ? ''
           : usedQuote.aggregator,
-      gas_fees: formatCurrency(gasEstimateTotalInEth, 'usd')?.slice(1),
+      gas_fees: gasEstimateTotalInUSD,
       estimated_gas: estimatedGasLimit.toString(10),
       suggested_gas_price: fastGasEstimate,
       used_gas_price: hexWEIToDecGWEI(usedGasPrice),

ui/app/helpers/utils/conversions.util.js

@@ -182,13 +182,17 @@ export function addHexes(aHexWEI, bHexWEI) {
   })
 }
 
-export function sumHexWEIsToRenderableFiat(
+export function sumHexWEIs(hexWEIs) {
+  return hexWEIs.filter((n) => n).reduce(addHexes)
+}
+
+export function sumHexWEIsToUnformattedFiat(
   hexWEIs,
   convertedCurrency,
   conversionRate,
 ) {
-  const hexWEIsSum = hexWEIs.filter((n) => n).reduce(addHexes)
+  const hexWEIsSum = sumHexWEIs(hexWEIs)
-  const ethTotal = decEthToConvertedCurrency(
+  const convertedTotal = decEthToConvertedCurrency(
     getValueFromWeiHex({
       value: hexWEIsSum,
       toCurrency: 'ETH',
@@ -197,5 +201,18 @@ export function sumHexWEIsToRenderableFiat(
     convertedCurrency,
     conversionRate,
   )
-  return formatCurrency(ethTotal, convertedCurrency)
+  return convertedTotal
+}
+
+export function sumHexWEIsToRenderableFiat(
+  hexWEIs,
+  convertedCurrency,
+  conversionRate,
+) {
+  const convertedTotal = sumHexWEIsToUnformattedFiat(
+    hexWEIs,
+    convertedCurrency,
+    conversionRate,
+  )
+  return formatCurrency(convertedTotal, convertedCurrency)
 }

ui/app/pages/swaps/awaiting-swap/awaiting-swap.js

@@ -7,7 +7,7 @@ import { useHistory } from 'react-router-dom'
 import { I18nContext } from '../../../contexts/i18n'
 import { useNewMetricEvent } from '../../../hooks/useMetricEvent'
 import { MetaMetricsContext } from '../../../contexts/metametrics.new'
-import { getCurrentCurrency, conversionRateSelector } from '../../../selectors'
+import { getCurrentCurrency, getUSDConversionRate } from '../../../selectors'
 import {
   getUsedQuote,
   getFetchParams,
@@ -69,14 +69,14 @@ export default function AwaitingSwap({
   const approveTxParams = useSelector(getApproveTxParams)
   const swapsGasPrice = useSelector(getUsedSwapsGasPrice)
   const currentCurrency = useSelector(getCurrentCurrency)
-  const conversionRate = useSelector(conversionRateSelector)
+  const usdConversionRate = useSelector(getUSDConversionRate)
 
   const [timeRemainingExpired, setTimeRemainingExpired] = useState(false)
   const [trackedQuotesExpiredEvent, setTrackedQuotesExpiredEvent] = useState(
     false,
   )
 
-  let feeinFiat
+  let feeinUnformattedFiat
 
   if (usedQuote && swapsGasPrice) {
     const renderableNetworkFees = getRenderableNetworkFeesForQuote(
@@ -84,12 +84,12 @@ export default function AwaitingSwap({
       approveTxParams?.gas || '0x0',
       swapsGasPrice,
       currentCurrency,
-      conversionRate,
+      usdConversionRate,
       usedQuote?.trade?.value,
       sourceTokenInfo?.symbol,
       usedQuote.sourceAmount,
     )
-    feeinFiat = renderableNetworkFees.feeinFiat?.slice(1)
+    feeinUnformattedFiat = renderableNetworkFees.rawNetworkFees
   }
 
   const quotesExpiredEvent = useNewMetricEvent({
@@ -101,7 +101,7 @@ export default function AwaitingSwap({
       request_type: fetchParams?.balanceError ? 'Quote' : 'Order',
       slippage: fetchParams?.slippage,
       custom_slippage: fetchParams?.slippage === 2,
-      gas_fees: feeinFiat,
+      gas_fees: feeinUnformattedFiat,
     },
     category: 'swaps',
   })

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

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import PageContainer from '../../../components/ui/page-container'
 import { Tabs, Tab } from '../../../components/ui/tabs'
 import { calcGasTotal } from '../../send/send.utils'
-import { sumHexWEIsToRenderableFiat } from '../../../helpers/utils/conversions.util'
+import { sumHexWEIsToUnformattedFiat } from '../../../helpers/utils/conversions.util'
 import AdvancedGasInputs from '../../../components/app/gas-customization/advanced-gas-inputs'
 import BasicTabContent from '../../../components/app/gas-customization/gas-modal-page-container/basic-tab-content'
 import { GAS_ESTIMATE_TYPES } from '../../../helpers/constants/common'
@@ -35,8 +35,7 @@ export default class GasModalPageContainer extends Component {
     disableSave: PropTypes.bool,
     customGasLimitMessage: PropTypes.string,
     customTotalSupplement: PropTypes.string,
-    value: PropTypes.string,
+    usdConversionRate: PropTypes.string,
-    conversionRate: PropTypes.string,
     customGasPrice: PropTypes.string,
     customGasLimit: PropTypes.string,
     setSwapsCustomizationModalPrice: PropTypes.func,
@@ -246,14 +245,10 @@ export default class GasModalPageContainer extends Component {
               category: 'swaps',
               properties: {
                 speed_set: this.state.gasSpeedType,
-                gas_fees: sumHexWEIsToRenderableFiat(
+                gas_fees: sumHexWEIsToUnformattedFiat(
-                  [
+                  [newSwapGasTotal, this.props.customTotalSupplement],
-                    this.props.value,
-                    newSwapGasTotal,
-                    this.props.customTotalSupplement,
-                  ],
                   'usd',
-                  this.props.conversionRate,
+                  this.props.usdConversionRate,
                 )?.slice(1),
               },
             })

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

@@ -6,6 +6,7 @@ import {
   getCurrentEthBalance,
   getDefaultActiveButtonIndex,
   getRenderableGasButtonData,
+  getUSDConversionRate,
 } from '../../../selectors'
 
 import {
@@ -118,8 +119,7 @@ const mapStateToProps = (state) => {
     insufficientBalance,
     customGasLimitMessage,
     customTotalSupplement,
-    conversionRate,
+    usdConversionRate: getUSDConversionRate(state),
-    value,
     disableSave: insufficientBalance,
   }
 }

ui/app/selectors/selectors.js

@@ -359,3 +359,7 @@ export function getOriginOfCurrentTab(state) {
 export function getIpfsGateway(state) {
   return state.metamask.ipfsGateway
 }
+
+export function getUSDConversionRate(state) {
+  return state.metamask.usdConversionRate
+}