Feat: FAT-43-100: new BLE pairing flow (#1097)

* Regenerate Playwright screenshots (#1061)

* chore: generate changeset

* update screenshots (ubuntu-latest)

* update screenshots (windows-latest)

* update screenshots (macos-latest)

* fix(screenshots): make send modal wait for button to stop loading

* update screenshots (ubuntu-latest)

* update screenshots (windows-latest)

* update screenshots (macos-latest)

* chore: trigger CI

Co-authored-by: Team Live <[email protected]>

* chore: adding types-devices to LLM

* chore(llm): getDeviceAnimation in TS with device model types

* feat(llm): new lottie animation for BLE pairing

* fix(llc): unsubscribe to avoid memory leak during pairing

- consistent prop name filterByDeviceModelIds
- filter out devices by device ids during BLE scanning

* feat(llm): new BLE Pairing Flow

- new ble pairing flow accessible from the debug menu
- scanning filtering on device models and on already known devices
- option to add paired device to known devices list

* feat(llm): BLE pairing flow handling nested navigation

* fix: BleDeviceScanning after review

* fix: getDeviceAnimation after review

* fix: console.error

* chore: getDeviceAnimation from src/helpers

* chore: cleaning old src/component/DeviceAction/getDeviceAnimation

* chore: set changeset

Co-authored-by: Thomas Roger Lux <[email protected]>
Co-authored-by: Team Live <[email protected]>

.changeset/hot-ears-pretend.md

@@ -0,0 +1,17 @@
+---
+"live-mobile": patch
+"@ledgerhq/live-common": patch
+---
+
+New BLE pairing flow
+
+Not yet used in production. Accessible from the debug menu.
+
+Features:
+
+- scanning and pairing: one screen to go to from anywhere
+- navigate to after pairing success: configuration of the screen (and its associated navigator) with params and name of the route param that will have newly paired device info
+- scanning: filtering on device models
+- scanning: filtering out or displaying already known devices
+- pairing: new animation for pairing (lotties placeholders for now)
+- pairing: possibility to add (or not) the newly paired device to the "known devices" of the app (redux store)

.changeset/pretty-waves-switch.md

@@ -0,0 +1,5 @@
+---
+"ledger-live-desktop": patch
+---
+
+Regenerate desktop screenshots for playwright

apps/ledger-live-desktop/tests/specs/general/layout.spec.ts

@@ -20,6 +20,10 @@ test("Layout", async ({ page }) => {
   await test.step("can open send modal", async () => {
     await layout.openSendModal();
     await sendModal.container.waitFor({ state: "visible" });
+    const sendButtonLoader = sendModal.container
+      .locator("id=send-recipient-continue-button")
+      .locator("data-test-id=loading-spinner");
+    await sendButtonLoader.waitFor({ state: "detached" });
     await expect.soft(sendModal.container).toHaveScreenshot("send-modal.png");
     await sendModal.close();
   });
@@ -39,7 +43,7 @@ test("Layout", async ({ page }) => {
   await test.step("go to discover", async () => {
     await layout.goToDiscover();
     await expect(page).toHaveURL(/.*\/platform.*/);
-    await page.waitForLoadState('domcontentloaded');
+    await page.waitForLoadState("domcontentloaded");
     await expect(page).toHaveScreenshot("discover.png");
   });
 

apps/ledger-live-mobile/package.json

@@ -75,6 +75,7 @@
     "@ledgerhq/react-native-hw-transport-ble": "workspace:^",
     "@ledgerhq/react-native-passcode-auth": "^2.1.0",
     "@ledgerhq/types-cryptoassets": "workspace:^",
+    "@ledgerhq/types-devices": "workspace:^",
     "@ledgerhq/types-live": "workspace:^",
     "@polkadot/reactnative-identicon": "2.2.1",
     "@polkadot/x-randomvalues": "9.1.1",

apps/ledger-live-mobile/src/components/DeviceAction/rendering.tsx

@@ -22,7 +22,7 @@ import Button from "../Button";
 import DeviceActionProgress from "../DeviceActionProgress";
 import { NavigatorName, ScreenName } from "../../const";
 import Animation from "../Animation";
-import getDeviceAnimation from "./getDeviceAnimation";
+import { getDeviceAnimation } from "../../helpers/getDeviceAnimation";
 import GenericErrorView from "../GenericErrorView";
 import Circle from "../Circle";
 import { MANAGER_TABS } from "../../const/manager";

apps/ledger-live-mobile/src/components/FirmwareUpdate/ConfirmPinStep.tsx

@@ -3,7 +3,7 @@ import React from "react";
 import { useTranslation } from "react-i18next";
 import { Device } from "@ledgerhq/live-common/hw/actions/types";
 import { useTheme } from "styled-components/native";
-import getDeviceAnimation from "../DeviceAction/getDeviceAnimation";
+import { getDeviceAnimation } from "../../helpers/getDeviceAnimation";
 import Animation from "../Animation";
 import Track from "../../analytics/Track";
 

apps/ledger-live-mobile/src/components/FirmwareUpdate/ConfirmUpdateStep.tsx

@@ -5,7 +5,7 @@ import { useTranslation } from "react-i18next";
 import { Device } from "@ledgerhq/live-common/hw/actions/types";
 import { DeviceInfo, FirmwareUpdateContext } from "@ledgerhq/types-live";
 import { useTheme } from "styled-components/native";
-import getDeviceAnimation from "../DeviceAction/getDeviceAnimation";
+import { getDeviceAnimation } from "../../helpers/getDeviceAnimation";
 import Animation from "../Animation";
 import Track from "../../analytics/Track";
 

apps/ledger-live-mobile/src/components/RootNavigator/BaseNavigator.tsx

@@ -3,6 +3,7 @@ import {
   createStackNavigator,
   CardStyleInterpolators,
   TransitionPresets,
+  StackNavigationProp,
 } from "@react-navigation/stack";
 import { useTranslation } from "react-i18next";
 import { Flex, Icons } from "@ledgerhq/native-ui";
@@ -89,6 +90,24 @@ import Learn from "../../screens/Learn";
 import { useNoNanoBuyNanoWallScreenOptions } from "../../context/NoNanoBuyNanoWall";
 import PostBuyDeviceSetupNanoWallScreen from "../../screens/PostBuyDeviceSetupNanoWallScreen";
 
+import {
+  BleDevicePairingFlow,
+  BleDevicePairingFlowParams,
+} from "../../screens/BleDevicePairingFlow/index";
+
+// TODO: types for each screens and navigators need to be set
+export type BaseNavigatorStackParamList = {
+  BleDevicePairingFlow: BleDevicePairingFlowParams;
+
+  // Hack: allows any other properties
+  [otherScreens: string]: undefined | object;
+};
+
+export type BaseNavigatorProps =
+  StackNavigationProp<BaseNavigatorStackParamList>;
+
+const Stack = createStackNavigator<BaseNavigatorStackParamList>();
+
 export default function BaseNavigator() {
   const { t } = useTranslation();
   const { colors } = useTheme();
@@ -614,8 +633,13 @@ export default function BaseNavigator() {
           />
         );
       })}
+      <Stack.Screen
+        name={ScreenName.BleDevicePairingFlow as "BleDevicePairingFlow"}
+        component={BleDevicePairingFlow}
+        options={{
+          title: "",
+        }}
+      />
     </Stack.Navigator>
   );
 }
-
-const Stack = createStackNavigator();

apps/ledger-live-mobile/src/components/RootNavigator/SettingsNavigator.tsx

@@ -1,6 +1,7 @@
 import React, { useMemo, useCallback } from "react";
 import {
   createStackNavigator,
+  StackNavigationProp,
   TransitionPresets,
 } from "@react-navigation/stack";
 import { useTranslation } from "react-i18next";
@@ -36,6 +37,7 @@ import CurrencySettings from "../../screens/Settings/CryptoAssets/Currencies/Cur
 import DebugSettings, {
   DebugDevices,
   DebugMocks,
+  DebugMocksParams,
 } from "../../screens/Settings/Debug";
 import DebugExport from "../../screens/Settings/Debug/ExportAccounts";
 import ExperimentalSettings from "../../screens/Settings/Experimental";
@@ -52,6 +54,19 @@ import HiddenNftCollections from "../../screens/Settings/Accounts/HiddenNftColle
 import { track } from "../../analytics";
 import { useCurrentRouteName } from "../../helpers/routeHooks";
 
+// TODO: types for each screens and navigators need to be set
+export type SettingsNavigatorStackParamList = {
+  DebugMocks: DebugMocksParams;
+
+  // Hack: allows any other properties
+  [otherScreens: string]: undefined | object;
+};
+
+export type SettingsNavigatorProps =
+  StackNavigationProp<SettingsNavigatorStackParamList>;
+
+const Stack = createStackNavigator<SettingsNavigatorStackParamList>();
+
 export default function SettingsNavigator() {
   const { t } = useTranslation();
   const { colors } = useTheme();
@@ -339,5 +354,3 @@ export default function SettingsNavigator() {
     </Stack.Navigator>
   );
 }
-
-const Stack = createStackNavigator();

apps/ledger-live-mobile/src/components/ValidateMessageOnDevice.tsx

@@ -8,7 +8,7 @@ import type { MessageData } from "@ledgerhq/live-common/hw/signMessage/types";
 import type { AccountLike } from "@ledgerhq/types-live";
 import LText from "./LText";
 import Animation from "./Animation";
-import getDeviceAnimation from "./DeviceAction/getDeviceAnimation";
+import { getDeviceAnimation } from "../helpers/getDeviceAnimation";
 
 type Props = {
   device: Device;

apps/ledger-live-mobile/src/components/ValidateOnDevice.tsx

@@ -26,7 +26,7 @@ import Alert from "./Alert";
 import perFamilyTransactionConfirmFields from "../generated/TransactionConfirmFields";
 import { DataRowUnitValue, TextValueField } from "./ValidateOnDeviceDataRow";
 import Animation from "./Animation";
-import getDeviceAnimation from "./DeviceAction/getDeviceAnimation";
+import { getDeviceAnimation } from "../helpers/getDeviceAnimation";
 
 export type FieldComponentProps = {
   account: AccountLike;

apps/ledger-live-mobile/src/const/navigation.ts

@@ -340,6 +340,15 @@ export const ScreenName = {
   OnboardingModalSyncDesktopInformation:
     "OnboardingModalSyncDesktopInformation",
   OnboardingModalRecoveryPhraseWarning: "OnboardingModalRecoveryPhraseWarning",
+
+  SyncOnboardingCompanion: "SyncOnboardingCompanion",
+  SyncOnboardingCompletion: "SyncOnboardingCompletion",
+  DeviceModelSelection: "DeviceModelSelection",
+  BleDevicesScanning: "BleDevicesScanning",
+  BleDevicePairing: "BleDevicePairing",
+
+  BleDevicePairingFlow: "BleDevicePairingFlow",
+
   PlatformCatalog: "PlatformCatalog",
   PlatformApp: "PlatformApp",
   PlatformStartExchange: "PlatformStartExchange",