✨ (repo) [DSDK-558]: Extract transports into their own packages (#474)

.changeset/chilly-carpets-press.md

@@ -0,0 +1,9 @@
+---
+"@ledgerhq/device-management-kit": minor
+"@ledgerhq/device-transport-kit-mockserver": minor
+"@ledgerhq/device-transport-kit-web-ble": minor
+"@ledgerhq/device-transport-kit-web-hid": minor
+"@ledgerhq/device-management-kit-sample": minor
+---
+
+Extract Transports to their own module

README.md

@@ -81,16 +81,19 @@ This project uses [turbo monorepo](https://turbo.build/repo/docs) to build and r
 
 A brief description of this project packages:
 
-| Name                                   | Path                           | Description                                                                                                                              |
-|----------------------------------------|--------------------------------|------------------------------------------------------------------------------------------------------------------------------------------|
-| @ledgerhq/device-management-kit-sample | apps/sample                    | React Next web app used to test & demonstrate the Web Device Management Kit                                                              |
-| @ledgerhq/eslint-config-dsdk           | packages/config/eslint         | internal package which contains eslint shared config. Used by `extends: ["@ledgerhq/dsdk"]` in `.eslintrc`.                              |
-| @ledgerhq/jest-config-dsdk             | packages/config/jest           | internal package which contains jest shared config. Used by `preset: "@ledgerhq/jest-config-dsdk"` in `jest.config.ts`                   |
-| @ledgerhq/tsconfig-dsdk                | packages/config/typescript     | internal package which contains typescript shared config. Used by `"extends": "@ledgerhq/tsconfig-dsdk/tsconfig.sdk"` in `tsconfig.json` |
-| @ledgerhq/device-management-kit        | packages/device-management-kit | external package that contains the core of the Web Device Management Kit                                                                 |
-| @ledgerhq/device-signer-kit-ethereum   | packages/signer/signer-eth     | external package that contains device ethereum coin application dedicated handlers                                                       |
-| @ledgerhq/device-signer-kit-solana     | packages/signer/signer-solana  | external package that contains device solana coin application dedicated handlers                                                         |
-| @ledgerhq/device-management-kit-flipper-plugin-client     | packages/flipper-plugin-client | external package that contains [flipper](https://github.com/facebook/flipper) logger for Device Management Kit                                                              |
+| Name                                                  | Path                           | Description                                                                                                                              |
+|-------------------------------------------------------|--------------------------------|------------------------------------------------------------------------------------------------------------------------------------------|
+| @ledgerhq/device-management-kit-sample                | apps/sample                    | React Next web app used to test & demonstrate the Web Device Management Kit                                                              |
+| @ledgerhq/eslint-config-dsdk                          | packages/config/eslint         | internal package which contains eslint shared config. Used by `extends: ["@ledgerhq/dsdk"]` in `.eslintrc`.                              |
+| @ledgerhq/jest-config-dsdk                            | packages/config/jest           | internal package which contains jest shared config. Used by `preset: "@ledgerhq/jest-config-dsdk"` in `jest.config.ts`                   |
+| @ledgerhq/tsconfig-dsdk                               | packages/config/typescript     | internal package which contains typescript shared config. Used by `"extends": "@ledgerhq/tsconfig-dsdk/tsconfig.sdk"` in `tsconfig.json` |
+| @ledgerhq/device-management-kit                       | packages/device-management-kit | external package that contains the core of the Web Device Management Kit                                                                 |
+| @ledgerhq/device-signer-kit-ethereum                  | packages/signer/signer-eth     | external package that contains device ethereum coin application dedicated handlers                                                       |
+| @ledgerhq/device-signer-kit-solana                    | packages/signer/signer-solana  | external package that contains device solana coin application dedicated handlers                                                         |
+| @ledgerhq/device-management-kit-flipper-plugin-client | packages/flipper-plugin-client | external package that contains [flipper](https://github.com/facebook/flipper) logger for Device Management Kit                           |
+| @ledgerhq/device-transport-kit-web-hid                | packages/transport/web-hid     | external package that contains the Web Hid transport implementation                                                                      |
+| @ledgerhq/device-transport-kit-web-ble                | packages/transport/web-ble     | external package that contains the Web Ble transport implementation                                                                      |
+| @ledgerhq/device-mockserver-client                    | packages/mockserver-client     | external package that contains the client to interact with the mock-server                                                               |
 
 # Getting started
 
@@ -178,7 +181,7 @@ Please configure JEST extention accordingly.
 
 Each package is built using the following command (at the root of the monorepo).
 
-### Core
+### Device Management Kit
 
 Device Management Kit main module.
 
@@ -275,7 +278,7 @@ pnpm hygen <name> with-prompt
 
 | workspace | script          | description                           |
 | --------- | --------------- | ------------------------------------- |
-| 📦 core   | `module:create` | scaffolds a new _src/internal_ module |
+| 📦 dmk    | `module:create` | scaffolds a new _src/internal_ module |
 
 ## Play with the sample app ?
 

apps/sample/package.json

@@ -18,9 +18,12 @@
     "@ledgerhq/context-module": "workspace:*",
     "@ledgerhq/device-management-kit": "workspace:*",
     "@ledgerhq/device-management-kit-flipper-plugin-client": "workspace:*",
+    "@ledgerhq/device-mockserver-client": "workspace:*",
     "@ledgerhq/device-signer-kit-ethereum": "workspace:*",
     "@ledgerhq/device-signer-kit-solana": "workspace:*",
-    "@ledgerhq/device-transport-kit-mock-client": "workspace:*",
+    "@ledgerhq/device-transport-kit-mockserver": "workspace:*",
+    "@ledgerhq/device-transport-kit-web-ble": "workspace:*",
+    "@ledgerhq/device-transport-kit-web-hid": "workspace:*",
     "@ledgerhq/react-ui": "^0.16.2",
     "@playwright/test": "^1.48.2",
     "@sentry/nextjs": "^8.32.0",

apps/sample/src/components/CommandsView/Command.tsx

@@ -145,13 +145,13 @@ export function Command<
             overflowY="scroll"
             data-testid="box_device-commands-responses"
           >
-            {responses.map(({ args, date, response, loading }, index) => (
+            {responses.map(({ args, date, response, loading: l }, index) => (
               <CommandResponse
                 args={args}
                 key={date.toISOString()}
                 date={date}
                 response={response}
-                loading={loading}
+                loading={l}
                 isLatest={index === responses.length - 1}
               />
             ))}

apps/sample/src/components/Header/index.tsx

@@ -1,6 +1,7 @@
 import React, { useCallback, useEffect, useState } from "react";
-import { BuiltinTransports } from "@ledgerhq/device-management-kit";
 import { FlipperPluginManager } from "@ledgerhq/device-management-kit-flipper-plugin-client";
+import { mockserverIdentifier } from "@ledgerhq/device-transport-kit-mockserver";
+import { webHidIdentifier } from "@ledgerhq/device-transport-kit-web-hid";
 import {
   Button,
   Divider,
@@ -47,15 +48,15 @@ export const Header = () => {
       type: "set_transport",
       payload: {
         transport:
-          transport === BuiltinTransports.MOCK_SERVER
-            ? BuiltinTransports.USB
-            : BuiltinTransports.MOCK_SERVER,
+          transport === mockserverIdentifier
+            ? webHidIdentifier
+            : mockserverIdentifier,
       },
     });
   }, [dispatch, transport]);
   const [mockServerStateUrl, setMockServerStateUrl] =
     useState<string>(mockServerUrl);
-  const mockServerEnabled = transport === BuiltinTransports.MOCK_SERVER;
+  const mockServerEnabled = transport === mockserverIdentifier;
 
   const validateServerUrl = useCallback(
     () =>

apps/sample/src/components/MainView/ConnectDeviceActions.tsx

@@ -1,8 +1,8 @@
 import React, { useCallback } from "react";
-import {
-  BuiltinTransports,
-  type DmkError,
-} from "@ledgerhq/device-management-kit";
+import { type DmkError } from "@ledgerhq/device-management-kit";
+import { mockserverIdentifier } from "@ledgerhq/device-transport-kit-mockserver";
+import { webBleIdentifier } from "@ledgerhq/device-transport-kit-web-ble";
+import { webHidIdentifier } from "@ledgerhq/device-transport-kit-web-hid";
 import { Button, Flex } from "@ledgerhq/react-ui";
 import styled from "styled-components";
 
@@ -26,7 +26,7 @@ export const ConnectDeviceActions = ({
   const dmk = useDmk();
 
   const onSelectDeviceClicked = useCallback(
-    (selectedTransport: BuiltinTransports) => {
+    (selectedTransport: string) => {
       onError(null);
       dmk.startDiscovering({ transport: selectedTransport }).subscribe({
         next: (device) => {
@@ -65,9 +65,9 @@ export const ConnectDeviceActions = ({
   // also we should not have a different appearance when the mock server is enabled
   // we should just display the list of active transports somewhere in the sidebar, discreetly
 
-  return transport === BuiltinTransports.MOCK_SERVER ? (
+  return transport === mockserverIdentifier ? (
     <ConnectButton
-      onClick={() => onSelectDeviceClicked(BuiltinTransports.MOCK_SERVER)}
+      onClick={() => onSelectDeviceClicked(mockserverIdentifier)}
       variant="main"
       backgroundColor="main"
       size="large"
@@ -78,15 +78,15 @@ export const ConnectDeviceActions = ({
   ) : (
     <Flex>
       <ConnectButton
-        onClick={() => onSelectDeviceClicked(BuiltinTransports.USB)}
+        onClick={() => onSelectDeviceClicked(webHidIdentifier)}
         variant="main"
         backgroundColor="main"
         size="large"
       >
         Select a USB device
       </ConnectButton>
       <ConnectButton
-        onClick={() => onSelectDeviceClicked(BuiltinTransports.BLE)}
+        onClick={() => onSelectDeviceClicked(webBleIdentifier)}
         variant="main"
         backgroundColor="main"
         size="large"

apps/sample/src/components/Menu/index.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { BuiltinTransports } from "@ledgerhq/device-management-kit";
+import { mockserverIdentifier } from "@ledgerhq/device-transport-kit-mockserver";
 import { Flex, Icons, Link } from "@ledgerhq/react-ui";
 import { useRouter } from "next/navigation";
 import styled from "styled-components";
@@ -72,7 +72,7 @@ export const Menu: React.FC = () => {
         <Icons.SettingsAlt2 />
         <MenuTitle onClick={() => router.push("/cal")}>Crypto Assets</MenuTitle>
       </MenuItem>
-      {transport === BuiltinTransports.MOCK_SERVER && (
+      {transport === mockserverIdentifier && (
         <MenuItem>
           <Icons.Settings />
           <MenuTitle

apps/sample/src/components/MockView/MockDeviceDrawer.tsx

@@ -3,7 +3,7 @@ import {
   type Mock,
   type MockClient,
   type Session,
-} from "@ledgerhq/device-transport-kit-mock-client";
+} from "@ledgerhq/device-mockserver-client";
 import { Button, Divider, Flex, Input, Text } from "@ledgerhq/react-ui";
 import styled from "styled-components";
 

apps/sample/src/components/MockView/MockItem.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { type Mock } from "@ledgerhq/device-transport-kit-mock-client";
+import { type Mock } from "@ledgerhq/device-mockserver-client";
 import { Button, Flex, Icons, Input, Text } from "@ledgerhq/react-ui";
 
 type MockItemProps = {

apps/sample/src/components/MockView/index.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useState } from "react";
-import { type Session } from "@ledgerhq/device-transport-kit-mock-client";
+import { type Session } from "@ledgerhq/device-mockserver-client";
 import { Button, Flex, Text } from "@ledgerhq/react-ui";
 import styled from "styled-components";
 

apps/sample/src/components/Sidebar/index.tsx

@@ -1,6 +1,6 @@
 "use client";
 import React, { useCallback, useEffect, useState } from "react";
-import { BuiltinTransports } from "@ledgerhq/device-management-kit";
+import { mockserverIdentifier } from "@ledgerhq/device-transport-kit-mockserver";
 import { Box, Flex, IconsLegacy, Link, Text } from "@ledgerhq/react-ui";
 import { useRouter } from "next/navigation";
 import styled, { type DefaultTheme } from "styled-components";
@@ -82,7 +82,7 @@ export const Sidebar: React.FC = () => {
 
   const router = useRouter();
   return (
-    <Root mockServerEnabled={transport === BuiltinTransports.MOCK_SERVER}>
+    <Root mockServerEnabled={transport === mockserverIdentifier}>
       <Link
         onClick={() => router.push("/")}
         mb={8}
@@ -92,7 +92,7 @@ export const Sidebar: React.FC = () => {
         }}
       >
         Ledger Device Management Kit
-        {transport === BuiltinTransports.MOCK_SERVER && <span> (MOCKED)</span>}
+        {transport === mockserverIdentifier && <span> (MOCKED)</span>}
       </Link>
 
       <Subtitle variant={"tiny"}>

apps/sample/src/hooks/useMockClient.ts

@@ -1,5 +1,5 @@
 import { useEffect, useState } from "react";
-import { MockClient } from "@ledgerhq/device-transport-kit-mock-client";
+import { MockClient } from "@ledgerhq/device-mockserver-client";
 
 export const useMockClient = (url: string): MockClient => {
   const [client, setClient] = useState(new MockClient(url));

apps/sample/src/providers/DeviceManagementKitProvider/index.tsx

@@ -1,13 +1,18 @@
 import React, { useCallback, useEffect, useState } from "react";
 import { createContext, type PropsWithChildren, useContext } from "react";
 import {
-  BuiltinTransports,
   ConsoleLogger,
   type DeviceManagementKit,
   DeviceManagementKitBuilder,
   WebLogsExporterLogger,
 } from "@ledgerhq/device-management-kit";
 import { FlipperDmkLogger } from "@ledgerhq/device-management-kit-flipper-plugin-client";
+import {
+  mockserverIdentifier,
+  mockserverTransportFactory,
+} from "@ledgerhq/device-transport-kit-mockserver";
+import { webBleTransportFactory } from "@ledgerhq/device-transport-kit-web-ble";
+import { webHidTransportFactory } from "@ledgerhq/device-transport-kit-web-hid";
 
 import { useHasChanged } from "@/hooks/useHasChanged";
 import { useDmkConfigContext } from "@/providers/DmkConfig";
@@ -17,8 +22,8 @@ const LogsExporterContext = createContext<WebLogsExporterLogger | null>(null);
 
 function buildDefaultDmk(logsExporter: WebLogsExporterLogger) {
   return new DeviceManagementKitBuilder()
-    .addTransport(BuiltinTransports.USB)
-    .addTransport(BuiltinTransports.BLE)
+    .addTransport(webHidTransportFactory)
+    .addTransport(webBleTransportFactory)
     .addLogger(new ConsoleLogger())
     .addLogger(logsExporter)
     .addLogger(new FlipperDmkLogger())
@@ -27,7 +32,7 @@ function buildDefaultDmk(logsExporter: WebLogsExporterLogger) {
 
 function buildMockDmk(url: string, logsExporter: WebLogsExporterLogger) {
   return new DeviceManagementKitBuilder()
-    .addTransport(BuiltinTransports.MOCK_SERVER)
+    .addTransport(mockserverTransportFactory)
     .addLogger(new ConsoleLogger())
     .addLogger(logsExporter)
     .addLogger(new FlipperDmkLogger())
@@ -40,7 +45,7 @@ export const DmkProvider: React.FC<PropsWithChildren> = ({ children }) => {
     state: { transport, mockServerUrl },
   } = useDmkConfigContext();
 
-  const mockServerEnabled = transport === BuiltinTransports.MOCK_SERVER;
+  const mockServerEnabled = transport === mockserverIdentifier;
   const [state, setState] = useState(() => {
     const logsExporter = new WebLogsExporterLogger();
     const dmk = mockServerEnabled

apps/sample/src/reducers/dmkConfig.ts

@@ -1,15 +1,16 @@
 import { type Reducer } from "react";
-import { BuiltinTransports } from "@ledgerhq/device-management-kit";
+import { type TransportIdentifier } from "@ledgerhq/device-management-kit";
+import { webHidIdentifier } from "@ledgerhq/device-transport-kit-web-hid";
 
 export type DmkConfigState = {
   mockServerUrl: string;
-  transport: BuiltinTransports;
+  transport: TransportIdentifier;
 };
 
 type SetTransportAction = {
   type: "set_transport";
   payload: {
-    transport: BuiltinTransports;
+    transport: string;
   };
 };
 
@@ -24,9 +25,7 @@ export type DmkConfigAction = SetTransportAction | SetMockServerUrlAction;
 
 export const DmkConfigInitialState: DmkConfigState = {
   mockServerUrl: "http://127.0.0.1:8080/",
-  transport:
-    (process.env.Dmk_CONFIG_TRANSPORT as BuiltinTransports) ||
-    BuiltinTransports.USB,
+  transport: process.env.Dmk_CONFIG_TRANSPORT || webHidIdentifier,
 };
 
 export const dmkConfigReducer: Reducer<DmkConfigState, DmkConfigAction> = (

package.json

@@ -4,10 +4,10 @@
   "private": true,
   "license": "Apache-2.0",
   "scripts": {
-    "clean": "rimraf -g **/.turbo **/.next **/coverage",
+    "clean": "rimraf -g **/.turbo **/.next **/coverage **/node_modules",
     "build": "turbo run build",
     "build:libs": "turbo run build --filter=./packages/**",
-    "dev": "turbo run dev",
+    "dev": "turbo run dev --concurrency 20",
     "lint": "turbo run lint",
     "lint:fix": "turbo run lint:fix",
     "prettier": "turbo run prettier",
@@ -21,9 +21,14 @@
     "signer-btc": "pnpm --filter @ledgerhq/device-signer-kit-bitcoin",
     "signer-eth": "pnpm --filter @ledgerhq/device-signer-kit-ethereum",
     "signer-solana": "pnpm --filter @ledgerhq/device-signer-kit-solana",
-    "mock-client": "pnpm --filter @ledgerhq/device-transport-kit-mock-client",
+    "signer-utils": "pnpm --filter @ledgerhq/signer-utils",
+    "mockserver-client": "pnpm --filter @ledgerhq/device-mockserver-client",
     "trusted-apps": "pnpm --filter @ledgerhq/device-sdk-trusted-apps",
     "ui": "pnpm --filter @ledgerhq/device-sdk-ui",
+    "transports": "pnpm --filter @ledgerhq/device-transport-*",
+    "transport-web-hid": "pnpm --filter @ledgerhq/device-transport-kit-web-hid",
+    "transport-web-ble": "pnpm --filter @ledgerhq/device-transport-kit-web-ble",
+    "transport-mockserver": "pnpm --filter @ledgerhq/device-transport-kit-mockserver",
     "flipper": "pnpm --filter @ledgerhq/device-management-kit-flipper-plugin-client",
     "sample": "pnpm --filter @ledgerhq/device-management-kit-sample",
     "doc": "pnpm --filter @ledgerhq/ledger-dmk-docs",

packages/device-management-kit/eslint.config.mjs

@@ -3,7 +3,7 @@ import config from "@ledgerhq/eslint-config-dsdk";
 export default [
   ...config,
   {
-    ignores: ["eslint.config.mjs", "scripts/*.mjs"],
+    ignores: ["eslint.config.mjs", "scripts/*.mjs", "lib/*"],
     languageOptions: {
       parserOptions: {
         project: "./tsconfig.json",

packages/device-management-kit/package.json

@@ -36,19 +36,21 @@
     "module:create": "pnpm hygen core-module with-prompt"
   },
   "dependencies": {
-    "@ledgerhq/device-transport-kit-mock-client": "workspace:*",
+    "@ledgerhq/device-mockserver-client": "workspace:*",
     "@sentry/minimal": "^6.19.7",
     "@statelyai/inspect": "^0.4.0",
     "axios": "^1.7.7",
     "inversify": "^6.0.3",
     "inversify-logger-middleware": "^3.1.0",
     "purify-ts": "^2.1.0",
     "reflect-metadata": "^0.2.2",
-    "rxjs": "^7.8.1",
     "semver": "^7.6.3",
     "uuid": "^10.0.0",
     "xstate": "^5.18.2"
   },
+  "peerDependencies": {
+    "rxjs": "^7.8.1"
+  },
   "devDependencies": {
     "@ledgerhq/esbuild-tools": "workspace:*",
     "@ledgerhq/eslint-config-dsdk": "workspace:*",
@@ -57,8 +59,7 @@
     "@ledgerhq/tsconfig-dsdk": "workspace:*",
     "@types/semver": "^7.5.8",
     "@types/uuid": "^10.0.0",
-    "@types/w3c-web-hid": "^1.0.6",
-    "@types/web-bluetooth": "^0.0.20",
+    "rxjs": "^7.8.1",
     "ts-node": "^10.9.2"
   }
 }