feat: native dApp support [LIVE-9527]

.changeset/swift-apricots-obey.md

@@ -0,0 +1,11 @@
+---
+"@actions/build-checks": minor
+"ledger-live-desktop": minor
+"live-mobile": minor
+"@ledgerhq/live-common": minor
+"@ledgerhq/ethereum-provider": minor
+---
+
+feat: native dapp support [LIVE-9527]
+
+Migration from [ETH dApp Browser Live App](https://github.com/LedgerHQ/eth-dapp-browser) and [iframe-provider](https://github.com/LedgerHQ/iframe-provider) to support inside LL directly injecting an EIP 6963 compatible provider in the WebView, using params from the manifest.

apps/ledger-live-desktop/.unimportedrc.json

@@ -4,6 +4,7 @@
     "src/renderer/index.ts",
     "src/preloader/index.ts",
     "src/renderer/webworkers/workers/*.ts",
+    "src/webviewPreloader/dappPreloader.ts",
     "src/webviewPreloader/index.ts"
   ],
   "extensions": [".ts", ".js", ".jsx", ".tsx"],

apps/ledger-live-desktop/package.json

@@ -56,6 +56,7 @@
     "@ledgerhq/devices": "workspace:^",
     "@ledgerhq/domain-service": "workspace:^",
     "@ledgerhq/errors": "workspace:^",
+    "@ledgerhq/ethereum-provider": "workspace:^",
     "@ledgerhq/hw-transport": "workspace:^",
     "@ledgerhq/hw-transport-http": "workspace:^",
     "@ledgerhq/hw-transport-node-hid-singleton": "workspace:^",

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

