@crossmint/client-sdk-react-ui 1.10.3 → 1.10.5

package/dist/{chunk-CUODMU27.js → chunk-T5WAVOPI.js}

@@ -1,9 +1,9 @@
 import {
-  Web3ProviderButton
-} from "./chunk-WK5RAFJ3.js";
+  Web3ConnectorButton
+} from "./chunk-NFWMF6T7.js";
 import {
-  Web3ConnectButton
-} from "./chunk-6DNBJVR5.js";
+  Web3Connector
+} from "./chunk-ZSWTJ6E7.js";
 import {
   WagmiAuthProvider
 } from "./chunk-OZS4WEKF.js";
@@ -33,12 +33,12 @@ import {
 import {
   TwindProvider
 } from "./chunk-HATQVB6H.js";
-import {
-  AuthFormBackButton
-} from "./chunk-QJ44PL7L.js";
 import {
   classNames
 } from "./chunk-RZPQIRIY.js";
+import {
+  LeftArrowIcon
+} from "./chunk-ZDQGQY7Z.js";
 import {
   WalletIcon
 } from "./chunk-VZIXXIU5.js";
@@ -134,6 +134,7 @@ var AuthFormProvider = ({
 }) => {
   const { crossmintAuth } = useCrossmintAuth();
   const [step, setStep] = useState("initial");
+  const [error, setError] = useState(null);
   const [oauthUrlMap, setOauthUrlMap] = useState(initialOAuthUrlMap);
   const [isLoadingOauthUrlMap, setIsLoadingOauthUrlMap] = useState(true);
   const { loginMethods, baseUrl, setDialogOpen, appearance, embeddedWallets } = initialState;
@@ -152,8 +153,9 @@ var AuthFormProvider = ({
       }));
       const oauthUrlMap2 = Object.assign({}, ...yield Promise.all(oauthPromiseList));
       setOauthUrlMap(oauthUrlMap2);
-    } catch (error) {
-      console.error("Error fetching OAuth URLs:", error);
+    } catch (error2) {
+      console.error("Error fetching OAuth URLs:", error2);
+      setError("Unable to load oauth providers. Please try again later.");
     } finally {
       setIsLoadingOauthUrlMap(false);
     }
