feat: allow passkey flow in demo app (#969)

* feat: allow passkey flow in demo app. handleAuthSuccess callback when complete * feat: in progress mint card wrapper, add isAuthComplete to useConfig * fix: switch to use useAuthenticate to determine stage instead of callback * feat: mdx useAuthentication update * fix: Update account-kit/react/src/components/auth/context.ts Co-authored-by: Michael Moldoveanu <[email protected]> * fix: bad casing for authsteptype * fix: remove stage from useAuthenticate * fix: bad corner radius on passkey modal, useAuthenticate docs * fix: remove unused auth step type --------- Co-authored-by: Michael Moldoveanu <[email protected]>
alchemyplatform · Sep 25, 2024 · bacf9bd · bacf9bd
1 parent 42a2924
commit bacf9bd
Show file tree

Hide file tree

Showing 5 changed files with 43 additions and 12 deletions.
diff --git a/account-kit/react/src/components/auth/modal.tsx b/account-kit/react/src/components/auth/modal.tsx
@@ -9,7 +9,11 @@ export const AuthModal = () => {
 
   return (
     <Dialog isOpen={isOpen} onClose={closeAuthModal}>
-      <div className={`modal md:w-[368px] ${modalBaseClassName ?? ""}`}>
+      <div
+        className={`modal md:w-[368px] ${
+          modalBaseClassName ?? ""
+        } overflow-hidden`}
+      >
         <AuthCardContent showClose />
       </div>
     </Dialog>

diff --git a/examples/ui-demo/src/app/page.tsx b/examples/ui-demo/src/app/page.tsx
@@ -38,7 +38,7 @@ 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">
+            <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>

diff --git a/examples/ui-demo/src/app/state.tsx b/examples/ui-demo/src/app/state.tsx
@@ -123,7 +123,7 @@ export function ConfigContextProvider(props: PropsWithChildren) {
     };
 
     updateConfig(uiConfig);
-  }, [config]);
+  }, [config, updateConfig]);
 
   // Sync CSS variables
   useEffect(() => {

diff --git a/examples/ui-demo/src/components/preview/AuthCardWrapper.tsx b/examples/ui-demo/src/components/preview/AuthCardWrapper.tsx
@@ -1,31 +1,42 @@
 import { useConfig } from "@/app/state";
 import { cn } from "@/lib/utils";
-import { AuthCard, useLogout, useUser } from "@account-kit/react";
+import {
+  AuthCard,
+  useLogout,
+  useUser,
+} from "@account-kit/react";
+import { useMemo } from "react";
 
 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",
+        "flex flex-1 flex-col justify-center items-center overflow-auto relative",
         config.ui.theme === "dark" ? "bg-black/70" : "bg-[#EFF4F9]",
         className
       )}
     >
       {!user ? (
-        <div className="flex flex-col gap-2 w-[368px]">
-          <div className="modal bg-surface-default shadow-md overflow-hidden">
-            <AuthCard />
+        <>
+          <div className="flex flex-col gap-2 w-[368px]">
+            <div className="modal bg-surface-default shadow-md overflow-hidden">
+              <AuthCard />
+            </div>
           </div>
-        </div>
+        </>
       ) : (
+        null
+        // In flight- will be uncommented in the mint pr, a fast follow <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()}
+          onClick={() => {
+            logout();
+          }}
         >
           Logout
         </button>

diff --git a/examples/ui-demo/src/components/preview/MintDemoWrapper.tsx b/examples/ui-demo/src/components/preview/MintDemoWrapper.tsx
@@ -0,0 +1,16 @@
+export function MintDemoWrapper () {
+    return (
+        <div>
+            <div>
+                {
+                    // Iyk
+                }
+            </div>
+            <div>
+                {
+                    // Rob
+                }
+            </div>
+        </div>
+    )
+}