Remove usages of useMetricEvent hook (#13930)

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 ? (
     <Tooltip
       wrapperClassName="asset-list-item__warning-tooltip"
@@ -68,7 +62,14 @@ const AssetListItem = ({
         className="asset-list-item__send-token-button"
         onClick={async (e) => {
           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,

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 }) => {
       <TokenList
         onTokenClick={(tokenAddress) => {
           onClickAsset(tokenAddress);
-          selectTokenEvent();
+          trackEvent({
+            event: 'Clicked Token',
+            category: 'Navigation',
+            properties: {
+              action: 'Token Menu',
+              legacy_event: true,
+            },
+          });
         }}
       />
       <Box marginTop={4}>
@@ -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,
+              },
+            });
           }}
         />
       </Box>

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 (
     <div className="edit-gas-display">
       <div className="edit-gas-display__content">
@@ -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')}{' '}

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

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 : (
         <MenuItem
           onClick={() => {
-            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 }) {
       <MenuItem
         data-testid="account-options-menu__connected-sites"
         onClick={() => {
-          openConnectedSitesEvent();
+          trackEvent({
+            event: 'Opened Connected Sites',
+            category: 'Navigation',
+            properties: {
+              action: 'Account Options',
+              legacy_event: true,
+            },
+          });
           history.push(CONNECTED_ROUTE);
           onClose();
         }}

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);
         }}
       />

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(

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);
             }}
           />

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 }) => {
           <IconButton
             className="token-overview__button"
             onClick={async () => {
-              sendTokenEvent();
+              trackEvent({
+                event: 'Clicked Send: Token',
+                category: 'Navigation',
+                properties: {
+                  action: 'Home',
+                  legacy_event: true,
+                },
+              });
               try {
                 await dispatch(
                   updateSendAsset({

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' })

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 (

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());
   };
 

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());
         }}
       />