format: format with biome

apps/api/src/auth.ts

@@ -21,7 +21,7 @@ export const auth = betterAuth({
   ],
   advanced: {
     crossSubDomainCookies: {
-          enabled: process.env.NODE_ENV == 'production',
+      enabled: process.env.NODE_ENV == "production",
       domain: "koon.us",
     },
   },
@@ -30,15 +30,15 @@ export const auth = betterAuth({
     genericOAuth({
       config: [
         {
-          providerId: 'koon-family',
+          providerId: "koon-family",
           clientId: process.env.OAUTH_CLIENT_ID!,
           clientSecret: process.env.OAUTH_CLIENT_SECRET!,
           discoveryUrl: process.env.OAUTH_DISCOVERY_URL!,
           scopes: ["profile", "email"],
-        }
+        },
-      ]
+      ],
     }),
     deviceAuthorization(),
     bearer(),
-  ]
+  ],
 });

apps/api/src/index.ts

@@ -12,7 +12,7 @@ const app = getHono();
 app.use(
   "/api/*",
   cors({
-    origin: ['https://money.koon.us', `${BASE_URL}:8081`],
+    origin: ["https://money.koon.us", `${BASE_URL}:8081`],
     allowMethods: ["POST", "GET", "OPTIONS"],
     allowHeaders: ["Content-Type", "Authorization"],
     credentials: true,

apps/api/src/plaid.ts

@@ -1,13 +1,15 @@
 import { Configuration, PlaidApi, PlaidEnvironments } from "plaid";
 
 const configuration = new Configuration({
-  basePath: process.env.PLAID_ENV == 'production' ? PlaidEnvironments.production : PlaidEnvironments.sandbox,
+  basePath:
+    process.env.PLAID_ENV == "production"
+      ? PlaidEnvironments.production
+      : PlaidEnvironments.sandbox,
   baseOptions: {
     headers: {
-      'PLAID-CLIENT-ID': process.env.PLAID_CLIENT_ID,
+      "PLAID-CLIENT-ID": process.env.PLAID_CLIENT_ID,
-      'PLAID-SECRET': process.env.PLAID_SECRET,
+      "PLAID-SECRET": process.env.PLAID_SECRET,
-    }
+    },
   },
 });
 export const plaidClient = new PlaidApi(configuration);
-

apps/api/src/webhook.ts

@@ -3,12 +3,9 @@ import { plaidClient } from "./plaid";
 // import { LinkSessionFinishedWebhook, WebhookType } from "plaid";
 
 export const webhook = async (c: Context) => {
-
   console.log("Got webhook");
   const b = await c.req.text();
   console.log("body:", b);
 
-
   return c.text("Hi");
-
+};
-}

apps/api/src/zero.ts

@@ -8,8 +8,8 @@ import {
   PushProcessor,
   ZQLDatabase,
 } from "@rocicorp/zero/server";
-import { PostgresJSConnection } from '@rocicorp/zero/pg';
+import { PostgresJSConnection } from "@rocicorp/zero/pg";
-import postgres from 'postgres';
+import postgres from "postgres";
 import {
   createMutators as createMutatorsShared,
   isLoggedIn,
@@ -20,11 +20,22 @@ import {
 } from "@money/shared";
 import type { AuthData } from "@money/shared/auth";
 import { getHono } from "./hono";
-import { Configuration, CountryCode, PlaidApi, PlaidEnvironments, Products } from "plaid";
+import {
+  Configuration,
+  CountryCode,
+  PlaidApi,
+  PlaidEnvironments,
+  Products,
+} from "plaid";
 import { randomUUID } from "crypto";
 import { db } from "./db";
-import { balance, plaidAccessTokens, plaidLink, transaction } from "@money/shared/db";
+import {
-import { eq, inArray, sql, type InferInsertModel } from "drizzle-orm";
+  balance,
+  plaidAccessTokens,
+  plaidLink,
+  transaction,
+} from "@money/shared/db";
+import { and, eq, inArray, sql, type InferInsertModel } from "drizzle-orm";
 import { plaidClient } from "./plaid";
 
 const processor = new PushProcessor(
@@ -53,7 +64,7 @@ const createMutators = (authData: AuthData | null) => {
           products: [Products.Transactions],
           country_codes: [CountryCode.Us],
           webhook: "https://webhooks.koon.us/api/webhook_receiver",
-          hosted_link: {}
+          hosted_link: {},
         });
         const { link_token, hosted_link_url } = r.data;
 
@@ -70,25 +81,52 @@ const createMutators = (authData: AuthData | null) => {
       async get(_, { link_token }) {
         isLoggedIn(authData);
 
+        try {
+          const token = await db.query.plaidLink.findFirst({
+            where: and(
+              eq(plaidLink.token, link_token),
+              eq(plaidLink.user_id, authData.user.id),
+            ),
+          });
+          if (!token) throw Error("Link not found");
+          if (token.completeAt) return;
+
           const linkResp = await plaidClient.linkTokenGet({
             link_token,
           });
           if (!linkResp) throw Error("No link respo");
-        console.log(JSON.stringify(linkResp.data, null, 4));
-        const publicToken = linkResp.data.link_sessions?.at(0)?.results?.item_add_results.at(0)?.public_token;
 
-        if (!publicToken) throw Error("No public token");
+          console.log(JSON.stringify(linkResp.data, null, 4));
+
+          const item_add_result = linkResp.data.link_sessions
+            ?.at(0)
+            ?.results?.item_add_results.at(0);
+
+          // We will assume its not done yet.
+          if (!item_add_result) return;
+
           const { data } = await plaidClient.itemPublicTokenExchange({
-          public_token: publicToken,
+            public_token: item_add_result.public_token,
-        })
+          });
 
           await db.insert(plaidAccessTokens).values({
             id: randomUUID(),
             userId: authData.user.id,
             token: data.access_token,
             logoUrl: "",
-          name: ""
+            name: item_add_result.institution?.name || "Unknown",
           });
+
+          await db
+            .update(plaidLink)
+            .set({
+              completeAt: new Date(),
+            })
+            .where(eq(plaidLink.token, link_token));
+        } catch (e) {
+          console.error(e);
+          throw Error("Plaid error");
+        }
       },
 
       async updateTransactions() {
@@ -108,29 +146,39 @@ const createMutators = (authData: AuthData | null) => {
             end_date: new Date().toISOString().split("T")[0],
           });
 
-          const transactions = data.transactions.map(tx => ({
+          const transactions = data.transactions.map(
+            (tx) =>
+              ({
                 id: randomUUID(),
                 user_id: authData.user.id,
                 plaid_id: tx.transaction_id,
                 account_id: tx.account_id,
                 name: tx.name,
                 amount: tx.amount as any,
-            datetime: tx.datetime ? new Date(tx.datetime) : new Date(tx.date),
+                datetime: tx.datetime
-            authorized_datetime: tx.authorized_datetime ? new Date(tx.authorized_datetime) : undefined,
+                  ? new Date(tx.datetime)
+                  : new Date(tx.date),
+                authorized_datetime: tx.authorized_datetime
+                  ? new Date(tx.authorized_datetime)
+                  : undefined,
                 json: JSON.stringify(tx),
-          } satisfies InferInsertModel<typeof transaction>));
+              }) satisfies InferInsertModel<typeof transaction>,
+          );
 
-          await db.insert(transaction).values(transactions).onConflictDoNothing({
+          await db
+            .insert(transaction)
+            .values(transactions)
+            .onConflictDoNothing({
               target: transaction.plaid_id,
             });
 
           const txReplacingPendingIds = data.transactions
-            .filter(t => t.pending_transaction_id)
+            .filter((t) => t.pending_transaction_id)
-            .map(t => t.pending_transaction_id!);
+            .map((t) => t.pending_transaction_id!);
 
-          await db.delete(transaction)
+          await db
+            .delete(transaction)
             .where(inArray(transaction.plaid_id, txReplacingPendingIds));
-
         }
       },
 
@@ -146,9 +194,12 @@ const createMutators = (authData: AuthData | null) => {
 
         for (const account of accounts) {
           const { data } = await plaidClient.accountsBalanceGet({
-            access_token: account.token
+            access_token: account.token,
           });
-          await db.insert(balance).values(data.accounts.map(bal => ({
+          await db
+            .insert(balance)
+            .values(
+              data.accounts.map((bal) => ({
                 id: randomUUID(),
                 user_id: authData.user.id,
                 plaid_id: bal.account_id,
@@ -156,16 +207,20 @@ const createMutators = (authData: AuthData | null) => {
                 current: bal.balances.current as any,
                 name: bal.name,
                 tokenId: account.id,
-          }))).onConflictDoUpdate({
+              })),
+            )
+            .onConflictDoUpdate({
               target: balance.plaid_id,
-            set: { current: sql.raw(`excluded.${balance.current.name}`), avaliable: sql.raw(`excluded.${balance.avaliable.name}`) }
+              set: {
-          })
+                current: sql.raw(`excluded.${balance.current.name}`),
-        }
+                avaliable: sql.raw(`excluded.${balance.avaliable.name}`),
-
               },
+            });
         }
+      },
+    },
   } as const satisfies Mutators;
