fix (cherry-pick for v12.1.0): add user IDs for send page events (#26625

)

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**

Cherry picks #26600 

<!--
Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change?
2. What is the improvement/solution?
-->

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/26625?quickstart=1)

## **Related issues**

Fixes:

## **Manual testing steps**

1. Go to this page...
2.
3.

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->

### **After**

<!-- [screenshots/recordings] -->

## **Pre-merge author checklist**

- [ ] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md).
- [ ] I've completed the PR template to the best of my ability
- [ ] I’ve included tests if applicable
- [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [ ] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

app/scripts/controllers/metametrics.js

@@ -1016,7 +1016,8 @@ export default class MetaMetricsController {
     // to be updated to work with the new tracking plan. I think we should use
     // a config setting for this instead of trying to match the event name
     const isSendFlow = Boolean(payload.event.match(/^send|^confirm/iu));
-    if (isSendFlow) {
+    // do not filter if excludeMetaMetricsId is explicitly set to false
+    if (options?.excludeMetaMetricsId !== false && isSendFlow) {
       excludeMetaMetricsId = true;
     }
     // If we are tracking sensitive data we will always use the anonymousId

ui/components/app/nfts-items/nfts-items.js

@@ -164,17 +164,22 @@ export default function NftsItems({
   };
 
   const onSendNft = async (nft) => {
-    trackEvent({
-      event: MetaMetricsEventName.sendAssetSelected,
-      category: MetaMetricsEventCategory.Send,
-      properties: {
-        ...sendAnalytics,
-        is_destination_asset_picker_modal: false,
-        new_asset_symbol: nft.name,
-        new_asset_address: nft.address,
-        is_nft: true,
+    trackEvent(
+      {
+        event: MetaMetricsEventName.sendAssetSelected,
+        category: MetaMetricsEventCategory.Send,
+        properties: {
+          is_destination_asset_picker_modal: false,
+          is_nft: true,
+        },
+        sensitiveProperties: {
+          ...sendAnalytics,
+          new_asset_symbol: nft.name,
+          new_asset_address: nft.address,
+        },
       },
-    });
+      { excludeMetaMetricsId: false },
+    );
     await dispatch(
       updateSendAsset({
         type: AssetType.NFT,

ui/components/app/wallet-overview/coin-buttons.tsx

@@ -219,16 +219,19 @@ const CoinButtons = ({
   ///: END:ONLY_INCLUDE_IF
 
   const handleSendOnClick = useCallback(async () => {
-    trackEvent({
-      event: MetaMetricsEventName.NavSendButtonClicked,
-      category: MetaMetricsEventCategory.Navigation,
-      properties: {
-        token_symbol: 'ETH',
-        location: 'Home',
-        text: 'Send',
-        chain_id: chainId,
+    trackEvent(
+      {
+        event: MetaMetricsEventName.NavSendButtonClicked,
+        category: MetaMetricsEventCategory.Navigation,
+        properties: {
+          token_symbol: 'ETH',
+          location: 'Home',
+          text: 'Send',
+          chain_id: chainId,
+        },
       },
-    });
+      { excludeMetaMetricsId: false },
+    );
     await dispatch(startNewDraftTransaction({ type: AssetType.native }));
     history.push(SEND_ROUTE);
   }, [chainId]);

ui/components/multichain/asset-picker-amount/asset-picker-modal/asset-picker-modal.tsx

@@ -123,17 +123,22 @@ export function AssetPickerModal({
   const handleAssetChange = useCallback(
     (token: Token) => {
       onAssetChange(token);
-      trackEvent({
-        event: MetaMetricsEventName.sendAssetSelected,
-        category: MetaMetricsEventCategory.Send,
-        properties: {
-          ...sendAnalytics,
-          is_destination_asset_picker_modal: Boolean(isDest),
-          new_asset_symbol: token.symbol,
-          new_asset_address: token.address,
-          is_nft: false,
+      trackEvent(
+        {
+          event: MetaMetricsEventName.sendAssetSelected,
+          category: MetaMetricsEventCategory.Send,
+          properties: {
+            is_destination_asset_picker_modal: Boolean(isDest),
+            is_nft: false,
+          },
+          sensitiveProperties: {
+            ...sendAnalytics,
+            new_asset_symbol: token.symbol,
+            new_asset_address: token.address,
+          },
         },
-      });
+        { excludeMetaMetricsId: false },
+      );
       onClose();
     },
     [onAssetChange],

ui/components/multichain/asset-picker-amount/asset-picker/asset-picker.tsx

@@ -162,14 +162,19 @@ export function AssetPicker({
         backgroundColor={BackgroundColor.transparent}
         onClick={() => {
           setShowAssetPickerModal(true);
-          trackEvent({
-            event: MetaMetricsEventName.sendTokenModalOpened,
-            category: MetaMetricsEventCategory.Send,
-            properties: {
-              ...sendAnalytics,
-              is_destination_asset_picker_modal: Boolean(sendingAsset),
+          trackEvent(
+            {
+              event: MetaMetricsEventName.sendTokenModalOpened,
+              category: MetaMetricsEventCategory.Send,
+              properties: {
+                is_destination_asset_picker_modal: Boolean(sendingAsset),
+              },
+              sensitiveProperties: {
+                ...sendAnalytics,
+              },
             },
-          });
+            { excludeMetaMetricsId: false },
+          );
         }}
         endIconName={IconName.ArrowDown}
         endIconProps={{

ui/components/multichain/pages/send/components/address-book.tsx

@@ -99,14 +99,17 @@ export const SendPageAddressBook = () => {
         `sendFlow - User clicked recipient from ${type}. address: ${address}, nickname ${nickname}`,
       ),
     );
-    trackEvent({
-      event: MetaMetricsEventName.sendRecipientSelected,
-      category: MetaMetricsEventCategory.Send,
-      properties: {
-        location: 'address book',
-        inputType: type,
+    trackEvent(
+      {
+        event: MetaMetricsEventName.sendRecipientSelected,
+        category: MetaMetricsEventCategory.Send,
+        properties: {
+          location: 'address book',
+          inputType: type,
+        },
       },
-    });
+      { excludeMetaMetricsId: false },
+    );
     dispatch(updateRecipient({ address, nickname }));
     dispatch(updateRecipientUserInput(address));
   };

ui/components/multichain/pages/send/components/quote-card/index.tsx

@@ -85,14 +85,19 @@ export function QuoteCard({ scrollRef }: QuoteCardProps) {
     }
 
     if (bestQuote) {
-      trackEvent({
-        event: MetaMetricsEventName.sendSwapQuoteFetched,
-        category: MetaMetricsEventCategory.Send,
-        properties: {
-          ...sendAnalytics,
-          is_first_fetch: isQuoteJustLoaded,
+      trackEvent(
+        {
+          event: MetaMetricsEventName.sendSwapQuoteFetched,
+          category: MetaMetricsEventCategory.Send,
+          properties: {
+            is_first_fetch: isQuoteJustLoaded,
+          },
+          sensitiveProperties: {
+            ...sendAnalytics,
+          },
         },
-      });
+        { excludeMetaMetricsId: false },
+      );
       setTimeLeft(REFRESH_INTERVAL);
     } else {
       setTimeLeft(undefined);

ui/components/multichain/pages/send/components/recipient-input.tsx

@@ -46,14 +46,17 @@ export const SendPageRecipientInput = () => {
             addHistoryEntry(`sendFlow - Valid address typed ${address}`),
           );
           await dispatch(updateRecipientUserInput(address));
-          trackEvent({
-            event: MetaMetricsEventName.sendRecipientSelected,
-            category: MetaMetricsEventCategory.Send,
-            properties: {
-              location: 'send page recipient input',
-              inputType: 'user input',
+          trackEvent(
+            {
+              event: MetaMetricsEventName.sendRecipientSelected,
+              category: MetaMetricsEventCategory.Send,
+              properties: {
+                location: 'send page recipient input',
+                inputType: 'user input',
+              },
             },
-          });
+            { excludeMetaMetricsId: false },
+          );
           dispatch(updateRecipient({ address, nickname: '' }));
         }}
         internalSearch={isUsingMyAccountsForRecipientSearch}

ui/components/multichain/pages/send/components/recipient.tsx

@@ -67,14 +67,17 @@ export const SendPageRecipient = () => {
         `sendFlow - User clicked recipient from ${type}. address: ${address}, nickname ${nickname}`,
       ),
     );
-    trackEvent({
-      event: MetaMetricsEventName.sendRecipientSelected,
-      category: MetaMetricsEventCategory.Send,
-      properties: {
-        location: 'send page recipient screen',
-        inputType: type,
+    trackEvent(
+      {
+        event: MetaMetricsEventName.sendRecipientSelected,
+        category: MetaMetricsEventCategory.Send,
+        properties: {
+          location: 'send page recipient screen',
+          inputType: type,
+        },
       },
-    });
+      { excludeMetaMetricsId: false },
+    );
     dispatch(updateRecipient({ address, nickname }));
     dispatch(updateRecipientUserInput(address));
   };

ui/components/multichain/pages/send/components/your-accounts.tsx

@@ -42,14 +42,17 @@ export const SendPageYourAccounts = () => {
                 `sendFlow - User clicked recipient from my accounts. address: ${account.address}, nickname ${account.name}`,
               ),
             );
-            trackEvent({
-              event: MetaMetricsEventName.sendRecipientSelected,
-              category: MetaMetricsEventCategory.Send,
-              properties: {
-                location: 'my accounts',
-                inputType: 'click',
+            trackEvent(
+              {
+                event: MetaMetricsEventName.sendRecipientSelected,
+                category: MetaMetricsEventCategory.Send,
+                properties: {
+                  location: 'my accounts',
+                  inputType: 'click',
+                },
               },
-            });
+              { excludeMetaMetricsId: false },
+            );
             dispatch(
               updateRecipient({
                 address: account.address,

ui/components/multichain/pages/send/send.js

@@ -201,13 +201,16 @@ export const SendPage = () => {
     }
     dispatch(resetSendState());
 
-    trackEvent({
-      event: MetaMetricsEventName.sendFlowExited,
-      category: MetaMetricsEventCategory.Send,
-      properties: {
-        ...sendAnalytics,
+    trackEvent(
+      {
+        event: MetaMetricsEventName.sendFlowExited,
+        category: MetaMetricsEventCategory.Send,
+        sensitiveProperties: {
+          ...sendAnalytics,
+        },
       },
-    });
+      { excludeMetaMetricsId: false },
+    );
 
     const nextRoute =
       sendStage === SEND_STAGES.EDIT ? DEFAULT_ROUTE : mostRecentOverviewPage;
@@ -216,13 +219,16 @@ export const SendPage = () => {
 
   useEffect(() => {
     if (swapQuotesError) {
-      trackEvent({
-        event: MetaMetricsEventName.sendSwapQuoteError,
-        category: MetaMetricsEventCategory.Send,
-        properties: {
-          ...sendAnalytics,
+      trackEvent(
+        {
+          event: MetaMetricsEventName.sendSwapQuoteError,
+          category: MetaMetricsEventCategory.Send,
+          sensitiveProperties: {
+            ...sendAnalytics,
+          },
         },
-      });
+        { excludeMetaMetricsId: false },
+      );
     }
     // sendAnalytics should not result in the event refiring
     // eslint-disable-next-line react-hooks/exhaustive-deps

ui/pages/asset/components/token-buttons.tsx

@@ -181,16 +181,19 @@ const TokenButtons = ({
       <IconButton
         className="token-overview__button"
         onClick={async () => {
-          trackEvent({
-            event: MetaMetricsEventName.NavSendButtonClicked,
-            category: MetaMetricsEventCategory.Navigation,
-            properties: {
-              token_symbol: token.symbol,
-              location: MetaMetricsSwapsEventSource.TokenView,
-              text: 'Send',
-              chain_id: chainId,
+          trackEvent(
+            {
+              event: MetaMetricsEventName.NavSendButtonClicked,
+              category: MetaMetricsEventCategory.Navigation,
+              properties: {
+                token_symbol: token.symbol,
+                location: MetaMetricsSwapsEventSource.TokenView,
+                text: 'Send',
+                chain_id: chainId,
+              },
             },
-          });
+            { excludeMetaMetricsId: false },
+          );
           try {
             await dispatch(
               startNewDraftTransaction({