✨ (lld): Support DMK inside LLD

.changeset/heavy-lobsters-rush.md

@@ -0,0 +1,5 @@
+---
+"@ledgerhq/live-dmk": minor
+---
+
+Update Transport.listen to emit add and remove events

.changeset/tall-toys-invite.md

@@ -0,0 +1,5 @@
+---
+"ledger-live-desktop": minor
+---
+
+use dmk listenToKnownDevices in LLD:useListenToHidDevices

apps/cli/src/tsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "module": "commonjs",
+    "module": "nodenext",
     "declaration": true,
     "declarationMap": true,
     "sourceMap": true,
@@ -10,8 +10,7 @@
     "allowSyntheticDefaultImports": true,
     "esModuleInterop": true,
     "skipLibCheck": true,
-
-    "moduleResolution": "node",
+    "moduleResolution": "nodenext",
     "downlevelIteration": true,
     "resolveJsonModule": true,
     "rootDir": ".",

apps/ledger-live-desktop/package.json

@@ -58,7 +58,7 @@
     "@ledgerhq/coin-evm": "workspace:^",
     "@ledgerhq/coin-filecoin": "workspace:^",
     "@ledgerhq/coin-framework": "workspace:^",
-    "@ledgerhq/devices": "workspace:*",
+    "@ledgerhq/devices": "workspace:^",
     "@ledgerhq/domain-service": "workspace:^",
     "@ledgerhq/errors": "workspace:^",
     "@ledgerhq/ethereum-provider": "workspace:^",
@@ -73,7 +73,7 @@
     "@ledgerhq/live-config": "workspace:^",
     "@ledgerhq/live-countervalues": "workspace:^",
     "@ledgerhq/live-countervalues-react": "workspace:^",
-    "@ledgerhq/live-dmk": "workspace:*",
+    "@ledgerhq/live-dmk": "workspace:^",
     "@ledgerhq/live-env": "workspace:^",
     "@ledgerhq/live-network": "workspace:^",
     "@ledgerhq/live-nft": "workspace:^",

apps/ledger-live-desktop/src/renderer/components/ButtonV3.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { Button as BaseButton, InvertTheme } from "@ledgerhq/react-ui";
-import { ButtonProps as BaseButtonProps } from "@ledgerhq/react-ui/components/cta/Button";
+import { ButtonProps as BaseButtonProps } from "@ledgerhq/react-ui/components/cta/Button/index";
 import { useTrack } from "~/renderer/analytics/segment";
 import styled from "styled-components";
 

apps/ledger-live-desktop/src/renderer/components/CustomImage/CustomLockScreenDeviceAction/stepsRendering.tsx

