From bcd5f2a7c197db84ea7858f49ac3dc3ddd0076ed Mon Sep 17 00:00:00 2001 From: Dan J Miller Date: Tue, 10 Nov 2020 14:09:45 -0330 Subject: [PATCH] Fix gas_fees properties collected for swaps analytics events (#9727) --- app/scripts/metamask-controller.js | 2 +- ...gas-modal-page-container-container.test.js | 1 + ui/app/ducks/swaps/swaps.js | 11 ++++---- ui/app/helpers/utils/conversions.util.js | 25 ++++++++++++++++--- .../swaps/awaiting-swap/awaiting-swap.js | 12 ++++----- ...swaps-gas-customization-modal.component.js | 15 ++++------- ...swaps-gas-customization-modal.container.js | 4 +-- ui/app/selectors/selectors.js | 4 +++ 8 files changed, 45 insertions(+), 29 deletions(-) diff --git a/app/scripts/metamask-controller.js b/app/scripts/metamask-controller.js index 93302fca2..41cb53d75 100644 --- a/app/scripts/metamask-controller.js +++ b/app/scripts/metamask-controller.js @@ -155,7 +155,7 @@ export default class MetamaskController extends EventEmitter { }) this.currencyRateController = new CurrencyRateController( - undefined, + { includeUSDRate: true }, initState.CurrencyController, ) diff --git a/ui/app/components/app/gas-customization/gas-modal-page-container/tests/gas-modal-page-container-container.test.js b/ui/app/components/app/gas-customization/gas-modal-page-container/tests/gas-modal-page-container-container.test.js index c8206d295..3db624ece 100644 --- a/ui/app/components/app/gas-customization/gas-modal-page-container/tests/gas-modal-page-container-container.test.js +++ b/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, }, diff --git a/ui/app/ducks/swaps/swaps.js b/ui/app/ducks/swaps/swaps.js index 817f2f43f..663af8a4e 100644 --- a/ui/app/ducks/swaps/swaps.js +++ b/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), diff --git a/ui/app/helpers/utils/conversions.util.js b/ui/app/helpers/utils/conversions.util.js index e3f09bcd5..a61043dbc 100644 --- a/ui/app/helpers/utils/conversions.util.js +++ b/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) } diff --git a/ui/app/pages/swaps/awaiting-swap/awaiting-swap.js b/ui/app/pages/swaps/awaiting-swap/awaiting-swap.js index 7e2430d63..573bce37a 100644 --- a/ui/app/pages/swaps/awaiting-swap/awaiting-swap.js +++ b/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', }) diff --git a/ui/app/pages/swaps/swaps-gas-customization-modal/swaps-gas-customization-modal.component.js b/ui/app/pages/swaps/swaps-gas-customization-modal/swaps-gas-customization-modal.component.js index d39a65863..e383aa127 100644 --- a/ui/app/pages/swaps/swaps-gas-customization-modal/swaps-gas-customization-modal.component.js +++ b/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), }, }) 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 37545c9e7..fc42f45f7 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 @@ -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, } } diff --git a/ui/app/selectors/selectors.js b/ui/app/selectors/selectors.js index 7a1a8f2e0..8eff1b6e6 100644 --- a/ui/app/selectors/selectors.js +++ b/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 +}