Fix gas_fees properties collected for swaps analytics events

app/scripts/metamask-controller.js

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

package.json

@@ -70,7 +70,7 @@
     "@formatjs/intl-relativetimeformat": "^5.2.6",
     "@fortawesome/fontawesome-free": "^5.13.0",
     "@material-ui/core": "^4.11.0",
-    "@metamask/controllers": "^3.1.0",
+    "@metamask/controllers": "^3.2.0",
     "@metamask/eth-ledger-bridge-keyring": "^0.2.6",
     "@metamask/eth-token-tracker": "^3.0.1",
     "@metamask/etherscan-link": "^1.2.0",

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

@@ -76,6 +76,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 ethTotal = decEthToConvertedCurrency(
+  const hexWEIsSum = sumHexWEIs(hexWEIs)
+  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,27 +69,27 @@ 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(
       usedQuote.gasEstimateWithRefund || usedQuote.averageGas,
       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({
@@ -102,7 +102,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,
-    conversionRate: PropTypes.string,
+    usdConversionRate: 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(
-                  [
-                    this.props.value,
-                    newSwapGasTotal,
-                    this.props.customTotalSupplement,
-                  ],
+                gas_fees: sumHexWEIsToUnformattedFiat(
+                  [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,
-    value,
+    usdConversionRate: getUSDConversionRate(state),
     disableSave: insufficientBalance,
   }
 }

ui/app/selectors/selectors.js

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

yarn.lock

@@ -2233,7 +2233,7 @@
     prop-types "^15.7.2"
     react-is "^16.8.0"
 
-"@metamask/controllers@^3.1.0":
+"@metamask/controllers@^3.1.0", "@metamask/controllers@^3.2.0":
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/@metamask/controllers/-/controllers-3.2.0.tgz#8ad2e63f7953d294712d9b5bacaea1c5261ce588"
   integrity sha512-Nysutcny5ddsr4eP4XvYuNMAwMqvCO/krughnNUzT69LljslutJyxS2MnT0MnWyKYNa6+CBaV9gxdV+Mm6fAFA==