diff --git a/suite-native/biometrics/src/biometricsAtoms.ts b/suite-native/biometrics/src/biometricsAtoms.ts index 1baafdd4ed8..2d56fabbde1 100644 --- a/suite-native/biometrics/src/biometricsAtoms.ts +++ b/suite-native/biometrics/src/biometricsAtoms.ts @@ -7,11 +7,6 @@ const isBiometricsOptionEnabledAtom = atomWithUnecryptedStorage( false, ); -const isBiometricsInitialSetupFinishedAtom = atomWithUnecryptedStorage( - 'isBiometricsInitialSetupFinished', - false, -); - const isUserAuthenticatedAtom = atom(false); const isBiometricsOverlayVisibleAtom = atom(true); @@ -32,14 +27,6 @@ export const useIsBiometricsEnabled = () => { }; }; -export const useIsBiometricsInitialSetupFinished = () => { - const [isBiometricsInitialSetupFinished, setIsBiometricsInitialSetupFinished] = useAtom( - isBiometricsInitialSetupFinishedAtom, - ); - - return { isBiometricsInitialSetupFinished, setIsBiometricsInitialSetupFinished }; -}; - export const useIsBiometricsOverlayVisible = () => { const isBiometricsOptionEnabled = useAtomValue(isBiometricsOptionEnabledAtom); const [isBiometricsOverlayVisibleAtomValue, setBiometricsOverlayVisibleAtomValue] = useAtom( diff --git a/suite-native/intl/src/en.ts b/suite-native/intl/src/en.ts index dc1020dc4e3..825192413a8 100644 --- a/suite-native/intl/src/en.ts +++ b/suite-native/intl/src/en.ts @@ -70,19 +70,6 @@ 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', - }, - resultMsg: { - error: 'Unable to enable biometrics', - success: 'Biometrics enabled', - }, - }, rememberModeModal: { title: 'Enable view-only to check balances after you disconnect your Trezor', description: @@ -776,40 +763,6 @@ export const en = { 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', - subtitleLegacy: 'Securely track, manage & receive\ncrypto on the go', - trezorLink: 'Don’t have a Trezor? Get one here.', - nextButton: 'Get started', - }, - connectTrezorScreen: { - title: 'Connect', - subtitle: - 'Manage your portfolio with your Trezor hardware wallet connected directly to your mobile device.', - }, - featureReceiveScreen: { - portfolioTracker: { - title: 'Receive coins', - subtitle: 'Generate addresses and QR codes to receive crypto on the go.', - }, - device: { - title: 'Receive', - subtitle: - 'Generate and verify addresses directly on your Trezor to get paid and receive crypto on the go.', - }, - }, - trackBalancesScreen: { - portfolioTracker: { - title: 'Track balances', - subtitle: - 'Easily sync your coin addresses and keep up with the crypto on your hardware wallet.', - }, - device: { - title: 'Track balances', - subtitle: - 'Keep up with your favorite coins even without your Trezor connected. Simply sync and track your crypto from anywhere.', - }, }, analyticsConsentScreen: { title: 'Better—with you.', @@ -829,11 +782,6 @@ export const en = { }, helpSwitchTitle: 'Help us anonymously', learnMoreButton: 'More about privacy', - - // TODO: this should be removed when is the new onboarding enabled by default - titleLegacy: 'Better with you', - subtitleLegacy: 'Improve Trezor Suite Lite with your anonymous data.', - learnMore: 'More about privacy', }, biometricsScreen: { title: 'Biometrics', diff --git a/suite-native/module-home/src/screens/HomeScreen/useShowBiometricsAlert.tsx b/suite-native/module-home/src/screens/HomeScreen/useShowBiometricsAlert.tsx deleted file mode 100644 index fac49d4bbbe..00000000000 --- a/suite-native/module-home/src/screens/HomeScreen/useShowBiometricsAlert.tsx +++ /dev/null @@ -1,113 +0,0 @@ -import React, { useCallback, useEffect } from 'react'; -import { useSelector } from 'react-redux'; - -import { - selectIsDeviceAuthorized, - selectIsPortfolioTrackerDevice, -} from '@suite-common/wallet-core'; -import { useAlert } from '@suite-native/alerts'; -import { analytics, EventType } from '@suite-native/analytics'; -import { CenteredTitleHeader, VStack } from '@suite-native/atoms'; -import { - BiometricsSvg, - getIsBiometricsFeatureAvailable, - useBiometricsSettings, - useIsBiometricsEnabled, - useIsBiometricsInitialSetupFinished, -} from '@suite-native/biometrics'; -import { selectIsCoinEnablingInitFinished } from '@suite-native/discovery'; -import { Translation } from '@suite-native/intl'; -import { TimerId } from '@trezor/type-utils'; - -const SHOW_TIMEOUT = 1500; - -export const useShowBiometricsAlert = () => { - const { showAlert } = useAlert(); - - const { isBiometricsInitialSetupFinished, setIsBiometricsInitialSetupFinished } = - useIsBiometricsInitialSetupFinished(); - const { isBiometricsOptionEnabled } = useIsBiometricsEnabled(); - const { toggleBiometricsOption } = useBiometricsSettings(); - - const isDeviceAuthorized = useSelector(selectIsDeviceAuthorized); - const isPortfolioTracker = useSelector(selectIsPortfolioTrackerDevice); - const isCoinEnablingInitFinished = useSelector(selectIsCoinEnablingInitFinished); - - const handleEnable = useCallback(async () => { - const result = await toggleBiometricsOption(); - if (result === 'enabled') { - setIsBiometricsInitialSetupFinished(true); - analytics.report({ - type: EventType.BiometricsChange, - payload: { - enabled: true, - origin: 'bottomSheet', - }, - }); - } - }, [setIsBiometricsInitialSetupFinished, toggleBiometricsOption]); - - const handleCancel = useCallback(() => { - setIsBiometricsInitialSetupFinished(true); - }, [setIsBiometricsInitialSetupFinished]); - - const showBiometricsAlert = useCallback(() => { - showAlert({ - primaryButtonTitle: , - onPressPrimaryButton: handleEnable, - secondaryButtonTitle: , - onPressSecondaryButton: handleCancel, - appendix: ( - - - } - subtitle={} - /> - - ), - }); - }, [showAlert, handleEnable, handleCancel]); - - useEffect(() => { - if (isBiometricsInitialSetupFinished) { - return; - } - - let isMounted = true; - let timerId: TimerId; - const checkBiometrics = async () => { - const isBiometricsAvailable = await getIsBiometricsFeatureAvailable(); - - // if real device is authorized, it is ready only if coin enabling setup was finished. - // if no real device is authorized, set to true - const isReadyWithCoinEnabling = - isDeviceAuthorized && !isPortfolioTracker ? isCoinEnablingInitFinished : true; - - // we need to wait for biometrics and coin enabling init to finish before showing the biometrics modal - if (isBiometricsAvailable && !isBiometricsOptionEnabled && isReadyWithCoinEnabling) { - timerId = setTimeout(() => { - if (isMounted) { - showBiometricsAlert(); - } - }, SHOW_TIMEOUT); - } - }; - - if (isDeviceAuthorized) { - checkBiometrics(); - } - - return () => { - clearTimeout(timerId); - isMounted = false; - }; - }, [ - isBiometricsInitialSetupFinished, - isBiometricsOptionEnabled, - isCoinEnablingInitFinished, - isDeviceAuthorized, - isPortfolioTracker, - showBiometricsAlert, - ]); -}; diff --git a/suite-native/module-onboarding-legacy/package.json b/suite-native/module-onboarding-legacy/package.json deleted file mode 100644 index 88566e0aa43..00000000000 --- a/suite-native/module-onboarding-legacy/package.json +++ /dev/null @@ -1,33 +0,0 @@ -{ - "name": "@suite-native/module-onboarding-legacy", - "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/core": "^6.4.10", - "@react-navigation/native": "6.1.18", - "@react-navigation/native-stack": "6.11.0", - "@reduxjs/toolkit": "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/styles": "workspace:*", - "react": "18.2.0", - "react-native": "0.76.1", - "react-native-svg": "^15.9.0", - "react-redux": "8.0.7" - } -} diff --git a/suite-native/module-onboarding-legacy/redux.d.ts b/suite-native/module-onboarding-legacy/redux.d.ts deleted file mode 100644 index df9a0c3f969..00000000000 --- a/suite-native/module-onboarding-legacy/redux.d.ts +++ /dev/null @@ -1,7 +0,0 @@ -import { AsyncThunkAction } from '@reduxjs/toolkit'; - -declare module 'redux' { - export interface Dispatch { - >(thunk: TThunk): ReturnType; - } -} diff --git a/suite-native/module-onboarding-legacy/src/assets/darkRectangles.png b/suite-native/module-onboarding-legacy/src/assets/darkRectangles.png deleted file mode 100644 index 87f8c3e0af5..00000000000 Binary files a/suite-native/module-onboarding-legacy/src/assets/darkRectangles.png and /dev/null differ diff --git a/suite-native/module-onboarding-legacy/src/assets/darkRectangles@2x.png b/suite-native/module-onboarding-legacy/src/assets/darkRectangles@2x.png deleted file mode 100644 index a3051b37d5d..00000000000 Binary files a/suite-native/module-onboarding-legacy/src/assets/darkRectangles@2x.png and /dev/null differ diff --git a/suite-native/module-onboarding-legacy/src/assets/darkRectangles@3x.png b/suite-native/module-onboarding-legacy/src/assets/darkRectangles@3x.png deleted file mode 100644 index 95d781d925a..00000000000 Binary files a/suite-native/module-onboarding-legacy/src/assets/darkRectangles@3x.png and /dev/null differ diff --git a/suite-native/module-onboarding-legacy/src/assets/rectangles.png b/suite-native/module-onboarding-legacy/src/assets/rectangles.png deleted file mode 100644 index b099c651860..00000000000 Binary files a/suite-native/module-onboarding-legacy/src/assets/rectangles.png and /dev/null differ diff --git a/suite-native/module-onboarding-legacy/src/assets/rectangles@2x.png b/suite-native/module-onboarding-legacy/src/assets/rectangles@2x.png deleted file mode 100644 index 5dc71f0e05f..00000000000 Binary files a/suite-native/module-onboarding-legacy/src/assets/rectangles@2x.png and /dev/null differ diff --git a/suite-native/module-onboarding-legacy/src/assets/rectangles@3x.png b/suite-native/module-onboarding-legacy/src/assets/rectangles@3x.png deleted file mode 100644 index b7e575eb92b..00000000000 Binary files a/suite-native/module-onboarding-legacy/src/assets/rectangles@3x.png and /dev/null differ diff --git a/suite-native/module-onboarding-legacy/src/components/AnalyticsInfoRow.tsx b/suite-native/module-onboarding-legacy/src/components/AnalyticsInfoRow.tsx deleted file mode 100644 index 8160959639f..00000000000 --- a/suite-native/module-onboarding-legacy/src/components/AnalyticsInfoRow.tsx +++ /dev/null @@ -1,43 +0,0 @@ -import { ReactNode } from 'react'; - -import { Icon, IconName } from '@suite-native/icons'; -import { prepareNativeStyle, useNativeStyles } from '@trezor/styles'; -import { Box, Text } from '@suite-native/atoms'; - -type AnalyticsInfoRowProps = { - iconName: IconName; - title: ReactNode; - description: ReactNode; -}; - -const iconWrapper = prepareNativeStyle(utils => ({ - justifyContent: 'center', - alignItems: 'center', - width: 48, - height: 48, - backgroundColor: utils.colors.backgroundSurfaceElevation2, - borderRadius: utils.borders.radii.round, -})); - -const rowContentStyle = prepareNativeStyle(utils => ({ - marginLeft: utils.spacings.sp12, - marginRight: 48, -})); - -export const AnalyticsInfoRow = ({ iconName, title, description }: AnalyticsInfoRowProps) => { - const { applyStyle } = useNativeStyles(); - - return ( - - - - - - {title} - - {description} - - - - ); -}; diff --git a/suite-native/module-onboarding-legacy/src/components/CoinsSvg.tsx b/suite-native/module-onboarding-legacy/src/components/CoinsSvg.tsx deleted file mode 100644 index 2a453428563..00000000000 --- a/suite-native/module-onboarding-legacy/src/components/CoinsSvg.tsx +++ /dev/null @@ -1,413 +0,0 @@ -import { Dimensions } from 'react-native'; -import Svg, { - G, - Path, - Rect, - Circle, - Defs, - LinearGradient, - Stop, - ClipPath, - SvgProps, -} from 'react-native-svg'; - -import { useNativeStyles } from '@trezor/styles'; - -const SVG_HEIGHT = Dimensions.get('screen').height * 0.35; - -export const CoinsSvg = (props: SvgProps) => { - const { utils } = useNativeStyles(); - - return ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ); -}; diff --git a/suite-native/module-onboarding-legacy/src/components/GraphSvg.tsx b/suite-native/module-onboarding-legacy/src/components/GraphSvg.tsx deleted file mode 100644 index 04d19e11c9a..00000000000 --- a/suite-native/module-onboarding-legacy/src/components/GraphSvg.tsx +++ /dev/null @@ -1,353 +0,0 @@ -import { Dimensions } from 'react-native'; -import Svg, { - Rect, - Path, - G, - Circle, - Defs, - LinearGradient, - Stop, - ClipPath, - SvgProps, -} from 'react-native-svg'; - -const SVG_HEIGHT = Dimensions.get('window').height * 0.35; - -export const GraphSvg = (props: SvgProps) => ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -); diff --git a/suite-native/module-onboarding-legacy/src/components/OnboardingFooter.tsx b/suite-native/module-onboarding-legacy/src/components/OnboardingFooter.tsx deleted file mode 100644 index 11cd2ace5e9..00000000000 --- a/suite-native/module-onboarding-legacy/src/components/OnboardingFooter.tsx +++ /dev/null @@ -1,52 +0,0 @@ -import { ReactNode } from 'react'; - -import { useRoute } from '@react-navigation/native'; -import { RequireAllOrNone } from 'type-fest'; - -import { Button, Stack } from '@suite-native/atoms'; -import { prepareNativeStyle, useNativeStyles } from '@trezor/styles'; -import { OnboardingStackRoutes } from '@suite-native/navigation'; - -const wrapperStyle = prepareNativeStyle(utils => ({ - width: '100%', - paddingHorizontal: utils.spacings.sp8, - marginBottom: utils.spacings.sp8, -})); - -type OnboardingFooterProps = { - nextButtonTitle?: ReactNode; - redirectTarget: () => void; -} & RequireAllOrNone< - { backButtonTitle?: ReactNode; onBack?: () => void }, - 'backButtonTitle' | 'onBack' ->; - -export const OnboardingFooter = ({ - backButtonTitle, - nextButtonTitle, - redirectTarget, - onBack, -}: OnboardingFooterProps) => { - const { applyStyle } = useNativeStyles(); - const route = useRoute(); - - const buttonTitle = route.name === OnboardingStackRoutes.Welcome ? 'Get started' : 'Next'; - - return ( - - {onBack && ( - - )} - - - - ); -}; 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 = ({ +