Remove bottom tabs, use drawer navigator

Author: dgca

package-lock.json

@@ -0,0 +1,25 @@
+import { GestureHandlerRootView } from "react-native-gesture-handler";
+import { Drawer } from "expo-router/drawer";
+
+export default function Layout() {
+  return (
+    <GestureHandlerRootView style={{ flex: 1 }}>
+      <Drawer>
+        <Drawer.Screen
+          name="account"
+          options={{
+            headerShown: false,
+            drawerLabel: "Account",
+          }}
+        />
+        <Drawer.Screen
+          name="settings"
+          options={{
+            headerShown: false,
+            drawerLabel: "Settings",
+          }}
+        />
+      </Drawer>
+    </GestureHandlerRootView>
+  );
+}

packages/mobile-app/app/(drawer)/_layout.tsx

@@ -0,0 +1,81 @@
+import { Icon, useTheme, Text } from "@ui-kitten/components";
+import { useNavigation, useRouter } from "expo-router";
+import { Stack } from "expo-router/stack";
+import { TouchableOpacity, View } from "react-native";
+import { DrawerActions } from "@react-navigation/native";
+import { TouchableWithoutFeedback } from "react-native-gesture-handler";
+
+function MenuIconButton({
+  name,
+  onPress,
+}: {
+  name: string;
+  onPress: () => void;
+}) {
+  const theme = useTheme();
+  return (
+    <TouchableOpacity onPress={onPress}>
+      <Icon
+        name={name}
+        fill={theme["color-primary-default"]}
+        style={{
+          height: 26,
+          width: 26,
+        }}
+      />
+    </TouchableOpacity>
+  );
+}
+
+export default function Layout() {
+  const navigation = useNavigation();
+  const router = useRouter();
+  const theme = useTheme();
+
+  return (
+    <Stack>
+      <Stack.Screen
+        name="index"
+        options={{
+          headerTitle: () => (
+            <TouchableWithoutFeedback
+              onPress={() => {
+                router.push("/(drawer)/account/account-select");
+              }}
+            >
+              <View
+                style={{ flexDirection: "row", alignItems: "center", gap: 4 }}
+              >
+                <Text category="h6">Testing</Text>
+                <Icon
+                  name="chevron-down-outline"
+                  fill={theme["text-basic-color"]}
+                  style={{
+                    height: 20,
+                    width: 20,
+                  }}
+                />
+              </View>
+            </TouchableWithoutFeedback>
+          ),
+          headerLeft: () => (
+            <MenuIconButton
+              name="menu-outline"
+              onPress={() => {
+                navigation.dispatch(DrawerActions.openDrawer());
+              }}
+            />
+          ),
+          headerRight: () => (
+            <MenuIconButton
+              name="settings-outline"
+              onPress={() => {
+                router.push("/(drawer)/account/account-settings");
+              }}
+            />
+          ),
+        }}
+      />
+    </Stack>
+  );
+}

packages/mobile-app/app/(drawer)/account/_layout.tsx

@@ -0,0 +1,100 @@
+import { StatusBar } from "expo-status-bar";
+import { StyleSheet } from "react-native";
+import { Stack, useRouter } from "expo-router";
+import { useFacade } from "@/data/facades";
+import { CurrencyUtils } from "@ironfish/sdk";
+import {
+  Layout,
+  Text,
+  Button,
+  Card,
+  Icon,
+  IconProps,
+} from "@ui-kitten/components";
+import { SafeAreaView } from "react-native-safe-area-context";
+
+const PlusIcon = (props: IconProps) => <Icon {...props} name="plus-outline" />;
+
+export default function AccountSelect() {
+  const router = useRouter();
+  const facade = useFacade();
+
+  const getAccountsResult = facade.getAccounts.useQuery(undefined, {
+    refetchInterval: 1000,
+  });
+
+  const setActiveAccount = facade.setActiveAccount.useMutation();
+
+  return (
+    <>
+      <Stack.Screen
+        options={{
+          headerTitle: "Select Account",
+          headerBackTitle: "Back",
+        }}
+      />
+      <Layout style={styles.container}>
+        <Layout style={styles.content}>
+          {getAccountsResult.data?.map((account) => (
+            <Card
+              key={account.name}
+              style={styles.accountCard}
+              onPress={async () => {
+                const result = await setActiveAccount.mutateAsync({
+                  name: account.name,
+                });
+                console.log(`setActiveAccount: ${result}`);
+                router.dismissAll();
+              }}
+            >
+              <Layout style={styles.accountInfo}>
+                <Layout>
+                  <Text category="s1">{account.name}</Text>
+                  <Text category="p2" appearance="hint">
+                    {`${CurrencyUtils.render(account.balances.iron.confirmed)} $IRON`}
+                  </Text>
+                </Layout>
+                {account.active && (
+                  <Text status="success" category="c1">
+                    Active
+                  </Text>
+                )}
+              </Layout>
+            </Card>
+          ))}
+          <Button
+            style={styles.addButton}
+            accessoryLeft={PlusIcon}
+            onPress={() => router.push("/add-account/")}
+          >
+            Add Account
+          </Button>
+        </Layout>
+        <StatusBar style="auto" />
+      </Layout>
+    </>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: "#fff",
+  },
+  content: {
+    flex: 1,
+    padding: 16,
+    gap: 16,
+  },
+  accountCard: {
+    marginVertical: 4,
+  },
+  accountInfo: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+  },
+  addButton: {
+    marginTop: 8,
+  },
+});

