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 { ConfigurationSidebarWrapper } from "@/components/configuration/ConfigurationSidebarWrapper";
 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 { PreviewNav } from "@/components/preview/PreviewNav";
+import { PreviewWrapper } from "@/components/preview/PreviewWrapper";
+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">
+          <ConfigurationSidebarWrapper />
           <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 />}
+            <PreviewNav showCode={showCode} setShowCode={setShowCode} />
+            <PreviewWrapper 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/ConfigurationSidebarWrapper.tsx

@@ -0,0 +1,12 @@
+import React from "react";
+import { Authentication } from "./Authentication";
+import { Styling } from "./Styling";
+
+export function ConfigurationSidebarWrapper() {
+  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/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,6 @@ import {
   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 +115,9 @@ export const MintCard = () => {
     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;

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

@@ -14,7 +14,7 @@ export function MobileSplashPage() {
   }, [breakpoint, isAuthenticating, openAuthModal]);
 
   return (
-    <div className="flex flex-col flex-1 h-auto max-h-[calc(100svh-100px)] box-content px-4 pt-0 justify-between">
+    <div className="flex lg:hidden flex-col flex-1 h-auto max-h-[calc(100svh-100px)] box-content px-4 pt-0 justify-between h-full">
       {/* Header Text */}
       <div>
         <h3 className="min-[320px]:text-3xl min-[390px]:text-5xl min-[640px]:text-6xl min-[640px]:mt-12 text-center font-semibold tracking-tight mb-4 leading-none">

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

@@ -0,0 +1,58 @@
+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 PreviewNav({
+  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>
+  );
+}