chore: Bump Snaps packages (#15232)

<!--
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**

This bumps Snaps packages to the latest versions. The main changes are:

- Support for `snap_trackEvent`.
- The execution environment is now built with `@lavamoat/webpack`,
resulting in a smaller bundle.
- Several small performance optimisations and fixes.

## **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 Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.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-mobile/blob/main/.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.

---------

Co-authored-by: David Drazic <[email protected]>

Author: Mrtenz

app/__mocks__/htmlMock.ts

@@ -1,3 +1,3 @@
 //@ts-expect-error TS issue: Cannot find module '../../node_modules/@metamask/...
 
-export { default as html } from '../../node_modules/@metamask/snaps-execution-environments/dist/browserify/webview/index.html';
+export { default as html } from '../../node_modules/@metamask/snaps-execution-environments/dist/webpack/webview/index.html';

app/core/Engine/Engine.ts

@@ -1438,7 +1438,7 @@ export class Engine {
       (state: NetworkState) => {
         if (
           state.networksMetadata[state.selectedNetworkClientId].status ===
-          NetworkStatus.Available &&
+            NetworkStatus.Available &&
           getGlobalChainId(networkController) !== currentChainId
         ) {
           // We should add a state or event emitter saying the provider changed
@@ -1611,7 +1611,7 @@ export class Engine {
       const chainIdHex = toHexadecimal(chainId);
       const tokens =
         TokensController.state.allTokens?.[chainIdHex]?.[
-        selectedInternalAccount.address
+          selectedInternalAccount.address
         ] || [];
       const { marketData } = TokenRatesController.state;
       const tokenExchangeRates = marketData?.[toHexadecimal(chainId)];
@@ -1624,7 +1624,7 @@ export class Engine {
       const decimalsToShow = (currentCurrency === 'usd' && 2) || undefined;
       if (
         accountsByChainId?.[toHexadecimal(chainId)]?.[
-        selectedInternalAccountFormattedAddress
+          selectedInternalAccountFormattedAddress
         ]
       ) {
         const balanceHex =
@@ -1665,7 +1665,7 @@ export class Engine {
 
         const tokenBalances =
           allTokenBalances?.[selectedInternalAccount.address as Hex]?.[
-          chainId
+            chainId
           ] ?? {};
         tokens.forEach(
           (item: { address: string; balance?: string; decimals: number }) => {
@@ -1676,9 +1676,9 @@ export class Engine {
               item.balance ||
               (item.address in tokenBalances
                 ? renderFromTokenMinimalUnit(
-                  tokenBalances[item.address as Hex],
-                  item.decimals,
-                )
+                    tokenBalances[item.address as Hex],
+                    item.decimals,
+                  )
                 : undefined);
             const tokenBalanceFiat = balanceToFiatNumber(
               // TODO: Fix this by handling or eliminating the undefined case
@@ -1834,7 +1834,7 @@ export class Engine {
     // Remove all permissions.
     PermissionController?.clearState?.();
     ///: BEGIN:ONLY_INCLUDE_IF(preinstalled-snaps,external-snaps)
-    SnapController.clearState();
+    await SnapController.clearState();
     ///: END:ONLY_INCLUDE_IF
 
     // Clear selected network

app/core/Engine/controllers/snaps/snap-controller-init.test.ts

@@ -11,6 +11,7 @@ import { buildControllerInitRequestMock } from '../../utils/test-utils';
 import { ExtendedControllerMessenger } from '../../../ExtendedControllerMessenger';
 import { KeyringControllerGetKeyringsByTypeAction } from '@metamask/keyring-controller';
 import { store } from '../../../../store';
+import { MetaMetrics } from '../../../Analytics';
 
 jest.mock('@metamask/snaps-controllers');
 
@@ -68,6 +69,7 @@ describe('SnapControllerInit', () => {
       getMnemonicSeed: expect.any(Function),
       maxIdleTime: expect.any(Number),
       preinstalledSnaps: expect.any(Array),
+      trackEvent: expect.any(Function),
     });
   });
 
@@ -138,4 +140,33 @@ describe('SnapControllerInit', () => {
       });
     });
   });
+
+  describe('trackEvent', () => {
+    it('calls the MetaMetrics `trackEvent` function', () => {
+      snapControllerInit(getInitRequestMock());
+
+      const controllerMock = jest.mocked(SnapController);
+      const trackEvent = controllerMock.mock.calls[0][0].trackEvent;
+
+      const instance = MetaMetrics.getInstance();
+      const spy = jest.spyOn(instance, 'trackEvent');
+
+      trackEvent({
+        event: 'test-event',
+        category: 'test-category',
+        properties: {
+          testProperty: 'test-value',
+        },
+      });
+
+      expect(spy).toHaveBeenCalledWith(
+        expect.objectContaining({
+          name: 'test-event',
+          properties: {
+            testProperty: 'test-value',
+          },
+        }),
+      );
+    });
+  });
 });

app/core/Engine/controllers/snaps/snap-controller-init.ts

@@ -21,6 +21,8 @@ import { selectBasicFunctionalityEnabled } from '../../../../selectors/settings'
 import { store } from '../../../../store';
 import PREINSTALLED_SNAPS from '../../../../lib/snaps/preinstalled-snaps';
 import { Caip25EndowmentPermissionName } from '@metamask/chain-agnostic-permission';
+import { MetaMetrics } from '../../../Analytics';
+import { MetricsEventBuilder } from '../../../Analytics/MetricsEventBuilder';
 
 /**
  * Initialize the Snap controller.
@@ -119,6 +121,16 @@ export const snapControllerInit: ControllerInitFunction<
     clientCryptography: {
       pbkdf2Sha512: pbkdf2,
     },
+    trackEvent: (params: {
+      event: string;
+      properties?: Record<string, unknown>;
+    }) =>
+      MetaMetrics.getInstance().trackEvent(
+        MetricsEventBuilder.createEventBuilder({
+          category: params.event,
+          properties: params.properties,
+        }).build(),
+      ),
   });
 
   return {

app/core/Permissions/specifications.js

@@ -172,6 +172,7 @@ export const unrestrictedMethods = Object.freeze([
   'snap_resolveInterface',
   'snap_setState',
   'snap_scheduleBackgroundEvent',
+  'snap_trackEvent',
   'snap_cancelBackgroundEvent',
   'snap_getBackgroundEvents',
   'snap_experimentalProviderRequest',

app/core/Snaps/SnapsMethodMiddleware.ts

@@ -26,6 +26,9 @@ import {
   SnapInterfaceControllerUpdateInterfaceStateAction,
 } from '../Engine/controllers/snaps';
 import { KeyringTypes } from '@metamask/keyring-controller';
+import { MetaMetrics } from '../../../app/core/Analytics';
+import { MetricsEventBuilder } from '../Analytics/MetricsEventBuilder';
+import { Json } from '@metamask/utils';
 
 export function getSnapIdFromRequest(
   request: Record<string, unknown>,
@@ -121,6 +124,19 @@ const snapMethodMiddlewareBuilder = (
       controllerMessenger,
       SnapControllerGetSnapAction,
     ),
+    trackEvent: (eventPayload: {
+      event: string;
+      properties: Record<string, Json>;
+      sensitiveProperties: Record<string, Json>;
+    }) => {
+      MetaMetrics.getInstance().trackEvent(
+        MetricsEventBuilder.createEventBuilder({
+          category: eventPayload.event,
+          properties: eventPayload.properties,
+          sensitiveProperties: eventPayload.sensitiveProperties,
+        }).build(),
+      );
+    },
     updateInterfaceState: controllerMessenger.call.bind(
       controllerMessenger,
       SnapInterfaceControllerUpdateInterfaceStateAction,

app/lib/snaps/SnapsExecutionWebView.tsx

@@ -7,7 +7,7 @@ import { WebViewInterface } from '@metamask/snaps-controllers/react-native';
 import { WebViewError } from '@metamask/react-native-webview/lib/WebViewTypes';
 import { PostMessageEvent } from '@metamask/post-message-stream';
 // @ts-expect-error Types are currently broken for this.
-import WebViewHTML from '@metamask/snaps-execution-environments/dist/browserify/webview/index.html';
+import WebViewHTML from '@metamask/snaps-execution-environments/dist/webpack/webview/index.html';
 import { EmptyObject } from '@metamask/snaps-sdk';
 
 const styles = createStyles();

package.json

@@ -203,7 +203,7 @@
     "@metamask/notification-services-controller": "^7.0.0",
     "@metamask/permission-controller": "^11.0.6",
     "@metamask/phishing-controller": "^12.4.1",
-    "@metamask/post-message-stream": "^9.0.0",
+    "@metamask/post-message-stream": "^10.0.0",
     "@metamask/ppom-validator": "0.36.0",
     "@metamask/preferences-controller": "^17.0.0",
     "@metamask/profile-sync-controller": "^13.0.0",
@@ -220,11 +220,11 @@
     "@metamask/signature-controller": "^28.0.0",
     "@metamask/slip44": "^4.1.0",
     "@metamask/smart-transactions-controller": "^16.3.1",
-    "@metamask/snaps-controllers": "^11.2.3",
-    "@metamask/snaps-execution-environments": "^7.2.2",
-    "@metamask/snaps-rpc-methods": "^12.1.0",
-    "@metamask/snaps-sdk": "^6.22.1",
-    "@metamask/snaps-utils": "^9.2.1",
+    "@metamask/snaps-controllers": "^12.0.0",
+    "@metamask/snaps-execution-environments": "^8.0.1",
+    "@metamask/snaps-rpc-methods": "^12.2.0",
+    "@metamask/snaps-sdk": "^6.23.0",
+    "@metamask/snaps-utils": "^9.2.2",
     "@metamask/solana-wallet-snap": "^1.27.0",
     "@metamask/stake-sdk": "^1.0.0",
     "@metamask/swappable-obj-proxy": "^2.1.0",

patches/@metamask+post-message-stream+10.0.0.patch

@@ -0,0 +1,67 @@
+diff --git a/node_modules/@metamask/post-message-stream/dist/window/WindowPostMessageStream.cjs b/node_modules/@metamask/post-message-stream/dist/window/WindowPostMessageStream.cjs
+index 0aaba03..e6eb9ea 100644
+--- a/node_modules/@metamask/post-message-stream/dist/window/WindowPostMessageStream.cjs
++++ b/node_modules/@metamask/post-message-stream/dist/window/WindowPostMessageStream.cjs
+@@ -1,4 +1,11 @@
+ "use strict";
++/**
++ * ============================== PATCH INFORMATION ==============================
++ * This patch was added for Snaps controller integration. The MessageEvent is not
++ * available in react native so we can simply return undefined here and handle the
++ * origin and source elsewhere.
++ * ===============================================================================
++ */
+ var __rest = (this && this.__rest) || function (s, e) {
+     var t = {};
+     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+@@ -17,11 +24,13 @@ const utils_1 = require("@metamask/utils");
+ const BasePostMessageStream_1 = require("../BasePostMessageStream.cjs");
+ const utils_2 = require("../utils.cjs");
+ /* istanbul ignore next */
+-const getSource = (_a = Object.getOwnPropertyDescriptor(MessageEvent.prototype, 'source')) === null || _a === void 0 ? void 0 : _a.get;
+-(0, utils_1.assert)(getSource, 'MessageEvent.prototype.source getter is not defined.');
++// const getSource = (_a = Object.getOwnPropertyDescriptor(MessageEvent.prototype, 'source')) === null || _a === void 0 ? void 0 : _a.get;
++// (0, utils_1.assert)(getSource, 'MessageEvent.prototype.source getter is not defined.');
++const getSource = () => undefined;
+ /* istanbul ignore next */
+-const getOrigin = (_b = Object.getOwnPropertyDescriptor(MessageEvent.prototype, 'origin')) === null || _b === void 0 ? void 0 : _b.get;
+-(0, utils_1.assert)(getOrigin, 'MessageEvent.prototype.origin getter is not defined.');
++// const getOrigin = (_b = Object.getOwnPropertyDescriptor(MessageEvent.prototype, 'origin')) === null || _b === void 0 ? void 0 : _b.get;
++// (0, utils_1.assert)(getOrigin, 'MessageEvent.prototype.origin getter is not defined.');
++const getOrigin = () => undefined;
+ /**
+  * A {@link Window.postMessage} stream.
+  */
+diff --git a/node_modules/@metamask/post-message-stream/dist/window/WindowPostMessageStream.mjs b/node_modules/@metamask/post-message-stream/dist/window/WindowPostMessageStream.mjs
+index db60ec4..ff6d786 100644
+--- a/node_modules/@metamask/post-message-stream/dist/window/WindowPostMessageStream.mjs
++++ b/node_modules/@metamask/post-message-stream/dist/window/WindowPostMessageStream.mjs
+@@ -1,3 +1,10 @@
++/**
++ * ============================== PATCH INFORMATION ==============================
++ * This patch was added for Snaps controller integration. The MessageEvent is not
++ * available in react native so we can simply return undefined here and handle the
++ * origin and source elsewhere.
++ * ===============================================================================
++ */
+ var __rest = (this && this.__rest) || function (s, e) {
+     var t = {};
+     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+@@ -14,11 +21,13 @@ import { assert } from "@metamask/utils";
+ import { BasePostMessageStream } from "../BasePostMessageStream.mjs";
+ import { isValidStreamMessage } from "../utils.mjs";
+ /* istanbul ignore next */
+-const getSource = (_a = Object.getOwnPropertyDescriptor(MessageEvent.prototype, 'source')) === null || _a === void 0 ? void 0 : _a.get;
+-assert(getSource, 'MessageEvent.prototype.source getter is not defined.');
++// const getSource = (_a = Object.getOwnPropertyDescriptor(MessageEvent.prototype, 'source')) === null || _a === void 0 ? void 0 : _a.get;
++// assert(getSource, 'MessageEvent.prototype.source getter is not defined.');
++const getSource = () => undefined;
+ /* istanbul ignore next */
+-const getOrigin = (_b = Object.getOwnPropertyDescriptor(MessageEvent.prototype, 'origin')) === null || _b === void 0 ? void 0 : _b.get;
+-assert(getOrigin, 'MessageEvent.prototype.origin getter is not defined.');
++// const getOrigin = (_b = Object.getOwnPropertyDescriptor(MessageEvent.prototype, 'origin')) === null || _b === void 0 ? void 0 : _b.get;
++// assert(getOrigin, 'MessageEvent.prototype.origin getter is not defined.');
++const getOrigin = () => undefined;
+ /**
+  * A {@link Window.postMessage} stream.
+  */