Emurgo · stackchain · Sep 11, 2023 · Sep 11, 2023 · Sep 11, 2023 · Sep 11, 2023
diff --git a/apps/wallet-mobile/src/features/Settings/ApplicationSettings/ApplicationSettingsScreen.tsx b/apps/wallet-mobile/src/features/Settings/ApplicationSettings/ApplicationSettingsScreen.tsx
@@ -1,5 +1,5 @@
 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'
@@ -25,11 +25,12 @@ 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()
@@ -49,8 +50,8 @@ export const ApplicationSettingsScreen = () => {
   }
 
   return (
-    <SafeAreaView edges={['left', 'right', 'bottom']} style={styles.settings}>
-      <ScrollView bounces={false}>
+    <SafeAreaView edges={['bottom', 'right', 'left']} style={styles.root}>
+      <ScrollView bounces={false} contentContainerStyle={styles.settings}>
         <StatusBar type="dark" />
 
         <SettingsSection title={strings.general}>
@@ -108,7 +109,7 @@ export const ApplicationSettingsScreen = () => {
             label={strings.privacyMode}
             info={strings.privacyModeInfo}
           >
-            <PrivacyModeSwitch />
+            <PrivacyModeSwitch isPrivacyOff={isPrivacyOff} />
           </SettingsItem>
 
           <SettingsItem
@@ -129,22 +130,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 +157,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 +266,12 @@ const messages = defineMessages({
 })
 
 const styles = StyleSheet.create({
+  root: {
+    height: '100%',
+  },
   settings: {
     flex: 1,
-    paddingTop: 16,
+    padding: 16,
     backgroundColor: '#fff',
   },
 })
diff --git a/apps/wallet-mobile/src/features/Settings/EasyConfirmation/DisableEasyConfirmationScreen.tsx b/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} />

diff --git a/apps/wallet-mobile/src/features/Settings/SettingsScreenNavigator.tsx b/apps/wallet-mobile/src/features/Settings/SettingsScreenNavigator.tsx
@@ -136,7 +136,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 +147,6 @@ const SettingsTabNavigator = () => {
         tabBarActiveTintColor: COLORS.SHELLEY_BLUE,
         tabBarInactiveTintColor: COLORS.NOT_SELECTED_TAB_TEXT,
       })}
-      style={{marginHorizontal: 16}}
     >
       <Tab.Screen name="wallet-settings" component={WalletSettingsScreen} />
 

diff --git a/apps/wallet-mobile/src/features/Settings/WalletSettings/WalletSettingsScreen.tsx b/apps/wallet-mobile/src/features/Settings/WalletSettings/WalletSettingsScreen.tsx
@@ -3,6 +3,7 @@ import React from 'react'
 import type {MessageDescriptor} from 'react-intl'
 import {defineMessages, useIntl} from 'react-intl'
 import {InteractionManager, ScrollView, StyleSheet, Switch} from 'react-native'
+import {SafeAreaView} from 'react-native-safe-area-context'
 
 import {useAuth} from '../../../auth/AuthProvider'
 import {Icon, Spacer, StatusBar} from '../../../components'
