feat: Show connected wallet address in sidebar

components/app-sidebar.tsx

@@ -68,7 +68,7 @@ export function AppSidebar({ user }: { user: User | undefined }) {
       <SidebarContent>
         <SidebarHistory user={user} />
       </SidebarContent>
-      <SidebarFooter>{user && <SidebarUserNav user={user} />}</SidebarFooter>
+      <SidebarFooter>{user && <SidebarUserNav />}</SidebarFooter>
     </Sidebar>
   );
 }

components/appkit-account-button.tsx

@@ -0,0 +1,3 @@
+export default function AppkitAccountButton() {
+  return <appkit-account-button balance="hide" />;
+}

components/appkit-button.tsx

@@ -0,0 +1,3 @@
+export default function AppkitButton() {
+  return <appkit-button />;
+}

components/chat-header.tsx

@@ -1,15 +1,16 @@
-"use client";
+'use client';
 
-import { useRouter } from "next/navigation";
-import { useWindowSize } from "usehooks-ts";
+import { useRouter } from 'next/navigation';
+import { memo } from 'react';
+import { useWindowSize } from 'usehooks-ts';
 
-import { SidebarToggle } from "@/components/sidebar-toggle";
-import { Button } from "@/components/ui/button";
-import { PlusIcon } from "./icons";
-import { useSidebar } from "./ui/sidebar";
-import { memo } from "react";
-import { Tooltip, TooltipContent, TooltipTrigger } from "./ui/tooltip";
-import ConnectButton from "./connect-button";
+import { SidebarToggle } from '@/components/sidebar-toggle';
+import { Button } from '@/components/ui/button';
+
+import AppkitButton from './appkit-button';
+import { PlusIcon } from './icons';
+import { useSidebar } from './ui/sidebar';
+import { Tooltip, TooltipContent, TooltipTrigger } from './ui/tooltip';
 
 function PureChatHeader() {
   const router = useRouter();
@@ -28,7 +29,7 @@ function PureChatHeader() {
               variant="outline"
               className="order-2 md:order-1 md:px-2 px-2 md:h-fit ml-auto md:ml-0"
               onClick={() => {
-                router.push("/");
+                router.push('/');
                 router.refresh();
               }}
             >
@@ -41,7 +42,7 @@ function PureChatHeader() {
       )}
 
       <div className="order-4 m-4 md:ml-auto">
-        <ConnectButton />
+        <AppkitButton />
       </div>
     </header>
   );

components/sidebar-user-nav.tsx

@@ -1,68 +1,23 @@
 'use client';
-import { ChevronUp } from 'lucide-react';
-import Image from 'next/image';
-import type { User } from 'next-auth';
-import { signOut } from 'next-auth/react';
-import { useTheme } from 'next-themes';
 
 import {
   DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
   DropdownMenuTrigger,
 } from '@/components/ui/dropdown-menu';
-import {
-  SidebarMenu,
-  SidebarMenuButton,
-  SidebarMenuItem,
-} from '@/components/ui/sidebar';
+import { SidebarMenu, SidebarMenuItem } from '@/components/ui/sidebar';
 
-export function SidebarUserNav({ user }: { user: User }) {
-  const { setTheme, theme } = useTheme();
+import AppkitAccountButton from './appkit-account-button';
 
+export function SidebarUserNav() {
   return (
     <SidebarMenu>
       <SidebarMenuItem>
         <DropdownMenu>
           <DropdownMenuTrigger asChild>
-            <SidebarMenuButton className="data-[state=open]:bg-sidebar-accent bg-background data-[state=open]:text-sidebar-accent-foreground h-10">
-              <Image
-                src={`https://avatar.vercel.sh/${user.email}`}
-                alt={user.email ?? 'User Avatar'}
-                width={24}
-                height={24}
-                className="rounded-full"
-              />
-              <span className="truncate">{user?.email}</span>
-              <ChevronUp className="ml-auto" />
-            </SidebarMenuButton>
+            <div className="flex justify-center w-full p-1">
+              <AppkitAccountButton />
+            </div>
           </DropdownMenuTrigger>
-          <DropdownMenuContent
-            side="top"
-            className="w-[--radix-popper-anchor-width]"
-          >
-            <DropdownMenuItem
-              className="cursor-pointer"
-              onSelect={() => setTheme(theme === 'dark' ? 'light' : 'dark')}
-            >
-              {`Toggle ${theme === 'light' ? 'dark' : 'light'} mode`}
-            </DropdownMenuItem>
-            <DropdownMenuSeparator />
-            <DropdownMenuItem asChild>
-              <button
-                type="button"
-                className="w-full cursor-pointer"
-                onClick={() => {
-                  signOut({
-                    redirectTo: '/',
-                  });
-                }}
-              >
-                Sign out
-              </button>
-            </DropdownMenuItem>
-          </DropdownMenuContent>
         </DropdownMenu>
       </SidebarMenuItem>
     </SidebarMenu>