Skip to content

Commit e5dda78

Browse files
PeKnePeKne
committed
refactor(suite-native): split app onboarding and device onboarding modules
1 parent 226fc91 commit e5dda78

32 files changed

+231
-116
lines changed

‎suite-native/app/package.json

+1
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,7 @@
6363
"@suite-native/module-authorize-device": "workspace:*",
6464
"@suite-native/module-connect-popup": "workspace:*",
6565
"@suite-native/module-dev-utils": "workspace:*",
66+
"@suite-native/module-device-onboarding": "workspace:*",
6667
"@suite-native/module-device-settings": "workspace:*",
6768
"@suite-native/module-home": "workspace:*",
6869
"@suite-native/module-onboarding": "workspace:*",

‎suite-native/app/src/navigation/RootStackNavigator.tsx

+5
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import { DeviceCompromisedModalScreen } from '@suite-native/module-authenticity-
1313
import { AuthorizeDeviceStackNavigator } from '@suite-native/module-authorize-device';
1414
import { ConnectPopupScreen } from '@suite-native/module-connect-popup';
1515
import { DevUtilsStackNavigator } from '@suite-native/module-dev-utils';
16+
import { DeviceOnboardingStackNavigator } from '@suite-native/module-device-onboarding';
1617
import { DeviceSettingsStackNavigator } from '@suite-native/module-device-settings';
1718
import { OnboardingStackNavigator } from '@suite-native/module-onboarding';
1819
import { SendStackNavigator } from '@suite-native/module-send';
@@ -90,6 +91,10 @@ export const RootStackNavigator = () => {
9091
/>
9192
{/* Navigation flows that start by push from bottom animation on the first screen of its stack. */}
9293
<RootStack.Group screenOptions={{ animation: 'slide_from_bottom' }}>
94+
<RootStack.Screen
95+
name={RootStackRoutes.DeviceOnboardingStack}
96+
component={DeviceOnboardingStackNavigator}
97+
/>
9398
<RootStack.Screen
9499
name={RootStackRoutes.AccountsImport}
95100
component={AccountsImportStackNavigator}

‎suite-native/app/tsconfig.json

+1
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@
5454
{ "path": "../module-authorize-device" },
5555
{ "path": "../module-connect-popup" },
5656
{ "path": "../module-dev-utils" },
57+
{ "path": "../module-device-onboarding" },
5758
{ "path": "../module-device-settings" },
5859
{ "path": "../module-home" },
5960
{ "path": "../module-onboarding" },

‎suite-native/device/src/hooks/useHandleDeviceConnection.ts

+4-4
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,8 @@ import {
2222
AppTabsRoutes,
2323
AuthorizeDeviceStackParamList,
2424
AuthorizeDeviceStackRoutes,
25+
DeviceOnboardingStackRoutes,
2526
HomeStackRoutes,
26-
OnboardingStackRoutes,
2727
RootStackParamList,
2828
RootStackRoutes,
2929
StackToStackCompositeNavigationProps,
@@ -73,7 +73,7 @@ export const useHandleDeviceConnection = () => {
7373
// We should not redirect him away so he can read the screen content and decide what to do.
7474
// If the device is connected again, he still should stay on that screen.
7575
const isSuspiciousDeviceScreenFocused = useNavigationRouteMatch(
76-
OnboardingStackRoutes.SuspiciousDevice,
76+
DeviceOnboardingStackRoutes.SuspiciousDevice,
7777
);
7878
const isConnectAndUnlockDeviceScreenFocused = useNavigationRouteMatch(
7979
AuthorizeDeviceStackRoutes.ConnectAndUnlockDevice,
@@ -101,8 +101,8 @@ export const useHandleDeviceConnection = () => {
101101
!isOnboardingStackFocused &&
102102
!isOnboardingDeviceDisconnectedAlertDisplayed
103103
) {
104-
navigation.navigate(RootStackRoutes.OnboardingStack, {
105-
screen: OnboardingStackRoutes.UninitializedDeviceLanding,
104+
navigation.navigate(RootStackRoutes.DeviceOnboardingStack, {
105+
screen: DeviceOnboardingStackRoutes.UninitializedDeviceLanding,
106106
});
107107
}
108108
}, [

‎suite-native/device/src/hooks/useHandleOnboardingDeviceDisconnection.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -70,12 +70,12 @@ export const useHandleOnboardingDeviceDisconnection = () => {
7070
// We need to wait for the navigation to be completed before showing the alert.
7171
setTimeout(() => {
7272
showAlert({
73-
title: translate('moduleOnboarding.deviceDisconnectedAlert.title'),
73+
title: translate('moduleDeviceOnboarding.deviceDisconnectedAlert.title'),
7474
description: translate(
75-
'moduleOnboarding.deviceDisconnectedAlert.description',
75+
'moduleDeviceOnboarding.deviceDisconnectedAlert.description',
7676
),
7777
primaryButtonTitle: translate(
78-
'moduleOnboarding.deviceDisconnectedAlert.reconnectButton',
78+
'moduleDeviceOnboarding.deviceDisconnectedAlert.reconnectButton',
7979
),
8080
pictogramVariant: 'critical',
8181
primaryButtonVariant: 'redBold',

‎suite-native/intl/src/en.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -777,7 +777,8 @@ export const en = {
777777
notNow: 'Not now',
778778
},
779779
},
780-
780+
},
781+
moduleDeviceOnboarding: {
781782
uninitializedDeviceLandingScreen: {
782783
noFirmware: {
783784
title: 'Now it’s just you\nand your crypto',

‎suite-native/module-device-onboarding/package.json

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
{
2+
"name": "@suite-native/module-device-onboarding",
3+
"version": "1.0.0",
4+
"private": true,
5+
"license": "See LICENSE.md in repo root",
6+
"sideEffects": false,
7+
"main": "src/index",
8+
"scripts": {
9+
"depcheck": "yarn g:depcheck",
10+
"lint:js": "yarn g:eslint '**/*.{ts,tsx,js}'",
11+
"type-check": "yarn g:tsc --build"
12+
},
13+
"dependencies": {
14+
"@react-navigation/core": "^6.4.10",
15+
"@react-navigation/native": "6.1.18",
16+
"@react-navigation/native-stack": "6.11.0",
17+
"@reduxjs/toolkit": "2.6.0",
18+
"@suite-native/atoms": "workspace:*",
19+
"@suite-native/device": "workspace:*",
20+
"@suite-native/icons": "workspace:*",
21+
"@suite-native/intl": "workspace:*",
22+
"@suite-native/navigation": "workspace:*",
23+
"@trezor/device-utils": "workspace:*",
24+
"@trezor/env-utils": "workspace:*",
25+
"@trezor/styles": "workspace:*",
26+
"jotai": "1.9.1",
27+
"react": "18.2.0",
28+
"react-native": "0.76.1",
29+
"react-native-reanimated": "^3.16.7",
30+
"react-native-svg": "^15.9.0",
31+
"react-redux": "9.2.0"
32+
}
33+
}

‎suite-native/module-onboarding/src/assets/t3b1.png ‎suite-native/module-device-onboarding/src/assets/t3b1.png

File renamed without changes.

‎suite-native/module-onboarding/src/assets/t3b1Seal1.png ‎suite-native/module-device-onboarding/src/assets/t3b1Seal1.png

File renamed without changes.

‎suite-native/module-onboarding/src/assets/t3b1Seal2.png ‎suite-native/module-device-onboarding/src/assets/t3b1Seal2.png

File renamed without changes.

‎suite-native/module-onboarding/src/assets/t3t1.png ‎suite-native/module-device-onboarding/src/assets/t3t1.png

File renamed without changes.

‎suite-native/module-onboarding/src/assets/t3t1Seal.png ‎suite-native/module-device-onboarding/src/assets/t3t1Seal.png

File renamed without changes.

‎suite-native/module-onboarding/src/components/HeaderUnderlineSvg.tsx ‎suite-native/module-device-onboarding/src/components/HeaderUnderlineSvg.tsx

File renamed without changes.

‎suite-native/module-onboarding/src/components/OnboardingScreenWithExitButton.tsx ‎suite-native/module-device-onboarding/src/components/OnboardingScreenWithExitButton.tsx

+6-6
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import { wasDeviceDisconnectedByUserActionAtom } from '@suite-native/device';
1010
import { useTranslate } from '@suite-native/intl';
1111
import { Screen, ScreenHeader, ScreenProps } from '@suite-native/navigation';
1212

13-
const OnboardingExitButtonScreenHeader = () => {
13+
const DeviceOnboardingExitButtonScreenHeader = () => {
1414
const navigation = useNavigation();
1515
const { showAlert } = useAlert();
1616
const { translate } = useTranslate();
@@ -20,12 +20,12 @@ const OnboardingExitButtonScreenHeader = () => {
2020

2121
const handleExitButtonPress = useCallback(() => {
2222
showAlert({
23-
title: translate('moduleOnboarding.cancelOnboardingAlert.title'),
24-
description: translate('moduleOnboarding.cancelOnboardingAlert.description'),
23+
title: translate('moduleDeviceOnboarding.cancelOnboardingAlert.title'),
24+
description: translate('moduleDeviceOnboarding.cancelOnboardingAlert.description'),
2525
primaryButtonTitle: translate('generic.buttons.cancel'),
2626
primaryButtonVariant: 'redBold',
2727
secondaryButtonTitle: translate(
28-
'moduleOnboarding.cancelOnboardingAlert.continueButton',
28+
'moduleDeviceOnboarding.cancelOnboardingAlert.continueButton',
2929
),
3030
secondaryButtonVariant: 'redElevation0',
3131
onPressPrimaryButton: () => {
@@ -52,8 +52,8 @@ const OnboardingExitButtonScreenHeader = () => {
5252
return <ScreenHeader closeActionType="close" closeAction={handleExitButtonPress} />;
5353
};
5454

55-
export const OnboardingScreenWithExitButton = ({ children, ...screenProps }: ScreenProps) => (
56-
<Screen header={<OnboardingExitButtonScreenHeader />} {...screenProps}>
55+
export const DeviceOnboardingScreenWithExitButton = ({ children, ...screenProps }: ScreenProps) => (
56+
<Screen header={<DeviceOnboardingExitButtonScreenHeader />} {...screenProps}>
5757
{children}
5858
</Screen>
5959
);

‎suite-native/module-onboarding/src/components/SecurityCheckStepCard.tsx ‎suite-native/module-device-onboarding/src/components/SecurityCheckStepCard.tsx

+6-6
Original file line numberDiff line numberDiff line change
@@ -21,9 +21,9 @@ import {
2121
import { Icon, IconName } from '@suite-native/icons';
2222
import { Translation } from '@suite-native/intl';
2323
import {
24+
DeviceOnboardingStackParamList,
25+
DeviceOnboardingStackRoutes,
2426
DeviceSuspicionCause,
25-
OnboardingStackParamList,
26-
OnboardingStackRoutes,
2727
StackNavigationProps,
2828
} from '@suite-native/navigation';
2929
import { prepareNativeStyle, useNativeStyles } from '@trezor/styles';
@@ -40,8 +40,8 @@ type SecurityCheckStepCardProps = {
4040
};
4141

4242
type NavigationProps = StackNavigationProps<
43-
OnboardingStackParamList,
44-
OnboardingStackRoutes.SecurityCheck
43+
DeviceOnboardingStackParamList,
44+
DeviceOnboardingStackRoutes.SecurityCheck
4545
>;
4646

4747
const ANIMATION_DURATION = 300;
@@ -71,7 +71,7 @@ export const SecurityCheckStepCard = ({
7171
const headerColor: Color = isChecked ? 'textPrimaryDefault' : 'textSubdued';
7272

7373
const navigateToSuspiciousDeviceScreen = () => {
74-
navigation.navigate(OnboardingStackRoutes.SuspiciousDevice, {
74+
navigation.navigate(DeviceOnboardingStackRoutes.SuspiciousDevice, {
7575
suspicionCause,
7676
});
7777
};
@@ -128,7 +128,7 @@ export const SecurityCheckStepCard = ({
128128
colorScheme="tertiaryElevation0"
129129
onPress={navigateToSuspiciousDeviceScreen}
130130
>
131-
<Translation id="moduleOnboarding.securityCheckScreen.declineButton" />
131+
<Translation id="moduleDeviceOnboarding.securityCheckScreen.declineButton" />
132132
</Button>
133133
</HStack>
134134
</AnimatedVStack>

‎suite-native/module-onboarding/src/components/SecuritySealDescription.tsx ‎suite-native/module-device-onboarding/src/components/SecuritySealDescription.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ export const SecuritySealDescription = () => {
3333
<>
3434
<Text variant="highlight">
3535
<Translation
36-
id="moduleOnboarding.securityCheckScreen.step2.description"
36+
id="moduleDeviceOnboarding.securityCheckScreen.step2.description"
3737
values={{
3838
link: linkChunk => (
3939
<Link
@@ -61,14 +61,14 @@ export const SecuritySealDescription = () => {
6161
<VStack spacing="sp16">
6262
<Box>
6363
<Text variant="highlight">
64-
<Translation id="moduleOnboarding.securityCheckScreen.step2.modal.title" />
64+
<Translation id="moduleDeviceOnboarding.securityCheckScreen.step2.modal.title" />
6565
</Text>
6666
<Text>
67-
<Translation id="moduleOnboarding.securityCheckScreen.step2.modal.paragraph1" />
67+
<Translation id="moduleDeviceOnboarding.securityCheckScreen.step2.modal.paragraph1" />
6868
</Text>
6969
</Box>
7070
<Text>
71-
<Translation id="moduleOnboarding.securityCheckScreen.step2.modal.paragraph2" />
71+
<Translation id="moduleDeviceOnboarding.securityCheckScreen.step2.modal.paragraph2" />
7272
</Text>
7373
</VStack>
7474
</VStack>

‎suite-native/module-onboarding/src/components/SecuritySealImages.tsx ‎suite-native/module-device-onboarding/src/components/SecuritySealImages.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ export const SecuritySealImages = () => {
5151
textVariant="hint"
5252
contentColor="textDefault"
5353
title={
54-
<Translation id="moduleOnboarding.securityCheckScreen.step2.modal.alertBox" />
54+
<Translation id="moduleDeviceOnboarding.securityCheckScreen.step2.modal.alertBox" />
5555
}
5656
/>
5757
</VStack>

‎suite-native/module-device-onboarding/src/index.ts

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from './navigation/DeviceOnboardingStackNavigator';

‎suite-native/module-device-onboarding/src/navigation/DeviceOnboardingStackNavigator.tsx

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import { createNativeStackNavigator } from '@react-navigation/native-stack';
2+
3+
import {
4+
DeviceOnboardingStackParamList,
5+
DeviceOnboardingStackRoutes,
6+
stackNavigationOptionsConfig,
7+
} from '@suite-native/navigation';
8+
9+
import { ConfirmFirmwareUpdateScreen } from '../screens/ConfirmFirmwareUpdateScreen';
10+
import { FirmwareInstallationScreen } from '../screens/FirmwareInstallationScreen';
11+
import { SecurityCheckScreen } from '../screens/SecurityCheckScreen';
12+
import { SuspiciousDeviceScreen } from '../screens/SuspiciousDeviceScreen';
13+
import { UninitializedDeviceLandingScreen } from '../screens/UninitializedDeviceLandingScreen';
14+
15+
export const DeviceOnboardingStack = createNativeStackNavigator<DeviceOnboardingStackParamList>();
16+
17+
export const DeviceOnboardingStackNavigator = () => (
18+
<DeviceOnboardingStack.Navigator
19+
initialRouteName={DeviceOnboardingStackRoutes.UninitializedDeviceLanding}
20+
screenOptions={stackNavigationOptionsConfig}
21+
>
22+
<DeviceOnboardingStack.Screen
23+
name={DeviceOnboardingStackRoutes.UninitializedDeviceLanding}
24+
component={UninitializedDeviceLandingScreen}
25+
/>
26+
<DeviceOnboardingStack.Screen
27+
name={DeviceOnboardingStackRoutes.SuspiciousDevice}
28+
component={SuspiciousDeviceScreen}
29+
/>
30+
<DeviceOnboardingStack.Screen
31+
name={DeviceOnboardingStackRoutes.SecurityCheck}
32+
component={SecurityCheckScreen}
33+
/>
34+
<DeviceOnboardingStack.Screen
35+
name={DeviceOnboardingStackRoutes.FirmwareInstallation}
36+
component={FirmwareInstallationScreen}
37+
/>
38+
<DeviceOnboardingStack.Screen
39+
name={DeviceOnboardingStackRoutes.ConfirmFirmwareUpdate}
40+
component={ConfirmFirmwareUpdateScreen}
41+
/>
42+
</DeviceOnboardingStack.Navigator>
43+
);

‎suite-native/module-device-onboarding/src/redux.d.ts

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { AsyncThunkAction } from '@reduxjs/toolkit';
2+
3+
declare module 'redux' {
4+
export interface Dispatch {
5+
<TThunk extends AsyncThunkAction<any, any, any>>(thunk: TThunk): ReturnType<TThunk>;
6+
}
7+
}

‎suite-native/module-onboarding/src/screens/ConfirmFirmwareUpdateScreen.tsx ‎suite-native/module-device-onboarding/src/screens/ConfirmFirmwareUpdateScreen.tsx

+8-8
Original file line numberDiff line numberDiff line change
@@ -10,17 +10,17 @@ import {
1010
ConfirmFirmwareUpdateScreenFooter,
1111
} from '@suite-native/firmware';
1212
import {
13-
OnboardingStackParamList,
14-
OnboardingStackRoutes,
13+
DeviceOnboardingStackParamList,
14+
DeviceOnboardingStackRoutes,
1515
StackNavigationProps,
1616
} from '@suite-native/navigation';
1717
import { useToast } from '@suite-native/toasts';
1818

19-
import { OnboardingScreenWithExitButton } from '../components/OnboardingScreenWithExitButton';
19+
import { DeviceOnboardingScreenWithExitButton } from '../components/OnboardingScreenWithExitButton';
2020

2121
type NavigationProp = StackNavigationProps<
22-
OnboardingStackParamList,
23-
OnboardingStackRoutes.ConfirmFirmwareUpdate
22+
DeviceOnboardingStackParamList,
23+
DeviceOnboardingStackRoutes.ConfirmFirmwareUpdate
2424
>;
2525

2626
export const ConfirmFirmwareUpdateScreen = () => {
@@ -41,7 +41,7 @@ export const ConfirmFirmwareUpdateScreen = () => {
4141
);
4242

4343
const handleUpdateConfirmation = () => {
44-
navigation.navigate(OnboardingStackRoutes.FirmwareInstallation);
44+
navigation.navigate(DeviceOnboardingStackRoutes.FirmwareInstallation);
4545
};
4646

4747
const handleSkipUpdate = () => {
@@ -52,7 +52,7 @@ export const ConfirmFirmwareUpdateScreen = () => {
5252
};
5353

5454
return (
55-
<OnboardingScreenWithExitButton
55+
<DeviceOnboardingScreenWithExitButton
5656
footer={
5757
<ConfirmFirmwareUpdateScreenFooter
5858
onUpdateConfirmation={handleUpdateConfirmation}
@@ -62,6 +62,6 @@ export const ConfirmFirmwareUpdateScreen = () => {
6262
}
6363
>
6464
<ConfirmFirmwareUpdateScreenContent />
65-
</OnboardingScreenWithExitButton>
65+
</DeviceOnboardingScreenWithExitButton>
6666
);
6767
};

‎suite-native/module-onboarding/src/screens/FirmwareInstallationScreen.tsx ‎suite-native/module-device-onboarding/src/screens/FirmwareInstallationScreen.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { FirmwareInstallationScreenContent } from '@suite-native/firmware';
22
import { useToast } from '@suite-native/toasts';
33

4-
import { OnboardingScreenWithExitButton } from '../components/OnboardingScreenWithExitButton';
4+
import { DeviceOnboardingScreenWithExitButton } from '../components/OnboardingScreenWithExitButton';
55

66
export const FirmwareInstallationScreen = () => {
77
const { showToast } = useToast();
@@ -13,11 +13,11 @@ export const FirmwareInstallationScreen = () => {
1313
};
1414

1515
return (
16-
<OnboardingScreenWithExitButton>
16+
<DeviceOnboardingScreenWithExitButton>
1717
<FirmwareInstallationScreenContent
1818
onFirmwareInstallationSuccess={handleFirmwareInstallationSuccess}
1919
isCancellationAllowed={false}
2020
/>
21-
</OnboardingScreenWithExitButton>
21+
</DeviceOnboardingScreenWithExitButton>
2222
);
2323
};

0 commit comments

Comments
 (0)