Bugfix/live 9554 Fix design of bluetooth pairing error screen (#5019)

* fix(ble): fix retry button size

* fix(ble): add link to help for ble pairing error screen

* fix(ble): improve layout for pairing error screen during onboarding flow

* fix(ble): add changeset

* fix(ble): change wording

* fix(ble): fix layout for ble pairing errors

.changeset/sixty-pets-promise.md

@@ -0,0 +1,5 @@
+---
+"live-mobile": patch
+---
+
+Fix design of bluetooth pairing error screen

apps/ledger-live-mobile/src/components/BleDevicePairingFlow/BleDevicePairing.tsx

@@ -22,6 +22,7 @@ import { TrackScreen } from "../../analytics";
 import GenericErrorView from "../GenericErrorView";
 import { GenericInformationBody } from "../GenericInformationBody";
 import { urls } from "../../config/urls";
+import ExternalLink from "../ExternalLink";
 
 export type BleDevicePairingProps = {
   onPaired: (device: Device) => void;
@@ -144,14 +145,19 @@ const BleDevicePairing = ({ deviceToPair, onPaired, onRetry }: BleDevicePairingP
     }
 
     content = (
-      <Flex flex={1}>
+      <Flex flex={1} mb={6}>
         <TrackScreen category="BT failed to pair" />
         <Flex flex={1} alignItems="center" justifyContent="center">
           <GenericInformationBody title={title} description={subtitle} />
         </Flex>
-        <Button type="main" onPress={onRetry} mb={8}>
+        <Button type="main" size="large" onPress={onRetry} mb={7}>
           {t("blePairingFlow.pairing.error.retryCta")}
         </Button>
+        <ExternalLink
+          type="main"
+          text={t("blePairingFlow.pairing.error.howToFixPairingIssue")}
+          onPress={onOpenHelp}
+        />
       </Flex>
     );
   } else {

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

@@ -58,6 +58,7 @@ type Props = {
   isChoiceDrawerDisplayedOnAddDevice?: boolean;
   withMyLedgerTracking?: boolean;
   filterByDeviceModelId?: DeviceModelId;
+  paddingBottom?: number;
 };
 
 export default function SelectDevice({
@@ -69,6 +70,7 @@ export default function SelectDevice({
   hasPostOnboardingEntryPointCard,
   withMyLedgerTracking,
   filterByDeviceModelId,
+  paddingBottom,
 }: Props) {
   const [USBDevice, setUSBDevice] = useState<Device | undefined>();
   const [ProxyDevice, setProxyDevice] = useState<Device | undefined>();
@@ -307,7 +309,7 @@ export default function SelectDevice({
   );
 
   return (
-    <>
+    <Flex flex={1} pb={paddingBottom && !isPairingDevices ? paddingBottom : 0}>
       {withMyLedgerTracking ? <TrackScreen {...trackScreenProps} /> : null}
       <RequiresBluetoothDrawer
         isOpenedOnIssue={isBleRequired}
@@ -486,6 +488,6 @@ export default function SelectDevice({
           </QueuedDrawer>
         </Flex>
       )}
-    </>
+    </Flex>
   );
 }

apps/ledger-live-mobile/src/locales/en/common.json

@@ -1902,14 +1902,15 @@
       "error": {
         "generic": {
           "title": "Pairing unsuccessful",
-          "subtitle": "Looks like something went wrong!\nCheck that your Bluetooth is switched on and your {{productName}} is nearby."
+          "subtitle": "Make sure your {{productName}} is close to\nyour mobile phone and try again."
         },
         "lockedDevice": {
           "title": "Your device is locked",
           "subtitle": "Unlock your {{ productName }} and try again."
         },
-        "retryCta": "Retry",
-        "openSettingsCta": "Go to Bluetooth settings"
+        "retryCta": "Retry pairing",
+        "openSettingsCta": "Go to Bluetooth settings",
+        "howToFixPairingIssue": "How to fix pairing issues"
       }
     }
   },

apps/ledger-live-mobile/src/screens/Manager/index.tsx

@@ -154,14 +154,15 @@ const ChooseDevice: React.FC<ChooseDeviceProps> = ({ isFocused }) => {
       ) : null}
 
       {newDeviceSelectionFeatureFlag?.enabled ? (
-        <Flex flex={1} px={16} pb={insets.bottom + TAB_BAR_SAFE_HEIGHT}>
+        <Flex flex={1} px={16}>
           <SelectDevice2
             onSelect={onSelectDevice}
             stopBleScanning={!!device}
             displayServicesWidget
             requestToSetHeaderOptions={requestToSetHeaderOptions}
             withMyLedgerTracking
             hasPostOnboardingEntryPointCard
+            paddingBottom={insets.bottom + TAB_BAR_SAFE_HEIGHT}
           />
         </Flex>
       ) : (

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

@@ -1,15 +1,8 @@
 import React, { useCallback } from "react";
-import { StyleSheet } from "react-native";
+import { ScrollView, StyleProp, StyleSheet, ViewStyle } from "react-native";
 import { NavigationProp, useNavigation } from "@react-navigation/native";
 import { RenderTransitionProps } from "@ledgerhq/native-ui/components/Navigation/FlowStepper/index";
-import {
-  Flex,
-  FlowStepper,
-  IconsLegacy,
-  Transitions,
-  SlideIndicator,
-  ScrollListContainer,
-} from "@ledgerhq/native-ui";
+import { Flex, FlowStepper, IconsLegacy, Transitions, SlideIndicator } from "@ledgerhq/native-ui";
 
 import { SafeAreaView } from "react-native-safe-area-context";
 import styled from "styled-components/native";
@@ -107,6 +100,7 @@ export type Step = {
   (props: StepProp): JSX.Element;
   id: string;
   Next: (props: StepProp) => JSX.Element;
+  contentContainerStyle?: StyleProp<ViewStyle>;
 };
 
 export function BaseStepperView({
@@ -150,12 +144,16 @@ export function BaseStepperView({
       >
         {steps.map((Children, i) => (
           <Scene key={Children.id + i}>
-            <ScrollListContainer contentContainerStyle={{ padding: 16 }}>
+            <ScrollView
+              contentContainerStyle={
+                Children?.contentContainerStyle ? Children.contentContainerStyle : { padding: 16 }
+              }
+            >
               <Flex mb={30} mx={8} justifyContent="center" alignItems="flex-start">
                 {metadata[i]?.illustration}
               </Flex>
               <Children onNext={nextPage} deviceModelId={deviceModelId} {...params} />
-            </ScrollListContainer>
+            </ScrollView>
             {Children.Next ? (
               <Flex p={6}>
                 <Children.Next onNext={nextPage} deviceModelId={deviceModelId} />

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

@@ -111,6 +111,7 @@ const ConnectNanoScene = ({
 };
 
 ConnectNanoScene.id = "ConnectNanoScene";
+ConnectNanoScene.contentContainerStyle = { padding: 16, flex: 1 };
 
 const Next = ({ onNext }: { onNext: () => void }) => {
   const dispatch = useDispatch();