chore(settings): improvements (#2676)

apps/wallet-mobile/src/Dashboard/DashboardNavigator.tsx

@@ -21,9 +21,6 @@ export const DashboardNavigator = () => {
     <Stack.Navigator
       screenOptions={{
         ...defaultStackNavigationOptions,
-        cardStyle: {
-          backgroundColor: 'transparent',
-        },
         detachPreviousScreen: false /* https://github.com/react-navigation/react-navigation/issues/9883 */,
       }}
     >

apps/wallet-mobile/src/NftDetails/NftDetailsNavigator.tsx

@@ -18,7 +18,6 @@ export const NftDetailsNavigator = () => {
       screenOptions={{
         ...defaultStackNavigationOptions,
         headerTitleContainerStyle: {alignItems: 'center'},
-        cardStyle: {backgroundColor: '#fff'},
       }}
       initialRouteName="nft-details"
     >

apps/wallet-mobile/src/features/Menu/Menu.tsx

@@ -41,7 +41,7 @@ export const Menu = () => {
     <SafeAreaView edges={['left', 'right', 'bottom']} style={styles.root}>
       <ScrollView contentContainerStyle={styles.scrollViewContent} bounces={false}>
         <AppSettings //
-          label={strings.appSettings}
+          label={strings.settings}
           onPress={navigateTo.settings}
           left={<Icon.Gear size={24} color={lightPalette.gray['600']} />}
         />
@@ -194,7 +194,6 @@ const useStrings = () => {
     supportLink: intl.formatMessage(messages.supportLink),
     knowledgeBase: intl.formatMessage(messages.knowledgeBase),
     menu: intl.formatMessage(messages.menu),
-    appSettings: intl.formatMessage(messages.appSettings),
     releases: intl.formatMessage(messages.releases),
   }
 }
@@ -224,10 +223,6 @@ const messages = defineMessage({
     id: 'menu',
     defaultMessage: '!!!Menu',
   },
-  appSettings: {
-    id: 'menu.appSettings',
-    defaultMessage: '!!!App Settings',
-  },
   releases: {
     id: 'menu.releases',
     defaultMessage: '!!!Releases',

apps/wallet-mobile/src/features/Settings/ApplicationSettings/ApplicationSettingsScreen.tsx

@@ -1,17 +1,16 @@
-import {useNavigation} from '@react-navigation/native'
-import React, {useEffect, useState} from 'react'
+import React from 'react'
 import {defineMessages, useIntl} from 'react-intl'
 import {ScrollView, StyleSheet, Switch} from 'react-native'
 import {SafeAreaView} from 'react-native-safe-area-context'
 
 import {Icon, Spacer, StatusBar} from '../../../components'
 import {useLanguage} from '../../../i18n'
 import {CONFIG} from '../../../legacy/config'
-import {SettingsRouteNavigation, useWalletNavigation} from '../../../navigation'
 import {lightPalette} from '../../../theme'
 import {useAuthOsEnabled, useAuthSetting, useAuthWithOs} from '../../../yoroi-wallets/auth'
 import {useCrashReports} from '../../../yoroi-wallets/hooks'
 import {usePrivacyMode} from '../../Settings/PrivacyMode/PrivacyMode'
+import {useNavigateTo} from '../common/navigation'
 import {useCurrencyContext} from '../Currency'
 import {NavigatedSettingsItem, SettingsItem, SettingsSection} from '../SettingsItems'
 
@@ -25,71 +24,66 @@ export const ApplicationSettingsScreen = () => {
   const {languageCode, supportedLanguages} = useLanguage()
   const language = supportedLanguages.find((lang) => lang.code === languageCode) ?? supportedLanguages['en-US']
 
-  const {isTogglePrivacyModeLoading} = usePrivacyMode()
+  const {isTogglePrivacyModeLoading, isPrivacyOff} = usePrivacyMode()
 
-  const walletNavigation = useWalletNavigation()
   const {currency} = useCurrencyContext()
-  const settingsNavigation = useNavigation<SettingsRouteNavigation>()
+  const {enabled: crashReportEnabled} = useCrashReports()
 
   const authSetting = useAuthSetting()
   const authOsEnabled = useAuthOsEnabled()
-  const {authWithOs} = useAuthWithOs({onSuccess: () => walletNavigation.navigation.navigate('enable-login-with-pin')})
+  const navigateTo = useNavigateTo()
+  const {authWithOs} = useAuthWithOs({onSuccess: navigateTo.enableLoginWithPin})
 
   const onToggleAuthWithOs = () => {
     if (authSetting === 'os') {
       authWithOs()
     } else {
-      walletNavigation.navigation.navigate('app-root', {
-        screen: 'settings',
-        params: {
-          screen: 'enable-login-with-os',
-        },
-      })
+      navigateTo.enableLoginWithOs()
     }
   }
 
   return (
-    <SafeAreaView edges={['left', 'right', 'bottom']} style={styles.settings}>
-      <ScrollView bounces={false}>
+    <SafeAreaView edges={['bottom', 'right', 'left']} style={styles.root}>
+      <ScrollView bounces={false} style={styles.settings}>
         <StatusBar type="dark" />
 
         <SettingsSection title={strings.general}>
           <NavigatedSettingsItem
             icon={<Icon.Globe {...iconProps} />}
             label={strings.selectLanguage}
-            onNavigate={() => settingsNavigation.navigate('change-language')}
+            onNavigate={navigateTo.changeLanguage}
             selected={language.label}
           />
 
           <NavigatedSettingsItem
             icon={<Icon.Coins {...iconProps} />}
             label={strings.selectFiatCurrency}
             selected={currency}
-            onNavigate={() => settingsNavigation.navigate('change-currency')}
+            onNavigate={navigateTo.changeCurrency}
           />
 
           <NavigatedSettingsItem
             icon={<Icon.Info {...iconProps} />}
             label={strings.about}
-            onNavigate={() => settingsNavigation.navigate('about')}
+            onNavigate={navigateTo.about}
           />
 
           <NavigatedSettingsItem
             icon={<Icon.TermsOfUse {...iconProps} />}
             label={strings.termsOfservice}
-            onNavigate={() => settingsNavigation.navigate('terms-of-use')}
+            onNavigate={navigateTo.termsOfUse}
           />
 
           <NavigatedSettingsItem
             icon={<Icon.TermsOfUse {...iconProps} />}
             label={strings.privacyPolicy}
-            onNavigate={() => settingsNavigation.navigate('privacy-policy')}
+            onNavigate={navigateTo.privacyPolicy}
           />
 
           <NavigatedSettingsItem
             icon={<Icon.Analytics {...iconProps} />}
             label={strings.analytics}
-            onNavigate={() => walletNavigation.navigateToAnalyticsSettings()}
+            onNavigate={navigateTo.analytics}
           />
         </SettingsSection>
 
@@ -100,15 +94,15 @@ export const ApplicationSettingsScreen = () => {
             disabled={authSetting === 'os'}
             icon={<Icon.Pin {...iconProps} />}
             label={strings.changePin}
-            onNavigate={() => settingsNavigation.navigate('change-custom-pin')}
+            onNavigate={navigateTo.changeCustomPin}
           />
 
           <SettingsItem
             icon={<Icon.EyeOff {...iconProps} />}
             label={strings.privacyMode}
             info={strings.privacyModeInfo}
           >
-            <PrivacyModeSwitch />
+            <PrivacyModeSwitch isPrivacyOff={isPrivacyOff} />
           </SettingsItem>
 
           <SettingsItem
@@ -129,22 +123,24 @@ export const ApplicationSettingsScreen = () => {
             label={strings.crashReporting}
             info={strings.crashReportingInfo}
           >
-            <CrashReportsSwitch />
+            <CrashReportsSwitch crashReportEnabled={crashReportEnabled} />
           </SettingsItem>
         </SettingsSection>
+
+        <Spacer height={24} />
       </ScrollView>
     </SafeAreaView>
   )
 }
 
 // to avoid switch jumps
-const PrivacyModeSwitch = () => {
-  const {setPrivacyModeOn, setPrivacyModeOff, isTogglePrivacyModeLoading, isPrivacyOff} = usePrivacyMode()
+const PrivacyModeSwitch = ({isPrivacyOff}: {isPrivacyOff: boolean}) => {
+  const {setPrivacyModeOn, setPrivacyModeOff, isTogglePrivacyModeLoading} = usePrivacyMode()
   const [isLocalPrivacyOff, setIsLocalPrivacyOff] = React.useState(isPrivacyOff)
 
   const onTogglePrivacyMode = () => {
     setIsLocalPrivacyOff((prevState) => {
-      if (prevState === true) {
+      if (prevState) {
         setPrivacyModeOn()
       } else {
         setPrivacyModeOff()
@@ -154,31 +150,26 @@ const PrivacyModeSwitch = () => {
     })
   }
 
-  React.useEffect(() => {
-    setIsLocalPrivacyOff(isPrivacyOff)
-  }, [isPrivacyOff])
-
   return <Switch value={isLocalPrivacyOff} onValueChange={onTogglePrivacyMode} disabled={isTogglePrivacyModeLoading} />
 }
 
-const CrashReportsSwitch = () => {
-  const {enabled, enable, disable} = useCrashReports()
-  const [isLocalEnabled, setIsLocalEnabled] = useState(enabled)
-
-  const onToggleCrashReports = (newEnabled: boolean) => {
-    if (newEnabled) {
-      enable()
-    } else {
-      disable()
-    }
+// to avoid switch jumps
+const CrashReportsSwitch = ({crashReportEnabled}: {crashReportEnabled: boolean}) => {
+  const {enable, disable} = useCrashReports()
+  const [isLocalEnabled, setIsLocalEnabled] = React.useState(crashReportEnabled)
+
+  const onToggleCrashReports = () => {
+    setIsLocalEnabled((prevState) => {
+      if (prevState) {
+        enable()
+      } else {
+        disable()
+      }
 
-    setIsLocalEnabled(newEnabled)
+      return !prevState
+    })
   }
 
-  useEffect(() => {
-    setIsLocalEnabled(enabled)
-  }, [enabled, setIsLocalEnabled])
-
   return <Switch value={isLocalEnabled} onValueChange={onToggleCrashReports} disabled={CONFIG.FORCE_CRASH_REPORTS} />
 }
 
@@ -268,9 +259,12 @@ const messages = defineMessages({
 })
 
 const styles = StyleSheet.create({
-  settings: {
+  root: {
     flex: 1,
-    paddingTop: 16,
     backgroundColor: '#fff',
   },
+  settings: {
+    flex: 1,
+    padding: 16,
+  },
 })

apps/wallet-mobile/src/features/Settings/EasyConfirmation/DisableEasyConfirmationScreen.tsx

@@ -35,7 +35,12 @@ export const DisableEasyConfirmationScreen = () => {
       </View>
 
       <View style={styles.actions}>
-        <Button title={strings.disableButton} onPress={() => disableEasyConfirmation()} disabled={isLoading} />
+        <Button
+          title={strings.disableButton}
+          onPress={() => disableEasyConfirmation()}
+          disabled={isLoading}
+          shelleyTheme
+        />
       </View>
 
       <LoadingOverlay loading={isLoading} />

apps/wallet-mobile/src/features/Settings/EasyConfirmation/EnableEasyConfirmationScreen.tsx

@@ -63,6 +63,7 @@ export const EnableEasyConfirmationScreen = () => {
           title={strings.enableButton}
           onPress={() => enableEasyConfirmation(rootPassword)}
           disabled={isEmptyString(rootPassword) || isLoading}
+          shelleyTheme
         />
       </Actions>
 

apps/wallet-mobile/src/features/Settings/SettingsScreenNavigator.tsx

@@ -31,7 +31,6 @@ export const SettingsScreenNavigator = () => {
     <Stack.Navigator
       screenOptions={{
         ...defaultStackNavigationOptions,
-        cardStyle: {backgroundColor: 'white'},
         detachPreviousScreen: false /* https://github.com/react-navigation/react-navigation/issues/9883 */,
       }}
     >
@@ -136,7 +135,7 @@ const SettingsTabNavigator = () => {
     <Tab.Navigator
       screenOptions={({route}) => ({
         tabBarLabel: route.name === 'wallet-settings' ? strings.walletTabTitle : strings.appTabTitle,
-        tabBarStyle: {backgroundColor: COLORS.WHITE, elevation: 0, shadowOpacity: 0},
+        tabBarStyle: {backgroundColor: COLORS.WHITE, elevation: 0, shadowOpacity: 0, marginHorizontal: 16},
         tabBarIndicatorStyle: {backgroundColor: COLORS.SHELLEY_BLUE, height: 2},
         tabBarLabelStyle: {
           textTransform: 'none',
@@ -147,7 +146,6 @@ const SettingsTabNavigator = () => {
         tabBarActiveTintColor: COLORS.SHELLEY_BLUE,
         tabBarInactiveTintColor: COLORS.NOT_SELECTED_TAB_TEXT,
       })}
-      style={{marginHorizontal: 16}}
     >
       <Tab.Screen name="wallet-settings" component={WalletSettingsScreen} />