LedgerHQ · smartling-github-connector · Dec 4, 2024 · Dec 2, 2024 · Dec 31, 2024 · Jan 10, 2025
diff --git a/.changeset/heavy-lobsters-rush.md b/.changeset/heavy-lobsters-rush.md
@@ -0,0 +1,5 @@
+---
+"@ledgerhq/live-dmk": minor
+---
+
+Update Transport.listen to emit add and remove events
diff --git a/.changeset/tall-toys-invite.md b/.changeset/tall-toys-invite.md
@@ -0,0 +1,5 @@
+---
+"ledger-live-desktop": minor
+---
+
+use dmk listenToKnownDevices in LLD:useListenToHidDevices
diff --git a/apps/cli/src/tsconfig.json b/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": ".",

diff --git a/apps/ledger-live-desktop/package.json b/apps/ledger-live-desktop/package.json
@@ -60,6 +60,7 @@
     "@ledgerhq/coin-filecoin": "workspace:^",
     "@ledgerhq/coin-framework": "workspace:^",
     "@ledgerhq/devices": "workspace:*",
+    "@ledgerhq/device-management-kit": "0.5.1",
     "@ledgerhq/domain-service": "workspace:^",
     "@ledgerhq/errors": "workspace:^",
     "@ledgerhq/ethereum-provider": "workspace:^",
@@ -74,7 +75,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:^",

@@ -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";
 

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

@@ -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

@@ -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;

@@ -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;

@@ -182,20 +182,6 @@ const SideBarScrollContainer = styled(Box)`
   }
 `;
 
-const LDMKTransportFlag = styled.div`
-  z-index: 51;
-  position: absolute;
-  top: 0;
-  right: 0;
-  transform: translate(100%, 0);
-  padding: 5px;
-  background: ${p => p.theme.colors.palette.opacityPurple.c90};
-  color: ${p => p.theme.colors.palette.text.shade100};
-  font-weight: bold;
-  border-radius: 0 0 4px 0;
-  opacity: 0.8;
-`;
-
 const TagContainerExperimental = ({ collapsed }: { collapsed: boolean }) => {
   const isExperimental = useExperimental();
   const hasFullNodeConfigured = useEnv("SATSTACK"); // NB remove once full node is not experimental
@@ -235,6 +221,23 @@ const TagContainerFeatureFlags = ({ collapsed }: { collapsed: boolean }) => {
   ) : null;
 };
 
+const TagContainerLDMK = ({ collapsed }: { collapsed: boolean }) => {
+  const ldmkTransportFlag = useFeature("ldmkTransport");
+  const { t } = useTranslation();
+  return ldmkTransportFlag?.enabled && ldmkTransportFlag?.params?.warningVisible ? (
+    <Tag
+      data-testid="drawer-ldmk-button"
+      to={{
+        pathname: "/settings/developer",
+      }}
+      onClick={() => setTrackingSource("sidebar")}
+    >
+      <Icons.UsbC size="S" color="primary.c80" />
+      <TagText collapsed={collapsed}>{t("common.ldmkEnabled")}</TagText>
+    </Tag>
+  ) : null;
+};
+
 // Check if the selected tab is a Live-App under discovery tab
 const checkLiveAppTabSelection = (location: Location, liveAppPaths: Array<string>) =>
   liveAppPaths.find((liveTab: string) => location?.pathname?.includes(liveTab));
@@ -259,7 +262,6 @@ const MainSideBar = () => {
   const referralProgramConfig = useFeature("referralProgramDesktopSidebar");
   const recoverFeature = useFeature("protectServicesDesktop");
   const recoverHomePath = useAccountPath(recoverFeature);
-  const ldmkTransportFlag = useFeature("ldmkTransport");
 
   const handleCollapse = useCallback(() => {
     dispatch(setSidebarCollapsed(!collapsed));
@@ -394,9 +396,6 @@ const MainSideBar = () => {
             </Collapser>
 
             <SideBarScrollContainer>
-              {ldmkTransportFlag?.enabled && ldmkTransportFlag?.params?.warningVisible && (
-                <LDMKTransportFlag>{t("ldmkFeatureFlagWarning.title")}</LDMKTransportFlag>
-              )}
               <TopGradient />
               <Space of={60} />
               <SideBarList collapsed={secondAnim}>
@@ -571,6 +570,7 @@ const MainSideBar = () => {
             <Box pt={4}>
               <TagContainerExperimental collapsed={!secondAnim} />
               <TagContainerFeatureFlags collapsed={!secondAnim} />
+              <TagContainerLDMK collapsed={!secondAnim} />
             </Box>
           </SideBar>
         );

@@ -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",

@@ -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>
     );
   }

@@ -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";

@@ -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({

@@ -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(() => {

@@ -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">

@@ -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;

@@ -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}</>;