Use ArrayBuffer instead of Blob and handle other mobile quirks

Author: FrederikBolding

packages/snaps-controllers/src/websocket/WebSocketService.test.ts

@@ -10,7 +10,6 @@ import { WebSocketService } from './WebSocketService';
 import {
   getRestrictedWebSocketServiceMessenger,
   getRootWebSocketServiceMessenger,
-  sleep,
 } from '../test-utils';
 
 const MOCK_WEBSOCKET_URI = 'wss://metamask.io';
@@ -60,9 +59,7 @@ class MockWebSocket {
       this.#messageListener(
         new MessageEvent('message', {
           origin: this.#origin,
-          data:
-            // eslint-disable-next-line no-restricted-globals
-            new Blob([bytes]),
+          data: bytes.buffer,
         }),
       );
     }
@@ -213,9 +210,6 @@ describe('WebSocketService', () => {
       },
     );
 
-    // Wait for binary decoding.
-    await sleep(1);
-
     expect(rootMessenger.call).toHaveBeenNthCalledWith(
       4,
       'SnapController:handleRequest',

packages/snaps-controllers/src/websocket/WebSocketService.ts

@@ -171,6 +171,7 @@ export class WebSocketService {
 
     // eslint-disable-next-line no-restricted-globals
     const socket = new WebSocket(url, protocols);
+    socket.binaryType = 'arraybuffer';
 
     const { promise, resolve, reject } = createDeferredPromise();
 
@@ -190,7 +191,8 @@ export class WebSocketService {
         origin,
         code: event.code,
         reason: event.reason,
-        wasClean: event.wasClean,
+        // wasClean is not available on mobile.
+        wasClean: event.wasClean ?? null,
       });
     });
 
@@ -204,21 +206,20 @@ export class WebSocketService {
 
     socket.addEventListener('error', errorListener);
 
-    // eslint-disable-next-line @typescript-eslint/no-misused-promises
-    socket.addEventListener('message', async (event) => {
+    socket.addEventListener('message', (event) => {
       const isText = typeof event.data === 'string';
       const data = isText
         ? { type: 'text' as const, message: event.data }
         : {
             type: 'binary' as const,
-            // We assume binary data to be sent via Blob for now.
-            message: Array.from(new Uint8Array(await event.data.arrayBuffer())),
+            // We request that the WebSocket gives us an array buffer.
+            message: Array.from(new Uint8Array(event.data)),
           };
 
       this.#handleEvent(snapId, {
         type: 'message',
         id,
-        origin: event.origin,
+        origin,
         data,
       });
     });

packages/snaps-execution-environments/src/common/validation.ts

@@ -365,8 +365,8 @@ const WebSocketCloseEventStruct = object({
   id: string(),
   origin: string(),
   code: number(),
-  reason: string(),
-  wasClean: boolean(),
+  reason: nullable(string()),
+  wasClean: nullable(boolean()),
 });
 
 const WebSocketMessageEventStruct = object({

packages/snaps-sdk/src/types/handlers/web-socket-event.ts

@@ -26,8 +26,8 @@ export type WebSocketCloseEvent = {
   id: string;
   origin: string;
   code: number;
-  reason: string;
-  wasClean: boolean;
+  reason: string | null;
+  wasClean: boolean | null;
 };
 
 /**