Upgrade to Electron 21

.changeset/famous-yaks-deliver.md

@@ -0,0 +1,21 @@
+---
+"ledger-live-desktop": major
+---
+
+Electron was upgraded from 15 to 21 as well as "electron-builder"
+
+- that means we have a new bump of the nodejs version for native module too. So all native library impacted (coins, usb,..)
+- that means we have a new Chromium version. So the UI is impacted. Screenshots have changed due to this.
+
+In a breaking change in Electron 18 the nativeWindowOpen web preference (used [here](https://github.com/LedgerHQ/ledger-live/blob/ff2d747c1a3aa6bc779d1987c0f2a5e0369c2d72/apps/ledger-live-desktop/src/renderer/components/WebPlatformPlayer/index.tsx#L416)) have [been removed](https://www.electronjs.org/blog/electron-18-0#removed-nativewindowopen) (cf. [this PR](https://github.com/electron/electron/pull/29405))
+
+Now, Ledger live does not seem to receive (and handle) new-window events when a live-apps wants to open a new window (regularly used throughout Live Apps to open external contextual info like redirect to Twitter account, open ToS page, etc…)
+
+`webview` are deprecated and not formerly integrated / maintained in electron.
+updating electron broke previous handleding of new window opened from a `webview`
+
+use `setWindowOpenHandler` on the `webview` webContents to handle opening new window.
+cf. https://github.com/electron/electron/issues/31117#issuecomment-958733861
+
+also, there seem to be issues between `webview` and React
+cf. https://github.com/electron/electron/issues/6046

apps/ledger-live-desktop/package.json

@@ -41,7 +41,7 @@
     "test": "pnpm test:jest && pnpm test:playwright",
     "test:codecheck": "node ./tools/ci.js",
     "test:jest": "jest src --silent --ci --coverage --json --testLocationInResults --outputFile=report.json",
-    "test:playwright": "nyc playwright test --config=tests/playwright.config.ts",
+    "test:playwright": "playwright test --config=tests/playwright.config.ts",
     "test:playwright:update-snapshots": "pnpm test:playwright --update-snapshots",
     "test:playwright:recorder": "playwright test tests/specs/recorder.spec.ts",
     "test:playwright:clean": "git clean -fdX tests/artifacts",
@@ -62,9 +62,9 @@
     "@ledgerhq/types-devices": "workspace:^",
     "@ledgerhq/types-live": "workspace:^",
     "@polkadot/react-identicon": "2.9.13",
-    "@sentry/electron": "^4.0.0",
-    "@sentry/node": "7.8.1",
-    "@sentry/tracing": "7.8.1",
+    "@sentry/electron": "^4.1.2",
+    "@sentry/node": "7.16.0",
+    "@sentry/tracing": "7.16.0",
     "@tippyjs/react": "^4.2.6",
     "@trust/keyto": "^1.0.1",
     "@types/semver": "^7.3.9",
@@ -79,7 +79,7 @@
     "color": "^3.1.3",
     "debug": "^4.3.3",
     "dotenv": "^8.2.0",
-    "electron-context-menu": "^2.5.2",
+    "electron-context-menu": "^3.6.0",
     "ethereumjs-tx": "^2.1.2",
     "firebase": "^9.6.6",
     "focus-trap": "^6.6.1",
@@ -166,7 +166,7 @@
     "@mapbox/node-pre-gyp": "^1.0.8",
     "@octokit/rest": "^18.12.0",
     "@playwright/test": "1.27.1",
-    "@sentry/cli": "^2.5.2",
+    "@sentry/cli": "^2.9.0",
     "@storybook/addon-actions": "^6.3.12",
     "@storybook/addon-essentials": "^6.3.12",
     "@storybook/addon-links": "^6.3.12",
@@ -192,10 +192,10 @@
     "codecov": "^3.8.3",
     "cross-env": "^7.0.3",
     "css-loader": "^3.5.3",
-    "electron": "^15",
+    "electron": "^21.3.1",
     "electron-builder": "^23.6.0",
     "electron-devtools-installer": "^3.2.0",
-    "electron-notarize": "^1.1.0",
+    "electron-notarize": "^1.2.2",
     "esbuild-loader": "^2.19.0",
     "esbuild-utils": "workspace:*",
     "eslint": "^7.32.0",

apps/ledger-live-desktop/src/main/index.js

@@ -4,7 +4,7 @@ require("@electron/remote/main").initialize();
 
 /* eslint-disable import/first */
 import "./setup";
-import { app, Menu, ipcMain, session } from "electron";
+import { app, Menu, ipcMain, session, webContents, shell } from "electron";
 import menu from "./menu";
 import {
   createMainWindow,
@@ -158,6 +158,19 @@ app.on("ready", async () => {
 
   ipcMain.on("log", (event, { log }) => logger.log(log));
 
+  // To handle openning new windows from webview
+  // cf. https://gist.github.com/codebytere/409738fcb7b774387b5287db2ead2ccb
+  ipcMain.on("webview-dom-ready", (_, id) => {
+    const wc = webContents.fromId(id);
+    wc.setWindowOpenHandler(({ url }) => {
+      const protocol = new URL(url).protocol;
+      if (["https:", "http:"].includes(protocol)) {
+        shell.openExternal(url);
+      }
+      return { action: "deny" };
+    });
+  });
+
   Menu.setApplicationMenu(menu);
 
   const windowParams = await db.getKey("windowParams", "MainWindow", {});

apps/ledger-live-desktop/src/preloader/index.js

@@ -32,9 +32,13 @@ const appLoaded = () => {
 
 const reloadRenderer = () => ipcRenderer.invoke("reloadRenderer");
 
+// cf. https://gist.github.com/codebytere/409738fcb7b774387b5287db2ead2ccb
+const openWindow = id => ipcRenderer.send("webview-dom-ready", id);
+
 window.api = {
   appLoaded,
   reloadRenderer,
+  openWindow,
 };
 
 /**

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

@@ -1,4 +1,4 @@
-import { shell, WebviewTag } from "electron";
+import { WebviewTag } from "electron";
 import * as remote from "@electron/remote";
 import { JSONRPCRequest } from "json-rpc-2.0";
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
@@ -400,31 +400,35 @@ export default function WebPlatformPlayer({ manifest, onClose, inputs = {}, conf
     }
   }, [manifest]);
 
-  const handleNewWindow = useCallback(async e => {
-    const protocol = new URL(e.url).protocol;
-    if (protocol === "http:" || protocol === "https:") {
-      await shell.openExternal(e.url);
+  const handleDomReady = useCallback(() => {
+    const webview = targetRef.current;
+    if (!webview) {
+      return;
     }
+
+    const id = webview.getWebContentsId();
+
+    // cf. https://gist.github.com/codebytere/409738fcb7b774387b5287db2ead2ccb
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    window.api.openWindow(id);
   }, []);
 
   useEffect(() => {
     const webview = targetRef.current;
 
     if (webview) {
-      // For mysterious reasons, the webpreferences attribute does not
-      // pass through the styled component when added in the JSX.
-      webview.webpreferences = "nativeWindowOpen=no";
-      webview.addEventListener("new-window", handleNewWindow);
       webview.addEventListener("did-finish-load", handleLoad);
+      webview.addEventListener("dom-ready", handleDomReady);
     }
 
     return () => {
       if (webview) {
-        webview.removeEventListener("new-window", handleNewWindow);
         webview.removeEventListener("did-finish-load", handleLoad);
+        webview.removeEventListener("dom-ready", handleDomReady);
       }
     };
-  }, [handleLoad, handleNewWindow]);
+  }, [handleLoad, handleDomReady]);
 
   return (
     <Container>
@@ -438,11 +442,32 @@ export default function WebPlatformPlayer({ manifest, onClose, inputs = {}, conf
       />
 
       <Wrapper>
-        <CustomWebview
+        <webview
           src={url.toString()}
           ref={targetRef}
-          style={{ opacity: widgetLoaded ? 1 : 0 }}
+          /**
+           * There seem to be an issue between Electron webview and styled-components
+           * (and React more broadly, cf. comment bellow).
+           * When using a styled webview componennt, the `allowpopups` prop does not
+           * seem to be set
+           */
+          style={{
+            opacity: widgetLoaded ? 1 : 0,
+            border: "none",
+            width: "100%",
+            flex: 1,
+            transition: "opacity 200ms ease-out",
+          }}
           preload={`file://${remote.app.dirname}/webviewPreloader.bundle.js`}
+          /**
+           * There seems to be an issue between Electron webview and react
+           * Hense, the normal `allowpopups` prop does not work and we need to
+           * explicitly set it's value to "true" as a string
+           * cf. https://github.com/electron/electron/issues/6046
+           */
+          // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+          // @ts-ignore
+          allowpopups="true"
         />
         {!widgetLoaded ? (
           <Loader>

libs/ledgerjs/packages/hw-transport-node-hid-noevents/package.json

@@ -31,7 +31,7 @@
     "@ledgerhq/errors": "workspace:^",
     "@ledgerhq/hw-transport": "workspace:^",
     "@ledgerhq/logs": "workspace:^",
-    "node-hid": "2.1.1"
+    "node-hid": "^2.1.2"
   },
   "devDependencies": {
     "@types/node-hid": "^1.3.1"

libs/ledgerjs/packages/hw-transport-node-hid-singleton/package.json

@@ -33,7 +33,7 @@
     "@ledgerhq/hw-transport-node-hid-noevents": "workspace:^",
     "@ledgerhq/logs": "workspace:^",
     "lodash": "^4.17.21",
-    "node-hid": "2.1.1",
+    "node-hid": "^2.1.2",
     "usb": "2.5.1"
   },
   "scripts": {