[LWDM] feat(devtools): wire LLD and LWM into devtools WebSocket transport

.changeset/quiet-transport-wire.md

@@ -0,0 +1,6 @@
+---
+"ledger-live-desktop": minor
+"live-mobile": minor
+---
+
+Add debug WebSocket transport to DevTools relay

apps/ledger-live-desktop/package.json

@@ -74,6 +74,8 @@
     "@domain/entity-large-screen-upsell-modal": "workspace:*",
     "@devtools/shell": "workspace:^",
     "@devtools/bindings": "workspace:*",
+    "@devtools/transport-panel": "workspace:*",
+    "@devtools/wire": "workspace:*",
     "@electron/fuses": "2.0.0",
     "@features/flow-card": "workspace:^",
     "@features/flow-contacts": "workspace:^",

apps/ledger-live-desktop/src/mvvm/features/DevTools/__integrations__/DevToolsScreen.integration.test.tsx

@@ -7,6 +7,9 @@ jest.mock("react-router", () => ({
   ...jest.requireActual("react-router"),
   useNavigate: () => mockNavigate,
 }));
+jest.mock("@devtools/transport-panel", () => ({
+  TransportPanel: () => null,
+}));
 
 const devToolsSpy = jest.fn();
 jest.mock("@devtools/shell", () => ({
@@ -24,6 +27,20 @@ jest.mock("@devtools/bindings", () => ({
   useFeatureFlagsToolProps: () => ({ marker: "ff-props" }),
 }));
 
+jest.mock("@devtools/wire", () => {
+  const wireState = { hubUrl: "ws://127.0.0.1:9090", role: "host" };
+  return {
+    buildTransport: () => ({
+      transport: {},
+      subscribe: () => () => {},
+      getState: () => wireState,
+      setHubUrl: jest.fn(),
+    }),
+    buildCopyStoreProtocol: () => ({}),
+    combineProtocols: (...args: unknown[]) => args[0],
+  };
+});
+
 describe("DevToolsScreen", () => {
   beforeEach(() => {
     mockNavigate.mockClear();

apps/ledger-live-desktop/src/mvvm/features/DevTools/screens/DevToolsScreen/index.tsx

@@ -1,16 +1,23 @@
 import React from "react";
 import { DevTools } from "@devtools/shell";
+import { TransportPanel } from "@devtools/transport-panel";
 import { useDevToolsScreenViewModel } from "./useDevToolsScreenViewModel";
 
 export default function DevToolsScreen() {
-  const { config, onClose } = useDevToolsScreenViewModel();
+  const { config, onClose, transport, hubUrl, setHubUrl, role } = useDevToolsScreenViewModel();
 
   return (
     <div
       style={{ display: "flex", flexDirection: "column", flex: 1, minHeight: 0 }}
       className="rounded-md overflow-hidden"
     >
-      <DevTools config={config} onClose={onClose} />
+      <DevTools
+        config={config}
+        onClose={onClose}
+        footer={
+          <TransportPanel transport={transport} hubUrl={hubUrl} setHubUrl={setHubUrl} role={role} />
+        }
+      />
     </div>
   );
 }

apps/ledger-live-desktop/src/mvvm/features/DevTools/screens/DevToolsScreen/useDevToolsRelay.ts

@@ -0,0 +1,23 @@
+import { useSyncExternalStore } from "react";
+import { buildTransport, buildCopyStoreProtocol, combineProtocols } from "@devtools/wire";
+import { sleepingListener } from "~/state-manager/sleepingListener";
+import { useStore } from "LLD/hooks/redux";
+
+const HUB_URL = "ws://127.0.0.1:9090";
+const ROLE = "host" as const;
+
+function buildRelay(store: ReturnType<typeof useStore>) {
+  return buildTransport(
+    { hubUrl: HUB_URL, role: ROLE, id: "lld" },
+    combineProtocols(buildCopyStoreProtocol(store, sleepingListener, ROLE)),
+  );
+}
+
+let relay: ReturnType<typeof buildRelay> | undefined;
+
+export function useDevToolsRelay() {
+  const store = useStore();
+  if (!relay) relay = buildRelay(store);
+  const wireState = useSyncExternalStore(relay.subscribe, relay.getState, relay.getState);
+  return { wire: relay, wireState };
+}

apps/ledger-live-desktop/src/mvvm/features/DevTools/screens/DevToolsScreen/useDevToolsScreenViewModel.ts

@@ -2,13 +2,12 @@ import { useCallback, useMemo } from "react";
 import { useNavigate } from "react-router";
 import { useFeatureFlagsToolProps } from "@devtools/bindings";
 import type { DevToolsConfig } from "@devtools/shell";
+import { useDevToolsRelay } from "./useDevToolsRelay";
 
-export function useDevToolsScreenViewModel(): {
-  config: DevToolsConfig;
-  onClose: () => void;
-} {
+export function useDevToolsScreenViewModel() {
   const navigate = useNavigate();
   const featureFlagsToolProps = useFeatureFlagsToolProps();
+  const { wire, wireState } = useDevToolsRelay();
 
   const config: DevToolsConfig = useMemo(
     () => [{ id: "feature-flags", config: featureFlagsToolProps }],
@@ -17,5 +16,12 @@ export function useDevToolsScreenViewModel(): {
 
   const onClose = useCallback(() => navigate(-1), [navigate]);
 
-  return { config, onClose };
+  return {
+    config,
+    onClose,
+    transport: wire.transport,
+    hubUrl: wireState.hubUrl,
+    setHubUrl: wire.setHubUrl,
+    role: wireState.role,
+  };
 }

apps/ledger-live-desktop/src/state-manager/configureStore.ts

@@ -21,6 +21,7 @@ import { createIdentitiesSyncMiddleware, pushDevicesApiExtra } from "@domain/api
 import { canPushDeviceIdsSelector, languageSelector } from "~/renderer/reducers/settings";
 import { createFeatureFlagsMiddleware, type PartialFeatures } from "@shared/feature-flags";
 import { fetchRemoteFlags as defaultFetchRemoteFlags } from "~/firebase/remoteConfig";
+import { sleepingListener } from "./sleepingListener";
 type Props = {
   state?: State;
   dbMiddleware?: Middleware;
@@ -116,7 +117,8 @@ const customCreateStore = ({
             fetchRemoteFlags: fetchRemoteFlags ?? undefined,
             getAppLanguage: languageSelector,
           }),
-        ),
+        )
+        .concat(sleepingListener.middleware),
     devTools: __DEV__,
   });
 

apps/ledger-live-desktop/src/state-manager/sleepingListener.ts

@@ -0,0 +1,3 @@
+import { createListenerMiddleware } from "@reduxjs/toolkit";
+
+export const sleepingListener = createListenerMiddleware();

apps/ledger-live-mobile/package.json

@@ -87,6 +87,8 @@
     "@datadog/mobile-react-navigation": "2.8.2",
     "@devtools/bindings": "workspace:^",
     "@devtools/shell": "workspace:^",
+    "@devtools/transport-panel": "workspace:*",
+    "@devtools/wire": "workspace:*",
     "@domain/api-altcoins-sentiment": "workspace:^",
     "@domain/api-currency-fiat": "workspace:^",
     "@domain/api-currency-token": "workspace:^",

apps/ledger-live-mobile/src/mvvm/features/DevTools/__integrations__/DevToolsScreen.integration.test.tsx

@@ -19,6 +19,24 @@ jest.mock(
   () => ({ useFeatureFlagsToolProps: () => ({ marker: "ff-props" }) }),
   { virtual: true },
 );
+jest.mock("@devtools/transport-panel", () => ({ TransportPanel: () => null }), { virtual: true });
+jest.mock(
+  "@devtools/wire",
+  () => {
+    const wireState = { hubUrl: "ws://127.0.0.1:9090", role: "tool" };
+    return {
+      buildTransport: () => ({
+        transport: {},
+        subscribe: () => () => {},
+        getState: () => wireState,
+        setHubUrl: jest.fn(),
+      }),
+      buildCopyStoreProtocol: () => ({}),
+      combineProtocols: (...args: unknown[]) => args[0],
+    };
+  },
+  { virtual: true },
+);
 
 function withBottomInset(children: React.ReactNode) {
   return (

apps/ledger-live-mobile/src/mvvm/features/DevTools/screens/DevToolsScreen/index.tsx

@@ -1,9 +1,19 @@
 import React from "react";
 import { DevTools } from "@devtools/shell";
+import { TransportPanel } from "@devtools/transport-panel";
 import { useDevToolsScreenViewModel } from "./useDevToolsScreenViewModel";
 
 export default function DevToolsScreen() {
-  const { config, screenOptions } = useDevToolsScreenViewModel();
+  const { config, screenOptions, transport, hubUrl, setHubUrl, role } =
+    useDevToolsScreenViewModel();
 
-  return <DevTools config={config} screenOptions={screenOptions} />;
+  return (
+    <DevTools
+      config={config}
+      screenOptions={screenOptions}
+      footer={
+        <TransportPanel transport={transport} hubUrl={hubUrl} setHubUrl={setHubUrl} role={role} />
+      }
+    />
+  );
 }

apps/ledger-live-mobile/src/mvvm/features/DevTools/screens/DevToolsScreen/useDevToolsRelay.ts

@@ -0,0 +1,22 @@
+import { useSyncExternalStore } from "react";
+import { buildTransport, buildCopyStoreProtocol, combineProtocols } from "@devtools/wire";
+import { store } from "~/state-manager/configureStore";
+import { sleepingListener } from "~/state-manager/sleepingListener";
+
+const HUB_URL = "ws://127.0.0.1:9090";
+const ROLE = "host" as const;
+
+function buildRelay() {
+  return buildTransport(
+    { hubUrl: HUB_URL, role: ROLE, id: "lwm" },
+    combineProtocols(buildCopyStoreProtocol(store, sleepingListener, ROLE)),
+  );
+}
+
+let relay: ReturnType<typeof buildRelay> | undefined;
+
+export function useDevToolsRelay() {
+  if (!relay) relay = buildRelay();
+  const wireState = useSyncExternalStore(relay.subscribe, relay.getState, relay.getState);
+  return { wire: relay, wireState };
+}

apps/ledger-live-mobile/src/mvvm/features/DevTools/screens/DevToolsScreen/useDevToolsScreenViewModel.ts

@@ -5,22 +5,19 @@ import { useTheme } from "@ledgerhq/lumen-ui-rnative/styles";
 import { getStackNavigationConfigV4 } from "LLM/components/Navigation";
 import { useFeatureFlagsToolProps } from "@devtools/bindings";
 import type { DevToolsConfig } from "@devtools/shell";
+import { useDevToolsRelay } from "./useDevToolsRelay";
 
-export function useDevToolsScreenViewModel(): {
-  config: DevToolsConfig;
-  screenOptions: NativeStackNavigationOptions;
-} {
+export function useDevToolsScreenViewModel() {
   const featureFlagsProps = useFeatureFlagsToolProps();
   const { theme } = useTheme();
   const { bottom } = useSafeAreaInsets();
+  const { wire, wireState } = useDevToolsRelay();
 
   const config: DevToolsConfig = useMemo(
     () => [{ id: "feature-flags", config: featureFlagsProps }],
     [featureFlagsProps],
   );
 
-  // DevTools renders its own stack; reuse the app's config and add the bottom
-  // safe-area inset since DevTools only provides body content.
   const screenOptions: NativeStackNavigationOptions = useMemo(() => {
     const navConfig = getStackNavigationConfigV4(theme);
     return {
@@ -29,5 +26,12 @@ export function useDevToolsScreenViewModel(): {
     };
   }, [theme, bottom]);
 
-  return { config, screenOptions };
+  return {
+    config,
+    screenOptions,
+    transport: wire.transport,
+    hubUrl: wireState.hubUrl,
+    setHubUrl: wire.setHubUrl,
+    role: wireState.role,
+  };
 }

apps/ledger-live-mobile/src/state-manager/configureStore.ts

@@ -24,6 +24,7 @@ import { altcoinsSentimentApiExtra } from "@domain/api-altcoins-sentiment";
 import { payCardApiExtra } from "@domain/api-pay-card";
 import { createFeatureFlagsMiddleware, type PartialFeatures } from "@shared/feature-flags";
 import { fetchRemoteFlags } from "~/firebase/remoteConfig";
+import { sleepingListener } from "./sleepingListener";
 import { createPkcePairWithExpoCrypto } from "~/helpers/pkce";
 
 // This listenerMiddleware is cross-scope as it is preferable to have one instance per store
@@ -102,7 +103,8 @@ export const store = configureStore({
           fetchRemoteFlags,
           getAppLanguage: languageSelector,
         }),
-      ),
+      )
+      .concat(sleepingListener.middleware),
 
   enhancers: getDefaultEnhancers => {
     const enhancers = getDefaultEnhancers();

apps/ledger-live-mobile/src/state-manager/sleepingListener.ts

@@ -0,0 +1,3 @@
+import { createListenerMiddleware } from "@reduxjs/toolkit";
+
+export const sleepingListener = createListenerMiddleware();