From bedb53fc957039d1efd202947148cb3db154f351 Mon Sep 17 00:00:00 2001
From: Tina Zheng <tina.s.zheng+github@gmail.com>
Date: Tue, 4 Jun 2024 16:25:57 -0400
Subject: [PATCH 1/7] feat: add error boundary by id

---
 examples/ui-demo/src/app/page.tsx             | 41 +++++++++--------
 examples/ui-demo/src/app/providers.tsx        |  5 ++-
 .../src/react/components/auth/card/index.tsx  | 10 ++++-
 .../src/react/components/notification.tsx     | 29 ++++++++++++
 packages/alchemy/src/react/context.tsx        | 44 ++++++++++++++++++-
 packages/alchemy/src/tailwind/theme.ts        |  3 ++
 packages/alchemy/src/tailwind/types.ts        |  3 ++
 7 files changed, 111 insertions(+), 24 deletions(-)
 create mode 100644 packages/alchemy/src/react/components/notification.tsx

diff --git a/examples/ui-demo/src/app/page.tsx b/examples/ui-demo/src/app/page.tsx
index 8d8c08163a..ce7df24801 100644
--- a/examples/ui-demo/src/app/page.tsx
+++ b/examples/ui-demo/src/app/page.tsx
@@ -11,7 +11,7 @@ import {
 import { ChevronRight } from "@/src/components/icons/chevron";
 import { MailIcon } from "@/src/components/icons/mail";
 import { Input, useLogout } from "@alchemy/aa-alchemy/react";
-import { useMemo } from "react";
+import { useMemo, useRef } from "react";
 
 export default function Home() {
   // const [darkMode, setDarkMode] = useState(false)
@@ -19,15 +19,14 @@ export default function Home() {
     () => [[{ type: "email", hideButton: true }], [{ type: "passkey" }]],
     []
   );
+  const errorBoundary = useRef<HTMLDivElement>(null);
   const { openAuthModal } = useAuthModal();
   const user = useUser();
   const { logout } = useLogout();
 
   return (
     <>
-      <main
-        className="flex min-h-screen p-24 basis-2/4 light:bg-[#F9F9F9] dark:bg-[#020617] dark:text-white justify-center"
-      >
+      <main className="flex min-h-screen p-24 basis-2/4 light:bg-[#F9F9F9] dark:bg-[#020617] dark:text-white justify-center">
         <div className="flex flex-col gap-8 max-w-[50%] w-full">
           <div className="flex flex-col gap-4">
             <h1 className="text-4xl font-bold">Buttons</h1>
@@ -65,20 +64,26 @@ export default function Home() {
           <div className="flex flex-col gap-4">
             <h1 className="text-4xl font-bold">Auth</h1>
             <div className="flex flex-row gap-6">
-              <div className="modal w-[368px] shadow-md">
-                {!user ? (
-                  <AuthCard sections={sections} />
-                ) : (
-                  <div className="flex flex-col gap-2 p-2">
-                    Logged in as {user.email ?? "anon"}
-                    <button
-                      className="btn btn-primary"
-                      onClick={() => logout()}
-                    >
-                      Log out
-                    </button>
-                  </div>
-                )}
+              <div className="flex flex-col gap-2">
+                <div className="modal w-[368px] shadow-md">
+                  {!user ? (
+                    <AuthCard sections={sections} />
+                  ) : (
+                    <div className="flex flex-col gap-2 p-2">
+                      Logged in as {user.email ?? "anon"}
+                      <button
+                        className="btn btn-primary"
+                        onClick={() => logout()}
+                      >
+                        Log out
+                      </button>
+                    </div>
+                  )}
+                </div>
+                <div
+                  id="example-custom-error-boundary"
+                  className="*-bg-[pink] *-p-4"
+                />
               </div>
               <button className="btn btn-primary" onClick={openAuthModal}>
                 Open Auth Modal
diff --git a/examples/ui-demo/src/app/providers.tsx b/examples/ui-demo/src/app/providers.tsx
index aac64c2050..3ff3295aa2 100644
--- a/examples/ui-demo/src/app/providers.tsx
+++ b/examples/ui-demo/src/app/providers.tsx
@@ -3,7 +3,7 @@ import { createConfig } from "@alchemy/aa-alchemy/config";
 import { AlchemyAccountProvider, AlchemyAccountsProviderProps } from "@alchemy/aa-alchemy/react";
 import { sepolia } from "@alchemy/aa-core";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { PropsWithChildren, Suspense } from "react";
+import { PropsWithChildren, Suspense, useRef } from "react";
 
 const config = createConfig({
   // required
@@ -20,7 +20,8 @@ const uiConfig: AlchemyAccountsProviderProps["uiConfig"] = {
   auth: {
     sections: [[{type: "email"}], [{type: "passkey"}]],
     addPasskeyOnSignup: true,
-  }
+  },
+  errorContainerId: "example-custom-error-boundary"
 };
 
 export const Providers = (props: PropsWithChildren<{}>) => {
diff --git a/packages/alchemy/src/react/components/auth/card/index.tsx b/packages/alchemy/src/react/components/auth/card/index.tsx
index 481e2c4baf..cbe963f60a 100644
--- a/packages/alchemy/src/react/components/auth/card/index.tsx
+++ b/packages/alchemy/src/react/components/auth/card/index.tsx
@@ -48,8 +48,14 @@ export const AuthCard = (props: AuthCardProps) => {
         setAuthStep,
       }}
     >
-      <div className="modal-box flex flex-col items-center gap-5">
-        <Step {...props} />
+      <div className="relative">
+        <div
+          id="akui-default-error-container"
+          className="absolute -top-10 w-full"
+        ></div>
+        <div className="modal-box flex flex-col items-center gap-5">
+          <Step {...props} />
+        </div>
       </div>
     </AuthModalContext.Provider>
   );
diff --git a/packages/alchemy/src/react/components/notification.tsx b/packages/alchemy/src/react/components/notification.tsx
new file mode 100644
index 0000000000..b0922ff807
--- /dev/null
+++ b/packages/alchemy/src/react/components/notification.tsx
@@ -0,0 +1,29 @@
+type NotificationProps = {
+  type: "success" | "warning" | "error";
+  message: string;
+  className?: string;
+};
+
+// this isn't used externally
+// eslint-disable-next-line jsdoc/require-jsdoc
+export function Notification({ className, type, message }: NotificationProps) {
+  const bgColor = (() => {
+    switch (type) {
+      case "success":
+        return "bg-bg-surface-success";
+      case "warning":
+        return "bg-bg-surface-warning";
+      case "error":
+        return "bg-bg-surface-error";
+    }
+  })();
+  return (
+    <div
+      className={`${bgColor} text-sm py-1 px-2 rounded-lg text-white ${
+        className ?? ""
+      }`}
+    >
+      {message}
+    </div>
+  );
+}
diff --git a/packages/alchemy/src/react/context.tsx b/packages/alchemy/src/react/context.tsx
index 36e71a825b..da3e3f448e 100644
--- a/packages/alchemy/src/react/context.tsx
+++ b/packages/alchemy/src/react/context.tsx
@@ -2,13 +2,22 @@
 
 import type { NoUndefined } from "@alchemy/aa-core";
 import { QueryClientProvider, type QueryClient } from "@tanstack/react-query";
-import { createContext, useContext, useEffect, useMemo, useRef } from "react";
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from "react";
 import type { AlchemyAccountsConfig, AlchemyClientState } from "../config";
 import { AuthCard, type AuthCardProps } from "./components/auth/card/index.js";
 import { IS_SIGNUP_QP } from "./components/constants.js";
 import { NoAlchemyAccountContextError } from "./errors.js";
 import { useSignerStatus } from "./hooks/useSignerStatus.js";
 import { Hydrate } from "./hydrate.js";
+import { createPortal } from "react-dom";
+import { Notification } from "./components/notification.js";
 
 export type AlchemyAccountContextProps =
   | {
@@ -17,6 +26,7 @@ export type AlchemyAccountContextProps =
       ui?: {
         openAuthModal: () => void;
         closeAuthModal: () => void;
+        errorContainerId?: string;
       };
     }
   | undefined;
@@ -35,6 +45,11 @@ export type AlchemyAccountsProviderProps = {
      * to the DOM and can be controlled via the `useAuthModal` hook
      */
     auth?: AuthCardProps & { addPasskeyOnSignup?: boolean };
+    /* If errorContainerId is provided, the auth modal will portal the
+       error banner to the container element with this as its `id` instead of to the
+       default error container
+    */
+    errorContainerId?: string;
   };
 };
 
@@ -85,6 +100,7 @@ export const AlchemyAccountProvider = (
         ? {
             openAuthModal,
             closeAuthModal,
+            errorContainerId: uiConfig.errorContainerId,
           }
         : undefined,
     }),
@@ -105,15 +121,39 @@ export const AlchemyAccountProvider = (
     }
   }, [status, uiConfig?.auth]);
 
