feat(suite-native): onboarding biometrics screen

PeKne · PeKne · commit 551157e64ea3 · 2025-01-22T08:12:32.000+01:00
diff --git a/suite-native/biometrics/src/useBiometricsSettings.ts b/suite-native/biometrics/src/useBiometricsSettings.ts
@@ -23,13 +23,15 @@ export const useBiometricsSettings = () => {
         const isBiometricsAvailable = await getIsBiometricsFeatureAvailable();
 
         if (!isBiometricsAvailable) {
-            showAlert({
-                title: 'Biometrics',
-                description:
-                    'No security features on your device. Make sure you have biometrics setup on your phone and try again.',
-                primaryButtonTitle: 'Cancel',
-                onPressPrimaryButton: () => null,
-                pictogramVariant: 'warning',
+            await new Promise(resolve => {
+                showAlert({
+                    title: 'Biometrics',
+                    description:
+                        'No security features on your device. Make sure you have biometrics setup on your phone and try again.',
+                    primaryButtonTitle: 'Cancel',
+                    onPressPrimaryButton: () => resolve(undefined),
+                    pictogramVariant: 'warning',
+                });
             });
 
             return 'notAvailable';
diff --git a/suite-native/intl/src/en.ts b/suite-native/intl/src/en.ts
@@ -70,12 +70,13 @@ export const en = {
         buttons: {
             receive: 'Receive',
         },
+
+        // TODO: delete this when is the new welcome flow enabled by default
         biometricsModal: {
             title: 'Enable biometrics protection',
             description: 'You can always change this later.',
             button: {
                 later: 'I’ll do that later in Settings',
-                enable: 'Enable',
             },
             resultMsg: {
                 error: 'Unable to enable biometrics',
@@ -834,6 +835,13 @@ export const en = {
             subtitleLegacy: 'Improve Trezor Suite Lite with your anonymous data.',
             learnMore: '<securityLink>More</securityLink> about privacy',
         },
+        biometricsScreen: {
+            title: 'Biometrics',
+            description: 'Enable biometrics to prevent unauthorized access to this app.',
+            button: {
+                notNow: 'Not now',
+            },
+        },
     },
     moduleAccountManagement: {
         accountSettingsScreen: {
diff --git a/suite-native/module-home/src/screens/HomeScreen/useShowBiometricsAlert.tsx b/suite-native/module-home/src/screens/HomeScreen/useShowBiometricsAlert.tsx
@@ -53,7 +53,7 @@ export const useShowBiometricsAlert = () => {
 
     const showBiometricsAlert = useCallback(() => {
         showAlert({
-            primaryButtonTitle: <Translation id="moduleHome.biometricsModal.button.enable" />,
+            primaryButtonTitle: <Translation id="generic.buttons.enable" />,
             onPressPrimaryButton: handleEnable,
             secondaryButtonTitle: <Translation id="moduleHome.biometricsModal.button.later" />,
             onPressSecondaryButton: handleCancel,
diff --git a/suite-native/module-onboarding/package.json b/suite-native/module-onboarding/package.json
@@ -10,6 +10,7 @@
         "type-check": "yarn g:tsc --build"
     },
     "dependencies": {
+        "@react-navigation/core": "^6.4.10",
         "@react-navigation/native": "6.1.18",
         "@react-navigation/native-stack": "6.11.0",
         "@suite-native/atoms": "workspace:*",
@@ -20,6 +21,7 @@
         "@trezor/styles": "workspace:*",
         "expo-linear-gradient": "^14.0.1",
         "react": "18.2.0",
-        "react-native": "0.76.1"
+        "react-native": "0.76.1",
+        "react-redux": "8.0.7"
     }
 }
diff --git a/suite-native/module-onboarding/src/navigation/OnboardingStackNavigator.tsx b/suite-native/module-onboarding/src/navigation/OnboardingStackNavigator.tsx
@@ -8,6 +8,7 @@ import {
 
 import { WelcomeScreen } from '../screens/WelcomeScreen';
 import { AnalyticsConsentScreen } from '../screens/AnalyticsConsentScreen';
+import { BiometricsScreen } from '../screens/BiometricsScreen';
 
 export const OnboardingStack = createNativeStackNavigator<OnboardingStackParamList>();
 
@@ -21,5 +22,9 @@ export const OnboardingStackNavigator = () => (
             name={OnboardingStackRoutes.AnalyticsConsent}
             component={AnalyticsConsentScreen}
         />
+        <OnboardingStack.Screen
+            name={OnboardingStackRoutes.Biometrics}
+            component={BiometricsScreen}
+        />
     </OnboardingStack.Navigator>
 );
diff --git a/suite-native/module-onboarding/src/screens/AnalyticsConsentScreen.tsx b/suite-native/module-onboarding/src/screens/AnalyticsConsentScreen.tsx
@@ -1,12 +1,16 @@
 import { useState } from 'react';
 
-import { Screen } from '@suite-native/navigation';
+import {
+    OnboardingStackParamList,
+    OnboardingStackRoutes,
+    Screen,
+    StackProps,
+} from '@suite-native/navigation';
 import { Box, Button, Card, Switch, Text, TitleHeader, VStack } from '@suite-native/atoms';
 import { Translation } from '@suite-native/intl';
 import { prepareNativeStyle, useNativeStyles } from '@trezor/styles';
 import { EventType, analytics } from '@suite-native/analytics';
 import { useOpenLink } from '@suite-native/link';
-import { useToast } from '@suite-native/toasts';
 
 import { AnalyticsInfoRow } from '../components/AnalyticsInfoRow';
 
@@ -29,8 +33,9 @@ const reportAnalyticsOnboardingCompleted = (isTrackingAllowed: boolean) => {
     if (!isTrackingAllowed) analytics.disable();
 };
 
-export const AnalyticsConsentScreen = () => {
-    const { showToast } = useToast();
+export const AnalyticsConsentScreen = ({
+    navigation,
+}: StackProps<OnboardingStackParamList, OnboardingStackRoutes.AnalyticsConsent>) => {
     const [isEnabled, setIsEnabled] = useState(true);
 
     const { applyStyle } = useNativeStyles();
@@ -40,8 +45,7 @@ export const AnalyticsConsentScreen = () => {
     const handleRedirect = () => {
         reportAnalyticsOnboardingCompleted(isEnabled);
 
-        showToast({ variant: 'warning', message: 'TODO: implement next screen' });
-        // navigation.navigate(OnboardingStackRoutes.Biometrics);
+        navigation.navigate(OnboardingStackRoutes.Biometrics);
     };
 
     const handleAnalyticsConsent = () => {
diff --git a/suite-native/module-onboarding/src/screens/BiometricsScreen.tsx b/suite-native/module-onboarding/src/screens/BiometricsScreen.tsx
@@ -0,0 +1,109 @@
+import { useDispatch } from 'react-redux';
+
+import { CommonActions } from '@react-navigation/core';
+
+import { setIsOnboardingFinished } from '@suite-native/settings';
+import {
+    HomeStackRoutes,
+    OnboardingStackParamList,
+    OnboardingStackRoutes,
+    RootStackRoutes,
+    Screen,
+    ScreenHeader,
+    StackProps,
+} from '@suite-native/navigation';
+import { Box, Button, HStack, Text, VStack } from '@suite-native/atoms';
+import { Translation } from '@suite-native/intl';
+import { EventType, analytics } from '@suite-native/analytics';
+import { BiometricsSvg, useBiometricsSettings } from '@suite-native/biometrics';
+import { Icon } from '@suite-native/icons';
+
+export const BiometricsScreen = ({
+    navigation,
+}: StackProps<OnboardingStackParamList, OnboardingStackRoutes.Biometrics>) => {
+    const { toggleBiometricsOption } = useBiometricsSettings();
+
+    const dispatch = useDispatch();
+
+    const enableBiometrics = async () => {
+        const result = await toggleBiometricsOption();
+        if (result === 'enabled') {
+            analytics.report({
+                type: EventType.BiometricsChange,
+                payload: {
+                    enabled: true,
+                    origin: 'bottomSheet',
+                },
+            });
+        }
+    };
+
+    const exitOnboardingFlow = () => {
+        dispatch(setIsOnboardingFinished());
+
+        navigation.dispatch(
+            CommonActions.reset({
+                index: 0,
+                routes: [
+                    {
+                        name: RootStackRoutes.AppTabs,
+                        params: {
+                            screen: HomeStackRoutes.Home,
+                        },
+                    },
+                ],
+            }),
+        );
+    };
+
+    const handleEnableButtonPress = async () => {
+        await enableBiometrics();
+        exitOnboardingFlow();
+    };
+
+    const handleNotNowButtonPress = () => {
+        exitOnboardingFlow();
+    };
+
+    return (
+        <Screen header={<ScreenHeader />}>
+            <VStack justifyContent="space-between" flex={1}>
+                <Box flex={1} alignItems="center" paddingTop="sp32">
+                    <BiometricsSvg />
+                </Box>
+                <VStack spacing={40}>
+                    <VStack spacing="sp16">
+                        <HStack spacing="sp8" alignItems="center">
+                            <Icon
+                                name="fingerprint"
+                                color="textSecondaryHighlight"
+                                size="mediumLarge"
+                            />
+                            <Text color="textSecondaryHighlight">
+                                <Translation id="moduleOnboarding.biometricsScreen.title" />
+                            </Text>
+                        </HStack>
+                        <Text variant="titleMedium">
+                            <Translation id="moduleOnboarding.biometricsScreen.description" />
+                        </Text>
+                    </VStack>
+                    <VStack spacing="sp12">
+                        <Button
+                            testID="@onboarding/UserDataConsent/enable"
+                            onPress={handleEnableButtonPress}
+                        >
+                            <Translation id="generic.buttons.enable" />
+                        </Button>
+                        <Button
+                            colorScheme="tertiaryElevation0"
+                            testID="@onboarding/Biometrics/skip"
+                            onPress={handleNotNowButtonPress}
+                        >
+                            <Translation id="moduleOnboarding.biometricsScreen.button.notNow" />
+                        </Button>
+                    </VStack>
+                </VStack>
+            </VStack>
+        </Screen>
+    );
+};
diff --git a/suite-native/navigation/src/navigators.ts b/suite-native/navigation/src/navigators.ts
@@ -116,6 +116,7 @@ export type LegacyOnboardingStackParamList = {
 export type OnboardingStackParamList = {
     [OnboardingStackRoutes.Welcome]: undefined;
     [OnboardingStackRoutes.AnalyticsConsent]: undefined;
+    [OnboardingStackRoutes.Biometrics]: undefined;
 };
 
 export type AccountsImportStackParamList = {
diff --git a/suite-native/navigation/src/routes.ts b/suite-native/navigation/src/routes.ts
@@ -35,6 +35,7 @@ export enum LegacyOnboardingStackRoutes {
 export enum OnboardingStackRoutes {
     Welcome = 'Welcome',
     AnalyticsConsent = 'AnalyticsConsent',
+    Biometrics = 'Biometrics',
 }
 
 export enum AccountsImportStackRoutes {
diff --git a/yarn.lock b/yarn.lock
@@ -10814,6 +10814,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@suite-native/module-onboarding@workspace:suite-native/module-onboarding"
   dependencies:
+    "@react-navigation/core": "npm:^6.4.10"
     "@react-navigation/native": "npm:6.1.18"
     "@react-navigation/native-stack": "npm:6.11.0"
     "@suite-native/atoms": "workspace:*"
@@ -10825,6 +10826,7 @@ __metadata:
     expo-linear-gradient: "npm:^14.0.1"
     react: "npm:18.2.0"
     react-native: "npm:0.76.1"
+    react-redux: "npm:8.0.7"
   languageName: unknown
   linkType: soft
 

Original file line number	Diff line number	Diff line change
`@@ -35,6 +35,7 @@ export enum LegacyOnboardingStackRoutes {`
`35`	`35`	`export enum OnboardingStackRoutes {`
`36`	`36`	`Welcome = 'Welcome',`
`37`	`37`	`AnalyticsConsent = 'AnalyticsConsent',`
	`38`	`+ Biometrics = 'Biometrics',`
`38`	`39`	`}`
`39`	`40`
`40`	`41`	`export enum AccountsImportStackRoutes {`