@@ -169,12 +171,14 @@ var AuthFormProvider = ({
   };
   const value = {
     step,
+    error,
     baseUrl,
     appearance,
     loginMethods,
     oauthUrlMap,
     isLoadingOauthUrlMap,
     setDialogOpen: handleToggleDialog,
+    setError,
     setStep
   };
   return /* @__PURE__ */ jsx(AuthFormContext.Provider, { value, children: /* @__PURE__ */ jsx(WagmiAuthProvider, { children }) });
@@ -185,7 +189,41 @@ import { useState as useState4 } from "react";
 
 // src/components/auth/methods/email/EmailOTPInput.tsx
 import { useState as useState2 } from "react";
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+
+// src/components/auth/AuthFormBackButton.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var AuthFormBackButton = (_a) => {
+  var _b = _a, {
+    className,
+    iconColor,
+    ringColor,
+    onClick
+  } = _b, props = __objRest(_b, [
+    "className",
+    "iconColor",
+    "ringColor",
+    "onClick"
+  ]);
+  const { setError } = useAuthForm();
+  return /* @__PURE__ */ jsx2(
+    "button",
+    __spreadProps(__spreadValues({
+      className: classNames(
+        "absolute left-4 top-4 min-[480px]:!left-6 min-[480px]:!top-6 rounded-full opacity-70 ring-offset-background text-cm-text-primary transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-cm-accent focus:ring-offset-2 disabled:pointer-events-none",
+        className
+      ),
+      onClick: (event) => {
+        setError(null);
+        onClick == null ? void 0 : onClick(event);
+      }
+    }, props), {
+      children: /* @__PURE__ */ jsx2(LeftArrowIcon, { className: "w-6 h-6", style: { color: iconColor } })
+    })
+  );
+};
+
+// src/components/auth/methods/email/EmailOTPInput.tsx
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
 var EMAIL_VERIFICATION_TOKEN_LENGTH = 6;
 function EmailOTPInput({
   otpEmailData,
@@ -193,7 +231,7 @@ function EmailOTPInput({
 }) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u;
   const { crossmintAuth } = useCrossmintAuth();
-  const { appearance, setDialogOpen, setStep } = useAuthForm();
+  const { appearance, setDialogOpen, setStep, setError } = useAuthForm();
   const [token, setToken] = useState2("");
   const [hasError, setHasError] = useState2(false);
   const [loading, setLoading] = useState2(false);
@@ -209,8 +247,9 @@ function EmailOTPInput({
       yield crossmintAuth == null ? void 0 : crossmintAuth.handleRefreshAuthMaterial(oneTimeSecret);
       setDialogOpen(false);
       setStep("initial");
-    } catch (e) {
-      console.error("Error signing in via email ", e);
+    } catch (error) {
+      console.error("Error confirming email OTP", error);
+      setError("Invalid code. Please try again.");
       setHasError(true);
     } finally {
       setLoading(false);
@@ -221,7 +260,7 @@ function EmailOTPInput({
     setOtpEmailData(null);
   };
   return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsx2(
+    /* @__PURE__ */ jsx3(
       AuthFormBackButton,
       {
         onClick: handleOnBack,
@@ -230,7 +269,7 @@ function EmailOTPInput({
       }
     ),
     /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-start w-full", children: [
-      /* @__PURE__ */ jsx2("div", { className: "relative left-3", children: /* @__PURE__ */ jsx2(
+      /* @__PURE__ */ jsx3("div", { className: "relative left-3", children: /* @__PURE__ */ jsx3(
         EmailOtpIcon,
         {
           customAccentColor: (_c = appearance == null ? void 0 : appearance.colors) == null ? void 0 : _c.accent,
@@ -238,7 +277,7 @@ function EmailOTPInput({
           customBackgroundColor: (_e = appearance == null ? void 0 : appearance.colors) == null ? void 0 : _e.background
         }
       ) }),
-      /* @__PURE__ */ jsx2(
+      /* @__PURE__ */ jsx3(
         "p",
         {
           className: "text-base font-normal mt-4 mb-1 text-center text-cm-text-primary",
@@ -246,7 +285,7 @@ function EmailOTPInput({
           children: "Check your email"
         }
       ),
-      /* @__PURE__ */ jsx2(
+      /* @__PURE__ */ jsx3(
         "p",
         {
           className: "text-center text-cm-text-secondary px-4",
@@ -254,7 +293,7 @@ function EmailOTPInput({
           children: "A temporary login code has been sent to your email"
         }
       ),
-      /* @__PURE__ */ jsx2("div", { className: "py-8", children: /* @__PURE__ */ jsx2(
+      /* @__PURE__ */ jsx3("div", { className: "py-8", children: /* @__PURE__ */ jsx3(
         InputOTP,
         {
           maxLength: EMAIL_VERIFICATION_TOKEN_LENGTH,
@@ -262,6 +301,7 @@ function EmailOTPInput({
           onChange: (val) => {
             setToken(val);
             setHasError(false);
+            setError(null);
           },
           onComplete: handleOnSubmit,
           disabled: loading,
@@ -275,19 +315,19 @@ function EmailOTPInput({
             borderRadius: appearance == null ? void 0 : appearance.borderRadius
           },
           children: /* @__PURE__ */ jsxs(InputOTPGroup, { children: [
-            /* @__PURE__ */ jsx2(InputOTPSlot, { index: 0, hasError }),
-            /* @__PURE__ */ jsx2(InputOTPSlot, { index: 1, hasError }),
-            /* @__PURE__ */ jsx2(InputOTPSlot, { index: 2, hasError }),
-            /* @__PURE__ */ jsx2(InputOTPSlot, { index: 3, hasError }),
-            /* @__PURE__ */ jsx2(InputOTPSlot, { index: 4, hasError }),
-            /* @__PURE__ */ jsx2(InputOTPSlot, { index: 5, hasError })
+            /* @__PURE__ */ jsx3(InputOTPSlot, { index: 0, hasError }),
+            /* @__PURE__ */ jsx3(InputOTPSlot, { index: 1, hasError }),
+            /* @__PURE__ */ jsx3(InputOTPSlot, { index: 2, hasError }),
+            /* @__PURE__ */ jsx3(InputOTPSlot, { index: 3, hasError }),
+            /* @__PURE__ */ jsx3(InputOTPSlot, { index: 4, hasError }),
+            /* @__PURE__ */ jsx3(InputOTPSlot, { index: 5, hasError })
           ] })
         }
       ) }),
       /* @__PURE__ */ jsxs("p", { className: "text-sm leading-tight text-cm-text-secondary text-center", children: [
-        /* @__PURE__ */ jsx2("span", { style: { color: (_t = appearance == null ? void 0 : appearance.colors) == null ? void 0 : _t.textSecondary }, children: "Can't find the email? Check spam folder or contact" }),
+        /* @__PURE__ */ jsx3("span", { style: { color: (_t = appearance == null ? void 0 : appearance.colors) == null ? void 0 : _t.textSecondary }, children: "Can't find the email? Check spam folder or contact" }),
         " ",
-        /* @__PURE__ */ jsx2(
+        /* @__PURE__ */ jsx3(
           "a",
           {
             className: "transition-opacity duration-150 text-cm-link hover:opacity-70",
@@ -306,11 +346,11 @@ function EmailOTPInput({
 import { useState as useState3 } from "react";
 import Color from "color";
 import { isEmailValid } from "@crossmint/common-sdk-auth";
-import { Fragment, jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
 function EmailSignIn({ setOtpEmailData }) {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
   const { crossmintAuth } = useCrossmintAuth();
-  const { appearance, setStep } = useAuthForm();
+  const { appearance, setStep, setError } = useAuthForm();
   const [emailInput, setEmailInput] = useState3("");
   const [emailError, setEmailError] = useState3("");
   const [isLoading, setIsLoading] = useState3(false);
@@ -329,11 +369,11 @@ function EmailSignIn({ setOtpEmailData }) {
         setStep("otp");
       } catch (_e2) {
         setIsLoading(false);
-        setEmailError("Failed to send email. Please try again or contact support.");
+        setError("Failed to send email. Please try again or contact support.");
       }
     });
   }
-  return /* @__PURE__ */ jsx3(Fragment, { children: /* @__PURE__ */ jsx3("div", { className: "flex flex-col items-start justify-start w-full rounded-lg", children: /* @__PURE__ */ jsxs2("div", { className: "w-full", children: [
+  return /* @__PURE__ */ jsx4(Fragment, { children: /* @__PURE__ */ jsx4("div", { className: "flex flex-col items-start justify-start w-full rounded-lg", children: /* @__PURE__ */ jsxs2("div", { className: "w-full", children: [
     /* @__PURE__ */ jsxs2(
       "form",
       {
@@ -342,8 +382,8 @@ function EmailSignIn({ setOtpEmailData }) {
         onSubmit: handleOnSubmit,
         noValidate: true,
         children: [
-          /* @__PURE__ */ jsx3("label", { htmlFor: "emailInput", className: "sr-only", children: "Email" }),
-          /* @__PURE__ */ jsx3(
+          /* @__PURE__ */ jsx4("label", { htmlFor: "emailInput", className: "sr-only", children: "Email" }),
+          /* @__PURE__ */ jsx4(
             "input",
             {
               className: classNames(
@@ -367,14 +407,15 @@ function EmailSignIn({ setOtpEmailData }) {
               onChange: (e) => {
                 setEmailInput(e.target.value);
                 setEmailError("");
+                setError(null);
               },
               readOnly: isLoading,
               "aria-describedby": "emailError"
             }
           ),
           /* @__PURE__ */ jsxs2("div", { className: "absolute inset-y-0 right-0 flex items-center pr-4", children: [
-            emailError && /* @__PURE__ */ jsx3(AlertIcon, { customColor: (_g = appearance == null ? void 0 : appearance.colors) == null ? void 0 : _g.danger }),
-            isLoading && /* @__PURE__ */ jsx3(
+            emailError && /* @__PURE__ */ jsx4(AlertIcon, { customColor: (_g = appearance == null ? void 0 : appearance.colors) == null ? void 0 : _g.danger }),
+            isLoading && /* @__PURE__ */ jsx4(
               Spinner,
               {
                 style: {
@@ -383,7 +424,7 @@ function EmailSignIn({ setOtpEmailData }) {
                 }
               }
             ),
-            !emailError && !isLoading && /* @__PURE__ */ jsx3(
+            !emailError && !isLoading && /* @__PURE__ */ jsx4(
               "button",
               {
                 type: "submit",
@@ -397,26 +438,26 @@ function EmailSignIn({ setOtpEmailData }) {
         ]
       }
     ),
-    emailError && /* @__PURE__ */ jsx3("p", { className: "text-xs text-red-500 mb-2 pt-2", children: emailError })
+    emailError && /* @__PURE__ */ jsx4("p", { className: "text-xs text-red-500 mb-2 pt-2", children: emailError })
   ] }) }) });
 }
 
 // src/components/auth/methods/email/EmailAuthFlow.tsx
-import { jsx as jsx4 } from "react/jsx-runtime";
+import { jsx as jsx5 } from "react/jsx-runtime";
 function EmailAuthFlow() {
   const { step } = useAuthForm();
   const [otpEmailData, setOtpEmailData] = useState4(null);
   if (step === "otp") {
-    return /* @__PURE__ */ jsx4(EmailOTPInput, { otpEmailData, setOtpEmailData });
+    return /* @__PURE__ */ jsx5(EmailOTPInput, { otpEmailData, setOtpEmailData });
   }
   if (step === "initial") {
-    return /* @__PURE__ */ jsx4(EmailSignIn, { setOtpEmailData });
+    return /* @__PURE__ */ jsx5(EmailSignIn, { setOtpEmailData });
   }
   return null;
 }
 
 // src/components/common/Divider.tsx
-import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
 function Divider({ appearance, text }) {
   var _a, _b, _c;
   const { step } = useAuthForm();
@@ -424,8 +465,8 @@ function Divider({ appearance, text }) {
     return null;
   }
   return /* @__PURE__ */ jsxs3("div", { className: "flex items-center justify-center w-full pt-2 pb-3", children: [
-    /* @__PURE__ */ jsx5("span", { className: "w-full h-[1px] bg-cm-border", style: { backgroundColor: (_a = appearance == null ? void 0 : appearance.colors) == null ? void 0 : _a.border } }),
-    text != null ? /* @__PURE__ */ jsx5(
+    /* @__PURE__ */ jsx6("span", { className: "w-full h-[1px] bg-cm-border", style: { backgroundColor: (_a = appearance == null ? void 0 : appearance.colors) == null ? void 0 : _a.border } }),
+    text != null ? /* @__PURE__ */ jsx6(
       "p",
       {
         className: "flex-none px-2 text-sm text-cm-text-primary",
@@ -433,7 +474,7 @@ function Divider({ appearance, text }) {
         children: text
       }
     ) : null,
-    /* @__PURE__ */ jsx5("span", { className: "w-full h-[1px] bg-cm-border", style: { backgroundColor: (_c = appearance == null ? void 0 : appearance.colors) == null ? void 0 : _c.border } })
+    /* @__PURE__ */ jsx6("span", { className: "w-full h-[1px] bg-cm-border", style: { backgroundColor: (_c = appearance == null ? void 0 : appearance.colors) == null ? void 0 : _c.border } })
   ] });
 }
 
@@ -443,14 +484,13 @@ import { useEffect as useEffect2, useRef, useState as useState5 } from "react";
 import { z } from "zod";
 var useOAuthWindowListener = (provider) => {
   const { crossmintAuth } = useCrossmintAuth();
-  const { oauthUrlMap } = useAuthForm();
+  const { oauthUrlMap, setError } = useAuthForm();
   const [isLoading, setIsLoading] = useState5(false);
   const childRef = useRef(null);
   useEffect2(() => {
     if (childRef.current == null) {
       childRef.current = new ChildWindow(window.opener || window.parent, "*", {
-        incomingEvents,
-        outgoingEvents
+        incomingEvents
       });
     }
     return () => {
@@ -464,6 +504,7 @@ var useOAuthWindowListener = (provider) => {
       throw new Error("Child window not initialized");
     }
     setIsLoading(true);
+    setError(null);
     const popup = yield PopupWindow.init(oauthUrlMap[provider], {
       awaitToLoad: false,
       crossOrigin: true,
@@ -477,7 +518,15 @@ var useOAuthWindowListener = (provider) => {
       popup.window.close();
       setIsLoading(false);
     });
+    const handleError = (data) => {
+      var _a;
+      setError(data.error);
+      (_a = childRef.current) == null ? void 0 : _a.off("errorFromPopupCallback");
+      popup.window.close();
+      setIsLoading(false);
+    };
     childRef.current.on("authMaterialFromPopupCallback", handleAuthMaterial);
+    childRef.current.on("errorFromPopupCallback", handleError);
     const checkWindowClosure = setInterval(() => {
       var _a;
       if (popup.window.closed) {
@@ -493,14 +542,12 @@ var useOAuthWindowListener = (provider) => {
   };
 };
 var incomingEvents = {
-  authMaterialFromPopupCallback: z.object({ oneTimeSecret: z.string() })
-};
-var outgoingEvents = {
-  authMaterialFromAuthFrame: z.object({ oneTimeSecret: z.string() })
+  authMaterialFromPopupCallback: z.object({ oneTimeSecret: z.string() }),
+  errorFromPopupCallback: z.object({ error: z.string() })
 };
 
 // src/components/auth/methods/google/GoogleSignIn.tsx
-import { Fragment as Fragment2, jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
 function GoogleSignIn(_a) {
   var props = __objRest(_a, []);
   var _a2, _b, _c, _d;
@@ -527,8 +574,8 @@ function GoogleSignIn(_a) {
     }, props), {
       children: [
         /* @__PURE__ */ jsxs4(Fragment2, { children: [
-          /* @__PURE__ */ jsx6(GoogleIcon, { className: "h-[25px] w-[25px] absolute left-[18px]" }),
-          isLoading ? /* @__PURE__ */ jsx6(
+          /* @__PURE__ */ jsx7(GoogleIcon, { className: "h-[25px] w-[25px] absolute left-[18px]" }),
+          isLoading ? /* @__PURE__ */ jsx7(
             Spinner,
             {
               style: {
@@ -536,7 +583,7 @@ function GoogleSignIn(_a) {
                 fill: (_c = appearance == null ? void 0 : appearance.colors) == null ? void 0 : _c.textPrimary
               }
             }
-          ) : /* @__PURE__ */ jsx6(
+          ) : /* @__PURE__ */ jsx7(
             "span",
             {
               className: "font-medium",
@@ -545,7 +592,7 @@ function GoogleSignIn(_a) {
             }
           )
         ] }),
-        /* @__PURE__ */ jsx6("span", { className: "sr-only", children: "Sign in with Google" })
+        /* @__PURE__ */ jsx7("span", { className: "sr-only", children: "Sign in with Google" })
       ]
     })
   );
@@ -554,12 +601,12 @@ function GoogleSignIn(_a) {
 // src/components/auth/methods/farcaster/FarcasterSignIn.tsx
 import { useEffect as useEffect3, useMemo, useState as useState6 } from "react";
 import { useSignIn, QRCode } from "@farcaster/auth-kit";
-import { Fragment as Fragment3, jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
 function FarcasterSignIn() {
   var _a, _b;
-  const { step, appearance, setStep } = useAuthForm();
+  const { step, appearance, setStep, setError } = useAuthForm();
   if (step === "initial") {
-    return /* @__PURE__ */ jsx7("div", { children: /* @__PURE__ */ jsxs5(
+    return /* @__PURE__ */ jsx8("div", { children: /* @__PURE__ */ jsxs5(
       "button",
       {
         className: classNames(
@@ -573,10 +620,11 @@ function FarcasterSignIn() {
         },
         onClick: () => {
           setStep("qrCode");
+          setError(null);
         },
         children: [
-          /* @__PURE__ */ jsx7(FarcasterIcon, { className: "h-[25px] w-[25px] absolute left-[18px]" }),
-          /* @__PURE__ */ jsx7(
+          /* @__PURE__ */ jsx8(FarcasterIcon, { className: "h-[25px] w-[25px] absolute left-[18px]" }),
+          /* @__PURE__ */ jsx8(
             "span",
             {
               className: "font-medium",
@@ -584,20 +632,20 @@ function FarcasterSignIn() {
               children: "Sign in with Farcaster"
             }
           ),
-          /* @__PURE__ */ jsx7("span", { className: "sr-only", children: "Sign in with Farcaster" })
+          /* @__PURE__ */ jsx8("span", { className: "sr-only", children: "Sign in with Farcaster" })
         ]
       }
     ) });
   }
   if (step === "qrCode") {
-    return /* @__PURE__ */ jsx7(FarcasterQRCode, {});
+    return /* @__PURE__ */ jsx8(FarcasterQRCode, {});
   }
   return null;
 }
 function FarcasterQRCode() {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i;
   const { crossmintAuth } = useCrossmintAuth();
-  const { appearance, setStep, setDialogOpen } = useAuthForm();
+  const { appearance, setStep, setDialogOpen, setError } = useAuthForm();
   const [farcasterData, setFarcasterData] = useState6(null);
   const farcasterProps = useMemo(
     () => ({
@@ -609,6 +657,7 @@ function FarcasterQRCode() {
   );
   const { signIn, url: qrCodeUrl, connect, signOut, isConnected } = useSignIn(farcasterProps);
   const handleFarcasterSignIn = (data) => __async(this, null, function* () {
+    setError(null);
     try {
       const oneTimeSecret = yield crossmintAuth == null ? void 0 : crossmintAuth.signInWithFarcaster(data);
       yield crossmintAuth == null ? void 0 : crossmintAuth.handleRefreshAuthMaterial(oneTimeSecret);
@@ -616,6 +665,7 @@ function FarcasterQRCode() {
       setStep("initial");
     } catch (error) {
       console.error("Error during Farcaster sign-in:", error);
+      setError("Failed to sign in with Farcaster");
     }
   });
   useEffect3(() => {
@@ -632,7 +682,7 @@ function FarcasterQRCode() {
     connect();
   }, []);
   return /* @__PURE__ */ jsxs5("div", { children: [
-    /* @__PURE__ */ jsx7(
+    /* @__PURE__ */ jsx8(
       AuthFormBackButton,
       {
         onClick: () => {
@@ -645,7 +695,7 @@ function FarcasterQRCode() {
     ),
     /* @__PURE__ */ jsxs5("div", { className: "flex flex-col items-center gap-4", children: [
       /* @__PURE__ */ jsxs5("div", { className: "text-center", children: [
-        /* @__PURE__ */ jsx7(
+        /* @__PURE__ */ jsx8(
           "h3",
           {
             className: "text-lg font-semibold text-cm-text-primary mb-2",
@@ -653,7 +703,7 @@ function FarcasterQRCode() {
             children: "Sign in with Farcaster"
           }
         ),
-        /* @__PURE__ */ jsx7(
+        /* @__PURE__ */ jsx8(
           "p",
           {
             className: "text-base font-normal text-cm-text-secondary",
@@ -662,7 +712,7 @@ function FarcasterQRCode() {
           }
         )
       ] }),
-      /* @__PURE__ */ jsx7(
+      /* @__PURE__ */ jsx8(
         "div",
         {
           className: "bg-white aspect-square rounded-lg p-4",
@@ -670,7 +720,7 @@ function FarcasterQRCode() {
             backgroundColor: (_e = appearance == null ? void 0 : appearance.colors) == null ? void 0 : _e.inputBackground,
             borderRadius: appearance == null ? void 0 : appearance.borderRadius
           },
-          children: qrCodeUrl != null ? /* @__PURE__ */ jsx7(QRCode, { uri: qrCodeUrl, size: 280 }) : /* @__PURE__ */ jsx7("div", { className: "min-h-[246px] flex items-center justify-center", children: /* @__PURE__ */ jsx7(
+          children: qrCodeUrl != null ? /* @__PURE__ */ jsx8(QRCode, { uri: qrCodeUrl, size: 280 }) : /* @__PURE__ */ jsx8("div", { className: "min-h-[246px] flex items-center justify-center", children: /* @__PURE__ */ jsx8(
             Spinner,
             {
               style: {
@@ -682,7 +732,7 @@ function FarcasterQRCode() {
         }
       ),
       qrCodeUrl ? /* @__PURE__ */ jsxs5(Fragment3, { children: [
-        /* @__PURE__ */ jsx7(
+        /* @__PURE__ */ jsx8(
           "p",
           {
             className: "text-base text-center font-normal text-cm-text-secondary",
@@ -690,7 +740,7 @@ function FarcasterQRCode() {
             children: "Alternatively, click on this link to open Warpcast."
           }
         ),
-        /* @__PURE__ */ jsx7(
+        /* @__PURE__ */ jsx8(
           "a",
           {
             href: qrCodeUrl,
@@ -706,11 +756,11 @@ function FarcasterQRCode() {
   ] });
 }
 
-// src/components/auth/methods/web3/Web3SignIn.tsx
-import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
-function Web3SignIn() {
+// src/components/auth/methods/web3/Web3AuthFlowButton.tsx
+import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+function Web3AuthFlowButton() {
   var _a, _b, _c, _d, _e;
-  const { step, appearance, setStep } = useAuthForm();
+  const { step, appearance, setStep, setError } = useAuthForm();
   if (step !== "initial") {
     return null;
   }
@@ -727,39 +777,41 @@ function Web3SignIn() {
         borderColor: (_a = appearance == null ? void 0 : appearance.colors) == null ? void 0 : _a.border,
         backgroundColor: (_b = appearance == null ? void 0 : appearance.colors) == null ? void 0 : _b.buttonBackground
       },
-      onClick: () => setStep("web3"),
+      onClick: () => {
+        setStep("web3");
+        setError(null);
+      },
       children: [
-        /* @__PURE__ */ jsx8(
+        /* @__PURE__ */ jsx9(
           WalletIcon,
           {
             className: "h-[21px] w-[21px] absolute left-[20px]",
             style: { color: (_c = appearance == null ? void 0 : appearance.colors) == null ? void 0 : _c.textPrimary }
           }
         ),
-        /* @__PURE__ */ jsx8("span", { className: "font-medium", style: { margin: "0px 32px", color: (_d = appearance == null ? void 0 : appearance.colors) == null ? void 0 : _d.textPrimary }, children: "Continue with a wallet" }),
-        /* @__PURE__ */ jsx8(
+        /* @__PURE__ */ jsx9("span", { className: "font-medium", style: { margin: "0px 32px", color: (_d = appearance == null ? void 0 : appearance.colors) == null ? void 0 : _d.textPrimary }, children: "Continue with a wallet" }),
+        /* @__PURE__ */ jsx9(
           ChevronRightIcon,
           {
             className: "h-[21px] w-[21px] absolute right-[20px]",
             style: { color: (_e = appearance == null ? void 0 : appearance.colors) == null ? void 0 : _e.textSecondary }
           }
         ),
-        /* @__PURE__ */ jsx8("span", { className: "sr-only", children: "Continue with a wallet" })
+        /* @__PURE__ */ jsx9("span", { className: "sr-only", children: "Continue with a wallet" })
       ]
     }
   );
 }
 
-// src/components/auth/methods/web3/Web3AuthWrapper.tsx
+// src/components/auth/methods/web3/Web3ConnectorContainer.tsx
 import { useState as useState7, useEffect as useEffect4 } from "react";
 import { useAccount, useChainId, useConnect, useSignMessage } from "wagmi";
-import { jsx as jsx9 } from "react/jsx-runtime";
-function Web3AuthWrapper({ providerType, flag, icon }) {
+import { jsx as jsx10 } from "react/jsx-runtime";
+function Web3ConnectorContainer({ providerType, flag, icon }) {
   var _a, _b;
   const { crossmintAuth } = useCrossmintAuth();
-  const { appearance } = useAuthForm();
+  const { appearance, error, setError } = useAuthForm();
   const [isLoading, setIsLoading] = useState7(false);
-  const [error, setError] = useState7(null);
   const chainId = useChainId();
   const { address, status: accountStatus } = useAccount();
   const { signMessageAsync, status: signMessageStatus } = useSignMessage();
@@ -783,6 +835,7 @@ function Web3AuthWrapper({ providerType, flag, icon }) {
       return;
     }
     setIsLoading(true);
+    setError(null);
     try {
       const res = yield crossmintAuth == null ? void 0 : crossmintAuth.signInWithSmartWallet(address);
       const signature = yield signMessageAsync({ message: res.challenge });
@@ -797,8 +850,8 @@ function Web3AuthWrapper({ providerType, flag, icon }) {
     }
   });
   const isLoadingOrPending = isLoading || accountStatus === "connecting" || accountStatus === "reconnecting" || signMessageStatus === "pending";
-  return /* @__PURE__ */ jsx9(
-    Web3ConnectButton,
+  return /* @__PURE__ */ jsx10(
+    Web3Connector,
     {
       icon,
       appearance,
@@ -818,7 +871,7 @@ function Web3AuthWrapper({ providerType, flag, icon }) {
 
 // src/components/auth/methods/web3/Web3Connectors.tsx
 import { useAccount as useAccount2, useDisconnect } from "wagmi";
-import { Fragment as Fragment4, jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
 function Web3Connectors() {
   var _a, _b, _c, _d, _e, _f, _g;
   const { appearance, step, setStep } = useAuthForm();
@@ -826,7 +879,7 @@ function Web3Connectors() {
   const { disconnect } = useDisconnect();
   if (step === "web3") {
     return /* @__PURE__ */ jsxs7(Fragment4, { children: [
-      /* @__PURE__ */ jsx10(
+      /* @__PURE__ */ jsx11(
         AuthFormBackButton,
         {
           onClick: () => setStep("initial"),
@@ -835,7 +888,7 @@ function Web3Connectors() {
         }
       ),
       /* @__PURE__ */ jsxs7("div", { className: "flex flex-col items-center gap-2", children: [
-        /* @__PURE__ */ jsx10("div", { className: "text-center mb-6", children: /* @__PURE__ */ jsx10(
+        /* @__PURE__ */ jsx11("div", { className: "text-center mb-6", children: /* @__PURE__ */ jsx11(
           "h3",
           {
             className: "text-lg font-semibold text-cm-text-primary",
@@ -844,8 +897,8 @@ function Web3Connectors() {
           }
         ) }),
         /* @__PURE__ */ jsxs7("div", { className: "flex flex-col gap-[10px] w-full", children: [
-          /* @__PURE__ */ jsx10(
-            Web3ProviderButton,
+          /* @__PURE__ */ jsx11(
+            Web3ConnectorButton,
             {
               title: "Metamask",
               appearance,
@@ -860,8 +913,8 @@ function Web3Connectors() {
               }
             }
           ),
-          /* @__PURE__ */ jsx10(
-            Web3ProviderButton,
+          /* @__PURE__ */ jsx11(
+            Web3ConnectorButton,
             {
               title: "WalletConnect",
               appearance,
@@ -882,119 +935,146 @@ function Web3Connectors() {
   }
   if (step === "web3/metamask") {
     return /* @__PURE__ */ jsxs7(Fragment4, { children: [
-      /* @__PURE__ */ jsx10(
+      /* @__PURE__ */ jsx11(
         AuthFormBackButton,
         {
-          onClick: () => setStep("web3"),
+          onClick: () => {
+            setStep("web3");
+          },
           iconColor: (_d = appearance == null ? void 0 : appearance.colors) == null ? void 0 : _d.textPrimary,
           ringColor: (_e = appearance == null ? void 0 : appearance.colors) == null ? void 0 : _e.accent
         }
       ),
-      /* @__PURE__ */ jsx10(Web3AuthWrapper, { providerType: "metaMaskSDK", flag: "isMetaMask", icon: metamaskIcon })
+      /* @__PURE__ */ jsx11(Web3ConnectorContainer, { providerType: "metaMaskSDK", flag: "isMetaMask", icon: metamaskIcon })
     ] });
   }
   if (step === "web3/walletconnect") {
     return /* @__PURE__ */ jsxs7(Fragment4, { children: [
-      /* @__PURE__ */ jsx10(
+      /* @__PURE__ */ jsx11(
         AuthFormBackButton,
         {
-          onClick: () => setStep("web3"),
+          onClick: () => {
+            setStep("web3");
+          },
           iconColor: (_f = appearance == null ? void 0 : appearance.colors) == null ? void 0 : _f.textPrimary,
           ringColor: (_g = appearance == null ? void 0 : appearance.colors) == null ? void 0 : _g.accent
         }
       ),
-      /* @__PURE__ */ jsx10(Web3AuthWrapper, { providerType: "walletConnect", icon: walletConnectIcon })
+      /* @__PURE__ */ jsx11(Web3ConnectorContainer, { providerType: "walletConnect", icon: walletConnectIcon })
     ] });
   }
   return null;
 }
 
 // src/components/auth/methods/web3/Web3AuthFlow.tsx
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { jsx as jsx12 } from "react/jsx-runtime";
 function Web3AuthFlow() {
   const { step } = useAuthForm();
   if (step.startsWith("web3")) {
-    return /* @__PURE__ */ jsx11(Web3Connectors, {});
+    return /* @__PURE__ */ jsx12(Web3Connectors, {});
   }
   if (step === "initial") {
-    return /* @__PURE__ */ jsx11(Web3SignIn, {});
+    return /* @__PURE__ */ jsx12(Web3AuthFlowButton, {});
   }
   return null;
 }
 
 // src/components/auth/AuthForm.tsx
-import { Fragment as Fragment5, jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
+import Color2 from "color";
+import { Fragment as Fragment5, jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
 function AuthForm({ className }) {
-  var _a, _b, _c, _d;
-  const { step, appearance, loginMethods, baseUrl } = useAuthForm();
-  return /* @__PURE__ */ jsxs8("div", { className: classNames("flex flex-col gap-[10px] antialiased animate-none", className), children: [
-    step === "initial" ? /* @__PURE__ */ jsxs8("div", { children: [
-      /* @__PURE__ */ jsx12(
-        "h1",
-        {
-          className: "text-2xl font-bold text-cm-text-primary",
-          style: { color: (_a = appearance == null ? void 0 : appearance.colors) == null ? void 0 : _a.textPrimary },
-          children: "Sign In"
-        }
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+  const { step, appearance, loginMethods, baseUrl, error } = useAuthForm();
+  return /* @__PURE__ */ jsxs8(
+    "div",
+    {
+      className: classNames(
+        "relative p-6 pb-4 !min-[480px]:p-10 !min-[480px]:pb-8 flex flex-col gap-[10px] antialiased animate-none",
+        className
       ),
-      /* @__PURE__ */ jsx12(
-        "p",
-        {
-          className: "text-base font-normal mb-3 text-cm-text-secondary",
-          style: { color: (_b = appearance == null ? void 0 : appearance.colors) == null ? void 0 : _b.textSecondary },
-          children: "Sign in using one of the options below"
-        }
-      )
-    ] }) : null,
-    loginMethods.includes("email") ? /* @__PURE__ */ jsxs8(Fragment5, { children: [
-      /* @__PURE__ */ jsx12(EmailAuthFlow, {}),
-      loginMethods.length > 1 ? /* @__PURE__ */ jsx12(Divider, { appearance, text: "OR" }) : null
-    ] }) : null,
-    loginMethods.includes("google") ? /* @__PURE__ */ jsx12(GoogleSignIn, {}) : null,
-    loginMethods.includes("farcaster") ? /* @__PURE__ */ jsx12(FarcasterProvider, { baseUrl, children: /* @__PURE__ */ jsx12(FarcasterSignIn, {}) }) : null,
-    loginMethods.includes("web3") ? /* @__PURE__ */ jsx12(Web3AuthFlow, {}) : null,
-    step === "initial" || step === "otp" ? /* @__PURE__ */ jsx12(
-      PoweredByCrossmint,
-      {
-        className: "mt-4 justify-center",
-        color: (_d = (_c = appearance == null ? void 0 : appearance.colors) == null ? void 0 : _c.textSecondary) != null ? _d : "#A4AFB2"
-      }
-    ) : null
-  ] });
+      children: [
+        error ? /* @__PURE__ */ jsxs8(
+          "div",
+          {
+            className: "flex items-start justify-start w-full rounded-lg p-2 mt-4 bg-cm-danger-muted",
+            style: {
+              backgroundColor: new Color2((_b = (_a = appearance == null ? void 0 : appearance.colors) == null ? void 0 : _a.danger) != null ? _b : "#f44336").alpha(0.12).toString()
+            },
+            children: [
+              /* @__PURE__ */ jsx13(AlertIcon, { customColor: (_d = (_c = appearance == null ? void 0 : appearance.colors) == null ? void 0 : _c.danger) != null ? _d : "#f44336" }),
+              /* @__PURE__ */ jsx13("p", { className: "ml-2 text-sm", style: { color: (_f = (_e = appearance == null ? void 0 : appearance.colors) == null ? void 0 : _e.danger) != null ? _f : "#f44336" }, children: error })
+            ]
+          }
+        ) : null,
+        step === "initial" ? /* @__PURE__ */ jsxs8("div", { children: [
+          /* @__PURE__ */ jsx13(
+            "h1",
+            {
+              className: "text-2xl font-bold text-cm-text-primary",
+              style: { color: (_g = appearance == null ? void 0 : appearance.colors) == null ? void 0 : _g.textPrimary },
+              children: "Sign In"
+            }
+          ),
+          /* @__PURE__ */ jsx13(
+            "p",
+            {
+              className: "text-base font-normal mb-3 text-cm-text-secondary",
+              style: { color: (_h = appearance == null ? void 0 : appearance.colors) == null ? void 0 : _h.textSecondary },
+              children: "Sign in using one of the options below"
+            }
+          )
+        ] }) : null,
+        loginMethods.includes("email") ? /* @__PURE__ */ jsxs8(Fragment5, { children: [
+          /* @__PURE__ */ jsx13(EmailAuthFlow, {}),
+          loginMethods.length > 1 ? /* @__PURE__ */ jsx13(Divider, { appearance, text: "OR" }) : null
+        ] }) : null,
+        loginMethods.includes("google") ? /* @__PURE__ */ jsx13(GoogleSignIn, {}) : null,
+        loginMethods.includes("farcaster") ? /* @__PURE__ */ jsx13(FarcasterProvider, { baseUrl, children: /* @__PURE__ */ jsx13(FarcasterSignIn, {}) }) : null,
+        loginMethods.includes("web3") ? /* @__PURE__ */ jsx13(Web3AuthFlow, {}) : null,
+        step === "initial" || step === "otp" ? /* @__PURE__ */ jsx13(
+          PoweredByCrossmint,
+          {
+            className: "mt-4 justify-center",
+            color: (_j = (_i = appearance == null ? void 0 : appearance.colors) == null ? void 0 : _i.textSecondary) != null ? _j : "#A4AFB2"
+          }
+        ) : null
+      ]
+    }
+  );
 }
 
 // src/components/auth/AuthFormDialog.tsx
 import { useEffect as useEffect5 } from "react";
-import { jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
 function AuthFormDialog({ open }) {
   var _a, _b, _c;
   const { appearance, setDialogOpen } = useAuthForm();
   useEffect5(() => {
     document.body.style.overflow = open ? "hidden" : "";
   }, [open]);
-  return /* @__PURE__ */ jsx13(Dialog, { modal: false, open, onOpenChange: setDialogOpen, children: /* @__PURE__ */ jsxs9(
+  return /* @__PURE__ */ jsx14(Dialog, { modal: false, open, onOpenChange: setDialogOpen, children: /* @__PURE__ */ jsxs9(
     DialogContent,
     {
       onInteractOutside: (e) => e.preventDefault(),
       onOpenAutoFocus: (e) => e.preventDefault(),
       closeButtonColor: (_a = appearance == null ? void 0 : appearance.colors) == null ? void 0 : _a.textPrimary,
       closeButtonRingColor: (_b = appearance == null ? void 0 : appearance.colors) == null ? void 0 : _b.accent,
-      className: "cm-responsive-border-radius-auth-dialog",
+      className: "cm-responsive-border-radius-auth-dialog !p-0 !min-[480px]:p-0",
       style: {
         borderRadius: appearance == null ? void 0 : appearance.borderRadius,
         backgroundColor: (_c = appearance == null ? void 0 : appearance.colors) == null ? void 0 : _c.background
       },
       children: [
-        /* @__PURE__ */ jsx13(VisuallyHidden, { asChild: true, children: /* @__PURE__ */ jsx13(DialogTitle, { children: "Crossmint Auth" }) }),
-        /* @__PURE__ */ jsx13(VisuallyHidden, { asChild: true, children: /* @__PURE__ */ jsx13(DialogDescription, { children: "Sign in via Crossmint" }) }),
-        /* @__PURE__ */ jsx13(AuthForm, { className: "max-w-[448px]" })
+        /* @__PURE__ */ jsx14(VisuallyHidden, { asChild: true, children: /* @__PURE__ */ jsx14(DialogTitle, { children: "Crossmint Auth" }) }),
+        /* @__PURE__ */ jsx14(VisuallyHidden, { asChild: true, children: /* @__PURE__ */ jsx14(DialogDescription, { children: "Sign in via Crossmint" }) }),
+        /* @__PURE__ */ jsx14(AuthForm, { className: "max-w-[448px]" })
       ]
     }
   ) });
 }
 
 // src/providers/CrossmintAuthProvider.tsx
-import { Fragment as Fragment6, jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
 var defaultContextValue = {
   crossmintAuth: void 0,
   login: () => {
@@ -1084,7 +1164,7 @@ function CrossmintAuthProvider({
     const user2 = yield crossmintAuth.getUser();
     setUser(user2);
   });
-  return /* @__PURE__ */ jsx14(TwindProvider, { children: /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx15(TwindProvider, { children: /* @__PURE__ */ jsx15(
     AuthContext.Provider,
     {
       value: {
@@ -1096,7 +1176,7 @@ function CrossmintAuthProvider({
         status: getAuthStatus(),
         getUser
       },
-      children: /* @__PURE__ */ jsx14(
+      children: /* @__PURE__ */ jsx15(
         CrossmintWalletProvider,
         {
           defaultChain: embeddedWallets.defaultChain,
@@ -1113,8 +1193,8 @@ function CrossmintAuthProvider({
                 baseUrl: crossmintBaseUrl
               },
               children: [
-                /* @__PURE__ */ jsx14(WalletManager, { embeddedWallets, accessToken: crossmint.jwt, children }),
-                /* @__PURE__ */ jsx14(AuthFormDialog, { open: dialogOpen })
+                /* @__PURE__ */ jsx15(WalletManager, { embeddedWallets, accessToken: crossmint.jwt, children }),
+                /* @__PURE__ */ jsx15(AuthFormDialog, { open: dialogOpen })
               ]
             }
           )
@@ -1140,7 +1220,7 @@ function WalletManager({
       clearWallet();
     }
   }, [accessToken, status]);
-  return /* @__PURE__ */ jsx14(Fragment6, { children });
+  return /* @__PURE__ */ jsx15(Fragment6, { children });
 }
 
 // src/hooks/useAuth.ts
@@ -1153,7 +1233,7 @@ function useAuth() {
 }
 
 // src/providers/CrossmintWalletProvider.tsx
-import { jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
 var WalletContext = createContext3({
   status: "not-loaded",
   getOrCreateWallet: () => Promise.resolve({ startedCreation: false }),
@@ -1225,7 +1305,7 @@ function CrossmintWalletProvider({
   };
   return /* @__PURE__ */ jsxs11(WalletContext.Provider, { value: __spreadProps(__spreadValues({}, walletState), { getOrCreateWallet, clearWallet }), children: [
     children,
-    passkeyPromptState.open ? createPortal(/* @__PURE__ */ jsx15(PasskeyPrompt, { state: passkeyPromptState, appearance }), document.body) : null
+    passkeyPromptState.open ? createPortal(/* @__PURE__ */ jsx16(PasskeyPrompt, { state: passkeyPromptState, appearance }), document.body) : null
   ] });
 }
 function deriveErrorState(error) {
@@ -1244,6 +1324,7 @@ export {
   useCrossmintAuth,
   useAuthForm,
   AuthFormProvider,
+  AuthFormBackButton,
   EMAIL_VERIFICATION_TOKEN_LENGTH,
   EmailOTPInput,
   EmailSignIn,
@@ -1252,8 +1333,8 @@ export {
   useOAuthWindowListener,
   GoogleSignIn,
   FarcasterSignIn,
-  Web3SignIn,
-  Web3AuthWrapper,
+  Web3AuthFlowButton,
+  Web3ConnectorContainer,
   Web3Connectors,
   Web3AuthFlow,
   AuthForm,
@@ -1262,4 +1343,4 @@ export {
   CrossmintAuthProvider,
   useAuth
 };
-//# sourceMappingURL=chunk-CUODMU27.js.map
+//# sourceMappingURL=chunk-T5WAVOPI.js.map