mobile: Add support for app settings

3 files changed, 90 insertions, 0 deletions

diff --git a/packages/mobile/lib/providers.tsx b/packages/mobile/lib/providers.tsx
new file mode 100644
index 00000000..d5638da8
--- /dev/null
+++ b/packages/mobile/lib/providers.tsx
@@ -0,0 +1,47 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { httpBatchLink } from "@trpc/client";
+import { useEffect, useState } from "react";
+import superjson from "superjson";
+
+import useAppSettings, { getAppSettings } from "./settings";
+import { api } from "./trpc";
+
+function getTRPCClient(address: string) {
+  return api.createClient({
+    links: [
+      httpBatchLink({
+        url: `${address}/api/trpc`,
+        async headers() {
+          const settings = await getAppSettings();
+          return {
+            Authorization: settings ? `Bearer ${settings.apiKey}` : undefined,
+          };
+        },
+        transformer: superjson,
+      }),
+    ],
+  });
+}
+
+export function Providers({ children }: { children: React.ReactNode }) {
+  const { settings } = useAppSettings();
+  const [queryClient] = useState(() => new QueryClient());
+
+  const [trpcClient, setTrpcClient] = useState<
+    ReturnType<typeof getTRPCClient>
+  >(getTRPCClient(settings.address));
+
+  useEffect(() => {
+    setTrpcClient(getTRPCClient(settings.address));
+  }, [settings.address]);
+
+  return (
+    <api.Provider
+      key={settings.address}
+      client={trpcClient}
+      queryClient={queryClient}
+    >
+      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+    </api.Provider>
+  );
+}
diff --git a/packages/mobile/lib/settings.ts b/packages/mobile/lib/settings.ts
new file mode 100644
index 00000000..85296cfa
--- /dev/null
+++ b/packages/mobile/lib/settings.ts
@@ -0,0 +1,39 @@
+import * as SecureStore from "expo-secure-store";
+import { useEffect, useState } from "react";
+
+const SETTING_NAME = "settings";
+
+export type Settings = {
+  apiKey: string;
+  address: string;
+};
+
+export default function useAppSettings() {
+  const [settings, setSettings] = useState<Settings>({
+    apiKey: "",
+    address: "",
+  });
+
+  useEffect(() => {
+    SecureStore.setItemAsync(SETTING_NAME, JSON.stringify(settings));
+  }, [settings]);
+
+  useEffect(() => {
+    SecureStore.getItemAsync(SETTING_NAME).then((val) => {
+      if (!val) {
+        return;
+      }
+      setSettings(JSON.parse(val));
+    });
+  }, []);
+
+  return { settings, setSettings };
+}
+
+export async function getAppSettings() {
+  const val = await SecureStore.getItemAsync(SETTING_NAME);
+  if (!val) {
+    return null;
+  }
+  return JSON.parse(val) as Settings;
+}
diff --git a/packages/mobile/lib/trpc.ts b/packages/mobile/lib/trpc.ts
new file mode 100644
index 00000000..6b428bd9
--- /dev/null
+++ b/packages/mobile/lib/trpc.ts
@@ -0,0 +1,4 @@
+import type { AppRouter } from "@hoarder/trpc/routers/_app";
+import { createTRPCReact } from "@trpc/react-query";
+
+export const api = createTRPCReact<AppRouter>();