From 8649ebf286d15c2cd97426ae03009d4ef2d28f4e Mon Sep 17 00:00:00 2001 From: Theophile Sandoz Date: Tue, 10 Sep 2024 12:11:22 +0200 Subject: [PATCH] =?UTF-8?q?fix:=20=F0=9F=94=81=20device=20selection=20afte?= =?UTF-8?q?r=20aborted=20flow=20(#7778)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 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 --- .changeset/lemon-starfishes-do.md | 5 +++++ .../src/components/DeviceActionModal.tsx | 8 ++++++- .../src/hooks/deviceActions.ts | 18 ++++++++++++++- .../screens/DeviceSelection/index.tsx | 15 +++++-------- .../screens/AddAccounts/02-SelectDevice.tsx | 22 +++++++++---------- 5 files changed, 46 insertions(+), 22 deletions(-) create mode 100644 .changeset/lemon-starfishes-do.md diff --git a/.changeset/lemon-starfishes-do.md b/.changeset/lemon-starfishes-do.md new file mode 100644 index 000000000000..028a99f4a735 --- /dev/null +++ b/.changeset/lemon-starfishes-do.md @@ -0,0 +1,5 @@ +--- +"live-mobile": patch +--- + +Fix device selection after LedgerSync aborted flow diff --git a/apps/ledger-live-mobile/src/components/DeviceActionModal.tsx b/apps/ledger-live-mobile/src/components/DeviceActionModal.tsx index bb60ccfcfc33..b5571b9da152 100644 --- a/apps/ledger-live-mobile/src/components/DeviceActionModal.tsx +++ b/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 = { renderOnResult?: (_: Res) => JSX.Element | null; onSelectDeviceLink?: () => void; analyticsPropertyFlow?: string; + registerDeviceSelection?: (onDeviceUpdated: () => void) => void; }; export default function DeviceActionModal({ @@ -36,6 +37,7 @@ export default function DeviceActionModal({ onModalHide, onSelectDeviceLink, analyticsPropertyFlow, + registerDeviceSelection, }: Props) { const { t } = useTranslation(); const showAlert = !device?.wired; @@ -54,6 +56,10 @@ export default function DeviceActionModal({ } }, [onClose, result]); + useEffect(() => { + registerDeviceSelection?.(() => setResult(null)); + }, [registerDeviceSelection]); + return ( (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 }; +} diff --git a/apps/ledger-live-mobile/src/newArch/features/WalletSync/screens/DeviceSelection/index.tsx b/apps/ledger-live-mobile/src/newArch/features/WalletSync/screens/DeviceSelection/index.tsx index 40f4c457532d..1658b1e29521 100644 --- a/apps/ledger-live-mobile/src/newArch/features/WalletSync/screens/DeviceSelection/index.tsx +++ b/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 = ({ }) => { const isFocused = useIsFocused(); const action = useAppDeviceAction(); - const [device, setDevice] = useState(); + const { device, selectDevice, registerDeviceSelection } = useSelectDevice(); const [isHeaderOverridden, setIsHeaderOverridden] = useState(false); const navigation = useNavigation(); - 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 = ({ // 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 = ({ ) : null} @@ -128,6 +124,7 @@ const WalletSyncActivationDeviceSelection: React.FC = ({ action={action} request={request} onError={onError} + registerDeviceSelection={registerDeviceSelection} /> ); diff --git a/apps/ledger-live-mobile/src/screens/AddAccounts/02-SelectDevice.tsx b/apps/ledger-live-mobile/src/screens/AddAccounts/02-SelectDevice.tsx index a4f73ebd5436..65a4d3798ddf 100644 --- a/apps/ledger-live-mobile/src/screens/AddAccounts/02-SelectDevice.tsx +++ b/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; @@ -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(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) { }, ]} > - + @@ -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} /> );