@@ -26,100 +27,82 @@ const iconProps = {
 export const WalletSettingsScreen = () => {
   const intl = useIntl()
   const strings = useStrings()
-  const {navigation, resetToWalletSelection} = useWalletNavigation()
+  const {resetToWalletSelection} = useWalletNavigation()
   const wallet = useSelectedWallet()
-  const easyConfirmationEnabled = useEasyConfirmationEnabled(wallet)
   const authSetting = useAuthSetting()
   const logout = useLogout()
   const settingsNavigation = useNavigation<SettingsRouteNavigation>()
+  const easyConfirmationEnabled = useEasyConfirmationEnabled(wallet)
 
   const onSwitchWallet = () => {
     resetToWalletSelection()
   }
 
-  const onEnableEasyConfirmation = () => {
-    navigation.navigate('app-root', {
-      screen: 'settings',
-      params: {
-        screen: 'enable-easy-confirmation',
-      },
-    })
-  }
+  return (
+    <SafeAreaView edges={['bottom', 'right', 'left']} style={styles.root}>
+      <ScrollView bounces={false} style={styles.settings}>
+        <StatusBar type="dark" />
+
+        <SettingsSection title={strings.general}>
+          <NavigatedSettingsItem
+            icon={<Icon.WalletStack {...iconProps} />}
+            label={strings.switchWallet}
+            onNavigate={onSwitchWallet}
+          />
 
-  const onDisableEasyConfirmation = () => {
-    navigation.navigate('app-root', {
-      screen: 'settings',
-      params: {
-        screen: 'disable-easy-confirmation',
-      },
-    })
-  }
+          <NavigatedSettingsItem icon={<Icon.Logout {...iconProps} />} label={strings.logout} onNavigate={logout} />
 
-  return (
-    <ScrollView bounces={false} style={styles.settings}>
-      <StatusBar type="dark" />
-
-      <SettingsSection title={strings.general}>
-        <NavigatedSettingsItem
-          icon={<Icon.WalletStack {...iconProps} />}
-          label={strings.switchWallet}
-          onNavigate={onSwitchWallet}
-        />
-
-        <NavigatedSettingsItem icon={<Icon.Logout {...iconProps} />} label={strings.logout} onNavigate={logout} />
-
-        <NavigatedSettingsItem
-          icon={<Icon.Wallet {...iconProps} />}
-          label={strings.walletName}
-          onNavigate={() => settingsNavigation.navigate('change-wallet-name')}
-        />
-      </SettingsSection>
-
-      <Spacer height={24} />
-
-      <SettingsSection title={strings.security}>
-        <NavigatedSettingsItem
-          icon={<Icon.Lock {...iconProps} />}
-          label={strings.changePassword}
-          onNavigate={() => settingsNavigation.navigate('change-password')}
-        />
-
-        <SettingsItem
-          icon={<Icon.Bio {...iconProps} />}
-          label={strings.easyConfirmation}
-          disabled={authSetting === 'pin' || wallet.isHW || wallet.isReadOnly}
-        >
-          <Switch
-            value={easyConfirmationEnabled}
-            onValueChange={easyConfirmationEnabled ? onDisableEasyConfirmation : onEnableEasyConfirmation}
-            disabled={authSetting === 'pin' || wallet.isHW || wallet.isReadOnly}
+          <NavigatedSettingsItem
+            icon={<Icon.Wallet {...iconProps} />}
+            label={strings.walletName}
+            onNavigate={() => settingsNavigation.navigate('change-wallet-name')}
           />
-        </SettingsItem>
-      </SettingsSection>
+        </SettingsSection>
 
-      <Spacer height={24} />
+        <Spacer height={24} />
 
-      <SettingsSection title={strings.actions}>
-        <NavigatedSettingsItem
-          icon={<Icon.CrossCircle {...iconProps} />}
-          label={strings.removeWallet}
-          onNavigate={() => settingsNavigation.navigate('remove-wallet')}
-        />
+        <SettingsSection title={strings.security}>
+          <NavigatedSettingsItem
+            icon={<Icon.Lock {...iconProps} />}
+            label={strings.changePassword}
+            onNavigate={() => settingsNavigation.navigate('change-password')}
+          />
 
-        <ResyncButton />
-      </SettingsSection>
+          <SettingsItem
+            icon={<Icon.Bio {...iconProps} />}
+            label={strings.easyConfirmation}
+            disabled={authSetting === 'pin' || wallet.isHW || wallet.isReadOnly}
+          >
+            <DisableEasyConfirmationSwitch easyConfirmationEnabled={easyConfirmationEnabled} />
+          </SettingsItem>
+        </SettingsSection>
+
+        <Spacer height={24} />
+
+        <SettingsSection title={strings.actions}>
+          <NavigatedSettingsItem
+            icon={<Icon.CrossCircle {...iconProps} />}
+            label={strings.removeWallet}
+            onNavigate={() => settingsNavigation.navigate('remove-wallet')}
+          />
 
-      <Spacer height={24} />
+          <ResyncButton />
+        </SettingsSection>
 
-      <SettingsSection title={strings.about}>
-        <SettingsBuildItem label={strings.network} value={getNetworkName(wallet.networkId)} />
+        <Spacer height={24} />
 
-        <SettingsBuildItem
-          label={strings.walletType}
-          value={intl.formatMessage(getWalletType(wallet.walletImplementationId))}
-        />
-      </SettingsSection>
-    </ScrollView>
+        <SettingsSection title={strings.about}>
+          <SettingsBuildItem label={strings.network} value={getNetworkName(wallet.networkId)} />
+
+          <SettingsBuildItem
+            label={strings.walletType}
+            value={intl.formatMessage(getWalletType(wallet.walletImplementationId))}
+          />
+        </SettingsSection>
+
+        <Spacer height={24} />
+      </ScrollView>
+    </SafeAreaView>
   )
 }
 
@@ -185,6 +168,52 @@ const useLogout = () => {
   }
 }
 
+// to avoid switch jumps
+const DisableEasyConfirmationSwitch = ({easyConfirmationEnabled}: {easyConfirmationEnabled: boolean}) => {
+  const {navigation} = useWalletNavigation()
+  const wallet = useSelectedWallet()
+  const [isLocalEnabled, setIsLocalEnabled] = React.useState(easyConfirmationEnabled)
+  const authSetting = useAuthSetting()
+
+  const onEnableEasyConfirmation = () => {
+    navigation.navigate('app-root', {
+      screen: 'settings',
+      params: {
+        screen: 'enable-easy-confirmation',
+      },
+    })
+  }
+
+  const onDisableEasyConfirmation = () => {
+    navigation.navigate('app-root', {
+      screen: 'settings',
+      params: {
+        screen: 'disable-easy-confirmation',
+      },
+    })
+  }
+
+  const onToggleEasyConfirmation = () => {
+    setIsLocalEnabled((prevState) => {
+      if (prevState) {
+        onDisableEasyConfirmation()
+      } else {
+        onEnableEasyConfirmation()
+      }
+
+      return !prevState
+    })
+  }
+
+  return (
+    <Switch
+      value={isLocalEnabled}
+      onValueChange={onToggleEasyConfirmation}
+      disabled={authSetting === 'pin' || wallet.isHW || wallet.isReadOnly}
+    />
+  )
+}
+
 const messages = defineMessages({
   general: {
     id: 'components.settings.walletsettingscreen.general',
@@ -277,9 +306,12 @@ const useStrings = () => {
 }
 
 const styles = StyleSheet.create({
+  root: {
+    height: '100%',
+  },
   settings: {
     flex: 1,
-    paddingTop: 16,
+    padding: 16,
     backgroundColor: '#fff',
   },
 })