feat(suite-native): uninitialized device landing screen

suite-native/app/src/navigation/RootStackNavigator.tsx

@@ -41,24 +41,15 @@ export const RootStackNavigator = () => {
             return RootStackRoutes.AppTabs;
         }
 
-        return RootStackRoutes.Onboarding;
+        return RootStackRoutes.OnboardingStack;
     };
 
     return (
         <RootStack.Navigator
             initialRouteName={getInitialRouteName()}
             screenOptions={stackNavigationOptionsConfig}
         >
-            <RootStack.Screen
-                name={RootStackRoutes.Onboarding}
-                component={OnboardingStackNavigator}
-            />
             <RootStack.Screen name={RootStackRoutes.AppTabs} component={AppTabNavigator} />
-            <RootStack.Screen
-                name={RootStackRoutes.AccountsImport}
-                component={AccountsImportStackNavigator}
-                options={{ animation: 'slide_from_bottom' }}
-            />
             <RootStack.Screen
                 options={{ title: RootStackRoutes.AccountSettings }}
                 name={RootStackRoutes.AccountSettings}
@@ -83,41 +74,47 @@ export const RootStackNavigator = () => {
                 name={RootStackRoutes.DevUtilsStack}
                 component={DevUtilsStackNavigator}
             />
-            <RootStack.Screen
-                name={RootStackRoutes.AddCoinAccountStack}
-                component={AddCoinAccountStackNavigator}
-                options={{ animation: 'slide_from_bottom' }}
-            />
-            <RootStack.Screen
-                name={RootStackRoutes.CoinEnablingInit}
-                component={CoinEnablingInitScreen}
-                options={{ animation: 'slide_from_bottom' }}
-            />
-            <RootStack.Screen
-                name={RootStackRoutes.ReceiveStack}
-                component={ReceiveStackNavigator}
-                options={{ animation: 'slide_from_bottom' }}
-            />
-            <RootStack.Screen
-                name={RootStackRoutes.AuthorizeDeviceStack}
-                component={AuthorizeDeviceStackNavigator}
-                options={{
-                    ...stackNavigationOptionsConfig,
-                    animation: 'slide_from_bottom',
-                    gestureEnabled: false,
-                }}
-            />
-            <RootStack.Screen
-                name={RootStackRoutes.DeviceSettingsStack}
-                component={DeviceSettingsStackNavigator}
-                options={{ animation: 'slide_from_bottom' }}
-            />
             <RootStack.Screen name={RootStackRoutes.SendStack} component={SendStackNavigator} />
             <RootStack.Screen name={RootStackRoutes.ConnectPopup} component={ConnectPopupScreen} />
             <RootStack.Screen
                 name={RootStackRoutes.SettingsScreenStack}
                 component={SettingsStackNavigator}
             />
+            {/* Navigation flows that start by push from bottom animation on the first screen of its stack. */}
+            <RootStack.Group screenOptions={{ animation: 'slide_from_bottom' }}>
+                <RootStack.Screen
+                    name={RootStackRoutes.OnboardingStack}
+                    component={OnboardingStackNavigator}
+                />
+                <RootStack.Screen
+                    name={RootStackRoutes.AccountsImport}
+                    component={AccountsImportStackNavigator}
+                />
+                <RootStack.Screen
+                    name={RootStackRoutes.AddCoinAccountStack}
+                    component={AddCoinAccountStackNavigator}
+                />
+                <RootStack.Screen
+                    name={RootStackRoutes.CoinEnablingInit}
+                    component={CoinEnablingInitScreen}
+                />
+                <RootStack.Screen
+                    name={RootStackRoutes.ReceiveStack}
+                    component={ReceiveStackNavigator}
+                />
+                <RootStack.Screen
+                    name={RootStackRoutes.AuthorizeDeviceStack}
+                    component={AuthorizeDeviceStackNavigator}
+                    options={{
+                        ...stackNavigationOptionsConfig,
+                        gestureEnabled: false,
+                    }}
+                />
+                <RootStack.Screen
+                    name={RootStackRoutes.DeviceSettingsStack}
+                    component={DeviceSettingsStackNavigator}
+                />
+            </RootStack.Group>
         </RootStack.Navigator>
     );
 };

suite-native/device/src/hooks/useDetectDeviceError.tsx

