feat: add showBack prop and auto determine navigation (#712)

alchemyplatform · Jun 14, 2024 · 7b1e68c · 7b1e68c
1 parent a99460d
commit 7b1e68c
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 12 deletions.
diff --git a/packages/alchemy/src/react/components/auth/card/index.tsx b/packages/alchemy/src/react/components/auth/card/index.tsx
@@ -30,8 +30,9 @@ export type AuthCardProps = {
  * @returns a react component containing the AuthCard
  */
 export const AuthCard = (
-  props: AuthCardProps & { showNavigation?: boolean }
+  props: AuthCardProps & { showNavigation?: boolean; showClose?: boolean }
 ) => {
+  const { showClose = false, onAuthSuccess, hideError } = props;
   const { closeAuthModal } = useAuthModal();
   const { status, isAuthenticating } = useSignerStatus();
   const { authStep, setAuthStep } = useAuthContext();
@@ -54,7 +55,7 @@ export const AuthCard = (
 
   useLayoutEffect(() => {
     if (authStep.type === "complete") {
-      props.onAuthSuccess?.();
+      onAuthSuccess?.();
     } else if (isAuthenticating && authStep.type === "initial") {
       const urlParams = new URLSearchParams(window.location.search);
 
@@ -63,22 +64,23 @@ export const AuthCard = (
         createPasskeyAfter: urlParams.get(IS_SIGNUP_QP) === "true",
       });
     }
-  }, [authStep, status, props, isAuthenticating, setAuthStep]);
+  }, [authStep, status, isAuthenticating, setAuthStep, onAuthSuccess]);
 
   return (
     <div className="relative">
       <div
         id="akui-default-error-container"
         className="absolute bottom-[calc(100%+8px)] w-full"
       >
-        {!props.hideError && error && error.message && (
+        {!hideError && error && error.message && (
           <Notification message={error.message} type="error" />
         )}
       </div>
       <div className="modal-box relative flex flex-col items-center gap-5 text-fg-primary">
-        {props.showNavigation && (
+        {(canGoBack || showClose) && (
           <Navigation
-            showingBack={canGoBack}
+            showClose={showClose}
+            showBack={canGoBack}
             onBack={onBack}
             onClose={closeAuthModal}
           />

diff --git a/packages/alchemy/src/react/components/auth/modal.tsx b/packages/alchemy/src/react/components/auth/modal.tsx
@@ -24,7 +24,7 @@ export const AuthModal = forwardRef<HTMLDialogElement, AuthModalProps>(
           header={auth.header}
           sections={auth.sections}
           onAuthSuccess={() => closeAuthModal()}
-          showNavigation
+          showClose
         />
         <div className="modal-backdrop" onClick={() => closeAuthModal()} />
       </dialog>

diff --git a/packages/alchemy/src/react/components/navigation.tsx b/packages/alchemy/src/react/components/navigation.tsx
@@ -4,12 +4,14 @@ import { Button } from "./button.js";
 interface NavigationProps {
   onBack?: () => void;
   onClose: () => void;
-  showingBack: boolean;
+  showBack: boolean;
+  showClose: boolean;
 }
 
 // eslint-disable-next-line jsdoc/require-jsdoc
 export const Navigation = ({
-  showingBack,
+  showBack,
+  showClose,
   onBack,
   onClose,
 }: NavigationProps) => {
@@ -18,13 +20,17 @@ export const Navigation = ({
       <Button
         variant="link"
         onClick={onBack}
-        disabled={!showingBack}
-        className={showingBack ? "text-fg-secondary" : "invisible"}
+        disabled={!showBack}
+        className={showBack ? "text-fg-secondary" : "invisible"}
       >
         <BackArrow />
       </Button>
 
-      <Button variant="link" onClick={onClose} className="text-fg-secondary">
+      <Button
+        variant="link"
+        onClick={onClose}
+        className={showClose ? "text-fg-secondary" : "invisible"}
+      >
         <X />
       </Button>
     </div>