realproject7 · realproject7 · Mar 14, 2026 · Mar 14, 2026 · Mar 14, 2026
diff --git a/lib/wagmi.ts b/lib/wagmi.ts
@@ -0,0 +1,27 @@
+import { http, createConfig } from "wagmi";
+import { base, baseSepolia } from "wagmi/chains";
+import { injected } from "wagmi/connectors";
+
+export const config = createConfig({
+  chains: [base, baseSepolia],
+  connectors: [injected()],
+  transports: {
+    [base.id]: http(
+      process.env.NEXT_PUBLIC_CHAIN_ID === "8453"
+        ? process.env.NEXT_PUBLIC_RPC_URL
+        : undefined,
+    ),
+    [baseSepolia.id]: http(
+      process.env.NEXT_PUBLIC_CHAIN_ID !== "8453"
+        ? process.env.NEXT_PUBLIC_RPC_URL
+        : undefined,
+    ),
+  },
+  ssr: true,
+});
+
+declare module "wagmi" {
+  interface Register {
+    config: typeof config;
+  }
+}
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -13,10 +13,12 @@
   "dependencies": {
     "@aws-sdk/client-s3": "^3.1009.0",
     "@supabase/supabase-js": "^2.99.1",
+    "@tanstack/react-query": "^5.90.21",
     "next": "16.1.6",
     "react": "19.2.3",
     "react-dom": "19.2.3",
-    "viem": "^2.47.2"
+    "viem": "^2.47.2",
+    "wagmi": "^3.5.0"
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4",

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,5 +1,6 @@
 import type { Metadata } from "next";
 import { Geist_Mono } from "next/font/google";
+import { Providers } from "./providers";
 import "./globals.css";
 
 const geistMono = Geist_Mono({
@@ -19,7 +20,9 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body className={`${geistMono.variable} antialiased`}>{children}</body>
+      <body className={`${geistMono.variable} antialiased`}>
+        <Providers>{children}</Providers>
+      </body>
     </html>
   );
 }
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,6 +1,11 @@
+import { ConnectWallet } from "@/components/ConnectWallet";
+
 export default function Home() {
   return (
     <div className="flex min-h-screen flex-col items-center justify-center px-6">
+      <header className="fixed top-0 right-0 p-4">
+        <ConnectWallet />
+      </header>
       <main className="flex flex-col items-center gap-6 text-center">
         <h1 className="text-accent text-2xl font-bold tracking-tight">
           PlotLink

diff --git a/src/app/providers.tsx b/src/app/providers.tsx
@@ -0,0 +1,16 @@
+"use client";
+
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { WagmiProvider } from "wagmi";
+import { config } from "../../lib/wagmi";
+import { useState } from "react";
+
+export function Providers({ children }: { children: React.ReactNode }) {
+  const [queryClient] = useState(() => new QueryClient());
+
+  return (
+    <WagmiProvider config={config}>
+      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+    </WagmiProvider>
+  );
+}
diff --git a/src/components/ConnectWallet.tsx b/src/components/ConnectWallet.tsx
@@ -0,0 +1,40 @@
+"use client";
+
+import { useAccount, useConnect, useDisconnect } from "wagmi";
+import { injected } from "wagmi/connectors";
+
+function truncateAddress(address: string): string {
+  return `${address.slice(0, 6)}...${address.slice(-4)}`;
+}
+
+export function ConnectWallet() {
+  const { address, isConnected } = useAccount();
+  const { connect, isPending } = useConnect();
+  const { disconnect } = useDisconnect();
+
+  if (isConnected && address) {
+    return (
+      <div className="border-border flex items-center gap-3 rounded border px-3 py-2 text-sm">
+        <span className="text-accent font-medium">
+          {truncateAddress(address)}
+        </span>
+        <button
+          onClick={() => disconnect()}
+          className="text-muted hover:text-error transition-colors"
+        >
+          disconnect
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <button
+      onClick={() => connect({ connector: injected() })}
+      disabled={isPending}
+      className="border-accent text-accent hover:bg-accent hover:text-background rounded border px-4 py-2 text-sm transition-colors disabled:opacity-50"
+    >
+      {isPending ? "connecting..." : "connect wallet"}
+    </button>
+  );
+}