From f141c6e739824328328918f2f0cb92d344ffeb4f Mon Sep 17 00:00:00 2001 From: Petr Knetl Date: Wed, 22 Jan 2025 12:49:02 +0100 Subject: [PATCH 1/2] feat(suite-native): new welcome flow by default --- .../app/e2e/pageObjects/onboardingActions.ts | 32 +-------- suite-native/app/package.json | 1 - .../app/src/navigation/RootStackNavigator.tsx | 7 +- suite-native/app/tsconfig.json | 1 - .../src/screens/DevUtilsScreen.tsx | 21 +----- .../src/screens/HomeScreen/HomeScreen.tsx | 3 +- .../HomeScreen/useShowViewOnlyAlert.tsx | 10 +-- .../src/screens/BiometricsScreen.tsx | 4 +- .../src/screens/WelcomeScreen.tsx | 68 ++++++++++++------- 9 files changed, 56 insertions(+), 91 deletions(-) diff --git a/suite-native/app/e2e/pageObjects/onboardingActions.ts b/suite-native/app/e2e/pageObjects/onboardingActions.ts index d915babc569..c8378742ed9 100644 --- a/suite-native/app/e2e/pageObjects/onboardingActions.ts +++ b/suite-native/app/e2e/pageObjects/onboardingActions.ts @@ -1,39 +1,13 @@ -import { expect as detoxExpect } from 'detox'; - -import { onAlertSheet } from './alertSheetActions'; import { waitForElementByIdToBeVisible } from '../utils'; - -const platform = device.getPlatform(); - class OnOnboardingActions { async finishOnboarding() { const testId = '@onboarding/Welcome/nextBtn'; - await waitForElementByIdToBeVisible(testId, 20000); + await waitForElementByIdToBeVisible(testId, 30000); await element(by.id(testId)).tap(); - if (platform === 'android') { - await element(by.id('@onboarding/ConnectTrezor/nextBtn')).tap(); - } else { - await element(by.id('@onboarding/TrackBalances/nextBtn')).tap(); - } - - await element(by.id('@onboarding/AboutReceiveCoinsFeature/nextBtn')).tap(); - - if (platform === 'android') { - await element(by.id('@onboarding/TrackBalances/nextBtn')).tap(); - } - - await detoxExpect(element(by.id('@onboarding/UserDataConsent/allow'))).toBeVisible(); - await element(by.id('@onboarding/UserDataConsent/allow')).tap(); + await element(by.id('@onboarding/AnalyticsConsent/nextBtn')).tap(); - try { - await onAlertSheet.tapSecondaryButton(); - } catch { - // Android emulator does not support biometrics, so the sheet is not displayed at all. - console.warn( - 'Biometrics not supported by device, skipping close of biometrics bottom sheet.', - ); - } + await element(by.id('@onboarding/Biometrics/skipBtn')).tap(); } async skipOnboarding() { diff --git a/suite-native/app/package.json b/suite-native/app/package.json index 1d07e01300c..0b82fe16d56 100644 --- a/suite-native/app/package.json +++ b/suite-native/app/package.json @@ -65,7 +65,6 @@ "@suite-native/module-device-settings": "workspace:*", "@suite-native/module-home": "workspace:*", "@suite-native/module-onboarding": "workspace:*", - "@suite-native/module-onboarding-legacy": "workspace:*", "@suite-native/module-send": "workspace:*", "@suite-native/module-settings": "workspace:*", "@suite-native/module-staking-management": "workspace:*", diff --git a/suite-native/app/src/navigation/RootStackNavigator.tsx b/suite-native/app/src/navigation/RootStackNavigator.tsx index 54a8232b408..c79f34c4cd2 100644 --- a/suite-native/app/src/navigation/RootStackNavigator.tsx +++ b/suite-native/app/src/navigation/RootStackNavigator.tsx @@ -15,7 +15,6 @@ import { import { selectIsOnboardingFinished } from '@suite-native/settings'; import { DevUtilsStackNavigator } from '@suite-native/module-dev-utils'; import { TransactionDetailScreen } from '@suite-native/transactions'; -import { OnboardingStackNavigator as LegacyOnboardingStackNavigator } from '@suite-native/module-onboarding-legacy'; import { OnboardingStackNavigator } from '@suite-native/module-onboarding'; import { ReceiveStackNavigator } from '@suite-native/receive'; import { AuthorizeDeviceStackNavigator } from '@suite-native/module-authorize-device'; @@ -42,7 +41,7 @@ export const RootStackNavigator = () => { return RootStackRoutes.AppTabs; } - return RootStackRoutes.LegacyOnboarding; + return RootStackRoutes.Onboarding; }; return ( @@ -50,10 +49,6 @@ export const RootStackNavigator = () => { initialRouteName={getInitialRouteName()} screenOptions={stackNavigationOptionsConfig} > - { const navigation = useNavigation(); - const navigateToNewWelcomeFlow = () => - navigation.navigate(RootStackRoutes.Onboarding, { - screen: OnboardingStackRoutes.Welcome, - }); - return ( }> @@ -48,17 +41,9 @@ export const DevUtilsScreen = () => { subtitle={`${getEnv()}-${getSuiteVersion()}, commit ${getCommitHash() || 'N/A in debug build'}`} /> {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-home/src/screens/HomeScreen/HomeScreen.tsx b/suite-native/module-home/src/screens/HomeScreen/HomeScreen.tsx index de14e9f976a..4b9616979a8 100644 --- a/suite-native/module-home/src/screens/HomeScreen/HomeScreen.tsx +++ b/suite-native/module-home/src/screens/HomeScreen/HomeScreen.tsx @@ -10,12 +10,12 @@ import { import { DeviceManagerScreenHeader } from '@suite-native/device-manager'; import { Screen } from '@suite-native/navigation'; -import { useShowBiometricsAlert } from './useShowBiometricsAlert'; import { EmptyHomeRenderer } from './components/EmptyHomeRenderer'; import { PortfolioContent } from './components/PortfolioContent'; import { useHomeRefreshControl } from './useHomeRefreshControl'; import { PortfolioGraphRef } from './components/PortfolioGraph'; import { useShowViewOnlyAlert } from './useShowViewOnlyAlert'; + export const HomeScreen = () => { const isDiscoveredDeviceAccountless = useSelector(selectIsDiscoveredDeviceAccountless); const isDeviceAuthorized = useSelector(selectIsDeviceAuthorized); @@ -33,7 +33,6 @@ export const HomeScreen = () => { portfolioContentRef, }); - useShowBiometricsAlert(); useShowViewOnlyAlert(); return ( diff --git a/suite-native/module-home/src/screens/HomeScreen/useShowViewOnlyAlert.tsx b/suite-native/module-home/src/screens/HomeScreen/useShowViewOnlyAlert.tsx index e954015e982..f4e32738ff0 100644 --- a/suite-native/module-home/src/screens/HomeScreen/useShowViewOnlyAlert.tsx +++ b/suite-native/module-home/src/screens/HomeScreen/useShowViewOnlyAlert.tsx @@ -11,10 +11,7 @@ import { import { useAlert } from '@suite-native/alerts'; import { analytics, EventType } from '@suite-native/analytics'; import { CenteredTitleHeader, LottieAnimation, VStack } from '@suite-native/atoms'; -import { - getIsBiometricsFeatureAvailable, - useIsBiometricsInitialSetupFinished, -} from '@suite-native/biometrics'; +import { getIsBiometricsFeatureAvailable } from '@suite-native/biometrics'; import { selectIsDeviceReadyToUseAndAuthorized } from '@suite-native/device'; import { Translation } from '@suite-native/intl'; import { @@ -34,7 +31,6 @@ export const useShowViewOnlyAlert = () => { const { showAlert } = useAlert(); const { showToast } = useToast(); - const { isBiometricsInitialSetupFinished } = useIsBiometricsInitialSetupFinished(); const device = useSelector(selectSelectedDevice); const isDeviceReadyToUseAndAuthorized = useSelector(selectIsDeviceReadyToUseAndAuthorized); const isPortfolioTrackerDevice = useSelector(selectIsPortfolioTrackerDevice); @@ -110,8 +106,7 @@ export const useShowViewOnlyAlert = () => { !isPortfolioTrackerDevice && !hasDiscovery && !viewOnlyCancelationTimestamp && - !isCreatingNewPassphraseWallet && - (isBiometricsInitialSetupFinished || !isAvailableBiometrics); + !isCreatingNewPassphraseWallet; //show after a delay if (canBeShowed) { @@ -129,7 +124,6 @@ export const useShowViewOnlyAlert = () => { }, [ hasDiscovery, isAvailableBiometrics, - isBiometricsInitialSetupFinished, isDeviceReadyToUseAndAuthorized, isDeviceRemembered, isPortfolioTrackerDevice, diff --git a/suite-native/module-onboarding/src/screens/BiometricsScreen.tsx b/suite-native/module-onboarding/src/screens/BiometricsScreen.tsx index 7c6e1a7c1a6..41bfb75eedb 100644 --- a/suite-native/module-onboarding/src/screens/BiometricsScreen.tsx +++ b/suite-native/module-onboarding/src/screens/BiometricsScreen.tsx @@ -89,14 +89,14 @@ export const BiometricsScreen = ({ - )} - - - - ); -}; diff --git a/suite-native/module-onboarding-legacy/src/components/OnboardingScreen.tsx b/suite-native/module-onboarding-legacy/src/components/OnboardingScreen.tsx deleted file mode 100644 index 920f2f3a309..00000000000 --- a/suite-native/module-onboarding-legacy/src/components/OnboardingScreen.tsx +++ /dev/null @@ -1,84 +0,0 @@ -import { ReactNode, useMemo } from 'react'; -import { Dimensions, ImageBackground, Platform } from 'react-native'; - -import { Screen } from '@suite-native/navigation'; -import { Box } from '@suite-native/atoms'; -import { prepareNativeStyle, useNativeStyles } from '@trezor/styles'; -import { useActiveColorScheme } from '@suite-native/theme'; - -type OnboardingScreenProps = { - children: ReactNode; - header?: ReactNode; - footer?: ReactNode; - isScrollable?: boolean; -}; - -const contentStyle = prepareNativeStyle(utils => ({ - flex: 1, - backgroundColor: utils.colors.backgroundSurfaceElevation0, - alignItems: 'center', -})); - -const cardStyle = prepareNativeStyle(utils => ({ - marginHorizontal: utils.spacings.sp8, - marginTop: utils.spacings.sp16, - paddingTop: utils.spacings.sp24, - borderRadius: 20, - borderWidth: utils.borders.widths.small, - borderColor: utils.colors.borderElevation1, - backgroundColor: utils.transparentize(0.3, utils.colors.backgroundSurfaceElevation1), - ...(Platform.OS === 'ios' ? utils.boxShadows.small : {}), - width: Dimensions.get('window').width - 48, -})); - -const imageContainerStyle = prepareNativeStyle(() => ({ - position: 'absolute', - left: 0, - top: 0, - right: 0, - aspectRatio: 390 / 296, -})); - -export const OnboardingScreen = ({ - children, - header, - footer, - isScrollable = true, -}: OnboardingScreenProps) => { - const { applyStyle } = useNativeStyles(); - const colorScheme = useActiveColorScheme(); - - const getImageSource = useMemo(() => { - if (colorScheme === 'dark') { - return require('../assets/darkRectangles.png'); - } - - return require('../assets/rectangles.png'); - }, [colorScheme]); - - return ( - - - - - {header} - {children} - - {footer && ( - - {footer} - - )} - - - ); -}; diff --git a/suite-native/module-onboarding-legacy/src/components/OnboardingScreenHeader.tsx b/suite-native/module-onboarding-legacy/src/components/OnboardingScreenHeader.tsx deleted file mode 100644 index a27d5bc49ae..00000000000 --- a/suite-native/module-onboarding-legacy/src/components/OnboardingScreenHeader.tsx +++ /dev/null @@ -1,55 +0,0 @@ -import { ReactNode } from 'react'; - -import { prepareNativeStyle, useNativeStyles } from '@trezor/styles'; -import { Box, StepsProgressBar, Text } from '@suite-native/atoms'; -import { FeatureFlag, useFeatureFlag } from '@suite-native/feature-flags'; - -type OnboardingScreenHeaderProps = { - title: ReactNode; - subtitle?: ReactNode; - activeStep: number; -}; - -const titleStyle = prepareNativeStyle(utils => ({ - textAlign: 'center', - marginBottom: utils.spacings.sp12, -})); - -const wrapperStyle = prepareNativeStyle(utils => ({ - paddingHorizontal: utils.spacings.sp16, - paddingTop: utils.spacings.sp32, -})); - -const subtitleStyle = prepareNativeStyle(() => ({ - textAlign: 'center', - minHeight: 73, -})); - -export const OnboardingScreenHeader = ({ - title, - subtitle, - activeStep, -}: OnboardingScreenHeaderProps) => { - const { applyStyle } = useNativeStyles(); - - const isUsbDeviceConnectFeatureEnabled = useFeatureFlag(FeatureFlag.IsDeviceConnectEnabled); - - return ( - - - - - - {title} - - {subtitle && ( - - {subtitle} - - )} - - ); -}; diff --git a/suite-native/module-onboarding-legacy/src/index.ts b/suite-native/module-onboarding-legacy/src/index.ts deleted file mode 100644 index e68ebbab748..00000000000 --- a/suite-native/module-onboarding-legacy/src/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './navigation/OnboardingStackNavigator'; diff --git a/suite-native/module-onboarding-legacy/src/navigation/OnboardingStackNavigator.tsx b/suite-native/module-onboarding-legacy/src/navigation/OnboardingStackNavigator.tsx deleted file mode 100644 index ae3dff75e0b..00000000000 --- a/suite-native/module-onboarding-legacy/src/navigation/OnboardingStackNavigator.tsx +++ /dev/null @@ -1,43 +0,0 @@ -import { createNativeStackNavigator } from '@react-navigation/native-stack'; - -import { - LegacyOnboardingStackRoutes, - LegacyOnboardingStackParamList, - stackNavigationOptionsConfig, -} from '@suite-native/navigation'; - -import { WelcomeScreen } from '../screens/WelcomeScreen'; -import { TrackBalancesScreen } from '../screens/TrackBalancesScreen'; -import { FeatureReceiveScreen } from '../screens/FeatureReceiveScreen'; -import { AnalyticsConsentScreen } from '../screens/AnalyticsConsentScreen'; -import { ConnectTrezorScreen } from '../screens/ConnectTrezorScreen'; - -export const OnboardingStack = createNativeStackNavigator(); - -export const OnboardingStackNavigator = () => ( - - - - - - - -); diff --git a/suite-native/module-onboarding-legacy/src/screens/AnalyticsConsentScreen.tsx b/suite-native/module-onboarding-legacy/src/screens/AnalyticsConsentScreen.tsx deleted file mode 100644 index 1a5a49214ab..00000000000 --- a/suite-native/module-onboarding-legacy/src/screens/AnalyticsConsentScreen.tsx +++ /dev/null @@ -1,217 +0,0 @@ -import { useState } from 'react'; -import { Platform } from 'react-native'; -import { useDispatch } from 'react-redux'; - -import { useNavigation } from '@react-navigation/native'; -import { CommonActions } from '@react-navigation/core'; - -import { setIsOnboardingFinished } from '@suite-native/settings'; -import { - HomeStackRoutes, - LegacyOnboardingStackParamList as OnboardingStackParamList, - LegacyOnboardingStackRoutes as OnboardingStackRoutes, - RootStackParamList, - RootStackRoutes, - Screen, - StackToStackCompositeNavigationProps, -} from '@suite-native/navigation'; -import { Box, Button, Stack, Switch, 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 { EventType, analytics } from '@suite-native/analytics'; -import { Link } from '@suite-native/link'; - -import { AnalyticsInfoRow } from '../components/AnalyticsInfoRow'; - -type NavigationProps = StackToStackCompositeNavigationProps< - OnboardingStackParamList, - OnboardingStackRoutes.AnalyticsConsent, - RootStackParamList ->; - -const titleStyle = prepareNativeStyle(utils => ({ - textAlign: 'center', - marginTop: utils.spacings.sp24, - marginBottom: utils.spacings.sp12, - paddingHorizontal: utils.spacings.sp24, -})); - -const subtitleStyle = prepareNativeStyle(utils => ({ - textAlign: 'center', - marginBottom: utils.spacings.sp24, - paddingHorizontal: utils.spacings.sp24, -})); - -const buttonsWrapperStyle = prepareNativeStyle(utils => ({ - alignSelf: 'stretch', - marginHorizontal: utils.spacings.sp8, - marginBottom: utils.spacings.sp8, -})); - -const cardStyle = prepareNativeStyle(utils => ({ - marginHorizontal: utils.spacings.sp8, - marginTop: utils.spacings.sp8, - marginBottom: utils.spacings.sp24, - paddingHorizontal: utils.spacings.sp16, - paddingTop: 60, - paddingBottom: 20, - borderRadius: 20, - borderWidth: utils.borders.widths.small, - borderColor: utils.colors.borderElevation1, - backgroundColor: utils.transparentize(0.3, utils.colors.backgroundSurfaceElevation1), - ...(Platform.OS === 'ios' ? utils.boxShadows.small : {}), -})); - -const consentInfoStyle = prepareNativeStyle(utils => ({ - gap: utils.spacings.sp8, - paddingVertical: utils.spacings.sp4, - alignItems: 'center', -})); - -const analyticsConsentStyle = prepareNativeStyle(_ => ({ - flex: 1, - justifyContent: 'space-between', - width: '100%', -})); - -const consentWrapperStyle = prepareNativeStyle(utils => ({ - paddingHorizontal: utils.spacings.sp16, - paddingVertical: utils.spacings.sp16, - marginBottom: utils.spacings.sp8, - borderRadius: utils.spacings.sp16, - backgroundColor: utils.colors.backgroundTertiaryDefaultOnElevation1, - width: '100%', - flexDirection: 'row', - flexWrap: 'wrap', -})); - -const reportAnalyticsOnboardingCompleted = (isTrackingAllowed: boolean) => { - // For users who have not allowed tracking, enable analytics just for reporting - // the OnboardingCompleted event and then disable it again. - if (!isTrackingAllowed) analytics.enable(); - analytics.report({ - type: EventType.OnboardingCompleted, - payload: { analyticsPermission: isTrackingAllowed }, - }); - if (!isTrackingAllowed) analytics.disable(); -}; - -export const AnalyticsConsentScreen = () => { - const [isEnabled, setIsEnabled] = useState(true); - - const navigation = useNavigation(); - - const { applyStyle } = useNativeStyles(); - - const dispatch = useDispatch(); - - const handleRedirect = () => { - dispatch(setIsOnboardingFinished()); - reportAnalyticsOnboardingCompleted(isEnabled); - - navigation.dispatch( - CommonActions.reset({ - index: 0, - routes: [ - { - name: RootStackRoutes.AppTabs, - params: { - screen: HomeStackRoutes.Home, - }, - }, - ], - }), - ); - }; - - const handleAnalyticsConsent = () => { - analytics.enable(); - handleRedirect(); - }; - - return ( - - - - - - - - - - - - - } - description={ - - } - /> - - } - description={ - - } - /> - - - - - - - - - - { - setIsEnabled(enabled); - }} - /> - - - - ( - - ), - }} - /> - - - - - - - - - ); -}; diff --git a/suite-native/module-onboarding-legacy/src/screens/ConnectTrezorScreen.tsx b/suite-native/module-onboarding-legacy/src/screens/ConnectTrezorScreen.tsx deleted file mode 100644 index 8a8b2f3ce17..00000000000 --- a/suite-native/module-onboarding-legacy/src/screens/ConnectTrezorScreen.tsx +++ /dev/null @@ -1,62 +0,0 @@ -import { Dimensions } from 'react-native'; - -import { useNavigation } from '@react-navigation/native'; - -import { - LegacyOnboardingStackParamList as OnboardingStackParamList, - LegacyOnboardingStackRoutes as OnboardingStackRoutes, - StackNavigationProps, -} from '@suite-native/navigation'; -import { Translation } from '@suite-native/intl'; -import { prepareNativeStyle, useNativeStyles } from '@trezor/styles'; -import { ConnectDeviceAnimation } from '@suite-native/device'; - -import { OnboardingFooter } from '../components/OnboardingFooter'; -import { OnboardingScreen } from '../components/OnboardingScreen'; -import { OnboardingScreenHeader } from '../components/OnboardingScreenHeader'; - -const ANIMATION_SCALE = 0.35; -const ANIMATION_HEIGHT = Dimensions.get('screen').height * ANIMATION_SCALE; -const ANIMATION_WIDTH = Dimensions.get('screen').width * ANIMATION_SCALE; - -const animationStyle = prepareNativeStyle(() => ({ - // Both height and width has to be set https://github.com/lottie-react-native/lottie-react-native/blob/master/MIGRATION-5-TO-6.md#updating-the-style-props - height: ANIMATION_HEIGHT, - width: ANIMATION_WIDTH, - borderColor: 'transparent', -})); - -export const ConnectTrezorScreen = () => { - const { applyStyle } = useNativeStyles(); - - const navigation = - useNavigation< - StackNavigationProps - >(); - - const handleRedirect = () => { - navigation.navigate(OnboardingStackRoutes.AboutReceiveCoinsFeature); - }; - - return ( - } - subtitle={} - activeStep={1} - /> - } - footer={ - } - nextButtonTitle={} - redirectTarget={handleRedirect} - onBack={navigation.goBack} - /> - } - > - - - ); -}; diff --git a/suite-native/module-onboarding-legacy/src/screens/FeatureReceiveScreen.tsx b/suite-native/module-onboarding-legacy/src/screens/FeatureReceiveScreen.tsx deleted file mode 100644 index 83e6c947466..00000000000 --- a/suite-native/module-onboarding-legacy/src/screens/FeatureReceiveScreen.tsx +++ /dev/null @@ -1,84 +0,0 @@ -import { ReactNode } from 'react'; - -import { useNavigation } from '@react-navigation/native'; - -import { FeatureFlag, useFeatureFlag } from '@suite-native/feature-flags'; -import { - LegacyOnboardingStackParamList as OnboardingStackParamList, - LegacyOnboardingStackRoutes as OnboardingStackRoutes, - StackNavigationProps, -} from '@suite-native/navigation'; -import { Box } from '@suite-native/atoms'; -import { TxKeyPath, Translation } from '@suite-native/intl'; - -import { OnboardingFooter } from '../components/OnboardingFooter'; -import { OnboardingScreen } from '../components/OnboardingScreen'; -import { CoinsSvg } from '../components/CoinsSvg'; -import { OnboardingScreenHeader } from '../components/OnboardingScreenHeader'; - -type NavigationProps = StackNavigationProps< - OnboardingStackParamList, - OnboardingStackRoutes.AboutReceiveCoinsFeature ->; - -type ScreenContent = { - title: TxKeyPath; - subtitle: TxKeyPath; - redirectTarget: OnboardingStackRoutes; -}; -const receiveScreenContentMap = { - device: { - title: 'moduleOnboarding.featureReceiveScreen.device.title', - subtitle: 'moduleOnboarding.featureReceiveScreen.device.subtitle', - redirectTarget: OnboardingStackRoutes.TrackBalances, - }, - portfolioTracker: { - title: 'moduleOnboarding.featureReceiveScreen.portfolioTracker.title', - subtitle: 'moduleOnboarding.featureReceiveScreen.portfolioTracker.subtitle', - redirectTarget: OnboardingStackRoutes.AnalyticsConsent, - }, -} as const satisfies Record<'device' | 'portfolioTracker', ScreenContent>; - -const IconWrapper = ({ children }: { children: ReactNode }) => { - const isUsbDeviceConnectFeatureEnabled = useFeatureFlag(FeatureFlag.IsDeviceConnectEnabled); - - if (!isUsbDeviceConnectFeatureEnabled) return <>{children}; - - return ( - - {children} - - ); -}; - -export const FeatureReceiveScreen = () => { - const navigation = useNavigation(); - const isUsbDeviceConnectFeatureEnabled = useFeatureFlag(FeatureFlag.IsDeviceConnectEnabled); - - const content = - receiveScreenContentMap[isUsbDeviceConnectFeatureEnabled ? 'device' : 'portfolioTracker']; - - return ( - } - subtitle={} - activeStep={2} - /> - } - footer={ - navigation.navigate(content.redirectTarget)} - onBack={navigation.goBack} - backButtonTitle={} - nextButtonTitle={} - /> - } - > - - - - - ); -}; diff --git a/suite-native/module-onboarding-legacy/src/screens/TrackBalancesScreen.tsx b/suite-native/module-onboarding-legacy/src/screens/TrackBalancesScreen.tsx deleted file mode 100644 index 13c901c9e09..00000000000 --- a/suite-native/module-onboarding-legacy/src/screens/TrackBalancesScreen.tsx +++ /dev/null @@ -1,87 +0,0 @@ -import { ReactNode } from 'react'; - -import { useNavigation } from '@react-navigation/native'; - -import { FeatureFlag, useFeatureFlag } from '@suite-native/feature-flags'; -import { - LegacyOnboardingStackParamList as OnboardingStackParamList, - LegacyOnboardingStackRoutes as OnboardingStackRoutes, - StackNavigationProps, -} from '@suite-native/navigation'; -import { Box } from '@suite-native/atoms'; -import { TxKeyPath, Translation } from '@suite-native/intl'; - -import { OnboardingFooter } from '../components/OnboardingFooter'; -import { OnboardingScreen } from '../components/OnboardingScreen'; -import { GraphSvg } from '../components/GraphSvg'; -import { OnboardingScreenHeader } from '../components/OnboardingScreenHeader'; - -type ScreenContent = { - title: TxKeyPath; - subtitle: TxKeyPath; - redirectTarget: OnboardingStackRoutes; -}; -const trackBalancesScreenContentMap = { - device: { - title: 'moduleOnboarding.trackBalancesScreen.device.title', - subtitle: 'moduleOnboarding.trackBalancesScreen.device.subtitle', - redirectTarget: OnboardingStackRoutes.AnalyticsConsent, - }, - portfolioTracker: { - title: 'moduleOnboarding.trackBalancesScreen.portfolioTracker.title', - subtitle: 'moduleOnboarding.trackBalancesScreen.portfolioTracker.subtitle', - redirectTarget: OnboardingStackRoutes.AboutReceiveCoinsFeature, - }, -} as const satisfies Record<'device' | 'portfolioTracker', ScreenContent>; - -type NavigationProp = StackNavigationProps< - OnboardingStackParamList, - OnboardingStackRoutes.TrackBalances ->; - -const IconWrapper = ({ children }: { children: ReactNode }) => { - const isUsbDeviceConnectFeatureEnabled = useFeatureFlag(FeatureFlag.IsDeviceConnectEnabled); - - if (!isUsbDeviceConnectFeatureEnabled) return <>{children}; - - return ( - - {children} - - ); -}; - -export const TrackBalancesScreen = () => { - const isUsbDeviceConnectFeatureEnabled = useFeatureFlag(FeatureFlag.IsDeviceConnectEnabled); - - const navigation = useNavigation(); - - const content = - trackBalancesScreenContentMap[ - isUsbDeviceConnectFeatureEnabled ? 'device' : 'portfolioTracker' - ]; - - return ( - } - subtitle={} - activeStep={isUsbDeviceConnectFeatureEnabled ? 3 : 1} - /> - } - footer={ - navigation.navigate(content.redirectTarget)} - onBack={navigation.goBack} - backButtonTitle={} - nextButtonTitle={} - /> - } - > - - - - - ); -}; diff --git a/suite-native/module-onboarding-legacy/src/screens/WelcomeScreen.tsx b/suite-native/module-onboarding-legacy/src/screens/WelcomeScreen.tsx deleted file mode 100644 index 09824ac0f2a..00000000000 --- a/suite-native/module-onboarding-legacy/src/screens/WelcomeScreen.tsx +++ /dev/null @@ -1,93 +0,0 @@ -import { useNavigation } from '@react-navigation/native'; - -import { FeatureFlag, useFeatureFlag } from '@suite-native/feature-flags'; -import { Link } from '@suite-native/link'; -import { Box, Text, TrezorSuiteLiteHeader } from '@suite-native/atoms'; -import { - LegacyOnboardingStackParamList as OnboardingStackParamList, - LegacyOnboardingStackRoutes as OnboardingStackRoutes, - StackNavigationProps, -} from '@suite-native/navigation'; -import { Translation } from '@suite-native/intl'; -import { Icon } from '@suite-native/icons'; -import { prepareNativeStyle, useNativeStyles } from '@trezor/styles'; - -import { OnboardingFooter } from '../components/OnboardingFooter'; -import { OnboardingScreen } from '../components/OnboardingScreen'; -import { E2ESkipOnboardingButton } from '../components/E2ESkipOnboardingButton'; - -const titleStyle = prepareNativeStyle(utils => ({ - textAlign: 'center', - marginBottom: utils.spacings.sp12, - alignItems: 'center', -})); - -const trezorLinkStyle = prepareNativeStyle(utils => ({ - paddingBottom: utils.spacings.sp24, - justifyContent: 'flex-end', -})); - -export const WelcomeScreen = () => { - const isUsbDeviceConnectFeatureEnabled = useFeatureFlag(FeatureFlag.IsDeviceConnectEnabled); - - const navigation = - useNavigation< - StackNavigationProps - >(); - - const { applyStyle } = useNativeStyles(); - - const handleRedirect = () => { - navigation.navigate( - isUsbDeviceConnectFeatureEnabled - ? OnboardingStackRoutes.ConnectTrezor - : OnboardingStackRoutes.TrackBalances, - ); - }; - - return ( - } - /> - } - > - - - - - - - - - - - - - - - - - - - - - ( - - ), - }} - /> - - - - ); -}; diff --git a/suite-native/module-onboarding-legacy/tsconfig.json b/suite-native/module-onboarding-legacy/tsconfig.json deleted file mode 100644 index 572b4d5cbf6..00000000000 --- a/suite-native/module-onboarding-legacy/tsconfig.json +++ /dev/null @@ -1,17 +0,0 @@ -{ - "extends": "../../tsconfig.base.json", - "compilerOptions": { "outDir": "libDev" }, - "references": [ - { "path": "../analytics" }, - { "path": "../atoms" }, - { "path": "../device" }, - { "path": "../feature-flags" }, - { "path": "../icons" }, - { "path": "../intl" }, - { "path": "../link" }, - { "path": "../navigation" }, - { "path": "../settings" }, - { "path": "../theme" }, - { "path": "../../packages/styles" } - ] -} diff --git a/suite-native/module-onboarding-legacy/src/components/E2ESkipOnboardingButton.e2e.tsx b/suite-native/module-onboarding/src/components/E2ESkipOnboardingButton.e2e.tsx similarity index 100% rename from suite-native/module-onboarding-legacy/src/components/E2ESkipOnboardingButton.e2e.tsx rename to suite-native/module-onboarding/src/components/E2ESkipOnboardingButton.e2e.tsx diff --git a/suite-native/module-onboarding-legacy/src/components/E2ESkipOnboardingButton.tsx b/suite-native/module-onboarding/src/components/E2ESkipOnboardingButton.tsx similarity index 100% rename from suite-native/module-onboarding-legacy/src/components/E2ESkipOnboardingButton.tsx rename to suite-native/module-onboarding/src/components/E2ESkipOnboardingButton.tsx diff --git a/suite-native/module-onboarding/src/screens/WelcomeScreen.tsx b/suite-native/module-onboarding/src/screens/WelcomeScreen.tsx index 3395338040a..34c44cb28f6 100644 --- a/suite-native/module-onboarding/src/screens/WelcomeScreen.tsx +++ b/suite-native/module-onboarding/src/screens/WelcomeScreen.tsx @@ -17,6 +17,8 @@ import { hexToRgba } from '@suite-common/suite-utils'; import { getWindowHeight } from '@trezor/env-utils'; import { colorVariants } from '@trezor/theme'; +import { E2ESkipOnboardingButton } from '../components/E2ESkipOnboardingButton'; + const GRADIENT_HEIGHT = getWindowHeight() / 3; const BLACK_BACKGROUND_COLOR = '#000000'; @@ -27,7 +29,7 @@ const gradientBackgroundBottomStyle = prepareNativeStyle(() => ({ const buttonWrapperStyle = prepareNativeStyle(utils => ({ width: '100%', - paddingBottom: utils.spacings.sp32, + paddingBottom: utils.spacings.sp16, })); const textColorStyle = prepareNativeStyle(() => ({ @@ -73,11 +75,11 @@ export const WelcomeScreen = ({ > @@ -97,6 +99,7 @@ export const WelcomeScreen = ({ +