-}
+};
 
 const zero = getHono()
   .post("/mutate", async (c) => {

apps/expo/app/[...route].tsx

@@ -5,7 +5,9 @@ import { authClient } from "@/lib/auth-client";
 
 export default function Page() {
   const { route: initalRoute } = useLocalSearchParams<{ route: string[] }>();
-  const [route, setRoute] = useState(initalRoute ? "/" + initalRoute.join("/") : "/");
+  const [route, setRoute] = useState(
+    initalRoute ? "/" + initalRoute.join("/") : "/",
+  );
 
   const { data } = authClient.useSession();
 

apps/expo/app/_layout.tsx

@@ -1,17 +1,23 @@
-import { Stack } from 'expo-router';
+import { Stack } from "expo-router";
-import 'react-native-reanimated';
+import "react-native-reanimated";
 
-import { authClient } from '@/lib/auth-client';
+import { authClient } from "@/lib/auth-client";
-import { ZeroProvider } from '@rocicorp/zero/react';
+import { ZeroProvider } from "@rocicorp/zero/react";
-import { useMemo } from 'react';
+import { useMemo } from "react";
-import { authDataSchema } from '@money/shared/auth';
+import { authDataSchema } from "@money/shared/auth";
-import { Platform } from 'react-native';
+import { Platform } from "react-native";
-import type { ZeroOptions } from '@rocicorp/zero';
+import type { ZeroOptions } from "@rocicorp/zero";
-import { schema, type Schema, createMutators, type Mutators, BASE_URL } from '@money/shared';
+import {
+  schema,
+  type Schema,
+  createMutators,
+  type Mutators,
+  BASE_URL,
+} from "@money/shared";
 import { expoSQLiteStoreProvider } from "@rocicorp/zero/react-native";
 
 export const unstable_settings = {
-  anchor: 'index',
+  anchor: "index",
 };
 
 const kvStore = Platform.OS === "web" ? undefined : expoSQLiteStoreProvider();
@@ -25,14 +31,17 @@ export default function RootLayout() {
   }, [session]);
 
   const cookie = useMemo(() => {
-    return Platform.OS == 'web' ? undefined : authClient.getCookie();
+    return Platform.OS == "web" ? undefined : authClient.getCookie();
   }, [session, isPending]);
 
   const zeroProps = useMemo(() => {
     return {
-      storageKey: 'money',
+      storageKey: "money",
       kvStore,
-      server: process.env.NODE_ENV == 'production' ? 'https://zero.koon.us' : `${BASE_URL}:4848`,
+      server:
+        process.env.NODE_ENV == "production"
+          ? "https://zero.koon.us"
+          : `${BASE_URL}:4848`,
       userID: authData?.user.id ?? "anon",
       schema,
       mutators: createMutators(authData),

apps/expo/app/approve.tsx

@@ -13,11 +13,7 @@ export default function Page() {
     authClient.device.approve({
       userCode: code,
     });
-
   }, []);
 
-  return <Text>
+  return <Text>Approving: {code}</Text>;
-    Approving: {code}
-  </Text>
 }
-

apps/expo/app/auth.tsx

@@ -6,7 +6,10 @@ export default function Auth() {
   const onLogin = () => {
     authClient.signIn.oauth2({
       providerId: "koon-family",
-      callbackURL: process.env.NODE_ENV == 'production' ? 'https://money.koon.us' : `${BASE_URL}:8081`,
+      callbackURL:
+        process.env.NODE_ENV == "production"
+          ? "https://money.koon.us"
+          : `${BASE_URL}:8081`,
     });
   };
 
@@ -14,5 +17,5 @@ export default function Auth() {
     <View>
       <Button onPress={onLogin} title="Login with Koon Family" />
     </View>
-  )
+  );
 }

apps/expo/app/index.native.tsx

@@ -1,8 +1,14 @@
-import { authClient } from '@/lib/auth-client';
+import { authClient } from "@/lib/auth-client";
-import {  RefreshControl, ScrollView, StatusBar, Text, View } from 'react-native';
+import {
+  RefreshControl,
+  ScrollView,
+  StatusBar,
+  Text,
+  View,
+} from "react-native";
 import { useQuery, useZero } from "@rocicorp/zero/react";
-import { queries, type Mutators, type Schema } from '@money/shared';
+import { queries, type Mutators, type Schema } from "@money/shared";
-import { useState } from 'react';
+import { useState } from "react";
 
 export default function HomeScreen() {
   const { data: session } = authClient.useSession();
@@ -20,16 +26,43 @@ export default function HomeScreen() {
   return (
     <>
       <StatusBar barStyle="dark-content" />
-      <ScrollView contentContainerStyle={{ paddingTop: StatusBar.currentHeight, flexGrow: 1 }} refreshControl={<RefreshControl refreshing={refreshing} onRefresh={onRefresh} />} style={{ paddingHorizontal: 10 }}>
+      <ScrollView
-        {balances.map(balance => <Balance key={balance.id} balance={balance} />)}
+        contentContainerStyle={{
+          paddingTop: StatusBar.currentHeight,
+          flexGrow: 1,
+        }}
+        refreshControl={
+          <RefreshControl refreshing={refreshing} onRefresh={onRefresh} />
+        }
+        style={{ paddingHorizontal: 10 }}
+      >
+        {balances.map((balance) => (
+          <Balance key={balance.id} balance={balance} />
+        ))}
       </ScrollView>
     </>
   );
 }
 
-function Balance({ balance }: { balance: { name: string, current: number, avaliable: number } }) {
+function Balance({
-  return <View style={{ backgroundColor: "#eee", borderColor: "#ddd", borderWidth: 1, marginBottom: 10, borderRadius: 10 }}>
+  balance,
+}: {
+  balance: { name: string; current: number; avaliable: number };
+}) {
+  return (
+    <View
+      style={{
+        backgroundColor: "#eee",
+        borderColor: "#ddd",
+        borderWidth: 1,
+        marginBottom: 10,
+        borderRadius: 10,
+      }}
+    >
       <Text style={{ fontSize: 15, textAlign: "center" }}>{balance.name}</Text>
-    <Text style={{ fontSize: 30, textAlign: "center" }}>{balance.current}</Text>
+      <Text style={{ fontSize: 30, textAlign: "center" }}>
+        {balance.current}
+      </Text>
     </View>
+  );
 }

apps/expo/eslint.config.js

@@ -1,10 +1,10 @@
 // https://docs.expo.dev/guides/using-eslint/
-const { defineConfig } = require('eslint/config');
+const { defineConfig } = require("eslint/config");
-const expoConfig = require('eslint-config-expo/flat');
+const expoConfig = require("eslint-config-expo/flat");
 
 module.exports = defineConfig([
   expoConfig,
   {
-    ignores: ['dist/*'],
+    ignores: ["dist/*"],
   },
 ]);

apps/expo/lib/auth-client.ts

@@ -1,11 +1,17 @@
 import { createAuthClient } from "better-auth/react";
-import { deviceAuthorizationClient, genericOAuthClient } from "better-auth/client/plugins";
+import {
+  deviceAuthorizationClient,
+  genericOAuthClient,
+} from "better-auth/client/plugins";
 import { expoClient } from "@better-auth/expo/client";
 import * as SecureStore from "expo-secure-store";
 import { BASE_URL } from "@money/shared";
 
 export const authClient = createAuthClient({
-  baseURL: process.env.NODE_ENV == 'production' ? 'https://money-api.koon.us' : `${BASE_URL}:3000`,
+  baseURL:
+    process.env.NODE_ENV == "production"
+      ? "https://money-api.koon.us"
+      : `${BASE_URL}:3000`,
   plugins: [
     expoClient({
       scheme: "money",
@@ -14,5 +20,5 @@ export const authClient = createAuthClient({
     }),
     genericOAuthClient(),
     deviceAuthorizationClient(),
-  ]
+  ],
 });

apps/expo/metro.config.js

@@ -1,6 +1,6 @@
 const { getDefaultConfig } = require("expo/metro-config");
 
-const config = getDefaultConfig(__dirname)
+const config = getDefaultConfig(__dirname);
 
 // Add wasm asset support
 config.resolver.assetExts.push("wasm");

apps/tui/build.ts

@@ -5,9 +5,12 @@ import path from "path";
 const aliasPlugin = {
   name: "alias-react-native",
   setup(build) {
-    build.onResolve({ filter: /^react-native$/ }, args => {
+    build.onResolve({ filter: /^react-native$/ }, (args) => {
       return {
-        path: path.resolve(__dirname, "../../packages/react-native-opentui/index.tsx"),
+        path: path.resolve(
+          __dirname,
+          "../../packages/react-native-opentui/index.tsx",
+        ),
       };
     });
   },

apps/tui/lib/auth-client.ts

@@ -4,9 +4,5 @@ import { deviceAuthorizationClient } from "better-auth/client/plugins";
 
 export const authClient = createAuthClient({
   baseURL: config.apiUrl,
-  plugins: [
+  plugins: [deviceAuthorizationClient()],
-    deviceAuthorizationClient(),
-  ]
 });
-
-

apps/tui/src/auth.ts

@@ -1,39 +1,70 @@
-import { Context, Data, Effect, Layer, Schema, Console, Schedule, Ref, Duration } from "effect";
+import {
+  Context,
+  Data,
+  Effect,
+  Layer,
+  Schema,
+  Console,
+  Schedule,
+  Ref,
+  Duration,
+} from "effect";
 import { FileSystem } from "@effect/platform";
 import { config } from "./config";
 import { AuthState } from "./schema";
 import { authClient } from "@/lib/auth-client";
 import type { BetterFetchResponse } from "@better-fetch/fetch";
 
-class AuthClientUnknownError extends Data.TaggedError("AuthClientUnknownError") {};
+class AuthClientUnknownError extends Data.TaggedError(
-class AuthClientExpiredToken extends Data.TaggedError("AuthClientExpiredToken") {};
+  "AuthClientUnknownError",
-class AuthClientNoData extends Data.TaggedError("AuthClientNoData") {};
+) {}
-class AuthClientFetchError extends Data.TaggedError("AuthClientFetchError")<{ message: string, }> {};
+class AuthClientExpiredToken extends Data.TaggedError(
+  "AuthClientExpiredToken",
+) {}
+class AuthClientNoData extends Data.TaggedError("AuthClientNoData") {}
+class AuthClientFetchError extends Data.TaggedError("AuthClientFetchError")<{
+  message: string;
+}> {}
 class AuthClientError<T> extends Data.TaggedError("AuthClientError")<{
-  error: T,
+  error: T;
-}> {};
+}> {}
 
-type ErrorType<E> = { [key in keyof ((E extends Record<string, any> ? E : {
+type ErrorType<E> = {
+  [key in keyof ((E extends Record<string, any>
+    ? E
+    : {
         message?: string;
       }) & {
     status: number;
     statusText: string;
-})]: ((E extends Record<string, any> ? E : {
+  })]: ((E extends Record<string, any>
+    ? E
+    : {
         message?: string;
       }) & {
     status: number;
     statusText: string;
-})[key]; };
+  })[key];
+};
 
-export class AuthClient extends Context.Tag("AuthClient")<AuthClient, AuthClientImpl>() {};
+export class AuthClient extends Context.Tag("AuthClient")<
+  AuthClient,
+  AuthClientImpl
+>() {}
 
 export interface AuthClientImpl {
   use: <T, E>(
     fn: (client: typeof authClient) => Promise<BetterFetchResponse<T, E>>,
-  ) => Effect.Effect<T, AuthClientError<ErrorType<E>> | AuthClientFetchError | AuthClientUnknownError | AuthClientNoData, never>
+  ) => Effect.Effect<
+    T,
+    | AuthClientError<ErrorType<E>>
+    | AuthClientFetchError
+    | AuthClientUnknownError
+    | AuthClientNoData,
+    never
+  >;
 }
 
-
 export const make = () =>
   Effect.gen(function* () {
     return AuthClient.of({
@@ -41,11 +72,13 @@ export const make = () =>
         Effect.gen(function* () {
           const { data, error } = yield* Effect.tryPromise({
             try: () => fn(authClient),
-            catch: (error) => error instanceof Error
+            catch: (error) =>
+              error instanceof Error
                 ? new AuthClientFetchError({ message: error.message })
-              : new AuthClientUnknownError()
+                : new AuthClientUnknownError(),
           });
-          if (error != null) return yield* Effect.fail(new AuthClientError({ error }));
+          if (error != null)
+            return yield* Effect.fail(new AuthClientError({ error }));
           if (data == null) return yield* Effect.fail(new AuthClientNoData());
           return data;
         }),
@@ -54,11 +87,12 @@ export const make = () =>
 
 export const AuthClientLayer = Layer.scoped(AuthClient, make());
 
-const pollToken = ({ device_code }: { device_code: string }) => Effect.gen(function* () {
+const pollToken = ({ device_code }: { device_code: string }) =>
+  Effect.gen(function* () {
     const auth = yield* AuthClient;
     const intervalRef = yield* Ref.make(5);
 
-  const tokenEffect = auth.use(client => {
+    const tokenEffect = auth.use((client) => {
       Console.debug("Fetching");
 
       return client.device.token({
@@ -66,64 +100,67 @@ const pollToken = ({ device_code }: { device_code: string }) => Effect.gen(funct
         device_code,
         client_id: config.authClientId,
         fetchOptions: { headers: { "user-agent": config.authClientUserAgent } },
-    })
+      });
-  }
+    });
-  );
 
-  return yield* tokenEffect
+    return yield* tokenEffect.pipe(
-    .pipe(
+      Effect.tapError((error) =>
-      Effect.tapError(error =>
         error._tag == "AuthClientError" && error.error.error == "slow_down"
-          ? Ref.update(intervalRef, current => {
+          ? Ref.update(intervalRef, (current) => {
               Console.debug("updating delay to ", current + 5);
-            return current + 5
+              return current + 5;
             })
-          : Effect.void
+          : Effect.void,
       ),
       Effect.retry({
         schedule: Schedule.addDelayEffect(
-          Schedule.recurWhile<Effect.Effect.Error<typeof tokenEffect>>(error =>
+          Schedule.recurWhile<Effect.Effect.Error<typeof tokenEffect>>(
+            (error) =>
               error._tag == "AuthClientError" &&
-              (error.error.error == "authorization_pending" || error.error.error == "slow_down")
+              (error.error.error == "authorization_pending" ||
+                error.error.error == "slow_down"),
           ),
-          () => Ref.get(intervalRef).pipe(Effect.map(Duration.seconds))
+          () => Ref.get(intervalRef).pipe(Effect.map(Duration.seconds)),
-        )
+        ),
-      })
+      }),
-
     );
-
   });
 
 const getFromFromDisk = Effect.gen(function* () {
   const fs = yield* FileSystem.FileSystem;
   const content = yield* fs.readFileString(config.authPath);
   const auth = yield* Schema.decode(Schema.parseJson(AuthState))(content);
-  if (auth.session.expiresAt < new Date()) yield* Effect.fail(new AuthClientExpiredToken());
+  if (auth.session.expiresAt < new Date())
+    yield* Effect.fail(new AuthClientExpiredToken());
   return auth;
 });
 
 const requestAuth = Effect.gen(function* () {
   const auth = yield* AuthClient;
-  const { device_code, user_code } = yield* auth.use(client => client.device.code({
+  const { device_code, user_code } = yield* auth.use((client) =>
+    client.device.code({
       client_id: config.authClientId,
       scope: "openid profile email",
-  }));
+    }),
+  );
 
   console.log(`Please use the code: ${user_code}`);
 
   const { access_token } = yield* pollToken({ device_code });
 
-  const sessionData = yield* auth.use(client => client.getSession({
+  const sessionData = yield* auth.use((client) =>
+    client.getSession({
       fetchOptions: {
         auth: {
           type: "Bearer",
           token: access_token,
-      }
+        },
-    }
+      },
-  }));
+    }),
+  );
   if (sessionData == null) return yield* Effect.fail(new AuthClientNoData());
 
-  const result = yield* Schema.decodeUnknown(AuthState)(sessionData)
+  const result = yield* Schema.decodeUnknown(AuthState)(sessionData);
 
   const fs = yield* FileSystem.FileSystem;
   yield* fs.writeFileString(config.authPath, JSON.stringify(result));
@@ -134,33 +171,51 @@ const requestAuth = Effect.gen(function* () {
 export const getAuth = Effect.gen(function* () {
   return yield* getFromFromDisk.pipe(
     Effect.catchAll(() => requestAuth),
-    Effect.catchTag("AuthClientFetchError", (err) => Effect.gen(function* () {
+    Effect.catchTag("AuthClientFetchError", (err) =>
+      Effect.gen(function* () {
         yield* Console.error("Authentication failed: " + err.message);
         process.exit(1);
-    })),
+      }),
-    Effect.catchTag("AuthClientNoData", () => Effect.gen(function* () {
+    ),
-      yield* Console.error("Authentication failed: No error and no data was given by the auth server.");
+    Effect.catchTag("AuthClientNoData", () =>
+      Effect.gen(function* () {
+        yield* Console.error(
+          "Authentication failed: No error and no data was given by the auth server.",
+        );
         process.exit(1);
-    })),
+      }),
-    Effect.catchTag("ParseError", (err) => Effect.gen(function* () {
+    ),
-      yield* Console.error("Authentication failed: Auth data failed: " + err.toString());
+    Effect.catchTag("ParseError", (err) =>
+      Effect.gen(function* () {
+        yield* Console.error(
+          "Authentication failed: Auth data failed: " + err.toString(),
+        );
         process.exit(1);
-    })),
+      }),
-    Effect.catchTag("BadArgument", () => Effect.gen(function* () {
+    ),
+    Effect.catchTag("BadArgument", () =>
+      Effect.gen(function* () {
         yield* Console.error("Authentication failed: Bad argument");
         process.exit(1);
-    })),
+      }),
-    Effect.catchTag("SystemError", () => Effect.gen(function* () {
+    ),
+    Effect.catchTag("SystemError", () =>
+      Effect.gen(function* () {
         yield* Console.error("Authentication failed: System error");
         process.exit(1);
-    })),
+      }),
-    Effect.catchTag("AuthClientError", ({ error }) => Effect.gen(function* () {
+    ),
+    Effect.catchTag("AuthClientError", ({ error }) =>
+      Effect.gen(function* () {
         yield* Console.error("Authentication error: " + error.statusText);
         process.exit(1);
-    })),
+      }),
-    Effect.catchTag("AuthClientUnknownError", () => Effect.gen(function* () {
+    ),
+    Effect.catchTag("AuthClientUnknownError", () =>
+      Effect.gen(function* () {
         yield* Console.error("Unknown authentication error");
         process.exit(1);
-    })),
+      }),
+    ),
   );
 });

apps/tui/src/config.ts

@@ -10,5 +10,5 @@ export const config = {
   authClientId: "koon-family",
   authClientUserAgent: "CLI",
   zeroUrl: "http://laptop:4848",
-  apiUrl: "http://laptop:3000"
+  apiUrl: "http://laptop:3000",
 };

apps/tui/src/index.tsx

@@ -2,7 +2,7 @@ import { createCliRenderer } from "@opentui/core";
 import { createRoot, useKeyboard } from "@opentui/react";
 import { App, type Route } from "@money/ui";
 import { ZeroProvider } from "@rocicorp/zero/react";
-import { schema } from '@money/shared';
+import { schema } from "@money/shared";
 import { useState } from "react";
 import { AuthClientLayer, getAuth } from "./auth";
 import { Effect } from "effect";
@@ -14,28 +14,30 @@ import { config } from "./config";
 function Main({ auth }: { auth: AuthData }) {
   const [route, setRoute] = useState<Route>("/");
 
-  useKeyboard(key => {
+  useKeyboard((key) => {
     if (key.name == "c" && key.ctrl) process.exit(0);
   });
 
   return (
-    <ZeroProvider {...{ userID: auth.user.id, auth: auth.session.token, server: config.zeroUrl, schema, kvStore }}>
+    <ZeroProvider
-      <App
+      {...{
-        auth={auth}
+        userID: auth.user.id,
-        route={route}
+        auth: auth.session.token,
-        setRoute={setRoute}
+        server: config.zeroUrl,
-      />
+        schema,
+        kvStore,
+      }}
+    >
+      <App auth={auth} route={route} setRoute={setRoute} />
     </ZeroProvider>
   );
 }
 
-
-
 const auth = await Effect.runPromise(
   getAuth.pipe(
     Effect.provide(BunContext.layer),
     Effect.provide(AuthClientLayer),
-  )
+  ),
 );
 const renderer = await createCliRenderer({ exitOnCtrlC: false });
 createRoot(renderer).render(<Main auth={auth} />);

apps/tui/src/schema.ts

@@ -1,6 +1,9 @@
 import { Schema } from "effect";
 
-const DateFromDateOrString = Schema.Union(Schema.DateFromString, Schema.DateFromSelf);
+const DateFromDateOrString = Schema.Union(
+  Schema.DateFromString,
+  Schema.DateFromSelf,
+);
 
 const SessionSchema = Schema.Struct({
   expiresAt: DateFromDateOrString,
@@ -23,11 +26,9 @@ const UserSchema = Schema.Struct({
   id: Schema.String,
 });
 
-
 export const AuthState = Schema.Struct({
   session: SessionSchema,
   user: UserSchema,
 });
 
 export type AuthData = typeof AuthState.Type;
-

apps/tui/src/store.ts

@@ -23,7 +23,7 @@ async function loadFile(name: string): Promise<Map<string, ReadonlyJSONValue>> {
     const buf = await fs.readFile(filePath, "utf8");
     const obj = JSON.parse(buf) as Record<string, ReadonlyJSONValue>;
     const frozen = Object.fromEntries(
-      Object.entries(obj).map(([k, v]) => [k, deepFreeze(v)])
+      Object.entries(obj).map(([k, v]) => [k, deepFreeze(v)]),
     );
     return new Map(Object.entries(frozen));
   } catch (err: any) {
@@ -73,7 +73,9 @@ export const kvStore: StoreProvider = {
         closed: txClosed,
         async has(key: string) {
           if (txClosed) throw new Error("transaction closed");
-          return staging.has(key) ? staging.get(key) !== undefined : data.has(key);
+          return staging.has(key)
+            ? staging.get(key) !== undefined
+            : data.has(key);
         },
         async get(key: string) {
           if (txClosed) throw new Error("transaction closed");

apps/tui/util/qr.ts

@@ -22,5 +22,3 @@ export function QR(value: string): string {
   }
   return out;
 }
-
-

biome.jsonc

@@ -0,0 +1,15 @@
+{
+  "$schema": "https://biomejs.dev/schemas/2.0.5/schema.json",
+  "formatter": {
+    "enabled": true,
+    "indentStyle": "space"
+  },
+  "linter": {
+    "enabled": false
+  },
+  "vcs": {
+    "enabled": true,
+    "clientKind": "git",
+    "useIgnoreFile": true
+  }
+}

packages/react-native-opentui/index.tsx

@@ -5,10 +5,8 @@ import type {
   PressableProps,
   ScrollViewProps,
   ModalProps,
-
   StyleProp,
   ViewStyle,
-
   LinkingImpl,
 } from "react-native";
 import { useTerminalDimensions } from "@opentui/react";
@@ -22,30 +20,29 @@ const RATIO_HEIGHT = 17;
 function attr<K extends keyof ViewStyle>(
   style: StyleProp<ViewStyle>,
   name: K,
-  type: "string"
+  type: "string",
 ): Extract<ViewStyle[K], string> | undefined;
 
 function attr<K extends keyof ViewStyle>(
   style: StyleProp<ViewStyle>,
   name: K,
-  type: "number"
+  type: "number",
 ): Extract<ViewStyle[K], number> | undefined;
 
 function attr<K extends keyof ViewStyle>(
   style: StyleProp<ViewStyle>,
   name: K,
-  type: "boolean"
+  type: "boolean",
 ): Extract<ViewStyle[K], boolean> | undefined;
 
 function attr<K extends keyof ViewStyle>(
   style: StyleProp<ViewStyle>,
   name: K,
-  type: "string" | "number" | "boolean"
+  type: "string" | "number" | "boolean",
 ) {
   if (!style) return undefined;
 
-  const obj: ViewStyle =
+  const obj: ViewStyle = Array.isArray(style)
-    Array.isArray(style)
     ? Object.assign({}, ...style.filter(Boolean))
     : (style as ViewStyle);
 
@@ -54,10 +51,10 @@ function attr<K extends keyof ViewStyle>(
 }
 
 export function View({ children, style }: ViewProps) {
-  const bg = style &&
+  const bg =
-    'backgroundColor' in style
+    style && "backgroundColor" in style
-    ? typeof style.backgroundColor == 'string'
+      ? typeof style.backgroundColor == "string"
-    ? style.backgroundColor.startsWith('rgba(')
+        ? style.backgroundColor.startsWith("rgba(")
           ? (() => {
               const parts = style.backgroundColor.split("(")[1].split(")")[0];
               const [r, g, b, a] = parts.split(",").map(parseFloat);
@@ -67,34 +64,43 @@ export function View({ children, style }: ViewProps) {
         : undefined
       : undefined;
 
-  const padding = attr(style, 'padding', 'number');
+  const padding = attr(style, "padding", "number");
 
   const props = {
-    overflow: attr(style, 'overflow', 'string'),
+    overflow: attr(style, "overflow", "string"),
-    position: attr(style, 'position', 'string'),
+    position: attr(style, "position", "string"),
-    alignSelf: attr(style, 'alignSelf', 'string'),
+    alignSelf: attr(style, "alignSelf", "string"),
-    alignItems: attr(style, 'alignItems', 'string'),
+    alignItems: attr(style, "alignItems", "string"),
-    justifyContent: attr(style, 'justifyContent', 'string'),
+    justifyContent: attr(style, "justifyContent", "string"),
-    flexShrink: attr(style, 'flexShrink', 'number'),
+    flexShrink: attr(style, "flexShrink", "number"),
-    flexDirection: attr(style, 'flexDirection', 'string'),
+    flexDirection: attr(style, "flexDirection", "string"),
-    flexGrow: attr(style, 'flex', 'number') || attr(style, 'flexGrow', 'number'),
+    flexGrow:
+      attr(style, "flex", "number") || attr(style, "flexGrow", "number"),
   };
 
-  return <box
+  return (
+    <box
       backgroundColor={bg}
       paddingTop={padding && Math.round(padding / RATIO_HEIGHT)}
       paddingBottom={padding && Math.round(padding / RATIO_HEIGHT)}
       paddingLeft={padding && Math.round(padding / RATIO_WIDTH)}
       paddingRight={padding && Math.round(padding / RATIO_WIDTH)}
       {...props}
-  >{children}</box>
+    >
+      {children}
+    </box>
+  );
 }
 
-export function Pressable({ children: childrenRaw, style, onPress }: PressableProps) {
+export function Pressable({
-  const bg = style &&
+  children: childrenRaw,
-    'backgroundColor' in style
+  style,
-    ? typeof style.backgroundColor == 'string'
+  onPress,
-    ? style.backgroundColor.startsWith('rgba(')
+}: PressableProps) {
+  const bg =
+    style && "backgroundColor" in style
+      ? typeof style.backgroundColor == "string"
+        ? style.backgroundColor.startsWith("rgba(")
           ? (() => {
               const parts = style.backgroundColor.split("(")[1].split(")")[0];
               const [r, g, b, a] = parts.split(",").map(parseFloat);
@@ -103,64 +109,71 @@ export function Pressable({ children: childrenRaw, style, onPress }: PressablePr
           : style.backgroundColor
         : undefined
       : undefined;
-  const flexDirection = style &&
+  const flexDirection =
-    'flexDirection' in style
+    style && "flexDirection" in style
-    ? typeof style.flexDirection == 'string'
+      ? typeof style.flexDirection == "string"
         ? style.flexDirection
         : undefined
       : undefined;
-  const flex = style &&
+  const flex =
-    'flex' in style
+    style && "flex" in style
-    ? typeof style.flex == 'number'
+      ? typeof style.flex == "number"
         ? style.flex
         : undefined
       : undefined;
-  const flexShrink = style &&
+  const flexShrink =
-    'flexShrink' in style
+    style && "flexShrink" in style
-    ? typeof style.flexShrink == 'number'
+      ? typeof style.flexShrink == "number"
         ? style.flexShrink
         : undefined
       : undefined;
-  const overflow = style &&
+  const overflow =
-    'overflow' in style
+    style && "overflow" in style
-    ? typeof style.overflow == 'string'
+      ? typeof style.overflow == "string"
         ? style.overflow
         : undefined
       : undefined;
-  const position = style &&
+  const position =
-    'position' in style
+    style && "position" in style
-    ? typeof style.position == 'string'
+      ? typeof style.position == "string"
         ? style.position
         : undefined
       : undefined;
-  const justifyContent = style &&
+  const justifyContent =
-    'justifyContent' in style
+    style && "justifyContent" in style
-    ? typeof style.justifyContent == 'string'
+      ? typeof style.justifyContent == "string"
         ? style.justifyContent
         : undefined
       : undefined;
-  const alignItems = style &&
+  const alignItems =
-    'alignItems' in style
+    style && "alignItems" in style
-    ? typeof style.alignItems == 'string'
+      ? typeof style.alignItems == "string"
         ? style.alignItems
         : undefined
       : undefined;
 
-  const padding = style &&
+  const padding =
-    'padding' in style
+    style && "padding" in style
-    ? typeof style.padding == 'number'
+      ? typeof style.padding == "number"
         ? style.padding
         : undefined
       : undefined;
 
-  const children = childrenRaw instanceof Function ? childrenRaw({ pressed: true }) : childrenRaw;
+  const children =
+    childrenRaw instanceof Function
+      ? childrenRaw({ pressed: true })
+      : childrenRaw;
 
-  return <box
+  return (
-    onMouseDown={onPress ? ((_event) => {
+    <box
+      onMouseDown={
+        onPress
+          ? (_event) => {
               // @ts-ignore
               onPress();
-    }) : undefined}
+            }
-
+          : undefined
+      }
       backgroundColor={bg}
       flexDirection={flexDirection}
       flexGrow={flex}
@@ -173,28 +186,30 @@ export function Pressable({ children: childrenRaw, style, onPress }: PressablePr
       paddingBottom={padding && Math.round(padding / RATIO_HEIGHT)}
       paddingLeft={padding && Math.round(padding / RATIO_WIDTH)}
       paddingRight={padding && Math.round(padding / RATIO_WIDTH)}
-  >{children}</box>
+    >
+      {children}
+    </box>
+  );
 }
 
-
 export function Text({ style, children }: TextProps) {
-  const fg = style &&
+  const fg =
-    'color' in style
+    style && "color" in style
-    ? typeof style.color == 'string'
+      ? typeof style.color == "string"
         ? style.color
         : undefined
       : undefined;
-  return <text fg={fg || "black"}>{children}</text>
+  return <text fg={fg || "black"}>{children}</text>;
-
 }
 
 export function ScrollView({ children }: ScrollViewProps) {
-  return <scrollbox >{children}</scrollbox>
+  return <scrollbox>{children}</scrollbox>;
 }
 
 export function Modal({ children, visible }: ModalProps) {
   const { width, height } = useTerminalDimensions();
-  return <box
+  return (
+    <box
       visible={visible}
       position="absolute"
       width={width}
@@ -203,6 +218,7 @@ export function Modal({ children, visible }: ModalProps) {
     >
       {children}
     </box>
+  );
 }
 
 export const Platform = {
@@ -218,10 +234,10 @@ export const Linking = {
           ? `start "" "${url}"`
           : `xdg-open "${url}"`;
     exec(cmd);
-  }
+  },
 } satisfies Partial<LinkingImpl>;
 
 export default {
   View,
   Text,
-}
+};

packages/shared/src/const.ts

@@ -1,3 +1,2 @@
 export const HOST = process.env.EXPO_PUBLIC_TAILSCALE_MACHINE || "localhost";
 export const BASE_URL = `http://${HOST}`;
-

packages/shared/src/db/schema/public.ts

@@ -1,4 +1,12 @@
-import { pgTable, text, boolean, timestamp, uniqueIndex, decimal } from "drizzle-orm/pg-core";
+import {
+  boolean,
+  decimal,
+  pgTable,
+  text,
+  timestamp,
+  pgEnum,
+  uniqueIndex,
+} from "drizzle-orm/pg-core";
 
 export const users = pgTable(
   "user",
@@ -33,6 +41,7 @@ export const plaidLink = pgTable("plaidLink", {
   user_id: text("user_id").notNull(),
   link: text("link").notNull(),
   token: text("token").notNull(),
+  completeAt: timestamp("complete_at"),
   createdAt: timestamp("created_at").notNull().defaultNow(),
 });
 

packages/shared/src/mutators.ts

@@ -15,29 +15,30 @@ export function createMutators(authData: AuthData | null) {
       async deleteAccounts(tx: Tx, { accountIds }: { accountIds: string[] }) {
         isLoggedIn(authData);
         for (const id of accountIds) {
-          const token = await tx.query.plaidAccessTokens.where("userId", '=', authData.user.id).one();
+          const token = await tx.query.plaidAccessTokens
+            .where("userId", "=", authData.user.id)
+            .one();
           if (!token) continue;
           await tx.mutate.plaidAccessTokens.delete({ id });
 
           const balances = await tx.query.balance
-            .where('user_id', '=', authData.user.id)
+            .where("user_id", "=", authData.user.id)
-            .where("tokenId", '=', token.id)
+            .where("tokenId", "=", token.id)
             .run();
 
           for (const bal of balances) {
             await tx.mutate.balance.delete({ id: bal.id });
             const txs = await tx.query.transaction
-              .where('user_id', '=', authData.user.id)
+              .where("user_id", "=", authData.user.id)
-              .where('account_id', '=', bal.tokenId)
+              .where("account_id", "=", bal.tokenId)
               .run();
             for (const transaction of txs) {
               await tx.mutate.transaction.delete({ id: transaction.id });
             }
           }
-
         }
       },
-    }
+    },
   } as const;
 }
 

packages/shared/src/queries.ts

@@ -5,37 +5,59 @@ import { type AuthData } from "./auth";
 import { isLoggedIn } from "./zql";
 
 export const queries = {
-  me: syncedQueryWithContext('me', z.tuple([]), (authData: AuthData | null) => {
+  me: syncedQueryWithContext("me", z.tuple([]), (authData: AuthData | null) => {
     isLoggedIn(authData);
-    return builder.users
+    return builder.users.where("id", "=", authData.user.id).one();
-      .where('id', '=', authData.user.id)
-      .one();
   }),
-  allTransactions: syncedQueryWithContext('allTransactions', z.tuple([]), (authData: AuthData | null) => {
+  allTransactions: syncedQueryWithContext(
+    "allTransactions",
+    z.tuple([]),
+    (authData: AuthData | null) => {
       isLoggedIn(authData);
       return builder.transaction
-      .where('user_id', '=', authData.user.id)
+        .where("user_id", "=", authData.user.id)
-      .orderBy('datetime', 'desc')
+        .orderBy("datetime", "desc")
-      .limit(50)
+        .limit(50);
-  }),
+    },
-  getPlaidLink: syncedQueryWithContext('getPlaidLink', z.tuple([]), (authData: AuthData | null) => {
+  ),
+  getPlaidLink: syncedQueryWithContext(
+    "getPlaidLink",
+    z.tuple([]),
+    (authData: AuthData | null) => {
       isLoggedIn(authData);
       return builder.plaidLink
-      .where('user_id', '=', authData.user.id)
+        .where(({ cmp, and, or }) =>
-      .where('createdAt', '>', new Date().getTime() - (1000 * 60 * 60 * 4))
+          and(
-      .orderBy('createdAt', 'desc')
+            cmp("user_id", "=", authData.user.id),
+            cmp("createdAt", ">", new Date().getTime() - 1000 * 60 * 60 * 4),
+            or(
+              cmp("completeAt", ">", new Date().getTime() - 1000 * 5),
+              cmp("completeAt", "IS", null),
+            ),
+          ),
+        )
+        .orderBy("createdAt", "desc")
         .one();
-  }),
+    },
-  getBalances: syncedQueryWithContext('getBalances', z.tuple([]), (authData: AuthData | null) => {
+  ),
+  getBalances: syncedQueryWithContext(
+    "getBalances",
+    z.tuple([]),
+    (authData: AuthData | null) => {
       isLoggedIn(authData);
       return builder.balance
-      .where('user_id', '=', authData.user.id)
+        .where("user_id", "=", authData.user.id)
-      .orderBy('name', 'asc');
+        .orderBy("name", "asc");
-  }),
+    },
-  getItems: syncedQueryWithContext('getItems', z.tuple([]), (authData: AuthData | null) => {
+  ),
+  getItems: syncedQueryWithContext(
+    "getItems",
+    z.tuple([]),
+    (authData: AuthData | null) => {
       isLoggedIn(authData);
       return builder.plaidAccessTokens
-      .where('userId', '=', authData.user.id)
+        .where("userId", "=", authData.user.id)
-      .orderBy('createdAt', 'desc');
+        .orderBy("createdAt", "desc");
-  })
+    },
+  ),
 };

packages/shared/src/zero-schema.gen.ts

@@ -214,6 +214,16 @@ export const schema = {
             "token"
           >,
         },
+        completeAt: {
+          type: "number",
+          optional: true,
+          customType: null as unknown as ZeroCustomType<
+            ZeroSchema,
+            "plaidLink",
+            "completeAt"
+          >,
+          serverName: "complete_at",
+        },
         createdAt: {
           type: "number",
           optional: true,

packages/ui/components/Button.tsx

@@ -5,14 +5,17 @@ import { Text, Pressable } from "react-native";
 export interface ButtonProps {
   children: ReactNode;
   onPress?: () => void;
-  variant?: 'default' | 'secondary' | 'destructive';
+  variant?: "default" | "secondary" | "destructive";
   shortcut?: string;
 }
 
-const STYLES: Record<NonNullable<ButtonProps['variant']>, { backgroundColor: string, color: string }> = {
+const STYLES: Record<
-  default: { backgroundColor: 'black', color: 'white' },
+  NonNullable<ButtonProps["variant"]>,
-  secondary: { backgroundColor: '#ccc', color: 'black' },
+  { backgroundColor: string; color: string }
-  destructive: { backgroundColor: 'red', color: 'white' },
+> = {
+  default: { backgroundColor: "black", color: "white" },
+  secondary: { backgroundColor: "#ccc", color: "black" },
+  destructive: { backgroundColor: "red", color: "white" },
 };
 
 export function Button({ children, variant, onPress, shortcut }: ButtonProps) {
@@ -23,7 +26,13 @@ export function Button({ children, variant, onPress, shortcut }: ButtonProps) {
     if (key.name == shortcut) onPress();
   });
 
-  return <Pressable onPress={onPress} style={{ backgroundColor }}>
+  return (
-    <Text style={{ fontFamily: 'mono', color }}>  {children}{shortcut && ` (${shortcut})`}  </Text>
+    <Pressable onPress={onPress} style={{ backgroundColor }}>
+      <Text style={{ fontFamily: "mono", color }}>
+        {" "}
+        {children}
+        {shortcut && ` (${shortcut})`}{" "}
+      </Text>
     </Pressable>
+  );
 }

packages/ui/components/Dialog.tsx

@@ -1,7 +1,14 @@
-import { type ReactNode } from "react";
+import { createContext, type ReactNode } from "react";
 import { Modal, View, Text } from "react-native";
 import { useKeyboard } from "../src/useKeyboard";
 
+export interface DialogState {
+  close?: () => void;
+}
+export const Context = createContext<DialogState>({
+  close: () => {},
+});
+
 interface ProviderProps {
   children: ReactNode;
   visible?: boolean;
@@ -9,18 +16,27 @@ interface ProviderProps {
 }
 export function Provider({ children, visible, close }: ProviderProps) {
   useKeyboard((key) => {
-    if (key.name == 'escape') {
+    if (key.name == "escape") {
       if (close) close();
     }
   }, []);
 
   return (
+    <Context.Provider value={{ close }}>
       <Modal transparent visible={visible}>
         {/* <Pressable onPress={() => close && close()} style={{ justifyContent: 'center', alignItems: 'center', flex: 1, backgroundColor: 'rgba(0,0,0,0.2)',  }}> */}
-      <View style={{ justifyContent: 'center', alignItems: 'center', flex: 1, backgroundColor: 'rgba(0,0,0,0.2)',  }}>
+        <View
+          style={{
+            justifyContent: "center",
+            alignItems: "center",
+            flex: 1,
+            backgroundColor: "rgba(0,0,0,0.2)",
+          }}
+        >
           {visible && children}
         </View>
       </Modal>
+    </Context.Provider>
   );
 }
 
@@ -29,7 +45,9 @@ interface ContentProps {
 }
 export function Content({ children }: ContentProps) {
   return (
-    <View style={{ backgroundColor: 'white', padding: 12, alignItems: 'center'  }}>
+    <View
+      style={{ backgroundColor: "white", padding: 12, alignItems: "center" }}
+    >
       {children}
     </View>
   );

packages/ui/components/List.tsx

@@ -3,28 +3,34 @@ import { View, Text } from "react-native";
 import { useKeyboard } from "../src/useKeyboard";
 
 export type ListProps<T> = {
-  items: T[],
+  items: T[];
-  renderItem: (props: { item: T, isSelected: boolean }) => ReactNode;
+  renderItem: (props: { item: T; isSelected: boolean }) => ReactNode;
 };
 export function List<T>({ items, renderItem }: ListProps<T>) {
   const [idx, setIdx] = useState(0);
 
-  useKeyboard((key) => {
+  useKeyboard(
-    if (key.name == 'j') {
+    (key) => {
-      setIdx((prevIdx) => prevIdx + 1 < items.length ? prevIdx + 1 : items.length - 1);
+      if (key.name == "j") {
-    } else if (key.name == 'k') {
+        setIdx((prevIdx) =>
-      setIdx((prevIdx) => prevIdx == 0 ? 0 : prevIdx - 1);
+          prevIdx + 1 < items.length ? prevIdx + 1 : items.length - 1,
-    } else if (key.name == 'g' && key.shift) {
+        );
+      } else if (key.name == "k") {
+        setIdx((prevIdx) => (prevIdx == 0 ? 0 : prevIdx - 1));
+      } else if (key.name == "g" && key.shift) {
         setIdx(items.length - 1);
       }
-  }, [items]);
+    },
+    [items],
+  );
 
   return (
     <View>
-      {items.map((item, index) => <View style={{ backgroundColor: index == idx ? 'black' : undefined }}>
+      {items.map((item, index) => (
+        <View style={{ backgroundColor: index == idx ? "black" : undefined }}>
           {renderItem({ item, isSelected: index == idx })}
-      </View>)}
+        </View>
+      ))}
     </View>
   );
 }
-

packages/ui/components/Table.tsx

@@ -3,13 +3,9 @@ import { View, Text } from "react-native";
 import { useKeyboard } from "../src/useKeyboard";
 import type { KeyEvent } from "@opentui/core";
 
-const HEADER_COLOR = '#7158e2';
+const HEADER_COLOR = "#7158e2";
-const TABLE_COLORS = [
+const TABLE_COLORS = ["#ddd", "#eee"];
-  '#ddd',
+const SELECTED_COLOR = "#f7b730";
-  '#eee'
-];
-const SELECTED_COLOR = '#f7b730';
-
 
 const EXTRA = 5;
 
@@ -21,8 +17,7 @@ interface TableState {
   columnMap: Map<string, number>;
   idx: number;
   selectedFrom: number | undefined;
-};
+}
-
 
 const INITAL_STATE = {
   data: [],
@@ -34,44 +29,52 @@ const INITAL_STATE = {
 
 export const Context = createContext<TableState>(INITAL_STATE);
 
-export type Column = { name: string, label: string, render?: (i: number | string) => string };
+export type Column = {
-
+  name: string;
+  label: string;
+  render?: (i: number | string) => string;
+};
 
 function renderCell(row: ValidRecord, column: Column): string {
   const cell = row[column.name];
-  if (cell == undefined) return 'n/a';
+  if (cell == undefined) return "n/a";
-  if (cell == null) return 'null';
+  if (cell == null) return "null";
   if (column.render) return column.render(cell);
   return cell.toString();
 }
 
-
 export interface ProviderProps<T> {
   data: T[];
   columns: Column[];
   children: ReactNode;
   onKey?: (event: KeyEvent, selected: T[]) => void;
-};
+}
-export function Provider<T extends ValidRecord>({ data, columns, children, onKey }: ProviderProps<T>) {
+export function Provider<T extends ValidRecord>({
+  data,
+  columns,
+  children,
+  onKey,
+}: ProviderProps<T>) {
   const [idx, setIdx] = useState(0);
   const [selectedFrom, setSelectedFrom] = useState<number>();
 
-  useKeyboard((key) => {
+  useKeyboard(
-    if (key.name == 'j' || key.name == 'down') {
+    (key) => {
+      if (key.name == "j" || key.name == "down") {
         if (key.shift && selectedFrom == undefined) {
           setSelectedFrom(idx);
         }
         setIdx((prev) => Math.min(prev + 1, data.length - 1));
-    } else if (key.name == 'k' || key.name == 'up') {
+      } else if (key.name == "k" || key.name == "up") {
         if (key.shift && selectedFrom == undefined) {
           setSelectedFrom(idx);
         }
         setIdx((prev) => Math.max(prev - 1, 0));
-    } else if (key.name == 'g' && key.shift) {
+      } else if (key.name == "g" && key.shift) {
         setIdx(data.length - 1);
-    } else if (key.name == 'v') {
+      } else if (key.name == "v") {
         setSelectedFrom(idx);
-    } else if (key.name == 'escape') {
+      } else if (key.name == "escape") {
         setSelectedFrom(undefined);
       } else {
         const from = selectedFrom ? Math.min(idx, selectedFrom) : idx;
@@ -79,13 +82,21 @@ export function Provider<T extends ValidRecord>({ data, columns, children, onKey
         const selected = data.slice(from, to + 1);
         if (onKey) onKey(key, selected);
       }
-  }, [data, idx, selectedFrom]);
+    },
-
+    [data, idx, selectedFrom],
-
+  );
-  const columnMap = new Map(columns.map(col => {
-    return [col.name, Math.max(col.label.length, ...data.map(row => renderCell(row, col).length))]
-  }));
 
+  const columnMap = new Map(
+    columns.map((col) => {
+      return [
+        col.name,
+        Math.max(
+          col.label.length,
+          ...data.map((row) => renderCell(row, col).length),
+        ),
+      ];
+    }),
+  );
 
   return (
     <Context.Provider value={{ data, columns, columnMap, idx, selectedFrom }}>
@@ -98,21 +109,46 @@ export function Body() {
   const { columns, data, columnMap, idx, selectedFrom } = use(Context);
   return (
     <View>
-      <View style={{ backgroundColor: HEADER_COLOR, flexDirection: 'row' }}>
+      <View style={{ backgroundColor: HEADER_COLOR, flexDirection: "row" }}>
-        {columns.map(column => <Text key={column.name} style={{ fontFamily: 'mono', color: 'white' }}>{rpad(column.label, columnMap.get(column.name)! - column.label.length + EXTRA)}</Text>)}
+        {columns.map((column) => (
+          <Text
+            key={column.name}
+            style={{ fontFamily: "mono", color: "white" }}
+          >
+            {rpad(
+              column.label,
+              columnMap.get(column.name)! - column.label.length + EXTRA,
+            )}
+          </Text>
+        ))}
       </View>
       {data.map((row, index) => {
-          const isSelected = index == idx || (selectedFrom != undefined && ((selectedFrom <= index && index <= idx) || (idx <= index && index <= selectedFrom)))
+        const isSelected =
+          index == idx ||
+          (selectedFrom != undefined &&
+            ((selectedFrom <= index && index <= idx) ||
+              (idx <= index && index <= selectedFrom)));
 
         return (
-            <View key={index} style={{ backgroundColor: isSelected ? SELECTED_COLOR : TABLE_COLORS[index % 2] }}>
+          <View
-              <TableRow key={index} row={row as ValidRecord} index={index} isSelected={isSelected} />
+            key={index}
+            style={{
+              backgroundColor: isSelected
+                ? SELECTED_COLOR
+                : TABLE_COLORS[index % 2],
+            }}
+          >
+            <TableRow
+              key={index}
+              row={row as ValidRecord}
+              index={index}
+              isSelected={isSelected}
+            />
           </View>
         );
       })}
     </View>
-  )
+  );
-
 }
 
 interface RowProps<T> {
@@ -123,19 +159,34 @@ interface RowProps<T> {
 function TableRow<T extends ValidRecord>({ row, isSelected }: RowProps<T>) {
   const { columns, columnMap } = use(Context);
 
-
+  return (
-  return <View style={{ flexDirection: 'row' }}>
+    <View style={{ flexDirection: "row" }}>
-    {columns.map(column => {
+      {columns.map((column) => {
         const rendered = renderCell(row, column);
-      return <Text key={column.name} style={{ fontFamily: 'mono', color: isSelected ? 'black' : 'black' }}>{rpad(rendered, columnMap.get(column.name)! - rendered.length + EXTRA)}</Text>;
+        return (
+          <Text
+            key={column.name}
+            style={{
+              fontFamily: "mono",
+              color: isSelected ? "black" : "black",
+            }}
+          >
+            {rpad(
+              rendered,
+              columnMap.get(column.name)! - rendered.length + EXTRA,
+            )}
+          </Text>
+        );
       })}
     </View>
+  );
 }
 
 function rpad(input: string, length: number): string {
-  return input + Array.from({ length })
+  return (
-    .map(_ => " ")
+    input +
-    .join("");
+    Array.from({ length })
+      .map((_) => " ")
+      .join("")
+  );
 }
-
-

packages/ui/src/index.tsx

@@ -5,29 +5,27 @@ import { Settings } from "./settings";
 import { useKeyboard } from "./useKeyboard";
 import type { AuthData } from "@money/shared/auth";
 
-
 const PAGES = {
-  '/': {
+  "/": {
     screen: <Transactions />,
     key: "1",
   },
-  '/settings': {
+  "/settings": {
     screen: <Settings />,
     key: "2",
     children: {
       "/accounts": {},
       "/family": {},
-    }
+    },
   },
 };
 
-type Join<A extends string, B extends string> =
+type Join<A extends string, B extends string> = `${A}${B}` extends `${infer X}`
-  `${A}${B}` extends `${infer X}` ? X : never;
+  ? X
+  : never;
 
-type ChildRoutes<Parent extends string, Children> =
+type ChildRoutes<Parent extends string, Children> = {
-  {
+  [K in keyof Children & string]: K extends `/${string}`
-    [K in keyof Children & string]:
-      K extends `/${string}`
     ? Join<Parent, K>
     : never;
 }[keyof Children & string];
@@ -35,9 +33,7 @@ type ChildRoutes<Parent extends string, Children> =
 type Routes<T> = {
   [K in keyof T & string]:
     | K
-    | (T[K] extends { children: infer C }
+    | (T[K] extends { children: infer C } ? ChildRoutes<K, C> : never);
-        ? ChildRoutes<K, C>
-        : never)
 }[keyof T & string];
 
 export type Route = Routes<typeof PAGES>;
@@ -48,32 +44,33 @@ interface RouterContextType {
   setRoute: (route: Route) => void;
 }
 
-
 export const RouterContext = createContext<RouterContextType>({
   auth: null,
-  route: '/',
+  route: "/",
-  setRoute: () => {}
+  setRoute: () => {},
 });
 
-
 type AppProps = {
   auth: AuthData | null;
   route: Route;
   setRoute: (page: Route) => void;
-}
+};
 
 export function App({ auth, route, setRoute }: AppProps) {
-  return <RouterContext.Provider value={{ auth, route, setRoute }}>
+  return (
+    <RouterContext.Provider value={{ auth, route, setRoute }}>
       <Main />
     </RouterContext.Provider>
+  );
 }
 
 function Main() {
   const { route, setRoute } = use(RouterContext);
 
   useKeyboard((key) => {
-    const screen = Object.entries(PAGES)
+    const screen = Object.entries(PAGES).find(
-      .find(([, screen]) => screen.key == key.name);
+      ([, screen]) => screen.key == key.name,
+    );
 
     if (!screen) return;
 
@@ -85,12 +82,13 @@ function Main() {
   const match =
     route in PAGES
       ? (route as keyof typeof PAGES)
-      : (Object.keys(PAGES).sort((a, b) => b.length - a.length).find(p => route.startsWith(p)) as
+      : (Object.keys(PAGES)
-          keyof typeof PAGES);
+          .sort((a, b) => b.length - a.length)
+          .find((p) => route.startsWith(p)) as keyof typeof PAGES);
 
-  return <View style={{ backgroundColor: 'white', flex: 1 }}>
+  return (
+    <View style={{ backgroundColor: "white", flex: 1 }}>
       {PAGES[match].screen}
     </View>
+  );
 }
-
-

packages/ui/src/settings.tsx

@@ -12,58 +12,76 @@ type SettingsRoute = Extract<Route, `/settings${string}`>;
 const TABS = {
   "/settings": {
     label: "💽 General",
-    screen: <General />
+    screen: <General />,
   },
   "/settings/accounts": {
     label: "🏦 Bank Accounts",
-    screen: <Accounts />
+    screen: <Accounts />,
   },
   "/settings/family": {
     label: "👑 Family",
-    screen: <Family />
+    screen: <Family />,
   },
-} as const satisfies Record<SettingsRoute, { label: string, screen: ReactNode }>;
+} as const satisfies Record<
+  SettingsRoute,
+  { label: string; screen: ReactNode }
+>;
 
 type Tab = keyof typeof TABS;
 
 export function Settings() {
   const { route, setRoute } = use(RouterContext);
 
-  useKeyboard((key) => {
+  useKeyboard(
-    if (key.name == 'h') {
+    (key) => {
-      const currentIdx = Object.entries(TABS).findIndex(([tabRoute, _]) => tabRoute == route)
+      if (key.name == "h") {
+        const currentIdx = Object.entries(TABS).findIndex(
+          ([tabRoute, _]) => tabRoute == route,
+        );
         const routes = Object.keys(TABS) as SettingsRoute[];
-      const last = routes[currentIdx - 1]
+        const last = routes[currentIdx - 1];
         if (!last) return;
         setRoute(last);
-    } else if (key.name == 'l') {
+      } else if (key.name == "l") {
-      const currentIdx = Object.entries(TABS).findIndex(([tabRoute, _]) => tabRoute == route)
+        const currentIdx = Object.entries(TABS).findIndex(
+          ([tabRoute, _]) => tabRoute == route,
+        );
         const routes = Object.keys(TABS) as SettingsRoute[];
-      const next = routes[currentIdx + 1]
+        const next = routes[currentIdx + 1];
         if (!next) return;
         setRoute(next);
       }
-  }, [route]);
+    },
+    [route],
+  );
 
   return (
     <View style={{ flexDirection: "row" }}>
-
       <View style={{ padding: 10 }}>
         {Object.entries(TABS).map(([tabRoute, tab]) => {
           const isSelected = tabRoute == route;
 
           return (
-            <Pressable key={tab.label} style={{ backgroundColor: isSelected ? 'black' : undefined }} onPress={() => setRoute(tabRoute as SettingsRoute)}>
+            <Pressable
-              <Text style={{ fontFamily: 'mono', color: isSelected ? 'white' : 'black' }}>  {tab.label}  </Text>
+              key={tab.label}
+              style={{ backgroundColor: isSelected ? "black" : undefined }}
+              onPress={() => setRoute(tabRoute as SettingsRoute)}
+            >
+              <Text
+                style={{
+                  fontFamily: "mono",
+                  color: isSelected ? "white" : "black",
+                }}
+              >
+                {" "}
+                {tab.label}{" "}
+              </Text>
             </Pressable>
           );
         })}
       </View>
 
-      <View>
+      <View>{TABS[route as Tab].screen}</View>
-        {TABS[route as Tab].screen}
-      </View>
     </View>
   );
 }
-

packages/ui/src/settings/accounts.tsx

@@ -1,5 +1,5 @@
 import { useQuery, useZero } from "@rocicorp/zero/react";
-import { queries, type Mutators, type Schema } from '@money/shared';
+import { queries, type Mutators, type Schema } from "@money/shared";
 import { use, useEffect, useState } from "react";
 import { RouterContext } from "..";
 import { View, Text, Linking } from "react-native";
@@ -9,8 +9,12 @@ import * as Table from "../../components/Table";
 import * as Dialog from "../../components/Dialog";
 
 const COLUMNS: Table.Column[] = [
-  { name: 'name', label: 'Name' },
+  { name: "name", label: "Name" },
-  { name: 'createdAt', label: 'Added At', render: (n) => new Date(n).toLocaleString() },
+  {
+    name: "createdAt",
+    label: "Added At",
+    render: (n) => new Date(n).toLocaleString(),
+  },
 ];
 
 export function Accounts() {
@@ -21,75 +25,89 @@ export function Accounts() {
 
   const z = useZero<Schema, Mutators>();
 
-
-  // useKeyboard((key) => {
-  //   if (key.name == 'n') {
-  //     setDeleting([]);
-  //   } else if (key.name == 'y') {
-  //     onDelete();
-  //   }
-  // }, [deleting]);
-
   const onDelete = () => {
-    if (!deleting) return
+    if (!deleting) return;
-    const accountIds = deleting.map(account => account.id);
+    const accountIds = deleting.map((account) => account.id);
     z.mutate.link.deleteAccounts({ accountIds });
     setDeleting([]);
-  }
+  };
 
   const addAccount = () => {
     setIsAddOpen(true);
-  }
+  };
 
   return (
     <>
-
+      <Dialog.Provider
-      <Dialog.Provider visible={!deleting} close={() => setDeleting([])}>
+        visible={deleting.length > 0}
+        close={() => setDeleting([])}
+      >
         <Dialog.Content>
-          <Text style={{ fontFamily: 'mono' }}>Delete Account</Text>
+          <Text style={{ fontFamily: "mono" }}>Delete Account</Text>
-          <Text style={{ fontFamily: 'mono' }}> </Text>
+          <Text style={{ fontFamily: "mono" }}> </Text>
-          <Text style={{ fontFamily: 'mono' }}>You are about to delete the following accounts:</Text>
+          <Text style={{ fontFamily: "mono" }}>
+            You are about to delete the following accounts:
+          </Text>
 
           <View>
-            {deleting.map(account => <Text style={{ fontFamily: 'mono' }}>- {account.name}</Text>)}
+            {deleting.map((account) => (
+              <Text style={{ fontFamily: "mono" }}>- {account.name}</Text>
+            ))}
           </View>
 
-          <Text style={{ fontFamily: 'mono' }}> </Text>
+          <Text style={{ fontFamily: "mono" }}> </Text>
 
-          <View style={{ flexDirection: 'row' }}>
+          <View style={{ flexDirection: "row" }}>
-            <Button variant="secondary" onPress={() => { setDeleting([]); }}>Cancel (n)</Button>
+            <Button
+              variant="secondary"
+              onPress={() => {
+                setDeleting([]);
+              }}
+              shortcut="n"
+            >
+              Cancel
+            </Button>
 
-            <Text style={{ fontFamily: 'mono' }}> </Text>
+            <Text style={{ fontFamily: "mono" }}> </Text>
 
-            <Button variant="destructive" onPress={() => {
+            <Button
+              variant="destructive"
+              onPress={() => {
                 onDelete();
-              }}>Delete (y)</Button>
+              }}
+              shortcut="y"
+            >
+              Delete
+            </Button>
           </View>
         </Dialog.Content>
       </Dialog.Provider>
 
-
-
       <Dialog.Provider visible={isAddOpen} close={() => setIsAddOpen(false)}>
         <Dialog.Content>
-          <Text style={{ fontFamily: 'mono' }}>Add Account</Text>
+          <Text style={{ fontFamily: "mono" }}>Add Account</Text>
           <AddAccount />
         </Dialog.Content>
       </Dialog.Provider>
 
       <View style={{ padding: 10 }}>
-
         <View style={{ alignSelf: "flex-start" }}>
-          <Button shortcut="a" onPress={addAccount}>Add Account</Button>
+          <Button shortcut="a" onPress={addAccount}>
+            Add Account
+          </Button>
         </View>
 
-        <Text style={{ fontFamily: 'mono' }}> </Text>
+        <Text style={{ fontFamily: "mono" }}> </Text>
 
-        <Table.Provider columns={COLUMNS} data={items} onKey={(key, selected) => {
+        <Table.Provider
-          if (key.name == 'd') {
+          columns={COLUMNS}
+          data={items}
+          onKey={(key, selected) => {
+            if (key.name == "d") {
               setDeleting(selected);
             }
-        }}>
+          }}
+        >
           <Table.Body />
         </Table.Provider>
       </View>
@@ -97,34 +115,53 @@ export function Accounts() {
   );
 }
 
-
 function AddAccount() {
   const { auth } = use(RouterContext);
   const [link, details] = useQuery(queries.getPlaidLink(auth));
+  const { close } = use(Dialog.Context);
 
   const openLink = () => {
-    if (!link) return
+    if (!link) return;
     Linking.openURL(link.link);
-  }
+  };
 
   const z = useZero<Schema, Mutators>();
 
   useEffect(() => {
     console.log(link, details);
     if (details.type != "complete") return;
-    if (link != undefined) return;
+    if (link != undefined) {
-
+      if (!link.completeAt) {
+        const timer = setInterval(() => {
+          console.log("Checking for link");
+          z.mutate.link.get({ link_token: link.token });
+        }, 1000 * 5);
+        return () => clearInterval(timer);
+      } else {
+        if (close) close();
+        return;
+      }
+    }
     console.log("Creating new link");
     z.mutate.link.create();
   }, [link, details]);
 
   return (
     <>
-      {link ? <>
+      <Button onPress={() => close && close()}>close</Button>
-        <Text style={{ fontFamily: 'mono' }}>Please click the button to complete setup.</Text>
+      {link ? (
+        <>
+          <Text style={{ fontFamily: "mono" }}>
+            Please click the button to complete setup.
+          </Text>
 
-        <Button shortcut="return" onPress={openLink}>Open Plaid</Button>
+          <Button shortcut="return" onPress={openLink}>
-      </> : <Text style={{ fontFamily: 'mono' }}>Loading Plaid Link</Text>}
+            Open Plaid
+          </Button>
+        </>
+      ) : (
+        <Text style={{ fontFamily: "mono" }}>Loading Plaid Link</Text>
+      )}
     </>
   );
 }

packages/ui/src/settings/family.tsx

@@ -1,6 +1,5 @@
 import { Text } from "react-native";
 
 export function Family() {
-  return <Text style={{ fontFamily: 'mono' }}>Welcome to family</Text>
+  return <Text style={{ fontFamily: "mono" }}>Welcome to family</Text>;
 }
-

packages/ui/src/settings/general.tsx

@@ -1,7 +1,5 @@
 import { Text } from "react-native";
 
 export function General() {
-  return <Text style={{ fontFamily: 'mono' }}>Welcome to settings</Text>
+  return <Text style={{ fontFamily: "mono" }}>Welcome to settings</Text>;
 }
-
-

packages/ui/src/transactions.tsx

@@ -1,11 +1,10 @@
 import * as Table from "../components/Table";
 import { useQuery } from "@rocicorp/zero/react";
-import { queries, type Transaction } from '@money/shared';
+import { queries, type Transaction } from "@money/shared";
 import { use } from "react";
 import { View, Text } from "react-native";
 import { RouterContext } from ".";
 
-
 const FORMAT = new Intl.NumberFormat("en-US", {
   minimumFractionDigits: 2,
   maximumFractionDigits: 2,
@@ -14,15 +13,18 @@ const FORMAT = new Intl.NumberFormat("en-US", {
 export type Account = {
   name: string;
   createdAt: number;
-}
+};
 
 const COLUMNS: Table.Column[] = [
-  { name: 'createdAt', label: 'Date', render: (n) => new Date(n).toDateString() },
+  {
-  { name: 'amount', label: 'Amount' },
+    name: "createdAt",
-  { name: 'name', label: 'Name' },
+    label: "Date",
+    render: (n) => new Date(n).toDateString(),
+  },
+  { name: "amount", label: "Amount" },
+  { name: "name", label: "Name" },
 ];
 
-
 export function Transactions() {
   const { auth } = use(RouterContext);
   const [items] = useQuery(queries.allTransactions(auth));
@@ -38,7 +40,7 @@ export function Transactions() {
         <Selected />
       </View>
     </Table.Provider>
-  )
+  );
 }
 
 function Selected() {
@@ -46,8 +48,8 @@ function Selected() {
 
   if (selectedFrom == undefined)
     return (
-    <View style={{ backgroundColor: '#ddd' }}>
+      <View style={{ backgroundColor: "#ddd" }}>
-      <Text style={{ fontFamily: 'mono' }}>No items selected</Text>
+        <Text style={{ fontFamily: "mono" }}>No items selected</Text>
       </View>
     );
 
@@ -58,10 +60,11 @@ function Selected() {
   const sum = selected.reduce((prev, curr) => prev + curr.amount, 0);
 
   return (
-    <View style={{ backgroundColor: '#9f9' }}>
+    <View style={{ backgroundColor: "#9f9" }}>
-      <Text style={{ fontFamily: 'mono' }}>{count} transaction{count == 1 ? "" : "s"} selected | ${FORMAT.format(sum)}</Text>
+      <Text style={{ fontFamily: "mono" }}>
+        {count} transaction{count == 1 ? "" : "s"} selected | $
+        {FORMAT.format(sum)}
+      </Text>
     </View>
   );
 }
-
-

packages/ui/src/useKeyboard.ts

@@ -1,5 +1,8 @@
 import { useKeyboard as useOpentuiKeyboard } from "@opentui/react";
 
-export function useKeyboard(handler: Parameters<typeof useOpentuiKeyboard>[0], _deps: any[] = []) {
+export function useKeyboard(
+  handler: Parameters<typeof useOpentuiKeyboard>[0],
+  _deps: any[] = [],
+) {
   return useOpentuiKeyboard(handler);
 }

packages/ui/src/useKeyboard.web.ts

@@ -2,15 +2,17 @@ import { useEffect } from "react";
 import type { KeyboardEvent } from "react";
 import type { KeyEvent } from "@opentui/core";
 
-
 function convertName(keyName: string): string {
-  const result = keyName.toLowerCase()
+  const result = keyName.toLowerCase();
-  if (result == 'arrowdown') return 'down';
+  if (result == "arrowdown") return "down";
-  if (result == 'arrowup') return 'up';
+  if (result == "arrowup") return "up";
   return result;
 }
 
-export function useKeyboard(handler: (key: KeyEvent) => void, deps: any[] = []) {
+export function useKeyboard(
+  handler: (key: KeyEvent) => void,
+  deps: any[] = [],
+) {
   useEffect(() => {
     const handlerWeb = (event: KeyboardEvent) => {
       // @ts-ignore
@@ -20,10 +22,10 @@ export function useKeyboard(handler: (key: KeyEvent) => void, deps: any[] = [])
         meta: event.metaKey,
         shift: event.shiftKey,
         option: event.metaKey,
-        sequence: '',
+        sequence: "",
         number: false,
-        raw: '',
+        raw: "",
-        eventType: 'press',
+        eventType: "press",
         source: "raw",
         code: event.code,
         super: false,

scripts/reset-project.js

@@ -91,7 +91,7 @@ const moveDirectories = async (userInput) => {
         userInput === "y"
           ? `\n3. Delete the /${exampleDir} directory when you're done referencing it.`
           : ""
-      }`
+      }`,
     );
   } catch (error) {
     console.error(`❌ Error during script execution: ${error.message}`);
@@ -108,5 +108,5 @@ rl.question(
       console.log("❌ Invalid input. Please enter 'Y' or 'N'.");
       rl.close();
     }
-  }
+  },
 );

scripts/set-machine-name.ts

@@ -33,4 +33,3 @@ try {
   console.error("Failed to update .env.dev:", err);
   process.exit(1);
 }
-