fix: clean up / refactor demo app

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

@@ -1,25 +1,14 @@
 "use client";
 
-import { Authentication } from "@/components/configuration/Authentication";
-import { Styling } from "@/components/configuration/Styling";
-import { MobileSplashPage } from "@/components/preview/MobileSplashPage";
-import {
-  EOAPostLoginActions,
-  EOAPostLoginContents,
-} from "@/components/shared/eoa-post-login/EOAPostLoginContents";
-import ExternalLink from "@/components/shared/ExternalLink";
-import { MintCard } from "@/components/shared/mint-card/MintCard";
-import { RenderUserConnectionAvatar } from "@/components/shared/user-connection-avatar/RenderUserConnectionAvatar";
-import { cn } from "@/lib/utils";
-import { Metrics } from "@/metrics";
-import { useTheme } from "@/state/useTheme";
-import { useUser } from "@account-kit/react";
+import { ConfigurationWrapper } from "@/components/configuration/ConfigurationWrapper";
 import { Inter, Public_Sans } from "next/font/google";
 import { useState } from "react";
-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 { ContentNav } from "@/components/content/ContentNav";
+import { ContentWrapper } from "@/components/content/ContentWrapper";
+import { cn } from "@/lib/utils";
+import { useTheme } from "@/state/useTheme";
+import { useUser } from "@account-kit/react";
 
 const publicSans = Public_Sans({
   subsets: ["latin"],
@@ -33,115 +22,30 @@ const inter = Inter({
 
 export default function Home() {
   const [showCode, setShowCode] = useState(false);
-  const user = useUser();
   const theme = useTheme();
-  const isEOAUser = user?.type === "eoa";
-
+  const user = useUser();
   return (
     <main
       className={`flex flex-col h-auto lg:bg-bg-main min-h-screen lg:min-h-0 lg:h-screen ${publicSans.className} bg-cover bg-center overflow-hidden`}
     >
       <TopNav />
       <div
-        className={`flex flex-col flex-1 xl:px-6 lg:px-10 lg:py-6 w-full max-w-screen-2xl mx-auto overflow-hidden overflow-x-hidden ${inter.className} lg:overflow-hidden`}
+        className={`flex flex-col flex-1 xl:px-6 lg:px-10 lg:py-6 w-full max-w-screen-2xl mx-auto overflow-hidden overflow-x-hidden ${inter.className} lg:overflow-hidden mt-[74px] lg:mt-0`}
       >
-        <div className="hidden lg:flex flex-1 gap-6 overflow-hidden">
-          <div className=" flex-col w-[272px] lg:w-[392px] bg-white border border-border rounded-lg p-6 overflow-y-auto scrollbar-none gap-10">
-            <Authentication />
-            <Styling />
-          </div>
-
+        <div className="flex flex-1 justify-center gap-6 overflow-hidden">
+          <ConfigurationWrapper />
           <div
-            className={
-              "flex flex-col flex-[2] basis-0 relative bg-white border border-border rounded-lg overflow-hidden overflow-y-auto scrollbar-none"
-            }
+            className={cn(
+              "flex flex-col lg:flex-1 relative border border-border rounded-lg overflow-hidden overflow-y-auto scrollbar-none mb-6 lg:mb-0 w-full lg:w-auto m-6 lg:m-0",
+              theme === "dark" ? "bg-demo-bg-darkmode" : "bg-white",
+              showCode && "bg-white",
+              !user && "border-none lg:border-solid"
+            )}
           >
-            {/* Code toggle header */}
-            <div
-              className={cn(
-                "absolute top-6 right-6 z-10",
-                showCode && "hidden",
-                user && "hidden"
-              )}
-            >
-              <CodePreviewSwitch
-                checked={showCode}
-                onCheckedChange={setShowCode}
-              />
-            </div>
-            <div
-              className={cn(
-                ` w-full p-6 top-0 left-0 border-b border-border z-10`,
-                !user && !showCode && "hidden",
-                showCode ? "sticky" : "absolute",
-                theme === "dark"
-                  ? showCode
-                    ? "bg-white"
-                    : "bg-demo-bg-darkmode"
-                  : "bg-white"
-              )}
-            >
-              <div
-                className={cn(
-                  "flex justify-between items-start",
-
-                  !showCode && !user && "justify-end"
-                )}
-              >
-                {!showCode && user && <RenderUserConnectionAvatar />}
-                {showCode && (
-                  <div className="font-semibold text-foreground text-xl">
-                    Export configuration
-                  </div>
-                )}
-
-                <CodePreviewSwitch
-                  checked={showCode}
-                  onCheckedChange={setShowCode}
-                />
-              </div>
-              {showCode && (
-                <p className="text-sm text-demo-fg-secondary max-w-[85%]">
-                  To get started, simply paste the below code into your
-                  environment. You&apos;ll need to add your Alchemy API key and
-                  Gas Policy ID.{" "}
-                  <ExternalLink
-                    onClick={() =>
-                      Metrics.trackEvent({
-                        name: "codepreview_theme_customization_clicked",
-                      })
-                    }
-                    href="https://accountkit.alchemy.com/react/customization/theme"
-                    className="font-semibold text-blue-600"
-                  >
-                    Fully customize styling here.
-                  </ExternalLink>
-                </p>
-              )}
-            </div>
-
-            {/* Don't unmount when showing code preview so that the auth card retains its state */}
-            <AuthCardWrapper
-              className={cn(showCode && "hidden", !user ? "mt-0" : "mt-24")}
-            />
-            {showCode && <CodePreview />}
+            <ContentNav showCode={showCode} setShowCode={setShowCode} />
+            <ContentWrapper showCode={showCode} />
           </div>
         </div>
-        <div className="flex flex-1 flex-col gap-6 p-6 pt-24 overflow-auto scrollbar-none lg:hidden">
-          {!user && <MobileSplashPage />}
-          {isEOAUser && (
-            <div className="flex flex-1 flex-col">
-              <div className="border-border border radius-2 px-6 py-6  bg-bg-surface-default">
-                <RenderUserConnectionAvatar />
-                <div className="pt-6 max-w-96 mx-auto">
-                  <EOAPostLoginContents />
-                  <EOAPostLoginActions />
-                </div>
-              </div>
-            </div>
-          )}
-          {user && !isEOAUser && <MintCard />}
-        </div>
       </div>
     </main>
   );

examples/ui-demo/src/components/configuration/ConfigurationWrapper.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import { Authentication } from "./Authentication";
+import { Styling } from "./Styling";
+
+export function ConfigurationWrapper() {
+  return (
+    <div className="hidden lg:block w-[272px] lg:w-[392px] bg-white border border-border rounded-lg p-6 overflow-y-auto scrollbar-none">
+      <Authentication />
+      <Styling />
+    </div>
+  );
+}

examples/ui-demo/src/components/configuration/Styling.tsx

@@ -9,8 +9,8 @@ import { ColorPicker } from "./ColorPicker";
 import { PhotoUploads } from "./PhotoUpload";
 
 import { Metrics } from "@/metrics";
-import { CornerRadiusOptions } from "./components/CornerRadiusOptions";
-import { IllustrationStyleOptions } from "./components/IllustrationStyleOptions";
+import { CornerRadiusOptions } from "./CornerRadiusOptions";
+import { IllustrationStyleOptions } from "./IllustrationStyleOptions";
 
 export function Styling({ className }: { className?: string }) {
   const { logo, setSupportUrl, setTheme, supportUrl, theme } = useConfigStore(

examples/ui-demo/src/components/content/ContentNav.tsx

@@ -0,0 +1,57 @@
+import { cn } from "@/lib/utils";
+import { RenderUserConnectionAvatar } from "../user-connection-avatar/RenderUserConnectionAvatar";
+import { useUser } from "@account-kit/react";
+import ExternalLink from "@/components/shared/ExternalLink";
+import { Metrics } from "@/metrics";
+import { CodePreviewSwitch } from "@/components/shared/CodePreviewSwitch";
+export function ContentNav({
+  showCode,
+  setShowCode,
+}: {
+  showCode: boolean;
+  setShowCode: (showCode: boolean) => void;
+}) {
+  const user = useUser();
+  return (
+    <div
+      className={cn(
+        `w-full p-6 top-0 left-0 border-border z-10 relative lg:sticky lg:after:hidden after:content-[''] after:absolute after:bottom-0 after:left-6 after:right-6 after:h-[1px] after:bg-border`,
+        !user && !showCode && "hidden lg:block lg:absolute",
+        (user || showCode) && "lg:border-b"
+      )}
+    >
+      <div
+        className={cn(
+          "flex justify-between items-start",
+          !showCode && !user && "justify-end"
+        )}
+      >
+        {!showCode && user && <RenderUserConnectionAvatar />}
+        {showCode && (
+          <div className="font-semibold text-foreground text-xl">
+            Export configuration
+          </div>
+        )}
+
+        <CodePreviewSwitch checked={showCode} onCheckedChange={setShowCode} />
+      </div>
+      {showCode && (
+        <p className="text-sm text-demo-fg-secondary max-w-[85%]">
+          To get started, simply paste the below code into your environment.
+          You&apos;ll need to add your Alchemy API key and Gas Policy ID.{" "}
+          <ExternalLink
+            onClick={() =>
+              Metrics.trackEvent({
+                name: "codepreview_theme_customization_clicked",
+              })
+            }
+            href="https://accountkit.alchemy.com/react/customization/theme"
+            className="font-semibold text-blue-600"
+          >
+            Fully customize styling here.
+          </ExternalLink>
+        </p>
+      )}
+    </div>
+  );
+}

examples/ui-demo/src/components/content/ContentWrapper.tsx

@@ -0,0 +1,79 @@
+import { cn } from "@/lib/utils";
+import { CodePreview } from "../preview/CodePreview";
+import { AuthCard, useUser, useAuthContext } from "@account-kit/react";
+
+import { MobileSplashPage } from "../preview/MobileSplashPage";
+import { EOAPostLogin } from "../eoa-post-login/EOAPostLogin";
+import { MintCard } from "../mint-card/MintCard";
+import { useState, useEffect } from "react";
+
+export function ContentWrapper({ showCode }: { showCode: boolean }) {
+  return (
+    <>
+      {/* Don't unmount when showing code preview so that the auth card retains its state */}
+      <div
+        className={cn(
+          "flex flex-col flex-1 overflow-y-auto scrollbar-none relative lg:p-6",
+          showCode && "hidden"
+        )}
+      >
+        <div className="flex flex-1 justify-center items-start lg:items-center ">
+          <RenderContent />
+        </div>
+      </div>
+
+      {showCode && <CodePreview />}
+    </>
+  );
+}
+const RenderContent = () => {
+  const user = useUser();
+  const { authStep } = useAuthContext();
+  const [showAuthCard, setShowAuthCard] = useState(() => !user);
+
+  useEffect(() => {
+    // Show auth card for unauthenticated users
+    if (!user) {
+      setShowAuthCard(true);
+
+      // Get auth details for authenticated users
+    } else if (!!user && ["complete", "initial"].includes(authStep.type)) {
+      setShowAuthCard(false);
+    }
+  }, [authStep.type, user]);
+
+  if (showAuthCard) {
+    return (
+      <>
+        <div className="hidden lg:flex flex-col gap-2 w-[368px]">
+          <div
+            className="radius bg-bg-surface-default overflow-hidden"
+            style={{
+              boxShadow:
+                "0px 290px 81px 0px rgba(0, 0, 0, 0.00), 0px 186px 74px 0px rgba(0, 0, 0, 0.01), 0px 104px 63px 0px rgba(0, 0, 0, 0.05), 0px 46px 46px 0px rgba(0, 0, 0, 0.09), 0px 12px 26px 0px rgba(0, 0, 0, 0.10)",
+            }}
+          >
+            <AuthCard />
+          </div>
+        </div>
+        <MobileSplashPage />
+      </>
+    );
+  }
+
+  const isEOAUser = user?.type === "eoa";
+
+  if (isEOAUser) {
+    return (
+      <div className="h-full w-full pb-10 pt-5 flex flex-col lg:justify-center items-center">
+        <EOAPostLogin />
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <MintCard />
+    </div>
+  );
+};

examples/ui-demo/src/components/shared/eoa-post-login/EOAPostLogin.tsx → examples/ui-demo/src/components/eoa-post-login/EOAPostLogin.tsx

@@ -5,8 +5,8 @@ import {
 
 export function EOAPostLogin() {
   return (
-    <div className="flex flex-col">
-      <div className="border-border border radius-2 px-6 lg:px-10 py-11 max-w-[486px] w-full bg-bg-surface-default">
+    <div className="px-10 py-11 flex flex-col border-none lg:border-solid border border-border rounded-lg overflow-hidden overflow-y-auto scrollbar-none">
+      <div className="max-w-[486px] w-full bg-bg-surface-default">
         <EOAPostLoginContents />
         <div className="hidden lg:block">
           <EOAPostLoginActions />

examples/ui-demo/src/components/shared/eoa-post-login/EOAPostLoginContents.tsx → examples/ui-demo/src/components/eoa-post-login/EOAPostLoginContents.tsx

@@ -1,13 +1,13 @@
 import { useLogout } from "@account-kit/react";
-import { CheckIcon } from "../../icons/check";
-import { GasIcon } from "../../icons/gas";
-import { UserIcon } from "../../icons/user";
-import { WalletIcon } from "../../icons/wallet";
+import { CheckIcon } from "../icons/check";
+import { GasIcon } from "../icons/gas";
+import { UserIcon } from "../icons/user";
+import { WalletIcon } from "../icons/wallet";
 
 export const EOAPostLoginActions = () => {
   const { logout } = useLogout();
   return (
-    <div className="flex flex-col items-center justify-center">
+    <div className="flex flex-col items-center justify-center px-6 lg:px-0">
       <p className="text-demo-fg-secondary lg:text-fg-secondary text-sm text-center mt-4 lg:mt-0">
         <span>
           Want to experience{" "}

examples/ui-demo/src/components/shared/mint-card/MintCard.tsx → examples/ui-demo/src/components/mint-card/MintCard.tsx

@@ -10,7 +10,7 @@
   useSmartAccountClient,
 } from "@account-kit/react";
 import { encodeFunctionData } from "viem";
 import { RenderUserConnectionAvatar } from "../user-connection-avatar/RenderUserConnectionAvatar";
 import { MintCardActionButtons } from "./MintCardActionButtons";
 import { NFT } from "./NFT";
 import { ValueProps } from "./ValueProps";
@@ -116,10 +116,9 @@
     Object.values(status).some((x) => x === "loading") || isLoadingClient;
 
   return (
-    <div className="flex mt-0 lg:mt-7 pb-10 lg:pb-0 lg:justify-center flex-col lg:h-full">
+    <div className="flex mt-0 lg:justify-center flex-col lg:h-full mb-6">
       <div className="lg:self-center">
-        <div className="flex items-center flex-col justify-center mb-12 lg:mb-0  lg:flex-row lg:justify-center lg:items-start bg-bg-surface-default radius-1 border-btn-secondary border md:mx-6 lg:mx-0 overflow-hidden lg:h-[470px]">
-          <RenderUserConnectionAvatar className="lg:hidden w-full p-6 mb-0 pb-6 relative after:absolute after:bottom-0 after:left-6 after:right-6  after:h-[1px] after:bg-border" />
+        <div className="flex items-center flex-col justify-center mb-12 lg:mb-0  lg:flex-row lg:justify-center lg:items-start bg-bg-surface-default radius-1 border-btn-secondary border md:mx-6 lg:mx-0 overflow-hidden lg:h-[470px] border-none lg:border-solid">
           <div className="hidden lg:block max-w-[410px] overflow-auto p-8 h-full">
             <h1 className="text-3xl lg:text-2xl font-semibold text-center leading-10 mb-8 text-fg-primary">
               {!nftTransfered

examples/ui-demo/src/components/shared/mint-card/ValueProps.tsx → examples/ui-demo/src/components/mint-card/ValueProps.tsx

@@ -1,9 +1,9 @@
 import { MintStatus } from "./MintCard";
-import { LoadingIcon } from "../../icons/loading";
-import { CheckIcon } from "../../icons/check";
-import { GasIcon } from "../../icons/gas";
-import { DrawIcon } from "../../icons/draw";
-import { ReceiptIcon } from "../../icons/receipt";
+import { LoadingIcon } from "../icons/loading";
+import { CheckIcon } from "../icons/check";
+import { GasIcon } from "../icons/gas";
+import { DrawIcon } from "../icons/draw";
+import { ReceiptIcon } from "../icons/receipt";
 
 type Props = {
   status: MintStatus;