@@ -68,6 +68,7 @@ export const RenderLoadingImage = ({
       alignItems="center"
       data-testid={`device-action-image-loading-${progress}`}
     >
+      <DeviceBlocker />
       <AnimationWrapper>
         <FramedPicture
           frameConfig={getFramedPictureConfig("transfer", deviceModelId, type)}

apps/ledger-live-desktop/src/renderer/components/DeviceAction/rendering.tsx

@@ -57,7 +57,6 @@ import {
   Text,
   Theme,
 } from "@ledgerhq/react-ui";
-import { LockAltMedium } from "@ledgerhq/react-ui/assets/icons";
 import { withV3StyleProvider } from "~/renderer/styles/StyleProviderV3";
 import DeviceIllustration from "~/renderer/components/DeviceIllustration";
 import { Account } from "@ledgerhq/types-live";
@@ -642,7 +641,7 @@ export const renderLockedDeviceError = ({
   return (
     <Wrapper id="error-locked-device">
       <ErrorBody
-        Icon={LockAltMedium}
+        Icon={IconsLegacy.LockAltMedium}
         title={t("errors.LockedDeviceError.title")}
         description={
           productName

apps/ledger-live-desktop/src/renderer/components/FormattedVal.tsx

@@ -30,12 +30,10 @@ const T = styled(Box).attrs((p: { color?: string; inline?: boolean; ff?: string
   width: ${p => (p.inline ? "" : "100%")};
   overflow: hidden;
 `;
-const I = ({ color, children }: { color?: string; children: React.ReactNode }) => (
+const I = ({ color = undefined, children }: { color?: string; children: React.ReactNode }) => (
   <Box color={color}>{children}</Box>
 );
-I.defaultProps = {
-  color: undefined,
-};
+
 export type OwnProps = {
   unit?: Unit;
   val?: BigNumber | number;

apps/ledger-live-desktop/src/renderer/components/Illustration.tsx

@@ -1,6 +1,6 @@
 import styled, { DefaultTheme, StyledComponent } from "styled-components";
 import { Box } from "@ledgerhq/react-ui";
-import { BoxProps } from "@ledgerhq/react-ui/components/layout/Box";
+import { BoxProps } from "@ledgerhq/react-ui/components/layout/Box/index";
 
 type Props = {
   lightSource: string;

apps/ledger-live-desktop/src/renderer/components/Onboarding/Screens/Tutorial/shared.tsx

@@ -3,8 +3,8 @@ import { useTranslation } from "react-i18next";
 import styled, { DefaultTheme, StyledComponent } from "styled-components";
 import { Box, Text, Flex, Icon, Switch } from "@ledgerhq/react-ui";
 import { BoxProps } from "@ledgerhq/react-ui/components/layout/Box/index";
-import { SwitchProps } from "@ledgerhq/react-ui/components/form/Switch/Switch";
-import { TextProps } from "@ledgerhq/react-ui/components/asorted/Text";
+import { SwitchProps } from "@ledgerhq/react-ui/components/form/Switch/index";
+import { TextProps } from "@ledgerhq/react-ui/components/asorted/Text/index";
 
 export const WaveContainer: StyledComponent<"div", DefaultTheme, BoxProps> = styled(Box).attrs({
   position: "absolute",

apps/ledger-live-desktop/src/renderer/components/OperationsList/DateCell.tsx

@@ -1,6 +1,5 @@
 import { isStuckOperation } from "@ledgerhq/live-common/operation";
-import { InfiniteLoader } from "@ledgerhq/react-ui";
-import { WarningSolidMedium } from "@ledgerhq/react-ui/assets/icons";
+import { InfiniteLoader, IconsLegacy } from "@ledgerhq/react-ui";
 import { Operation } from "@ledgerhq/types-live";
 import { TFunction } from "i18next";
 import React from "react";
@@ -31,7 +30,7 @@ const PendingLoadingIcon = ({ displayWarning }: { displayWarning: boolean }): JS
   if (displayWarning) {
     return (
       <Box style={{ verticalAlign: "sub", display: "inline" }}>
-        <WarningSolidMedium size={12} color={"#FFBD42"} />
+        <IconsLegacy.WarningSolidMedium size={12} color={"#FFBD42"} />
       </Box>
     );
   }

apps/ledger-live-desktop/src/renderer/components/SpendableAmount.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react";
 import { Account, AccountLike, TransactionCommon } from "@ledgerhq/types-live";
-import { useDebounce } from "@ledgerhq/live-common//hooks/useDebounce";
+import { useDebounce } from "@ledgerhq/live-common/hooks/useDebounce";
 import { getAccountBridge } from "@ledgerhq/live-common/bridge/index";
 import FormattedVal from "~/renderer/components/FormattedVal";
 import BigNumber from "bignumber.js";

apps/ledger-live-desktop/src/renderer/components/SyncOnboarding/Manual/EarlySecurityChecks/Bullet.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { Flex, Text, InfiniteLoader, IconsLegacy } from "@ledgerhq/react-ui";
 import styled, { StyledComponent, DefaultTheme } from "styled-components";
-import { FlexBoxProps } from "@ledgerhq/react-ui/components/layout/Flex";
+import { FlexBoxProps } from "@ledgerhq/react-ui/components/layout/Flex/index";
 import { Status } from "../types";
 
 const BorderFlex: StyledComponent<"div", DefaultTheme, FlexBoxProps> = styled(Flex).attrs({

apps/ledger-live-desktop/src/renderer/components/SyncOnboarding/Manual/SyncOnboardingCompanion.tsx

@@ -26,6 +26,7 @@ import SeedStep, { SeedPathStatus } from "./SeedStep";
 import { analyticsFlowName, StepText } from "./shared";
 import OnboardingAppInstallStep from "../../OnboardingAppInstall";
 import { getOnboardingStatePolling } from "@ledgerhq/live-common/hw/getOnboardingStatePolling";
+import { isAllowedOnboardingStatePollingErrorDmk } from "@ledgerhq/live-dmk";
 import ContinueOnDeviceWithAnim from "./ContinueOnDeviceWithAnim";
 import { RecoverState } from "~/renderer/screens/recover/Player";
 import TrackPage from "~/renderer/analytics/TrackPage";
@@ -245,6 +246,7 @@ const SyncOnboardingCompanion: React.FC<SyncOnboardingCompanionProps> = ({
     device: device || null,
     pollingPeriodMs: POLLING_PERIOD_MS,
     stopPolling: !isPollingOn,
+    allowedErrorChecks: [isAllowedOnboardingStatePollingErrorDmk],
   });
 
   const handleDeviceReady = useCallback(() => {

apps/ledger-live-desktop/src/renderer/components/SyncOnboarding/index.tsx

@@ -8,13 +8,17 @@ import SyncOnboardingDeviceConnection, {
 import SyncOnboardingManual, { SyncOnboardingScreenProps } from "./Manual";
 import CompletionScreen from "./Manual/CompletionScreen";
 import { useKeepScreenAwake } from "~/renderer/hooks/useKeepScreenAwake";
+import { useDeviceSessionRefresherToggle } from "@ledgerhq/live-dmk";
+import { useFeature } from "@ledgerhq/live-common/featureFlags/index";
 
 export type DeviceConnectionRouteProps = RouteComponentProps<SyncOnboardingDeviceConnectionProps>;
 export type ManualRouteProps = RouteComponentProps<SyncOnboardingScreenProps>;
 
 const SyncOnboarding = () => {
+  const ldmkTransportFlag = useFeature("ldmkTransport");
   const { path } = useRouteMatch();
   useKeepScreenAwake(true);
+  useDeviceSessionRefresherToggle(ldmkTransportFlag?.enabled ?? false);
 
   return (
     <Flex width="100%" height="100%" position="relative">

apps/ledger-live-desktop/src/renderer/components/TopBar/index.tsx

@@ -22,6 +22,7 @@ import { NotificationIndicator } from "~/renderer/components/TopBar/Notification
 import { setTrackingSource } from "~/renderer/analytics/TrackPage";
 import { LiveAppDrawer } from "~/renderer/components/LiveAppDrawer";
 import { IconsLegacy } from "@ledgerhq/react-ui";
+
 const Container = styled(Box).attrs(() => ({}))`
   height: ${p => p.theme.sizes.topBarHeight}px;
   box-sizing: content-box;

apps/ledger-live-desktop/src/renderer/components/TranslatedError/TranslatedError.tsx

@@ -5,6 +5,7 @@
 
 import React, { useEffect, useMemo } from "react";
 import { Trans, useTranslation } from "react-i18next";
+import { useFeature } from "@ledgerhq/live-common/featureFlags/index";
 import logger from "~/renderer/logger";
 import Text from "../Text";
 import ExternalLink from "../ExternalLink";
@@ -35,6 +36,7 @@ function ErrorList({ translation }: ErrorListProps) {
 
 export function TranslatedError({ error, fallback, field = "title", noLink }: Props): JSX.Element {
   const { t } = useTranslation();
+  const ldmkTransportFlag = useFeature("ldmkTransport");
 
   const errorName = error?.name;
 
@@ -65,7 +67,22 @@ export function TranslatedError({ error, fallback, field = "title", noLink }: Pr
     }
   }, [isValidError, error]);
 
-  if (!error || !isValidError) return <></>;
+  if (!error || !isValidError) {
+    // NOTE: Temporary handling of DMK errors
+    if (ldmkTransportFlag?.enabled && error && "_tag" in error) {
+      if (field === "description") {
+        const errorMessage =
+          "originalError" in error
+            ? (error.originalError as Error).message
+            : (error._tag as string);
+
+        return <Text>{errorMessage}</Text>;
+      }
+      return <Text>{error._tag as string}</Text>;
+    }
+
+    return <></>;
+  }
 
   if (!translation) {
     if (fallback) return <>{fallback}</>;

apps/ledger-live-desktop/src/renderer/hooks/useListenToHidDevices.ts

@@ -1,19 +1,24 @@
 import { useEffect } from "react";
 import { useDispatch } from "react-redux";
 import { Subscription, Observable } from "rxjs";
+import { useFeature } from "@ledgerhq/live-common/featureFlags/index";
+import { useDeviceManagementKit, DeviceManagementKitTransport } from "@ledgerhq/live-dmk";
 import { DeviceModelId } from "@ledgerhq/types-devices";
+import { IPCTransport } from "~/renderer/IPCTransport";
 import { addDevice, removeDevice, resetDevices } from "~/renderer/actions/devices";
-import { IPCTransport } from "../IPCTransport";
 
 export const useListenToHidDevices = () => {
   const dispatch = useDispatch();
+  const ldmkFeatureFlag = useFeature("ldmkTransport");
+
+  const deviceManagementKit = useDeviceManagementKit();
+
   useEffect(() => {
     let sub: Subscription;
-    function syncDevices() {
-      const devices: { [key: string]: boolean } = {};
 
-      sub = new Observable(IPCTransport.listen).subscribe(
-        ({ device, deviceModel, type, descriptor }) => {
+    function syncDevices() {
+      sub = new Observable(IPCTransport.listen).subscribe({
+        next: ({ device, deviceModel, type, descriptor }) => {
           if (device) {
             const deviceId = descriptor || "";
             const stateDevice = {
@@ -23,32 +28,63 @@ export const useListenToHidDevices = () => {
             };
 
             if (type === "add") {
-              devices[deviceId] = true;
               dispatch(addDevice(stateDevice));
             } else if (type === "remove") {
-              delete devices[deviceId];
               dispatch(removeDevice(stateDevice));
             }
           }
         },
-        () => {
+        error: () => {
           resetDevices();
           syncDevices();
         },
-        () => {
+        complete: () => {
           resetDevices();
           syncDevices();
         },
-      );
+      });
+    }
+
+    function syncDevicesWithDmk() {
+      sub = new Observable(DeviceManagementKitTransport.listen).subscribe({
+        next: ({ descriptor, device, deviceModel, type }) => {
+          if (device) {
+            const deviceId = descriptor || "";
+            const stateDevice = {
+              deviceId,
+              modelId: deviceModel ? deviceModel.id : DeviceModelId.nanoS,
+              // TODO: Update the Transport.listen type whenever we switch to LDMK
+              // @ts-expect-error remapping type
+              wired: deviceModel?.type === "USB",
+            };
+            if (type === "add") {
+              dispatch(addDevice(stateDevice));
+            } else if (type === "remove") {
+              dispatch(removeDevice(stateDevice));
+            }
+          }
+        },
+        error: () => {
+          resetDevices();
+          syncDevicesWithDmk();
+        },
+        complete: () => {
+          resetDevices();
+          syncDevicesWithDmk();
+        },
+      });
     }
 
-    const timeoutSyncDevices = setTimeout(syncDevices, 1000);
+    const fn = ldmkFeatureFlag?.enabled ? syncDevicesWithDmk : syncDevices;
+
+    const timeoutSyncDevices = setTimeout(fn, 1000);
 
     return () => {
+      console.log("[[useListenToHidDevices]] cleanup");
       clearTimeout?.(timeoutSyncDevices);
       sub?.unsubscribe?.();
     };
-  }, [dispatch]);
+  }, [dispatch, deviceManagementKit, ldmkFeatureFlag?.enabled]);
 
   return null;
 };

apps/ledger-live-desktop/src/renderer/live-common-setup.ts

@@ -2,8 +2,10 @@ import "~/live-common-setup-base";
 import "~/live-common-set-supported-currencies";
 import "./families";
 
+import { Store } from "redux";
 import VaultTransport from "@ledgerhq/hw-transport-vault";
 import { registerTransportModule } from "@ledgerhq/live-common/hw/index";
+import { getEnv } from "@ledgerhq/live-env";
 import { retry } from "@ledgerhq/live-common/promise";
 import { TraceContext, listen as listenLogs, trace } from "@ledgerhq/logs";
 import { getUserId } from "~/helpers/user";
@@ -13,13 +15,7 @@ import logger from "./logger";
 import { setDeviceMode } from "@ledgerhq/live-common/hw/actions/app";
 import { getFeature } from "@ledgerhq/live-common/featureFlags/index";
 import { overriddenFeatureFlagsSelector } from "~/renderer/reducers/settings";
-import { State } from "./reducers";
 import { DeviceManagementKitTransport } from "@ledgerhq/live-dmk";
-import { getEnv } from "@ledgerhq/live-env";
-
-interface Store {
-  getState: () => State;
-}
 
 const isDeviceManagementKitEnabled = (store: Store) => {
   const state = store.getState();

apps/ledger-live-desktop/src/renderer/screens/USBTroubleshooting/solutions/shared.tsx

@@ -4,7 +4,7 @@ import Box from "~/renderer/components/Box";
 import { Flex } from "@ledgerhq/react-ui";
 import Text from "~/renderer/components/Text";
 import ExternalLinkIcon from "~/renderer/icons/ExternalLink";
-import { FlexBoxProps } from "@ledgerhq/react-ui/components/layout/Flex";
+import { FlexBoxProps } from "@ledgerhq/react-ui/components/layout/Flex/index";
 
 export const Wrapper = styled(Box).attrs({
   alignItems: "center",