live-common 17.4.0 (#3373)

* Multiple bug fixes / wordings / improvements

LL-4084 Prevent backdropclick on full node modal

LL-4005 Fixes to scanned descriptors number\nWe were essentially ignoring the input of the user and hardcoding to 10 scanned descriptors instead. This commit addresses that

LL-4021 UX improvements satstack step

Going for the quick fix (change of wording).
Live-common to tackle the fake 10s loading if needed

LL-4006 Remove horizontal scrolls for account scanning

LL-3981 Add tooltip to loading status for satstack

Created lss.json file will use 640 permissions

LL-4022 Wording fixes

Were done to the de file previously

* live-common 17.4.0

* customize SatStackDescriptorNotImported case

(@juan-cortes to help me connecting out the navigation of the new button)

* Link the goFullNode cta to the full node modal

* update snapshot

* polish Step import for not scanned by full node

* latest live-common fixes

* Fixes full node flow in case of skipNodeSetup

Co-authored-by: Juan Cortes Ross <juan@bohem.io>
Co-authored-by: machard <matthieu__@hotmail.fr>

package.json

@@ -36,15 +36,15 @@
  "node": ">=12"
  },
  "dependencies": {
- "@hot-loader/react-dom": "^17.0.0",
+ "@hot-loader/react-dom": "^17.0.1",
  "@ledgerhq/devices": "^5.34.0",
  "@ledgerhq/electron-updater": "^4.2.2",
  "@ledgerhq/errors": "^5.34.0",
  "@ledgerhq/hw-transport": "^5.34.0",
  "@ledgerhq/hw-transport-http": "^5.34.0",
  "@ledgerhq/hw-transport-node-hid-singleton": "^5.34.0",
  "@ledgerhq/ledger-core": "6.9.1",
- "@ledgerhq/live-common": "17.3.0",
+ "@ledgerhq/live-common": "^17.4.2",
  "@ledgerhq/logs": "^5.30.0",
  "@tippyjs/react": "^4.2.0",
  "@trust/keyto": "^1.0.1",
@@ -74,7 +74,7 @@
  "measure-scrollbar": "^1.1.0",
  "moment": "^2.29.1",
  "node-abi": "^2.19.3",
- "openpgp": "^4.10.8",
+ "openpgp": "^4.10.9",
  "os-locale": "^5.0.0",
  "os-name": "^4.0.0",
  "prando": "^5.1.2",
@@ -86,7 +86,7 @@
  "react": "^17.0.1",
  "react-dom": "^17.0.1",
  "react-hot-loader": "^4.13.0",
- "react-i18next": "^11.7.3",
+ "react-i18next": "^11.8.3",
  "react-key-handler": "^1.2.0-beta.3",
  "react-lottie": "^1.2.3",
  "react-markdown": "^4.3.0",
@@ -115,27 +115,27 @@
  "tippy.js": "^6.2.7",
  "tree-kill": "^1.2.2",
  "uncontrollable": "^7.1.1",
- "uuid": "^8.3.1",
+ "uuid": "^8.3.2",
  "winston": "^3.2.1",
  "winston-transport": "^4.3.0",
  "write-file-atomic": "^3.0.3",
- "ws": "^7.4.0",
+ "ws": "^7.4.1",
  "xstate": "^4.14.0",
  "zxcvbn": "^4.4.2"
  },
  "devDependencies": {
  "@actions/core": "^1.2.6",
  "@actions/github": "^4.0.0",
- "@babel/core": "^7.12.9",
+ "@babel/core": "^7.12.10",
  "@babel/plugin-proposal-class-properties": "^7.12.1",
  "@babel/plugin-proposal-export-default-from": "^7.12.1",
  "@babel/plugin-proposal-export-namespace-from": "^7.12.1",
  "@babel/plugin-syntax-dynamic-import": "^7.8.3",
  "@babel/plugin-syntax-import-meta": "^7.10.1",
  "@babel/plugin-transform-modules-commonjs": "^7.12.1",
- "@babel/preset-env": "^7.12.7",
+ "@babel/preset-env": "^7.12.10",
  "@babel/preset-flow": "^7.12.1",
- "@babel/preset-react": "^7.12.7",
+ "@babel/preset-react": "^7.12.10",
  "@octokit/rest": "^18.0.9",
  "babel-cli": "^6.26.0",
  "babel-eslint": "^10.1.0",
@@ -145,13 +145,13 @@
  "babel-plugin-styled-components": "^1.12.0",
  "chalk": "^4.1.0",
  "copy-webpack-plugin": "^6.1.0",
- "cross-env": "^7.0.2",
+ "cross-env": "^7.0.3",
  "css-loader": "^3.5.3",
  "electron": "9.2.0",
  "electron-builder": "22.8.0",
  "electron-devtools-installer": "^3.1.1",
  "electron-notarize": "^1.0.0",
- "eslint": "^7.14.0",
+ "eslint": "^7.15.0",
  "eslint-config-prettier": "^6.15.0",
  "eslint-config-standard": "^15.0.1",
  "eslint-plugin-flowtype": "^5.1.3",

src/main/setup.js

@@ -56,7 +56,7 @@ ipcMain.handle("generate-lss-config", async (event, data: string): Promise<boole
  const filePath = path.resolve(userDataDirectory, lssFileName);
  if (filePath) {
  if (filePath && data) {
- await fsWriteFile(filePath, data);
+ await fsWriteFile(filePath, data, { mode: "640" });
  log("satstack", "wrote to lss.json file");
  return true;
  }

src/renderer/bridge/cache.js

@@ -1,8 +1,6 @@
 // @flow
-
 import { ipcRenderer } from "electron";
-import { makeLRUCache } from "@ledgerhq/live-common/lib/cache";
-import { getCurrencyBridge } from "@ledgerhq/live-common/lib/bridge";
+import { makeBridgeCacheSystem } from "@ledgerhq/live-common/lib/bridge/cache";
 import { log } from "@ledgerhq/logs";
 import type { CryptoCurrency } from "@ledgerhq/live-common/lib/types";
 import { logger } from "~/logger";
@@ -43,17 +41,15 @@ export function getCurrencyCache(currency: CryptoCurrency): mixed {
  return undefined;
 }
 
-export async function hydrateCurrency(currency: CryptoCurrency) {
- const value = await getCurrencyCache(currency);
- const bridge = getCurrencyBridge(currency);
- bridge.hydrate(value, currency);
-}
-
-export const prepareCurrency: (currency: CryptoCurrency) => Promise<void> = makeLRUCache(
- async currency => {
- const bridge = getCurrencyBridge(currency);
- const preloaded = await bridge.preload(currency);
- setCurrencyCache(currency, preloaded);
+const cache = makeBridgeCacheSystem({
+ saveData(c, d) {
+ setCurrencyCache(c, d);
+ return Promise.resolve();
  },
- currency => currency.id,
-);
+ getData(c) {
+ return Promise.resolve(getCurrencyCache(c));
+ },
+});
+
+export const hydrateCurrency = cache.hydrateCurrency;
+export const prepareCurrency = cache.prepareCurrency;

src/renderer/bridge/proxy.js

@@ -35,17 +35,30 @@ const scanAccounts = ({ currency, deviceId, syncConfig }) =>
  syncConfig,
  }).pipe(map(fromScanAccountEventRaw));
 
-export const getCurrencyBridge = (currency: CryptoCurrency): CurrencyBridge => ({
- preload: async () => {
- const value = await command("CurrencyPreload")({ currencyId: currency.id }).toPromise();
- bridgeImpl.getCurrencyBridge(currency).hydrate(value, currency);
- return value;
- },
+export const getCurrencyBridge = (currency: CryptoCurrency): CurrencyBridge => {
+ const bridge = bridgeImpl.getCurrencyBridge(currency);
+ const bridgeGetPreloadStrategy = bridge.getPreloadStrategy;
+ const getPreloadStrategy = bridgeGetPreloadStrategy
+ ? currency => bridgeGetPreloadStrategy.call(bridge, currency)
+ : undefined;
+ const b: CurrencyBridge = {
+ preload: async () => {
+ const value = await command("CurrencyPreload")({ currencyId: currency.id }).toPromise();
+ bridgeImpl.getCurrencyBridge(currency).hydrate(value, currency);
+ return value;
+ },
+
+ hydrate: value => bridgeImpl.getCurrencyBridge(currency).hydrate(value, currency),
+
+ scanAccounts,
+ };
 
- hydrate: value => bridgeImpl.getCurrencyBridge(currency).hydrate(value, currency),
+ if (getPreloadStrategy) {
+ b.getPreloadStrategy = getPreloadStrategy;
+ }
 
- scanAccounts,
-});
+ return b;
+};
 
 export const getAccountBridge = (
  account: AccountLike,

src/renderer/modals/AddAccounts/steps/StepImport.js

@@ -1,12 +1,14 @@
 // @flow
 
 import React, { useEffect, PureComponent } from "react";
+import { useDispatch } from "react-redux";
 import styled from "styled-components";
 import { Trans } from "react-i18next";
 import { concat, from } from "rxjs";
 import { ignoreElements, filter, map } from "rxjs/operators";
 import type { Account } from "@ledgerhq/live-common/lib/types";
 import { isAccountEmpty, groupAddAccounts } from "@ledgerhq/live-common/lib/account";
+import { openModal } from "~/renderer/actions/modals";
 import { DeviceShouldStayInApp } from "@ledgerhq/errors";
 import { getCurrencyBridge } from "@ledgerhq/live-common/lib/bridge";
 import uniq from "lodash/uniq";
@@ -207,7 +209,9 @@ class StepImport extends PureComponent<StepProps> {
  const mainCurrency = currency.type === "TokenCurrency" ? currency.parentCurrency : currency;
 
  if (err) {
- return <ErrorDisplay error={err} withExportLogs />;
+ return (
+ <ErrorDisplay error={err} withExportLogs={err.name !== "SatStackDescriptorNotImported"} />
+ );
  }
 
  const currencyName = mainCurrency ? mainCurrency.name : "";
@@ -287,8 +291,10 @@ export const StepImportFooter = ({
  checkedAccountsIds,
  scannedAccounts,
  currency,
+ err,
  t,
 }: StepProps) => {
+ const dispatch = useDispatch();
  const willCreateAccount = checkedAccountsIds.some(id => {
  const account = scannedAccounts.find(a => a.id === id);
  return account && isAccountEmpty(account);
@@ -301,6 +307,7 @@ export const StepImportFooter = ({
 
  const count = checkedAccountsIds.length;
  const willClose = !willCreateAccount && !willAddAccounts;
+ const isHandledError = err && err.name === "SatStackDescriptorNotImported";
 
  const ctaWording =
  scanStatus === "scanning"
@@ -316,25 +323,37 @@ export const StepImportFooter = ({
  transitionTo("finish");
  };
 
+ const goFullNode = () => {
+ onCloseModal();
+ dispatch(openModal("MODAL_FULL_NODE", { skipNodeSetup: true }));
+ };
+
  return (
  <>
  <Box grow>{currency && <CurrencyBadge currency={currency} />}</Box>
- {scanStatus === "error" && (
- <>
- <ExternalLinkButton label={t("common.getSupport")} url={urls.syncErrors} />
- <RetryButton
- id={"add-accounts-import-retry-button"}
- primary
- onClick={() => setScanStatus("scanning")}
- />
- </>
- )}
+ {scanStatus === "error" &&
+ (isHandledError ? (
+ <Button id={"add-accounts-full-node-reconfigure"} primary onClick={goFullNode}>
+ {t("addAccounts.fullNodeConfigure")}
+ </Button>
+ ) : (
+ <>
+ <ExternalLinkButton label={t("common.getSupport")} url={urls.syncErrors} />
+
+ <RetryButton
+ id={"add-accounts-import-retry-button"}
+ primary
+ onClick={() => setScanStatus("scanning")}
+ />
+ </>
+ ))}
  {scanStatus === "scanning" && (
  <Button id={"add-accounts-import-stop-button"} onClick={() => setScanStatus("finished")}>
  {t("common.stop")}
  </Button>
  )}
- {scanStatus !== "error" && (
+
+ {isHandledError ? null : (
  <Button
  id={"add-accounts-import-add-button"}
  primary

src/renderer/modals/FullNode/FullNodeBody.js

@@ -44,7 +44,7 @@ const FullNodeBody = ({
  { label: <Trans i18nKey={"fullNode.modal.steps.satstack.title"} /> },
  ];
 
- const [numberOfAccountsToScan, setNumberOfAccountsToScan] = useState(10);
+ const [numberOfAccountsToScan, setNumberOfAccountsToScan] = useState<?number>(10);
  const [nodeConfig, setNodeConfig] = useState<RPCNodeConfig>({
  host: "127.0.0.1:8332",
  username: "",
@@ -121,14 +121,17 @@ const FullNodeBody = ({
  onStepChange={onStepChange}
  />
  ) : activeStep === "accounts" ? (
- <StepAccounts setNumberOfAccountsToScan={setNumberOfAccountsToScan} />
+ <StepAccounts
+ numberOfAccountsToScan={numberOfAccountsToScan}
+ setNumberOfAccountsToScan={setNumberOfAccountsToScan}
+ />
  ) : activeStep === "device" ? (
  <StepConnectDevice
  setError={setError}
  onStepChange={onStepChange}
  nodeConfig={nodeConfig}
  setScannedDescriptors={setScannedDescriptors}
- numberOfAccountsToScan={numberOfAccountsToScan}
+ numberOfAccountsToScan={numberOfAccountsToScan || 10}
  />
  ) : activeStep === "satstack" ? (
  <StepSatStack satStackDownloaded={satStackDownloaded} />
@@ -149,7 +152,10 @@ const FullNodeBody = ({
  setNodeConnectionStatus={setNodeConnectionStatus}
  />
  ) : activeStep === "accounts" ? (
- <StepAccountsFooter onStepChange={onStepChange} />
+ <StepAccountsFooter
+ numberOfAccountsToScan={numberOfAccountsToScan}
+ onStepChange={onStepChange}
+ />
  ) : activeStep === "device" ? (
  <StepDeviceFooter
  onClose={onClose}

src/renderer/modals/FullNode/index.js

@@ -43,21 +43,19 @@ export const CrossWrapper: ThemedComponent<{
  color: ${p => p.theme.colors.alertRed};
 `;
 
-const FullNode = () => {
+const FullNode = ({ data, onClose }: *) => {
  const satStackAlreadyConfigured = useEnv("SATSTACK");
- const [stepId, setStepId] = useState(satStackAlreadyConfigured ? "node" : "landing");
- const isModalLocked = ["device"].includes(stepId);
-
- return (
- <Modal
- name="MODAL_FULL_NODE"
- centered
- preventBackdropClick={isModalLocked}
- render={({ data, onClose }) => (
- <FullNodeBody onStepChange={setStepId} activeStep={stepId} onClose={onClose} />
- )}
- />
+ const [stepId, setStepId] = useState(() =>
+ data?.skipNodeSetup ? "accounts" : satStackAlreadyConfigured ? "node" : "landing",
  );
+
+ return <FullNodeBody onStepChange={setStepId} activeStep={stepId} onClose={onClose} />;
 };
 
-export default FullNode;
+const render = ({ data, onClose }) => <FullNode onClose={onClose} data={data} />;
+
+const FullNodeModal = () => (
+ <Modal name="MODAL_FULL_NODE" centered preventBackdropClick render={render} />
+);
+
+export default FullNodeModal;