+  const error = "This is an example error";
+
+  const [errorContainer, setErrorContainer] = useState<
+    Element | DocumentFragment | null
+  >(null);
+  // set error container inside useEffect to guarantee this runs client-side only
+  useEffect(() => {
+    if (uiConfig?.errorContainerId) {
+      setErrorContainer(document.getElementById(uiConfig.errorContainerId));
+      return;
+    }
+
+    setErrorContainer(document.getElementById("akui-default-error-container"));
+  }, [uiConfig?.errorContainerId]);
+
   return (
     <Hydrate {...props}>
       <AlchemyAccountContext.Provider value={initialContext}>
         <QueryClientProvider client={queryClient}>
           {children}
+          {error &&
+            errorContainer &&
+            createPortal(
+              <Notification type="error" message={error} />,
+              errorContainer,
+              "akui-default-error-boundary"
+            )}
           {uiConfig?.auth && (
             <dialog
               ref={ref}
-              className={`modal w-[368px] ${uiConfig.auth.className ?? ""}`}
+              className={`modal overflow-visible relative w-[368px] ${
+                uiConfig.auth.className ?? ""
+              }`}
             >
               <AuthCard
                 header={uiConfig.auth.header}
diff --git a/packages/alchemy/src/tailwind/theme.ts b/packages/alchemy/src/tailwind/theme.ts
index 688d2b94f0..2183ec9807 100644
--- a/packages/alchemy/src/tailwind/theme.ts
+++ b/packages/alchemy/src/tailwind/theme.ts
@@ -32,6 +32,9 @@ export function createDefaultTheme(): AccountKitTheme {
       "bg-surface-subtle": createColorSet("#FBFDFF", "#0F172A"),
       "bg-surface-inset": createColorSet("#EFF4F9", "#1F2937"),
       "bg-surface-critical": createColorSet("#FEF2F2", "#FEF2F2"),
+      "bg-surface-error": createColorSet("#DC2626", "#F87171"),
+      "bg-surface-success": createColorSet("#16A34A", "#86EFAC"),
+      "bg-surface-warning": createColorSet("#EA580C", "#FDBA74"),
     },
   };
 }
diff --git a/packages/alchemy/src/tailwind/types.ts b/packages/alchemy/src/tailwind/types.ts
index 03704df713..584bf0b9bb 100644
--- a/packages/alchemy/src/tailwind/types.ts
+++ b/packages/alchemy/src/tailwind/types.ts
@@ -28,6 +28,9 @@ export interface AccountKitTheme {
     "bg-surface-subtle": ColorVariantRecord;
     "bg-surface-inset": ColorVariantRecord;
     "bg-surface-critical": ColorVariantRecord;
+    "bg-surface-success": ColorVariantRecord;
+    "bg-surface-warning": ColorVariantRecord;
+    "bg-surface-error": ColorVariantRecord;
   };
 }
 

