fix: settings design qa

leather-io · Sep 28, 2024 · 6eefef2 · 6eefef2
1 parent 498a1db
commit 6eefef2
Show file tree

Hide file tree

Showing 19 changed files with 222 additions and 169 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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>
   );
 }
diff --git a/apps/mobile/src/app/(home)/settings/help/help-cell.tsx 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
@@ -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
@@ -5,24 +5,27 @@ 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>();
@@ -38,71 +41,60 @@ export default function SettingsScreen() {
           gap: theme.spacing[5],
         }}
       >
-        <Cell
+        <SettingsCell
           title={t`Wallets and accounts`}
-          subtitle={t`Add, configure and remove`}
-          Icon={WalletIcon}
-          onPress={() => {
-            router.navigate(AppRoutes.SettingsWallet);
-          }}
+          caption={t`Add, configure and remove`}
+          icon={<WalletIcon />}
+          onPress={() => router.navigate(AppRoutes.SettingsWallet)}
         />
         <Divider />
-        <Cell
+        <SettingsCell
           title={t`Display`}
-          subtitle={t`Theme, bitcoin unit and more`}
-          Icon={SunIcon}
-          onPress={() => {
-            router.navigate(AppRoutes.SettingsDisplay);
-          }}
+          caption={t`Theme, bitcoin unit and more`}
+          icon={<SquareLinesBottomIcon />}
+          onPress={() => router.navigate(AppRoutes.SettingsDisplay)}
         />
-        <Cell
+        <SettingsCell
           title={t`Security`}
-          subtitle={t`Analytics and app authentication`}
-          Icon={ShieldIcon}
-          onPress={() => {
-            router.navigate(AppRoutes.SettingsSecurity);
-          }}
+          caption={t`Analytics and app authentication`}
+          icon={<ShieldIcon />}
+          onPress={() => router.navigate(AppRoutes.SettingsSecurity)}
         />
-        <Cell
+        <SettingsCell
           title={t`Networks`}
-          subtitle={t`Mainnet, testnet or signet`}
-          Icon={GlobeTiltedIcon}
-          onPress={() => {
-            router.navigate(AppRoutes.SettingsNetworks);
-          }}
+          caption={t`Mainnet, testnet or signet`}
+          icon={<GlobeTiltedIcon />}
+          onPress={() => router.navigate(AppRoutes.SettingsNetworks)}
         />
-        <Cell
+        <SettingsCell
           title={t`Notifications`}
-          subtitle={t`Push and email notifications`}
-          Icon={BellIcon}
-          onPress={() => {
-            router.navigate(AppRoutes.SettingsNotifications);
-          }}
+          caption={t`Push and email notifications`}
+          icon={<BellIcon />}
+          onPress={() => router.navigate(AppRoutes.SettingsNotifications)}
         />
-        <Cell
+        <SettingsCell
           title={t`Help`}
-          subtitle={t`Support, guides and articles`}
-          Icon={SupportIcon}
-          onPress={() => {
-            router.navigate(AppRoutes.SettingsHelp);
-          }}
+          caption={t`Support, guides and articles`}
+          icon={<SupportIcon />}
+          onPress={() => router.navigate(AppRoutes.SettingsHelp)}
         />
         <Accordion
           label={t`More options`}
           content={
             <>
-              <Cell title={t`Contacts`} Icon={SupportIcon} />
-              <Cell title={t`Fees`} Icon={SettingsSliderThreeIcon} />
+              <SettingsCell title={t`Contacts`} icon={<UsersTwoIcon />} onPress={() => {}} />
+              <SettingsCell title={t`Fees`} icon={<SettingsGearIcon />} onPress={() => {}} />
             </>
           }
         />
-        {/* 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
@@ -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>
   );
 }
diff --git 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
@@ -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>
   );
 }