feat(suite-native): prepare empty view-only settings screen

trezor · Apr 8, 2024 · 7803da2 · 7803da2
1 parent 022b89c
commit 7803da2
Show file tree

Hide file tree

Showing 9 changed files with 45 additions and 2 deletions.
diff --git a/suite-common/icons/assets/icons/bookmark.svg b/suite-common/icons/assets/icons/bookmark.svg
diff --git a/suite-common/icons/assets/icons/checkCircleSolid.svg b/suite-common/icons/assets/icons/checkCircleSolid.svg
diff --git a/suite-common/icons/src/icons.ts b/suite-common/icons/src/icons.ts
@@ -12,6 +12,7 @@ export const icons = {
     arrowUpRight: require('../assets/icons/arrowUpRight.svg'),
     backspace: require('../assets/icons/backspace.svg'),
     biometric: require('../assets/icons/biometric.svg'),
+    bookmark: require('../assets/icons/bookmark.svg'),
     bugBeetle: require('../assets/icons/bugBeetle.svg'),
     calendar: require('../assets/icons/calendar.svg'),
     caretCircleDown: require('../assets/icons/caretCircleDown.svg'),

diff --git a/suite-native/intl/src/en.ts b/suite-native/intl/src/en.ts
@@ -425,6 +425,10 @@ export const en = {
         privacyAndSecurity: {
             title: 'Privacy & Security',
         },
+        viewOnly: {
+            title: 'View-only',
+            subtitle: 'Check balances without connecting your Trezor.',
+        },
     },
     moduleOnboarding: {
         welcomeScreen: {

diff --git a/suite-native/module-settings/src/components/ApplicationSettings.tsx b/suite-native/module-settings/src/components/ApplicationSettings.tsx
@@ -1,6 +1,7 @@
 import { useNavigation } from '@react-navigation/core';
 import { useAtomValue } from 'jotai';
 
+import { FeatureFlag, useFeatureFlag } from '@suite-native/feature-flags';
 import {
     SettingsStackRoutes,
     SettingsStackParamList,
@@ -15,6 +16,7 @@ import { isDevButtonVisibleAtom } from './ProductionDebug';
 
 export const ApplicationSettings = () => {
     const isDevButtonVisible = useAtomValue(isDevButtonVisibleAtom);
+    const [isViewOnlyFeatureEnabled] = useFeatureFlag(FeatureFlag.IsViewOnlyEnabled);
 
     const navigation =
         useNavigation<
@@ -57,6 +59,14 @@ export const ApplicationSettings = () => {
                 subtitle="Analytics, Discreet mode, Biometrics"
                 onPress={() => handleNavigation(SettingsStackRoutes.SettingsPrivacyAndSecurity)}
             />
+            {isViewOnlyFeatureEnabled && (
+                <SettingsSectionItem
+                    title="View-only"
+                    iconName="bookmark"
+                    subtitle="Check balances without your Trezor"
+                    onPress={() => handleNavigation(SettingsStackRoutes.SettingsViewOnly)}
+                />
+            )}
         </SettingsSection>
     );
 };
diff --git a/suite-native/module-settings/src/navigation/SettingsStackNavigator.tsx b/suite-native/module-settings/src/navigation/SettingsStackNavigator.tsx
@@ -10,6 +10,7 @@ import { SettingsScreen } from '../screens/SettingsScreen';
 import { SettingsLocalizationScreen } from '../screens/SettingsLocalizationScreen';
 import { SettingsCustomizationScreen } from '../screens/SettingsCustomizationScreen';
 import { SettingsPrivacyAndSecurity } from '../screens/SettingsPrivacyAndSecurity';
+import { SettingsViewOnly } from '../screens/SettingsViewOnly';
 import { SettingsAboutUsScreen } from '../screens/SettingsAboutUsScreen';
 import { SettingsFAQScreen } from '../screens/SettingsFAQScreen';
 
@@ -40,6 +41,11 @@ export const SettingsStackNavigator = () => (
             name={SettingsStackRoutes.SettingsPrivacyAndSecurity}
             component={SettingsPrivacyAndSecurity}
         />
+        <SettingsStack.Screen
+            options={{ title: SettingsStackRoutes.SettingsViewOnly }}
+            name={SettingsStackRoutes.SettingsViewOnly}
+            component={SettingsViewOnly}
+        />
         <SettingsStack.Screen
             options={{ title: SettingsStackRoutes.SettingsFAQ }}
             name={SettingsStackRoutes.SettingsFAQ}

diff --git a/suite-native/module-settings/src/screens/SettingsViewOnly.tsx b/suite-native/module-settings/src/screens/SettingsViewOnly.tsx
@@ -0,0 +1,17 @@
+import { Screen, ScreenSubHeader } from '@suite-native/navigation';
+import { Text } from '@suite-native/atoms';
+import { Translation, useTranslate } from '@suite-native/intl';
+
+export const SettingsViewOnly = () => {
+    const { translate } = useTranslate();
+
+    return (
+        <Screen
+            screenHeader={<ScreenSubHeader content={translate('moduleSettings.viewOnly.title')} />}
+        >
+            <Text>
+                <Translation id="moduleSettings.viewOnly.subtitle" />
+            </Text>
+        </Screen>
+    );
+};
diff --git a/suite-native/navigation/src/navigators.ts b/suite-native/navigation/src/navigators.ts
@@ -50,6 +50,7 @@ export type SettingsStackParamList = {
     [SettingsStackRoutes.SettingsLocalization]: undefined;
     [SettingsStackRoutes.SettingsCustomization]: undefined;
     [SettingsStackRoutes.SettingsPrivacyAndSecurity]: undefined;
+    [SettingsStackRoutes.SettingsViewOnly]: undefined;
     [SettingsStackRoutes.SettingsAbout]: undefined;
     [SettingsStackRoutes.SettingsFAQ]: undefined;
 };

diff --git a/suite-native/navigation/src/routes.ts b/suite-native/navigation/src/routes.ts
@@ -68,6 +68,7 @@ export enum SettingsStackRoutes {
     SettingsLocalization = 'SettingsLocalization',
     SettingsCustomization = 'SettingsCustomization',
     SettingsPrivacyAndSecurity = 'SettingsPrivacyAndSecurity',
+    SettingsViewOnly = 'SettingsViewOnly',
     SettingsAbout = 'SettingsAbout',
     SettingsFAQ = 'SettingsFAQ',
 }