From b56ae02a9e088ec7e1fdb7f1dc8748d765560052 Mon Sep 17 00:00:00 2001
From: Fara Woolf <fara@trustmachines.co>
Date: Fri, 27 Sep 2024 16:48:55 -0400
Subject: [PATCH] fix: settings design qa

---
 apps/mobile/ios/Podfile.lock                  |   2 +-
 apps/mobile/package.json                      |   1 +
 apps/mobile/src/app/(home)/_layout.tsx        |  24 ++-
 .../(home)/settings/display/display-cell.tsx  |  13 +-
 .../app/(home)/settings/help/help-cell.tsx    |  24 +++
 .../src/app/(home)/settings/help/index.tsx    |  30 ++--
 apps/mobile/src/app/(home)/settings/index.tsx | 141 +++++++++---------
 .../(home)/settings/networks/network-cell.tsx |   7 +-
 .../(home)/settings/notifications/email.tsx   |   6 +-
 .../(home)/settings/notifications/index.tsx   |   7 +-
 .../settings/security/security-cell.tsx       |  13 +-
 .../src/app/(home)/settings/settings-cell.tsx |  24 +++
 apps/mobile/src/components/divider.tsx        |   8 +-
 apps/mobile/src/locales/en/messages.po        |  64 ++++----
 .../src/locales/pseudo-locale/messages.po     |  64 ++++----
 .../item-layout/item-layout.native.tsx        |  13 +-
 packages/ui/src/icons/index.native.ts         |   4 +-
 .../icons/package-security-icon.native.tsx    |   2 +-
 .../ui/src/icons/users-two-icon.native.tsx    |  17 +++
 pnpm-lock.yaml                                |   3 +
 20 files changed, 262 insertions(+), 205 deletions(-)
 create mode 100644 apps/mobile/src/app/(home)/settings/help/help-cell.tsx
 create mode 100644 apps/mobile/src/app/(home)/settings/settings-cell.tsx
 create mode 100644 packages/ui/src/icons/users-two-icon.native.tsx

diff --git a/apps/mobile/ios/Podfile.lock b/apps/mobile/ios/Podfile.lock
index fbee23343..618696f8d 100644
--- a/apps/mobile/ios/Podfile.lock
+++ b/apps/mobile/ios/Podfile.lock
@@ -1997,7 +1997,7 @@ SPEC CHECKSUMS:
   SDWebImageSVGCoder: 15a300a97ec1c8ac958f009c02220ac0402e936c
   SDWebImageWebPCoder: e38c0a70396191361d60c092933e22c20d5b1380
   SocketRocket: abac6f5de4d4d62d24e11868d7a2f427e0ef940d
-  Yoga: 348f8b538c3ed4423eb58a8e5730feec50bce372
+  Yoga: b9a182ab00cf25926e7f79657d08c5d23c2d03b0
 
 PODFILE CHECKSUM: 1183a5e3969c957f2df7140e9b85ba46d355b320
 
diff --git a/apps/mobile/package.json b/apps/mobile/package.json
index 1fa15bccd..15ceb4789 100644
--- a/apps/mobile/package.json
+++ b/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",
diff --git a/apps/mobile/src/app/(home)/_layout.tsx b/apps/mobile/src/app/(home)/_layout.tsx
index fadbe294b..647cde9e2 100644
--- a/apps/mobile/src/app/(home)/_layout.tsx
+++ b/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 }} />
diff --git a/apps/mobile/src/app/(home)/settings/display/display-cell.tsx b/apps/mobile/src/app/(home)/settings/display/display-cell.tsx
index 81f7bc169..5332e82ec 100644
--- a/apps/mobile/src/app/(home)/settings/display/display-cell.tsx
+++ b/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,7 +11,7 @@ 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" />}
@@ -24,6 +19,6 @@ export function DisplayCell({ caption, icon, onCreateSheetRef, title }: DisplayC
           titleLeft={title}
         />
       </Flag>
-    </TouchableOpacity>
+    </Pressable>
   );
 }
