feat(suite-native): onboarding security check

suite-common/icons/generateIconFont.ts

@@ -75,6 +75,7 @@ const usedIcons = [
     'link',
     'lock',
     'magnifyingGlass',
+    'package',
     'palette',
     'password',
     'pencil',
@@ -89,6 +90,8 @@ const usedIcons = [
     'prohibit',
     'qrCode',
     'question',
+    'seal',
+    'selectionSlash',
     'shareNetwork',
     'shieldCheck',
     'shieldWarning',

suite-common/icons/iconFontsMobile/TrezorSuiteIcons.json

@@ -27,80 +27,83 @@
     "shieldWarning": 61722,
     "shieldCheck": 61723,
     "shareNetwork": 61724,
-    "question": 61725,
-    "qrCode": 61726,
-    "prohibit": 61727,
-    "plusCircle": 61728,
-    "plus": 61729,
-    "plugs": 61730,
-    "piggyBankFilled": 61731,
-    "piggyBank": 61732,
-    "pictureFrame": 61733,
-    "pencilSimpleLine": 61734,
-    "pencilSimple": 61735,
-    "pencil": 61736,
-    "password": 61737,
-    "palette": 61738,
-    "magnifyingGlass": 61739,
-    "lock": 61740,
-    "link": 61741,
-    "lightbulb": 61742,
-    "lifebuoy": 61743,
-    "info": 61744,
-    "image": 61745,
-    "houseFilled": 61746,
-    "house": 61747,
-    "handPalm": 61748,
-    "githubLogo": 61749,
-    "gearFilled": 61750,
-    "gear": 61751,
-    "flagCheckered": 61752,
-    "flag": 61753,
-    "fingerprintSimple": 61754,
-    "fingerprint": 61755,
-    "filePdf": 61756,
-    "facebookLogo": 61757,
-    "eyeSlash": 61758,
-    "eye": 61759,
-    "discoverFilled": 61760,
-    "discover": 61761,
-    "detective": 61762,
-    "database": 61763,
-    "cpu": 61764,
-    "copy": 61765,
-    "coins": 61766,
-    "coinVerticalCheck": 61767,
-    "code": 61768,
-    "clockClockwise": 61769,
-    "circleDashed": 61770,
-    "checks": 61771,
-    "checkCircleFilled": 61772,
-    "checkCircle": 61773,
-    "check": 61774,
-    "chatCircle": 61775,
-    "change": 61776,
-    "caretUpFilled": 61777,
-    "caretUpDown": 61778,
-    "caretUp": 61779,
-    "caretRight": 61780,
-    "caretLeft": 61781,
-    "caretDownFilled": 61782,
-    "caretDown": 61783,
-    "caretCircleRight": 61784,
-    "calendar": 61785,
-    "bugBeetle": 61786,
-    "bookmarkSimple": 61787,
-    "backspace": 61788,
-    "arrowsLeftRight": 61789,
-    "arrowsDownUp": 61790,
-    "arrowsCounterClockwise": 61791,
-    "arrowUpRight": 61792,
-    "arrowUp": 61793,
-    "arrowURightDown": 61794,
-    "arrowSquareOut": 61795,
-    "arrowRight": 61796,
-    "arrowLineUpRight": 61797,
-    "arrowLineUp": 61798,
-    "arrowLineDown": 61799,
-    "arrowDown": 61800
+    "selectionSlash": 61725,
+    "seal": 61726,
+    "question": 61727,
+    "qrCode": 61728,
+    "prohibit": 61729,
+    "plusCircle": 61730,
+    "plus": 61731,
+    "plugs": 61732,
+    "piggyBankFilled": 61733,
+    "piggyBank": 61734,
+    "pictureFrame": 61735,
+    "pencilSimpleLine": 61736,
+    "pencilSimple": 61737,
+    "pencil": 61738,
+    "password": 61739,
+    "palette": 61740,
+    "package": 61741,
+    "magnifyingGlass": 61742,
+    "lock": 61743,
+    "link": 61744,
+    "lightbulb": 61745,
+    "lifebuoy": 61746,
+    "info": 61747,
+    "image": 61748,
+    "houseFilled": 61749,
+    "house": 61750,
+    "handPalm": 61751,
+    "githubLogo": 61752,
+    "gearFilled": 61753,
+    "gear": 61754,
+    "flagCheckered": 61755,
+    "flag": 61756,
+    "fingerprintSimple": 61757,
+    "fingerprint": 61758,
+    "filePdf": 61759,
+    "facebookLogo": 61760,
+    "eyeSlash": 61761,
+    "eye": 61762,
+    "discoverFilled": 61763,
+    "discover": 61764,
+    "detective": 61765,
+    "database": 61766,
+    "cpu": 61767,
+    "copy": 61768,
+    "coins": 61769,
+    "coinVerticalCheck": 61770,
+    "code": 61771,
+    "clockClockwise": 61772,
+    "circleDashed": 61773,
+    "checks": 61774,
+    "checkCircleFilled": 61775,
+    "checkCircle": 61776,
+    "check": 61777,
+    "chatCircle": 61778,
+    "change": 61779,
+    "caretUpFilled": 61780,
+    "caretUpDown": 61781,
+    "caretUp": 61782,
+    "caretRight": 61783,
+    "caretLeft": 61784,
+    "caretDownFilled": 61785,
+    "caretDown": 61786,
+    "caretCircleRight": 61787,
+    "calendar": 61788,
+    "bugBeetle": 61789,
+    "bookmarkSimple": 61790,
+    "backspace": 61791,
+    "arrowsLeftRight": 61792,
+    "arrowsDownUp": 61793,
+    "arrowsCounterClockwise": 61794,
+    "arrowUpRight": 61795,
+    "arrowUp": 61796,
+    "arrowURightDown": 61797,
+    "arrowSquareOut": 61798,
+    "arrowRight": 61799,
+    "arrowLineUpRight": 61800,
+    "arrowLineUp": 61801,
+    "arrowLineDown": 61802,
+    "arrowDown": 61803
 }

suite-native/atoms/src/AlertBox.tsx

@@ -3,7 +3,7 @@ import { ActivityIndicator } from 'react-native';
 
 import { Icon, IconName } from '@suite-native/icons';
 import { prepareNativeStyle, useNativeStyles } from '@trezor/styles';
-import { Color, NativeRadius } from '@trezor/theme';
+import { Color, NativeRadius, TypographyStyle } from '@trezor/theme';
 
 import { Box } from './Box';
 import { Text } from './Text';
@@ -84,6 +84,7 @@ export type AlertBoxProps = {
     borderRadius?: NativeRadius | number;
     contentColor?: Color;
     rightButton?: ReactNode;
+    textVariant?: TypographyStyle;
 };
 
 const AlertSpinner = ({ color }: { color: Color }) => {
@@ -96,10 +97,11 @@ const AlertSpinner = ({ color }: { color: Color }) => {
 
 export const AlertBox = ({
     title,
-    variant = 'info',
-    borderRadius = 'r16',
     contentColor,
     rightButton,
+    variant = 'info',
+    borderRadius = 'r16',
+    textVariant = 'label',
 }: AlertBoxProps) => {
     const { applyStyle } = useNativeStyles();
     const {
@@ -123,7 +125,7 @@ export const AlertBox = ({
             ) : (
                 <Icon name={variantToIconName[variant]} color={color} size="mediumLarge" />
             )}
-            <Text color={color} variant="label" style={applyStyle(textStyle)}>
+            <Text color={color} variant={textVariant} style={applyStyle(textStyle)}>
                 {title}
             </Text>
             {rightButton}

suite-native/intl/src/en.ts

@@ -21,6 +21,8 @@ export const en = {
             next: 'Next',
             tryAgain: 'Try again',
             edit: 'Edit',
+            yes: 'Yes',
+            learnMore: 'Learn more',
         },
         unknownError: 'Something went wrong',
         default: 'Default',
@@ -853,6 +855,34 @@ export const en = {
             bullet3: 'Go to the support page linked below and use the Chat option on the website.',
             contactSupportButton: 'Contact Trezor Support',
         },
+        securityCheckScreen: {
+            title: 'Security check',
+            subtitle: 'We need to make sure your device is safe to work with.',
+            step1: {
+                header: 'Trusted source',
+                description:
+                    'My device was bought from the official Trezor Shop or a <link>trusted reseller</link>.',
+            },
+            step2: {
+                header: 'Holographic seal',
+                description:
+                    'The <link>holographic seal</link> was complete and undamaged when I unboxed my device.',
+                modal: {
+                    alertBox:
+                        'We sold this Trezor model with two different holographic seals. Both of them are valid.',
+                    title: 'Verify the holographic seal',
+                    paragraph1:
+                        'Ensure the holographic seal on your device was intact when unboxed, with no peeling, scratches, or damage.',
+                    paragraph2: 'Proceed only if the seal was intact and undamaged.',
+                },
+            },
+            step3: {
+                header: 'Packaging',
+                description:
+                    'The package was factory sealed and intact, with no signs of tampering before unboxing.',
+            },
+            declineButton: 'I’m not sure',
+        },
     },
     moduleAccountManagement: {
         accountSettingsScreen: {

suite-native/module-onboarding/package.json

@@ -24,6 +24,7 @@
         "expo-linear-gradient": "^14.0.1",
         "react": "18.2.0",
         "react-native": "0.76.1",
+        "react-native-reanimated": "^3.16.7",
         "react-native-svg": "^15.9.0",
         "react-redux": "8.0.7"
     }