From 9f1ed9f37b91eb2950786802ee394719a38c3472 Mon Sep 17 00:00:00 2001
From: Tina Zheng <tina.s.zheng+github@gmail.com>
Date: Tue, 4 Jun 2024 16:27:35 -0400
Subject: [PATCH 2/7] fix: remove unused classnames

---
 examples/ui-demo/src/app/page.tsx | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/examples/ui-demo/src/app/page.tsx b/examples/ui-demo/src/app/page.tsx
index ce7df24801..4c73dcfcb4 100644
--- a/examples/ui-demo/src/app/page.tsx
+++ b/examples/ui-demo/src/app/page.tsx
@@ -19,7 +19,6 @@ export default function Home() {
     () => [[{ type: "email", hideButton: true }], [{ type: "passkey" }]],
     []
   );
-  const errorBoundary = useRef<HTMLDivElement>(null);
   const { openAuthModal } = useAuthModal();
   const user = useUser();
   const { logout } = useLogout();
@@ -80,10 +79,7 @@ export default function Home() {
                     </div>
                   )}
                 </div>
-                <div
-                  id="example-custom-error-boundary"
-                  className="*-bg-[pink] *-p-4"
-                />
+                <div id="example-custom-error-boundary" />
               </div>
               <button className="btn btn-primary" onClick={openAuthModal}>
                 Open Auth Modal

From 63b74d55803f3d781e54bb8d01d4ee709c5afa56 Mon Sep 17 00:00:00 2001
From: Tina Zheng <tina.s.zheng+github@gmail.com>
Date: Tue, 4 Jun 2024 18:59:35 -0400
Subject: [PATCH 3/7] feat: use error from hook

---
 examples/ui-demo/src/app/page.tsx             | 41 +++++----
 .../components/auth/card/add-passkey.tsx      |  4 +-
 .../react/components/auth/card/content.tsx    |  3 -
 .../src/react/components/auth/card/index.tsx  | 41 +++++----
 .../components/auth/card/loading/index.tsx    |  2 +-
 .../components/auth/card/loading/passkey.tsx  | 21 +----
 .../alchemy/src/react/components/error.tsx    | 17 ----
 packages/alchemy/src/react/context.tsx        | 87 ++++++++-----------
 packages/alchemy/src/react/hooks/useError.ts  | 18 ++++
 packages/alchemy/src/react/index.ts           |  2 +
 10 files changed, 106 insertions(+), 130 deletions(-)
 delete mode 100644 packages/alchemy/src/react/components/error.tsx
 create mode 100644 packages/alchemy/src/react/hooks/useError.ts

diff --git a/examples/ui-demo/src/app/page.tsx b/examples/ui-demo/src/app/page.tsx
index 4c73dcfcb4..02b0254569 100644
--- a/examples/ui-demo/src/app/page.tsx
+++ b/examples/ui-demo/src/app/page.tsx
@@ -5,21 +5,23 @@ import {
   AuthType,
   DemoSet,
   useAuthModal,
+  useError,
   useUser,
 } from "@alchemy/aa-alchemy/react";
 // eslint-disable-next-line import/extensions
 import { ChevronRight } from "@/src/components/icons/chevron";
 import { MailIcon } from "@/src/components/icons/mail";
 import { Input, useLogout } from "@alchemy/aa-alchemy/react";
