fix: settings design qa

apps/mobile/ios/Podfile.lock

@@ -1997,7 +1997,7 @@ SPEC CHECKSUMS:
   SDWebImageSVGCoder: 15a300a97ec1c8ac958f009c02220ac0402e936c
   SDWebImageWebPCoder: e38c0a70396191361d60c092933e22c20d5b1380
   SocketRocket: abac6f5de4d4d62d24e11868d7a2f427e0ef940d
-  Yoga: 348f8b538c3ed4423eb58a8e5730feec50bce372
+  Yoga: b9a182ab00cf25926e7f79657d08c5d23c2d03b0
 
 PODFILE CHECKSUM: 1183a5e3969c957f2df7140e9b85ba46d355b320
 

apps/mobile/package.json

@@ -69,6 +69,7 @@
     "buffer": "6.0.3",
     "dayjs": "1.11.13",
     "expo": "51.0.26",
+    "expo-application": "~5.9.1",
     "expo-asset": "10.0.6",
     "expo-blur": "13.0.2",
     "expo-clipboard": "6.0.3",

apps/mobile/src/app/(home)/_layout.tsx

@@ -2,12 +2,9 @@ import { RefObject, createContext } from 'react';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { ActionBarMethods } from '@/components/action-bar';
-import { AccountsHeader } from '@/components/headers/account';
 import { BackButtonHeader } from '@/components/headers/back-button';
-import { BlurredHeader } from '@/components/headers/containers/blurred-header';
 import { SimpleHeader } from '@/components/headers/containers/simple-header';
 import { LeatherLogoHeader } from '@/components/headers/leather-logo';
-import { MenuHeader } from '@/components/headers/menu';
 import { OptionsHeader } from '@/components/headers/options';
 import { TitleHeader } from '@/components/headers/title';
 import { t } from '@lingui/macro';
