feat(LLD): configure MSW for LLD

Author: ejaycoleman

.changeset/silent-masks-dance.md

@@ -2,4 +2,4 @@
 "ledger-live-desktop": minor
 ---
 
-Adds fetch mock for MAD/DADA development
+Adds MSW to LLD for MAD/DADA development

apps/ledger-live-desktop/README.md

@@ -54,8 +54,8 @@ pnpm dev:lld
 ```
 
 ```bash
-# launch the app in dev mode with fetch mocking
-pnpm dev:lld:mock-fetch
+# launch the app in dev mode with MSW
+pnpm dev:lld:msw
 ```
 
 ## Watch deps

apps/ledger-live-desktop/package.json

@@ -17,7 +17,7 @@
   "scripts": {
     "start:prod": "electron ./.webpack/main.bundle.js",
     "start": "cross-env NODE_ENV=development node ./tools/main.js",
-    "start:mock-fetch": "cross-env NODE_ENV=development ENABLE_MOCK_FETCH=true node ./tools/main.js",
+    "start:msw": "cross-env NODE_ENV=development ENABLE_MSW=true node ./tools/main.js",
     "build": "cross-env CSC_IDENTITY_AUTO_DISCOVERY=false STAGING=1 node ./tools/dist --nosign -v",
     "build:js": "cross-env NODE_ENV=production node ./tools/main.js build",
     "build:testing": "cross-env NODE_ENV=production TESTING=1 node ./tools/main.js build",

apps/ledger-live-desktop/src/mocks/browser.ts

@@ -1,45 +1,16 @@
+import { setupWorker } from "msw/browser";
+import { http, HttpResponse } from "msw";
 import { mockAssets } from "./dada/mockAssets";
 
-interface MockWorker {
-  start: () => Promise<void>;
-  stop: () => Promise<void>;
-}
+const handlers = [
+  http.get("https://dada.api.ledger-test.com/v1/assets", () => {
+    return HttpResponse.json(mockAssets);
+  }),
+];
 
-let originalFetch: typeof window.fetch;
-let isIntercepting = false;
+const mswWorker = setupWorker(...handlers);
 
-const mockFetch = async (input: RequestInfo | URL, init?: RequestInit): Promise<Response> => {
-  const url = typeof input === "string" ? input : input instanceof URL ? input.href : input.url;
-  const method = init?.method || "GET";
-
-  console.log("Mock Fetch: Intercepting request to:", url);
-
-  if (url.includes("https://dada.api.ledger-test.com/v1/assets") && method === "GET") {
-    return new Response(JSON.stringify(mockAssets), {
-      status: 200,
-      headers: { "Content-Type": "application/json" },
-    });
-  }
-
-  // If no match, resort to original window.fetch
-  return originalFetch(input, init);
-};
-
-export const worker: MockWorker = {
-  start: async () => {
-    if (isIntercepting) return;
-
-    console.log("Mock Fetch: Starting fetch interception");
-    originalFetch = window.fetch;
-    window.fetch = mockFetch;
-    isIntercepting = true;
-  },
-
-  stop: async () => {
-    if (!isIntercepting) return;
-
-    console.log("Mock Fetch: Stopping fetch interception");
-    window.fetch = originalFetch;
-    isIntercepting = false;
-  },
-};
+export const startWorker = () =>
+  mswWorker.start({
+    onUnhandledRequest: "bypass",
+  });

apps/ledger-live-desktop/src/mocks/init.ts

@@ -1,20 +1,26 @@
 async function enableMocking() {
-  const mockFetchEnabled = process.env.ENABLE_MOCK_FETCH === "true";
+  const mswEnabled = process.env.ENABLE_MSW === "true";
 
-  if (!mockFetchEnabled) {
+  if (mswEnabled) {
+    try {
+      const { startWorker } = await import("~/mocks/browser");
+
+      await startWorker();
+    } catch (error) {
+      console.error("MSW: Failed to start Mock Service Worker:", error);
+    }
     return;
   }
 
-  try {
-    console.log("Mock Fetch: Starting Mock Service Worker (fetch interceptor)...");
-    const { worker } = await import("~/mocks/browser");
-
-    await worker.start();
-
-    console.log("Mock Fetch: Mock Service Worker started successfully");
-  } catch (error) {
-    console.error("Mock Fetch: Failed to start Mock Service Worker:", error);
-  }
+  const registrations = await navigator.serviceWorker.getRegistrations();
+  const mswRegistrations = registrations.filter(registration =>
+    registration.active?.scriptURL.includes("mockServiceWorker"),
+  );
+  await Promise.all(
+    mswRegistrations.map(async registration => {
+      await registration.unregister();
+    }),
+  );
 }
 
 enableMocking();

apps/ledger-live-desktop/src/renderer/index.ts

@@ -1,5 +1,5 @@
 import "./pre";
 import "~/renderer/env";
 import "~/renderer/experimental"; // NB we need to load this first because it loads things from process.env and will setEnv properly at boot
-import "~/mocks/init"; // Initialize Mock Fetch for API mocking
+import "~/mocks/init"; // Initialize MSW (Mock Service Worker) for API mocking
 import "~/renderer/init";