1 files changed, 50 insertions, 0 deletions
diff --git a/packages/shared-react/providers/trpc-provider.tsx b/packages/shared-react/providers/trpc-provider.tsx
new file mode 100644
index 00000000..2cd8661b
--- /dev/null
+++ b/packages/shared-react/providers/trpc-provider.tsx
@@ -0,0 +1,50 @@
+import { useMemo } from "react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { httpBatchLink } from "@trpc/client";
+import superjson from "superjson";
+
+import { api } from "../trpc";
+
+interface Settings {
+  apiKey?: string;
+  address: string;
+}
+
+function getTRPCClient(settings: Settings) {
+  return api.createClient({
+    links: [
+      httpBatchLink({
+        url: `${settings.address}/api/trpc`,
+        headers() {
+          return {
+            Authorization: settings.apiKey
+              ? `Bearer ${settings.apiKey}`
+              : undefined,
+          };
+        },
+        transformer: superjson,
+      }),
+    ],
+  });
+}
+
+export function TRPCProvider({
+  settings,
+  children,
+}: {
+  settings: Settings;
+  children: React.ReactNode;
+}) {
+  const queryClient = useMemo(() => new QueryClient(), [settings]);
+  const trpcClient = useMemo(() => getTRPCClient(settings), [settings]);
+
+  return (
+    <api.Provider
+      key={settings.address}
+      client={trpcClient}
+      queryClient={queryClient}
+    >
+      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+    </api.Provider>
+  );
+}