From b50556a589711459b9fa739bccccf913d96b071b Mon Sep 17 00:00:00 2001
From: Derek Guenther <dguenther9@gmail.com>
Date: Tue, 20 Aug 2024 16:20:55 -0400
Subject: [PATCH] Add support for setting an account as active

---
 packages/mobile-app/app/(tabs)/index.tsx      |  34 ++++--
 packages/mobile-app/app/account-select.tsx    |  20 +++-
 .../app/account-settings/remove-account.tsx   |   6 +-
 .../mobile-app/app/add-account/create.tsx     |   6 +-
 .../app/add-account/import-encoded.tsx        |   6 +-
 packages/mobile-app/app/onboarding/create.tsx |  47 ++++++++
 .../app/onboarding/import-encoded.tsx         |  75 ++++++++++++
 packages/mobile-app/app/onboarding/index.tsx  |   8 +-
 .../data/facades/wallet/demoHandlers.ts       |  20 +++-
 .../data/facades/wallet/handlers.ts           |  18 ++-
 .../mobile-app/data/facades/wallet/types.ts   |   4 +-
 packages/mobile-app/data/wallet/db.ts         | 111 +++++++++++++++++-
 packages/mobile-app/data/wallet/wallet.ts     |  12 ++
 13 files changed, 333 insertions(+), 34 deletions(-)
 create mode 100644 packages/mobile-app/app/onboarding/create.tsx
 create mode 100644 packages/mobile-app/app/onboarding/import-encoded.tsx

diff --git a/packages/mobile-app/app/(tabs)/index.tsx b/packages/mobile-app/app/(tabs)/index.tsx
index 7d7bda4..e9efde3 100644
--- a/packages/mobile-app/app/(tabs)/index.tsx
+++ b/packages/mobile-app/app/(tabs)/index.tsx
@@ -1,5 +1,11 @@
 import { StatusBar } from "expo-status-bar";
-import { ScrollView, StyleSheet, Text, View } from "react-native";
+import {
+  ActivityIndicator,
+  ScrollView,
+  StyleSheet,
+  Text,
+  View,
+} from "react-native";
 import { useFacade } from "../../data/facades";
 import { useEffect, useState } from "react";
 import { LinkButton } from "../../components/LinkButton";
@@ -17,23 +23,37 @@ export default function Balances() {
   );
 
   const getAccountResult = facade.getAccount.useQuery(
-    { name: account },
+    {},
     {
       refetchInterval: 1000,
     },
   );
 
