Removed metrics event (#14042)

3 years ago · ee89eddb82
parent 53006d4cf0
commit ee89eddb82
41 changed files with 462 additions and 391 deletions
--- a/test/lib/render-helpers.js
+++ b/test/lib/render-helpers.js
@ -31,12 +31,14 @@ export function mountWithRouter(component, store = {}, pathname = '/') {
      router,
      t: (str) => str,
      metricsEvent: () => undefined,
+      trackEvent: () => undefined,
      store,
    },
    childContextTypes: {
      router: PropTypes.object,
      t: PropTypes.func,
      metricsEvent: PropTypes.func,
+      trackEvent: PropTypes.func,
      store: PropTypes.object,
    },
  });
--- a/ui/components/app/account-menu/account-menu.component.js
+++ b/ui/components/app/account-menu/account-menu.component.js
@ -68,7 +68,7 @@ AccountMenuItem.propTypes = {
 export default class AccountMenu extends Component {
  static contextTypes = {
    t: PropTypes.func,
-    metricsEvent: PropTypes.func,
+    trackEvent: PropTypes.func,
  };

  static propTypes = {
@ -196,11 +196,12 @@ export default class AccountMenu extends Component {
        <div
          className="account-menu__account account-menu__item--clickable"
          onClick={() => {
-            this.context.metricsEvent({
-              eventOpts: {
+            this.context.trackEvent({
              category: 'Navigation',
+              event: 'Switched Account',
+              properties: {
                action: 'Main Menu',
-                name: 'Switched Account',
+                legacy_event: true,
              },
            });
            showAccountDetail(identity.address);
@ -284,7 +285,7 @@ export default class AccountMenu extends Component {
  }

  render() {
-    const { t, metricsEvent } = this.context;
+    const { t, trackEvent } = this.context;
    const {
      shouldShowAccountsSearch,
      isAccountMenuOpen,
@ -338,11 +339,12 @@ export default class AccountMenu extends Component {
        <AccountMenuItem
          onClick={() => {
            toggleAccountMenu();
-            metricsEvent({
-              eventOpts: {
+            trackEvent({
              category: 'Navigation',
+              event: 'Clicked Create Account',
+              properties: {
                action: 'Main Menu',
-                name: 'Clicked Create Account',
+                legacy_event: true,
              },
            });
            history.push(NEW_ACCOUNT_ROUTE);
@ -353,11 +355,12 @@ export default class AccountMenu extends Component {
        <AccountMenuItem
          onClick={() => {
            toggleAccountMenu();
-            metricsEvent({
-              eventOpts: {
+            trackEvent({
              category: 'Navigation',
+              event: 'Clicked Import Account',
+              properties: {
                action: 'Main Menu',
-                name: 'Clicked Import Account',
+                legacy_event: true,
              },
            });
            history.push(IMPORT_ACCOUNT_ROUTE);
@ -373,11 +376,12 @@ export default class AccountMenu extends Component {
        <AccountMenuItem
          onClick={() => {
            toggleAccountMenu();
-            metricsEvent({
-              eventOpts: {
+            trackEvent({
              category: 'Navigation',
+              event: 'Clicked Connect Hardware',
+              properties: {
                action: 'Main Menu',
-                name: 'Clicked Connect Hardware',
+                legacy_event: true,
              },
            });
            if (getEnvironmentType() === ENVIRONMENT_TYPE_POPUP) {
@ -412,11 +416,12 @@ export default class AccountMenu extends Component {
          onClick={() => {
            toggleAccountMenu();
            history.push(SETTINGS_ROUTE);
-            this.context.metricsEvent({
-              eventOpts: {
+            this.context.trackEvent({
              category: 'Navigation',
+              event: 'Opened Settings',
+              properties: {
                action: 'Main Menu',
-                name: 'Opened Settings',
+                legacy_event: true,
              },
            });
          }}
--- a/ui/components/app/app-header/app-header.component.js
+++ b/ui/components/app/app-header/app-header.component.js
@ -24,7 +24,7 @@ export default class AppHeader extends PureComponent {

  static contextTypes = {
    t: PropTypes.func,
-    metricsEvent: PropTypes.func,
+    trackEvent: PropTypes.func,
  };

  handleNetworkIndicatorClick(event) {
@ -44,11 +44,12 @@ export default class AppHeader extends PureComponent {
    }

    if (networkDropdownOpen === false) {
-      this.context.metricsEvent({
-        eventOpts: {
+      this.context.trackEvent({
        category: 'Navigation',
+        event: 'Opened Network Menu',
+        properties: {
          action: 'Home',
-          name: 'Opened Network Menu',
+          legacy_event: true,
        },
      });
      showNetworkDropdown();
@ -75,11 +76,12 @@ export default class AppHeader extends PureComponent {
          onClick={() => {
            if (!disabled) {
              !isAccountMenuOpen &&
-                this.context.metricsEvent({
-                  eventOpts: {
+                this.context.trackEvent({
                  category: 'Navigation',
+                  event: 'Opened Main Menu',
+                  properties: {
                    action: 'Home',
-                    name: 'Opened Main Menu',
+                    legacy_event: true,
                  },
                });
              toggleAccountMenu();
--- a/ui/components/app/app-header/app-header.test.js
+++ b/ui/components/app/app-header/app-header.test.js
@ -29,7 +29,7 @@ describe('App Header', () => {
    wrapper = shallow(<AppHeader.WrappedComponent {...props} />, {
      context: {
        t: (str) => str,
-        metricsEvent: () => undefined,
+        trackEvent: () => undefined,
      },
    });
  });
--- a/ui/components/app/create-new-vault/create-new-vault.js
+++ b/ui/components/app/create-new-vault/create-new-vault.js
@ -1,7 +1,7 @@
 import React, { useCallback, useContext, useState } from 'react';
 import PropTypes from 'prop-types';
 import { useI18nContext } from '../../../hooks/useI18nContext';
-import { MetaMetricsContext } from '../../../contexts/metametrics';
+import { MetaMetricsContext } from '../../../contexts/metametrics.new';
 import TextField from '../../ui/text-field';
 import Button from '../../ui/button';
 import CheckBox from '../../ui/check-box';
@ -22,7 +22,7 @@ export default function CreateNewVault({
  const [termsChecked, setTermsChecked] = useState(false);

  const t = useI18nContext();
-  const metricsEvent = useContext(MetaMetricsContext);
+  const trackEvent = useContext(MetaMetricsContext);

  const onPasswordChange = useCallback(
    (newPassword) => {
@ -82,16 +82,17 @@ export default function CreateNewVault({
  );

  const toggleTermsCheck = useCallback(() => {
-    metricsEvent({
-      eventOpts: {
+    trackEvent({
      category: 'Onboarding',
+      event: 'Check ToS',
+      properties: {
        action: 'Import Seed Phrase',
-        name: 'Check ToS',
+        legacy_event: true,
      },
    });

    setTermsChecked((currentTermsChecked) => !currentTermsChecked);
-  }, [metricsEvent]);
+  }, [trackEvent]);

  const termsOfUse = t('acceptTermsOfUse', [
    <a
--- a/ui/components/app/dropdowns/network-dropdown.js
+++ b/ui/components/app/dropdowns/network-dropdown.js
@ -79,7 +79,7 @@ function mapDispatchToProps(dispatch) {
 class NetworkDropdown extends Component {
  static contextTypes = {
    t: PropTypes.func,
-    metricsEvent: PropTypes.func,
+    trackEvent: PropTypes.func,
  };

  static propTypes = {
@ -107,15 +107,14 @@ class NetworkDropdown extends Component {
      provider: { type: providerType },
      setProviderType,
    } = this.props;
-    const { metricsEvent } = this.context;
+    const { trackEvent } = this.context;

-    metricsEvent({
-      eventOpts: {
+    trackEvent({
      category: 'Navigation',
+      event: 'Switched Networks',
+      properties: {
        action: 'Home',
-        name: 'Switched Networks',
-      },
-      customVariables: {
+        legacy_event: true,
        fromNetwork: providerType,
        toNetwork: newProviderType,
      },
--- a/ui/components/app/gas-customization/gas-modal-page-container/gas-modal-page-container.component.js
+++ b/ui/components/app/gas-customization/gas-modal-page-container/gas-modal-page-container.component.js
@ -14,7 +14,6 @@ import BasicTabContent from './basic-tab-content';
 export default class GasModalPageContainer extends Component {
  static contextTypes = {
    t: PropTypes.func,
-    metricsEvent: PropTypes.func,
    trackEvent: PropTypes.func,
  };

@ -219,11 +218,12 @@ export default class GasModalPageContainer extends Component {
          onClose={() => cancelAndClose()}
          onSubmit={() => {
            if (isSpeedUp) {
-              this.context.metricsEvent({
-                eventOpts: {
+              this.context.trackEvent({
                category: 'Navigation',
+                event: 'Saved "Speed Up"',
+                properties: {
                  action: 'Activity Log',
-                  name: 'Saved "Speed Up"',
+                  legacy_event: true,
                },
              });
            }
--- a/ui/components/app/modals/deposit-ether-modal/deposit-ether-modal.component.js
+++ b/ui/components/app/modals/deposit-ether-modal/deposit-ether-modal.component.js
@ -13,7 +13,7 @@ import LogoDepositEth from '../../../ui/logo/logo-deposit-eth';
 export default class DepositEtherModal extends Component {
  static contextTypes = {
    t: PropTypes.func,
-    metricsEvent: PropTypes.func.isRequired,
+    trackEvent: PropTypes.func.isRequired,
  };

  static propTypes = {
@ -136,11 +136,12 @@ export default class DepositEtherModal extends Component {
              text: t('buyCryptoWithTransakDescription', [symbol]),
              buttonLabel: t('continueToTransak'),
              onButtonClick: () => {
-                this.context.metricsEvent({
-                  eventOpts: {
+                this.context.trackEvent({
                  category: 'Accounts',
+                  event: 'Click buy Ether via Transak',
+                  properties: {
                    action: 'Deposit Ether',
-                    name: 'Click buy Ether via Transak',
+                    legacy_event: true,
                  },
                });
                toTransak(address, chainId);
--- a/ui/components/app/modals/metametrics-opt-in-modal/metametrics-opt-in-modal.component.js
+++ b/ui/components/app/modals/metametrics-opt-in-modal/metametrics-opt-in-modal.component.js
@ -10,12 +10,12 @@ export default class MetaMetricsOptInModal extends Component {
  };

  static contextTypes = {
-    metricsEvent: PropTypes.func,
+    trackEvent: PropTypes.func,
    t: PropTypes.func,
  };

  render() {
-    const { metricsEvent, t } = this.context;
+    const { trackEvent, t } = this.context;
    const { setParticipateInMetaMetrics, hideModal } = this.props;

    return (
@ -108,16 +108,17 @@ export default class MetaMetricsOptInModal extends Component {
            <PageContainerFooter
              onCancel={() => {
                setParticipateInMetaMetrics(false).then(() => {
-                  metricsEvent(
+                  trackEvent(
                    {
-                      eventOpts: {
                      category: 'Onboarding',
+                      event: 'Metrics Opt Out',
+                      properties: {
                        action: 'Metrics Option',
-                        name: 'Metrics Opt Out',
+                        legacy_event: true,
                      },
-                      isOptIn: true,
                    },
                    {
+                      isOptIn: true,
                      excludeMetaMetricsId: true,
                    },
                  );
@ -128,14 +129,19 @@ export default class MetaMetricsOptInModal extends Component {
              hideCancel={false}
              onSubmit={() => {
                setParticipateInMetaMetrics(true).then(() => {
-                  metricsEvent({
-                    eventOpts: {
+                  trackEvent(
+                    {
                      category: 'Onboarding',
+                      event: 'Metrics Opt In',
+                      properties: {
                        action: 'Metrics Option',
-                      name: 'Metrics Opt In',
+                        legacy_event: true,
+                      },
                    },
+                    {
                      isOptIn: true,
-                  });
+                    },
+                  );
                  hideModal();
                });
              }}
--- a/ui/components/app/modals/metametrics-opt-in-modal/metametrics-opt-in-modal.test.js
+++ b/ui/components/app/modals/metametrics-opt-in-modal/metametrics-opt-in-modal.test.js
@ -16,7 +16,7 @@ describe('MetaMetrics Opt In', () => {
  beforeEach(() => {
    wrapper = mount(<MetaMetricsOptIn.WrappedComponent {...props} />, {
      context: {
-        metricsEvent: () => undefined,
+        trackEvent: () => undefined,
        t: (key) => messages[key].message,
      },
    });
--- a/ui/components/app/permission-page-container/permission-page-container.component.js
+++ b/ui/components/app/permission-page-container/permission-page-container.component.js
@ -31,7 +31,7 @@ export default class PermissionPageContainer extends Component {

  static contextTypes = {
    t: PropTypes.func,
-    metricsEvent: PropTypes.func,
+    trackEvent: PropTypes.func,
  };

  state = {
@ -63,11 +63,12 @@ export default class PermissionPageContainer extends Component {
  }

  componentDidMount() {
-    this.context.metricsEvent({
-      eventOpts: {
+    this.context.trackEvent({
      category: 'Auth',
+      event: 'Tab Opened',
+      properties: {
        action: 'Connect',
-        name: 'Tab Opened',
+        legacy_event: true,
      },
    });
  }
--- a/ui/components/app/signature-request-original/signature-request-original.component.js
+++ b/ui/components/app/signature-request-original/signature-request-original.component.js
@ -16,7 +16,7 @@ import SiteIcon from '../../ui/site-icon';
 export default class SignatureRequestOriginal extends Component {
  static contextTypes = {
    t: PropTypes.func.isRequired,
-    metricsEvent: PropTypes.func.isRequired,
+    trackEvent: PropTypes.func.isRequired,
  };

  static propTypes = {
@ -262,7 +262,7 @@ export default class SignatureRequestOriginal extends Component {
      txData: { type },
      hardwareWalletRequiresConnection,
    } = this.props;
-    const { metricsEvent, t } = this.context;
+    const { trackEvent, t } = this.context;

    return (
      <div className="request-signature__footer">
@ -272,13 +272,12 @@ export default class SignatureRequestOriginal extends Component {
          className="request-signature__footer__cancel-button"
          onClick={async (event) => {
            await cancel(event);
-            metricsEvent({
-              eventOpts: {
+            trackEvent({
              category: 'Transactions',
+              event: 'Cancel',
+              properties: {
                action: 'Sign Request',
-                name: 'Cancel',
-              },
-              customVariables: {
+                legacy_event: true,
                type,
              },
            });
@ -296,13 +295,12 @@ export default class SignatureRequestOriginal extends Component {
          disabled={hardwareWalletRequiresConnection}
          onClick={async (event) => {
            await sign(event);
-            metricsEvent({
-              eventOpts: {
+            trackEvent({
              category: 'Transactions',
+              event: 'Confirm',
+              properties: {
                action: 'Sign Request',
-                name: 'Confirm',
-              },
-              customVariables: {
+                legacy_event: true,
                type,
              },
            });
--- a/ui/components/app/signature-request/signature-request.component.js
+++ b/ui/components/app/signature-request/signature-request.component.js
@ -41,7 +41,7 @@ export default class SignatureRequest extends PureComponent {

  static contextTypes = {
    t: PropTypes.func,
-    metricsEvent: PropTypes.func,
+    trackEvent: PropTypes.func,
  };

  state = {
@ -73,17 +73,16 @@ export default class SignatureRequest extends PureComponent {
    } = this.props;
    const { address: fromAddress } = fromAccount;
    const { message, domain = {}, primaryType, types } = JSON.parse(data);
-    const { metricsEvent } = this.context;
+    const { trackEvent } = this.context;

    const onSign = (event) => {
      sign(event);
-      metricsEvent({
-        eventOpts: {
+      trackEvent({
        category: 'Transactions',
+        event: 'Confirm',
+        properties: {
          action: 'Sign Request',
-          name: 'Confirm',
-        },
-        customVariables: {
+          legacy_event: true,
          type,
          version,
        },
@ -92,13 +91,12 @@ export default class SignatureRequest extends PureComponent {

    const onCancel = (event) => {
      cancel(event);
-      metricsEvent({
-        eventOpts: {
+      trackEvent({
        category: 'Transactions',
+        event: 'Cancel',
+        properties: {
          action: 'Sign Request',
-          name: 'Cancel',
-        },
-        customVariables: {
+          legacy_event: true,
          type,
          version,
        },
--- a/ui/components/app/transaction-list-item-details/transaction-list-item-details.component.js
+++ b/ui/components/app/transaction-list-item-details/transaction-list-item-details.component.js
@ -19,7 +19,6 @@ import TransactionDecoding from '../transaction-decoding';
 export default class TransactionListItemDetails extends PureComponent {
  static contextTypes = {
    t: PropTypes.func,
-    metricsEvent: PropTypes.func,
    trackEvent: PropTypes.func,
  };

@ -69,6 +68,7 @@ export default class TransactionListItemDetails extends PureComponent {
        link_type: 'Transaction Block Explorer',
        action: 'Transaction Details',
        block_explorer_domain: getURLHostName(blockExplorerLink),
+        legacy_event: true,
      },
    });

@ -94,11 +94,12 @@ export default class TransactionListItemDetails extends PureComponent {
    const { primaryTransaction: transaction } = transactionGroup;
    const { hash } = transaction;

-    this.context.metricsEvent({
-      eventOpts: {
+    this.context.trackEvent({
      category: 'Navigation',
+      event: 'Copied Transaction ID',
+      properties: {
        action: 'Activity Log',
-        name: 'Copied Transaction ID',
+        legacy_event: true,
      },
    });

@ -225,20 +226,22 @@ export default class TransactionListItemDetails extends PureComponent {
                senderName={senderNickname}
                senderAddress={senderAddress}
                onRecipientClick={() => {
-                  this.context.metricsEvent({
-                    eventOpts: {
+                  this.context.trackEvent({
                    category: 'Navigation',
+                    event: 'Copied "To" Address',
+                    properties: {
                      action: 'Activity Log',
-                      name: 'Copied "To" Address',
+                      legacy_event: true,
                    },
                  });
                }}
                onSenderClick={() => {
-                  this.context.metricsEvent({
-                    eventOpts: {
+                  this.context.trackEvent({
                    category: 'Navigation',
+                    event: 'Copied "From" Address',
+                    properties: {
                      action: 'Activity Log',
-                      name: 'Copied "From" Address',
+                      legacy_event: true,
                    },
                  });
                }}
--- a/ui/pages/confirm-decrypt-message/confirm-decrypt-message.component.js
+++ b/ui/pages/confirm-decrypt-message/confirm-decrypt-message.component.js
@ -15,7 +15,7 @@ import { conversionUtil } from '../../../shared/modules/conversion.utils';
 export default class ConfirmDecryptMessage extends Component {
  static contextTypes = {
    t: PropTypes.func.isRequired,
-    metricsEvent: PropTypes.func.isRequired,
+    trackEvent: PropTypes.func.isRequired,
  };

  static propTypes = {
@ -44,11 +44,12 @@ export default class ConfirmDecryptMessage extends Component {

  copyMessage = () => {
    copyToClipboard(this.state.rawMessage);
-    this.context.metricsEvent({
-      eventOpts: {
+    this.context.trackEvent({
      category: 'Messages',
+      event: 'Copy',
+      properties: {
        action: 'Decrypt Message Copy',
-        name: 'Copy',
+        legacy_event: true,
      },
    });
    this.setState({ hasCopied: true });
@ -251,7 +252,7 @@ export default class ConfirmDecryptMessage extends Component {
      mostRecentOverviewPage,
      txData,
    } = this.props;
-    const { metricsEvent, t } = this.context;
+    const { trackEvent, t } = this.context;

    return (
      <div className="request-decrypt-message__footer">
@ -261,11 +262,12 @@ export default class ConfirmDecryptMessage extends Component {
          className="request-decrypt-message__footer__cancel-button"
          onClick={async (event) => {
            await cancelDecryptMessage(txData, event);
-            metricsEvent({
-              eventOpts: {
+            trackEvent({
              category: 'Messages',
+              event: 'Cancel',
+              properties: {
                action: 'Decrypt Message Request',
-                name: 'Cancel',
+                legacy_event: true,
              },
            });
            clearConfirmTransaction();
@ -280,11 +282,12 @@ export default class ConfirmDecryptMessage extends Component {
          className="request-decrypt-message__footer__sign-button"
          onClick={async (event) => {
            await decryptMessage(txData, event);
-            metricsEvent({
-              eventOpts: {
+            trackEvent({
              category: 'Messages',
+              event: 'Confirm',
+              properties: {
                action: 'Decrypt Message Request',
-                name: 'Confirm',
+                legacy_event: true,
              },
            });
            clearConfirmTransaction();
--- a/ui/pages/confirm-encryption-public-key/confirm-encryption-public-key.component.js
+++ b/ui/pages/confirm-encryption-public-key/confirm-encryption-public-key.component.js
@ -10,7 +10,7 @@ import { conversionUtil } from '../../../shared/modules/conversion.utils';
 export default class ConfirmEncryptionPublicKey extends Component {
  static contextTypes = {
    t: PropTypes.func.isRequired,
-    metricsEvent: PropTypes.func.isRequired,
+    trackEvent: PropTypes.func.isRequired,
  };

  static propTypes = {
@ -154,7 +154,7 @@ export default class ConfirmEncryptionPublicKey extends Component {
      mostRecentOverviewPage,
      txData,
    } = this.props;
-    const { t, metricsEvent } = this.context;
+    const { t, trackEvent } = this.context;

    return (
      <div className="request-encryption-public-key__footer">
@ -164,11 +164,12 @@ export default class ConfirmEncryptionPublicKey extends Component {
          className="request-encryption-public-key__footer__cancel-button"
          onClick={async (event) => {
            await cancelEncryptionPublicKey(txData, event);
-            metricsEvent({
-              eventOpts: {
+            trackEvent({
              category: 'Messages',
+              event: 'Cancel',
+              properties: {
                action: 'Encryption public key Request',
-                name: 'Cancel',
+                legacy_event: true,
              },
            });
            clearConfirmTransaction();
@ -183,11 +184,12 @@ export default class ConfirmEncryptionPublicKey extends Component {
          className="request-encryption-public-key__footer__sign-button"
          onClick={async (event) => {
            await encryptionPublicKey(txData, event);
-            this.context.metricsEvent({
-              eventOpts: {
+            this.context.trackEvent({
              category: 'Messages',
+              event: 'Confirm',
+              properties: {
                action: 'Encryption public key Request',
-                name: 'Confirm',
+                legacy_event: true,
              },
            });
            clearConfirmTransaction();
--- a/ui/pages/confirm-transaction-base/confirm-transaction-base.component.js
+++ b/ui/pages/confirm-transaction-base/confirm-transaction-base.component.js
@ -70,7 +70,7 @@ const renderHeartBeatIfNotInTest = () =>
 export default class ConfirmTransactionBase extends Component {
  static contextTypes = {
    t: PropTypes.func,
-    metricsEvent: PropTypes.func,
+    trackEvent: PropTypes.func,
  };

  static propTypes = {
@ -277,13 +277,12 @@ export default class ConfirmTransactionBase extends Component {
      methodData = {},
    } = this.props;

-    this.context.metricsEvent({
-      eventOpts: {
+    this.context.trackEvent({
      category: 'Transactions',
+      event: 'User clicks "Edit" on gas',
+      properties: {
        action: 'Confirm Screen',
-        name: 'User clicks "Edit" on gas',
-      },
-      customVariables: {
+        legacy_event: true,
        recipientKnown: null,
        functionType:
          actionKey ||
@ -734,13 +733,12 @@ export default class ConfirmTransactionBase extends Component {
      methodData = {},
    } = this.props;

-    this.context.metricsEvent({
-      eventOpts: {
+    this.context.trackEvent({
      category: 'Transactions',
+      event: 'Edit Transaction',
+      properties: {
        action: 'Confirm Screen',
-        name: 'Edit Transaction',
-      },
-      customVariables: {
+        legacy_event: true,
        recipientKnown: null,
        functionType:
          actionKey ||
@ -941,14 +939,13 @@ export default class ConfirmTransactionBase extends Component {
      getNextNonce,
      tryReverseResolveAddress,
    } = this.props;
-    const { metricsEvent } = this.context;
-    metricsEvent({
-      eventOpts: {
+    const { trackEvent } = this.context;
+    trackEvent({
      category: 'Transactions',
+      event: 'Confirm: Started',
+      properties: {
        action: 'Confirm Screen',
-        name: 'Confirm: Started',
-      },
-      customVariables: {
+        legacy_event: true,
        origin,
      },
    });
--- a/ui/pages/create-account/connect-hardware/index.js
+++ b/ui/pages/create-account/connect-hardware/index.js
@ -253,23 +253,23 @@ class ConnectHardwareForm extends Component {
      description,
    )
      .then((_) => {
-        this.context.metricsEvent({
-          eventOpts: {
+        this.context.trackEvent({
          category: 'Accounts',
+          event: `Connected Account with: ${device}`,
+          properties: {
            action: 'Connected Hardware Wallet',
-            name: `Connected Account with: ${device}`,
+            legacy_event: true,
          },
        });
        history.push(mostRecentOverviewPage);
      })
      .catch((e) => {
-        this.context.metricsEvent({
-          eventOpts: {
+        this.context.trackEvent({
          category: 'Accounts',
+          event: 'Error connecting hardware wallet',
+          properties: {
            action: 'Connected Hardware Wallet',
-            name: 'Error connecting hardware wallet',
-          },
-          customVariables: {
+            legacy_event: true,
            error: e.message,
          },
        });
@ -414,7 +414,7 @@ const mapDispatchToProps = (dispatch) => {

 ConnectHardwareForm.contextTypes = {
  t: PropTypes.func,
-  metricsEvent: PropTypes.func,
+  trackEvent: PropTypes.func,
 };

 export default connect(
--- a/ui/pages/create-account/import-account/json.js
+++ b/ui/pages/create-account/import-account/json.js
@ -116,21 +116,23 @@ class JsonImportSubview extends Component {
      .then(({ selectedAddress }) => {
        if (selectedAddress) {
          history.push(mostRecentOverviewPage);
-          this.context.metricsEvent({
-            eventOpts: {
+          this.context.trackEvent({
            category: 'Accounts',
+            event: 'Imported Account with JSON',
+            properties: {
              action: 'Import Account',
-              name: 'Imported Account with JSON',
+              legacy_event: true,
            },
          });
          displayWarning(null);
        } else {
          displayWarning(t('importAccountError'));
-          this.context.metricsEvent({
-            eventOpts: {
+          this.context.trackEvent({
            category: 'Accounts',
+            event: 'Error importing JSON',
+            properties: {
              action: 'Import Account',
-              name: 'Error importing JSON',
+              legacy_event: true,
            },
          });
          setSelectedAddress(firstAddress);
@ -179,7 +181,7 @@ const mapDispatchToProps = (dispatch) => {

 JsonImportSubview.contextTypes = {
  t: PropTypes.func,
-  metricsEvent: PropTypes.func,
+  trackEvent: PropTypes.func,
 };

 export default compose(
--- a/ui/pages/create-account/import-account/private-key.js
+++ b/ui/pages/create-account/import-account/private-key.js
@ -11,7 +11,7 @@ import { getMostRecentOverviewPage } from '../../../ducks/history/history';
 class PrivateKeyImportView extends Component {
  static contextTypes = {
    t: PropTypes.func,
-    metricsEvent: PropTypes.func,
+    trackEvent: PropTypes.func,
  };

  static propTypes = {
@ -43,22 +43,24 @@ class PrivateKeyImportView extends Component {
    importNewAccount('Private Key', [privateKey])
      .then(({ selectedAddress }) => {
        if (selectedAddress) {
-          this.context.metricsEvent({
-            eventOpts: {
+          this.context.trackEvent({
            category: 'Accounts',
+            event: 'Imported Account with Private Key',
+            properties: {
              action: 'Import Account',
-              name: 'Imported Account with Private Key',
+              legacy_event: true,
            },
          });
          history.push(mostRecentOverviewPage);
          displayWarning(null);
        } else {
          displayWarning(t('importAccountError'));
-          this.context.metricsEvent({
-            eventOpts: {
+          this.context.trackEvent({
            category: 'Accounts',
+            event: 'Error importing with Private Key',
+            properties: {
              action: 'Import Account',
-              name: 'Error importing with Private Key',
+              legacy_event: true,
            },
          });
          setSelectedAddress(firstAddress);
--- a/ui/pages/create-account/new-account.component.js
+++ b/ui/pages/create-account/new-account.component.js
@ -27,23 +27,23 @@ export default class NewAccountCreateForm extends Component {
    const createClick = (_) => {
      createAccount(newAccountName || defaultAccountName)
        .then(() => {
-          this.context.metricsEvent({
-            eventOpts: {
+          this.context.trackEvent({
            category: 'Accounts',
+            event: 'Added New Account',
+            properties: {
              action: 'Add New Account',
-              name: 'Added New Account',
+              legacy_event: true,
            },
          });
          history.push(mostRecentOverviewPage);
        })
        .catch((e) => {
-          this.context.metricsEvent({
-            eventOpts: {
+          this.context.trackEvent({
            category: 'Accounts',
+            event: 'Error',
+            properties: {
              action: 'Add New Account',
-              name: 'Error',
-            },
-            customVariables: {
+              legacy_event: true,
              errorMessage: e.message,
            },
          });
@ -120,5 +120,5 @@ NewAccountCreateForm.propTypes = {

 NewAccountCreateForm.contextTypes = {
  t: PropTypes.func,
-  metricsEvent: PropTypes.func,
+  trackEvent: PropTypes.func,
 };
--- a/ui/pages/first-time-flow/create-password/import-with-seed-phrase/import-with-seed-phrase.component.js
+++ b/ui/pages/first-time-flow/create-password/import-with-seed-phrase/import-with-seed-phrase.component.js
@ -9,7 +9,7 @@ import CreateNewVault from '../../../../components/app/create-new-vault';
 export default class ImportWithSeedPhrase extends PureComponent {
  static contextTypes = {
    t: PropTypes.func,
-    metricsEvent: PropTypes.func,
+    trackEvent: PropTypes.func,
  };

  static propTypes = {
@ -21,13 +21,12 @@ export default class ImportWithSeedPhrase extends PureComponent {

  UNSAFE_componentWillMount() {
    this._onBeforeUnload = () =>
-      this.context.metricsEvent({
-        eventOpts: {
+      this.context.trackEvent({
        category: 'Onboarding',
+        event: 'Close window on import screen',
+        properties: {
          action: 'Import Seed Phrase',
-          name: 'Close window on import screen',
-        },
-        customVariables: {
+          legacy_event: true,
          errorLabel: 'Seed Phrase Error',
          errorMessage: this.state.seedPhraseError,
        },
@ -48,11 +47,12 @@ export default class ImportWithSeedPhrase extends PureComponent {
    } = this.props;

    await onSubmit(password, seedPhrase);
-    this.context.metricsEvent({
-      eventOpts: {
+    this.context.trackEvent({
      category: 'Onboarding',
+      event: 'Import Complete',
+      properties: {
        action: 'Import Seed Phrase',
-        name: 'Import Complete',
+        legacy_event: true,
      },
    });

@ -70,11 +70,12 @@ export default class ImportWithSeedPhrase extends PureComponent {
          <a
            onClick={(e) => {
              e.preventDefault();
-              this.context.metricsEvent({
-                eventOpts: {
+              this.context.trackEvent({
                category: 'Onboarding',
+                event: 'Go Back from Onboarding Import',
+                properties: {
                  action: 'Import Seed Phrase',
-                  name: 'Go Back from Onboarding Import',
+                  legacy_event: true,
                },
              });
              this.props.history.push(INITIALIZE_SELECT_ACTION_ROUTE);
--- a/ui/pages/first-time-flow/create-password/new-account/new-account.component.js
+++ b/ui/pages/first-time-flow/create-password/new-account/new-account.component.js
@ -9,7 +9,7 @@ import TextField from '../../../../components/ui/text-field';

 export default class NewAccount extends PureComponent {
  static contextTypes = {
-    metricsEvent: PropTypes.func,
+    trackEvent: PropTypes.func,
    t: PropTypes.func,
  };

@ -100,11 +100,12 @@ export default class NewAccount extends PureComponent {
    try {
      await onSubmit(password);

-      this.context.metricsEvent({
-        eventOpts: {
+      this.context.trackEvent({
        category: 'Onboarding',
+        event: 'Submit Password',
+        properties: {
          action: 'Create Password',
-          name: 'Submit Password',
+          legacy_event: true,
        },
      });

@ -115,11 +116,12 @@ export default class NewAccount extends PureComponent {
  };

  toggleTermsCheck = () => {
-    this.context.metricsEvent({
-      eventOpts: {
+    this.context.trackEvent({
      category: 'Onboarding',
+      event: 'Check ToS',
+      properties: {
        action: 'Create Password',
-        name: 'Check ToS',
+        legacy_event: true,
      },
    });

@ -150,11 +152,12 @@ export default class NewAccount extends PureComponent {
          <a
            onClick={(e) => {
              e.preventDefault();
-              this.context.metricsEvent({
-                eventOpts: {
+              this.context.trackEvent({
                category: 'Onboarding',
+                event: 'Go Back from Onboarding Create',
+                properties: {
                  action: 'Create Password',
-                  name: 'Go Back from Onboarding Create',
+                  legacy_event: true,
                },
              });
              this.props.history.push(INITIALIZE_SELECT_ACTION_ROUTE);
--- a/ui/pages/first-time-flow/end-of-flow/end-of-flow.component.js
+++ b/ui/pages/first-time-flow/end-of-flow/end-of-flow.component.js
@ -10,7 +10,7 @@ import { returnToOnboardingInitiator } from '../onboarding-initiator-util';
 export default class EndOfFlowScreen extends PureComponent {
  static contextTypes = {
    t: PropTypes.func,
-    metricsEvent: PropTypes.func,
+    trackEvent: PropTypes.func,
  };

  static propTypes = {
@ -34,11 +34,12 @@ export default class EndOfFlowScreen extends PureComponent {
  async _onOnboardingComplete() {
    const { setCompletedOnboarding, completionMetaMetricsName } = this.props;
    await setCompletedOnboarding();
-    this.context.metricsEvent({
-      eventOpts: {
+    this.context.trackEvent({
      category: 'Onboarding',
+      event: completionMetaMetricsName,
+      properties: {
        action: 'Onboarding Complete',
-        name: completionMetaMetricsName,
+        legacy_event: true,
      },
    });
  }
--- a/ui/pages/first-time-flow/metametrics-opt-in/metametrics-opt-in.component.js
+++ b/ui/pages/first-time-flow/metametrics-opt-in/metametrics-opt-in.component.js
@ -13,12 +13,12 @@ export default class MetaMetricsOptIn extends Component {
  };

  static contextTypes = {
-    metricsEvent: PropTypes.func,
+    trackEvent: PropTypes.func,
    t: PropTypes.func,
  };

  render() {
-    const { metricsEvent, t } = this.context;
+    const { trackEvent, t } = this.context;
    const {
      nextRoute,
      history,
@ -109,15 +109,20 @@ export default class MetaMetricsOptIn extends Component {
                    participateInMetaMetrics === null ||
                    participateInMetaMetrics === true
                  ) {
-                    await metricsEvent({
-                      eventOpts: {
+                    await trackEvent(
+                      {
                        category: 'Onboarding',
+                        event: 'Metrics Opt Out',
+                        properties: {
                          action: 'Metrics Option',
-                        name: 'Metrics Opt Out',
+                          legacy_event: true,
                        },
+                      },
+                      {
                        isOptIn: true,
                        flushImmediately: true,
-                    });
+                      },
+                    );
                  }
                } finally {
                  history.push(nextRoute);
@ -136,28 +141,38 @@ export default class MetaMetricsOptIn extends Component {
                    participateInMetaMetrics === false
                  ) {
                    metrics.push(
-                      metricsEvent({
-                        eventOpts: {
+                      trackEvent(
+                        {
                          category: 'Onboarding',
+                          event: 'Metrics Opt In',
+                          properties: {
                            action: 'Metrics Option',
-                          name: 'Metrics Opt In',
+                            legacy_event: true,
+                          },
                        },
+                        {
                          isOptIn: true,
                          flushImmediately: true,
-                      }),
+                        },
+                      ),
                    );
                  }
                  metrics.push(
-                    metricsEvent({
-                      eventOpts: {
+                    trackEvent(
+                      {
                        category: 'Onboarding',
+                        event: firstTimeSelectionMetaMetricsName,
+                        properties: {
                          action: 'Import or Create',
-                        name: firstTimeSelectionMetaMetricsName,
+                          legacy_event: true,
+                        },
                      },
+                      {
                        isOptIn: true,
                        metaMetricsId,
                        flushImmediately: true,
-                    }),
+                      },
+                    ),
                  );
                  await Promise.all(metrics);
                } finally {
--- a/ui/pages/first-time-flow/seed-phrase/confirm-seed-phrase-component.test.js
+++ b/ui/pages/first-time-flow/seed-phrase/confirm-seed-phrase-component.test.js
@ -24,7 +24,7 @@ describe('ConfirmSeedPhrase Component', () => {
  });

  it('should add/remove selected on click', () => {
-    const metricsEventSpy = sinon.spy();
+    const trackEventSpy = sinon.spy();
    const replaceSpy = sinon.spy();
    const component = shallowRender(
      {
@ -32,7 +32,7 @@ describe('ConfirmSeedPhrase Component', () => {
        history: { replace: replaceSpy },
      },
      {
-        metricsEvent: metricsEventSpy,
+        trackEvent: trackEventSpy,
      },
    );

@ -57,7 +57,7 @@ describe('ConfirmSeedPhrase Component', () => {
  });

  it('should render correctly on hover', () => {
-    const metricsEventSpy = sinon.spy();
+    const trackEventSpy = sinon.spy();
    const replaceSpy = sinon.spy();
    const component = shallowRender(
      {
@ -65,7 +65,7 @@ describe('ConfirmSeedPhrase Component', () => {
        history: { replace: replaceSpy },
      },
      {
-        metricsEvent: metricsEventSpy,
+        trackEvent: trackEventSpy,
      },
    );

@ -92,7 +92,7 @@ describe('ConfirmSeedPhrase Component', () => {
  });

  it('should insert seed in place on drop', () => {
-    const metricsEventSpy = sinon.spy();
+    const trackEventSpy = sinon.spy();
    const replaceSpy = sinon.spy();
    const component = shallowRender(
      {
@ -100,7 +100,7 @@ describe('ConfirmSeedPhrase Component', () => {
        history: { replace: replaceSpy },
      },
      {
-        metricsEvent: metricsEventSpy,
+        trackEvent: trackEventSpy,
      },
    );

@ -137,7 +137,7 @@ describe('ConfirmSeedPhrase Component', () => {
      '狗',
      '豬',
    ];
-    const metricsEventSpy = sinon.spy();
+    const trackEventSpy = sinon.spy();
    const replaceSpy = sinon.spy();
    const initialize3BoxSpy = sinon.spy();
    const component = shallowRender(
@ -148,7 +148,7 @@ describe('ConfirmSeedPhrase Component', () => {
        initializeThreeBox: initialize3BoxSpy,
      },
      {
-        metricsEvent: metricsEventSpy,
+        trackEvent: trackEventSpy,
      },
    );

@ -166,11 +166,12 @@ describe('ConfirmSeedPhrase Component', () => {

    await new Promise((resolve) => setTimeout(resolve, 100));

-    expect(metricsEventSpy.args[0][0]).toStrictEqual({
-      eventOpts: {
+    expect(trackEventSpy.args[0][0]).toStrictEqual({
      category: 'Onboarding',
+      event: 'Verify Complete',
+      properties: {
        action: 'Seed Phrase Setup',
-        name: 'Verify Complete',
+        legacy_event: true,
      },
    });
    expect(initialize3BoxSpy.calledOnce).toStrictEqual(true);
--- a/ui/pages/first-time-flow/seed-phrase/confirm-seed-phrase/confirm-seed-phrase.component.js
+++ b/ui/pages/first-time-flow/seed-phrase/confirm-seed-phrase/confirm-seed-phrase.component.js
@ -13,7 +13,7 @@ const EMPTY_SEEDS = Array(12).fill(null);

 export default class ConfirmSeedPhrase extends PureComponent {
  static contextTypes = {
-    metricsEvent: PropTypes.func,
+    trackEvent: PropTypes.func,
    t: PropTypes.func,
  };

@ -77,11 +77,12 @@ export default class ConfirmSeedPhrase extends PureComponent {
    }

    try {
-      this.context.metricsEvent({
-        eventOpts: {
+      this.context.trackEvent({
        category: 'Onboarding',
+        event: 'Verify Complete',
+        properties: {
          action: 'Seed Phrase Setup',
-          name: 'Verify Complete',
+          legacy_event: true,
        },
      });

--- a/ui/pages/first-time-flow/seed-phrase/reveal-seed-phrase/reveal-seed-phrase.component.js
+++ b/ui/pages/first-time-flow/seed-phrase/reveal-seed-phrase/reveal-seed-phrase.component.js
@ -16,7 +16,7 @@ import { returnToOnboardingInitiator } from '../../onboarding-initiator-util';
 export default class RevealSeedPhrase extends PureComponent {
  static contextTypes = {
    t: PropTypes.func,
-    metricsEvent: PropTypes.func,
+    trackEvent: PropTypes.func,
  };

  static propTypes = {
@ -42,11 +42,12 @@ export default class RevealSeedPhrase extends PureComponent {
    const { isShowingSeedPhrase } = this.state;
    const { history } = this.props;

-    this.context.metricsEvent({
-      eventOpts: {
+    this.context.trackEvent({
      category: 'Onboarding',
+      event: 'Advance to Verify',
+      properties: {
        action: 'Seed Phrase Setup',
-        name: 'Advance to Verify',
+        legacy_event: true,
      },
    });

@ -65,11 +66,12 @@ export default class RevealSeedPhrase extends PureComponent {
      onboardingInitiator,
    } = this.props;

-    this.context.metricsEvent({
-      eventOpts: {
+    this.context.trackEvent({
      category: 'Onboarding',
+      event: 'Remind me later',
+      properties: {
        action: 'Seed Phrase Setup',
-        name: 'Remind me later',
+        legacy_event: true,
      },
    });

@ -102,11 +104,12 @@ export default class RevealSeedPhrase extends PureComponent {
          <div
            className="reveal-seed-phrase__secret-blocker"
            onClick={() => {
-              this.context.metricsEvent({
-                eventOpts: {
+              this.context.trackEvent({
                category: 'Onboarding',
+                event: 'Revealed Words',
+                properties: {
                  action: 'Seed Phrase Setup',
-                  name: 'Revealed Words',
+                  legacy_event: true,
                },
              });
              this.setState({ isShowingSeedPhrase: true });
--- a/ui/pages/first-time-flow/seed-phrase/reveal-seed-phrase/reveal-seed-phrase.test.js
+++ b/ui/pages/first-time-flow/seed-phrase/reveal-seed-phrase/reveal-seed-phrase.test.js
@ -22,7 +22,7 @@ describe('Reveal Secret Recovery Phrase', () => {
    wrapper = mount(<RevealSeedPhrase.WrappedComponent {...props} />, {
      context: {
        t: (str) => str,
-        metricsEvent: () => undefined,
+        trackEvent: () => undefined,
      },
    });
  });
--- a/ui/pages/keychains/restore-vault.js
+++ b/ui/pages/keychains/restore-vault.js
@ -17,7 +17,7 @@ import { TYPOGRAPHY, COLORS } from '../../helpers/constants/design-system';
 class RestoreVaultPage extends Component {
  static contextTypes = {
    t: PropTypes.func,
-    metricsEvent: PropTypes.func,
+    trackEvent: PropTypes.func,
  };

  static propTypes = {
@ -40,11 +40,12 @@ class RestoreVaultPage extends Component {

    leaveImportSeedScreenState();
    await createNewVaultAndRestore(password, seedPhrase);
-    this.context.metricsEvent({
-      eventOpts: {
+    this.context.trackEvent({
      category: 'Retention',
+      event: 'onboardingRestoredVault',
+      properties: {
        action: 'userEntersSeedPhrase',
-        name: 'onboardingRestoredVault',
+        legacy_event: true,
      },
    });
    initializeThreeBox();
--- a/ui/pages/onboarding-flow/metametrics/metametrics.js
+++ b/ui/pages/onboarding-flow/metametrics/metametrics.js
@ -17,7 +17,7 @@ import {
  getParticipateInMetaMetrics,
 } from '../../../selectors';

-import { MetaMetricsContext } from '../../../contexts/metametrics';
+import { MetaMetricsContext } from '../../../contexts/metametrics.new';

 const firstTimeFlowTypeNameMap = {
  create: 'Selected Create New Wallet',
@ -36,33 +36,43 @@ export default function OnboardingMetametrics() {
  const firstTimeSelectionMetaMetricsName =
    firstTimeFlowTypeNameMap[firstTimeFlowType];

-  const metricsEvent = useContext(MetaMetricsContext);
+  const trackEvent = useContext(MetaMetricsContext);

  const onConfirm = async () => {
    const [, metaMetricsId] = await dispatch(setParticipateInMetaMetrics(true));

    try {
      if (!participateInMetaMetrics) {
-        metricsEvent({
-          eventOpts: {
+        trackEvent(
+          {
            category: 'Onboarding',
+            event: 'Metrics Opt In',
+            properties: {
              action: 'Metrics Option',
-            name: 'Metrics Opt In',
+              legacy_event: true,
            },
+          },
+          {
            isOptIn: true,
            flushImmediately: true,
-        });
+          },
+        );
      }
-      metricsEvent({
-        eventOpts: {
+      trackEvent(
+        {
          category: 'Onboarding',
+          event: firstTimeSelectionMetaMetricsName,
+          properties: {
            action: 'Import or Create',
-          name: firstTimeSelectionMetaMetricsName,
+            legacy_event: true,
          },
+        },
+        {
          isOptIn: true,
          metaMetricsId,
          flushImmediately: true,
-      });
+        },
+      );
    } finally {
      history.push(nextRoute);
    }
@ -73,15 +83,20 @@ export default function OnboardingMetametrics() {

    try {
      if (!participateInMetaMetrics) {
-        metricsEvent({
-          eventOpts: {
+        trackEvent(
+          {
            category: 'Onboarding',
+            event: 'Metrics Opt Out',
+            properties: {
              action: 'Metrics Option',
-            name: 'Metrics Opt Out',
+              legacy_event: true,
+            },
          },
+          {
            isOptIn: true,
            flushImmediately: true,
-        });
+          },
+        );
      }
    } finally {
      history.push(nextRoute);
--- a/ui/pages/send/send-content/send-asset-row/send-asset-row.component.js
+++ b/ui/pages/send/send-content/send-asset-row/send-asset-row.component.js
@ -46,7 +46,7 @@ export default class SendAssetRow extends Component {

  static contextTypes = {
    t: PropTypes.func,
-    metricsEvent: PropTypes.func,
+    trackEvent: PropTypes.func,
  };

  state = {
@ -87,13 +87,12 @@ export default class SendAssetRow extends Component {
        isShowingDropdown: false,
      },
      () => {
-        this.context.metricsEvent({
-          eventOpts: {
+        this.context.trackEvent({
          category: 'Transactions',
+          event: 'User clicks "Assets" dropdown',
+          properties: {
            action: 'Send Screen',
-            name: 'User clicks "Assets" dropdown',
-          },
-          customVariables: {
+            legacy_event: true,
            assetSelected: this.getAssetSelected(type, token),
          },
        });
--- a/ui/pages/send/send-footer/send-footer.component.js
+++ b/ui/pages/send/send-footer/send-footer.component.js
@ -27,7 +27,7 @@ export default class SendFooter extends Component {

  static contextTypes = {
    t: PropTypes.func,
-    metricsEvent: PropTypes.func,
+    trackEvent: PropTypes.func,
  };

  onCancel() {
@ -60,20 +60,19 @@ export default class SendFooter extends Component {
      history,
      gasEstimateType,
    } = this.props;
-    const { metricsEvent } = this.context;
+    const { trackEvent } = this.context;

    // TODO: add nickname functionality
    await addToAddressBookIfNew(to, toAccounts);
    const promise = sign();

    Promise.resolve(promise).then(() => {
-      metricsEvent({
-        eventOpts: {
+      trackEvent({
        category: 'Transactions',
+        event: 'Complete',
+        properties: {
          action: 'Edit Screen',
-          name: 'Complete',
-        },
-        customVariables: {
+          legacy_event: true,
          gasChanged: gasEstimateType,
        },
      });
@ -83,7 +82,7 @@ export default class SendFooter extends Component {

  componentDidUpdate(prevProps) {
    const { sendErrors } = this.props;
-    const { metricsEvent } = this.context;
+    const { trackEvent } = this.context;
    if (
      Object.keys(sendErrors).length > 0 &&
      isEqual(sendErrors, prevProps.sendErrors) === false
@ -91,13 +90,12 @@ export default class SendFooter extends Component {
      const errorField = Object.keys(sendErrors).find((key) => sendErrors[key]);
      const errorMessage = sendErrors[errorField];

-      metricsEvent({
-        eventOpts: {
+      trackEvent({
        category: 'Transactions',
+        event: 'Error',
+        properties: {
          action: 'Edit Screen',
-          name: 'Error',
-        },
-        customVariables: {
+          legacy_event: true,
          errorField,
          errorMessage,
        },
--- a/ui/pages/send/send-footer/send-footer.component.test.js
+++ b/ui/pages/send/send-footer/send-footer.component.test.js
@ -43,7 +43,7 @@ describe('SendFooter Component', () => {
        mostRecentOverviewPage="mostRecentOverviewPage"
        {...props}
      />,
-      { context: { t: (str) => str, metricsEvent: () => ({}) } },
+      { context: { t: (str) => str, trackEvent: () => ({}) } },
    );
  };

@ -157,7 +157,7 @@ describe('SendFooter Component', () => {
          update={propsMethodSpies.update}
          mostRecentOverviewPage="mostRecentOverviewPage"
        />,
-        { context: { t: (str) => str, metricsEvent: () => ({}) } },
+        { context: { t: (str) => str, trackEvent: () => ({}) } },
      );
    });

--- a/ui/pages/settings/advanced-tab/advanced-tab.component.js
+++ b/ui/pages/settings/advanced-tab/advanced-tab.component.js
@ -25,7 +25,7 @@ import {
 export default class AdvancedTab extends PureComponent {
  static contextTypes = {
    t: PropTypes.func,
-    metricsEvent: PropTypes.func,
+    trackEvent: PropTypes.func,
  };

  static propTypes = {
@ -179,11 +179,12 @@ export default class AdvancedTab extends PureComponent {
              className="settings-tab__button--red"
              onClick={(event) => {
                event.preventDefault();
-                this.context.metricsEvent({
-                  eventOpts: {
+                this.context.trackEvent({
                  category: 'Settings',
+                  event: 'Reset Account',
+                  properties: {
                    action: 'Reset Account',
-                    name: 'Reset Account',
+                    legacy_event: true,
                  },
                });
                showResetAccountConfirmationModal();
@ -696,11 +697,12 @@ export default class AdvancedTab extends PureComponent {
            <ToggleButton
              value={useTokenDetection}
              onToggle={(value) => {
-                this.context.metricsEvent({
-                  eventOpts: {
+                this.context.trackEvent({
                  category: 'Settings',
+                  event: 'Token Detection',
+                  properties: {
                    action: 'Token Detection',
-                    name: 'Token Detection',
+                    legacy_event: true,
                  },
                });
                setUseTokenDetection(!value);
--- a/ui/pages/settings/advanced-tab/advanced-tab.component.test.js
+++ b/ui/pages/settings/advanced-tab/advanced-tab.component.test.js
@ -106,7 +106,7 @@ describe('AdvancedTab Component', () => {
      />,
      {
        context: {
-          metricsEvent: () => undefined,
+          trackEvent: () => undefined,
          t: (s) => `_${s}`,
        },
      },
@ -142,7 +142,7 @@ describe('AdvancedTab Component', () => {
      />,
      {
        context: {
-          metricsEvent: () => undefined,
+          trackEvent: () => undefined,
          t: (s) => `_${s}`,
        },
      },
--- a/ui/pages/settings/experimental-tab/experimental-tab.component.js
+++ b/ui/pages/settings/experimental-tab/experimental-tab.component.js
@ -12,7 +12,7 @@ import { THEME_TYPE } from './experimental-tab.constant';
 export default class ExperimentalTab extends PureComponent {
  static contextTypes = {
    t: PropTypes.func,
-    metricsEvent: PropTypes.func,
+    trackEvent: PropTypes.func,
  };

  static propTypes = {
@ -63,11 +63,12 @@ export default class ExperimentalTab extends PureComponent {
            <ToggleButton
              value={useTokenDetection}
              onToggle={(value) => {
-                this.context.metricsEvent({
-                  eventOpts: {
+                this.context.trackEvent({
                  category: 'Settings',
+                  event: 'Token Detection',
+                  properties: {
                    action: 'Token Detection',
-                    name: 'Token Detection',
+                    legacy_event: true,
                  },
                });
                setUseTokenDetection(!value);
@ -110,11 +111,12 @@ export default class ExperimentalTab extends PureComponent {
            <ToggleButton
              value={useCollectibleDetection}
              onToggle={(value) => {
-                this.context.metricsEvent({
-                  eventOpts: {
+                this.context.trackEvent({
                  category: 'Settings',
+                  event: 'Collectible Detection',
+                  properties: {
                    action: 'Collectible Detection',
-                    name: 'Collectible Detection',
+                    legacy_event: true,
                  },
                });
                if (!value && !openSeaEnabled) {
@ -159,11 +161,12 @@ export default class ExperimentalTab extends PureComponent {
            <ToggleButton
              value={openSeaEnabled}
              onToggle={(value) => {
-                this.context.metricsEvent({
-                  eventOpts: {
+                this.context.trackEvent({
                  category: 'Settings',
+                  event: 'Enabled/Disable OpenSea',
+                  properties: {
                    action: 'Enabled/Disable OpenSea',
-                    name: 'Enabled/Disable OpenSea',
+                    legacy_event: true,
                  },
                });
                // value is positive when being toggled off
@ -207,11 +210,12 @@ export default class ExperimentalTab extends PureComponent {
            <ToggleButton
              value={eip1559V2Enabled}
              onToggle={(value) => {
-                this.context.metricsEvent({
-                  eventOpts: {
+                this.context.trackEvent({
                  category: 'Settings',
+                  event: 'Enabled/Disable OpenSea',
+                  properties: {
                    action: 'Enabled/Disable OpenSea',
-                    name: 'Enabled/Disable OpenSea',
+                    legacy_event: true,
                  },
                });
                setEIP1559V2Enabled(!value);
--- a/ui/pages/settings/experimental-tab/experimental-tab.component.test.js
+++ b/ui/pages/settings/experimental-tab/experimental-tab.component.test.js
@ -15,7 +15,7 @@ describe('Experimental Tab', () => {
    wrapper = mount(<ExperimentalTab.WrappedComponent {...props} />, {
      context: {
        t: (str) => str,
-        metricsEvent: () => undefined,
+        trackEvent: () => undefined,
      },
    });
    const useTokenDetection = wrapper.find({ type: 'checkbox' }).at(0);
@ -29,7 +29,7 @@ describe('Experimental Tab', () => {
    wrapper = mount(<ExperimentalTab.WrappedComponent {...props} />, {
      context: {
        t: (str) => str,
-        metricsEvent: () => undefined,
+        trackEvent: () => undefined,
      },
    });
    const useTokenDetectionText = wrapper.find({ text: 'Use Token Detection' });
--- a/ui/pages/settings/security-tab/security-tab.component.js
+++ b/ui/pages/settings/security-tab/security-tab.component.js
@ -11,7 +11,7 @@ import {
 export default class SecurityTab extends PureComponent {
  static contextTypes = {
    t: PropTypes.func,
-    metricsEvent: PropTypes.func,
+    trackEvent: PropTypes.func,
  };

  static propTypes = {
@ -62,11 +62,12 @@ export default class SecurityTab extends PureComponent {
              large
              onClick={(event) => {
                event.preventDefault();
-                this.context.metricsEvent({
-                  eventOpts: {
+                this.context.trackEvent({
                  category: 'Settings',
+                  event: 'Reveal Seed Phrase',
+                  properties: {
                    action: 'Reveal Seed Phrase',
-                    name: 'Reveal Seed Phrase',
+                    legacy_event: true,
                  },
                });
                history.push(REVEAL_SEED_ROUTE);
--- a/ui/pages/settings/security-tab/security-tab.container.test.js
+++ b/ui/pages/settings/security-tab/security-tab.container.test.js
@ -27,7 +27,7 @@ describe('Security Tab', () => {
    wrapper = mount(<SecurityTab.WrappedComponent {...props} />, {
      context: {
        t: (str) => str,
-        metricsEvent: () => undefined,
+        trackEvent: () => undefined,
      },
    });
  });
--- a/ui/pages/unlock-page/unlock-page.component.js
+++ b/ui/pages/unlock-page/unlock-page.component.js
@ -10,7 +10,7 @@ import { DEFAULT_ROUTE } from '../../helpers/constants/routes';

 export default class UnlockPage extends Component {
  static contextTypes = {
-    metricsEvent: PropTypes.func,
+    trackEvent: PropTypes.func,
    t: PropTypes.func,
  };

@ -75,14 +75,19 @@ export default class UnlockPage extends Component {
    try {
      await onSubmit(password);
      const newState = await forceUpdateMetamaskState();
-      this.context.metricsEvent({
-        eventOpts: {
+      this.context.trackEvent(
+        {
          category: 'Navigation',
+          event: 'Success',
+          properties: {
            action: 'Unlock',
-          name: 'Success',
+            legacy_event: true,
          },
+        },
+        {
          isNewVisit: true,
-      });
+        },
+      );

      if (
        newState.participateInMetaMetrics === null ||
@ -93,13 +98,12 @@ export default class UnlockPage extends Component {
    } catch ({ message }) {
      if (message === 'Incorrect password') {
        const newState = await forceUpdateMetamaskState();
-        this.context.metricsEvent({
-          eventOpts: {
+        this.context.trackEvent({
          category: 'Navigation',
+          event: 'Incorrect Password',
+          properties: {
            action: 'Unlock',
-            name: 'Incorrect Password',
-          },
-          customVariables: {
+            legacy_event: true,
            numberOfTokens: newState.tokens.length,
            numberOfAccounts: Object.keys(newState.accounts).length,
          },