diff --git a/apps/mobile/src/app/(home)/settings/help/help-cell.tsx b/apps/mobile/src/app/(home)/settings/help/help-cell.tsx
new file mode 100644
index 000000000..c6f83a851
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/apps/mobile/src/app/(home)/settings/help/index.tsx b/apps/mobile/src/app/(home)/settings/help/index.tsx
index e4044bd6b..ca9824313 100644
--- a/apps/mobile/src/app/(home)/settings/help/index.tsx
+++ b/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>
diff --git a/apps/mobile/src/app/(home)/settings/index.tsx b/apps/mobile/src/app/(home)/settings/index.tsx
index b5f51453a..5e50c46f8 100644
--- a/apps/mobile/src/app/(home)/settings/index.tsx
+++ b/apps/mobile/src/app/(home)/settings/index.tsx
@@ -1,10 +1,11 @@
-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 {
@@ -12,97 +13,91 @@ import {
   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`} />
diff --git a/apps/mobile/src/app/(home)/settings/networks/network-cell.tsx b/apps/mobile/src/app/(home)/settings/networks/network-cell.tsx
index 3fcce18d0..0b407570f 100644
--- a/apps/mobile/src/app/(home)/settings/networks/network-cell.tsx
+++ b/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,7 +18,7 @@ export function NetworkCell({
   title,
 }: NetworkCellProps) {
   return (
-    <TouchableOpacity onPress={onChangeNetwork}>
+    <Pressable onPress={onChangeNetwork}>
       <Flag img={<Avatar>{icon}</Avatar>}>
         <ItemLayout
           actionIcon={<RadioButton disabled isSelected={isSelected} />}
@@ -25,6 +26,6 @@ export function NetworkCell({
           captionLeft={caption}
         />
       </Flag>
-    </TouchableOpacity>
+    </Pressable>
   );
 }
diff --git a/apps/mobile/src/app/(home)/settings/notifications/email.tsx b/apps/mobile/src/app/(home)/settings/notifications/email.tsx
index 3bb7790dc..dbe6a8a22 100644
--- a/apps/mobile/src/app/(home)/settings/notifications/email.tsx
+++ b/apps/mobile/src/app/(home)/settings/notifications/email.tsx
@@ -1,5 +1,5 @@
 import { useRef } from 'react';
-import { TouchableOpacity } from 'react-native-gesture-handler';
+import { Pressable } from 'react-native';
 
 import { EmailAddressSheet } from '@/features/settings/email-address-sheet';
 import { t } from '@lingui/macro';
@@ -21,7 +21,7 @@ export default function SettingsNotificationsEmailScreen() {
   return (
     <>
       <SettingsScreenLayout>
-        <TouchableOpacity
+        <Pressable
           onPress={() => {
             emailAddressSheetRef.current?.present();
           }}
@@ -39,7 +39,7 @@ export default function SettingsNotificationsEmailScreen() {
               titleLeft={t`Email address`}
             />
           </Flag>
-        </TouchableOpacity>
+        </Pressable>
       </SettingsScreenLayout>
       <EmailAddressSheet sheetRef={emailAddressSheetRef} />
     </>
diff --git a/apps/mobile/src/app/(home)/settings/notifications/index.tsx b/apps/mobile/src/app/(home)/settings/notifications/index.tsx
index 6e6ae14d2..88ae0571b 100644
--- a/apps/mobile/src/app/(home)/settings/notifications/index.tsx
+++ b/apps/mobile/src/app/(home)/settings/notifications/index.tsx
@@ -1,4 +1,5 @@
-import { Switch, TouchableOpacity } from 'react-native-gesture-handler';
+import { Pressable } from 'react-native';
+import { Switch } from 'react-native-gesture-handler';
 
 import { t } from '@lingui/macro';
 
@@ -10,7 +11,7 @@ import SettingsScreenLayout from '../settings-screen.layout';
 export default function SettingsNotificationsScreen() {
   return (
     <SettingsScreenLayout>
-      <TouchableOpacity onPress={() => {}}>
+      <Pressable onPress={() => {}}>
         <Flag
           img={
             <Avatar>
@@ -24,7 +25,7 @@ export default function SettingsNotificationsScreen() {
             captionLeft={t`Description`}
           />
         </Flag>
-      </TouchableOpacity>
+      </Pressable>
     </SettingsScreenLayout>
   );
 }
diff --git a/apps/mobile/src/app/(home)/settings/security/security-cell.tsx b/apps/mobile/src/app/(home)/settings/security/security-cell.tsx
index 4327565d0..d14f92ef8 100644
--- a/apps/mobile/src/app/(home)/settings/security/security-cell.tsx
+++ b/apps/mobile/src/app/(home)/settings/security/security-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 SecurityCellProps {
   caption: string;
@@ -16,7 +11,7 @@ interface SecurityCellProps {
 }
 export function SecurityCell({ caption, icon, onCreateSheetRef, title }: SecurityCellProps) {
   return (
-    <TouchableOpacity onPress={onCreateSheetRef}>
+    <Pressable onPress={onCreateSheetRef}>
       <Flag img={<Avatar>{icon}</Avatar>}>
         <ItemLayout
           actionIcon={<ChevronRightIcon variant="small" />}
@@ -24,6 +19,6 @@ export function SecurityCell({ caption, icon, onCreateSheetRef, title }: Securit
           titleLeft={title}
         />
       </Flag>
-    </TouchableOpacity>
+    </Pressable>
   );
 }
diff --git a/apps/mobile/src/app/(home)/settings/settings-cell.tsx b/apps/mobile/src/app/(home)/settings/settings-cell.tsx
new file mode 100644
index 000000000..542d8974a
--- /dev/null
+++ b/apps/mobile/src/app/(home)/settings/settings-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 SettingsCellProps {
+  caption?: string;
+  icon: ReactNode;
+  onPress(): void;
+  title: string;
+}
+export function SettingsCell({ caption, icon, onPress, title }: SettingsCellProps) {
+  return (
+    <Pressable onPress={onPress}>
+      <Flag img={<Avatar>{icon}</Avatar>}>
+        <ItemLayout
+          actionIcon={<ChevronRightIcon variant="small" />}
+          captionLeft={caption}
+          titleLeft={title}
+        />
+      </Flag>
+    </Pressable>
+  );
+}
diff --git a/apps/mobile/src/components/divider.tsx b/apps/mobile/src/components/divider.tsx
index 871ab95af..4cd2cf768 100644
--- a/apps/mobile/src/components/divider.tsx
+++ b/apps/mobile/src/components/divider.tsx
@@ -1,5 +1,7 @@
-import { Box } from '@leather.io/ui/native';
+import { BoxProps } from '@shopify/restyle';
 
-export function Divider() {
-  return <Box width="100%" height={1} bg="ink.border-transparent" />;
+import { Box, Theme } from '@leather.io/ui/native';
+
+export function Divider(props: BoxProps<Theme>) {
+  return <Box bg="ink.border-transparent" height={1} width="100%" {...props} />;
 }
diff --git a/apps/mobile/src/locales/en/messages.po b/apps/mobile/src/locales/en/messages.po
index 9ac8442af..75b413bd5 100644
--- a/apps/mobile/src/locales/en/messages.po
+++ b/apps/mobile/src/locales/en/messages.po
@@ -1,6 +1,6 @@
 msgid ""
 msgstr ""
-"POT-Creation-Date: 2024-09-30 13:35+0400\n"
+"POT-Creation-Date: 2024-09-30 09:05-0400\n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
@@ -96,7 +96,7 @@ msgstr "Add wallet"
 msgid "Add Wallet"
 msgstr "Add Wallet"
 
-#: src/app/(home)/settings/index.tsx:43
+#: src/app/(home)/settings/index.tsx:40
 msgid "Add, configure and remove"
 msgstr "Add, configure and remove"
 
@@ -167,7 +167,7 @@ msgstr "Amazing asset"
 msgid "Analytics"
 msgstr "Analytics"
 
-#: src/app/(home)/settings/index.tsx:60
+#: src/app/(home)/settings/index.tsx:55
 msgid "Analytics and app authentication"
 msgstr "Analytics and app authentication"
 
@@ -290,7 +290,7 @@ msgstr "Connect Mpc wallet: {mpcWalletName}"
 msgid "Connected"
 msgstr "Connected"
 
-#: src/app/(home)/settings/index.tsx:94
+#: src/app/(home)/settings/index.tsx:81
 msgid "Contacts"
 msgstr "Contacts"
 
@@ -350,7 +350,7 @@ msgstr "Create, Import or connect instantly"
 msgid "Creation date"
 msgstr "Creation date"
 
-#: src/app/(home)/settings/notifications/index.tsx:24
+#: src/app/(home)/settings/notifications/index.tsx:25
 #: src/components/browser/browser-empty-state.tsx:29
 #: src/components/browser/browser-empty-state.tsx:31
 #: src/components/browser/browser-empty-state.tsx:32
@@ -382,7 +382,7 @@ msgstr "Creation date"
 msgid "Description"
 msgstr "Description"
 
-#: src/app/(home)/_layout.tsx:91
+#: src/app/(home)/_layout.tsx:88
 msgid "Developer tools"
 msgstr "Developer tools"
 
@@ -393,8 +393,8 @@ msgstr "Developer tools"
 msgid "Disabled"
 msgstr "Disabled"
 
-#: src/app/(home)/_layout.tsx:109
-#: src/app/(home)/settings/index.tsx:51
+#: src/app/(home)/_layout.tsx:107
+#: src/app/(home)/settings/index.tsx:48
 msgid "Display"
 msgstr "Display"
 
@@ -444,7 +444,7 @@ msgstr "Export xPub"
 msgid "Failed to get push token for push notification!"
 msgstr "Failed to get push token for push notification!"
 
-#: src/app/(home)/settings/index.tsx:95
+#: src/app/(home)/settings/index.tsx:82
 msgid "Fees"
 msgstr "Fees"
 
@@ -468,12 +468,12 @@ msgstr "Generating…"
 msgid "getAddresses"
 msgstr "getAddresses"
 
-#: src/app/(home)/settings/help/index.tsx:36
+#: src/app/(home)/settings/help/index.tsx:32
 msgid "Guides"
 msgstr "Guides"
 
-#: src/app/(home)/_layout.tsx:122
-#: src/app/(home)/settings/index.tsx:83
+#: src/app/(home)/_layout.tsx:120
+#: src/app/(home)/settings/index.tsx:72
 msgid "Help"
 msgstr "Help"
 
@@ -524,7 +524,7 @@ msgstr "Ledger"
 msgid "Ledger, Trezor, Ryder and more"
 msgstr "Ledger, Trezor, Ryder and more"
 
-#: src/app/(home)/settings/index.tsx:108
+#: src/app/(home)/settings/index.tsx:103
 msgid "Lock app"
 msgstr "Lock app"
 
@@ -533,11 +533,11 @@ msgstr "Lock app"
 msgid "locked"
 msgstr "locked"
 
-#: src/app/(home)/settings/index.tsx:68
+#: src/app/(home)/settings/index.tsx:61
 msgid "Mainnet, testnet or signet"
 msgstr "Mainnet, testnet or signet"
 
-#: src/app/(home)/settings/index.tsx:91
+#: src/app/(home)/settings/index.tsx:78
 #: src/components/add-wallet/add-wallet-sheet.layout.tsx:100
 msgid "More options"
 msgstr "More options"
@@ -572,8 +572,8 @@ msgstr "navigate to browser"
 msgid "Network changed"
 msgstr "Network changed"
 
-#: src/app/(home)/_layout.tsx:117
-#: src/app/(home)/settings/index.tsx:67
+#: src/app/(home)/_layout.tsx:115
+#: src/app/(home)/settings/index.tsx:60
 msgid "Networks"
 msgstr "Networks"
 
@@ -581,11 +581,11 @@ msgstr "Networks"
 msgid "No key needed"
 msgstr "No key needed"
 
-#: src/app/(home)/settings/notifications/index.tsx:23
+#: src/app/(home)/settings/notifications/index.tsx:24
 msgid "Notification"
 msgstr "Notification"
 
-#: src/app/(home)/settings/index.tsx:75
+#: src/app/(home)/settings/index.tsx:66
 #: src/app/(home)/settings/notifications/_layout.tsx:43
 msgid "Notifications"
 msgstr "Notifications"
@@ -626,8 +626,8 @@ msgstr "Paste"
 msgid "Paste or type a Secret Key to add its associated wallet."
 msgstr "Paste or type a Secret Key to add its associated wallet."
 
-#: src/app/(home)/settings/help/index.tsx:32
-#: src/app/(home)/settings/help/index.tsx:36
+#: src/app/(home)/settings/help/index.tsx:27
+#: src/app/(home)/settings/help/index.tsx:33
 #: src/app/(home)/settings/help/index.tsx:39
 msgid "Placeholder"
 msgstr "Placeholder"
@@ -657,7 +657,7 @@ msgstr "Provide an email address for receiving notifications"
 msgid "Push"
 msgstr "Push"
 
-#: src/app/(home)/settings/index.tsx:76
+#: src/app/(home)/settings/index.tsx:67
 msgid "Push and email notifications"
 msgstr "Push and email notifications"
 
@@ -720,8 +720,8 @@ msgstr "schedule dummy notifications in 3s"
 msgid "SECRET KEY"
 msgstr "SECRET KEY"
 
-#: src/app/(home)/_layout.tsx:113
-#: src/app/(home)/settings/index.tsx:59
+#: src/app/(home)/_layout.tsx:111
+#: src/app/(home)/settings/index.tsx:54
 msgid "Security"
 msgstr "Security"
 
@@ -734,8 +734,8 @@ msgstr "securityLevelPreference:"
 msgid "Send"
 msgstr "Send"
 
-#: src/app/(home)/_layout.tsx:46
-#: src/app/(home)/_layout.tsx:56
+#: src/app/(home)/_layout.tsx:43
+#: src/app/(home)/_layout.tsx:53
 msgid "Settings"
 msgstr "Settings"
 
@@ -803,11 +803,11 @@ msgstr "Successfully copied to clipboard!"
 msgid "Suggested"
 msgstr "Suggested"
 
-#: src/app/(home)/settings/help/index.tsx:31
+#: src/app/(home)/settings/help/index.tsx:26
 msgid "Support and feedback"
 msgstr "Support and feedback"
 
-#: src/app/(home)/settings/index.tsx:84
+#: src/app/(home)/settings/index.tsx:73
 msgid "Support, guides and articles"
 msgstr "Support, guides and articles"
 
@@ -823,7 +823,7 @@ msgstr "Swap 🔄"
 msgid "Tap to view Secret Key"
 msgstr "Tap to view Secret Key"
 
-#: src/app/(home)/_layout.tsx:78
+#: src/app/(home)/_layout.tsx:75
 msgid "Testnet"
 msgstr "Testnet"
 
@@ -844,7 +844,7 @@ msgstr "Theme"
 msgid "Theme updated"
 msgstr "Theme updated"
 
-#: src/app/(home)/settings/index.tsx:52
+#: src/app/(home)/settings/index.tsx:49
 msgid "Theme, bitcoin unit and more"
 msgstr "Theme, bitcoin unit and more"
 
@@ -931,7 +931,7 @@ msgstr "Type your recovery phrase"
 msgid "Use your device’s PIN, Face ID, or other biometrics for quick and secure access."
 msgstr "Use your device’s PIN, Face ID, or other biometrics for quick and secure access."
 
-#: src/app/(home)/settings/index.tsx:103
+#: src/app/(home)/settings/index.tsx:96
 msgid "Version"
 msgstr "Version"
 
@@ -959,7 +959,7 @@ msgstr "Wallet already exists"
 msgid "Wallet management"
 msgstr "Wallet management"
 
-#: src/app/(home)/settings/index.tsx:42
+#: src/app/(home)/settings/index.tsx:39
 msgid "Wallets and accounts"
 msgstr "Wallets and accounts"
 
diff --git a/apps/mobile/src/locales/pseudo-locale/messages.po b/apps/mobile/src/locales/pseudo-locale/messages.po
index 96362cdd6..dabd84e5b 100644
--- a/apps/mobile/src/locales/pseudo-locale/messages.po
+++ b/apps/mobile/src/locales/pseudo-locale/messages.po
@@ -1,6 +1,6 @@
 msgid ""
 msgstr ""
-"POT-Creation-Date: 2024-09-30 13:35+0400\n"
+"POT-Creation-Date: 2024-09-30 09:05-0400\n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
@@ -96,7 +96,7 @@ msgstr ""
 msgid "Add Wallet"
 msgstr ""
 
-#: src/app/(home)/settings/index.tsx:43
+#: src/app/(home)/settings/index.tsx:40
 msgid "Add, configure and remove"
 msgstr ""
 
@@ -167,7 +167,7 @@ msgstr ""
 msgid "Analytics"
 msgstr ""
 
-#: src/app/(home)/settings/index.tsx:60
+#: src/app/(home)/settings/index.tsx:55
 msgid "Analytics and app authentication"
 msgstr ""
 
@@ -290,7 +290,7 @@ msgstr ""
 msgid "Connected"
 msgstr ""
 
-#: src/app/(home)/settings/index.tsx:94
+#: src/app/(home)/settings/index.tsx:81
 msgid "Contacts"
 msgstr ""
 
@@ -350,7 +350,7 @@ msgstr ""
 msgid "Creation date"
 msgstr ""
 
-#: src/app/(home)/settings/notifications/index.tsx:24
+#: src/app/(home)/settings/notifications/index.tsx:25
 #: src/components/browser/browser-empty-state.tsx:29
 #: src/components/browser/browser-empty-state.tsx:31
 #: src/components/browser/browser-empty-state.tsx:32
@@ -382,7 +382,7 @@ msgstr ""
 msgid "Description"
 msgstr ""
 
-#: src/app/(home)/_layout.tsx:91
+#: src/app/(home)/_layout.tsx:88
 msgid "Developer tools"
 msgstr ""
 
@@ -393,8 +393,8 @@ msgstr ""
 msgid "Disabled"
 msgstr ""
 
-#: src/app/(home)/_layout.tsx:109
-#: src/app/(home)/settings/index.tsx:51
+#: src/app/(home)/_layout.tsx:107
+#: src/app/(home)/settings/index.tsx:48
 msgid "Display"
 msgstr ""
 
@@ -444,7 +444,7 @@ msgstr ""
 msgid "Failed to get push token for push notification!"
 msgstr ""
 
-#: src/app/(home)/settings/index.tsx:95
+#: src/app/(home)/settings/index.tsx:82
 msgid "Fees"
 msgstr ""
 
@@ -468,12 +468,12 @@ msgstr ""
 msgid "getAddresses"
 msgstr ""
 
-#: src/app/(home)/settings/help/index.tsx:36
+#: src/app/(home)/settings/help/index.tsx:32
 msgid "Guides"
 msgstr ""
 
-#: src/app/(home)/_layout.tsx:122
-#: src/app/(home)/settings/index.tsx:83
+#: src/app/(home)/_layout.tsx:120
+#: src/app/(home)/settings/index.tsx:72
 msgid "Help"
 msgstr ""
 
@@ -524,7 +524,7 @@ msgstr ""
 msgid "Ledger, Trezor, Ryder and more"
 msgstr ""
 
-#: src/app/(home)/settings/index.tsx:108
+#: src/app/(home)/settings/index.tsx:103
 msgid "Lock app"
 msgstr ""
 
@@ -533,11 +533,11 @@ msgstr ""
 msgid "locked"
 msgstr ""
 
-#: src/app/(home)/settings/index.tsx:68
+#: src/app/(home)/settings/index.tsx:61
 msgid "Mainnet, testnet or signet"
 msgstr ""
 
-#: src/app/(home)/settings/index.tsx:91
+#: src/app/(home)/settings/index.tsx:78
 #: src/components/add-wallet/add-wallet-sheet.layout.tsx:100
 msgid "More options"
 msgstr ""
@@ -572,8 +572,8 @@ msgstr ""
 msgid "Network changed"
 msgstr ""
 
-#: src/app/(home)/_layout.tsx:117
-#: src/app/(home)/settings/index.tsx:67
+#: src/app/(home)/_layout.tsx:115
+#: src/app/(home)/settings/index.tsx:60
 msgid "Networks"
 msgstr ""
 
@@ -581,11 +581,11 @@ msgstr ""
 msgid "No key needed"
 msgstr ""
 
-#: src/app/(home)/settings/notifications/index.tsx:23
+#: src/app/(home)/settings/notifications/index.tsx:24
 msgid "Notification"
 msgstr ""
 
-#: src/app/(home)/settings/index.tsx:75
+#: src/app/(home)/settings/index.tsx:66
 #: src/app/(home)/settings/notifications/_layout.tsx:43
 msgid "Notifications"
 msgstr ""
@@ -626,8 +626,8 @@ msgstr ""
 msgid "Paste or type a Secret Key to add its associated wallet."
 msgstr ""
 
-#: src/app/(home)/settings/help/index.tsx:32
-#: src/app/(home)/settings/help/index.tsx:36
+#: src/app/(home)/settings/help/index.tsx:27
+#: src/app/(home)/settings/help/index.tsx:33
 #: src/app/(home)/settings/help/index.tsx:39
 msgid "Placeholder"
 msgstr ""
@@ -657,7 +657,7 @@ msgstr ""
 msgid "Push"
 msgstr ""
 
-#: src/app/(home)/settings/index.tsx:76
+#: src/app/(home)/settings/index.tsx:67
 msgid "Push and email notifications"
 msgstr ""
 
@@ -720,8 +720,8 @@ msgstr ""
 msgid "SECRET KEY"
 msgstr ""
 
-#: src/app/(home)/_layout.tsx:113
-#: src/app/(home)/settings/index.tsx:59
+#: src/app/(home)/_layout.tsx:111
+#: src/app/(home)/settings/index.tsx:54
 msgid "Security"
 msgstr ""
 
@@ -734,8 +734,8 @@ msgstr ""
 msgid "Send"
 msgstr ""
 
-#: src/app/(home)/_layout.tsx:46
-#: src/app/(home)/_layout.tsx:56
+#: src/app/(home)/_layout.tsx:43
+#: src/app/(home)/_layout.tsx:53
 msgid "Settings"
 msgstr ""
 
@@ -803,11 +803,11 @@ msgstr ""
 msgid "Suggested"
 msgstr ""
 
-#: src/app/(home)/settings/help/index.tsx:31
+#: src/app/(home)/settings/help/index.tsx:26
 msgid "Support and feedback"
 msgstr ""
 
-#: src/app/(home)/settings/index.tsx:84
+#: src/app/(home)/settings/index.tsx:73
 msgid "Support, guides and articles"
 msgstr ""
 
@@ -823,7 +823,7 @@ msgstr ""
 msgid "Tap to view Secret Key"
 msgstr ""
 
-#: src/app/(home)/_layout.tsx:78
+#: src/app/(home)/_layout.tsx:75
 msgid "Testnet"
 msgstr ""
 
@@ -842,7 +842,7 @@ msgstr ""
 msgid "Theme updated"
 msgstr ""
 
-#: src/app/(home)/settings/index.tsx:52
+#: src/app/(home)/settings/index.tsx:49
 msgid "Theme, bitcoin unit and more"
 msgstr ""
 
@@ -929,7 +929,7 @@ msgstr ""
 msgid "Use your device’s PIN, Face ID, or other biometrics for quick and secure access."
 msgstr ""
 
-#: src/app/(home)/settings/index.tsx:103
+#: src/app/(home)/settings/index.tsx:96
 msgid "Version"
 msgstr ""
 
@@ -957,7 +957,7 @@ msgstr ""
 msgid "Wallet management"
 msgstr ""
 
-#: src/app/(home)/settings/index.tsx:42
+#: src/app/(home)/settings/index.tsx:39
 msgid "Wallets and accounts"
 msgstr ""
 
diff --git a/packages/ui/src/components/item-layout/item-layout.native.tsx b/packages/ui/src/components/item-layout/item-layout.native.tsx
index bfd08c7ac..ad15a5fde 100644
--- a/packages/ui/src/components/item-layout/item-layout.native.tsx
+++ b/packages/ui/src/components/item-layout/item-layout.native.tsx
@@ -3,7 +3,6 @@ import { ReactNode, isValidElement } from 'react';
 import { isString } from '@leather.io/utils';
 
 import { Box } from '../box/box.native';
-import { HStack } from '../box/hstack.native';
 import { Stack } from '../box/stack.native';
 import { Text } from '../text/text.native';
 
@@ -21,9 +20,11 @@ export function ItemLayout({
   titleLeft,
   titleRight,
 }: ItemLayoutProps) {
+  const hasRightElement = titleRight || captionRight;
+
   return (
     <Box flex={1} alignItems="center" flexDirection="row" justifyContent="space-between">
-      <Stack alignItems="flex-start" flexGrow={1} overflow="hidden">
+      <Stack alignItems="flex-start" flex={1} mr="3" overflow="hidden">
         {isValidElement(titleLeft) ? titleLeft : <Text variant="label02">{titleLeft}</Text>}
         {captionLeft && isValidElement(captionLeft) && captionLeft}
         {captionLeft && isString(captionLeft) && (
@@ -32,8 +33,8 @@ export function ItemLayout({
           </Text>
         )}
       </Stack>
-      <HStack flex={1} gap="3">
-        <Stack alignItems="flex-end">
+      {hasRightElement && (
+        <Stack flex={1} alignItems="flex-end">
           {isValidElement(titleRight) ? titleRight : <Text variant="label02">{titleRight}</Text>}
           {captionRight && isValidElement(captionRight) && captionRight}
           {captionRight && isString(captionRight) && (
@@ -42,8 +43,8 @@ export function ItemLayout({
             </Text>
           )}
         </Stack>
-        {actionIcon}
-      </HStack>
+      )}
+      {actionIcon}
     </Box>
   );
 }
diff --git a/packages/ui/src/icons/index.native.ts b/packages/ui/src/icons/index.native.ts
index a73037b21..5d37a490c 100644
--- a/packages/ui/src/icons/index.native.ts
+++ b/packages/ui/src/icons/index.native.ts
@@ -31,6 +31,7 @@ export * from './graduate-cap-icon.native';
 export * from './head-icon.native';
 export * from './inbox-icon.native';
 export * from './info-circle-icon.native';
+export * from './key-icon.native';
 export * from './keyhole-icon.native';
 export * from './lock-icon.native';
 export * from './leather-lettermark-icon.native';
@@ -60,8 +61,8 @@ export * from './sun-icon.native';
 export * from './sun-in-cloud-icon.native';
 export * from './support-icon.native';
 export * from './test-tube-icon.native';
-export * from './key-icon.native';
 export * from './terminal-icon.native';
+export * from './users-two-icon.native';
 export * from './logos/logo-mpc-bitgo.native';
 export * from './logos/logo-mpc-privy.native';
 export * from './logos/logo-mpc-qredo.native';
@@ -76,5 +77,4 @@ export * from './logos/logo-hardware-ledger.native';
 export * from './logos/logo-hardware-onekey.native';
 export * from './logos/logo-hardware-trezor.native';
 export * from './logos/logo-hardware-foundation.native';
-
 export type { IconProps } from './icon/icon.native';
diff --git a/packages/ui/src/icons/package-security-icon.native.tsx b/packages/ui/src/icons/package-security-icon.native.tsx
index 8e8d9623f..85e9b0c8b 100644
--- a/packages/ui/src/icons/package-security-icon.native.tsx
+++ b/packages/ui/src/icons/package-security-icon.native.tsx
@@ -1,5 +1,5 @@
 import PackageSecuritySmall from '../assets/icons/package-security-16-16.svg';
-import PackageSecurity from '../assets/icons/palette-24-24.svg';
+import PackageSecurity from '../assets/icons/package-security-24-24.svg';
 import { Icon, IconProps } from './icon/icon.native';
 
 export function PackageSecurityIcon({ variant, ...props }: IconProps) {
diff --git a/packages/ui/src/icons/users-two-icon.native.tsx b/packages/ui/src/icons/users-two-icon.native.tsx
new file mode 100644
index 000000000..e067e67b5
--- /dev/null
+++ b/packages/ui/src/icons/users-two-icon.native.tsx
@@ -0,0 +1,17 @@
+import WalletSmall from '../assets/icons/users-two-16-16.svg';
+import Wallet from '../assets/icons/users-two-24-24.svg';
+import { Icon, IconProps } from './icon/icon.native';
+
+export function UsersTwoIcon({ variant, ...props }: IconProps) {
+  if (variant === 'small')
+    return (
+      <Icon {...props}>
+        <WalletSmall />
+      </Icon>
+    );
+  return (
+    <Icon {...props}>
+      <Wallet />
+    </Icon>
+  );
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 11af4dc34..350d52fc0 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -168,6 +168,9 @@ importers:
       expo:
         specifier: 51.0.26
         version: 51.0.26(myqknr2ojwjf6ytdd6j6fwllau)
+      expo-application:
+        specifier: 5.9.1
+        version: 5.9.1(expo@51.0.26(@babel/core@7.24.6)(@babel/preset-env@7.25.4(@babel/core@7.24.6))(@react-native/assets-registry@0.73.1)(@types/react@18.2.79)(expo-constants@16.0.2)(expo-linking@6.3.1)(expo-status-bar@1.12.1)(react-dom@18.2.0(react@18.2.0))(react-native-safe-area-context@4.10.1(react-native@0.74.1(@babel/core@7.24.6)(@babel/preset-env@7.25.4(@babel/core@7.24.6))(@react-native/assets-registry@0.73.1)(@types/react@18.2.79)(react@18.2.0))(react@18.2.0))(react-native-screens@3.31.1(react-native@0.74.1(@babel/core@7.24.6)(@babel/preset-env@7.25.4(@babel/core@7.24.6))(@react-native/assets-registry@0.73.1)(@types/react@18.2.79)(react@18.2.0))(react@18.2.0))(react-native@0.74.1(@babel/core@7.24.6)(@babel/preset-env@7.25.4(@babel/core@7.24.6))(@react-native/assets-registry@0.73.1)(@types/react@18.2.79)(react@18.2.0))(react@18.2.0)(typescript@5.5.4))
       expo-asset:
         specifier: 10.0.6
         version: 10.0.6(f4urq5v344mmbltkevg6jft2lq)