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