setup connectkit

gnosisguild · Oct 1, 2024 · 4dbcc16 · 4dbcc16
1 parent 3ab0209
commit 4dbcc16
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 27 deletions.
diff --git a/example-app/app/config.ts b/example-app/app/config.ts
@@ -0,0 +1,15 @@
+import { getDefaultConfig } from "connectkit";
+import { createConfig, http } from "wagmi";
+import { mainnet } from "wagmi/chains";
+
+export const config = (projectId: string) =>
+  createConfig(
+    getDefaultConfig({
+      appName: "Zodiac Pilot Example App",
+      walletConnectProjectId: projectId,
+      chains: [mainnet],
+      transports: {
+        [mainnet.id]: http(),
+      },
+    })
+  );
diff --git a/example-app/app/root.jsx b/example-app/app/root.jsx
diff --git a/example-app/app/root.tsx b/example-app/app/root.tsx
@@ -0,0 +1,35 @@
+import { json, Links, Meta, Scripts, useLoaderData } from "@remix-run/react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { ConnectKitButton, ConnectKitProvider } from "connectkit";
+import { WagmiProvider } from "wagmi";
+import { config } from "./config";
+
+export const loader = () => json({ projectId: process.env.PROJECT_ID });
+
+export const queryClient = new QueryClient();
+
+export default function App() {
+  const { projectId } = useLoaderData<typeof loader>();
+
+  return (
+    <html>
+      <head>
+        <link rel="icon" href="data:image/x-icon;base64,AA" />
+        <Meta />
+        <Links />
+      </head>
+      <body>
+        <WagmiProvider config={config(projectId)}>
+          <QueryClientProvider client={queryClient}>
+            <ConnectKitProvider>
+              <h1>Hello world!</h1>
+              <ConnectKitButton />
+            </ConnectKitProvider>
+          </QueryClientProvider>
+        </WagmiProvider>
+
+        <Scripts />
+      </body>
+    </html>
+  );
+}