@@ -34,7 +34,11 @@ import { BootloaderModalAppendix } from '../components/BootloaderModalAppendix';
 import { IncompatibleFirmwareModalAppendix } from '../components/IncompatibleFirmwareModalAppendix';
 import { UnacquiredDeviceModalAppendix } from '../components/UnacquiredDeviceModalAppendix';
 import { UninitializedDeviceModalAppendix } from '../components/UninitializedDeviceModalAppendix';
-import { selectDeviceError, selectIsDeviceFirmwareSupported } from '../selectors';
+import {
+    selectDeviceError,
+    selectIsDeviceFirmwareSupported,
+    selectIsDeviceSetupSupported,
+} from '../selectors';
 
 export const SUITE_WEB_URL = 'https://suite.trezor.io/web/';
 
@@ -61,6 +65,7 @@ export const useDetectDeviceError = () => {
     const isFirmwareInstallationRunning = useSelector(selectIsFirmwareInstallationRunning);
     const hasDeviceFirmwareInstalled = useSelector(selectHasDeviceFirmwareInstalled);
     const isOnboardingFinished = useSelector(selectIsOnboardingFinished);
+    const isDeviceSetupSupported = useSelector(selectIsDeviceSetupSupported);
 
     const isDeviceFirmwareSupported = useSelector(selectIsDeviceFirmwareSupported);
     const deviceError = useSelector(selectDeviceError);
@@ -103,7 +108,8 @@ export const useDetectDeviceError = () => {
             !isDeviceFirmwareSupported &&
             isOnboardingFinished &&
             !isPortfolioTrackerDevice &&
-            !wasDeviceEjectedByUser
+            !wasDeviceEjectedByUser &&
+            !isDeviceSetupSupported
         ) {
             showAlert({
                 title: <Translation id="moduleDevice.unsupportedFirmwareModal.title" />,
@@ -130,10 +136,11 @@ export const useDetectDeviceError = () => {
         dispatch,
         showAlert,
         handleDisconnect,
+        isDeviceSetupSupported,
     ]);
 
     useEffect(() => {
-        if (!isOnboardingFinished) return;
+        if (!isOnboardingFinished || isDeviceSetupSupported) return;
 
         if (
             isConnectedDeviceUninitialized &&
@@ -194,6 +201,7 @@ export const useDetectDeviceError = () => {
         openLink,
         deviceError,
         handleDisconnect,
+        isDeviceSetupSupported,
     ]);
 
     useEffect(() => {

suite-native/device/src/hooks/useHandleDeviceConnection.ts

@@ -7,6 +7,7 @@ import {
     authorizeDeviceThunk,
     selectIsDeviceConnected,
     selectIsDeviceConnectedAndAuthorized,
+    selectIsDeviceInitialized,
     selectIsDeviceRemembered,
     selectIsDeviceUsingPassphrase,
     selectIsNoPhysicalDeviceConnected,
@@ -21,15 +22,18 @@ import {
     AuthorizeDeviceStackParamList,
     AuthorizeDeviceStackRoutes,
     HomeStackRoutes,
+    OnboardingStackRoutes,
     RootStackParamList,
     RootStackRoutes,
     StackToStackCompositeNavigationProps,
 } from '@suite-native/navigation';
 import { selectIsOnboardingFinished } from '@suite-native/settings';
 
+import { selectIsDeviceSetupSupported } from '../selectors';
+
 type NavigationProp = StackToStackCompositeNavigationProps<
     AuthorizeDeviceStackParamList | RootStackParamList,
-    AuthorizeDeviceStackRoutes.PinMatrix | RootStackRoutes.Onboarding,
+    AuthorizeDeviceStackRoutes.PinMatrix | RootStackRoutes.OnboardingStack,
     RootStackParamList
 >;
 
@@ -41,9 +45,12 @@ export const useHandleDeviceConnection = () => {
     const isDeviceConnectedAndAuthorized = useSelector(selectIsDeviceConnectedAndAuthorized);
     const hasDeviceRequestedPin = useSelector(selectDeviceRequestedPin);
     const isDeviceConnected = useSelector(selectIsDeviceConnected);
-    const { isBiometricsOverlayVisible } = useIsBiometricsOverlayVisible();
+    const isDeviceInitialized = useSelector(selectIsDeviceInitialized);
     const isDeviceUsingPassphrase = useSelector(selectIsDeviceUsingPassphrase);
     const isFirmwareInstallationRunning = useSelector(selectIsFirmwareInstallationRunning);
+    const isDeviceSetupSupported = useSelector(selectIsDeviceSetupSupported);
+
+    const { isBiometricsOverlayVisible } = useIsBiometricsOverlayVisible();
     const navigation = useNavigation<NavigationProp>();
     const dispatch = useDispatch();
 
@@ -52,12 +59,46 @@ export const useHandleDeviceConnection = () => {
     const isSendStackFocused = lastRoute === RootStackRoutes.SendStack;
     const shouldBlockSendReviewRedirect = isDeviceRemembered && isSendStackFocused;
 
+    // When is an uninitialized device model that supports device setup, navigate to device onboarding.
+    useEffect(() => {
+        if (
+            isDeviceSetupSupported &&
+            !isDeviceInitialized &&
+            isDeviceConnected &&
+            isOnboardingFinished &&
+            !isPortfolioTrackerDevice &&
+            !isBiometricsOverlayVisible
+        ) {
+            requestPrioritizedDeviceAccess({
+                deviceCallback: () => dispatch(authorizeDeviceThunk()),
+            });
+
+            if (!isDeviceInitialized) {
+                navigation.navigate(RootStackRoutes.OnboardingStack, {
+                    screen: OnboardingStackRoutes.UninitializedDeviceLanding,
+                });
+
+                return;
+            }
+        }
+    }, [
+        dispatch,
+        isDeviceConnected,
+        isOnboardingFinished,
+        isBiometricsOverlayVisible,
+        navigation,
+        isDeviceInitialized,
+        isPortfolioTrackerDevice,
+        isDeviceSetupSupported,
+    ]);
+
     // At the moment when unauthorized physical device is selected,
     // redirect to the Connecting screen where is handled the connection logic.
     useEffect(() => {
         if (isFirmwareInstallationRunning) return;
 
         if (
+            isDeviceInitialized &&
             isDeviceConnected &&
             isOnboardingFinished &&
             !isPortfolioTrackerDevice &&
@@ -88,6 +129,7 @@ export const useHandleDeviceConnection = () => {
         isDeviceUsingPassphrase,
         shouldBlockSendReviewRedirect,
         isFirmwareInstallationRunning,
+        isDeviceInitialized,
     ]);
 
     // In case that the physical device is disconnected, redirect to the home screen and
@@ -96,12 +138,7 @@ export const useHandleDeviceConnection = () => {
         if (isFirmwareInstallationRunning) return;
 
         if (isNoPhysicalDeviceConnected && isOnboardingFinished) {
-            const previousRoute = navigation.getState()?.routes.at(-1)?.name;
-
-            // This accidentally gets triggered by finishing onboarding with no device connected,
-            // so this prevents from redirect being duplicated.
-            const isPreviousRouteOnboarding = previousRoute === RootStackRoutes.Onboarding;
-            if (isPreviousRouteOnboarding || shouldBlockSendReviewRedirect) {
+            if (shouldBlockSendReviewRedirect) {
                 return;
             }
             navigation.navigate(RootStackRoutes.AppTabs, {

suite-native/device/src/index.ts

@@ -12,3 +12,4 @@ export * from './utils';
 export * from './selectors';
 export * from './deviceThunks';
 export * from './config/firmware';
+export * from './types';

suite-native/device/src/selectors.ts

@@ -36,7 +36,7 @@ import { doesCoinSupportStaking } from '@suite-native/staking';
 import { BigNumber } from '@trezor/utils';
 
 import { revisionCheckErrorScenarios } from './config/firmware';
-import { isFirmwareVersionSupported } from './utils';
+import { isDeviceSetupSupported, isFirmwareVersionSupported } from './utils';
 
 type NativeDeviceRootState = DeviceRootState &
     AccountsRootState &
@@ -185,3 +185,8 @@ export const selectHasFirmwareAuthenticityCheckHardFailed = (state: FwAuthentici
 
     return isRevisionHardError;
 };
+
+export const selectIsDeviceSetupSupported = createMemoizedSelector(
+    [selectDeviceModel],
+    model => !!model && isDeviceSetupSupported(model),
+);

suite-native/device/src/types.ts

@@ -0,0 +1,9 @@
+import { DeviceModelInternal } from '@trezor/connect';
+
+export type SetupSupportingDeviceModel = Exclude<
+    DeviceModelInternal,
+    | DeviceModelInternal.T1B1
+    | DeviceModelInternal.T2T1
+    | DeviceModelInternal.T3W1
+    | DeviceModelInternal.UNKNOWN
+>;

suite-native/device/src/utils.ts

@@ -2,6 +2,7 @@ import { G } from '@mobily/ts-belt';
 import { AnyAction } from '@reduxjs/toolkit';
 import * as semver from 'semver';
 
+import { UnreachableCaseError } from '@suite-common/suite-utils';
 import { DEVICE, Device, DeviceEvent, DeviceModelInternal, VersionArray } from '@trezor/connect';
 
 export const minimalSupportedFirmwareVersion = {
@@ -37,3 +38,20 @@ export const isDeviceEventAction = <T extends DeviceEvent['type']>(
     action: AnyAction,
     actionType: T,
 ): action is { type: T; payload: Device } => action.type === actionType;
+
+export const isDeviceSetupSupported = (model: DeviceModelInternal) => {
+    // Exhaustive check for case that new model is introduced later it won't be forgotten.
+    switch (model) {
+        case DeviceModelInternal.T2B1:
+        case DeviceModelInternal.T3B1:
+        case DeviceModelInternal.T3T1:
+            return true;
+        case DeviceModelInternal.T1B1:
+        case DeviceModelInternal.T2T1:
+        case DeviceModelInternal.T3W1:
+        case DeviceModelInternal.UNKNOWN:
+            return false;
+        default:
+            throw new UnreachableCaseError(model);
+    }
+};

suite-native/intl/src/en.ts

@@ -825,6 +825,21 @@ export const en = {
                 notNow: 'Not now',
             },
         },
+
+        uninitializedDeviceLandingScreen: {
+            noFirmware: {
+                title: 'Now it’s just you\nand your crypto',
+                button: "Let's get started",
+            },
+            firmware: {
+                title: 'Have you used this Trezor before?',
+                subtitle:
+                    'Firmware is already installed on this Trezor. Continue only if you have used this Trezor before.',
+                confirmButton: 'Yes, set up my Trezor',
+                noButton: 'No, I have not',
+            },
+            lookDifferentLabel: 'My device looks different',
+        },
     },
     moduleAccountManagement: {
         accountSettingsScreen: {

suite-native/module-onboarding/package.json

@@ -13,15 +13,18 @@
         "@react-navigation/core": "^6.4.10",
         "@react-navigation/native": "6.1.18",
         "@react-navigation/native-stack": "6.11.0",
+        "@reduxjs/toolkit": "1.9.5",
         "@suite-native/atoms": "workspace:*",
         "@suite-native/icons": "workspace:*",
         "@suite-native/intl": "workspace:*",
         "@suite-native/navigation": "workspace:*",
+        "@trezor/connect": "workspace:*",
         "@trezor/env-utils": "workspace:*",
         "@trezor/styles": "workspace:*",
         "expo-linear-gradient": "^14.0.1",
         "react": "18.2.0",
         "react-native": "0.76.1",
+        "react-native-svg": "^15.9.0",
         "react-redux": "8.0.7"
     }
 }

suite-native/module-onboarding/redux.d.ts

@@ -0,0 +1,7 @@
+import { AsyncThunkAction } from '@reduxjs/toolkit';
+
+declare module 'redux' {
+    export interface Dispatch {
+        <TThunk extends AsyncThunkAction<any, any, any>>(thunk: TThunk): ReturnType<TThunk>;
+    }
+}

suite-native/module-onboarding/src/components/HeaderUnderlineSvg.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import Svg, { Path, SvgProps } from 'react-native-svg';
+
+import { useIllustrationColors } from '@suite-native/atoms';
+
+export const HeaderUnderlineSvg = (props: SvgProps) => {
+    const { lineColor } = useIllustrationColors();
+
+    return (
+        <Svg width={222} height={10} fill="none" {...props}>
+            <Path
+                fill={lineColor}
+                d="M1.995 2.525C53.744-.098 107.902.93 160.472 1.268c18.682.175 37.417 1.564 56.049 3.262l2.801.247.682.06.324.02.126.006c-.111.06.3-.144-.415.159.184 3.4.258 1.022.216 1.75-39.372-4.117-79.695-.91-118.773 2.284-8.64-2.438 79.033-8.419 118.414-4.347.25.043.453.065.775.137.005.744.163-1.63.364 1.815-.77.32-.425.107-.59.171-.138-.005-.462-.019-.599-.037-4.596-.445-10.069-1.018-14.659-1.306-33.506-2.283-67.268-3.043-100.873-2.636-40.776.651-116.234 2.03-102.32-.328Z"
+            />
+        </Svg>
+    );
+};