@@ -26,14 +23,14 @@ export default function StackLayout() {
   const insets = useSafeAreaInsets();
   const router = useRouter();
 
-  const NavigationHeader = (
-    <BlurredHeader
-      insets={insets}
-      left={<BackButtonHeader onPress={() => router.back()} />}
-      center={<AccountsHeader />}
-      right={<MenuHeader />}
-    />
-  );
+  // const NavigationHeader = (
+  //   <BlurredHeader
+  //     insets={insets}
+  //     left={<BackButtonHeader onPress={() => router.back()} />}
+  //     center={<AccountsHeader />}
+  //     right={<MenuHeader />}
+  //   />
+  // );
 
   const NavigationHeaderHome = (
     <SimpleHeader insets={insets} left={<LeatherLogoHeader />} right={<OptionsHeader />} />
@@ -94,11 +91,12 @@ export default function StackLayout() {
 
   return (
     <Stack>
-      <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
+      {/* TODO: Can these be removed, or they should go after index route? */}
+      {/* <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
       <Stack.Screen name="send" options={{ header: () => NavigationHeader }} />
       <Stack.Screen name="receive" options={{ header: () => NavigationHeader }} />
       <Stack.Screen name="swap" options={{ header: () => NavigationHeader }} />
-      <Stack.Screen name="browser" options={{ headerShown: false }} />
+      <Stack.Screen name="browser" options={{ headerShown: false }} /> */}
       <Stack.Screen name="index" options={{ header: () => NavigationHeaderHome }} />
       <Stack.Screen name="create-new-wallet" options={{ header: () => NavigationBackSimple }} />
       <Stack.Screen name="recover-wallet" options={{ header: () => NavigationBackSimple }} />

apps/mobile/src/app/(home)/settings/display/display-cell.tsx

@@ -1,12 +1,7 @@
 import { ReactNode } from 'react';
+import { Pressable } from 'react-native';
 
-import {
-  Avatar,
-  ChevronRightIcon,
-  Flag,
-  ItemLayout,
-  TouchableOpacity,
-} from '@leather.io/ui/native';
+import { Avatar, ChevronRightIcon, Flag, ItemLayout } from '@leather.io/ui/native';
 
 interface DisplayCellProps {
   caption: string;
@@ -16,14 +11,14 @@ interface DisplayCellProps {
 }
 export function DisplayCell({ caption, icon, onCreateSheetRef, title }: DisplayCellProps) {
   return (
-    <TouchableOpacity onPress={onCreateSheetRef}>
+    <Pressable onPress={onCreateSheetRef}>
       <Flag img={<Avatar>{icon}</Avatar>}>
         <ItemLayout
           actionIcon={<ChevronRightIcon variant="small" />}
           captionLeft={caption}
           titleLeft={title}
         />
       </Flag>
-    </TouchableOpacity>
+    </Pressable>
   );
 }

apps/mobile/src/app/(home)/settings/help/help-cell.tsx

@@ -0,0 +1,24 @@
+import { ReactNode } from 'react';
+import { Pressable } from 'react-native';
+
+import { Avatar, ChevronRightIcon, Flag, ItemLayout } from '@leather.io/ui/native';
+
+interface DisplayCellProps {
+  caption: string;
+  icon: ReactNode;
+  onPress(): void;
+  title: string;
+}
+export function HelpCell({ caption, icon, onPress, title }: DisplayCellProps) {
+  return (
+    <Pressable onPress={onPress}>
+      <Flag img={<Avatar>{icon}</Avatar>}>
+        <ItemLayout
+          actionIcon={<ChevronRightIcon variant="small" />}
+          captionLeft={caption}
+          titleLeft={title}
+        />
+      </Flag>
+    </Pressable>
+  );
+}

apps/mobile/src/app/(home)/settings/help/index.tsx

@@ -4,14 +4,9 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { t } from '@lingui/macro';
 import { useTheme } from '@shopify/restyle';
 
-import {
-  Box,
-  Cell,
-  GraduateCapIcon,
-  MagicBookIcon,
-  SupportIcon,
-  Theme,
-} from '@leather.io/ui/native';
+import { Box, GraduateCapIcon, MagicBookIcon, SupportIcon, Theme } from '@leather.io/ui/native';
+
+import { HelpCell } from './help-cell';
 
 export default function SettingsHelpScreen() {
   const { bottom } = useSafeAreaInsets();
@@ -27,17 +22,22 @@ export default function SettingsHelpScreen() {
           gap: theme.spacing[5],
         }}
       >
-        <Cell
+        <HelpCell
           title={t`Support and feedback`}
-          subtitle={t`Placeholder`}
-          Icon={SupportIcon}
+          caption={t`Placeholder`}
+          icon={<SupportIcon />}
+          onPress={() => {}}
+        />
+        <HelpCell
+          title={t`Guides`}
+          caption={t`Placeholder`}
+          icon={<MagicBookIcon />}
           onPress={() => {}}
         />
-        <Cell title={t`Guides`} subtitle={t`Placeholder`} Icon={MagicBookIcon} onPress={() => {}} />
-        <Cell
+        <HelpCell
           title={t`Learn`}
-          subtitle={t`Placeholder`}
-          Icon={GraduateCapIcon}
+          caption={t`Placeholder`}
+          icon={<GraduateCapIcon />}
           onPress={() => {}}
         />
       </ScrollView>

apps/mobile/src/app/(home)/settings/index.tsx

@@ -1,108 +1,103 @@
-import { ScrollView } from 'react-native-gesture-handler';
+import { ScrollView } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { Divider } from '@/components/divider';
 import { AppRoutes } from '@/routes';
 import { t } from '@lingui/macro';
 import { useTheme } from '@shopify/restyle';
+import * as Application from 'expo-application';
 import { useRouter } from 'expo-router';
 
 import {
   Accordion,
   BellIcon,
   Box,
   Button,
-  Cell,
   GlobeTiltedIcon,
-  SettingsSliderThreeIcon,
+  SettingsGearIcon,
   ShieldIcon,
-  SunIcon,
+  SquareLinesBottomIcon,
   SupportIcon,
   Text,
   Theme,
+  UsersTwoIcon,
   WalletIcon,
 } from '@leather.io/ui/native';
 
+import { SettingsCell } from './settings-cell';
+
 export default function SettingsScreen() {
   const { bottom } = useSafeAreaInsets();
   const theme = useTheme<Theme>();
   const router = useRouter();
 
   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
-          title={t`Wallets and accounts`}
-          subtitle={t`Add, configure and remove`}
-          Icon={WalletIcon}
-          onPress={() => {
-            router.navigate(AppRoutes.SettingsWallet);
-          }}
-        />
+    <Box backgroundColor="ink.background-primary" flex={1}>
+      <ScrollView>
+        <Box paddingHorizontal="5" paddingVertical="5">
+          <SettingsCell
+            title={t`Wallets and accounts`}
+            caption={t`Add, configure and remove`}
+            icon={<WalletIcon />}
+            onPress={() => router.navigate(AppRoutes.SettingsWallet)}
+          />
+        </Box>
         <Divider />
-        <Cell
-          title={t`Display`}
-          subtitle={t`Theme, bitcoin unit and more`}
-          Icon={SunIcon}
-          onPress={() => {
-            router.navigate(AppRoutes.SettingsDisplay);
-          }}
-        />
-        <Cell
-          title={t`Security`}
-          subtitle={t`Analytics and app authentication`}
-          Icon={ShieldIcon}
-          onPress={() => {
-            router.navigate(AppRoutes.SettingsSecurity);
-          }}
-        />
-        <Cell
-          title={t`Networks`}
-          subtitle={t`Mainnet, testnet or signet`}
-          Icon={GlobeTiltedIcon}
-          onPress={() => {
-            router.navigate(AppRoutes.SettingsNetworks);
-          }}
-        />
-        <Cell
-          title={t`Notifications`}
-          subtitle={t`Push and email notifications`}
-          Icon={BellIcon}
-          onPress={() => {
-            router.navigate(AppRoutes.SettingsNotifications);
-          }}
-        />
-        <Cell
-          title={t`Help`}
-          subtitle={t`Support, guides and articles`}
-          Icon={SupportIcon}
-          onPress={() => {
-            router.navigate(AppRoutes.SettingsHelp);
+        <Box gap="5" paddingHorizontal="5" paddingVertical="5">
+          <SettingsCell
+            title={t`Display`}
+            caption={t`Theme, bitcoin unit and more`}
+            icon={<SquareLinesBottomIcon />}
+            onPress={() => router.navigate(AppRoutes.SettingsDisplay)}
+          />
+          <SettingsCell
+            title={t`Security`}
+            caption={t`Analytics and app authentication`}
+            icon={<ShieldIcon />}
+            onPress={() => router.navigate(AppRoutes.SettingsSecurity)}
+          />
+          <SettingsCell
+            title={t`Networks`}
+            caption={t`Mainnet, testnet or signet`}
+            icon={<GlobeTiltedIcon />}
+            onPress={() => router.navigate(AppRoutes.SettingsNetworks)}
+          />
+          <SettingsCell
+            title={t`Notifications`}
+            caption={t`Push and email notifications`}
+            icon={<BellIcon />}
+            onPress={() => router.navigate(AppRoutes.SettingsNotifications)}
+          />
+          <SettingsCell
+            title={t`Help`}
+            caption={t`Support, guides and articles`}
+            icon={<SupportIcon />}
+            onPress={() => router.navigate(AppRoutes.SettingsHelp)}
+          />
+          <Accordion
+            label={t`More options`}
+            content={
+              <>
+                <SettingsCell title={t`Contacts`} icon={<UsersTwoIcon />} onPress={() => {}} />
+                <SettingsCell title={t`Fees`} icon={<SettingsGearIcon />} onPress={() => {}} />
+              </>
+            }
+          />
+        </Box>
+        <Divider />
+        <Box
+          mb="5"
+          style={{
+            paddingBottom: theme.spacing['5'] + bottom,
+            paddingHorizontal: theme.spacing['5'],
           }}
-        />
-        <Accordion
-          label={t`More options`}
-          content={
-            <>
-              <Cell title={t`Contacts`} Icon={SupportIcon} />
-              <Cell title={t`Fees`} Icon={SettingsSliderThreeIcon} />
-            </>
-          }
-        />
-        {/* TODO: Replace with shared Footer */}
-        <Box mb="5">
-          <Divider />
+        >
           <Box pt="5" pb="5">
             <Text variant="label01">{t`Version`}</Text>
             <Text variant="caption01" color="ink.text-subdued">
-              0.0
+              {process.env.NODE_ENV === 'development'
+                ? Application.nativeBuildVersion
+                : Application.nativeApplicationVersion}
             </Text>
           </Box>
           <Button onPress={() => {}} buttonState="outline" title={t`Lock app`} />

apps/mobile/src/app/(home)/settings/networks/network-cell.tsx

@@ -1,6 +1,7 @@
 import { ReactNode } from 'react';
+import { Pressable } from 'react-native';
 
-import { Avatar, Flag, ItemLayout, RadioButton, TouchableOpacity } from '@leather.io/ui/native';
+import { Avatar, Flag, ItemLayout, RadioButton } from '@leather.io/ui/native';
 
 interface NetworkCellProps {
   caption: string;
@@ -17,14 +18,14 @@ export function NetworkCell({
   title,
 }: NetworkCellProps) {
   return (
-    <TouchableOpacity onPress={onChangeNetwork}>
+    <Pressable onPress={onChangeNetwork}>
       <Flag img={<Avatar>{icon}</Avatar>}>
         <ItemLayout
           actionIcon={<RadioButton disabled isSelected={isSelected} />}
           titleLeft={title}
           captionLeft={caption}
         />
       </Flag>
-    </TouchableOpacity>
+    </Pressable>
   );
 }