Set up wagmi + rainbowkit.

README.md

@@ -1,3 +1,10 @@
+## Setup
+1. Add dependencies
+```
+yarn add @rainbow-me/rainbowkit@latest
+```
+
+
 <a href="https://chat.vercel.ai/">
   <img alt="Next.js 13 and app template Router-ready AI chatbot." src="https://chat.vercel.ai/opengraph-image.png" />
   <h1 align="center">Next.js AI Chatbot</h1>

app/api/chat/route.ts

@@ -7,7 +7,7 @@ import { Database } from '@/lib/db_types'
 import { auth } from '@/auth'
 import { nanoid } from '@/lib/utils'
 
-export const runtime = 'edge'
+export const runtime = 'nodejs'
 
 const configuration = new Configuration({
   apiKey: process.env.OPENAI_API_KEY

app/chat/[id]/page.tsx

@@ -5,7 +5,7 @@ import { auth } from '@/auth'
 import { getChat } from '@/app/actions'
 import { Chat } from '@/components/chat'
 
-export const runtime = 'edge'
+export const runtime = 'nodejs'
 export const preferredRegion = 'home'
 
 export interface ChatPageProps {

app/layout.tsx

@@ -3,6 +3,7 @@ import { Metadata } from 'next'
 import { Toaster } from 'react-hot-toast'
 
 import '@/app/globals.css'
+import '@rainbow-me/rainbowkit/styles.css';
 import { fontMono, fontSans } from '@/lib/fonts'
 import { cn } from '@/lib/utils'
 import { TailwindIndicator } from '@/components/tailwind-indicator'
@@ -53,4 +54,4 @@ export default function RootLayout({ children }: RootLayoutProps) {
       </body>
     </html>
   )
-}
+}

app/page.tsx

@@ -1,7 +1,7 @@
 import { nanoid } from '@/lib/utils'
 import { Chat } from '@/components/chat'
 
-export const runtime = 'edge'
+export const runtime = 'nodejs'
 
 export default function IndexPage() {
   const id = nanoid()

app/share/[id]/page.tsx

@@ -6,7 +6,7 @@ import { getSharedChat } from '@/app/actions'
 import { ChatList } from '@/components/chat-list'
 import { FooterText } from '@/components/footer'
 
-export const runtime = 'edge'
+export const runtime = 'nodejs'
 export const preferredRegion = 'home'
 
 interface SharePageProps {

app/sign-in/page.tsx

@@ -11,6 +11,7 @@ export default async function SignInPage() {
   return (
     <div className="flex h-[calc(100vh-theme(spacing.16))] items-center justify-center py-10">
       <LoginButton />
+      <p>MetaMask auth to login</p>
     </div>
   )
 }

components/header.tsx

@@ -1,23 +1,22 @@
 import * as React from 'react'
 import Link from 'next/link'
 
-import { cn } from '@/lib/utils'
 import { auth } from '@/auth'
 import { clearChats } from '@/app/actions'
 import { Button, buttonVariants } from '@/components/ui/button'
 import { Sidebar } from '@/components/sidebar'
 import { SidebarList } from '@/components/sidebar-list'
 import {
-  IconGitHub,
   IconNextChat,
   IconSeparator,
-  IconVercel
 } from '@/components/ui/icons'
 import { SidebarFooter } from '@/components/sidebar-footer'
 import { ThemeToggle } from '@/components/theme-toggle'
 import { ClearHistory } from '@/components/clear-history'
 import { UserMenu } from '@/components/user-menu'
 
+import { Profile } from '@/components/profile'
+
 export async function Header() {
   const session = await auth()
   return (
@@ -52,24 +51,7 @@ export async function Header() {
         </div>
       </div>
       <div className="flex items-center justify-end space-x-2">
-        <a
-          target="_blank"
-          href="https://github.com/thorwebdev/vercel-ai-chatbot"
-          rel="noopener noreferrer"
-          className={cn(buttonVariants({ variant: 'outline' }))}
-        >
-          <IconGitHub />
-          <span className="hidden ml-2 md:flex">GitHub</span>
-        </a>
-        <a
-          href="https://github.com/thorwebdev/vercel-ai-chatbot"
-          target="_blank"
-          className={cn(buttonVariants())}
-        >
-          <IconVercel className="mr-2" />
-          <span className="hidden sm:block">Deploy to Vercel</span>
-          <span className="sm:hidden">Deploy</span>
-        </a>
+        <Profile />
       </div>
     </header>
   )

components/profile.tsx

@@ -0,0 +1,11 @@
+'use client'
+
+import { ConnectButton } from '@rainbow-me/rainbowkit';
+
+export function Profile() {
+  return (
+    <div>
+      <ConnectButton />
+    </div>
+  )
+}

components/providers.tsx

@@ -1,15 +1,80 @@
-'use client'
+'use client';
 
-import * as React from 'react'
+import * as React from 'react';
 import { ThemeProvider as NextThemesProvider } from 'next-themes'
 import { ThemeProviderProps } from 'next-themes/dist/types'
-
 import { TooltipProvider } from '@/components/ui/tooltip'
 
+import {
+  RainbowKitProvider,
+  getDefaultWallets,
+  connectorsForWallets,
+} from '@rainbow-me/rainbowkit';
+import {
+  argentWallet,
+  trustWallet,
+  ledgerWallet,
+} from '@rainbow-me/rainbowkit/wallets';
+import { configureChains, createConfig, WagmiConfig } from 'wagmi';
+import {
+  mainnet,
+  polygon,
+  goerli,
+} from 'wagmi/chains';
+import { publicProvider } from 'wagmi/providers/public';
+
+const { chains, publicClient, webSocketPublicClient } = configureChains(
+  [
+    mainnet,
+    polygon,
+    ...(process.env.NEXT_PUBLIC_ENABLE_TESTNETS === 'true' ? [goerli] : []),
+  ],
+  [publicProvider()]
+);
+
+const projectId = process.env.NEXT_PUBLIC_WC2_PROJECT_ID || '';
+
+const { wallets } = getDefaultWallets({
+  appName: 'RainbowKit demo',
+  projectId,
+  chains,
+});
+
+const demoAppInfo = {
+  appName: 'Rainbowkit Demo',
+};
+
+const connectors = connectorsForWallets([
+  ...wallets,
+  {
+    groupName: 'Other',
+    wallets: [
+      argentWallet({ projectId, chains }),
+      trustWallet({ projectId, chains }),
+      ledgerWallet({ projectId, chains }),
+    ],
+  },
+]);
+
+const wagmiConfig = createConfig({
+  autoConnect: true,
+  connectors,
+  publicClient,
+  webSocketPublicClient,
+});
+
 export function Providers({ children, ...props }: ThemeProviderProps) {
+  const [mounted, setMounted] = React.useState(false);
+  React.useEffect(() => setMounted(true), []);
   return (
     <NextThemesProvider {...props}>
-      <TooltipProvider>{children}</TooltipProvider>
+      <TooltipProvider>
+        <WagmiConfig config={wagmiConfig}>
+          <RainbowKitProvider chains={chains} appInfo={demoAppInfo}>
+            {mounted && children}
+          </RainbowKitProvider>
+          </WagmiConfig>
+      </TooltipProvider>
     </NextThemesProvider>
-  )
+  );
 }

next.config.js

@@ -2,7 +2,13 @@
 module.exports = {
   reactStrictMode: true,
   experimental: {
-    serverActions: true
+    serverActions: true,
+    appDir: true
+  },
+  webpack: config => {
+    config.resolve.fallback = { fs: false, net: false, tls: false };
+    config.externals.push('pino-pretty', 'lokijs', 'encoding');
+    return config;
   },
   images: {
     remotePatterns: [

package.json

@@ -23,12 +23,13 @@
     "@radix-ui/react-slot": "^1.0.2",
     "@radix-ui/react-switch": "^1.0.3",
     "@radix-ui/react-tooltip": "^1.0.6",
+    "@rainbow-me/rainbowkit": "^1.0.6",
     "@supabase/auth-helpers-nextjs": "^0.7.2",
     "@supabase/supabase-js": "^2.26.0",
     "@vercel/analytics": "^1.0.1",
     "@vercel/og": "^0.5.7",
     "ai": "^2.1.6",
-    "class-variance-authority": "^0.4.0",
+    "class-variance-authority": "^0.6.1",
     "clsx": "^1.2.1",
     "focus-trap-react": "^10.1.1",
     "nanoid": "^4.0.2",
@@ -43,7 +44,9 @@
     "react-syntax-highlighter": "^15.5.0",
     "react-textarea-autosize": "^8.4.1",
     "remark-gfm": "^3.0.1",
-    "remark-math": "^5.1.1"
+    "remark-math": "^5.1.1",
+    "viem": "~1.2.9",
+    "wagmi": "1.3.8"
   },
   "devDependencies": {
     "@tailwindcss/typography": "^0.5.9",