✨ (llm) [LIVE-14839]: As a user when I start the onboarding I want to get a generic pairing message

.changeset/brave-icons-glow.md

@@ -0,0 +1,5 @@
+---
+"live-mobile": patch
+---
+
+Remove default nanoX pairing desc screen

apps/ledger-live-mobile/e2e/page/onboarding/onboardingSteps.page.ts

@@ -21,7 +21,6 @@ export default class OnboardingStepsPage {
   buyLedgerButton = () => getElementById("onboarding-noLedgerYetModal-buy");
   exploreWithoutDeviceButton = () => getElementById(this.exploreWithoutDeviceButtonId);
   connectLedgerButton = () => getElementById("Existing Wallet | Connect");
-  pairNanoButton = () => getElementById("Onboarding-PairNewNano");
   maybeLaterButton = () => getElementById("notifications-prompt-later");
 
   setupLedger = "onboarding-setupLedger";
@@ -157,10 +156,6 @@ export default class OnboardingStepsPage {
     await tapById(this.quizzFinalCta);
   }
 
-  async selectPairMyNano() {
-    await tapByElement(this.pairNanoButton());
-  }
-
   async declineNotifications() {
     await tapByElement(this.maybeLaterButton());
   }

apps/ledger-live-mobile/e2e/specs/onboarding.spec.ts

@@ -20,7 +20,6 @@ describe("Onboarding", () => {
     await app.onboarding.startOnboarding();
     await app.onboarding.chooseToAccessYourWallet();
     await app.onboarding.chooseToConnectYourLedger();
-    await app.onboarding.selectPairMyNano();
     await app.common.selectAddDevice();
     await app.common.addDeviceViaBluetooth();
     await app.portfolio.waitForPortfolioPageToLoad();
@@ -33,7 +32,6 @@ describe("Onboarding", () => {
     await app.onboarding.chooseSetupLedger();
     await app.onboarding.chooseDevice("nanoX");
     await app.onboarding.goesThroughRestorePhrase();
-    await app.onboarding.selectPairMyNano();
     await app.common.selectAddDevice();
     await app.common.addDeviceViaBluetooth();
     await app.portfolio.waitForPortfolioPageToLoad();
@@ -52,7 +50,6 @@ describe("Onboarding", () => {
       await app.onboarding.checkDeviceNotCompatible();
     } else {
       await app.onboarding.goesThroughRestorePhrase();
-      await app.onboarding.selectPairMyNano();
       await app.common.addDeviceViaUSB("nanoSP");
       await app.portfolio.waitForPortfolioPageToLoad();
     }
@@ -64,7 +61,6 @@ describe("Onboarding", () => {
     await app.onboarding.chooseSetupLedger();
     await app.onboarding.chooseDevice("nanoX");
     await app.onboarding.goesThroughCreateWallet();
-    await app.onboarding.selectPairMyNano();
     await app.common.selectAddDevice();
     await app.common.addDeviceViaBluetooth();
     await app.portfolio.waitForPortfolioPageToLoad();

apps/ledger-live-mobile/src/screens/Onboarding/steps/pairNew.tsx

@@ -1,11 +1,11 @@
-import React, { useCallback, useMemo, memo } from "react";
+import React, { useCallback, memo } from "react";
 import { useNavigation, useRoute } from "@react-navigation/native";
+import { Flex, IconsLegacy } from "@ledgerhq/native-ui";
 import { useDispatch } from "react-redux";
 import { NavigatorName, ScreenName } from "~/const";
-import BaseStepperView, { PairNew, ConnectNano } from "./setupDevice/scenes";
+import { ConnectDevice } from "./setupDevice/scenes";
 import { TrackScreen } from "~/analytics";
 import SeedWarning from "../shared/SeedWarning";
-import Illustration from "~/images/illustration/Illustration";
 import {
   completeOnboarding,
   setHasBeenRedirectedToPostOnboarding,
@@ -20,28 +20,49 @@ import {
 } from "~/components/RootNavigator/types/helpers";
 import { OnboardingNavigatorParamList } from "~/components/RootNavigator/types/OnboardingNavigator";
 import { BaseOnboardingNavigatorParamList } from "~/components/RootNavigator/types/BaseOnboardingNavigator";
-import { Step } from "./setupDevice/scenes/BaseStepperView";
+import styled from "styled-components/native";
+import { SafeAreaView } from "react-native-safe-area-context";
+import Button from "~/components/PreventDoubleClickButton";
 
-const images = {
-  light: {
-    Intro: require("~/images/illustration/Light/_076.png"),
-  },
-  dark: {
-    Intro: require("~/images/illustration/Dark/_076.png"),
-  },
-};
-
-type Metadata = {
-  id: string;
-  illustration: JSX.Element | null;
-  drawer: null | { route: string; screen: string };
-};
+const StyledContainerView = styled(Flex)`
+  padding-left: 16px;
+  padding-right: 16px;
+  padding-top: 32px;
+  flex: 1;
+`;
 
 type NavigationProps = RootComposite<
   StackNavigatorProps<OnboardingNavigatorParamList, ScreenName.OnboardingPairNew>
 >;
 
-const scenes = [PairNew, ConnectNano] as Step[];
+const StyledSafeAreaView = styled(SafeAreaView)`
+  flex: 1;
+  background-color: ${p => p.theme.colors.background.main};
+`;
+
+const ImageHeader = () => {
+  const navigation = useNavigation<NavigationProps["navigation"]>();
+  return (
+    <Flex
+      flexDirection="row"
+      justifyContent="space-between"
+      alignItems="center"
+      width="100%"
+      height={48}
+    >
+      <Button
+        Icon={() => <IconsLegacy.ArrowLeftMedium size={24} />}
+        onPress={() => navigation.goBack()}
+      />
+      <Flex width={48}>
+        <Button
+          Icon={IconsLegacy.InfoMedium}
+          onPress={() => navigation.navigate(ScreenName.OnboardingBluetoothInformation)}
+        />
+      </Flex>
+    </Flex>
+  );
+};
 
 export default memo(function () {
   const navigation = useNavigation<NavigationProps["navigation"]>();
@@ -51,46 +72,12 @@ export default memo(function () {
   const { triggerJustFinishedOnboardingNewDevicePushNotificationModal } = useNotifications();
   const { resetCurrentStep } = useNavigationInterceptor();
 
-  const { deviceModelId, showSeedWarning, next, isProtectFlow, fromAccessExistingWallet } =
-    route.params;
-
-  const metadata: Array<Metadata> = useMemo(
-    () => [
-      {
-        id: PairNew.id,
-        illustration: (
-          <Illustration
-            size={150}
-            darkSource={images.dark.Intro}
-            lightSource={images.light.Intro}
-          />
-        ),
-        drawer: {
-          route: ScreenName.OnboardingBluetoothInformation,
-          screen: ScreenName.OnboardingBluetoothInformation,
-        },
-      },
-      {
-        id: ConnectNano.id,
-        illustration: null,
-        drawer: isProtectFlow
-          ? {
-              route: ScreenName.OnboardingProtectionConnectionInformation,
-              screen: ScreenName.OnboardingProtectionConnectionInformation,
-            }
-          : {
-              route: ScreenName.OnboardingBluetoothInformation,
-              screen: ScreenName.OnboardingBluetoothInformation,
-            },
-      },
-    ],
-    [isProtectFlow],
-  );
+  const { deviceModelId, showSeedWarning, isProtectFlow, fromAccessExistingWallet } = route.params;
 
   const onFinish = useCallback(() => {
-    if (next && deviceModelId) {
+    if (isProtectFlow && deviceModelId) {
       // only used for protect for now
-      navigation.navigate(next, {
+      navigation.navigate(ScreenName.OnboardingProtectFlow, {
         deviceModelId,
       });
       return;
@@ -117,7 +104,7 @@ export default memo(function () {
 
     triggerJustFinishedOnboardingNewDevicePushNotificationModal();
   }, [
-    next,
+    isProtectFlow,
     deviceModelId,
     dispatch,
     resetCurrentStep,
@@ -126,20 +113,14 @@ export default memo(function () {
     triggerJustFinishedOnboardingNewDevicePushNotificationModal,
   ]);
 
-  const nextPage = useCallback(() => {
-    onFinish();
-  }, [onFinish]);
-
   return (
-    <>
+    <StyledSafeAreaView>
       <TrackScreen category="Onboarding" name="PairNew" />
-      <BaseStepperView
-        onNext={nextPage}
-        steps={scenes}
-        metadata={metadata}
-        deviceModelId={deviceModelId}
-      />
+      <ImageHeader />
+      <StyledContainerView>
+        <ConnectDevice onSuccess={onFinish} />
+      </StyledContainerView>
       {showSeedWarning && deviceModelId ? <SeedWarning deviceModelId={deviceModelId} /> : null}
-    </>
+    </StyledSafeAreaView>
   );
 });

apps/ledger-live-mobile/src/screens/Onboarding/steps/setupDevice/scenes/ConnectNano.tsx → apps/ledger-live-mobile/src/screens/Onboarding/steps/setupDevice/scenes/ConnectDevice.tsx

@@ -6,7 +6,6 @@ import { Device } from "@ledgerhq/live-common/hw/actions/types";
 import { Result } from "@ledgerhq/live-common/hw/actions/manager";
 import DeviceActionModal from "~/components/DeviceActionModal";
 import SelectDevice2 from "~/components/SelectDevice2";
-import { TrackScreen } from "~/analytics";
 import Button from "~/components/PreventDoubleClickButton";
 
 import {
@@ -17,7 +16,7 @@ import {
 } from "~/actions/settings";
 import { useManagerDeviceAction } from "~/hooks/deviceActions";
 
-const ConnectNanoScene = ({ onNext }: { onNext: () => void }) => {
+const ConnectDevice = ({ onSuccess }: { onSuccess: () => void }) => {
   const action = useManagerDeviceAction();
   const dispatch = useDispatch();
   const [device, setDevice] = useState<Device | undefined>();
@@ -52,15 +51,14 @@ const ConnectNanoScene = ({ onNext }: { onNext: () => void }) => {
         setDevice(undefined);
         dispatch(setReadOnlyMode(false));
         dispatch(setHasOrderedNano(false));
-        onNext();
+        onSuccess();
       }
     },
-    [dispatch, onNext],
+    [dispatch, onSuccess],
   );
 
   return (
     <>
-      <TrackScreen category="Onboarding" name="PairNew" />
       <Flex flex={1}>
         <SelectDevice2
           onSelect={onSelectDevice}
@@ -77,32 +75,22 @@ const ConnectNanoScene = ({ onNext }: { onNext: () => void }) => {
         action={action}
         request={null}
       />
+      {__DEV__ ? (
+        <Button
+          mt={7}
+          type="color"
+          outline
+          onPress={() => {
+            dispatch(setReadOnlyMode(false));
+            dispatch(setHasOrderedNano(false));
+            onSuccess();
+          }}
+        >
+          (DEV) SKIP THIS STEP
+        </Button>
+      ) : null}
     </>
   );
 };
 
-ConnectNanoScene.id = "ConnectNanoScene";
-ConnectNanoScene.contentContainerStyle = { padding: 16, flex: 1 };
-
-const Next = ({ onNext }: { onNext: () => void }) => {
-  const dispatch = useDispatch();
-
-  return __DEV__ ? (
-    <Button
-      mt={7}
-      type="color"
-      outline
-      onPress={() => {
-        dispatch(setReadOnlyMode(false));
-        dispatch(setHasOrderedNano(false));
-        onNext();
-      }}
-    >
-      (DEV) SKIP THIS STEP
-    </Button>
-  ) : null;
-};
-
-ConnectNanoScene.Next = Next;
-
-export default ConnectNanoScene;
+export default ConnectDevice;

apps/ledger-live-mobile/src/screens/Onboarding/steps/setupDevice/scenes/index.tsx

@@ -6,8 +6,7 @@ export { default as RecoveryPhrase } from "./RecoveryPhrase";
 export { default as RecoveryPhraseInstructions } from "./RecoveryPhraseInstructions";
 export { default as RecoveryPhraseSetup } from "./RecoveryPhraseSetup";
 export { default as HideRecoveryPhrase } from "./HideRecoveryPhrase";
-export { default as PairNew } from "./PairNew";
-export { default as ConnectNano } from "./ConnectNano";
+export { default as ConnectDevice } from "./ConnectDevice";
 export { default as QuizzFinal } from "./QuizzFinal";
 export { default as SyncDesktop } from "./SyncDesktop";