FAT-100: Adaptations on the Manager for FTS (#1279)

.changeset/chatty-lemons-retire.md

@@ -0,0 +1,5 @@
+---
+"@ledgerhq/live-common": minor
+---
+
+Addad feature flag and type definitions

.changeset/moody-squids-provide.md

@@ -0,0 +1,5 @@
+---
+"live-mobile": minor
+---
+
+Adaptations to My Ledger screen and Device Selection screen rebuild

.changeset/silly-cherries-cry.md

@@ -0,0 +1,5 @@
+---
+"@ledgerhq/live-cli": patch
+---
+
+Fixed compilation issue by adding type definitions

apps/cli/src/commands/discoverDevices.ts

@@ -1,70 +1,71 @@
-import { map, tap, scan as rxScan } from "rxjs/operators";
-import { discoverDevices } from "@ledgerhq/live-common/hw/index";
-export default {
-  args: [
-    {
-      name: "module",
-      alias: "m",
-      type: String,
-      desc: "filter a specific module (either hid | ble)",
-    },
-    {
-      name: "interactive",
-      alias: "i",
-      type: Boolean,
-      desc:
-        "interactive mode that accumulate the events instead of showing them",
-    },
-  ],
-  job: ({
-    module,
-    interactive,
-  }: Partial<{
-    module: string;
-    interactive: boolean;
-  }>) => {
-    const events = discoverDevices((m) =>
-      !module ? true : module.split(",").includes(m.id)
-    );
-    if (!interactive) return events;
-    return events
-      .pipe(
-        rxScan((acc: any[], value) => {
-          let copy;
-
-          if (value.type === "remove") {
-            copy = acc.filter((a) => a.id === value.id);
-          } else {
-            const existing = acc.find((o) => o.id === value.id);
-
-            if (existing) {
-              const i = acc.indexOf(existing);
-              copy = [...acc];
-
-              if (value.name) {
-                copy[i] = value;
-              }
-            } else {
-              copy = acc.concat({
-                id: value.id,
-                name: value.name,
-              });
-            }
-          }
-
-          return copy;
-        }, [])
-      )
-      .pipe(
-        tap(() => {
-          // eslint-disable-next-line no-console
-          console.clear();
-        }),
-        map((acc) =>
-          acc
-            .map((o) => `${(o.name || "(no name)").padEnd(40)} ${o.id}`)
-            .join("\n")
-        )
-      );
-  },
-};
+import { map, tap, scan as rxScan } from "rxjs/operators";
+import { discoverDevices } from "@ledgerhq/live-common/hw/index";
+import type { DeviceEvent } from "@ledgerhq/live-common/hw/index";
+
+export default {
+  args: [
+    {
+      name: "module",
+      alias: "m",
+      type: String,
+      desc: "filter a specific module (either hid | ble)",
+    },
+    {
+      name: "interactive",
+      alias: "i",
+      type: Boolean,
+      desc:
+        "interactive mode that accumulate the events instead of showing them",
+    },
+  ],
+  job: ({
+    module,
+    interactive,
+  }: Partial<{
+    module: string;
+    interactive: boolean;
+  }>) => {
+    const events = discoverDevices((m) =>
+      !module ? true : module.split(",").includes(m.id)
+    );
+    if (!interactive) return events;
+    return events
+      .pipe(
+        rxScan((acc: DeviceEvent[], value) => {
+          let copy;
+
+          if (value.type === "remove") {
+            copy = acc.filter((a) => a.id === value.id);
+          } else {
+            const existing = acc.find((o) => o.id === value.id);
+
+            if (existing) {
+              const i = acc.indexOf(existing);
+              copy = [...acc];
+
+              if (value.name) {
+                copy[i] = value;
+              }
+            } else {
+              copy = acc.concat({
+                ...value
+              });
+            }
+          }
+
+          return copy;
+        }, [])
+      )
+      .pipe(
+        tap(() => {
+          // eslint-disable-next-line no-console
+          console.clear();
+        }),
+        map((acc) =>
+          acc
+            .map((o) => `${(o.name || "(no name)").padEnd(40)} ${o.id}`)
+            .join("\n")
+        )
+      );
+  },
+};

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

@@ -4,12 +4,12 @@ import Config from "react-native-config";
 import type { ViewStyleProp } from "react-native/Libraries/StyleSheet/StyleSheet";
 import { StyleSheet } from "react-native";
 
-type LottieProps = $PropertyType<Lottie, "props">;
+type LottieProps = Lottie["props"];
 export default function Animation({
   style,
   ...lottieProps
 }: LottieProps & {
-  style: ViewStyleProp;
+  style?: ViewStyleProp;
 }) {
   return lottieProps.source ? (
     <Lottie

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

@@ -19,6 +19,7 @@ import {
   renderAllowManager,
   renderInWrongAppForAccount,
   renderError,
+  renderDeviceNotOnboarded,
   renderBootloaderStep,
   renderExchange,
   renderConfirmSwap,
@@ -309,14 +310,7 @@ export function DeviceActionDefaultRendering<R, H, P>({
       (error instanceof TransportStatusError &&
         error.message.includes("0x6d06"))
     ) {
-      return renderError({
-        t,
-        navigation,
-        error: new DeviceNotOnboarded(),
-        withOnboardingCTA: true,
-        colors,
-        theme,
-      });
+      return renderDeviceNotOnboarded({ t, device, navigation });
     }
 
     return renderError({

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

@@ -5,6 +5,7 @@ import styled from "styled-components/native";
 import { WrongDeviceForAccount } from "@ledgerhq/errors";
 import { TokenCurrency } from "@ledgerhq/types-cryptoassets";
 import { Transaction } from "@ledgerhq/live-common/generated/types";
+import { getDeviceModel } from "@ledgerhq/devices";
 import { Device } from "@ledgerhq/live-common/hw/actions/types";
 import { AppRequest } from "@ledgerhq/live-common/hw/actions/app";
 import firmwareUpdateRepair from "@ledgerhq/live-common/hw/firmwareUpdate-repair";
@@ -28,7 +29,7 @@ import {
   getAccountName,
 } from "@ledgerhq/live-common/account/index";
 import { getAccountCurrency } from "@ledgerhq/live-common/src/account";
-import { getDeviceModel } from "@ledgerhq/devices";
+import { TFunction } from "react-i18next";
 import { DeviceModelId } from "@ledgerhq/types-devices";
 import { setModalLock } from "../../actions/appstate";
 import { urls } from "../../config/urls";
@@ -46,8 +47,12 @@ import { providerIcons } from "../../icons/swap/index";
 import ExternalLink from "../ExternalLink";
 import { track } from "../../analytics";
 import CurrencyUnitValue from "../CurrencyUnitValue";
-import TermsFooter from "../TermsFooter";
 import CurrencyIcon from "../CurrencyIcon";
+import TermsFooter from "../TermsFooter";
+import Illustration from "../../images/illustration/Illustration";
+
+import notOnboardedDarkImg from "../../images/illustration/Dark/_010.png";
+import notOnboardedLightImg from "../../images/illustration/Light/_010.png";
 
 const Wrapper = styled(Flex).attrs({
   flex: 1,
@@ -563,6 +568,71 @@ export function renderError({
   );
 }
 
+export function renderDeviceNotOnboarded({
+  t,
+  device,
+  navigation,
+}: {
+  t: TFunction;
+  device: Device;
+  // TODO: correctly type the navigation prop here AND in the DeviceAction component
+  navigation: any;
+}) {
+  const navigateToOnboarding = () => {
+    if (device.modelId === DeviceModelId.nanoFTS) {
+      // On pairing success, navigate to the Sync Onboarding Companion
+      navigation.navigate(NavigatorName.BaseOnboarding, {
+        screen: NavigatorName.SyncOnboarding,
+        params: {
+          screen: ScreenName.SyncOnboardingCompanion,
+          params: {
+            device,
+          },
+        },
+      });
+    } else {
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore next-line
+      navigation.navigate(NavigatorName.BaseOnboarding, {
+        screen: NavigatorName.Onboarding,
+        params: {
+          screen: ScreenName.OnboardingSetNewDevice,
+          params: {
+            deviceModelId: device.modelId,
+          },
+        },
+      });
+    }
+  };
+
+  const deviceName = getDeviceModel(device.modelId).productName;
+
+  return (
+    <Wrapper>
+      <Illustration
+        lightSource={notOnboardedLightImg}
+        darkSource={notOnboardedDarkImg}
+        size={175}
+      />
+      <Text variant="h4" textAlign="center" mt={4}>
+        {t("DeviceAction.deviceNotOnboarded.title")}
+      </Text>
+      <Text variant="body" color="neutral.c70" textAlign="center" mt={4} mx={4}>
+        {t("DeviceAction.deviceNotOnboarded.description", { deviceName })}
+      </Text>
+      <Button
+        type="main"
+        outline={false}
+        onPress={navigateToOnboarding}
+        mt={7}
+        alignSelf="stretch"
+      >
+        {t("DeviceAction.button.openOnboarding")}
+      </Button>
+    </Wrapper>
+  );
+}
+
 export function renderConnectYourDevice({
   t,
   unresponsive,

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

@@ -98,7 +98,6 @@ import {
 import { readOnlyModeEnabledSelector } from "../../reducers/settings";
 import { accountsSelector } from "../../reducers/accounts";
 
-// TODO: types for each screens and navigators need to be set
 export type BaseNavigatorStackParamList = {
   BleDevicePairingFlow: BleDevicePairingFlowParams;