feat(metametrics): add events during snap account removal

Author: ccharly

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

@@ -234,15 +234,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',
               {
@@ -260,6 +275,10 @@ export const snapKeyringBuilder = (
               await handleUserInput(confirmationResult);
               await persistKeyringHelper();
 
+              // 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,
@@ -273,10 +292,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,
@@ -300,9 +323,19 @@ export const snapKeyringBuilder = (
             }
           } else {
             await handleUserInput(confirmationResult);
+            trackSnapAccountEvent(
+              MetaMetricsEventName.RemoveSnapAccountCancelled,
+            );
+
             throw new Error('User denied account removal');
           }
         } finally {
+          trackSnapAccountEvent(
+            confirmationResult
+              ? MetaMetricsEventName.AccountRemoved
+              : MetaMetricsEventName.AccountRemoveFailed,
+          );
+
           controllerMessenger.call('ApprovalController:endFlow', {
             id: removeAccountApprovalId,
           });

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',
@@ -682,6 +683,11 @@ export enum MetaMetricsEventName {
   AddSnapAccountCancelled = 'Add Snap Account Cancelled',
   AddSnapAccountSuccessViewed = 'Add Snap Account Success Viewed',
   AddSnapAccountSuccessClicked = 'Add Snap Account Success Clicked',
+  RemoveSnapAccountViewed = 'Remove Snap Account Viewed',
+  RemoveSnapAccountConfirmed = 'Remove Snap Account Confirmed',
+  RemoveSnapAccountCancelled = 'Remove Snap Account Cancelled',
+  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',

ui/pages/confirmations/confirmation/templates/remove-snap-account.js

@@ -1,6 +1,25 @@
-function getValues(pendingApproval, t, actions) {
+import {
+  MetaMetricsEventCategory,
+  MetaMetricsEventName,
+  MetaMetricsEventAccountType,
+} from '../../../../../shared/constants/metametrics';
+
+function getValues(pendingApproval, t, actions, _history, _data, contexts) {
   const { origin: snapId, snapName } = pendingApproval;
   const { publicAddress } = pendingApproval.requestData;
+  const { trackEvent } = contexts;
+
+  const trackSnapAccountEvent = (event) => {
+    trackEvent({
+      event,
+      category: MetaMetricsEventCategory.Accounts,
+      properties: {
+        account_type: MetaMetricsEventAccountType.Snap,
+        snap_id: snapId,
+        snap_name: snapName,
+      },
+    });
+  };
 
   return {
     content: [
@@ -16,13 +35,21 @@ function getValues(pendingApproval, t, actions) {
     ],
     cancelText: t('cancel'),
     submitText: t('remove'),
-    onSubmit: () => actions.resolvePendingApproval(pendingApproval.id, true),
-    onCancel: () => actions.resolvePendingApproval(pendingApproval.id, false),
+    onLoad: () =>
+      trackSnapAccountEvent(MetaMetricsEventName.RemoveSnapAccountViewed),
+    onSubmit: () => {
+      trackSnapAccountEvent(MetaMetricsEventName.RemoveSnapAccountConfirmed);
+      actions.resolvePendingApproval(pendingApproval.id, true);
+    },
+    onCancel: () => {
+      trackSnapAccountEvent(MetaMetricsEventName.RemoveSnapAccountCancelled);
+      actions.resolvePendingApproval(pendingApproval.id, false);
+    },
   };
 }
 
-const createSnapAccount = {
+const removeSnapAccount = {
   getValues,
 };
 
-export default createSnapAccount;
+export default removeSnapAccount;