feat(snap-keyring): more snap account metrics

app/scripts/lib/snap-keyring/snap-keyring.ts

@@ -2,6 +2,11 @@ import { SnapKeyring } from '@metamask/eth-snap-keyring';
 import type { SnapController } from '@metamask/snaps-controllers';
 import browser from 'webextension-polyfill';
 import { SnapId } from '@metamask/snaps-sdk';
+import {
+  MetaMetricsEventCategory,
+  MetaMetricsEventName,
+  MetaMetricsEventAccountType,
+} from '../../../../shared/constants/metametrics';
 import { SNAP_MANAGE_ACCOUNTS_CONFIRMATION_TYPES } from '../../../../shared/constants/app';
 import { t } from '../../translate';
 import MetamaskController from '../../metamask-controller';
@@ -34,6 +39,7 @@ export const getAccountsBySnapId = async (
  * @param persistKeyringHelper - A function that persists all keyrings in the vault.
  * @param setSelectedAccountHelper - A function to update current selected account.
  * @param removeAccountHelper - A function to help remove an account based on its address.
+ * @param trackEvent - A function to track MetaMetrics events.
  * @returns The constructed SnapKeyring builder instance with the following methods:
  * - `saveState`: Persists all keyrings in the keyring controller.
  * - `addAccount`: Initiates the process of adding an account with user confirmation and handling the user input.
@@ -45,6 +51,10 @@ export const snapKeyringBuilder = (
   persistKeyringHelper: () => Promise<void>,
   setSelectedAccountHelper: (address: string) => void,
   removeAccountHelper: (address: string) => Promise<any>,
+  trackEvent: (
+    payload: Record<string, any>,
+    options?: Record<string, any>,
+  ) => void,
 ) => {
   const builder = (() => {
     return new SnapKeyring(getSnapController() as any, {
@@ -101,15 +111,30 @@ export const snapKeyringBuilder = (
         snapId: string,
         handleUserInput: (accepted: boolean) => Promise<void>,
       ) => {
+        const snapName = getSnapName(controllerMessenger, snapId);
         const { id: addAccountApprovalId } = controllerMessenger.call(
           'ApprovalController:startFlow',
         );
 
+        const trackSnapAccountEvent = (event: MetaMetricsEventName) => {
+          trackEvent({
+            event,
+            category: MetaMetricsEventCategory.Accounts,
+            properties: {
+              account_type: MetaMetricsEventAccountType.Snap,
+              snap_id: snapId,
+              snap_name: snapName,
+            },
+          });
+        };
+
         const learnMoreLink =
           'https://support.metamask.io/hc/en-us/articles/360015289452-How-to-add-accounts-in-your-wallet';
 
+        // Since we use this in the finally, better to give it a default value if the controller call fails
+        let confirmationResult = false;
         try {
-          const confirmationResult = Boolean(
+          confirmationResult = Boolean(
             await controllerMessenger.call(
               'ApprovalController:addRequest',
               {
@@ -139,6 +164,12 @@ export const snapKeyringBuilder = (
                 internalAccount.id,
               );
 
+              // TODO: Add events tracking to the dialog itself, so that events are more
+              // "linked" to UI actions
+              // User should now see the "Successfuly added account" page
+              trackSnapAccountEvent(
+                MetaMetricsEventName.AddSnapAccountSuccessViewed,
+              );
               await showSuccess(
                 controllerMessenger,
                 snapId,
@@ -152,10 +183,14 @@ export const snapKeyringBuilder = (
                   learnMoreLink,
                 },
               );
+
+              // User has clicked on "OK"
+              trackSnapAccountEvent(
+                MetaMetricsEventName.AddSnapAccountSuccessClicked,
+              );
             } catch (e) {
               const error = (e as Error).message;
 
-              const snapName = getSnapName(controllerMessenger, snapId);
               await showError(
                 controllerMessenger,
                 snapId,
@@ -173,15 +208,25 @@ export const snapKeyringBuilder = (
                 },
               );
 
+              trackSnapAccountEvent(MetaMetricsEventName.AccountAddFailed);
+
               throw new Error(
                 `Error occurred while creating snap account: ${error}`,
               );
             }
           } else {
+            // User has cancelled account creation
             await handleUserInput(confirmationResult);
+
             throw new Error('User denied account creation');
           }
         } finally {
+          // We do not have a `else` clause here, as it's used if the request was
+          // canceled by the user, thus it's not a "fail" (not an error).
+          if (confirmationResult) {
+            trackSnapAccountEvent(MetaMetricsEventName.AccountAdded);
+          }
+
           controllerMessenger.call('ApprovalController:endFlow', {
             id: addAccountApprovalId,
           });
@@ -192,15 +237,30 @@ export const snapKeyringBuilder = (
         snapId: string,
         handleUserInput: (accepted: boolean) => Promise<void>,
       ) => {
+        const snapName = getSnapName(controllerMessenger, snapId);
         const { id: removeAccountApprovalId } = controllerMessenger.call(
           'ApprovalController:startFlow',
         );
 
         const learnMoreLink =
           'https://support.metamask.io/hc/en-us/articles/360057435092-How-to-remove-an-account-from-your-MetaMask-wallet';
 
+        const trackSnapAccountEvent = (event: MetaMetricsEventName) => {
+          trackEvent({
+            event,
+            category: MetaMetricsEventCategory.Accounts,
+            properties: {
+              account_type: MetaMetricsEventAccountType.Snap,
+              snap_id: snapId,
+              snap_name: snapName,
+            },
+          });
+        };
+
+        // Since we use this in the finally, better to give it a default value if the controller call fails
+        let confirmationResult = false;
         try {
-          const confirmationResult = Boolean(
+          confirmationResult = Boolean(
             await controllerMessenger.call(
               'ApprovalController:addRequest',
               {
@@ -218,6 +278,12 @@ export const snapKeyringBuilder = (
               await handleUserInput(confirmationResult);
               await persistKeyringHelper();
 
+              // TODO: Add events tracking to the dialog itself, so that events are more
+              // "linked" to UI actions
+              // User should now see the "Successfuly removed account" page
+              trackSnapAccountEvent(
+                MetaMetricsEventName.RemoveSnapAccountSuccessViewed,
+              );
               // This isn't actually an error, but we show it as one for styling reasons
               await showError(
                 controllerMessenger,
@@ -231,10 +297,14 @@ export const snapKeyringBuilder = (
                   learnMoreLink,
                 },
               );
+
+              // User has clicked on "OK"
+              trackSnapAccountEvent(
+                MetaMetricsEventName.RemoveSnapAccountSuccessClicked,
+              );
             } catch (e) {
               const error = (e as Error).message;
 
-              const snapName = getSnapName(controllerMessenger, snapId);
               await showError(
                 controllerMessenger,
                 snapId,
@@ -252,15 +322,24 @@ export const snapKeyringBuilder = (
                 },
               );
 
+              trackSnapAccountEvent(MetaMetricsEventName.AccountRemoveFailed);
+
               throw new Error(
                 `Error occurred while removing snap account: ${error}`,
               );
             }
           } else {
             await handleUserInput(confirmationResult);
+
             throw new Error('User denied account removal');
           }
         } finally {
+          // We do not have a `else` clause here, as it's used if the request was
+          // canceled by the user, thus it's not a "fail" (not an error).
+          if (confirmationResult) {
+            trackSnapAccountEvent(MetaMetricsEventName.AccountRemoved);
+          }
+
           controllerMessenger.call('ApprovalController:endFlow', {
             id: removeAccountApprovalId,
           });

app/scripts/metamask-controller.js

@@ -993,6 +993,7 @@ export default class MetamaskController extends EventEmitter {
         persistAndUpdateAccounts,
         (address) => this.preferencesController.setSelectedAddress(address),
         (address) => this.removeAccount(address),
+        this.metaMetricsController.trackEvent.bind(this.metaMetricsController),
       ),
     );
 

docs/confirmations.md

@@ -115,7 +115,7 @@ The `ConfirmationPage` component is already configured to display any approval r
 
 In order to configure how the resulting confirmation is rendered, an **Approval Template** is required.
 
-Create a new JavaScript file in `ui/pages/confirmation/templates` with the name matching the `type` used in the background approval request.
+Create a new JavaScript file in `ui/pages/confirmations/confirmation/templates` with the name matching the `type` used in the background approval request.
 
 ### 2. Update Approval Templates
 

shared/constants/metametrics.ts

@@ -638,6 +638,7 @@ export enum MetaMetricsEventName {
   AccountDetailMenuOpened = 'Account Details Menu Opened',
   BlockExplorerLinkClicked = 'Block Explorer Clicked',
   AccountRemoved = 'Account Removed',
+  AccountRemoveFailed = 'Account Remove Failed',
   TestNetworksDisplayed = 'Test Networks Displayed',
   AddNetworkButtonClick = 'Add Network Button Clicked',
   CustomNetworkAdded = 'Custom Network Added',
@@ -676,13 +677,31 @@ export enum MetaMetricsEventName {
   ///: END:ONLY_INCLUDE_IF
   ///: BEGIN:ONLY_INCLUDE_IF(keyring-snaps)
   AddSnapAccountEnabled = 'Add Snap Account Enabled',
+  AddSnapAccountViewed = 'Add Snap Account Viewed',
+  AddSnapAccountConfirmed = 'Add Snap Account Confirmed',
+  AddSnapAccountCanceled = 'Add Snap Account Canceled',
+  AddSnapAccountSuccessViewed = 'Add Snap Account Success Viewed',
+  AddSnapAccountSuccessClicked = 'Add Snap Account Success Clicked',
+  RemoveSnapAccountViewed = 'Remove Snap Account Viewed',
+  RemoveSnapAccountConfirmed = 'Remove Snap Account Confirmed',
+  RemoveSnapAccountCanceled = 'Remove Snap Account Canceled',
+  RemoveSnapAccountSuccessViewed = 'Remove Snap Account Success Viewed',
+  RemoveSnapAccountSuccessClicked = 'Remove Snap Account Success Clicked',
+  SnapAccountTransactionLoadingViewed = 'Snap Account Transaction Loading Viewed',
+  SnapAccountTransactionFinalizeViewed = 'Snap Account Transaction Finalize Viewed',
+  SnapAccountTransactionFinalizeRedirectGoToSiteClicked = 'Snap Account Transaction Finalize Redirect "Go To Site" Clicked',
+  SnapAccountTransactionFinalizeRedirectSnapUrlClicked = 'Snap Account Transaction Finalize Redirect "Snap URL" Clicked',
+  SnapAccountTransactionFinalizeClosed = 'Snap Account Transaction Finalize Closed',
   ///: END:ONLY_INCLUDE_IF
 }
 
 export enum MetaMetricsEventAccountType {
   Default = 'metamask',
   Hardware = 'hardware',
   Imported = 'imported',
+  ///: BEGIN:ONLY_INCLUDE_IF(keyring-snaps)
+  Snap = 'snap',
+  ///: END:ONLY_INCLUDE_IF
 }
 
 export enum MetaMetricsEventAccountImportType {

ui/components/multichain/account-list-menu/account-list-menu.js

@@ -286,6 +286,14 @@ export const AccountListMenu = ({
                     startIconName={IconName.Snaps}
                     onClick={() => {
                       onClose();
+                      trackEvent({
+                        category: MetaMetricsEventCategory.Navigation,
+                        event: MetaMetricsEventName.AccountAddSelected,
+                        properties: {
+                          account_type: MetaMetricsEventAccountType.Snap,
+                          location: 'Main Menu',
+                        },
+                      });
                       global.platform.openTab({
                         url: process.env.ACCOUNT_SNAPS_DIRECTORY_URL,
                       });

ui/pages/confirmations/confirm-transaction-base/confirm-transaction-base.component.js

@@ -58,6 +58,7 @@ import { ConfirmGasDisplay } from '../components/confirm-gas-display';
 import updateTxData from '../../../../shared/modules/updateTxData';
 ///: BEGIN:ONLY_INCLUDE_IF(keyring-snaps)
 import { KeyringType } from '../../../../shared/constants/keyring';
+import SnapAccountTransactionLoadingScreen from '../../snap-account-transaction-loading-screen/snap-account-transaction-loading-screen';
 ///: END:ONLY_INCLUDE_IF
 import { isHardwareKeyring } from '../../../helpers/utils/hardware';
 import FeeDetailsComponent from '../components/fee-details-component/fee-details-component';
@@ -102,6 +103,9 @@ export default class ConfirmTransactionBase extends Component {
     unapprovedTxCount: PropTypes.number,
     customGas: PropTypes.object,
     addToAddressBookIfNew: PropTypes.func,
+    ///: BEGIN:ONLY_INCLUDE_IF(keyring-snaps)
+    fromInternalAccount: PropTypes.object,
+    ///: END:ONLY_INCLUDE_IF
     keyringForAccount: PropTypes.object,
     // Component props
     actionKey: PropTypes.string,
@@ -671,14 +675,21 @@ export default class ConfirmTransactionBase extends Component {
       toAccounts,
       toAddress,
       keyringForAccount,
+      ///: BEGIN:ONLY_INCLUDE_IF(keyring-snaps)
+      fromInternalAccount,
+      ///: END:ONLY_INCLUDE_IF
     } = this.props;
 
     let loadingIndicatorMessage;
 
     switch (keyringForAccount?.type) {
       ///: BEGIN:ONLY_INCLUDE_IF(keyring-snaps)
       case KeyringType.snap:
-        loadingIndicatorMessage = this.context.t('loadingScreenSnapMessage');
+        loadingIndicatorMessage = (
+          <SnapAccountTransactionLoadingScreen
+            internalAccount={fromInternalAccount}
+          ></SnapAccountTransactionLoadingScreen>
+        );
         break;
       ///: END:ONLY_INCLUDE_IF
       default:

ui/pages/confirmations/confirm-transaction-base/confirm-transaction-base.container.js

@@ -159,8 +159,8 @@ const mapStateToProps = (state, ownProps) => {
   const tokenToAddress = getTokenAddressParam(transactionData);
 
   const { balance } = accounts[fromAddress];
-  const fromName = getInternalAccountByAddress(state, fromAddress)?.metadata
-    .name;
+  const fromInternalAccount = getInternalAccountByAddress(state, fromAddress);
+  const fromName = fromInternalAccount?.metadata.name;
   const keyring = findKeyringForAddress(state, fromAddress);
 
   const isSendingAmount =
@@ -319,6 +319,9 @@ const mapStateToProps = (state, ownProps) => {
     isBuyableChain,
     useCurrencyRateCheck: getUseCurrencyRateCheck(state),
     keyringForAccount: keyring,
+    ///: BEGIN:ONLY_INCLUDE_IF(keyring-snaps)
+    fromInternalAccount,
+    ///: END:ONLY_INCLUDE_IF
     isUsingPaymaster,
     isSigningOrSubmitting,
     isUserOpContractDeployError,

ui/pages/confirmations/confirmation/confirmation.js

@@ -4,6 +4,7 @@ import React, {
   useMemo,
   useReducer,
   useState,
+  useContext,
 } from 'react';
 import PropTypes from 'prop-types';
 import { useDispatch, useSelector } from 'react-redux';
@@ -21,6 +22,7 @@ import ConfirmationWarningModal from '../components/confirmation-warning-modal';
 import { DEFAULT_ROUTE } from '../../../helpers/constants/routes';
 import { Size, TextColor } from '../../../helpers/constants/design-system';
 import { useI18nContext } from '../../../hooks/useI18nContext';
+import { MetaMetricsContext } from '../../../contexts/metametrics';
 import {
   ///: BEGIN:ONLY_INCLUDE_IF(snaps)
   getTargetSubjectMetadata,
@@ -195,6 +197,7 @@ export default function ConfirmationPage({
   redirectToHomeOnZeroConfirmations = true,
 }) {
   const t = useI18nContext();
+  const trackEvent = useContext(MetaMetricsContext);
   const dispatch = useDispatch();
   const history = useHistory();
   const pendingConfirmations = useSelector(
@@ -312,6 +315,9 @@ export default function ConfirmationPage({
             matchedChain,
             currencySymbolWarning,
           },
+          // Passing `t` in the contexts object is a bit redundant but since it's a
+          // context too, it makes sense (for completeness)
+          { t, trackEvent },
         )
       : {};
   }, [
@@ -321,12 +327,19 @@ export default function ConfirmationPage({
     history,
     matchedChain,
     currencySymbolWarning,
+    trackEvent,
     ///: BEGIN:ONLY_INCLUDE_IF(snaps,keyring-snaps)
     isSnapDialog,
     snapName,
     ///: END:ONLY_INCLUDE_IF
   ]);
 
+  useEffect(() => {
+    if (templatedValues.onLoad) {
+      templatedValues.onLoad();
+    }
+  }, [templatedValues]);
+
   useEffect(() => {
     // If the number of pending confirmations reduces to zero when the user
     // return them to the default route. Otherwise, if the number of pending