feat(suite-native): FW install in onboarding flow

suite-native/firmware/src/screens/FirmwareUpdateInProgressScreen.tsx → suite-native/firmware/src/components/FirmwareInstallationScreenContent.tsx

@@ -17,12 +17,6 @@ import { ConfirmOnTrezorImage, setDeviceForceRememberedThunk } from '@suite-nati
 import { requestPrioritizedDeviceAccess } from '@suite-native/device-mutex';
 import { Translation } from '@suite-native/intl';
 import { SUITE_LITE_SUPPORT_URL, useOpenLink } from '@suite-native/link';
-import {
-    DeviceSettingsStackParamList,
-    DeviceStackRoutes,
-    Screen,
-    StackNavigationProps,
-} from '@suite-native/navigation';
 import TrezorConnect from '@trezor/connect';
 import { prepareNativeStyle, useNativeStyles } from '@trezor/styles';
 
@@ -34,11 +28,6 @@ import {
 import { useFirmware } from '../hooks/useFirmware';
 import { useFirmwareAnalytics } from '../hooks/useFirmwareAnalytics';
 
-type NavigationProp = StackNavigationProps<
-    DeviceSettingsStackParamList,
-    DeviceStackRoutes.FirmwareUpdateInProgress
->;
-
 const bottomButtonsContainerStyle = prepareNativeStyle<{ bottom: number }>((utils, { bottom }) => ({
     position: 'absolute',
     left: utils.spacings.sp16,
@@ -52,11 +41,21 @@ const cancelButtonStyle = prepareNativeStyle(utils => ({
     top: utils.spacings.sp8,
 }));
 
-export const FirmwareUpdateInProgressScreen = () => {
+type FirmwareInstallationScreenContentProps = {
+    onFirmwareInstallationSuccess: () => void;
+    onFirmwareInstallationFailure: () => void;
+};
+
+// This component is shared between `module-onboarding` and `module-device-settings`.
+// Avoid doing anything module specific in this file!!!
+export const FirmwareInstallationScreenContent = ({
+    onFirmwareInstallationSuccess,
+    onFirmwareInstallationFailure,
+}: FirmwareInstallationScreenContentProps) => {
     const dispatch = useDispatch();
     const { applyStyle } = useNativeStyles();
-    const navigation = useNavigation<NavigationProp>();
-    const [isMayBeStuckedBottomSheetOpened, setIsMayBeStuckedBottomSheetOpened] =
+    const navigation = useNavigation();
+    const [isMayBeStuckBottomSheetOpened, setIsMayBeStuckBottomSheetOpened] =
         useState<boolean>(false);
     const { bottom: bottomSafeAreaInset } = useSafeAreaInsets();
     const {
@@ -93,27 +92,21 @@ export const FirmwareUpdateInProgressScreen = () => {
         };
     }, [dispatch, resetReducer]);
 
-    const handleFirmwareUpdateFinished = useCallback(() => {
-        requestPrioritizedDeviceAccess({
+    const handleFirmwareUpdateFinished = useCallback(async () => {
+        await requestPrioritizedDeviceAccess({
             deviceCallback: () => dispatch(authorizeDeviceThunk()),
         });
 
-        const initialRoute = navigation.getState().routes.at(0)?.name;
-        if (initialRoute) {
-            navigation.navigate(initialRoute);
-        } else {
-            // This cause should not happen, but just to be safe
-            navigation.popToTop();
-        }
-    }, [dispatch, navigation]);
+        setIsFirmwareInstallationRunning(false);
+        onFirmwareInstallationSuccess();
+    }, [dispatch, onFirmwareInstallationSuccess, setIsFirmwareInstallationRunning]);
 
     const handleCancel = useCallback(() => {
         navigation.goBack();
     }, [navigation]);
 
     const startFirmwareUpdate = useCallback(async () => {
         setIsFirmwareInstallationRunning(true);
-
         const result = await firmwareUpdate();
 
         if (!result) {
@@ -128,7 +121,7 @@ export const FirmwareUpdateInProgressScreen = () => {
                 result.payload?.code === 'Failure_ActionCancelled'
             ) {
                 handleAnalyticsReportCancelled();
-                navigation.navigate(DeviceStackRoutes.FirmwareUpdate);
+                onFirmwareInstallationFailure();
 
                 return;
             }
@@ -139,17 +132,9 @@ export const FirmwareUpdateInProgressScreen = () => {
         }
 
         handleAnalyticsReportFinished();
-
-        // wait few seconds to animation to finish and let user orientate little bit
-        setTimeout(() => {
-            // setting this to false will trigger standart device connection flow
-            setIsFirmwareInstallationRunning(false);
-            handleFirmwareUpdateFinished();
-        }, 5000);
     }, [
         setIsFirmwareInstallationRunning,
-        navigation,
-        handleFirmwareUpdateFinished,
+        onFirmwareInstallationFailure,
         firmwareUpdate,
         handleAnalyticsReportFinished,
         handleAnalyticsReportCancelled,
@@ -163,12 +148,12 @@ export const FirmwareUpdateInProgressScreen = () => {
         startFirmwareUpdate();
     }, [startFirmwareUpdate, resetReducer, handleAnalyticsReportStarted]);
 
-    const openMayBeStuckedBottomSheet = useCallback(() => {
-        setIsMayBeStuckedBottomSheetOpened(true);
+    const openMayBeStuckBottomSheet = useCallback(() => {
+        setIsMayBeStuckBottomSheetOpened(true);
     }, []);
 
-    const closeMayBeStuckedBottomSheet = useCallback(() => {
-        setIsMayBeStuckedBottomSheetOpened(false);
+    const closeMayBeStuckBottomSheet = useCallback(() => {
+        setIsMayBeStuckBottomSheetOpened(false);
     }, []);
 
     const handleContactSupport = useCallback(() => {
@@ -186,6 +171,7 @@ export const FirmwareUpdateInProgressScreen = () => {
     }, [startFirmwareUpdate, handleAnalyticsReportStarted]);
 
     const isError = status === 'error';
+    const isDone = status === 'done';
 
     const indicatorStatus: UpdateProgressIndicatorStatus = useMemo(() => {
         const isStarting = (status === 'started' && operation === null) || status === 'initial';
@@ -204,7 +190,7 @@ export const FirmwareUpdateInProgressScreen = () => {
     const bottomButtonOffset = showConfirmOnDevice ? 180 : bottomSafeAreaInset + 12;
 
     return (
-        <Screen>
+        <>
             {isError && (
                 <Animated.View entering={FadeIn} style={applyStyle(cancelButtonStyle)}>
                     <IconButton
@@ -256,11 +242,25 @@ export const FirmwareUpdateInProgressScreen = () => {
                         bottom: bottomButtonOffset,
                     })}
                 >
-                    <Button onPress={openMayBeStuckedBottomSheet} colorScheme="tertiaryElevation0">
+                    <Button onPress={openMayBeStuckBottomSheet} colorScheme="tertiaryElevation0">
                         <Translation id="moduleDeviceSettings.firmware.firmwareUpdateProgress.stuckButton" />
                     </Button>
                 </Animated.View>
             )}
+            {isDone && (
+                <Animated.View
+                    entering={FadeInDown}
+                    exiting={FadeOutDown}
+                    layout={LinearTransition}
+                    style={applyStyle(bottomButtonsContainerStyle, {
+                        bottom: bottomButtonOffset,
+                    })}
+                >
+                    <Button onPress={handleFirmwareUpdateFinished}>
+                        <Translation id="generic.buttons.continue" />
+                    </Button>
+                </Animated.View>
+            )}
             {showConfirmOnDevice && (
                 <ConfirmOnTrezorImage
                     bottomSheetText={
@@ -269,10 +269,10 @@ export const FirmwareUpdateInProgressScreen = () => {
                 />
             )}
             <MayBeStuckedBottomSheet
-                isOpened={isMayBeStuckedBottomSheetOpened}
-                onClose={closeMayBeStuckedBottomSheet}
+                isOpened={isMayBeStuckBottomSheetOpened}
+                onClose={closeMayBeStuckBottomSheet}
                 onAnalyticsReportStucked={handleAnalyticsReportStucked}
             />
-        </Screen>
+        </>
     );
 };

suite-native/firmware/src/index.ts

@@ -1,4 +1,4 @@
 export * from './nativeFirmwareSlice';
 export * from './components/UpdateProgressIndicatorDemo';
-export * from './screens/FirmwareUpdateInProgressScreen';
+export * from './components/FirmwareInstallationScreenContent';
 export * from './hooks/useIsFirmwareUpdateFeatureEnabled';

suite-native/module-device-settings/src/navigation/DeviceSettingsStackNavigator.tsx

@@ -1,6 +1,5 @@
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 
-import { FirmwareUpdateInProgressScreen } from '@suite-native/firmware';
 import {
     DeviceSettingsStackParamList,
     DeviceStackRoutes,
@@ -11,6 +10,7 @@ import { DeviceAuthenticityStackNavigator } from './DeviceAuthenticityStackNavig
 import { DevicePinProtectionStackNavigator } from './DevicePinProtectionStackNavigator';
 import { ContinueOnTrezorScreen } from '../screens/ContinueOnTrezorScreen';
 import { DeviceSettingsModalScreen } from '../screens/DeviceSettingsModalScreen';
+import { FirmwareInstallationScreen } from '../screens/FirmwareInstallationScreen';
 import { FirmwareUpdateScreen } from '../screens/FirmwareUpdateScreen/FirmwareUpdateScreen';
 const DeviceSettingsStack = createNativeStackNavigator<DeviceSettingsStackParamList>();
 
@@ -40,8 +40,8 @@ export const DeviceSettingsStackNavigator = () => (
             component={ContinueOnTrezorScreen}
         />
         <DeviceSettingsStack.Screen
-            name={DeviceStackRoutes.FirmwareUpdateInProgress}
-            component={FirmwareUpdateInProgressScreen}
+            name={DeviceStackRoutes.FirmwareInstallation}
+            component={FirmwareInstallationScreen}
         />
     </DeviceSettingsStack.Navigator>
 );

suite-native/module-device-settings/src/screens/FirmwareInstallationScreen.tsx

@@ -0,0 +1,41 @@
+import { useNavigation } from '@react-navigation/native';
+
+import { FirmwareInstallationScreenContent } from '@suite-native/firmware';
+import {
+    DeviceSettingsStackParamList,
+    DeviceStackRoutes,
+    Screen,
+    StackNavigationProps,
+} from '@suite-native/navigation';
+
+type NavigationProp = StackNavigationProps<
+    DeviceSettingsStackParamList,
+    DeviceStackRoutes.FirmwareInstallation
+>;
+
+export const FirmwareInstallationScreen = () => {
+    const navigation = useNavigation<NavigationProp>();
+
+    const handleFirmwareInstallationSuccess = () => {
+        const initialRoute = navigation.getState().routes.at(0)?.name;
+        if (initialRoute) {
+            navigation.navigate(initialRoute);
+        } else {
+            // This cause should not happen, but just to be safe
+            navigation.popToTop();
+        }
+    };
+
+    const handleFirmwareInstallationFailure = () => {
+        navigation.navigate(DeviceStackRoutes.FirmwareUpdate);
+    };
+
+    return (
+        <Screen>
+            <FirmwareInstallationScreenContent
+                onFirmwareInstallationSuccess={handleFirmwareInstallationSuccess}
+                onFirmwareInstallationFailure={handleFirmwareInstallationFailure}
+            />
+        </Screen>
+    );
+};

suite-native/module-device-settings/src/screens/FirmwareUpdateScreen/FirmwareUpdateScreen.tsx

@@ -55,7 +55,7 @@ export const FirmwareUpdateScreen = () => {
                 'moduleDeviceSettings.firmware.seedBottomSheet.continueButton',
             ),
             onPressPrimaryButton: () => {
-                navigation.navigate(DeviceStackRoutes.FirmwareUpdateInProgress);
+                navigation.navigate(DeviceStackRoutes.FirmwareInstallation);
             },
             secondaryButtonTitle: translate(
                 'moduleDeviceSettings.firmware.seedBottomSheet.closeButton',

suite-native/module-onboarding/src/navigation/OnboardingStackNavigator.tsx

@@ -8,6 +8,7 @@ import {
 
 import { AnalyticsConsentScreen } from '../screens/AnalyticsConsentScreen';
 import { BiometricsScreen } from '../screens/BiometricsScreen';
+import { FirmwareInstallationScreen } from '../screens/FirmwareInstallationScreen';
 import { SecurityCheckScreen } from '../screens/SecurityCheckScreen';
 import { SuspiciousDeviceScreen } from '../screens/SuspiciousDeviceScreen';
 import { UninitializedDeviceLandingScreen } from '../screens/UninitializedDeviceLandingScreen';
@@ -41,5 +42,9 @@ export const OnboardingStackNavigator = () => (
             name={OnboardingStackRoutes.SecurityCheck}
             component={SecurityCheckScreen}
         />
+        <OnboardingStack.Screen
+            name={OnboardingStackRoutes.FirmwareInstallationScreen}
+            component={FirmwareInstallationScreen}
+        />
     </OnboardingStack.Navigator>
 );

suite-native/module-onboarding/src/screens/FirmwareInstallationScreen.tsx

@@ -0,0 +1,23 @@
+import { FirmwareInstallationScreenContent } from '@suite-native/firmware';
+import { Screen } from '@suite-native/navigation';
+import { useToast } from '@suite-native/toasts';
+
+export const FirmwareInstallationScreen = () => {
+    const { showToast } = useToast();
+    const handleFirmwareInstallationSuccess = () => {
+        showToast({
+            variant: 'warning',
+            message: 'Firmware installation successful! TODO: redirect to the device AC screen.',
+        });
+    };
+
+    return (
+        <Screen>
+            <FirmwareInstallationScreenContent
+                onFirmwareInstallationSuccess={handleFirmwareInstallationSuccess}
+                // TODO: will be implemented as part of follow up issue: https://github.com/trezor/trezor-suite/issues/16291
+                onFirmwareInstallationFailure={() => null}
+            />
+        </Screen>
+    );
+};

suite-native/module-onboarding/src/screens/SecurityCheckScreen.tsx

@@ -4,8 +4,14 @@ import { TitleHeader, VStack } from '@suite-native/atoms';
 import { IconName } from '@suite-native/icons';
 import { Translation } from '@suite-native/intl';
 import { Link } from '@suite-native/link';
-import { DeviceSuspicionCause, Screen, ScreenHeader } from '@suite-native/navigation';
-import { useToast } from '@suite-native/toasts';
+import {
+    DeviceSuspicionCause,
+    OnboardingStackParamList,
+    OnboardingStackRoutes,
+    Screen,
+    ScreenHeader,
+    StackProps,
+} from '@suite-native/navigation';
 import { TREZOR_RESELLERS_URL } from '@trezor/urls';
 
 import { SecurityCheckStepCard } from '../components/SecurityCheckStepCard';
@@ -56,8 +62,9 @@ const stepToContentMap = {
     }
 >;
 
-export const SecurityCheckScreen = () => {
-    const { showToast } = useToast();
+export const SecurityCheckScreen = ({
+    navigation,
+}: StackProps<OnboardingStackParamList, OnboardingStackRoutes.SecurityCheck>) => {
     const [currentStep, setCurrentStep] = useState<number>(1);
 
     const handlePressConfirmButton = () => {
@@ -66,8 +73,8 @@ export const SecurityCheckScreen = () => {
 
             return;
         }
-        // TODO: navigate to Firmware install
-        showToast({ variant: 'warning', message: 'TODO: implement next screen' });
+
+        navigation.navigate(OnboardingStackRoutes.FirmwareInstallationScreen);
     };
 
     return (

suite-native/navigation/src/navigators.ts

@@ -123,6 +123,7 @@ export type OnboardingStackParamList = {
         suspicionCause: DeviceSuspicionCause;
     };
     [OnboardingStackRoutes.SecurityCheck]: undefined;
+    [OnboardingStackRoutes.FirmwareInstallationScreen]: undefined;
 };
 
 export type AccountsImportStackParamList = {
@@ -167,7 +168,7 @@ export type DeviceSettingsStackParamList = {
     [DeviceStackRoutes.DevicePinProtection]: undefined;
     [DeviceStackRoutes.DeviceAuthenticity]: undefined;
     [DeviceStackRoutes.FirmwareUpdate]: undefined;
-    [DeviceStackRoutes.FirmwareUpdateInProgress]: undefined;
+    [DeviceStackRoutes.FirmwareInstallation]: undefined;
     [DeviceStackRoutes.ContinueOnTrezor]: undefined;
 };
 

suite-native/navigation/src/routes.ts

@@ -33,6 +33,7 @@ export enum OnboardingStackRoutes {
     UninitializedDeviceLanding = 'UninitializedDeviceLanding',
     SuspiciousDevice = 'SuspiciousDevice',
     SecurityCheck = 'SecurityCheck',
+    FirmwareInstallationScreen = 'FirmwareInstallationScreen',
 }
 
 export enum AccountsImportStackRoutes {
@@ -47,7 +48,7 @@ export enum DeviceStackRoutes {
     DevicePinProtection = 'DevicePinProtection',
     DeviceAuthenticity = 'DeviceAuthenticity',
     FirmwareUpdate = 'FirmwareUpdate',
-    FirmwareUpdateInProgress = 'FirmwareUpdateInProgress',
+    FirmwareInstallation = 'FirmwareInstallation',
     ContinueOnTrezor = 'ContinueOnTrezor',
 }