-  const getAccountsResult = facade.getAccounts.useQuery();
-
   const getWalletStatusResult = facade.getWalletStatus.useQuery(undefined, {
     refetchInterval: 1000,
   });
 
   useEffect(() => {
-    if (getAccountsResult.data?.[0]) {
-      setAccount(getAccountsResult.data[0].name);
+    if (getAccountResult.data) {
+      setAccount(getAccountResult.data.name);
     }
-  }, [getAccountsResult.data]);
+  }, [getAccountResult.data]);
+
+  if (getAccountResult.isLoading) {
+    return (
+      <View style={styles.container}>
+        <ActivityIndicator size="large" />
+      </View>
+    );
+  }
+
+  if (getAccountResult.data === null) {
+    return (
+      <View style={styles.container}>
+        <LinkButton title="Onboarding" href="/onboarding/" />
+      </View>
+    );
+  }
 
   return (
     <View style={styles.container}>
diff --git a/packages/mobile-app/app/account-select.tsx b/packages/mobile-app/app/account-select.tsx
index cbb4534..785a620 100644
--- a/packages/mobile-app/app/account-select.tsx
+++ b/packages/mobile-app/app/account-select.tsx
@@ -2,23 +2,41 @@ import { StatusBar } from "expo-status-bar";
 import { Button, StyleSheet, Text, View } from "react-native";
 import { useRouter } from "expo-router";
 import { LinkButton } from "../components/LinkButton";
+import { useQueryClient } from "@tanstack/react-query";
 import { useFacade } from "../data/facades";
 
 export default function AccountSelect() {
   const router = useRouter();
   const facade = useFacade();
+  const qc = useQueryClient();
 
   const getAccountsResult = facade.getAccounts.useQuery(undefined, {
     refetchInterval: 1000,
   });
 
+  const setActiveAccount = facade.setActiveAccount.useMutation({
+    onSuccess: async () => {
+      await qc.invalidateQueries();
+    },
+  });
+
   return (
     <View style={styles.container}>
       <Button title="Close" onPress={() => router.dismissAll()} />
       <StatusBar style="auto" />
       {getAccountsResult.data?.map((account) => (
         <View key={account.name}>
-          <Text>{account.name}</Text>
+          <Button
+            onPress={async () => {
+              const result = await setActiveAccount.mutateAsync({
+                name: account.name,
+              });
+              console.log(`setActiveAccount: ${result}`);
+              router.dismissAll();
+            }}
+            title={account.name}
+          />
+          {account.active && <Text>Active</Text>}
           <Text>{`${account.balances.iron.confirmed} $IRON`}</Text>
         </View>
       ))}
diff --git a/packages/mobile-app/app/account-settings/remove-account.tsx b/packages/mobile-app/app/account-settings/remove-account.tsx
index dc210b3..b40fcb8 100644
--- a/packages/mobile-app/app/account-settings/remove-account.tsx
+++ b/packages/mobile-app/app/account-settings/remove-account.tsx
@@ -13,10 +13,8 @@ export default function RemoveAccount() {
   const { accountName } = useLocalSearchParams<{ accountName: string }>();
 
   const removeAccount = facade.removeAccount.useMutation({
-    onSuccess: () => {
-      qc.invalidateQueries({
-        queryKey: ["getAccounts"],
-      });
+    onSuccess: async () => {
+      await qc.invalidateQueries();
     },
   });
 
diff --git a/packages/mobile-app/app/add-account/create.tsx b/packages/mobile-app/app/add-account/create.tsx
index e4b5326..fec00a0 100644
--- a/packages/mobile-app/app/add-account/create.tsx
+++ b/packages/mobile-app/app/add-account/create.tsx
@@ -11,10 +11,8 @@ export default function CreateAccount() {
   const qc = useQueryClient();
 
   const createAccount = facade.createAccount.useMutation({
-    onSuccess: () => {
-      qc.invalidateQueries({
-        queryKey: ["getAccounts"],
-      });
+    onSuccess: async () => {
+      await qc.invalidateQueries();
     },
   });
 
diff --git a/packages/mobile-app/app/add-account/import-encoded.tsx b/packages/mobile-app/app/add-account/import-encoded.tsx
index 4547e93..28bad43 100644
--- a/packages/mobile-app/app/add-account/import-encoded.tsx
+++ b/packages/mobile-app/app/add-account/import-encoded.tsx
@@ -16,10 +16,8 @@ export default function ImportEncoded() {
   const qc = useQueryClient();
 
   const importAccount = facade.importAccount.useMutation({
-    onSuccess: () => {
-      qc.invalidateQueries({
-        queryKey: ["getAccounts"],
-      });
+    onSuccess: async () => {
+      await qc.invalidateQueries();
     },
   });
 
diff --git a/packages/mobile-app/app/onboarding/create.tsx b/packages/mobile-app/app/onboarding/create.tsx
new file mode 100644
index 0000000..c81b212
--- /dev/null
+++ b/packages/mobile-app/app/onboarding/create.tsx
@@ -0,0 +1,47 @@
+import { useQueryClient } from "@tanstack/react-query";
+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";
+
+export default function OnboardingCreate() {
+  const router = useRouter();
+  const facade = useFacade();
+  const qc = useQueryClient();
+
+  const createAccount = facade.createAccount.useMutation({
+    onSuccess: async () => {
+      await qc.invalidateQueries();
+    },
+  });
+
+  const [accountName, setAccountName] = useState("Account Name");
+
+  return (
+    <View style={styles.container}>
+      <TextInput
+        placeholder="Account Name"
+        value={accountName}
+        onChangeText={setAccountName}
+      />
+      <Button
+        title="Continue"
+        onPress={async () => {
+          await createAccount.mutateAsync({ name: accountName });
+          router.dismissAll();
+        }}
+      />
+      <StatusBar style="auto" />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: "#fff",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+});
diff --git a/packages/mobile-app/app/onboarding/import-encoded.tsx b/packages/mobile-app/app/onboarding/import-encoded.tsx
new file mode 100644
index 0000000..2456849
--- /dev/null
+++ b/packages/mobile-app/app/onboarding/import-encoded.tsx
@@ -0,0 +1,75 @@
+import { useQueryClient } from "@tanstack/react-query";
+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";
+
+export default function OnboardingImportEncoded() {
+  const router = useRouter();
+
+  const [modalVisible, setModalVisible] = useState(false);
+  const [accountName, setAccountName] = useState("Account Name");
+  const [encodedAccount, setEncodedAccount] = useState("");
+
+  const facade = useFacade();
+  const qc = useQueryClient();
+
+  const importAccount = facade.importAccount.useMutation({
+    onSuccess: async () => {
+      await qc.invalidateQueries();
+    },
+  });
+
+  return (
+    <View style={styles.container}>
+      <Modal visible={modalVisible} animationType="slide">
+        <View style={styles.container}>
+          <Text>Account Imported!</Text>
+          <Text>
+            Before you start managing your digital assets, we need to scan the
+            blockchain. This may take some time.
+          </Text>
+          <Button
+            title="Let's go!"
+            onPress={async () => {
+              router.dismissAll();
+              setModalVisible(false);
+            }}
+          />
+        </View>
+      </Modal>
+      <Text>Paste the complete string into the provided text field below.</Text>
+      <TextInput
+        placeholder="Account Name"
+        value={accountName}
+        onChangeText={setAccountName}
+      />
+      <TextInput
+        placeholder="Encoded Key"
+        value={encodedAccount}
+        onChangeText={setEncodedAccount}
+      />
+      <Button
+        title="Continue"
+        onPress={async () => {
+          await importAccount.mutateAsync({
+            account: encodedAccount,
+            name: accountName,
+          });
+          setModalVisible(true);
+        }}
+      />
+      <StatusBar style="auto" />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: "#fff",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+});
diff --git a/packages/mobile-app/app/onboarding/index.tsx b/packages/mobile-app/app/onboarding/index.tsx
index c9b811b..03f730e 100644
--- a/packages/mobile-app/app/onboarding/index.tsx
+++ b/packages/mobile-app/app/onboarding/index.tsx
@@ -1,13 +1,17 @@
 import { StatusBar } from "expo-status-bar";
 import { StyleSheet, View, Text } from "react-native";
+import { LinkButton } from "../../components/LinkButton";
 
 export default function Onboarding() {
   return (
     <View style={styles.container}>
       <Text>Welcome to Iron Fish</Text>
       <Text>Let's Make Web3 Private</Text>
-      <Text>Create Account</Text>
-      <Text>I already have an account</Text>
+      <LinkButton title="Create Account" href="/onboarding/create/" />
+      <LinkButton
+        title="I already have an account"
+        href="/onboarding/import-encoded/"
+      />
       <StatusBar style="auto" />
     </View>
   );
diff --git a/packages/mobile-app/data/facades/wallet/demoHandlers.ts b/packages/mobile-app/data/facades/wallet/demoHandlers.ts
index a5931a1..945387f 100644
--- a/packages/mobile-app/data/facades/wallet/demoHandlers.ts
+++ b/packages/mobile-app/data/facades/wallet/demoHandlers.ts
@@ -30,6 +30,7 @@ const ACCOUNTS: Account[] = [
       custom: [],
     },
     settings: { balanceAutoHide: false },
+    active: true,
   },
   {
     name: "bob",
@@ -48,6 +49,7 @@ const ACCOUNTS: Account[] = [
       custom: [],
     },
     settings: { balanceAutoHide: false },
+    active: false,
   },
   {
     name: "carol",
@@ -66,6 +68,7 @@ const ACCOUNTS: Account[] = [
       custom: [],
     },
     settings: { balanceAutoHide: false },
+    active: false,
   },
 ];
 
@@ -103,8 +106,10 @@ export const walletDemoHandlers = f.facade<WalletHandlers>({
       },
       viewOnly: false,
       settings: { balanceAutoHide: false },
+      active: true,
     };
     console.log("createAccount", account);
+    ACCOUNTS.filter((a) => a.active).forEach((a) => (a.active = false));
     ACCOUNTS.push(account);
     return account;
   }),
@@ -125,10 +130,10 @@ export const walletDemoHandlers = f.facade<WalletHandlers>({
       return JSON.stringify(account);
     },
   ),
-  getAccount: f.handler.query(async ({ name }: { name: string }) => {
+  getAccount: f.handler.query(async ({ name }: { name?: string }) => {
     const account = ACCOUNTS.find((a) => a.name === name);
     if (account === undefined) {
-      throw new Error(`No account found with name ${name}`);
+      return null;
     }
     return account;
   }),
@@ -137,6 +142,15 @@ export const walletDemoHandlers = f.facade<WalletHandlers>({
     console.log("getAccounts", accounts);
     return accounts;
   }),
+  setActiveAccount: f.handler.mutation(async ({ name }: { name: string }) => {
+    const newAccount = ACCOUNTS.find((a) => a.name === name);
+    if (!newAccount) {
+      return false;
+    }
+    ACCOUNTS.filter((a) => a.active).forEach((a) => (a.active = false));
+    newAccount.active = true;
+    return true;
+  }),
   getEstimatedFees: f.handler.query(
     async (args: { accountName: string; outputs: Output[] }) => {
       return { slow: "0.00000001", average: "0.00000002", fast: "0.00000003" };
@@ -264,8 +278,10 @@ export const walletDemoHandlers = f.facade<WalletHandlers>({
           custom: [],
         },
         settings: { balanceAutoHide: false },
+        active: true,
       };
       console.log("importAccount", account);
+      ACCOUNTS.filter((a) => a.active).forEach((a) => (a.active = false));
       ACCOUNTS.push(importedAccount);
       return importedAccount;
     },
diff --git a/packages/mobile-app/data/facades/wallet/handlers.ts b/packages/mobile-app/data/facades/wallet/handlers.ts
index 48bf776..aa2eae8 100644
--- a/packages/mobile-app/data/facades/wallet/handlers.ts
+++ b/packages/mobile-app/data/facades/wallet/handlers.ts
@@ -44,6 +44,7 @@ export const walletHandlers = f.facade<WalletHandlers>({
         settings: {
           balanceAutoHide: false,
         },
+        active: true,
       };
     },
   ),
@@ -73,10 +74,14 @@ export const walletHandlers = f.facade<WalletHandlers>({
     },
   ),
   getAccount: f.handler.query(
-    async ({ name }: { name: string }): Promise<Account> => {
-      const account = await wallet.getAccount(name);
+    async ({ name }: { name?: string }): Promise<Account | null> => {
+      const account =
+        name === undefined
+          ? await wallet.getActiveAccount()
+          : await wallet.getAccount(name);
+
       if (!account) {
-        throw new Error(`Account ${name} does not exist`);
+        return null;
       }
 
       const balances = await wallet.getBalances(account.id, Network.TESTNET);
@@ -122,6 +127,7 @@ export const walletHandlers = f.facade<WalletHandlers>({
         settings: {
           balanceAutoHide: false,
         },
+        active: !!account.active,
       };
       return result;
     },
@@ -134,6 +140,7 @@ export const walletHandlers = f.facade<WalletHandlers>({
         h,
       ]),
     );
+
     return accounts.map((a): Account => {
       const h = heads.get(a.id);
       let head = null;
@@ -162,9 +169,13 @@ export const walletHandlers = f.facade<WalletHandlers>({
         settings: {
           balanceAutoHide: false,
         },
+        active: !!a.active,
       };
     });
   }),
+  setActiveAccount: f.handler.mutation(async ({ name }: { name: string }) => {
+    return await wallet.setActiveAccount(name);
+  }),
   getEstimatedFees: f.handler.query(
     async (args: { accountName: string; outputs: Output[] }) => {
       // TODO: Implement getEstimatedFees
@@ -310,6 +321,7 @@ export const walletHandlers = f.facade<WalletHandlers>({
         settings: {
           balanceAutoHide: false,
         },
+        active: true,
       };
     },
   ),
diff --git a/packages/mobile-app/data/facades/wallet/types.ts b/packages/mobile-app/data/facades/wallet/types.ts
index fc89255..099c3f3 100644
--- a/packages/mobile-app/data/facades/wallet/types.ts
+++ b/packages/mobile-app/data/facades/wallet/types.ts
@@ -11,6 +11,7 @@ export type Account = {
   viewOnly: boolean;
   balances: { iron: AccountBalance; custom: AccountBalance[] };
   settings: AccountSettings;
+  active: boolean;
 };
 
 export type AccountBalance = {
@@ -102,8 +103,9 @@ export type WalletHandlers = {
       language?: LanguageKey;
     }) => string
   >;
-  getAccount: Query<(args: { name: string }) => Account>;
+  getAccount: Query<(args: { name?: string }) => Account | null>;
   getAccounts: Query<() => Account[]>;
+  setActiveAccount: Mutation<(args: { name: string }) => boolean>;
   getEstimatedFees: Query<
     (args: { accountName: string; outputs: Output[] }) => {
       slow: string;
diff --git a/packages/mobile-app/data/wallet/db.ts b/packages/mobile-app/data/wallet/db.ts
index a6383fb..24425b0 100644
--- a/packages/mobile-app/data/wallet/db.ts
+++ b/packages/mobile-app/data/wallet/db.ts
@@ -15,6 +15,14 @@ interface AccountsTable {
   viewOnly: boolean;
 }
 
+/**
+ * Table with a singleton row marking the active account.
+ */
+interface ActiveAccountTable {
+  id: number;
+  accountId: number | null;
+}
+
 interface AccountNetworkHeadsTable {
   id: Generated<number>;
   accountId: number;
@@ -90,6 +98,7 @@ interface BalancesTable {
 
 interface Database {
   accounts: AccountsTable;
+  activeAccount: ActiveAccountTable;
   accountNetworkHeads: AccountNetworkHeadsTable;
   transactions: TransactionsTable;
   accountTransactions: AccountTransactionsTable;
@@ -332,6 +341,29 @@ export class WalletDb {
               console.log("created transaction balance deltas");
             },
           },
+          ["009_createActiveAccount"]: {
+            up: async (db: Kysely<Database>) => {
+              console.log("creating active account");
+              await db.schema
+                .createTable("activeAccount")
+                .addColumn("id", SQLiteType.Integer, (col) =>
+                  col
+                    .primaryKey()
+                    .notNull()
+                    .defaultTo(1)
+                    .check(sql`id = 1`),
+                )
+                .addColumn("accountId", SQLiteType.Integer, (col) =>
+                  col.references("accounts.id"),
+                )
+                .execute();
+              await db
+                .insertInto("activeAccount")
+                .values({ id: 1, accountId: null })
+                .execute();
+              console.log("created active account");
+            },
+          },
         },
       }),
     });
@@ -367,10 +399,24 @@ export class WalletDb {
       viewOnly: account.spendingKey === null,
     };
 
-    const result = await this.db
-      .insertInto("accounts")
-      .values(accountValues)
-      .executeTakeFirst();
+    const result = await this.db.transaction().execute(async (db) => {
+      const result = await db
+        .insertInto("accounts")
+        .values(accountValues)
+        .executeTakeFirstOrThrow();
+
+      if (result.insertId === undefined) {
+        throw new Error("Failed to insert account");
+      }
+
+      // Assumes you always want to change active accounts when adding a new one
+      await db
+        .updateTable("activeAccount")
+        .set("accountId", Number(result.insertId))
+        .execute();
+
+      return result;
+    });
 
     if (account.spendingKey) {
       await SecureStore.setItemAsync(
@@ -390,13 +436,24 @@ export class WalletDb {
   }
 
   async getAccounts() {
-    return await this.db.selectFrom("accounts").selectAll().execute();
+    return await this.db
+      .selectFrom("accounts")
+      .leftJoin("activeAccount", "accounts.id", "activeAccount.accountId")
+      .selectAll("accounts")
+      .select((eb) => [
+        eb("activeAccount.accountId", "is not", null).as("active"),
+      ])
+      .execute();
   }
 
   async getAccount(name: string) {
     return await this.db
       .selectFrom("accounts")
-      .selectAll()
+      .leftJoin("activeAccount", "accounts.id", "activeAccount.accountId")
+      .selectAll("accounts")
+      .select((eb) => [
+        eb("activeAccount.accountId", "is not", null).as("active"),
+      ])
       .where("accounts.name", "=", name)
       .executeTakeFirst();
   }
@@ -453,6 +510,17 @@ export class WalletDb {
         .where("accountId", "=", account.id)
         .executeTakeFirstOrThrow();
 
+      await db
+        .updateTable("activeAccount")
+        .set((eb) => ({
+          accountId: eb
+            .selectFrom("accounts")
+            .select("id")
+            .where("id", "!=", account.id)
+            .limit(1),
+        }))
+        .execute();
+
       return await db
         .deleteFrom("accounts")
         .where("accounts.id", "=", account.id)
@@ -487,6 +555,37 @@ export class WalletDb {
     return result;
   }
 
+  async getActiveAccount() {
+    return await this.db
+      .selectFrom("activeAccount")
+      .innerJoin("accounts", "accounts.id", "activeAccount.accountId")
+      .select([
+        "accounts.id",
+        "accounts.name",
+        "accounts.publicAddress",
+        "accounts.viewOnly",
+        "accounts.viewOnlyAccount",
+      ])
+      // Should always be true
+      .select((eb) => [
+        eb("activeAccount.accountId", "==", eb.ref("accounts.id")).as("active"),
+      ])
+      .executeTakeFirst();
+  }
+
+  async setActiveAccount(name: string) {
+    const result = await this.db
+      .updateTable("activeAccount")
+      .from("accounts")
+      .set((eb) => ({
+        accountId: eb.ref("accounts.id"),
+      }))
+      .where("accounts.name", "=", name)
+      .executeTakeFirstOrThrow();
+
+    return result.numUpdatedRows > 0;
+  }
+
   async getAccountHead(accountId: number, network: Network) {
     const result = await this.db
       .selectFrom("accountNetworkHeads")
diff --git a/packages/mobile-app/data/wallet/wallet.ts b/packages/mobile-app/data/wallet/wallet.ts
index 99c8c27..e96739b 100644
--- a/packages/mobile-app/data/wallet/wallet.ts
+++ b/packages/mobile-app/data/wallet/wallet.ts
@@ -74,6 +74,18 @@ export class Wallet {
     return this.state.db.getAccount(name);
   }
 
+  async getActiveAccount() {
+    assertStarted(this.state);
+
+    return this.state.db.getActiveAccount();
+  }
+
+  async setActiveAccount(name: string) {
+    assertStarted(this.state);
+
+    return this.state.db.setActiveAccount(name);
+  }
+
   async getAccounts() {
     assertStarted(this.state);