Synchronous onboarding and PostOnboarding on Desktop (#700)

* feat(desktop): WIP add new sync onboarding flow entry point

* add vertical timeline

* fix height and header vertical timeline

* feat(desktop): add an help drawer to the sync onboarding

* chore: generate changeset

* add video welcome screen onboarding

* fix flex in vertical timeline

* add desync overlay

* fix sync overlay

* fix overlay button

* fix: center vertical timeline

* fix(desktop): webm not loading fix

* Feat/software check sync onboarding (#822)

* add: software check sync onboarding

* add: translations and fix UI

* change typo

* re fix typo

* Feat/add completion screen onboarding (#865)

add completion screen to onboarding

* Feat/fat 161 onboarding usb pairing (#770)

* feat(lld): USB pairing during onboarding

* chore(lld): renaming and configuring router

* feat(llm): device available in sync onboarding manual

* feat(lld): getOnboardingStatePolling command

- Makes getOnboardingStatePolling run on the internal thread

* feat(lld): use of polling hook in sync onboarding manual

* fix(lld): getDevices and getCurrentDevice reducers mocked device types

* fix(lld): linter on sync onboarding

* add: USB troubleshooting drawer to sync onboarding (#881)

* add: USB troubleshooting drawer to sync onboarding

* add: recovery content sync onboarding (#894)

* add: recovery content sync onboarding

* add: refacto storyly LLD

* add debugger screen for storyly

* add changeset

* fix inactive sync

* fix export

* remove hard coded token storyly

* fix useeffect

* add onclose to debug modal

* add UI for update available in sync onboarding (#1012)

* Plug sync onboarding UI with device polling (#900)

* feat(desktop): plug sync onboarding UI with device polling

* fix(desktop): update following previous rebase

* refactor(desktop): remove useless bits of code

* chore: generate changeset

* Add UI for recommended apps step in sync onboarding (#1048)

* feat: FAT-99 genuine check and get latest available firmware hooks (#1026)

* feat(lld): genuine check and get latest available firmware commands

* feat(lld): sync onboarding examples of genuine check and get latest available firmware hooks

* add genuine check and firware update logic (#1093)

* Add playwright test suite to synchronous onboarding on desktop (#790)

* test(desktop): add playwright test suite for synchronous onboarding

* tests(desktop): update onboarding tests to remove screenshots from models

* chore: generate changeset

* fix(desktop): remove linter errors

* chore: remove screenshots locally generated

* Feat/add entry point postonboarding (#1192)

* Fix broken import that was breaking everything (ノಠ益ಠ)ノ彡┻━┻

* fix(desktop): pixel polish on sync onboarding

* feat(mobile): add longer timeout during seed generation

* refactor(desktop): make the desync overlay sexier in sync onboarding

* refactor(desktop): pixel polish the troubleshooting drawer in sync onboarding

* refactor(react-ui): fix the icon buttons width and add neutral variant to buttons

* refactor(desktop): remake the header from the sync onboarding page

* refacotr(desktop): pixel polish on sync onboarding screen

* add cancel genuine check flow (#1311)

* add cancel genuine check flow

* fix skip button

* fix(desktop): pixel polish sync onboarding on small screens

* fix(desktop): pixel polish software checks in sync onboarding

* refactor(desktop): add support for choose name flag in sync onboarding

* feat(desktop): redesign the connection screens for sync onboarding

* fix(desktop): pixel polish genuine check modals

* feat(desktop): feature flag the sync onboarding

* refactor(desktop): update the design of the completion screen after sync onboarding

* fix(desktop): redirect to portfolio instead of post onboarding temporarily

* fix(desktop): make the fake app install step non-blocking

* Feat/not genuine device flow in sync onboarding (#1385)

Add not genuine flow to sync onboarding

* fix(desktop): check for a device state ready before going to software check

* Feat/postonboarding state logic and UI (#1324)

* add reducer

* add post onboarding logic

* add mock screen

* Add startAction function in PostOnboardingAction type

* add startAction and put all mock inside drawer

* add callback

* change var naming

* Add v3 style provider to PostOnboardingHub & PostOnboardingScreen

* rename logic dir

* rename logic dir

* Fix focus trap logic in SideDrawer

* remove isMounted state

* fix logic and make postonboardinghub more independant

* fix compilation

* use theme spacing

* pixel polish on postonboarding screen

* add texts to app.json

* Fix completion screen missing import

* add redirection to completion screen from regular onboarding and fix some UI

* add local storage logic of the post onboarding hub

* fix drawer close clean last action

* fix postonboarding redirection

* re

* re fix git issues

* add hooks

* add tracking

* change hook params post onboarding

* fix others entry points

* change return position

* Fix existing uses of useStartPostOnboardingCallback on LLM

* lint

* add playwright tests

* add changeset

* Fix react-redux lib duplication causing crash in LLD build

* Remove useless dep react-redux from CLI

* chore: properly upgrade react-redux du prevent duplication and fixed versions

* Set optional peer dependencies in live-common

* fix e2e tests

* fix blocking modals

* add cleaning for the focus trap

Co-authored-by: Olivier Freyssinet <[email protected]>
Co-authored-by: elbywan <[email protected]>

* add translations in app.json

* fix double import lint error

* fix some translations

* fix some rebase stuff about useStartPostOnboardingCallback

* fix rebase pnpm-lock

* add mask on video welcome screen playwright

* fix test crash and add device illustration in sync onboarding

* add masks on e2e onboarding

* fix flaky e2e postonboarding hub

* fix changeset

* add id to button in mock action

* use nth to locate postonboarding hub button in e2e

* update screenshots (ubuntu-latest)

* update screenshots (windows-latest)

* update screenshots (macos-latest)

* fix flakyness in onboarding e2e

* refactor(desktop,react-ui): use new Inter variants for titles

* fix(react-ui): put back capitalization on Alpha titles

* change font weight

* fix pnpm lock conflicts

* update screenshots (ubuntu-latest)

* update screenshots (macos-latest)

* update screenshots (windows-latest)

* fix flaky e2e in CLS

* update screenshots (ubuntu-latest)

* update screenshots (windows-latest)

* update screenshots (macos-latest)

* update tracking device selection

* fix flaky e2e using env

* update macos screenshots

* update screenshots (ubuntu-latest)

* Fix custom image test flakiness

* update macos screenshots

* update screenshots (windows-latest)

* update screenshots (ubuntu-latest)

* update screenshots (windows-latest)

* update screenshots (ubuntu-latest)

* update screenshots (windows-latest)

* update screenshots (macos-latest)

* remove flaky screenshot in manager

* update screenshots (ubuntu-latest)

* update screenshots (macos-latest)

* update screenshots (windows-latest)

* empty commit

Co-authored-by: Pierre-Louis Crescitz <[email protected]>
Co-authored-by: Alexandre Magaud <[email protected]>
Co-authored-by: Juan Cortés Ross <[email protected]>
Co-authored-by: Olivier Freyssinet <[email protected]>
Co-authored-by: elbywan <[email protected]>
Co-authored-by: Team Live <[email protected]>

.changeset/big-carpets-sniff.md

@@ -0,0 +1,5 @@
+---
+"ledger-live-desktop": minor
+---
+
+Add debug screen for storyly

.changeset/gentle-tips-help.md

@@ -0,0 +1,5 @@
+---
+"ledger-live-desktop": minor
+---
+
+Add UI for update available in sync onboarding

.changeset/khaki-shirts-occur.md

@@ -0,0 +1,5 @@
+---
+"ledger-live-desktop": minor
+---
+
+Add post onboarding logic and mock actions

.changeset/lucky-radios-beam.md

@@ -0,0 +1,5 @@
+---
+"ledger-live-desktop": minor
+---
+
+Add completion screen to the Onboarding

.changeset/many-days-move.md

@@ -0,0 +1,5 @@
+---
+"ledger-live-desktop": minor
+---
+
+Add not genuine device flow to the sync onboarding

.changeset/many-experts-fetch.md

@@ -0,0 +1,5 @@
+---
+"ledger-live-desktop": patch
+---
+
+Add Playwright test suite for the new sync onboarding screen

.changeset/mighty-queens-enjoy.md

@@ -0,0 +1,5 @@
+---
+"ledger-live-desktop": minor
+---
+
+Add USB troubleshooting drawer in sync onboarding

.changeset/modern-years-relate.md

@@ -0,0 +1,6 @@
+---
+"ledger-live-desktop": minor
+"@ledgerhq/react-ui": minor
+---
+
+Add a new help drawer in the new synchronous onboarding screen. Also update the drawer component from UI library to comply with recent designs.

.changeset/selfish-snakes-cheer.md

@@ -0,0 +1,5 @@
+---
+"ledger-live-desktop": minor
+---
+
+Add postonboarding entry point

.changeset/tough-birds-fry.md

@@ -0,0 +1,5 @@
+---
+"ledger-live-desktop": minor
+---
+
+Plug synchronous onboarding logic from live-common with desktop UI

.changeset/two-hats-help.md

@@ -0,0 +1,5 @@
+---
+"ledger-live-desktop": minor
+---
+
+Add the UI for the install recommended apps step in the sync onboarding

.changeset/wicked-peas-camp.md

@@ -0,0 +1,5 @@
+---
+"ledger-live-desktop": minor
+---
+
+Add cancel genuine check flow

apps/cli/package.json

@@ -56,7 +56,6 @@
     "qrloop": "^1.2.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-redux": "^7.2.6",
     "rxjs": "^6.6.7",
     "winston": "^3.5.1",
     "ws": "^8.6.0"

apps/ledger-live-desktop/package.json

@@ -113,7 +113,7 @@
     "react-markdown": "^4.3.0",
     "react-motion": "^0.5.2",
     "react-prismazoom": "^3.0.0",
-    "react-redux": "^7.2.6",
+    "react-redux": "^7.2.9",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
     "react-select": "^3.2.0",

apps/ledger-live-desktop/src/internal/commands/getGenuineCheckFromDeviceId.ts

@@ -0,0 +1,11 @@
+import {
+  GetGenuineCheckFromDeviceIdArgs,
+  GetGenuineCheckFromDeviceIdOutput,
+  getGenuineCheckFromDeviceId,
+} from "@ledgerhq/live-common/hw/getGenuineCheckFromDeviceId";
+
+// Makes getGenuineCheckFromDeviceId run on the internal thread
+const cmd = (args: GetGenuineCheckFromDeviceIdArgs): GetGenuineCheckFromDeviceIdOutput =>
+  getGenuineCheckFromDeviceId(args);
+
+export default cmd;

apps/ledger-live-desktop/src/internal/commands/getLatestAvailableFirmwareFromDeviceId.ts

@@ -0,0 +1,12 @@
+import {
+  GetLatestAvailableFirmwareFromDeviceIdArgs,
+  GetLatestAvailableFirmwareFromDeviceIdOutput,
+  getLatestAvailableFirmwareFromDeviceId,
+} from "@ledgerhq/live-common/hw/getLatestAvailableFirmwareFromDeviceId";
+
+// Makes getLatestAvailableFirmwareFromDeviceId run on the internal thread
+const cmd = (
+  args: GetLatestAvailableFirmwareFromDeviceIdArgs,
+): GetLatestAvailableFirmwareFromDeviceIdOutput => getLatestAvailableFirmwareFromDeviceId(args);
+
+export default cmd;

apps/ledger-live-desktop/src/internal/commands/getOnboardingStatePolling.ts

@@ -0,0 +1,11 @@
+import {
+  getOnboardingStatePolling,
+  GetOnboardingStatePollingArgs,
+  GetOnboardingStatePollingResult,
+} from "@ledgerhq/live-common/hw/getOnboardingStatePolling";
+
+// Makes getOnboardingStatePolling run on the internal thread
+const cmd = (args: GetOnboardingStatePollingArgs): GetOnboardingStatePollingResult =>
+  getOnboardingStatePolling(args);
+
+export default cmd;

apps/ledger-live-desktop/src/internal/commands/index.js

@@ -28,6 +28,9 @@ import installLanguage from "./installLanguage";
 import getAppAndVersion from "./getAppAndVersion";
 import getDeviceInfo from "./getDeviceInfo";
 import ftsLoadImage from "./ftsLoadImage";
+import getOnboardingStatePolling from "./getOnboardingStatePolling";
+import getGenuineCheckFromDeviceId from "./getGenuineCheckFromDeviceId";
+import getLatestAvailableFirmwareFromDeviceId from "./getLatestAvailableFirmwareFromDeviceId";
 import { commands as bridgeProxyCommands } from "~/renderer/bridge/proxy-commands";
 
 export const commandsById = {
@@ -61,6 +64,9 @@ export const commandsById = {
   getAppAndVersion,
   getDeviceInfo,
   ftsLoadImage,
+  getOnboardingStatePolling,
+  getGenuineCheckFromDeviceId,
+  getLatestAvailableFirmwareFromDeviceId,
 };
 
 export type Commands = typeof commandsById;

apps/ledger-live-desktop/src/renderer/App.jsx

@@ -35,6 +35,7 @@ import { themeSelector } from "./actions/general";
 import MarketDataProvider from "~/renderer/screens/market/MarketDataProviderWrapper";
 // $FlowFixMe
 import { ConnectEnvsToSentry } from "~/renderer/components/ConnectEnvsToSentry";
+import PostOnboardingProviderWrapped from "~/renderer/components/PostOnboardingHub/logic/PostOnboardingProviderWrapped";
 
 const reloadApp = event => {
   if ((event.ctrlKey || event.metaKey) && event.key === "r") {
@@ -81,17 +82,19 @@ const InnerApp = ({ initialCountervalues }: { initialCountervalues: * }) => {
                   <ToastProvider>
                     <AnnouncementProviderWrapper>
                       <Router>
-                        <WalletConnectProvider>
-                          <PlatformAppProviderWrapper>
-                            <DrawerProvider>
-                              <NftMetadataProvider>
-                                <MarketDataProvider>
-                                  <Default />
-                                </MarketDataProvider>
-                              </NftMetadataProvider>
-                            </DrawerProvider>
-                          </PlatformAppProviderWrapper>
-                        </WalletConnectProvider>
+                        <PostOnboardingProviderWrapped>
+                          <WalletConnectProvider>
+                            <PlatformAppProviderWrapper>
+                              <DrawerProvider>
+                                <NftMetadataProvider>
+                                  <MarketDataProvider>
+                                    <Default />
+                                  </MarketDataProvider>
+                                </NftMetadataProvider>
+                              </DrawerProvider>
+                            </PlatformAppProviderWrapper>
+                          </WalletConnectProvider>
+                        </PostOnboardingProviderWrapped>
                       </Router>
                     </AnnouncementProviderWrapper>
                   </ToastProvider>

apps/ledger-live-desktop/src/renderer/Default.jsx

@@ -51,13 +51,15 @@ import DebugSkeletons from "~/renderer/components/debug/DebugSkeletons";
 import { DisableTransactionBroadcastWarning } from "~/renderer/components/debug/DisableTransactionBroadcastWarning";
 import { DebugWrapper } from "~/renderer/components/debug/shared";
 import useDeeplink from "~/renderer/hooks/useDeeplinking";
+import useStoryly from "~/renderer/hooks/useStoryly";
 import useUSBTroubleshooting from "~/renderer/hooks/useUSBTroubleshooting";
 import ModalsLayer from "./ModalsLayer";
 import { ToastOverlay } from "~/renderer/components/ToastOverlay";
 import Drawer from "~/renderer/drawers/Drawer";
 import UpdateBanner from "~/renderer/components/Updater/Banner";
 import FirmwareUpdateBanner from "~/renderer/components/FirmwareUpdateBanner";
 import Onboarding from "~/renderer/components/Onboarding";
+import PostOnboardingScreen from "~/renderer/components/PostOnboardingScreen";
 
 import { hasCompletedOnboardingSelector } from "~/renderer/reducers/settings";
 
@@ -70,6 +72,7 @@ import Learn from "~/renderer/screens/learn";
 
 import { useProviders } from "~/renderer/screens/exchange/Swap2/Form";
 import WelcomeScreenSettings from "~/renderer/screens/settings/WelcomeScreenSettings";
+import SyncOnboarding from "./components/SyncOnboarding";
 
 // in order to test sentry integration, we need the ability to test it out.
 const LetThisCrashForCrashTest = () => {
@@ -150,6 +153,7 @@ export default function Default() {
   useListenToHidDevices();
   useDeeplink();
   useUSBTroubleshooting();
+  useStoryly();
 
   useProviders(); // prefetch data from swap providers here
 
@@ -190,6 +194,8 @@ export default function Default() {
             ) : null}
             <Switch>
               <Route path="/onboarding" render={props => <Onboarding {...props} />} />
+              <Route path="/sync-onboarding" render={props => <SyncOnboarding {...props} />} />
+              <Route path="/post-onboarding" render={() => <PostOnboardingScreen />} />
               <Route path="/USBTroubleshooting">
                 <USBTroubleshooting onboarding={!hasCompletedOnboarding} />
               </Route>

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

@@ -1,5 +1,7 @@
 import React from "react";
 import styled, { DefaultTheme, StyledComponent, ThemeProps } from "styled-components";
+import nanoFTS from "~/renderer/images/nanoFTS.svg";
+import nanoFTSDark from "~/renderer/images/nanoFTSDark.svg";
 import nanoX from "~/renderer/images/nanoX.v3.svg";
 import nanoS from "~/renderer/images/nanoS.v3.svg";
 import nanoS2 from "~/renderer/images/nanoS2.v3.svg";
@@ -10,7 +12,7 @@ import nanoS2Dark from "~/renderer/images/nanoS2Dark.v3.svg";
 import { registerAssets } from "~/renderer/components/Onboarding/preloadAssets";
 import { DeviceModelId } from "@ledgerhq/devices";
 
-registerAssets([nanoX, nanoS, nanoS2, nanoXDark, nanoSDark, nanoS2Dark]);
+registerAssets([nanoX, nanoS, nanoS2, nanoXDark, nanoSDark, nanoS2Dark, nanoFTS, nanoFTSDark]);
 
 const makeAssetSelector = (lightAsset: any, darkAsset: any) => (p: ThemeProps<DefaultTheme>) =>
   p.theme.colors.palette.type === "light" ? lightAsset : darkAsset;
@@ -29,6 +31,10 @@ const NanoX = styled.div`
   background: url(${p => makeAssetSelector(nanoX, nanoXDark)(p)}) no-repeat center;
 `;
 
+const NanoFTS = styled.div`
+  background: url(${p => makeAssetSelector(nanoFTS, nanoFTSDark)(p)}) no-repeat center;
+`;
+
 type Illustration = {
   Illustration: StyledComponent<"div", DefaultTheme, Record<string, unknown>, never>;
   width: number;
@@ -51,6 +57,11 @@ const illustrations: { [key in DeviceModelId]: Illustration } = {
     width: 53.83,
     height: 250.87,
   },
+  nanoFTS: {
+    Illustration: NanoFTS,
+    width: 160.15,
+    height: 250.1,
+  },
   blue: {
     Illustration: NanoS,
     width: 49.2,

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

@@ -6,6 +6,7 @@ type Props = {
   lightSource: string;
   darkSource: string;
   size: number;
+  height?: number;
 };
 
 const defineStyleFromTheme = (lightAsset: string, darkAsset: string) => (
@@ -14,7 +15,7 @@ const defineStyleFromTheme = (lightAsset: string, darkAsset: string) => (
 
 const Illustration: ThemedComponent<Props> = styled(Box).attrs((p: Props) => ({
   width: `${p.size}px`,
-  height: `${p.size}px`,
+  height: p.height ? `${p.height}px` : `${p.size}px`,
 }))<Props>`
   background: url(${(p: Props) => defineStyleFromTheme(p.lightSource, p.darkSource)(p)});
   background-size: cover;

apps/ledger-live-desktop/src/renderer/components/Onboarding/Screens/SelectDevice/DeviceSelector.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import styled from "styled-components";
 import { DeviceModelId, getDeviceModel } from "@ledgerhq/devices";
 import { Flex } from "@ledgerhq/react-ui";
+import { useFeature } from "@ledgerhq/live-common/featureFlags/index";
 
 import { DeviceSelectorOption } from "./DeviceSelectorOption";
 import DeviceIllustration from "~/renderer/components/DeviceIllustration";
@@ -13,7 +14,7 @@ const DeviceSelectContainer = styled(Flex).attrs({
   height: "100%",
 })``;
 
-const devices = [
+const allDevices = [
   {
     id: "nanoS",
     enabled: true,
@@ -32,6 +33,17 @@ interface DeviceSelectorProps {
 }
 
 export function DeviceSelector({ onClick }: DeviceSelectorProps) {
+  const syncOnboarding = useFeature("syncOnboarding");
+
+  const devices = syncOnboarding?.enabled
+    ? [
+        {
+          id: "nanoFTS",
+          enabled: true,
+        },
+      ].concat(allDevices)
+    : allDevices;
+
   return (
     <DeviceSelectContainer>
       {devices.map(({ id, enabled }, index, arr) => (

apps/ledger-live-desktop/src/renderer/components/Onboarding/Screens/SelectDevice/DeviceSelectorOption.tsx

@@ -49,13 +49,20 @@ const Container = styled(Flex).attrs((p: BorderProps) => ({
 `;
 
 const ContentContainer = styled(Flex).attrs({
+  paddingTop: 16,
   flex: 1,
   flexDirection: "column",
   alignItems: "center",
   alignSelf: "center",
 })``;
 
-const DeviceName = styled(Text).attrs({ color: "neutral.c100" })``;
+const DeviceName = styled(Text).attrs({
+  color: "neutral.c100",
+  variant: "h4Inter",
+  fontSize: 24,
+  fontWeight: "semiBold",
+  fontFamily: "Inter",
+})``;
 
 interface DeviceSelectOptionProps {
   label: string;
@@ -79,9 +86,7 @@ export function DeviceSelectorOption({
     <Container data-test-id={`v3-container-${id}`} {...{ id, isFirst, isLast }}>
       <ContentContainer>
         <DeviceIllustrationContainer>{Illu}</DeviceIllustrationContainer>
-        <DeviceName marginTop="32px" variant="h2">
-          {label}
-        </DeviceName>
+        <DeviceName marginTop="32px">{label}</DeviceName>
         <SelectButton data-test-id={`v3-${id}`} variant="main" onClick={onClick}>
           {t("onboarding.screens.selectDevice.selectLabel")}
         </SelectButton>

apps/ledger-live-desktop/src/renderer/components/Onboarding/Screens/SelectDevice/index.tsx

@@ -22,9 +22,10 @@ const SelectDeviceContainer = styled(Flex).attrs({
 
 const TitleText = styled(Text).attrs({
   color: "neutral.c100",
+  fontSize: 32,
 })`
   position: absolute;
-  top: 90px;
+  top: 110px;
   align-self: center;
   pointer-events: none;
 `;
@@ -37,9 +38,14 @@ export function SelectDevice() {
 
   const handleDeviceSelect = useCallback(
     (deviceModelId: DeviceModelId) => {
+      // TODO: use a feature flag to do this properly
       track("Onboarding Device - Selection", { deviceModelId });
-      setDeviceModelId(deviceModelId);
-      history.push("/onboarding/select-use-case");
+      if (deviceModelId === "nanoFTS") {
+        history.push(`/onboarding/sync/${deviceModelId}`);
+      } else {
+        setDeviceModelId(deviceModelId);
+        history.push("/onboarding/select-use-case");
+      }
     },
     [history, setDeviceModelId],
   );
@@ -52,9 +58,7 @@ export function SelectDevice() {
         }
       />
       <DeviceSelector onClick={handleDeviceSelect} />
-      <TitleText variant="h3" fontSize="28px">
-        {t("onboarding.screens.selectDevice.title")}
-      </TitleText>
+      <TitleText variant="h1">{t("onboarding.screens.selectDevice.title")}</TitleText>
     </SelectDeviceContainer>
   );
 }