-import { useMemo, useRef } from "react";
+import { useMemo } from "react";
 
 export default function Home() {
-  // const [darkMode, setDarkMode] = useState(false)
   const sections = useMemo<AuthType[][]>(
     () => [[{ type: "email", hideButton: true }], [{ type: "passkey" }]],
     []
   );
   const { openAuthModal } = useAuthModal();
+  const error = useError();
+  console.log("error", error);
   const user = useUser();
   const { logout } = useLogout();
 
@@ -64,22 +66,31 @@ export default function Home() {
             <h1 className="text-4xl font-bold">Auth</h1>
             <div className="flex flex-row gap-6">
               <div className="flex flex-col gap-2">
-                <div className="modal w-[368px] shadow-md">
-                  {!user ? (
-                    <AuthCard sections={sections} />
-                  ) : (
-                    <div className="flex flex-col gap-2 p-2">
-                      Logged in as {user.email ?? "anon"}
-                      <button
-                        className="btn btn-primary"
-                        onClick={() => logout()}
-                      >
-                        Log out
-                      </button>
+                <div className="flex flex-col gap-2 w-[368px]">
+                  <div className="modal shadow-md">
+                    {!user ? (
+                      <AuthCard hideError sections={sections} />
+                    ) : (
+                      <div className="flex flex-col gap-2 p-2">
+                        Logged in as {user.email ?? "anon"}
+                        <button
+                          className="btn btn-primary"
+                          onClick={() => logout()}
+                        >
+                          Log out
+                        </button>
+                      </div>
+                    )}
+                  </div>
+                  {error && error.message && (
+                    <div
+                      key="custom-error-boundary"
+                      className="btn-primary text-xs rounded-xl p-2"
+                    >
+                      {error.message}
                     </div>
                   )}
                 </div>
-                <div id="example-custom-error-boundary" />
               </div>
               <button className="btn btn-primary" onClick={openAuthModal}>
                 Open Auth Modal
diff --git a/packages/alchemy/src/react/components/auth/card/add-passkey.tsx b/packages/alchemy/src/react/components/auth/card/add-passkey.tsx
index fdd73aec2e..20cf9e7e20 100644
--- a/packages/alchemy/src/react/components/auth/card/add-passkey.tsx
+++ b/packages/alchemy/src/react/components/auth/card/add-passkey.tsx
@@ -1,14 +1,13 @@
 import { useAddPasskey } from "../../../hooks/useAddPasskey.js";
 import { PasskeyIcon } from "../../../icons/passkey.js";
 import { Button } from "../../button.js";
-import { ErrorContainer } from "../../error.js";
 import { PoweredBy } from "../../poweredby.js";
 import { useAuthContext } from "../context.js";
 
 // eslint-disable-next-line jsdoc/require-jsdoc
 export const AddPasskey = () => {
   const { setAuthStep } = useAuthContext();
-  const { addPasskey, isAddingPasskey, error } = useAddPasskey({
+  const { addPasskey, isAddingPasskey } = useAddPasskey({
     onSuccess: () => {
       setAuthStep({ type: "complete" });
     },
@@ -26,7 +25,6 @@ export const AddPasskey = () => {
         Passkeys allow for a simple and secure user experience. Login in and
         sign transactions in seconds
       </p>
-      {error && <ErrorContainer error={error} />}
       <Button
         type="primary"
         className="w-full"
diff --git a/packages/alchemy/src/react/components/auth/card/content.tsx b/packages/alchemy/src/react/components/auth/card/content.tsx
index edf9725844..c83b7661c1 100644
--- a/packages/alchemy/src/react/components/auth/card/content.tsx
+++ b/packages/alchemy/src/react/components/auth/card/content.tsx
@@ -1,5 +1,4 @@
 import type { ReactNode } from "react";
-import { ErrorContainer } from "../../error.js";
 import { PoweredBy } from "../../poweredby.js";
 
 interface CardContentProps {
@@ -19,7 +18,6 @@ export const CardContent = ({
   icon,
   description,
   support,
-  error,
 }: CardContentProps) => {
   return (
     <div className="flex flex-col gap-5 items-center">
@@ -36,7 +34,6 @@ export const CardContent = ({
       ) : (
         description
       )}
-      {error && <ErrorContainer error={error} />}
       {support && (
         <div className="flex flex-row gap-2 text-xs font-normal">
           <span className="text-fg-secondary">{support.text}</span>
diff --git a/packages/alchemy/src/react/components/auth/card/index.tsx b/packages/alchemy/src/react/components/auth/card/index.tsx
index cbe963f60a..9fa03a837d 100644
--- a/packages/alchemy/src/react/components/auth/card/index.tsx
+++ b/packages/alchemy/src/react/components/auth/card/index.tsx
@@ -1,11 +1,14 @@
-import { useLayoutEffect, useState, type ReactNode } from "react";
+import { useLayoutEffect, type ReactNode } from "react";
 import { useSignerStatus } from "../../../hooks/useSignerStatus.js";
 import { IS_SIGNUP_QP } from "../../constants.js";
-import { AuthModalContext, type AuthStep } from "../context.js";
+import { useAuthContext } from "../context.js";
 import type { AuthType } from "../types.js";
 import { Step } from "./steps.js";
+import { Notification } from "../../notification.js";
+import { useError } from "../../../hooks/useError.js";
 
 export type AuthCardProps = {
+  hideError?: boolean;
   header?: ReactNode;
   // Each section can contain multiple auth types which will be grouped together
   // and separated by an OR divider
@@ -24,9 +27,8 @@ export type AuthCardProps = {
  */
 export const AuthCard = (props: AuthCardProps) => {
   const { status, isAuthenticating } = useSignerStatus();
-  const [authStep, setAuthStep] = useState<AuthStep>({
-    type: isAuthenticating ? "email_completing" : "initial",
-  });
+  const { authStep, setAuthStep } = useAuthContext();
+  const error = useError();
 
   useLayoutEffect(() => {
     if (authStep.type === "complete") {
@@ -39,24 +41,21 @@ export const AuthCard = (props: AuthCardProps) => {
         createPasskeyAfter: urlParams.get(IS_SIGNUP_QP) === "true",
       });
     }
-  }, [authStep, status, props, isAuthenticating]);
+  }, [authStep, status, props, isAuthenticating, setAuthStep]);
 
   return (
-    <AuthModalContext.Provider
-      value={{
-        authStep,
-        setAuthStep,
-      }}
-    >
-      <div className="relative">
-        <div
-          id="akui-default-error-container"
-          className="absolute -top-10 w-full"
-        ></div>
-        <div className="modal-box flex flex-col items-center gap-5">
-          <Step {...props} />
-        </div>
+    <div className="relative">
+      <div
+        id="akui-default-error-container"
+        className="absolute bottom-[calc(100%+8px)] w-full"
+      >
+        {!props.hideError && error && error.message && (
+          <Notification message={error.message} type="error" />
+        )}
       </div>
-    </AuthModalContext.Provider>
+      <div className="modal-box flex flex-col items-center gap-5">
+        <Step {...props} />
+      </div>
+    </div>
   );
 };
diff --git a/packages/alchemy/src/react/components/auth/card/loading/index.tsx b/packages/alchemy/src/react/components/auth/card/loading/index.tsx
index c178caa08f..12a4e18ba0 100644
--- a/packages/alchemy/src/react/components/auth/card/loading/index.tsx
+++ b/packages/alchemy/src/react/components/auth/card/loading/index.tsx
@@ -12,7 +12,7 @@ export const LoadingAuth = ({ context }: LoadingAuthProps) => {
     case "email_verify":
       return <LoadingEmail context={context} />;
     case "passkey_verify":
-      return <LoadingPasskeyAuth context={context} />;
+      return <LoadingPasskeyAuth />;
     case "email_completing":
       return <CompletingEmailAuth context={context} />;
     default: {
diff --git a/packages/alchemy/src/react/components/auth/card/loading/passkey.tsx b/packages/alchemy/src/react/components/auth/card/loading/passkey.tsx
index 9f176eec0d..1c96c91dbc 100644
--- a/packages/alchemy/src/react/components/auth/card/loading/passkey.tsx
+++ b/packages/alchemy/src/react/components/auth/card/loading/passkey.tsx
@@ -1,20 +1,9 @@
 import { PasskeyIcon } from "../../../../icons/passkey.js";
 import { Button } from "../../../button.js";
-import { ErrorContainer } from "../../../error.js";
 import { PoweredBy } from "../../../poweredby.js";
-import { type AuthStep } from "../../context.js";
-import { usePasskeyVerify } from "../../hooks/usePasskeyVerify.js";
-
-interface LoadingPasskeyAuthProps {
-  context: Extract<AuthStep, { type: "passkey_verify" }>;
-}
 
 // eslint-disable-next-line jsdoc/require-jsdoc
-export const LoadingPasskeyAuth = ({
-  context: { error },
-}: LoadingPasskeyAuthProps) => {
-  const { authenticate } = usePasskeyVerify();
-
+export const LoadingPasskeyAuth = () => {
   return (
     <div className="flex flex-col gap-5 items-center">
       <span className="text-lg text-fg-primary font-semibold">
@@ -26,14 +15,6 @@ export const LoadingPasskeyAuth = ({
       <p className="text-fg-secondary text-center font-normal text-sm">
         Follow the steps on your device to create or verify your passkey
       </p>
-      {error && (
-        <>
-          <ErrorContainer error={error} />
-          <Button className="btn btn-primary w-full" onClick={authenticate}>
-            Retry
-          </Button>
-        </>
-      )}
       <div className="flex flex-row rounded-lg bg-bg-surface-inset justify-between py-2 px-4 w-full items-center text-xs">
         <span className="font-normal text-fg-secondary">Having trouble?</span>
         <Button type="link" className="text-xs font-semibold">
diff --git a/packages/alchemy/src/react/components/error.tsx b/packages/alchemy/src/react/components/error.tsx
deleted file mode 100644
index 3ccf3a0b8f..0000000000
--- a/packages/alchemy/src/react/components/error.tsx
+++ /dev/null
@@ -1,17 +0,0 @@
-interface ErrorContainerProps {
-  error?: Error | string;
-}
-
-// eslint-disable-next-line jsdoc/require-jsdoc
-export const ErrorContainer = ({ error }: ErrorContainerProps) => {
-  return (
-    <div className="flex flex-row gap-2 p-1 items-center rounded-lg bg-bg-surface-critical text-fg-critical text-xs">
-      <div className="rounded-lg bg-fg-critical text-fg-invert font-semibold font-xs py-1 px-2">
-        Error
-      </div>
-      <div className="font-normal">
-        {error != null ? error.toString() : "Oops! Something went wrong"}
-      </div>
-    </div>
-  );
-};
diff --git a/packages/alchemy/src/react/context.tsx b/packages/alchemy/src/react/context.tsx
index da3e3f448e..661befc220 100644
--- a/packages/alchemy/src/react/context.tsx
+++ b/packages/alchemy/src/react/context.tsx
@@ -16,8 +16,7 @@ import { IS_SIGNUP_QP } from "./components/constants.js";
 import { NoAlchemyAccountContextError } from "./errors.js";
 import { useSignerStatus } from "./hooks/useSignerStatus.js";
 import { Hydrate } from "./hydrate.js";
-import { createPortal } from "react-dom";
-import { Notification } from "./components/notification.js";
+import { AuthModalContext, type AuthStep } from "./components/auth/context.js";
 
 export type AlchemyAccountContextProps =
   | {
@@ -26,7 +25,6 @@ export type AlchemyAccountContextProps =
       ui?: {
         openAuthModal: () => void;
         closeAuthModal: () => void;
-        errorContainerId?: string;
       };
     }
   | undefined;
@@ -45,11 +43,11 @@ export type AlchemyAccountsProviderProps = {
      * to the DOM and can be controlled via the `useAuthModal` hook
      */
     auth?: AuthCardProps & { addPasskeyOnSignup?: boolean };
-    /* If errorContainerId is provided, the auth modal will portal the
-       error banner to the container element with this as its `id` instead of to the
-       default error container
-    */
-    errorContainerId?: string;
+    /**
+     * If hideError is true, then the auth component will not
+     * render the global error component
+     */
+    hideError?: boolean;
   };
 };
 
@@ -88,6 +86,7 @@ export const AlchemyAccountProvider = (
   props: React.PropsWithChildren<AlchemyAccountsProviderProps>
 ) => {
   const { config, queryClient, children, uiConfig } = props;
+
   const ref = useRef<HTMLDialogElement>(null);
   const openAuthModal = () => ref.current?.showModal();
   const closeAuthModal = () => ref.current?.close();
@@ -100,14 +99,16 @@ export const AlchemyAccountProvider = (
         ? {
             openAuthModal,
             closeAuthModal,
-            errorContainerId: uiConfig.errorContainerId,
           }
         : undefined,
     }),
     [config, queryClient, uiConfig]
   );
 
-  const { status } = useSignerStatus(initialContext);
+  const { status, isAuthenticating } = useSignerStatus(initialContext);
+  const [authStep, setAuthStep] = useState<AuthStep>({
+    type: isAuthenticating ? "email_completing" : "initial",
+  });
 
   useEffect(() => {
     if (
@@ -121,51 +122,37 @@ export const AlchemyAccountProvider = (
     }
   }, [status, uiConfig?.auth]);
 
-  const error = "This is an example error";
-
-  const [errorContainer, setErrorContainer] = useState<
-    Element | DocumentFragment | null
-  >(null);
-  // set error container inside useEffect to guarantee this runs client-side only
-  useEffect(() => {
-    if (uiConfig?.errorContainerId) {
-      setErrorContainer(document.getElementById(uiConfig.errorContainerId));
-      return;
-    }
-
-    setErrorContainer(document.getElementById("akui-default-error-container"));
-  }, [uiConfig?.errorContainerId]);
-
   return (
     <Hydrate {...props}>
       <AlchemyAccountContext.Provider value={initialContext}>
         <QueryClientProvider client={queryClient}>
-          {children}
-          {error &&
-            errorContainer &&
-            createPortal(
-              <Notification type="error" message={error} />,
-              errorContainer,
-              "akui-default-error-boundary"
+          <AuthModalContext.Provider
+            value={{
+              authStep,
+              setAuthStep,
+            }}
+          >
+            {children}
+            {uiConfig?.auth && (
+              <dialog
+                ref={ref}
+                className={`modal overflow-visible relative w-[368px] ${
+                  uiConfig.auth.className ?? ""
+                }`}
+              >
+                <AuthCard
+                  hideError={uiConfig.hideError}
+                  header={uiConfig.auth.header}
+                  sections={uiConfig.auth.sections}
+                  onAuthSuccess={() => closeAuthModal()}
+                />
+                <div
+                  className="modal-backdrop"
+                  onClick={() => closeAuthModal()}
+                ></div>
+              </dialog>
             )}
-          {uiConfig?.auth && (
-            <dialog
-              ref={ref}
-              className={`modal overflow-visible relative w-[368px] ${
-                uiConfig.auth.className ?? ""
-              }`}
-            >
-              <AuthCard
-                header={uiConfig.auth.header}
-                sections={uiConfig.auth.sections}
-                onAuthSuccess={() => closeAuthModal()}
-              />
-              <div
-                className="modal-backdrop"
-                onClick={() => closeAuthModal()}
-              ></div>
-            </dialog>
-          )}
+          </AuthModalContext.Provider>
         </QueryClientProvider>
       </AlchemyAccountContext.Provider>
     </Hydrate>
diff --git a/packages/alchemy/src/react/hooks/useError.ts b/packages/alchemy/src/react/hooks/useError.ts
new file mode 100644
index 0000000000..c2e3582ffb
--- /dev/null
+++ b/packages/alchemy/src/react/hooks/useError.ts
@@ -0,0 +1,18 @@
+import { useAuthContext } from "../components/auth/context.js";
+
+export type UseErrorResult = Error | undefined;
+
+/**
+ * Returns the error returned from the current auth step, if it exists
+ *
+ * @returns the current Error object
+ */
+export function useError(): UseErrorResult {
+  const { authStep } = useAuthContext();
+  // TODO: generalize this, since only passkey_verify and eoa_connect have errors right now
+  return (
+    ((authStep.type === "passkey_verify" || authStep.type === "eoa_connect") &&
+      authStep.error) ||
+    undefined
+  );
+}
diff --git a/packages/alchemy/src/react/index.ts b/packages/alchemy/src/react/index.ts
index 9513d47b63..f5ad6c2085 100644
--- a/packages/alchemy/src/react/index.ts
+++ b/packages/alchemy/src/react/index.ts
@@ -19,6 +19,8 @@ export type * from "./hooks/useClientActions.js";
 export { useClientActions } from "./hooks/useClientActions.js";
 export type * from "./hooks/useDropAndReplaceUserOperation.js";
 export { useDropAndReplaceUserOperation } from "./hooks/useDropAndReplaceUserOperation.js";
+export type * from "./hooks/useError.js";
+export { useError } from "./hooks/useError.js";
 export type * from "./hooks/useExportAccount.js";
 export { useExportAccount } from "./hooks/useExportAccount.js";
 export type * from "./hooks/useLogout.js";

From eada9d848f054bdcb475ff79bec6bcec0544b9a7 Mon Sep 17 00:00:00 2001
From: Tina Zheng <tina.s.zheng+github@gmail.com>
Date: Tue, 4 Jun 2024 19:01:41 -0400
Subject: [PATCH 4/7] fix: remove unused variables

---
 examples/ui-demo/src/app/providers.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/examples/ui-demo/src/app/providers.tsx b/examples/ui-demo/src/app/providers.tsx
index 3ff3295aa2..f8e3878140 100644
--- a/examples/ui-demo/src/app/providers.tsx
+++ b/examples/ui-demo/src/app/providers.tsx
@@ -3,7 +3,7 @@ import { createConfig } from "@alchemy/aa-alchemy/config";
 import { AlchemyAccountProvider, AlchemyAccountsProviderProps } from "@alchemy/aa-alchemy/react";
 import { sepolia } from "@alchemy/aa-core";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { PropsWithChildren, Suspense, useRef } from "react";
+import { PropsWithChildren, Suspense } from "react";
 
 const config = createConfig({
   // required
@@ -21,7 +21,6 @@ const uiConfig: AlchemyAccountsProviderProps["uiConfig"] = {
     sections: [[{type: "email"}], [{type: "passkey"}]],
     addPasskeyOnSignup: true,
   },
-  errorContainerId: "example-custom-error-boundary"
 };
 
 export const Providers = (props: PropsWithChildren<{}>) => {

From 398ff8a3a1c7344dea8c2c235b81614bcf3f9ece Mon Sep 17 00:00:00 2001
From: Tina Zheng <tina.s.zheng+github@gmail.com>
Date: Tue, 4 Jun 2024 19:06:22 -0400
Subject: [PATCH 5/7] fix: remove console log

---
 examples/ui-demo/src/app/page.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/examples/ui-demo/src/app/page.tsx b/examples/ui-demo/src/app/page.tsx
index 02b0254569..971d1830ff 100644
--- a/examples/ui-demo/src/app/page.tsx
+++ b/examples/ui-demo/src/app/page.tsx
@@ -21,7 +21,6 @@ export default function Home() {
   );
   const { openAuthModal } = useAuthModal();
   const error = useError();
-  console.log("error", error);
   const user = useUser();
   const { logout } = useLogout();
 

From 8b7d193d84a1ae03586bb51be3acb2e416331695 Mon Sep 17 00:00:00 2001
From: Tina Zheng <tina.s.zheng+github@gmail.com>
Date: Tue, 4 Jun 2024 19:10:39 -0400
Subject: [PATCH 6/7] fix: add new colors to test

---
 .../alchemy/e2e-tests/multisig-account.e2e.test.ts   |  5 ++---
 packages/alchemy/src/tailwind/utils.test.ts          | 12 ++++++++++++
 2 files changed, 14 insertions(+), 3 deletions(-)

diff --git a/packages/alchemy/e2e-tests/multisig-account.e2e.test.ts b/packages/alchemy/e2e-tests/multisig-account.e2e.test.ts
index af4a6a5324..5b38711bd3 100644
--- a/packages/alchemy/e2e-tests/multisig-account.e2e.test.ts
+++ b/packages/alchemy/e2e-tests/multisig-account.e2e.test.ts
@@ -207,7 +207,7 @@ describe("Multisig Modular Account Alchemy Client Tests", async () => {
         signatures: [signature1],
         userOperationRequest: request,
       });
- 
+
     const result = await provider3.sendUserOperation({
       uo: request.callData,
       context: {
@@ -272,7 +272,7 @@ describe("Multisig Modular Account Alchemy Client Tests", async () => {
         signatures: [signature1],
         userOperationRequest: request,
       });
- 
+
     const result = await provider3.sendUserOperation({
       uo: request.callData,
       overrides: {
@@ -298,7 +298,6 @@ describe("Multisig Modular Account Alchemy Client Tests", async () => {
   }, 100000);
 });
 
-
 const givenConnectedProvider = async ({
   signer,
   chain,
diff --git a/packages/alchemy/src/tailwind/utils.test.ts b/packages/alchemy/src/tailwind/utils.test.ts
index cbb2823067..469ced1784 100644
--- a/packages/alchemy/src/tailwind/utils.test.ts
+++ b/packages/alchemy/src/tailwind/utils.test.ts
@@ -30,6 +30,10 @@ describe("tailwind utils test", () => {
               "dark": "#020617",
               "light": "#fff",
             },
+            "bg-surface-error": {
+              "dark": "#F87171",
+              "light": "#DC2626",
+            },
             "bg-surface-inset": {
               "dark": "#1F2937",
               "light": "#EFF4F9",
@@ -38,6 +42,14 @@ describe("tailwind utils test", () => {
               "dark": "#0F172A",
               "light": "#FBFDFF",
             },
+            "bg-surface-success": {
+              "dark": "#86EFAC",
+              "light": "#16A34A",
+            },
+            "bg-surface-warning": {
+              "dark": "#FDBA74",
+              "light": "#EA580C",
+            },
             "btn-auth": {
               "dark": "argb(255, 255, 255, 0.05)",
               "light": "#FFF",

From 692aa9d1d4cb2fe23c23bc10addcbca1c3e21ea6 Mon Sep 17 00:00:00 2001
From: Tina Zheng <tina.s.zheng+github@gmail.com>
Date: Tue, 4 Jun 2024 22:23:08 -0400
Subject: [PATCH 7/7] feat: rename to useAuthError

---
 examples/ui-demo/src/app/page.tsx                             | 4 ++--
 packages/alchemy/src/react/components/auth/card/index.tsx     | 4 ++--
 .../alchemy/src/react/hooks/{useError.ts => useAuthError.ts}  | 4 ++--
 packages/alchemy/src/react/index.ts                           | 4 ++--
 4 files changed, 8 insertions(+), 8 deletions(-)
 rename packages/alchemy/src/react/hooks/{useError.ts => useAuthError.ts} (81%)

diff --git a/examples/ui-demo/src/app/page.tsx b/examples/ui-demo/src/app/page.tsx
index 971d1830ff..27764bfae6 100644
--- a/examples/ui-demo/src/app/page.tsx
+++ b/examples/ui-demo/src/app/page.tsx
@@ -5,7 +5,7 @@ import {
   AuthType,
   DemoSet,
   useAuthModal,
-  useError,
+  useAuthError,
   useUser,
 } from "@alchemy/aa-alchemy/react";
 // eslint-disable-next-line import/extensions
@@ -20,7 +20,7 @@ export default function Home() {
     []
   );
   const { openAuthModal } = useAuthModal();
-  const error = useError();
+  const error = useAuthError();
   const user = useUser();
   const { logout } = useLogout();
 
diff --git a/packages/alchemy/src/react/components/auth/card/index.tsx b/packages/alchemy/src/react/components/auth/card/index.tsx
index 9fa03a837d..fe42757c6d 100644
--- a/packages/alchemy/src/react/components/auth/card/index.tsx
+++ b/packages/alchemy/src/react/components/auth/card/index.tsx
@@ -5,7 +5,7 @@ import { useAuthContext } from "../context.js";
 import type { AuthType } from "../types.js";
 import { Step } from "./steps.js";
 import { Notification } from "../../notification.js";
-import { useError } from "../../../hooks/useError.js";
+import { useAuthError } from "../../../hooks/useAuthError.js";
 
 export type AuthCardProps = {
   hideError?: boolean;
@@ -28,7 +28,7 @@ export type AuthCardProps = {
 export const AuthCard = (props: AuthCardProps) => {
   const { status, isAuthenticating } = useSignerStatus();
   const { authStep, setAuthStep } = useAuthContext();
-  const error = useError();
+  const error = useAuthError();
 
   useLayoutEffect(() => {
     if (authStep.type === "complete") {
diff --git a/packages/alchemy/src/react/hooks/useError.ts b/packages/alchemy/src/react/hooks/useAuthError.ts
similarity index 81%
rename from packages/alchemy/src/react/hooks/useError.ts
rename to packages/alchemy/src/react/hooks/useAuthError.ts
index c2e3582ffb..82e279f388 100644
--- a/packages/alchemy/src/react/hooks/useError.ts
+++ b/packages/alchemy/src/react/hooks/useAuthError.ts
@@ -1,13 +1,13 @@
 import { useAuthContext } from "../components/auth/context.js";
 
-export type UseErrorResult = Error | undefined;
+export type UseAuthErrorResult = Error | undefined;
 
 /**
  * Returns the error returned from the current auth step, if it exists
  *
  * @returns the current Error object
  */
-export function useError(): UseErrorResult {
+export function useAuthError(): UseAuthErrorResult {
   const { authStep } = useAuthContext();
   // TODO: generalize this, since only passkey_verify and eoa_connect have errors right now
   return (
diff --git a/packages/alchemy/src/react/index.ts b/packages/alchemy/src/react/index.ts
index f5ad6c2085..a6be010a51 100644
--- a/packages/alchemy/src/react/index.ts
+++ b/packages/alchemy/src/react/index.ts
@@ -9,6 +9,8 @@ export type * from "./hooks/useAccount.js";
 export { useAccount } from "./hooks/useAccount.js";
 export type * from "./hooks/useAddPasskey.js";
 export { useAddPasskey } from "./hooks/useAddPasskey.js";
+export type * from "./hooks/useAuthError.js";
+export { useAuthError } from "./hooks/useAuthError.js";
 export type * from "./hooks/useAuthenticate.js";
 export { useAuthenticate } from "./hooks/useAuthenticate.js";
 export type * from "./hooks/useBundlerClient.js";
@@ -19,8 +21,6 @@ export type * from "./hooks/useClientActions.js";
 export { useClientActions } from "./hooks/useClientActions.js";
 export type * from "./hooks/useDropAndReplaceUserOperation.js";
 export { useDropAndReplaceUserOperation } from "./hooks/useDropAndReplaceUserOperation.js";
-export type * from "./hooks/useError.js";
-export { useError } from "./hooks/useError.js";
 export type * from "./hooks/useExportAccount.js";
 export { useExportAccount } from "./hooks/useExportAccount.js";
 export type * from "./hooks/useLogout.js";