diff --git a/suite-native/app/tsconfig.json b/suite-native/app/tsconfig.json
index e8fe760bf9c..6f57b258499 100644
--- a/suite-native/app/tsconfig.json
+++ b/suite-native/app/tsconfig.json
@@ -1,8 +1,6 @@
{
"extends": "../../tsconfig.base.json",
- "compilerOptions": {
- "outDir": "./libDev"
- },
+ "compilerOptions": { "outDir": "./libDev" },
"references": [
{
"path": "../../suite-common/analytics"
@@ -31,126 +29,52 @@
{
"path": "../../suite-common/wallet-types"
},
- {
- "path": "../accounts"
- },
- {
- "path": "../alerts"
- },
- {
- "path": "../analytics"
- },
- {
- "path": "../atoms"
- },
- {
- "path": "../biometrics"
- },
- {
- "path": "../coin-enabling"
- },
- {
- "path": "../config"
- },
- {
- "path": "../connection-status"
- },
- {
- "path": "../device"
- },
- {
- "path": "../device-authorization"
- },
- {
- "path": "../discovery"
- },
- {
- "path": "../icons"
- },
- {
- "path": "../intl"
- },
- {
- "path": "../message-system"
- },
- {
- "path": "../module-accounts-import"
- },
+ { "path": "../accounts" },
+ { "path": "../alerts" },
+ { "path": "../analytics" },
+ { "path": "../atoms" },
+ { "path": "../biometrics" },
+ { "path": "../coin-enabling" },
+ { "path": "../config" },
+ { "path": "../connection-status" },
+ { "path": "../device" },
+ { "path": "../device-authorization" },
+ { "path": "../discovery" },
+ { "path": "../icons" },
+ { "path": "../intl" },
+ { "path": "../message-system" },
+ { "path": "../module-accounts-import" },
{
"path": "../module-accounts-management"
},
- {
- "path": "../module-add-accounts"
- },
- {
- "path": "../module-authorize-device"
- },
- {
- "path": "../module-connect-popup"
- },
- {
- "path": "../module-dev-utils"
- },
- {
- "path": "../module-device-settings"
- },
- {
- "path": "../module-home"
- },
- {
- "path": "../module-onboarding"
- },
- {
- "path": "../module-onboarding-legacy"
- },
- {
- "path": "../module-send"
- },
- {
- "path": "../module-settings"
- },
+ { "path": "../module-add-accounts" },
+ { "path": "../module-authorize-device" },
+ { "path": "../module-connect-popup" },
+ { "path": "../module-dev-utils" },
+ { "path": "../module-device-settings" },
+ { "path": "../module-home" },
+ { "path": "../module-onboarding" },
+ { "path": "../module-onboarding-legacy" },
+ { "path": "../module-send" },
+ { "path": "../module-settings" },
{
"path": "../module-staking-management"
},
- {
- "path": "../navigation"
- },
- {
- "path": "../notifications"
- },
- {
- "path": "../receive"
- },
- {
- "path": "../settings"
- },
- {
- "path": "../state"
- },
- {
- "path": "../storage"
- },
- {
- "path": "../theme"
- },
- {
- "path": "../toasts"
- },
- {
- "path": "../transactions"
- },
- {
- "path": "../../packages/connect"
- },
+ { "path": "../navigation" },
+ { "path": "../notifications" },
+ { "path": "../receive" },
+ { "path": "../settings" },
+ { "path": "../state" },
+ { "path": "../storage" },
+ { "path": "../theme" },
+ { "path": "../toasts" },
+ { "path": "../transactions" },
+ { "path": "../../packages/connect" },
{
"path": "../../packages/react-native-usb"
},
- {
- "path": "../../packages/styles"
- },
- {
- "path": "../../packages/theme"
- },
+ { "path": "../../packages/styles" },
+ { "path": "../../packages/theme" },
{
"path": "../../packages/trezor-user-env-link"
},
@@ -161,8 +85,5 @@
"path": "../../packages/connect-mobile"
}
],
- "include": [
- ".",
- "**.json"
- ]
-}
\ No newline at end of file
+ "include": [".", "**.json"]
+}
diff --git a/suite-native/intl/src/en.ts b/suite-native/intl/src/en.ts
index c2d861b0ed0..4f65360309e 100644
--- a/suite-native/intl/src/en.ts
+++ b/suite-native/intl/src/en.ts
@@ -5,6 +5,7 @@
export const en = {
generic: {
+ trezorSuite: 'Trezor Suite',
header: 'Trezor Suite Lite',
buttons: {
back: 'Back',
@@ -763,8 +764,12 @@ export const en = {
},
moduleOnboarding: {
welcomeScreen: {
+ subtitle: 'Take control.',
+ button: "Let's get started",
+
+ // TODO: this should be removed when is the new onboarding enabled by default
welcome: 'Welcome to',
- subtitle: 'Securely track, manage & receive\ncrypto on the go',
+ subtitleLegacy: 'Securely track, manage & receive\ncrypto on the go',
trezorLink: 'Don’t have a Trezor? Get one here.',
nextButton: 'Get started',
},
diff --git a/suite-native/module-dev-utils/package.json b/suite-native/module-dev-utils/package.json
index ec2a3933cfc..558e0b80251 100644
--- a/suite-native/module-dev-utils/package.json
+++ b/suite-native/module-dev-utils/package.json
@@ -11,6 +11,7 @@
},
"dependencies": {
"@mobily/ts-belt": "^3.13.1",
+ "@react-navigation/native": "6.1.18",
"@react-navigation/native-stack": "6.11.0",
"@sentry/react-native": "6.5.0",
"@suite-common/message-system": "workspace:*",
diff --git a/suite-native/module-dev-utils/src/screens/DevUtilsScreen.tsx b/suite-native/module-dev-utils/src/screens/DevUtilsScreen.tsx
index 1f450e71d91..f4a71cc33f0 100644
--- a/suite-native/module-dev-utils/src/screens/DevUtilsScreen.tsx
+++ b/suite-native/module-dev-utils/src/screens/DevUtilsScreen.tsx
@@ -1,15 +1,19 @@
import { Alert } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
import * as Sentry from '@sentry/react-native';
import { getEnv, isDevelopOrDebugEnv } from '@suite-native/config';
import { Button, Card, VStack, TitleHeader } from '@suite-native/atoms';
import {
Screen,
- StackProps,
DevUtilsStackParamList,
DevUtilsStackRoutes,
ScreenSubHeader,
+ RootStackRoutes,
+ StackToStackCompositeNavigationProps,
+ RootStackParamList,
+ OnboardingStackRoutes,
} from '@suite-native/navigation';
import { clearStorage } from '@suite-native/storage';
import { getCommitHash, getSuiteVersion } from '@trezor/env-utils';
@@ -20,48 +24,69 @@ import { TestnetsToggle } from '../components/TestnetsToggle';
import { DevicePassphraseSwitch } from '../components/DevicePassphraseSwitch';
import { MessageSystemInfo } from '../components/MessageSystemInfo';
-export const DevUtilsScreen = ({
- navigation,
-}: StackProps) => (
- }>
-
-
-
-
- {isDevelopOrDebugEnv() && (
-
- )}
-
- {isDevelopOrDebugEnv() && (
- <>
-
-
- >
- )}
+type NavigationProps = StackToStackCompositeNavigationProps<
+ DevUtilsStackParamList,
+ DevUtilsStackRoutes.DevUtils,
+ RootStackParamList
+>;
+
+export const DevUtilsScreen = () => {
+ const navigation = useNavigation();
+
+ const navigateToNewWelcomeFlow = () =>
+ navigation.navigate(RootStackRoutes.Onboarding, {
+ screen: OnboardingStackRoutes.Welcome,
+ });
-
-
-
-
-
-
-
-
-
-
-);
+ return (
+ }>
+
+
+
+
+ {isDevelopOrDebugEnv() && (
+ <>
+
+ {/* This button will be present for limited time only, until the new welcome flow is finished and enabled by default. */}
+
+ >
+ )}
+
+ {isDevelopOrDebugEnv() && (
+ <>
+
+
+ >
+ )}
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
diff --git a/suite-native/module-onboarding/package.json b/suite-native/module-onboarding/package.json
new file mode 100644
index 00000000000..5412a318159
--- /dev/null
+++ b/suite-native/module-onboarding/package.json
@@ -0,0 +1,25 @@
+{
+ "name": "@suite-native/module-onboarding",
+ "version": "1.0.0",
+ "private": true,
+ "license": "See LICENSE.md in repo root",
+ "sideEffects": false,
+ "main": "src/index",
+ "scripts": {
+ "depcheck": "yarn g:depcheck",
+ "type-check": "yarn g:tsc --build"
+ },
+ "dependencies": {
+ "@react-navigation/native": "6.1.18",
+ "@react-navigation/native-stack": "6.11.0",
+ "@suite-native/atoms": "workspace:*",
+ "@suite-native/icons": "workspace:*",
+ "@suite-native/intl": "workspace:*",
+ "@suite-native/navigation": "workspace:*",
+ "@trezor/env-utils": "workspace:*",
+ "@trezor/styles": "workspace:*",
+ "expo-linear-gradient": "^14.0.1",
+ "react": "18.2.0",
+ "react-native": "0.76.1"
+ }
+}
diff --git a/suite-native/module-onboarding/src/assets/welcomeScreenBackground.jpeg b/suite-native/module-onboarding/src/assets/welcomeScreenBackground.jpeg
new file mode 100644
index 00000000000..c51e629557c
Binary files /dev/null and b/suite-native/module-onboarding/src/assets/welcomeScreenBackground.jpeg differ
diff --git a/suite-native/module-onboarding/src/index.ts b/suite-native/module-onboarding/src/index.ts
new file mode 100644
index 00000000000..e68ebbab748
--- /dev/null
+++ b/suite-native/module-onboarding/src/index.ts
@@ -0,0 +1 @@
+export * from './navigation/OnboardingStackNavigator';
diff --git a/suite-native/module-onboarding/src/navigation/OnboardingStackNavigator.tsx b/suite-native/module-onboarding/src/navigation/OnboardingStackNavigator.tsx
new file mode 100644
index 00000000000..273f90fea1b
--- /dev/null
+++ b/suite-native/module-onboarding/src/navigation/OnboardingStackNavigator.tsx
@@ -0,0 +1,20 @@
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+
+import {
+ OnboardingStackParamList,
+ OnboardingStackRoutes,
+ stackNavigationOptionsConfig,
+} from '@suite-native/navigation';
+
+import { WelcomeScreen } from '../screens/WelcomeScreen';
+
+export const OnboardingStack = createNativeStackNavigator();
+
+export const OnboardingStackNavigator = () => (
+
+
+
+);
diff --git a/suite-native/module-onboarding/src/screens/WelcomeScreen.tsx b/suite-native/module-onboarding/src/screens/WelcomeScreen.tsx
new file mode 100644
index 00000000000..a5c6cdf8532
--- /dev/null
+++ b/suite-native/module-onboarding/src/screens/WelcomeScreen.tsx
@@ -0,0 +1,87 @@
+import { ImageBackground, StyleSheet } from 'react-native';
+
+import { LinearGradient } from 'expo-linear-gradient';
+
+import { Screen } from '@suite-native/navigation';
+import { Box, Button, Text, VStack } from '@suite-native/atoms';
+import { Translation } from '@suite-native/intl';
+import { Icon } from '@suite-native/icons';
+import { prepareNativeStyle, useNativeStyles } from '@trezor/styles';
+import { hexToRgba } from '@suite-common/suite-utils';
+import { getWindowHeight } from '@trezor/env-utils';
+import { useToast } from '@suite-native/toasts';
+import { colorVariants } from '@trezor/theme';
+
+const GRADIENT_HEIGHT = getWindowHeight() / 3;
+
+const gradientBackgroundBottomStyle = prepareNativeStyle(() => ({
+ width: '100%',
+ height: GRADIENT_HEIGHT,
+}));
+
+const buttonWrapperStyle = prepareNativeStyle(() => ({
+ width: '100%',
+ paddingBottom: 50,
+}));
+
+const textColorStyle = prepareNativeStyle(() => ({
+ // the text needs to be white to be visible on image background, ignoring the theme
+ color: colorVariants.dark.textDefault,
+}));
+
+export const WelcomeScreen = () => {
+ const { showToast } = useToast();
+
+ const { applyStyle } = useNativeStyles();
+
+ // 'transparent' color is not working in context of LinearGradient on iOS. RGBA has to be used instead.
+ const transparentColor = hexToRgba('#000000', 0.01);
+
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ >
+ );
+};
diff --git a/suite-native/module-onboarding/tsconfig.json b/suite-native/module-onboarding/tsconfig.json
new file mode 100644
index 00000000000..261062d51ba
--- /dev/null
+++ b/suite-native/module-onboarding/tsconfig.json
@@ -0,0 +1,12 @@
+{
+ "extends": "../../tsconfig.base.json",
+ "compilerOptions": { "outDir": "libDev" },
+ "references": [
+ { "path": "../atoms" },
+ { "path": "../icons" },
+ { "path": "../intl" },
+ { "path": "../navigation" },
+ { "path": "../../packages/env-utils" },
+ { "path": "../../packages/styles" }
+ ]
+}
diff --git a/yarn.lock b/yarn.lock
index 9ff1d71ba16..53bfb93d7c3 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -10681,6 +10681,7 @@ __metadata:
resolution: "@suite-native/module-dev-utils@workspace:suite-native/module-dev-utils"
dependencies:
"@mobily/ts-belt": "npm:^3.13.1"
+ "@react-navigation/native": "npm:6.1.18"
"@react-navigation/native-stack": "npm:6.11.0"
"@sentry/react-native": "npm:6.5.0"
"@suite-common/message-system": "workspace:*"
@@ -10801,25 +10802,17 @@ __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"
- "@reduxjs/toolkit": "npm:1.9.5"
- "@suite-native/analytics": "workspace:*"
"@suite-native/atoms": "workspace:*"
- "@suite-native/device": "workspace:*"
- "@suite-native/feature-flags": "workspace:*"
"@suite-native/icons": "workspace:*"
"@suite-native/intl": "workspace:*"
- "@suite-native/link": "workspace:*"
"@suite-native/navigation": "workspace:*"
- "@suite-native/settings": "workspace:*"
- "@suite-native/theme": "workspace:*"
+ "@trezor/env-utils": "workspace:*"
"@trezor/styles": "workspace:*"
+ expo-linear-gradient: "npm:^14.0.1"
react: "npm:18.2.0"
react-native: "npm:0.76.1"
- react-native-svg: "npm:^15.9.0"
- react-redux: "npm:8.0.7"
languageName: unknown
linkType: soft