fix: 🔁 device selection after aborted flow (#7778)

* Fix device selection after aborted flow

* Update change log

* Apply the fix to the account creation flow

* Keep the `onClose` handler declaration

---------

Co-authored-by: Theophile Sandoz <Theophile Sandoz>

.changeset/lemon-starfishes-do.md

@@ -0,0 +1,5 @@
+---
+"live-mobile": patch
+---
+
+Fix device selection after LedgerSync aborted flow

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

@@ -1,7 +1,7 @@
 import { SyncSkipUnderPriority } from "@ledgerhq/live-common/bridge/react/index";
 import { Action, Device } from "@ledgerhq/live-common/hw/actions/types";
 import { Alert, Flex } from "@ledgerhq/native-ui";
-import React, { useCallback, useState } from "react";
+import React, { useCallback, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import styled from "styled-components/native";
 import { PartialNullable } from "~/types/helpers";
@@ -23,6 +23,7 @@ type Props<Req, Stt, Res> = {
  renderOnResult?: (_: Res) => JSX.Element | null;
  onSelectDeviceLink?: () => void;
  analyticsPropertyFlow?: string;
+ registerDeviceSelection?: (onDeviceUpdated: () => void) => void;
 };
 
 export default function DeviceActionModal<Req, Stt, Res>({
@@ -36,6 +37,7 @@ export default function DeviceActionModal<Req, Stt, Res>({
  onModalHide,
  onSelectDeviceLink,
  analyticsPropertyFlow,
+ registerDeviceSelection,
 }: Props<Req, Stt, Res>) {
  const { t } = useTranslation();
  const showAlert = !device?.wired;
@@ -54,6 +56,10 @@ export default function DeviceActionModal<Req, Stt, Res>({
  }
  }, [onClose, result]);
 
+ useEffect(() => {
+ registerDeviceSelection?.(() => setResult(null));
+ }, [registerDeviceSelection]);
+
  return (
  <QueuedDrawer
  isRequestingToBeOpened={result ? false : !!device}

apps/ledger-live-mobile/src/hooks/deviceActions.ts

@@ -1,4 +1,4 @@
-import { useMemo } from "react";
+import { useCallback, useMemo, useRef, useState } from "react";
 import { createAction as appCreateAction } from "@ledgerhq/live-common/hw/actions/app";
 import { createAction as transactionCreateAction } from "@ledgerhq/live-common/hw/actions/transaction";
 import { createAction as startExchangeCreateAction } from "@ledgerhq/live-common/hw/actions/startExchange";
@@ -11,6 +11,7 @@ import { createAction as staxFetchImageCreateAction } from "@ledgerhq/live-commo
 import { createAction as installLanguageCreateAction } from "@ledgerhq/live-common/hw/actions/installLanguage";
 import { createAction as staxRemoveImageCreateAction } from "@ledgerhq/live-common/hw/actions/customLockScreenRemove";
 import { createAction as renameDeviceCreateAction } from "@ledgerhq/live-common/hw/actions/renameDevice";
+import type { Device } from "@ledgerhq/live-common/hw/actions/types";
 import renameDevice from "@ledgerhq/live-common/hw/renameDevice";
 import customLockScreenLoad from "@ledgerhq/live-common/hw/customLockScreenLoad";
 import installLanguage from "@ledgerhq/live-common/hw/installLanguage";
@@ -124,3 +125,18 @@ export function useRenameDeviceAction() {
  [mock],
  );
 }
+
+export function useSelectDevice() {
+ const [device, setDevice] = useState<Device | null | undefined>(null);
+
+ const onDeviceUpdated = useRef<() => void>();
+ const registerDeviceSelection = useCallback((handler: () => void) => {
+ onDeviceUpdated.current = handler;
+ }, []);
+ const selectDevice = useCallback((device: Device | null | undefined) => {
+ setDevice(device);
+ onDeviceUpdated.current?.();
+ }, []);
+
+ return { device, selectDevice, registerDeviceSelection };
+}

apps/ledger-live-mobile/src/newArch/features/WalletSync/screens/DeviceSelection/index.tsx

@@ -13,7 +13,7 @@ import {
  ReactNavigationHeaderOptions,
  StackNavigatorProps,
 } from "~/components/RootNavigator/types/helpers";
-import { useAppDeviceAction } from "~/hooks/deviceActions";
+import { useAppDeviceAction, useSelectDevice } from "~/hooks/deviceActions";
 import { AppResult } from "@ledgerhq/live-common/hw/actions/app";
 import { WalletSyncNavigatorStackParamList } from "~/components/RootNavigator/types/WalletSyncNavigator";
 import { TRUSTCHAIN_APP_NAME } from "@ledgerhq/hw-trustchain";
@@ -47,16 +47,12 @@ const WalletSyncActivationDeviceSelection: React.FC<ChooseDeviceProps> = ({
 }) => {
  const isFocused = useIsFocused();
  const action = useAppDeviceAction();
- const [device, setDevice] = useState<Device | null>();
+ const { device, selectDevice, registerDeviceSelection } = useSelectDevice();
  const [isHeaderOverridden, setIsHeaderOverridden] = useState<boolean>(false);
 
  const navigation = useNavigation<NavigationProps["navigation"]>();
 
- const onSelectDevice = useCallback((device: Device) => {
- setDevice(device);
- }, []);
-
- const onClose = () => setDevice(null);
+ const onClose = () => selectDevice(null);
 
  const onResult = useCallback(
  (payload: AppResult) => {
@@ -71,7 +67,7 @@ const WalletSyncActivationDeviceSelection: React.FC<ChooseDeviceProps> = ({
  // and avoids a duplicated error drawers/messages.
  // The only drawback: the user has to select again their device once the bluetooth requirements are respected.
  if (error instanceof BluetoothRequired) {
- setDevice(undefined);
+ selectDevice(undefined);
  }
  };
 
@@ -116,7 +112,7 @@ const WalletSyncActivationDeviceSelection: React.FC<ChooseDeviceProps> = ({
  ) : null}
  <Flex flex={1} mb={8}>
  <SelectDevice2
- onSelect={onSelectDevice}
+ onSelect={selectDevice}
  stopBleScanning={!!device || !isFocused}
  requestToSetHeaderOptions={requestToSetHeaderOptions}
  />
@@ -128,6 +124,7 @@ const WalletSyncActivationDeviceSelection: React.FC<ChooseDeviceProps> = ({
  action={action}
  request={request}
  onError={onError}
+ registerDeviceSelection={registerDeviceSelection}
  />
  </SafeAreaView>
  );

apps/ledger-live-mobile/src/screens/AddAccounts/02-SelectDevice.tsx

@@ -1,6 +1,5 @@
-import React, { useCallback, useEffect, useState } from "react";
+import React, { useCallback, useEffect } from "react";
 import { StyleSheet, SafeAreaView } from "react-native";
-import type { Device } from "@ledgerhq/live-common/hw/actions/types";
 import { useIsFocused, useTheme } from "@react-navigation/native";
 import { isTokenCurrency } from "@ledgerhq/live-common/currencies/index";
 import { Flex } from "@ledgerhq/native-ui";
@@ -16,7 +15,7 @@ import type { AddAccountsNavigatorParamList } from "~/components/RootNavigator/t
 import SkipSelectDevice from "../SkipSelectDevice";
 import AddAccountsHeaderRightClose from "./AddAccountsHeaderRightClose";
 import { NavigationHeaderBackButton } from "~/components/NavigationHeaderBackButton";
-import { useAppDeviceAction } from "~/hooks/deviceActions";
+import { useAppDeviceAction, useSelectDevice } from "~/hooks/deviceActions";
 
 type Props = StackNavigatorProps<AddAccountsNavigatorParamList, ScreenName.AddAccountsSelectDevice>;
 
@@ -32,17 +31,17 @@ export default function AddAccountsSelectDevice({ navigation, route }: Props) {
  const action = useAppDeviceAction();
  const { currency, analyticsPropertyFlow } = route.params;
  const { colors } = useTheme();
- const [device, setDevice] = useState<Device | null | undefined>(null);
+ const { device, selectDevice, registerDeviceSelection } = useSelectDevice();
  const isFocused = useIsFocused();
 
  const onClose = useCallback(() => {
- setDevice(null);
- }, []);
+ selectDevice(null);
+ }, [selectDevice]);
 
  const onResult = useCallback(
  // @ts-expect-error should be AppResult but navigation.navigate does not agree
  meta => {
- setDevice(null);
+ selectDevice(null);
  const { inline } = route.params;
  const arg = { ...route.params, ...meta };
 
@@ -52,7 +51,7 @@ export default function AddAccountsSelectDevice({ navigation, route }: Props) {
  navigation.navigate(ScreenName.AddAccountsAccounts, arg);
  }
  },
- [navigation, route],
+ [selectDevice, navigation, route],
  );
 
  useEffect(() => {
@@ -89,10 +88,10 @@ export default function AddAccountsSelectDevice({ navigation, route }: Props) {
  },
  ]}
  >
- <SkipSelectDevice route={route} onResult={setDevice} />
+ <SkipSelectDevice route={route} onResult={selectDevice} />
  <Flex px={16} py={8} flex={1}>
  <SelectDevice2
- onSelect={setDevice}
+ onSelect={selectDevice}
  stopBleScanning={!!device || !isFocused}
  requestToSetHeaderOptions={requestToSetHeaderOptions}
  />
@@ -105,8 +104,9 @@ export default function AddAccountsSelectDevice({ navigation, route }: Props) {
  request={{
  currency: currency && isTokenCurrency(currency) ? currency.parentCurrency : currency,
  }}
- onSelectDeviceLink={() => setDevice(null)}
+ onSelectDeviceLink={() => selectDevice(null)}
  analyticsPropertyFlow={analyticsPropertyFlow || "add account"}
+ registerDeviceSelection={registerDeviceSelection}
  />
  </SafeAreaView>
  );