fix: remove mintDemoWrapper, correctly place avatar

examples/ui-demo/src/app/page.tsx

@@ -8,6 +8,8 @@ import { AuthCardWrapper } from "../components/preview/AuthCardWrapper";
 import { CodePreview } from "../components/preview/CodePreview";
 import { CodePreviewSwitch } from "../components/shared/CodePreviewSwitch";
 import { TopNav } from "../components/topnav/TopNav";
+import { UserConnectionAvatarWithPopover } from "@/components/shared/user-connection-avatar/UserConnectionAvatarWithPopover";
+import { useUser } from "@account-kit/react";
 
 const publicSans = Public_Sans({
   subsets: ["latin"],
@@ -21,7 +23,7 @@ const inter = Inter({
 
 export default function Home() {
   const [showCode, setShowCode] = useState(false);
-
+  const user = useUser();
   return (
     <main
       className={`flex bg-gray-50 flex-col h-screen ${publicSans.className}`}
@@ -38,14 +40,23 @@ export default function Home() {
 
           <div className="flex flex-col flex-[2] basis-0 relative bg-white border border-border rounded-lg overflow-hidden">
             {/* Code toggle header */}
-            <div className="sticky h-7 top-4 flex items-center justify-end pr-4 gap-2 z-10">
-              <div className="bg-purple-50 text-[#8B5CF6] px-2 py-1 rounded text-xs font-semibold">
-                Code preview
+            <div
+              className={`sticky h-7 top-4 flex items-center ${
+                !user || showCode ? "justify-end" : "justify-between"
+              } p-6 z-10`}
+            >
+              {!showCode && (
+                <UserConnectionAvatarWithPopover deploymentStatus={true} />
+              )}
+              <div className="flex gap-2">
+                <div className="bg-purple-50 text-[#8B5CF6] px-2 py-1 rounded text-xs font-semibold">
+                  Code preview
+                </div>
+                <CodePreviewSwitch
+                  checked={showCode}
+                  onCheckedChange={setShowCode}
+                />
               </div>
-              <CodePreviewSwitch
-                checked={showCode}
-                onCheckedChange={setShowCode}
-              />
             </div>
 
             {/* Don't unmount when showing code preview so that the auth card retains its state */}

examples/ui-demo/src/components/preview/AuthCardWrapper.tsx

@@ -1,43 +1,29 @@
 import { useConfig } from "@/app/state";
 import { cn } from "@/lib/utils";
-import {
-  AuthCard,
-  useLogout,
-  useUser,
-} from "@account-kit/react";
-import { MintDemoWrapper } from "./MintDemoWrapper";
+import { AuthCard, useUser } from "@account-kit/react";
+import { MintCard } from "../shared/MintCard";
 
 export function AuthCardWrapper({ className }: { className?: string }) {
   const user = useUser();
   const { config } = useConfig();
-  const { logout } = useLogout();
   return (
     <div
       className={cn(
         "flex flex-1 flex-col justify-center items-center overflow-auto relative",
         config.ui.theme === "dark" ? "bg-black/70" : "bg-white",
-        user ? "justify-start pt-[180px]" : '',
+        user ? "justify-start pt-[180px]" : "",
         className
       )}
     >
-      {
-        !user ? (
-            <div className="flex flex-col gap-2 w-[368px]">
-              <div className="modal bg-surface-default shadow-md overflow-hidden">
-                <AuthCard />
-              </div>
-            </div>
-        ) : <MintDemoWrapper />
-      }
-      {user && (
-        <button
-          className="text-primary font-semibold text-sm px-3 py-[11px] bg-white border border-gray-300 rounded-lg hover:shadow-md"
-          onClick={() => {
-            logout();
-          }}
-        >
-          Logout
-        </button>)} 
+      {!user ? (
+        <div className="flex flex-col gap-2 w-[368px]">
+          <div className="modal bg-surface-default shadow-md overflow-hidden">
+            <AuthCard />
+          </div>
+        </div>
+      ) : (
+        <MintCard />
+      )}
     </div>
   );
 }