feat: settings security, closes leather-io/issues#304

leather-io · Sep 24, 2024 · 5b20b24 · 5b20b24
1 parent 8816508
commit 5b20b24
Show file tree

Hide file tree

Showing 49 changed files with 1,043 additions and 2,796 deletions.
diff --git a/apps/mobile/src/app/(home)/(tabs)/_layout.tsx b/apps/mobile/src/app/(home)/(tabs)/_layout.tsx
@@ -6,7 +6,7 @@ import { ActionBarContainer, ActionBarContext } from '@/components/action-bar/co
 import { BlurredHeader } from '@/components/headers/containers/blurred-header';
 import { TabBar } from '@/components/tab-bar';
 import { AppRoutes } from '@/routes';
-import { useSettings } from '@/store/settings/settings.write';
+import { useSettings } from '@/store/settings/settings';
 import { t } from '@lingui/macro';
 import { Tabs, usePathname, useRouter } from 'expo-router';
 
@@ -88,7 +88,7 @@ export default function TabLayout() {
   const ref = useRef<ActionBarMethods>(null);
   const bottomSheetRef = useRef<SheetRef>(null);
   const insets = useSafeAreaInsets();
-  const { theme: themeVariant } = useSettings();
+  const { themeDerivedFromThemePreference } = useSettings();
   const NavigationHeader = (
     <BlurredHeader
       insets={insets}
@@ -130,7 +130,7 @@ export default function TabLayout() {
         />
       </Tabs>
       <ActionBarContainer ref={ref} />
-      <Sheet ref={bottomSheetRef} themeVariant={themeVariant}>
+      <Sheet ref={bottomSheetRef} themeVariant={themeDerivedFromThemePreference}>
         <Text>{t`Dummy modal text 🎉 Add blocks to see responsive modal`}</Text>
       </Sheet>
     </ActionBarContext.Provider>

diff --git a/apps/mobile/src/app/(home)/create-new-wallet.tsx b/apps/mobile/src/app/(home)/create-new-wallet.tsx
@@ -4,7 +4,7 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { MnemonicDisplay } from '@/components/create-new-wallet/mnemonic-display';
 import { useCreateWallet } from '@/hooks/create-wallet';
-import { useSettings } from '@/store/settings/settings.write';
+import { useSettings } from '@/store/settings/settings';
 import { tempMnemonicStore } from '@/store/storage-persistors';
 import { Trans, t } from '@lingui/macro';
 import { useTheme } from '@shopify/restyle';
@@ -25,7 +25,7 @@ export default function CreateNewWallet() {
   const { bottom } = useSafeAreaInsets();
   const theme = useTheme<Theme>();
 
-  const { theme: themeVariant } = useSettings();
+  const { themeDerivedFromThemePreference } = useSettings();
   const [isHidden, setIsHidden] = useState(true);
   const [mnemonic, setMnemonic] = useState<string | null>(null);
   const { navigateAndCreateWallet } = useCreateWallet();
@@ -71,7 +71,7 @@ export default function CreateNewWallet() {
         <Box my="5">
           {isHidden && (
             <BlurView
-              themeVariant={themeVariant}
+              themeVariant={themeDerivedFromThemePreference}
               intensity={isHidden ? 30 : 0}
               style={{
                 position: 'absolute',

diff --git a/apps/mobile/src/app/(home)/developer-console/index.tsx b/apps/mobile/src/app/(home)/developer-console/index.tsx
@@ -10,7 +10,7 @@ import { useToastContext } from '@/components/toast/toast-context';
 import { usePushNotifications } from '@/hooks/use-push-notifications';
 import { LOCALES } from '@/locales';
 import { AppRoutes } from '@/routes';
-import { useSettings } from '@/store/settings/settings.write';
+import { useSettings } from '@/store/settings/settings';
 import { useWallets } from '@/store/wallets/wallets.read';
 import { t } from '@lingui/macro';
 import { useLingui } from '@lingui/react';
@@ -77,7 +77,9 @@ export default function DeveloperConsoleScreen() {
           gap: theme.spacing[2],
         }}
       >
-        <PressableListItem title={t`walletSecurityLevel:` + ' ' + settings.walletSecurityLevel} />
+        <PressableListItem
+          title={t`securityLevelPreference:` + ' ' + settings.securityLevelPreference}
+        />
         <PressableListItem
           onPress={() => addWalletSheetRef.current?.present()}
           title={t`Create wallet`}

diff --git a/apps/mobile/src/app/(home)/developer-console/wallet-manager.tsx b/apps/mobile/src/app/(home)/developer-console/wallet-manager.tsx
@@ -4,7 +4,7 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { WalletList } from '@/components/wallet-manager';
 import { useKeyStore } from '@/store/key-store';
-import { useSettings } from '@/store/settings/settings.write';
+import { useSettings } from '@/store/settings/settings';
 import { clearAllPersistedStorage } from '@/store/utils';
 import { useWallets } from '@/store/wallets/wallets.read';
 import { nextAnimationFrame } from '@/utils/next-animation-frame';

diff --git a/apps/mobile/src/app/(home)/settings/display/index.tsx b/apps/mobile/src/app/(home)/settings/display/index.tsx
@@ -4,7 +4,7 @@ import { AccountIdentifierSheet } from '@/features/settings/account-identifier/a
 import { BitcoinUnitSheet } from '@/features/settings/bitcoin-unit-sheet/bitcoin-unit-sheet';
 import { ConversionUnitSheet } from '@/features/settings/conversion-unit-sheet/conversion-unit-sheet';
 import { ThemeSheet } from '@/features/settings/theme-sheet/theme-sheet';
-import { useSettings } from '@/store/settings/settings.write';
+import { useSettings } from '@/store/settings/settings';
 import { t } from '@lingui/macro';
 import { useLingui } from '@lingui/react';
 
@@ -26,31 +26,36 @@ export default function SettingsDisplayScreen() {
   const bitcoinUnitSheetRef = useRef<SheetRef>(null);
   const conversionUnitSheetRef = useRef<SheetRef>(null);
   const accountIdentifierSheetRef = useRef<SheetRef>(null);
-  const { accountDisplayPreference, bitcoinUnit, conversionUnit, themeStore } = useSettings();
+  const {
+    accountDisplayPreference,
+    bitcoinUnitPreference,
+    fiatCurrencyPreference,
+    themePreference,
+  } = useSettings();
   const { i18n } = useLingui();
 
   return (
     <Box flex={1} backgroundColor="ink.background-primary">
       <SettingsScreenLayout>
         <DisplayCell
           title={t`Theme`}
-          caption={i18n._(capitalize(themeStore))}
+          caption={i18n._(capitalize(themePreference))}
           icon={<SunInCloudIcon />}
           onCreateSheetRef={() => {
             themeSheetRef.current?.present();
           }}
         />
         <DisplayCell
           title={t`Bitcoin unit`}
-          caption={i18n._(bitcoinUnit.symbol)}
+          caption={i18n._(bitcoinUnitPreference.symbol)}
           icon={<BitcoinCircleIcon />}
           onCreateSheetRef={() => {
             bitcoinUnitSheetRef.current?.present();
           }}
         />
         <DisplayCell
           title={t`Conversion unit`}
-          caption={i18n._(conversionUnit)}
+          caption={i18n._(fiatCurrencyPreference)}
           icon={<DollarCircleIcon />}
           onCreateSheetRef={() => {
             conversionUnitSheetRef.current?.present();

diff --git a/apps/mobile/src/app/(home)/settings/networks/index.tsx b/apps/mobile/src/app/(home)/settings/networks/index.tsx
@@ -1,5 +1,5 @@
 import { useToastContext } from '@/components/toast/toast-context';
-import { defaultNetworks, useSettings } from '@/store/settings/settings.write';
+import { defaultNetworkPreferences, useSettings } from '@/store/settings/settings';
 import { t } from '@lingui/macro';
 import { useLingui } from '@lingui/react';
 
@@ -32,18 +32,18 @@ export default function SettingsNetworksScreen() {
   const { i18n } = useLingui();
 
   function onChangeNetwork(network: DefaultNetworkConfigurations) {
-    settings.changeNetwork(network);
+    settings.changeNetworkPreference(network);
     displayToast({ title: t`Network changed`, type: 'success' });
   }
 
   return (
     <SettingsScreenLayout>
-      {defaultNetworks.map(network => (
+      {defaultNetworkPreferences.map(network => (
         <NetworkCell
           key={network}
-          caption={settings.network.id === network ? t`Enabled` : t`Disabled`}
+          caption={settings.networkPreference.id === network ? t`Enabled` : t`Disabled`}
           icon={getNetworkIcon(network)}
-          isSelected={settings.network.id === network}
+          isSelected={settings.networkPreference.id === network}
           onChangeNetwork={() => onChangeNetwork(network)}
           title={i18n._(capitalize(network))}
         />

diff --git a/apps/mobile/src/app/(home)/settings/security/index.tsx b/apps/mobile/src/app/(home)/settings/security/index.tsx
@@ -1,47 +1,40 @@
 import { useRef } from 'react';
-import { ScrollView } from 'react-native-gesture-handler';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { AnalyticsSheet } from '@/features/settings/analytics-sheet';
 import { AppAuthenticationSheet } from '@/features/settings/app-authentication-sheet';
+import { useSettings } from '@/store/settings/settings';
 import { t } from '@lingui/macro';
-import { useTheme } from '@shopify/restyle';
 
-import { Box, Cell, CookieIcon, KeyholeIcon, SheetRef, Theme } from '@leather.io/ui/native';
+import { Box, CookieIcon, KeyholeIcon, SheetRef } from '@leather.io/ui/native';
+
+import SettingsScreenLayout from '../settings-screen.layout';
+import { SecurityCell } from './security-cell';
 
 export default function SettingsSecurityScreen() {
-  const { bottom } = useSafeAreaInsets();
   const analyticsSheetRef = useRef<SheetRef>(null);
   const appAuthenticationSheetRef = useRef<SheetRef>(null);
-  const theme = useTheme<Theme>();
+  const settings = useSettings();
 
   return (
     <Box flex={1} backgroundColor="ink.background-primary">
-      <ScrollView
-        contentContainerStyle={{
-          paddingHorizontal: theme.spacing['5'],
-          paddingTop: theme.spacing['5'],
-          paddingBottom: theme.spacing['5'] + bottom,
-          gap: theme.spacing[5],
-        }}
-      >
-        <Cell
+      <SettingsScreenLayout>
+        <SecurityCell
           title={t`Analytics`}
-          subtitle={t`Enabled`}
-          Icon={CookieIcon}
-          onPress={() => {
+          caption={settings.analyticsPreference === 'consent-given' ? t`Enabled` : t`Disabled`}
+          icon={<CookieIcon />}
+          onCreateSheetRef={() => {
             analyticsSheetRef.current?.present();
           }}
         />
-        <Cell
+        <SecurityCell
           title={t`App authentication`}
-          subtitle={t`Enabled`}
-          Icon={KeyholeIcon}
-          onPress={() => {
+          caption={settings.securityLevelPreference === 'secure' ? t`Enabled` : t`Disabled`}
+          icon={<KeyholeIcon />}
+          onCreateSheetRef={() => {
             appAuthenticationSheetRef.current?.present();
           }}
         />
-      </ScrollView>
+      </SettingsScreenLayout>
       <AnalyticsSheet sheetRef={analyticsSheetRef} />
       <AppAuthenticationSheet sheetRef={appAuthenticationSheetRef} />
     </Box>

diff --git a/apps/mobile/src/app/(home)/settings/security/security-cell.tsx b/apps/mobile/src/app/(home)/settings/security/security-cell.tsx
@@ -0,0 +1,29 @@
+import { ReactNode } from 'react';
+
+import {
+  Avatar,
+  ChevronRightIcon,
+  Flag,
+  ItemLayout,
+  TouchableOpacity,
+} from '@leather.io/ui/native';
+
+interface SecurityCellProps {
+  caption: string;
+  icon: ReactNode;
+  onCreateSheetRef(): void;
+  title: string;
+}
+export function SecurityCell({ caption, icon, onCreateSheetRef, title }: SecurityCellProps) {
+  return (
+    <TouchableOpacity onPress={onCreateSheetRef}>
+      <Flag img={<Avatar>{icon}</Avatar>}>
+        <ItemLayout
+          actionIcon={<ChevronRightIcon variant="small" />}
+          captionLeft={caption}
+          titleLeft={title}
+        />
+      </Flag>
+    </TouchableOpacity>
+  );
+}
diff --git a/apps/mobile/src/app/_layout.tsx b/apps/mobile/src/app/_layout.tsx
@@ -8,7 +8,7 @@ import { ToastWrapper } from '@/components/toast/toast-context';
 import { initiateI18n } from '@/locales';
 import { queryClient } from '@/queries/query';
 import { persistor, store } from '@/store';
-import { useSettings } from '@/store/settings/settings.write';
+import { useSettings } from '@/store/settings/settings';
 import { HasChildren } from '@/utils/types';
 import { i18n } from '@lingui/core';
 import { I18nProvider } from '@lingui/react';
@@ -62,8 +62,10 @@ export default function RootLayout() {
 }
 
 function ThemeProvider({ children }: HasChildren) {
-  const { theme } = useSettings();
-  return <LeatherThemeProvider theme={theme}>{children}</LeatherThemeProvider>;
+  const { themeDerivedFromThemePreference } = useSettings();
+  return (
+    <LeatherThemeProvider theme={themeDerivedFromThemePreference}>{children}</LeatherThemeProvider>
+  );
 }
 
 function AppRouter() {

diff --git a/apps/mobile/src/components/action-bar/index.tsx b/apps/mobile/src/components/action-bar/index.tsx
@@ -7,7 +7,7 @@ import Animated, {
 } from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
-import { useSettings } from '@/store/settings/settings.write';
+import { useSettings } from '@/store/settings/settings';
 import { useTheme } from '@shopify/restyle';
 
 import { BlurView, Box, Theme } from '@leather.io/ui/native';
@@ -31,7 +31,7 @@ export interface ActionBarMethods {
 export const ActionBar = forwardRef<ActionBarMethods, ActionBarProps>(function (props, ref) {
   const { bottom } = useSafeAreaInsets();
   const theme = useTheme<Theme>();
-  const { theme: themeVariant } = useSettings();
+  const { themeDerivedFromThemePreference } = useSettings();
   const animatedBottom = useSharedValue(ACTION_BAR_BOTTOM_OFFSET + bottom);
   const animatedOpacity = useSharedValue(1);
 
@@ -85,7 +85,7 @@ export const ActionBar = forwardRef<ActionBarMethods, ActionBarProps>(function (
     >
       <Box width="100%" px="5" justifyContent="center" alignItems="center">
         <BlurView
-          themeVariant={themeVariant}
+          themeVariant={themeDerivedFromThemePreference}
           intensity={90}
           style={{
             flexDirection: 'row',

diff --git a/apps/mobile/src/components/add-wallet/add-wallet-sheet.tsx b/apps/mobile/src/components/add-wallet/add-wallet-sheet.tsx
@@ -1,7 +1,7 @@
 import { RefObject, useCallback, useRef, useState } from 'react';
 
 import { AppRoutes } from '@/routes';
-import { useSettings } from '@/store/settings/settings.write';
+import { useSettings } from '@/store/settings/settings';
 import { useRouter } from 'expo-router';
 
 import { SheetRef } from '@leather.io/ui/native';
@@ -15,7 +15,7 @@ interface AddWalletSheetBaseProps {
 
 export function AddWalletSheet({ addWalletSheetRef }: AddWalletSheetBaseProps) {
   const notifyUserSheetRef = useRef<SheetRef>(null);
-  const { theme: themeVariant } = useSettings();
+  const { themeDerivedFromThemePreference } = useSettings();
   const router = useRouter();
   const [optionData, setOptionData] = useState<OptionData | null>(null);
   const createWallet = useCallback(() => {
@@ -43,7 +43,7 @@ export function AddWalletSheet({ addWalletSheetRef }: AddWalletSheetBaseProps) {
         createWallet={createWallet}
         restoreWallet={restoreWallet}
         addWalletSheetRef={addWalletSheetRef}
-        themeVariant={themeVariant}
+        themeVariant={themeDerivedFromThemePreference}
       />
 
       <NotifyUserSheet

diff --git a/apps/mobile/src/components/browser/approval-ux-modal.tsx b/apps/mobile/src/components/browser/approval-ux-modal.tsx
@@ -4,7 +4,7 @@ import { formatAddressesForGetAddresses } from '@/hooks/get-addresses';
 import { AccountId } from '@/models/domain.model';
 import { useBitcoinAccounts } from '@/store/keychains/bitcoin/bitcoin-keychains.read';
 import { useStacksSigners } from '@/store/keychains/stacks/stacks-keychains.read';
-import { useSettings } from '@/store/settings/settings.write';
+import { useSettings } from '@/store/settings/settings';
 import { t } from '@lingui/macro';
 
 import { keyOriginToDerivationPath } from '@leather.io/crypto';
@@ -19,7 +19,7 @@ interface ApproverSheetProps extends AccountId {
 export function ApproverSheet(props: ApproverSheetProps) {
   const { fingerprint, accountIndex, sendResult } = props;
 
-  const { theme: themeVariant } = useSettings();
+  const { themeDerivedFromThemePreference } = useSettings();
   const approverSheetRef = useRef<SheetRef>(null);
 
   const stacksAccount = useStacksSigners().fromAccountIndex(fingerprint, accountIndex)[0];
@@ -58,7 +58,7 @@ export function ApproverSheet(props: ApproverSheetProps) {
   }
 
   return (
-    <Sheet ref={approverSheetRef} themeVariant={themeVariant}>
+    <Sheet ref={approverSheetRef} themeVariant={themeDerivedFromThemePreference}>
       <Box p="5">
         <Button title={t`Submit`} buttonState="default" onPress={approve} />
       </Box>

diff --git a/apps/mobile/src/components/browser/browser-in-use.tsx b/apps/mobile/src/components/browser/browser-in-use.tsx
@@ -4,7 +4,7 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { WebView, WebViewMessageEvent, WebViewNavigation } from 'react-native-webview';
 
 import injectedProvider from '@/scripts/dist/injected-provider';
-import { useSettings } from '@/store/settings/settings.write';
+import { useSettings } from '@/store/settings/settings';
 import { useWallets } from '@/store/wallets/wallets.read';
 import { useTheme } from '@shopify/restyle';
 
@@ -42,7 +42,7 @@ export function BrowerInUse({ textURL, goToInactiveBrowser }: BrowserInUseProp)
   const webViewRef = useRef<WebView>(null);
   const [navState, setNavState] = useState<WebViewNavigation | null>(null);
   const settingsSheetRef = useRef<SheetRef>(null);
-  const { theme: themeVariant } = useSettings();
+  const { themeDerivedFromThemePreference } = useSettings();
   const wallets = useWallets();
 
   function closeBrowser() {
@@ -141,7 +141,7 @@ export function BrowerInUse({ textURL, goToInactiveBrowser }: BrowserInUseProp)
           <EllipsisHIcon />
         </TouchableOpacity>
       </Box>
-      <Sheet ref={settingsSheetRef} themeVariant={themeVariant}>
+      <Sheet ref={settingsSheetRef} themeVariant={themeDerivedFromThemePreference}>
         <Box p="5" />
       </Sheet>
       <ApproverSheet