@@ -72,7 +72,7 @@ export class OperationsList extends PureComponent<Props, State> {
     setDrawer(OperationDetails, {
       operationId: operation.id,
       accountId: account.id,
-      parentId: parentAccount?.id as string | undefined | null,
+      parentId: parentAccount?.id,
     });
 
   // TODO: convert of async/await if fetching with the api

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

@@ -7,9 +7,7 @@ import { getCurrentDevice } from "~/renderer/reducers/devices";
 import Success from "./Success";
 import Searching from "./Searching";
 import { useOnboardingStatePolling } from "@ledgerhq/live-common/onboarding/hooks/useOnboardingStatePolling";
-import LockedDeviceDrawer, {
-  Props as LockedDeviceDrawerProps,
-} from "~/renderer/components/SyncOnboarding/Manual/LockedDeviceDrawer";
+import LockedDeviceDrawer from "~/renderer/components/SyncOnboarding/Manual/LockedDeviceDrawer";
 import { setDrawer } from "~/renderer/drawers/Provider";
 
 export type SyncOnboardingDeviceConnectionProps = {
@@ -48,13 +46,16 @@ const SyncOnboardingDeviceConnection = ({
 
   useEffect(() => {
     if (lockedDevice && currentDevice) {
-      const props: LockedDeviceDrawerProps = {
-        deviceModelId,
-      };
-      setDrawer(LockedDeviceDrawer, props, {
-        forceDisableFocusTrap: true,
-        preventBackdropClick: true,
-      });
+      setDrawer(
+        LockedDeviceDrawer,
+        {
+          deviceModelId,
+        },
+        {
+          forceDisableFocusTrap: true,
+          preventBackdropClick: true,
+        },
+      );
     } else {
       setDrawer();
     }

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

@@ -4,25 +4,17 @@ import manager from "@ledgerhq/live-common/manager/index";
 import { useGenuineCheck } from "@ledgerhq/live-common/hw/hooks/useGenuineCheck";
 import { useGetLatestAvailableFirmware } from "@ledgerhq/live-common/deviceSDK/hooks/useGetLatestAvailableFirmware";
 import Body from "./Body";
-import TroubleshootingDrawer, {
-  Props as TroubleshootingDrawerProps,
-} from "../TroubleshootingDrawer";
-import SoftwareCheckAllowSecureChannelDrawer, {
-  Props as SoftwareCheckAllowSecureChannelDrawerProps,
-} from "./SoftwareCheckAllowSecureChannelDrawer";
+import TroubleshootingDrawer from "../TroubleshootingDrawer";
+import SoftwareCheckAllowSecureChannelDrawer from "./SoftwareCheckAllowSecureChannelDrawer";
 import { Status as SoftwareCheckStatus } from "../types";
 import { getDeviceModel, DeviceModelId } from "@ledgerhq/devices";
 import { openURL } from "~/renderer/linking";
 import { setDrawer } from "~/renderer/drawers/Provider";
-import UpdateFirmwareModal, {
-  Props as UpdateFirmwareModalProps,
-} from "~/renderer/modals/UpdateFirmwareModal";
+import UpdateFirmwareModal from "~/renderer/modals/UpdateFirmwareModal";
 import { Device } from "@ledgerhq/live-common/hw/actions/types";
 import { initialStepId } from "~/renderer/screens/manager/FirmwareUpdate";
-import ErrorDrawer, { Props as ErrorDrawerProps } from "./ErrorDrawer";
-import DeviceNotGenuineDrawer, {
-  Props as DeviceNotGenuineDrawerProps,
-} from "./DeviceNotGenuineDrawer";
+import ErrorDrawer from "./ErrorDrawer";
+import DeviceNotGenuineDrawer from "./DeviceNotGenuineDrawer";
 import { useTranslation } from "react-i18next";
 import TrackPage from "~/renderer/analytics/TrackPage";
 import { track } from "~/renderer/analytics/segment";
@@ -136,49 +128,52 @@ const EarlySecurityChecks = ({
     if (!deviceInfo || !latestFirmware) return;
     const modal = deviceInfo.isOSU ? "install" : "disclaimer";
     const stepId = initialStepId({ device, deviceInfo });
-    const updateFirmwareModalProps: UpdateFirmwareModalProps = {
-      withAppsToReinstall: false,
-      withResetStep: manager.firmwareUpdateNeedsLegacyBlueResetInstructions(
+
+    setDrawer(
+      UpdateFirmwareModal,
+      {
+        withAppsToReinstall: false,
+        withResetStep: manager.firmwareUpdateNeedsLegacyBlueResetInstructions(
+          deviceInfo,
+          device.modelId,
+        ),
+        onDrawerClose: () => {
+          closeFwUpdateDrawer();
+          setFwUpdateInterrupted(latestFirmware?.final);
+          restartChecksAfterUpdate();
+        },
+        onRequestClose: () => {
+          closeFwUpdateDrawer();
+          setFwUpdateInterrupted(latestFirmware?.final);
+          restartChecksAfterUpdate();
+        },
+        status: modal,
+        stepId,
+        firmware: latestFirmware,
         deviceInfo,
-        device.modelId,
-      ),
-      onDrawerClose: () => {
-        closeFwUpdateDrawer();
-        setFwUpdateInterrupted(latestFirmware?.final);
-        restartChecksAfterUpdate();
-      },
-      onRequestClose: () => {
-        closeFwUpdateDrawer();
-        setFwUpdateInterrupted(latestFirmware?.final);
-        restartChecksAfterUpdate();
-      },
-      status: modal,
-      stepId,
-      firmware: latestFirmware,
-      deviceInfo,
-      device,
-      deviceModelId: deviceModelId,
-      setFirmwareUpdateCompleted: () => null,
+        device,
+        deviceModelId: deviceModelId,
+        setFirmwareUpdateCompleted: () => null,
 
-      finalStepSuccessDescription: t(
-        "syncOnboarding.manual.softwareCheckContent.firmwareUpdate.finalStepSuccessDescription",
-      ),
-      finalStepSuccessButtonLabel: t(
-        "syncOnboarding.manual.softwareCheckContent.firmwareUpdate.finalStepSuccessButtonLabel",
-      ),
-      finalStepSuccessButtonOnClick: () => {
-        closeFwUpdateDrawer();
-        restartChecksAfterUpdate();
+        finalStepSuccessDescription: t(
+          "syncOnboarding.manual.softwareCheckContent.firmwareUpdate.finalStepSuccessDescription",
+        ),
+        finalStepSuccessButtonLabel: t(
+          "syncOnboarding.manual.softwareCheckContent.firmwareUpdate.finalStepSuccessButtonLabel",
+        ),
+        finalStepSuccessButtonOnClick: () => {
+          closeFwUpdateDrawer();
+          restartChecksAfterUpdate();
+        },
+        deviceHasPin: deviceModelId !== DeviceModelId.stax, // early security checks are triggered only if the device is in one of the steps prior to setting a PIN code
       },
-      deviceHasPin: deviceModelId !== DeviceModelId.stax, // early security checks are triggered only if the device is in one of the steps prior to setting a PIN code
-    };
-
-    setDrawer(UpdateFirmwareModal, updateFirmwareModalProps, {
-      preventBackdropClick: true,
-      forceDisableFocusTrap: true,
-      withPaddingTop: false,
-      onRequestClose: undefined,
-    });
+      {
+        preventBackdropClick: true,
+        forceDisableFocusTrap: true,
+        withPaddingTop: false,
+        onRequestClose: undefined,
+      },
+    );
   }, [
     closeFwUpdateDrawer,
     device,
@@ -254,47 +249,62 @@ const EarlySecurityChecks = ({
   /** Opening and closing of drawers */
   useEffect(() => {
     if (disconnectedDeviceModalIsOpen) {
-      const props: TroubleshootingDrawerProps = {
-        lastKnownDeviceId: deviceModelId,
-        onClose: () => {
-          resetGenuineCheckState();
-          history.push("/onboarding/select-device");
+      setDrawer(
+        TroubleshootingDrawer,
+        {
+          lastKnownDeviceId: deviceModelId,
+          onClose: () => {
+            resetGenuineCheckState();
+            history.push("/onboarding/select-device");
+          },
         },
-      };
-      setDrawer(TroubleshootingDrawer, props, commonDrawerProps);
+        commonDrawerProps,
+      );
     } else if (allowSecureChannelIsOpen) {
-      const props: SoftwareCheckAllowSecureChannelDrawerProps = {
-        deviceModelId,
-      };
       // FIXME: drawer is non closeable so we have to handle device disconnection
-      setDrawer(SoftwareCheckAllowSecureChannelDrawer, props, commonDrawerProps);
+      setDrawer(
+        SoftwareCheckAllowSecureChannelDrawer,
+        {
+          deviceModelId,
+        },
+        commonDrawerProps,
+      );
     } else if (notGenuineIsOpen) {
-      const props: DeviceNotGenuineDrawerProps = {
-        productName,
-      };
-      setDrawer(DeviceNotGenuineDrawer, props, commonDrawerProps);
+      setDrawer(
+        DeviceNotGenuineDrawer,
+        {
+          productName,
+        },
+        commonDrawerProps,
+      );
     } else if (genuineCheckError) {
       setGenuineCheckStatus(SoftwareCheckStatus.failed);
-      const props: ErrorDrawerProps = {
-        onClickRetry: () => {
-          resetGenuineCheckState();
-          setGenuineCheckStatus(SoftwareCheckStatus.active);
+      setDrawer(
+        ErrorDrawer,
+        {
+          onClickRetry: () => {
+            resetGenuineCheckState();
+            setGenuineCheckStatus(SoftwareCheckStatus.active);
+          },
+          error: genuineCheckError,
         },
-        error: genuineCheckError,
-      };
-      setDrawer(ErrorDrawer, props, commonDrawerProps);
+        commonDrawerProps,
+      );
     } else if (
       networkStatus === NetworkStatus.OFFLINE &&
       genuineCheckStatus !== SoftwareCheckStatus.inactive
     ) {
-      const props: ErrorDrawerProps = {
-        onClickRetry: () => {
-          resetGenuineCheckState();
-          setGenuineCheckStatus(SoftwareCheckStatus.active);
+      setDrawer(
+        ErrorDrawer,
+        {
+          onClickRetry: () => {
+            resetGenuineCheckState();
+            setGenuineCheckStatus(SoftwareCheckStatus.active);
+          },
+          error: new NetworkDown(),
         },
-        error: new NetworkDown(),
-      };
-      setDrawer(ErrorDrawer, props, commonDrawerProps);
+        commonDrawerProps,
+      );
     } else if (
       getLatestAvailableFirmwareError &&
       !(
@@ -309,14 +319,17 @@ const EarlySecurityChecks = ({
         getLatestAvailableFirmwareError.name,
       );
       setFirmwareUpdateStatus(SoftwareCheckStatus.failed);
-      const props: ErrorDrawerProps = {
-        onClickRetry: () => {
-          setFirmwareUpdateStatus(SoftwareCheckStatus.active);
+      setDrawer(
+        ErrorDrawer,
+        {
+          onClickRetry: () => {
+            setFirmwareUpdateStatus(SoftwareCheckStatus.active);
+          },
+          error: { message: "Unknown error", ...getLatestAvailableFirmwareError },
+          closeable: true,
         },
-        error: { message: "Unknown error", ...getLatestAvailableFirmwareError },
-        closeable: true,
-      };
-      setDrawer(ErrorDrawer, props, { forceDisableFocusTrap: true });
+        { forceDisableFocusTrap: true },
+      );
     }
     return () => setDrawer();
   }, [

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

@@ -32,7 +32,7 @@ import TrackPage from "~/renderer/analytics/TrackPage";
 import { trackPage } from "~/renderer/analytics/segment";
 import { Device } from "@ledgerhq/live-common/hw/actions/types";
 import { setDrawer } from "~/renderer/drawers/Provider";
-import LockedDeviceDrawer, { Props as LockedDeviceDrawerProps } from "./LockedDeviceDrawer";
+import LockedDeviceDrawer from "./LockedDeviceDrawer";
 import { LockedDeviceError } from "@ledgerhq/errors";
 import { saveSettings } from "~/renderer/actions/settings";
 
@@ -318,13 +318,16 @@ const SyncOnboardingCompanion: React.FC<SyncOnboardingCompanionProps> = ({
 
   useEffect(() => {
     if (lockedDevice) {
-      const props: LockedDeviceDrawerProps = {
-        deviceModelId: device.modelId,
-      };
-      setDrawer(LockedDeviceDrawer, props, {
-        forceDisableFocusTrap: true,
-        preventBackdropClick: true,
-      });
+      setDrawer(
+        LockedDeviceDrawer,
+        {
+          deviceModelId: device.modelId,
+        },
+        {
+          forceDisableFocusTrap: true,
+          preventBackdropClick: true,
+        },
+      );
     }
     return () => setDrawer();
   }, [device.modelId, history, lockedDevice]);