packages/mobile-app/app/(drawer)/account/account-select/index.tsx

@@ -8,11 +8,14 @@ import {
   Toggle,
 } from "@ui-kitten/components";
 import { StyleSheet } from "react-native";
-import { Stack, useLocalSearchParams, useRouter } from "expo-router";
-import { useFacade } from "../../data/facades";
+import { Stack, useRouter } from "expo-router";
+import { useFacade } from "@/data/facades";
 import { CurrencyUtils } from "@ironfish/sdk";
 import { SettingsKey } from "@/data/settings/db";
 import { useEffect, useState, useCallback } from "react";
+import { useAccount } from "@/providers/AccountProvider";
+import { SafeAreaView } from "react-native";
+import { Spinner } from "@ui-kitten/components";
 
 const ForwardIcon = (props: any): IconElement => (
   <Icon {...props} name="arrow-ios-forward" />
@@ -41,15 +44,6 @@ const ACCOUNT_SETTINGS_ROUTES = {
   },
 } as const;
 
-export const accountSettingsRoutes = Object.values(ACCOUNT_SETTINGS_ROUTES).map(
-  (item) => {
-    return {
-      title: item.title,
-      href: item.href,
-      path: item.href.concat("/index"),
-    };
-  },
-);
 function getMenuItems({
   currentAccountName,
   currentAccountBalance,
@@ -74,14 +68,8 @@ function getMenuItems({
   });
 }
 
-export default function AccountSettings() {
-  const { accountName } = useLocalSearchParams<{ accountName: string }>();
+function AccountSettingsContent({ accountName }: { accountName: string }) {
   const router = useRouter();
-
-  if (accountName === undefined) {
-    throw new Error("accountName is required");
-  }
-
   const facade = useFacade();
 
   // I tried using isPending and variables on the mutation, but it was causing toggle
@@ -157,6 +145,26 @@ export default function AccountSettings() {
   );
 }
 
+export default function AccountSettings() {
+  const { accountName, isLoading } = useAccount();
+
+  if (isLoading) {
+    return (
+      <SafeAreaView>
+        <Layout style={styles.container} level="1">
+          <Spinner />
+        </Layout>
+      </SafeAreaView>
+    );
+  }
+
+  if (accountName === undefined) {
+    throw new Error("accountName is required");
+  }
+
+  return <AccountSettingsContent accountName={accountName} />;
+}
+
 const styles = StyleSheet.create({
   container: {
     flex: 1,

packages/mobile-app/app/account-settings/account-name/index.tsx renamed to packages/mobile-app/app/(drawer)/account/account-settings/account-name/index.tsx

@@ -2,7 +2,7 @@ import { StatusBar } from "expo-status-bar";
 import { Button, Modal, StyleSheet, Text, View } from "react-native";
 import { useLocalSearchParams, useRouter } from "expo-router";
 import { useState } from "react";
-import { useFacade } from "../../../data/facades";
+import { useFacade } from "@/data/facades";
 
 export default function RemoveAccount() {
   const router = useRouter();

packages/mobile-app/app/account-settings/export-account/index.tsx renamed to packages/mobile-app/app/(drawer)/account/account-settings/export-account/index.tsx

@@ -2,7 +2,7 @@ import { StatusBar } from "expo-status-bar";
 import { Button, StyleSheet, TextInput, View } from "react-native";
 import { useRouter } from "expo-router";
 import { useState } from "react";
-import { useFacade } from "../../data/facades";
+import { useFacade } from "@/data/facades";
 
 export default function CreateAccount() {
   const router = useRouter();

packages/mobile-app/app/account-settings/index.tsx renamed to packages/mobile-app/app/(drawer)/account/account-settings/index.tsx

@@ -2,7 +2,7 @@ import { StatusBar } from "expo-status-bar";
 import { Button, Modal, StyleSheet, Text, TextInput, View } from "react-native";
 import { useRouter } from "expo-router";
 import { useState } from "react";
-import { useFacade } from "../../data/facades";
+import { useFacade } from "@/data/facades";
 
 export default function ImportEncoded() {
   const router = useRouter();