Add SQLite, account creation, and account fetching (#16)

packages/data-facade/src/facade.ts

@@ -1,5 +1,5 @@
 import { ZodTypeAny, z } from "zod";
-import { useQuery, useMutation } from "@tanstack/react-query";
+import { useQuery, useMutation, UseMutationOptions } from "@tanstack/react-query";
 import { buildQueryKey } from "./utils";
 import type {
   ResolverFunc,
@@ -32,13 +32,14 @@ function handlerQueryBuilder<TResolver extends ResolverFunc>(
 
 function buildUseMutation() {
   return <TResolver extends ResolverFunc>(resolver: TResolver) => ({
-    useMutation: () => {
+    useMutation: (opts?: UseMutationOptions<Awaited<ReturnType<TResolver>>, Error, unknown, unknown>) => {
       return useMutation<
         Awaited<ReturnType<TResolver>>,
         Error,
         unknown,
         unknown
       >({
+        ...opts,
         mutationFn: resolver,
       });
     },

packages/data-facade/src/types.ts

@@ -35,7 +35,7 @@ export type HandlerQueryBuilderReturn<TResolver extends ResolverFunc> = (
 type UseMutationType<
   TResolver extends ResolverFunc,
   TReturn = Awaited<ReturnType<TResolver>>,
-> = (opts?: UseMutationOptions) => UseMutationResult<TReturn>;
+> = (opts?: UseMutationOptions<TReturn, Error, unknown, unknown>) => UseMutationResult<TReturn>;
 
 export type HandlerMutationBuilderReturn<TResolver extends ResolverFunc> =
   () => {

packages/mobile-app/app/(tabs)/transact.tsx

@@ -1,33 +1,34 @@
 import { View, Text } from "react-native";
-import { useFacade } from "../../data";
+import { useFacade } from "../../data/facades";
 import { Button } from "@ironfish/ui";
-import { useState } from "react";
+import { useQueryClient } from "@tanstack/react-query";
 
 export default function Transact() {
-  const [facadeResult, setFacadeResult] = useState([""]);
   const facade = useFacade();
+  const qc = useQueryClient()
 
-  const getAccountsResult = facade.getAccounts.useQuery(123);
-  const getAccountsWithZodResult = facade.getAccountsWithZod.useQuery({
-    limit: 2,
+  const getAccountsResult = facade.getAccounts.useQuery();
+  const createAccount = facade.createAccount.useMutation({
+    onSuccess: () => {
+      qc.invalidateQueries({
+        queryKey: ['getAccounts']
+      })
+    }
   });
-  const getAllAccountsResult = facade.getAllAccounts.useQuery();
-  const createAccount = facade.createAccount.useMutation();
 
   return (
     <View>
       <Text>Accounts</Text>
-      <Text>{JSON.stringify(getAccountsResult.data)}</Text>
-      <Text>{JSON.stringify(getAccountsWithZodResult.data)}</Text>
-      <Text>{JSON.stringify(getAllAccountsResult.data)}</Text>
-      <Text>Mutation: {facadeResult}</Text>
+      {(getAccountsResult.data ?? []).map((account) => (
+        <Text key={account.id}>{account.name}</Text>
+      ))}
       <Button
         onClick={async () => {
-          const otherResult = await createAccount.mutateAsync("dave");
-          setFacadeResult(otherResult);
+          const otherResult = await createAccount.mutateAsync({ name: "dave" });
+          console.log('Created Account:', otherResult)
         }}
       >
-        Click me
+        Create Account
       </Button>
     </View>
   );

packages/mobile-app/app/_layout.tsx

@@ -1,22 +1,48 @@
 import { Stack } from "expo-router";
+import { Text } from 'react-native';
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 
-import { FacadeProvider } from "../data";
+import { FacadeProvider, useFacade } from "../data/facades";
+import React, { useEffect } from "react";
 
 const queryClient = new QueryClient();
 
+function DatabaseLoader({ loading, children }: { loading: React.ReactNode, children?: React.ReactNode }) {
+  const facade = useFacade();
+  const [status, setStatus] = React.useState<string>("loading");
+  const loadDatabases = facade.loadDatabases.useMutation();
+
+  useEffect(() => {
+    const fn = async () => {
+      const result = await loadDatabases.mutateAsync(undefined);
+      setStatus(result)
+    }
+    fn()
+  }, [])
+
+  if (status === "loading") {
+    return loading;
+  } else if (status === 'loaded') {
+    return children;
+  } else {
+    throw new Error(`Unknown status ${status}`);
+  }
+}
+
 export default function Layout() {
   return (
     <QueryClientProvider client={queryClient}>
       <FacadeProvider>
-        <Stack>
-          <Stack.Screen
-            name="(tabs)"
-            options={{
-              headerShown: false,
-            }}
-          />
-        </Stack>
+        <DatabaseLoader loading={<Text>Loading databases...</Text>}>
+          <Stack>
+            <Stack.Screen
+              name="(tabs)"
+              options={{
+                headerShown: false,
+              }}
+            />
+          </Stack>
+        </DatabaseLoader>
       </FacadeProvider>
     </QueryClientProvider>
   );

packages/mobile-app/data/facades/README.md

@@ -0,0 +1,5 @@
+# facades
+
+Facades use the `data-facade` package to provide a `tanstack/react-query` interface between the wallet code in the `data` folder and the Expo frontend in the `app` folder.
+
+The facade routes are intended to be similar to the [Iron Fish RPC routes](https://github.com/iron-fish/ironfish/tree/master/ironfish/src/rpc/routes). Our goal is that in the future, we could implement a facade that connects directly to an Iron Fish node with minimal changes to the frontend code.

packages/mobile-app/data/facades/accounts/demoHandlers.ts

@@ -0,0 +1,38 @@
+import { f } from "data-facade";
+import { z } from "zod";
+import { AccountsMethods } from "./types";
+
+let ACCOUNTS = [
+  { id: 0, name: "alice", viewOnlyAccount: "alice" },
+  { id: 1, name: "bob", viewOnlyAccount: "bob"},
+  { id: 2, name: "carol", viewOnlyAccount: "carol"}
+];
+
+async function getAccounts(limit: number) {
+  await new Promise((resolve) => setTimeout(resolve, 1000));
+  return ACCOUNTS.slice(0, limit);
+}
+
+export const accountsHandlers = f.facade<AccountsMethods>({
+  getAccounts: f.handler.query(async () => {
+    const accounts = await getAccounts(ACCOUNTS.length);
+    console.log("getAccounts", accounts);
+    return accounts;
+  }),
+  createAccount: f.handler
+    .input(
+      z.object({
+        name: z.string(),
+      }),
+    )
+    .mutation(async ({ name }) => {
+      const existingId = ACCOUNTS.at(-1)?.id
+      if (existingId === undefined) {
+        throw new Error("No accounts found");
+      }
+      const account = { id: existingId + 1, name, viewOnlyAccount: name }
+      console.log("createAccount", account);
+      ACCOUNTS.push(account);
+      return account;
+    }),
+});