leather-io · fbwoolf · Sep 26, 2024 · Sep 25, 2024
diff --git a/apps/mobile/src/app/(home)/_layout.tsx b/apps/mobile/src/app/(home)/_layout.tsx
@@ -116,10 +116,7 @@ export default function StackLayout() {
         name="settings/networks/index"
         options={{ header: () => NavigationSettings(t`Networks`) }}
       />
-      <Stack.Screen
-        name="settings/notifications/index"
-        options={{ header: () => NavigationSettings(t`Notifications`) }}
-      />
+      <Stack.Screen name="settings/notifications" options={{ headerShown: false }} />
       <Stack.Screen
         name="settings/help/index"
         options={{ header: () => NavigationSettings(t`Help`) }}

diff --git a/apps/mobile/src/app/(home)/settings/display/index.tsx b/apps/mobile/src/app/(home)/settings/display/index.tsx
@@ -10,7 +10,6 @@ import { useLingui } from '@lingui/react';
 
 import {
   BitcoinCircleIcon,
-  Box,
   DollarCircleIcon,
   PackageSecurityIcon,
   SheetRef,
@@ -35,7 +34,7 @@ export default function SettingsDisplayScreen() {
   const { i18n } = useLingui();
 
   return (
-    <Box flex={1} backgroundColor="ink.background-primary">
+    <>
       <SettingsScreenLayout>
         <DisplayCell
           title={t`Theme`}
@@ -74,6 +73,6 @@ export default function SettingsDisplayScreen() {
       <BitcoinUnitSheet sheetRef={bitcoinUnitSheetRef} />
       <ConversionUnitSheet sheetRef={conversionUnitSheetRef} />
       <AccountIdentifierSheet sheetRef={accountIdentifierSheetRef} />
-    </Box>
+    </>
   );
 }
diff --git a/apps/mobile/src/app/(home)/settings/notifications/_layout.tsx b/apps/mobile/src/app/(home)/settings/notifications/_layout.tsx
@@ -0,0 +1,66 @@
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import { BackButtonHeader } from '@/components/headers/back-button';
+import { SimpleHeader } from '@/components/headers/containers/simple-header';
+import { TitleHeader } from '@/components/headers/title';
+import { TabBar } from '@/components/tab-bar';
+import { AppRoutes } from '@/routes';
+import { t } from '@lingui/macro';
+import { Tabs, router, usePathname, useRouter } from 'expo-router';
+
+function HeaderBottomTabs() {
+  const router = useRouter();
+  const pathname = usePathname();
+  return (
+    <TabBar
+      tabs={[
+        {
+          onPress() {
+            router.navigate(AppRoutes.SettingsNotifications);
+          },
+          title: t`Push`,
+          isActive: pathname === AppRoutes.SettingsNotifications,
+        },
+        {
+          onPress() {
+            router.navigate(AppRoutes.SettingsNotificationsEmail);
+          },
+          title: t`Email`,
+          isActive: pathname === AppRoutes.SettingsNotificationsEmail,
+        },
+      ]}
+    />
+  );
+}
+
+export default function SettingsNotificationsLayout() {
+  const insets = useSafeAreaInsets();
+
+  const NavigationHeader = (
+    <SimpleHeader
+      insets={insets}
+      left={<BackButtonHeader onPress={() => router.navigate(AppRoutes.Settings)} />}
+      center={<TitleHeader title={t`Notifications`} />}
+      bottom={<HeaderBottomTabs />}
+    />
+  );
+
+  return (
+    <Tabs tabBar={() => null}>
+      <Tabs.Screen
+        name="index"
+        options={{
+          title: t`Push`,
+          header: () => NavigationHeader,
+        }}
+      />
+      <Tabs.Screen
+        name="email"
+        options={{
+          title: t`Email`,
+          header: () => NavigationHeader,
+        }}
+      />
+    </Tabs>
+  );
+}
diff --git a/apps/mobile/src/app/(home)/settings/notifications/email.tsx b/apps/mobile/src/app/(home)/settings/notifications/email.tsx
@@ -0,0 +1,47 @@
+import { useRef } from 'react';
+import { TouchableOpacity } from 'react-native-gesture-handler';
+
+import { EmailAddressSheet } from '@/features/settings/email-address-sheet';
+import { t } from '@lingui/macro';
+
+import {
+  Avatar,
+  ChevronRightIcon,
+  EmailIcon,
+  Flag,
+  ItemLayout,
+  SheetRef,
+} from '@leather.io/ui/native';
+
+import SettingsScreenLayout from '../settings-screen.layout';
+
+export default function SettingsNotificationsEmailScreen() {
+  const emailAddressSheetRef = useRef<SheetRef>(null);
+
+  return (
+    <>
+      <SettingsScreenLayout>
+        <TouchableOpacity
+          onPress={() => {
+            emailAddressSheetRef.current?.present();
+          }}
+        >
+          <Flag
+            img={
+              <Avatar>
+                <EmailIcon />
+              </Avatar>
+            }
+          >
+            <ItemLayout
+              actionIcon={<ChevronRightIcon variant="small" />}
+              captionLeft={t`Awaiting verification`}
+              titleLeft={t`Email address`}
+            />
+          </Flag>
+        </TouchableOpacity>
+      </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,68 +1,30 @@
-import { useRef } from 'react';
-import { ScrollView } from 'react-native-gesture-handler';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { Switch, TouchableOpacity } from 'react-native-gesture-handler';
 
-import { EmailAddressSheet } from '@/features/settings/email-address-sheet';
-import { EmailNotificationsSheet } from '@/features/settings/email-notifications-sheet';
-import { PushNotificationsSheet } from '@/features/settings/push-notifications-sheet';
 import { t } from '@lingui/macro';
-import { useTheme } from '@shopify/restyle';
 
-import {
-  Box,
-  Cell,
-  EmailIcon,
-  EmailNotificationIcon,
-  SheetRef,
-  SquareNotificationIcon,
-  Theme,
-} from '@leather.io/ui/native';
+import { Avatar, Flag, ItemLayout, PlaceholderIcon } from '@leather.io/ui/native';
 
-export default function SettingsNotificationsScreen() {
-  const { bottom } = useSafeAreaInsets();
-  const pushNotificationsSheetRef = useRef<SheetRef>(null);
-  const emailNotificationsSheetRef = useRef<SheetRef>(null);
-  const emailAddressSheetRef = useRef<SheetRef>(null);
-  const theme = useTheme<Theme>();
+import SettingsScreenLayout from '../settings-screen.layout';
 
+// TODO: Hook up to notifications service when available or use Expo?
+export default function SettingsNotificationsScreen() {
   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`Push notifications`}
-          subtitle={t`All enabled`}
-          Icon={SquareNotificationIcon}
-          onPress={() => {
-            pushNotificationsSheetRef.current?.present();
-          }}
-        />
-        <Cell
-          title={t`Email notifications`}
-          subtitle={t`5 enabled`}
-          Icon={EmailNotificationIcon}
-          onPress={() => {
-            emailNotificationsSheetRef.current?.present();
-          }}
-        />
-        <Cell
-          title={t`Email address`}
-          subtitle={t`None/Awaiting verification/Verified`}
-          Icon={EmailIcon}
-          onPress={() => {
-            emailAddressSheetRef.current?.present();
-          }}
-        />
-      </ScrollView>
-      <PushNotificationsSheet sheetRef={pushNotificationsSheetRef} />
-      <EmailNotificationsSheet sheetRef={emailNotificationsSheetRef} />
-      <EmailAddressSheet sheetRef={emailAddressSheetRef} />
-    </Box>
+    <SettingsScreenLayout>
+      <TouchableOpacity onPress={() => {}}>
+        <Flag
+          img={
+            <Avatar>
+              <PlaceholderIcon />
+            </Avatar>
+          }
+        >
+          <ItemLayout
+            actionIcon={<Switch disabled value={false} />}
+            titleLeft={t`Notification`}
+            captionLeft={t`Description`}
+          />
+        </Flag>
+      </TouchableOpacity>
+    </SettingsScreenLayout>
   );
 }
diff --git a/apps/mobile/src/app/(home)/settings/security/index.tsx b/apps/mobile/src/app/(home)/settings/security/index.tsx
@@ -5,7 +5,7 @@ import { AppAuthenticationSheet } from '@/features/settings/app-authentication-s
 import { useSettings } from '@/store/settings/settings';
 import { t } from '@lingui/macro';
 
-import { Box, CookieIcon, KeyholeIcon, SheetRef } from '@leather.io/ui/native';
+import { CookieIcon, KeyholeIcon, SheetRef } from '@leather.io/ui/native';
 
 import SettingsScreenLayout from '../settings-screen.layout';
 import { SecurityCell } from './security-cell';
@@ -16,7 +16,7 @@ export default function SettingsSecurityScreen() {
   const settings = useSettings();
 
   return (
-    <Box flex={1} backgroundColor="ink.background-primary">
+    <>
       <SettingsScreenLayout>
         <SecurityCell
           title={t`Analytics`}
@@ -37,6 +37,6 @@ export default function SettingsSecurityScreen() {
       </SettingsScreenLayout>
       <AnalyticsSheet sheetRef={analyticsSheetRef} />
       <AppAuthenticationSheet sheetRef={appAuthenticationSheetRef} />
-    </Box>
+    </>
   );
 }
diff --git a/apps/mobile/src/components/headers/containers/simple-header.tsx b/apps/mobile/src/components/headers/containers/simple-header.tsx
@@ -9,6 +9,7 @@ interface SimpleHeaderProps {
   left?: ReactNode;
   center?: ReactNode;
   right?: ReactNode;
+  bottom?: ReactNode;
   insets: EdgeInsets;
 }
 export function SimpleHeader(props: SimpleHeaderProps) {
@@ -40,6 +41,7 @@ export function SimpleHeader(props: SimpleHeaderProps) {
           {props?.right}
         </Box>
       </Box>
+      {props.bottom}
     </Box>
   );
 }
diff --git a/apps/mobile/src/components/sheets/input-sheet.layout.tsx b/apps/mobile/src/components/sheets/input-sheet.layout.tsx
@@ -3,6 +3,7 @@ import { RefObject, useState } from 'react';
 import { useSettings } from '@/store/settings/settings';
 
 import {
+  Avatar,
   Box,
   Button,
   IconProps,
@@ -47,9 +48,9 @@ export function InputSheet({
         <Box>
           <SheetHeader
             icon={
-              <Box bg="ink.background-secondary" borderRadius="round" flexDirection="row" p="2">
-                <TitleIcon color="ink.text-primary" />
-              </Box>
+              <Avatar>
+                <TitleIcon />
+              </Avatar>
             }
             title={title}
           />

diff --git a/apps/mobile/src/components/toast/index.tsx b/apps/mobile/src/components/toast/index.tsx
@@ -4,7 +4,14 @@ import Animated, { useAnimatedStyle, useSharedValue, withTiming } from 'react-na
 
 import { ResponsiveValue, useTheme } from '@shopify/restyle';
 
-import { Box, CheckmarkCircleIcon, Text, Theme } from '@leather.io/ui/native';
+import {
+  Box,
+  CheckmarkCircleIcon,
+  ErrorTriangleIcon,
+  InfoCircleIcon,
+  Text,
+  Theme,
+} from '@leather.io/ui/native';
 
 import { ToastData, ToastMethods, ToastProps, ToastType } from './types';
 
@@ -19,19 +26,24 @@ const TOAST_OPEN_DURATION = 3000;
 
 function getIcon(type: ToastType, theme: Theme) {
   switch (type) {
-    case 'success':
-      return <CheckmarkCircleIcon color={theme.colors['ink.background-primary']} />;
+    case 'error':
+      return <ErrorTriangleIcon color={theme.colors['red.action-primary-default']} />;
     case 'info':
-      return null;
+      return <InfoCircleIcon color={theme.colors['ink.background-primary']} />;
+    case 'success':
+      return <CheckmarkCircleIcon color={theme.colors['green.action-primary-default']} />;
+    default:
+      return <InfoCircleIcon color={theme.colors['ink.background-primary']} />;
   }
 }
 
 function getBackground(
   type: ToastType
 ): ResponsiveValue<keyof Theme['colors'], Theme['breakpoints']> {
   switch (type) {
-    case 'success':
+    case 'error':
     case 'info':
+    case 'success':
       return 'ink.text-primary';
   }
 }

diff --git a/apps/mobile/src/components/toast/types.ts b/apps/mobile/src/components/toast/types.ts
@@ -1,6 +1,6 @@
 import { RefObject } from 'react';
 
-export type ToastType = 'success' | 'info';
+export type ToastType = 'error' | 'info' | 'success';
 
 export interface ToastData {
   title: string;

diff --git a/apps/mobile/src/features/settings/bitcoin-unit-sheet/bitcoin-unit-sheet.tsx b/apps/mobile/src/features/settings/bitcoin-unit-sheet/bitcoin-unit-sheet.tsx
@@ -21,7 +21,7 @@ export function BitcoinUnitSheet({ sheetRef }: BitcoinUnitSheetProps) {
   const { i18n } = useLingui();
 
   function onUpdateBitcoinUnit(unit: BitcoinUnit) {
-    settings.changeBitcoinUnit(unit);
+    settings.changeBitcoinUnitPreference(unit);
     displayToast({ title: t`Bitcoin unit updated`, type: 'success' });
   }