Add support for setting an account as active

iron-fish · Aug 20, 2024 · b50556a · b50556a
1 parent 89dca51
commit b50556a
Show file tree

Hide file tree

Showing 13 changed files with 333 additions and 34 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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;
     },