diff --git a/ui/components/app/asset-list-item/asset-list-item.js b/ui/components/app/asset-list-item/asset-list-item.js index a571ee42b..2badb8bb4 100644 --- a/ui/components/app/asset-list-item/asset-list-item.js +++ b/ui/components/app/asset-list-item/asset-list-item.js @@ -1,4 +1,4 @@ -import React, { useMemo } from 'react'; +import React, { useMemo, useContext } from 'react'; import PropTypes from 'prop-types'; import classnames from 'classnames'; import { useDispatch } from 'react-redux'; @@ -9,11 +9,11 @@ import Tooltip from '../../ui/tooltip'; import InfoIcon from '../../ui/icon/info-icon.component'; import Button from '../../ui/button'; import { useI18nContext } from '../../../hooks/useI18nContext'; -import { useMetricEvent } from '../../../hooks/useMetricEvent'; import { ASSET_TYPES, updateSendAsset } from '../../../ducks/send'; import { SEND_ROUTE } from '../../../helpers/constants/routes'; import { SEVERITIES } from '../../../helpers/constants/design-system'; import { INVALID_ASSET_TYPE } from '../../../helpers/constants/error-keys'; +import { MetaMetricsContext } from '../../../contexts/metametrics.new'; const AssetListItem = ({ className, @@ -33,13 +33,7 @@ const AssetListItem = ({ const t = useI18nContext(); const dispatch = useDispatch(); const history = useHistory(); - const sendTokenEvent = useMetricEvent({ - eventOpts: { - category: 'Navigation', - action: 'Home', - name: 'Clicked Send: Token', - }, - }); + const trackEvent = useContext(MetaMetricsContext); const titleIcon = warning ? ( { e.stopPropagation(); - sendTokenEvent(); + trackEvent({ + event: 'Clicked Send: Token', + category: 'Navigation', + properties: { + action: 'Home', + legacy_event: true, + }, + }); try { await dispatch( updateSendAsset({ @@ -93,7 +94,7 @@ const AssetListItem = ({ ); }, [ tokenSymbol, - sendTokenEvent, + trackEvent, tokenAddress, tokenDecimals, history, diff --git a/ui/components/app/asset-list/asset-list.js b/ui/components/app/asset-list/asset-list.js index c0b1347d0..75be4008d 100644 --- a/ui/components/app/asset-list/asset-list.js +++ b/ui/components/app/asset-list/asset-list.js @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useContext } from 'react'; import PropTypes from 'prop-types'; import { useSelector } from 'react-redux'; import { useHistory } from 'react-router-dom'; @@ -7,7 +7,6 @@ import TokenList from '../token-list'; import { IMPORT_TOKEN_ROUTE } from '../../../helpers/constants/routes'; import AssetListItem from '../asset-list-item'; import { PRIMARY, SECONDARY } from '../../../helpers/constants/common'; -import { useMetricEvent } from '../../../hooks/useMetricEvent'; import { useUserPreferencedCurrency } from '../../../hooks/useUserPreferencedCurrency'; import { getCurrentAccountWithSendEtherInfo, @@ -26,6 +25,7 @@ import { JUSTIFY_CONTENT, } from '../../../helpers/constants/design-system'; import { useI18nContext } from '../../../hooks/useI18nContext'; +import { MetaMetricsContext } from '../../../contexts/metametrics.new'; const AssetList = ({ onClickAsset }) => { const t = useI18nContext(); @@ -35,20 +35,7 @@ const AssetList = ({ onClickAsset }) => { ); const nativeCurrency = useSelector(getNativeCurrency); const showFiat = useSelector(getShouldShowFiat); - const selectTokenEvent = useMetricEvent({ - eventOpts: { - category: 'Navigation', - action: 'Token Menu', - name: 'Clicked Token', - }, - }); - const addTokenEvent = useMetricEvent({ - eventOpts: { - category: 'Navigation', - action: 'Token Menu', - name: 'Clicked "Add Token"', - }, - }); + const trackEvent = useContext(MetaMetricsContext); const { currency: primaryCurrency, @@ -94,7 +81,14 @@ const AssetList = ({ onClickAsset }) => { { onClickAsset(tokenAddress); - selectTokenEvent(); + trackEvent({ + event: 'Clicked Token', + category: 'Navigation', + properties: { + action: 'Token Menu', + legacy_event: true, + }, + }); }} /> @@ -111,7 +105,14 @@ const AssetList = ({ onClickAsset }) => { isMainnet={isMainnet} onClick={() => { history.push(IMPORT_TOKEN_ROUTE); - addTokenEvent(); + trackEvent({ + event: 'Clicked "Add Token"', + category: 'Navigation', + properties: { + action: 'Token Menu', + legacy_event: true, + }, + }); }} /> diff --git a/ui/components/app/edit-gas-display/edit-gas-display.component.js b/ui/components/app/edit-gas-display/edit-gas-display.component.js index f7fc433c9..f6913b2d8 100644 --- a/ui/components/app/edit-gas-display/edit-gas-display.component.js +++ b/ui/components/app/edit-gas-display/edit-gas-display.component.js @@ -35,8 +35,7 @@ import ActionableMessage from '../../ui/actionable-message/actionable-message'; import { I18nContext } from '../../../contexts/i18n'; import GasTiming from '../gas-timing'; - -import { useMetricEvent } from '../../../hooks/useMetricEvent'; +import { MetaMetricsContext } from '../../../contexts/metametrics.new'; export default function EditGasDisplay({ mode = EDIT_GAS_MODES.MODIFY_IN_PLACE, @@ -133,14 +132,7 @@ export default function EditGasDisplay({ errorKey = 'gasEstimatesUnavailableWarning'; } - const clickedAdvancedOptionsMetricsEvent = useMetricEvent({ - eventOpts: { - category: 'Transactions', - action: 'Edit Screen', - name: 'Clicked "Advanced Options"', - }, - }); - + const trackEvent = useContext(MetaMetricsContext); return (
@@ -286,7 +278,14 @@ export default function EditGasDisplay({ className="edit-gas-display__advanced-button" onClick={() => { setShowAdvancedForm(!showAdvancedForm); - clickedAdvancedOptionsMetricsEvent(); + trackEvent({ + event: 'Clicked "Advanced Options"', + category: 'Transactions', + properties: { + action: 'Edit Screen', + legacy_event: true, + }, + }); }} > {t('advancedOptions')}{' '} diff --git a/ui/components/app/import-token-link/import-token-link.component.js b/ui/components/app/import-token-link/import-token-link.component.js index 40e153000..4147a9256 100644 --- a/ui/components/app/import-token-link/import-token-link.component.js +++ b/ui/components/app/import-token-link/import-token-link.component.js @@ -1,22 +1,16 @@ -import React from 'react'; +import React, { useContext } from 'react'; import PropTypes from 'prop-types'; import { useHistory } from 'react-router-dom'; -import { useMetricEvent } from '../../../hooks/useMetricEvent'; import { useI18nContext } from '../../../hooks/useI18nContext'; import { IMPORT_TOKEN_ROUTE } from '../../../helpers/constants/routes'; import Button from '../../ui/button'; import Box from '../../ui/box/box'; import { TEXT_ALIGN } from '../../../helpers/constants/design-system'; import { detectNewTokens } from '../../../store/actions'; +import { MetaMetricsContext } from '../../../contexts/metametrics.new'; export default function ImportTokenLink({ isMainnet }) { - const addTokenEvent = useMetricEvent({ - eventOpts: { - category: 'Navigation', - action: 'Token Menu', - name: 'Clicked "Add Token"', - }, - }); + const trackEvent = useContext(MetaMetricsContext); const t = useI18nContext(); const history = useHistory(); @@ -39,7 +33,14 @@ export default function ImportTokenLink({ isMainnet }) { type="link" onClick={() => { history.push(IMPORT_TOKEN_ROUTE); - addTokenEvent(); + trackEvent({ + event: 'Clicked "Add Token"', + category: 'Navigation', + properties: { + action: 'Token Menu', + legacy_event: true, + }, + }); }} > {isMainnet diff --git a/ui/components/app/menu-bar/account-options-menu.js b/ui/components/app/menu-bar/account-options-menu.js index 5e83f8aec..394958427 100644 --- a/ui/components/app/menu-bar/account-options-menu.js +++ b/ui/components/app/menu-bar/account-options-menu.js @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useContext } from 'react'; import PropTypes from 'prop-types'; import { useHistory } from 'react-router-dom'; import { useDispatch, useSelector } from 'react-redux'; @@ -15,12 +15,10 @@ import { getSelectedIdentity, } from '../../../selectors'; import { useI18nContext } from '../../../hooks/useI18nContext'; -import { - useMetricEvent, - useNewMetricEvent, -} from '../../../hooks/useMetricEvent'; +import { useNewMetricEvent } from '../../../hooks/useMetricEvent'; import { getEnvironmentType } from '../../../../app/scripts/lib/util'; import { ENVIRONMENT_TYPE_FULLSCREEN } from '../../../../shared/constants/app'; +import { MetaMetricsContext } from '../../../contexts/metametrics.new'; export default function AccountOptionsMenu({ anchorElement, onClose }) { const t = useI18nContext(); @@ -35,29 +33,7 @@ export default function AccountOptionsMenu({ anchorElement, onClose }) { const addressLink = getAccountLink(address, chainId, rpcPrefs); const { blockExplorerUrl } = rpcPrefs; const blockExplorerUrlSubTitle = getURLHostName(blockExplorerUrl); - - const openFullscreenEvent = useMetricEvent({ - eventOpts: { - category: 'Navigation', - action: 'Account Options', - name: 'Clicked Expand View', - }, - }); - const viewAccountDetailsEvent = useMetricEvent({ - eventOpts: { - category: 'Navigation', - action: 'Account Options', - name: 'Viewed Account Details', - }, - }); - - const openConnectedSitesEvent = useMetricEvent({ - eventOpts: { - category: 'Navigation', - action: 'Account Options', - name: 'Opened Connected Sites', - }, - }); + const trackEvent = useContext(MetaMetricsContext); const blockExplorerLinkClickedEvent = useNewMetricEvent({ category: 'Navigation', @@ -101,7 +77,14 @@ export default function AccountOptionsMenu({ anchorElement, onClose }) { {getEnvironmentType() === ENVIRONMENT_TYPE_FULLSCREEN ? null : ( { - openFullscreenEvent(); + trackEvent({ + event: 'Clicked Expand View', + category: 'Navigation', + properties: { + action: 'Account Options', + legacy_event: true, + }, + }); global.platform.openExtensionInBrowser(); onClose(); }} @@ -114,7 +97,14 @@ export default function AccountOptionsMenu({ anchorElement, onClose }) { data-testid="account-options-menu__account-details" onClick={() => { dispatch(showModal({ name: 'ACCOUNT_DETAILS' })); - viewAccountDetailsEvent(); + trackEvent({ + event: 'Viewed Account Details', + category: 'Navigation', + properties: { + action: 'Account Options', + legacy_event: true, + }, + }); onClose(); }} iconClassName="fas fa-qrcode" @@ -124,7 +114,14 @@ export default function AccountOptionsMenu({ anchorElement, onClose }) { { - openConnectedSitesEvent(); + trackEvent({ + event: 'Opened Connected Sites', + category: 'Navigation', + properties: { + action: 'Account Options', + legacy_event: true, + }, + }); history.push(CONNECTED_ROUTE); onClose(); }} diff --git a/ui/components/app/menu-bar/menu-bar.js b/ui/components/app/menu-bar/menu-bar.js index b5e3fdb7c..bc3af6362 100644 --- a/ui/components/app/menu-bar/menu-bar.js +++ b/ui/components/app/menu-bar/menu-bar.js @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React, { useState, useContext } from 'react'; import extension from 'extensionizer'; import { useHistory } from 'react-router-dom'; import { useSelector } from 'react-redux'; @@ -8,19 +8,13 @@ import { getEnvironmentType } from '../../../../app/scripts/lib/util'; import { ENVIRONMENT_TYPE_POPUP } from '../../../../shared/constants/app'; import { CONNECTED_ACCOUNTS_ROUTE } from '../../../helpers/constants/routes'; import { useI18nContext } from '../../../hooks/useI18nContext'; -import { useMetricEvent } from '../../../hooks/useMetricEvent'; import { getOriginOfCurrentTab } from '../../../selectors'; +import { MetaMetricsContext } from '../../../contexts/metametrics.new'; import AccountOptionsMenu from './account-options-menu'; export default function MenuBar() { const t = useI18nContext(); - const openAccountOptionsEvent = useMetricEvent({ - eventOpts: { - category: 'Navigation', - action: 'Home', - name: 'Opened Account Options', - }, - }); + const trackEvent = useContext(MetaMetricsContext); const history = useHistory(); const [ accountOptionsButtonElement, @@ -50,7 +44,14 @@ export default function MenuBar() { ref={setAccountOptionsButtonElement} title={t('accountOptions')} onClick={() => { - openAccountOptionsEvent(); + trackEvent({ + event: 'Opened Account Options', + category: 'Navigation', + properties: { + action: 'Home', + legacy_event: true, + }, + }); setAccountOptionsMenuOpen(true); }} /> diff --git a/ui/components/app/transaction-list-item/transaction-list-item.component.js b/ui/components/app/transaction-list-item/transaction-list-item.component.js index e503c294c..f911dcff8 100644 --- a/ui/components/app/transaction-list-item/transaction-list-item.component.js +++ b/ui/components/app/transaction-list-item/transaction-list-item.component.js @@ -1,4 +1,4 @@ -import React, { useMemo, useState, useCallback } from 'react'; +import React, { useMemo, useState, useCallback, useContext } from 'react'; import PropTypes from 'prop-types'; import classnames from 'classnames'; import { useHistory } from 'react-router-dom'; @@ -31,13 +31,13 @@ import { getEIP1559V2Enabled, } from '../../../selectors'; import { isLegacyTransaction } from '../../../helpers/utils/transactions.util'; -import { useMetricEvent } from '../../../hooks/useMetricEvent'; import Button from '../../ui/button'; import AdvancedGasFeePopover from '../advanced-gas-fee-popover'; import CancelButton from '../cancel-button'; import CancelSpeedupPopover from '../cancel-speedup-popover'; import EditGasFeePopover from '../edit-gas-fee-popover'; import EditGasPopover from '../edit-gas-popover'; +import { MetaMetricsContext } from '../../../contexts/metametrics.new'; function TransactionListItemInner({ transactionGroup, @@ -60,26 +60,19 @@ function TransactionListItemInner({ primaryTransaction: { err, status }, } = transactionGroup; - const speedUpMetricsEvent = useMetricEvent({ - eventOpts: { - category: 'Navigation', - action: 'Activity Log', - name: 'Clicked "Speed Up"', - }, - }); - - const cancelMetricsEvent = useMetricEvent({ - eventOpts: { - category: 'Navigation', - action: 'Activity Log', - name: 'Clicked "Cancel"', - }, - }); + const trackEvent = useContext(MetaMetricsContext); const retryTransaction = useCallback( async (event) => { event.stopPropagation(); - speedUpMetricsEvent(); + trackEvent({ + event: 'Clicked "Speed Up"', + category: 'Navigation', + properties: { + action: 'Activity Log', + legacy_event: true, + }, + }); if (supportsEIP1559V2) { setEditGasMode(EDIT_GAS_MODES.SPEED_UP); openModal('cancelSpeedUpTransaction'); @@ -87,13 +80,20 @@ function TransactionListItemInner({ setShowRetryEditGasPopover(true); } }, - [openModal, setEditGasMode, speedUpMetricsEvent, supportsEIP1559V2], + [openModal, setEditGasMode, trackEvent, supportsEIP1559V2], ); const cancelTransaction = useCallback( (event) => { event.stopPropagation(); - cancelMetricsEvent(); + trackEvent({ + event: 'Clicked "Cancel"', + category: 'Navigation', + properties: { + action: 'Activity Log', + legacy_event: true, + }, + }); if (supportsEIP1559V2) { setEditGasMode(EDIT_GAS_MODES.CANCEL); openModal('cancelSpeedUpTransaction'); @@ -101,7 +101,7 @@ function TransactionListItemInner({ setShowCancelEditGasPopover(true); } }, - [cancelMetricsEvent, openModal, setEditGasMode, supportsEIP1559V2], + [trackEvent, openModal, setEditGasMode, supportsEIP1559V2], ); const shouldShowSpeedUp = useShouldShowSpeedUp( diff --git a/ui/components/app/wallet-overview/eth-overview.js b/ui/components/app/wallet-overview/eth-overview.js index 001f84694..8345021bf 100644 --- a/ui/components/app/wallet-overview/eth-overview.js +++ b/ui/components/app/wallet-overview/eth-overview.js @@ -10,10 +10,7 @@ import { SEND_ROUTE, BUILD_QUOTE_ROUTE, } from '../../../helpers/constants/routes'; -import { - useMetricEvent, - useNewMetricEvent, -} from '../../../hooks/useMetricEvent'; +import { useNewMetricEvent } from '../../../hooks/useMetricEvent'; import Tooltip from '../../ui/tooltip'; import UserPreferencedCurrencyDisplay from '../user-preferenced-currency-display'; import { PRIMARY, SECONDARY } from '../../../helpers/constants/common'; @@ -34,25 +31,13 @@ import SendIcon from '../../ui/icon/overview-send-icon.component'; import { setSwapsFromToken } from '../../../ducks/swaps/swaps'; import IconButton from '../../ui/icon-button'; import { isHardwareKeyring } from '../../../helpers/utils/hardware'; +import { MetaMetricsContext } from '../../../contexts/metametrics.new'; import WalletOverview from './wallet-overview'; const EthOverview = ({ className }) => { const dispatch = useDispatch(); const t = useContext(I18nContext); - const sendEvent = useMetricEvent({ - eventOpts: { - category: 'Navigation', - action: 'Home', - name: 'Clicked Send: Eth', - }, - }); - const depositEvent = useMetricEvent({ - eventOpts: { - category: 'Navigation', - action: 'Home', - name: 'Clicked Deposit', - }, - }); + const trackEvent = useContext(MetaMetricsContext); const history = useHistory(); const keyring = useSelector(getCurrentKeyring); const usingHardwareWallet = isHardwareKeyring(keyring?.type); @@ -119,7 +104,14 @@ const EthOverview = ({ className }) => { disabled={!isBuyableChain} label={t('buy')} onClick={() => { - depositEvent(); + trackEvent({ + event: 'Clicked Deposit', + category: 'Navigation', + properties: { + action: 'Home', + legacy_event: true, + }, + }); dispatch(showModal({ name: 'DEPOSIT_ETHER' })); }} /> @@ -129,7 +121,14 @@ const EthOverview = ({ className }) => { Icon={SendIcon} label={t('send')} onClick={() => { - sendEvent(); + trackEvent({ + event: 'Clicked Send: Eth', + category: 'Navigation', + properties: { + action: 'Home', + legacy_event: true, + }, + }); history.push(SEND_ROUTE); }} /> diff --git a/ui/components/app/wallet-overview/token-overview.js b/ui/components/app/wallet-overview/token-overview.js index 5fae06d63..0f4baf3ce 100644 --- a/ui/components/app/wallet-overview/token-overview.js +++ b/ui/components/app/wallet-overview/token-overview.js @@ -12,10 +12,7 @@ import { SEND_ROUTE, BUILD_QUOTE_ROUTE, } from '../../../helpers/constants/routes'; -import { - useMetricEvent, - useNewMetricEvent, -} from '../../../hooks/useMetricEvent'; +import { useNewMetricEvent } from '../../../hooks/useMetricEvent'; import { useTokenTracker } from '../../../hooks/useTokenTracker'; import { useTokenFiatAmount } from '../../../hooks/useTokenFiatAmount'; import { ASSET_TYPES, updateSendAsset } from '../../../ducks/send'; @@ -31,18 +28,13 @@ import SendIcon from '../../ui/icon/overview-send-icon.component'; import IconButton from '../../ui/icon-button'; import { INVALID_ASSET_TYPE } from '../../../helpers/constants/error-keys'; import { showModal } from '../../../store/actions'; +import { MetaMetricsContext } from '../../../contexts/metametrics.new'; import WalletOverview from './wallet-overview'; const TokenOverview = ({ className, token }) => { const dispatch = useDispatch(); const t = useContext(I18nContext); - const sendTokenEvent = useMetricEvent({ - eventOpts: { - category: 'Navigation', - action: 'Home', - name: 'Clicked Send: Token', - }, - }); + const trackEvent = useContext(MetaMetricsContext); const history = useHistory(); const keyring = useSelector(getCurrentKeyring); const usingHardwareWallet = isHardwareKeyring(keyring.type); @@ -95,7 +87,14 @@ const TokenOverview = ({ className, token }) => { { - sendTokenEvent(); + trackEvent({ + event: 'Clicked Send: Token', + category: 'Navigation', + properties: { + action: 'Home', + legacy_event: true, + }, + }); try { await dispatch( updateSendAsset({ diff --git a/ui/hooks/useMetricEvent.js b/ui/hooks/useMetricEvent.js index f6e44574a..a4cc077c8 100644 --- a/ui/hooks/useMetricEvent.js +++ b/ui/hooks/useMetricEvent.js @@ -1,7 +1,6 @@ import { useContext, useCallback } from 'react'; import { useSelector } from 'react-redux'; import { useRouteMatch } from 'react-router-dom'; -import { MetaMetricsContext } from '../contexts/metametrics'; import { MetaMetricsContext as NewMetaMetricsContext } from '../contexts/metametrics.new'; import { PATH_NAME_MAP } from '../helpers/constants/routes'; import { txDataSelector } from '../selectors'; @@ -13,16 +12,6 @@ import { useEqualityCheck } from './useEqualityCheck'; * @typedef {import('../../shared/constants/metametrics').MetaMetricsEventOptions} MetaMetricsEventOptions */ -export function useMetricEvent(config = {}, overrides = {}) { - const metricsEvent = useContext(MetaMetricsContext); - const trackEvent = useCallback(() => metricsEvent(config, overrides), [ - config, - metricsEvent, - overrides, - ]); - return trackEvent; -} - /** * track a metametrics event using segment * e.g metricsEvent({ event: 'Unlocked MetaMask', category: 'Navigation' }) diff --git a/ui/pages/onboarding-flow/creation-successful/creation-successful.js b/ui/pages/onboarding-flow/creation-successful/creation-successful.js index fad8fe801..e5d858d86 100644 --- a/ui/pages/onboarding-flow/creation-successful/creation-successful.js +++ b/ui/pages/onboarding-flow/creation-successful/creation-successful.js @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useContext } from 'react'; import { useHistory } from 'react-router-dom'; import { useDispatch, useSelector } from 'react-redux'; import Box from '../../../components/ui/box'; @@ -15,8 +15,8 @@ import { ONBOARDING_PRIVACY_SETTINGS_ROUTE, } from '../../../helpers/constants/routes'; import { setCompletedOnboarding } from '../../../store/actions'; -import { useMetricEvent } from '../../../hooks/useMetricEvent'; import { getFirstTimeFlowType } from '../../../selectors'; +import { MetaMetricsContext } from '../../../contexts/metametrics.new'; export default function CreationSuccessful() { const firstTimeFlowTypeNameMap = { @@ -28,15 +28,18 @@ export default function CreationSuccessful() { const dispatch = useDispatch(); const firstTimeFlowType = useSelector(getFirstTimeFlowType); - const onboardingCompletedEvent = useMetricEvent({ - category: 'Onboarding', - action: 'Onboarding Complete', - name: firstTimeFlowTypeNameMap[firstTimeFlowType], - }); + const trackEvent = useContext(MetaMetricsContext); const onComplete = async () => { await dispatch(setCompletedOnboarding()); - onboardingCompletedEvent(); + trackEvent({ + event: firstTimeFlowTypeNameMap[firstTimeFlowType], + category: 'Onboarding', + properties: { + action: 'Onboarding Complete', + legacy_event: true, + }, + }); history.push(ONBOARDING_PIN_EXTENSION_ROUTE); }; return ( diff --git a/ui/pages/send/send-content/send-amount-row/amount-max-button/amount-max-button.js b/ui/pages/send/send-content/send-amount-row/amount-max-button/amount-max-button.js index f7b763d70..5144ae928 100644 --- a/ui/pages/send/send-content/send-amount-row/amount-max-button/amount-max-button.js +++ b/ui/pages/send/send-content/send-amount-row/amount-max-button/amount-max-button.js @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useContext } from 'react'; import classnames from 'classnames'; import { useDispatch, useSelector } from 'react-redux'; import { @@ -7,23 +7,24 @@ import { toggleSendMaxMode, } from '../../../../../ducks/send'; import { useI18nContext } from '../../../../../hooks/useI18nContext'; -import { useMetricEvent } from '../../../../../hooks/useMetricEvent'; +import { MetaMetricsContext } from '../../../../../contexts/metametrics.new'; export default function AmountMaxButton() { const isDraftTransactionInvalid = useSelector(isSendFormInvalid); const maxModeOn = useSelector(getSendMaxModeState); const dispatch = useDispatch(); - const trackClickedMax = useMetricEvent({ - eventOpts: { - category: 'Transactions', - action: 'Edit Screen', - name: 'Clicked "Amount Max"', - }, - }); + const trackEvent = useContext(MetaMetricsContext); const t = useI18nContext(); const onMaxClick = () => { - trackClickedMax(); + trackEvent({ + event: 'Clicked "Amount Max"', + category: 'Transactions', + properties: { + action: 'Edit Screen', + legacy_event: true, + }, + }); dispatch(toggleSendMaxMode()); }; diff --git a/ui/pages/send/send.js b/ui/pages/send/send.js index 3c5515867..aa9c38c6b 100644 --- a/ui/pages/send/send.js +++ b/ui/pages/send/send.js @@ -1,4 +1,4 @@ -import React, { useEffect, useCallback } from 'react'; +import React, { useEffect, useCallback, useContext } from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { useHistory, useLocation } from 'react-router-dom'; import { @@ -16,7 +16,7 @@ import { import { getCurrentChainId, isCustomPriceExcessive } from '../../selectors'; import { getSendHexDataFeatureFlagState } from '../../ducks/metamask/metamask'; import { showQrScanner } from '../../store/actions'; -import { useMetricEvent } from '../../hooks/useMetricEvent'; +import { MetaMetricsContext } from '../../contexts/metametrics.new'; import SendHeader from './send-header'; import AddRecipient from './send-content/add-recipient'; import SendContent from './send-content'; @@ -38,13 +38,7 @@ export default function SendTransactionScreen() { const showHexData = useSelector(getSendHexDataFeatureFlagState); const userInput = useSelector(getRecipientUserInput); const location = useLocation(); - const trackUsedQRScanner = useMetricEvent({ - eventOpts: { - category: 'Transactions', - action: 'Edit Screen', - name: 'Used QR scanner', - }, - }); + const trackEvent = useContext(MetaMetricsContext); const dispatch = useDispatch(); @@ -109,7 +103,14 @@ export default function SendTransactionScreen() { onPaste={(text) => updateRecipient({ address: text, nickname: '' })} onReset={() => dispatch(resetRecipientInput())} scanQrCode={() => { - trackUsedQRScanner(); + trackEvent({ + event: 'Used QR scanner', + category: 'Transactions', + properties: { + action: 'Edit Screen', + legacy_event: true, + }, + }); dispatch(showQrScanner()); }} />