@crossmint/client-sdk-react-ui 1.10.2 → 1.10.4

package/dist/providers/auth/AuthFormProvider.cjs

@@ -1,9 +1,9 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
 
-var _chunkFOCUIKYHcjs = require('../../chunk-FOCUIKYH.cjs');
-require('../../chunk-DJ32OEWG.cjs');
-require('../../chunk-ZCYU7QA6.cjs');
+var _chunkEBMORHG3cjs = require('../../chunk-EBMORHG3.cjs');
+require('../../chunk-HSLAH2PN.cjs');
+require('../../chunk-Q3UM7UCM.cjs');
 require('../../chunk-5S4VO6RB.cjs');
 require('../../chunk-QQXBYOKA.cjs');
 require('../../chunk-MJHLKJ6X.cjs');
@@ -12,7 +12,6 @@ require('../../chunk-MH37OJT2.cjs');
 require('../../chunk-PBSL6JOF.cjs');
 require('../../chunk-B7LYPQ4K.cjs');
 require('../../chunk-BE2ZLB3L.cjs');
-require('../../chunk-GY6G3ZC2.cjs');
 require('../../chunk-5RX5WFEW.cjs');
 require('../../chunk-HCW4RO2O.cjs');
 require('../../chunk-UASNCH3A.cjs');
@@ -26,14 +25,14 @@ require('../../chunk-URKPLEPV.cjs');
 require('../../chunk-HPOZ6I54.cjs');
 require('../../chunk-YE55IKBP.cjs');
 require('../../chunk-ENCR5SUW.cjs');
-require('../../chunk-67AB7TWG.cjs');
-require('../../chunk-COLJFFZF.cjs');
+require('../../chunk-AQELE4DZ.cjs');
+require('../../chunk-RYB3MSFQ.cjs');
 require('../../chunk-KEKBOJCF.cjs');
 require('../../chunk-A2JCJ2OV.cjs');
-require('../../chunk-RTC2AZ6A.cjs');
+require('../../chunk-ITCHCRGX.cjs');
 require('../../chunk-4DAZAO6Y.cjs');
 
 
 
-exports.AuthFormProvider = _chunkFOCUIKYHcjs.AuthFormProvider; exports.useAuthForm = _chunkFOCUIKYHcjs.useAuthForm;
+exports.AuthFormProvider = _chunkEBMORHG3cjs.AuthFormProvider; exports.useAuthForm = _chunkEBMORHG3cjs.useAuthForm;
 //# sourceMappingURL=AuthFormProvider.cjs.map

package/dist/providers/auth/AuthFormProvider.d.cts

@@ -10,12 +10,14 @@ type AuthStep = "initial" | "otp" | "qrCode" | "web3" | "web3/metamask" | "web3/
 type OAuthUrlMap = Record<OAuthProvider, string>;
 interface AuthFormContextType {
     step: AuthStep;
+    error: string | null;
     appearance?: UIConfig;
     loginMethods: LoginMethod[];
     oauthUrlMap: OAuthUrlMap;
     isLoadingOauthUrlMap: boolean;
     baseUrl: string;
     setStep: (step: AuthStep) => void;
+    setError: (error: string | null) => void;
     setDialogOpen: (open: boolean) => void;
 }
 type ContextInitialStateProps = {

package/dist/providers/auth/AuthFormProvider.d.ts

@@ -10,12 +10,14 @@ type AuthStep = "initial" | "otp" | "qrCode" | "web3" | "web3/metamask" | "web3/
 type OAuthUrlMap = Record<OAuthProvider, string>;
 interface AuthFormContextType {
     step: AuthStep;
+    error: string | null;
     appearance?: UIConfig;
     loginMethods: LoginMethod[];
     oauthUrlMap: OAuthUrlMap;
     isLoadingOauthUrlMap: boolean;
     baseUrl: string;
     setStep: (step: AuthStep) => void;
+    setError: (error: string | null) => void;
     setDialogOpen: (open: boolean) => void;
 }
 type ContextInitialStateProps = {

package/dist/providers/auth/AuthFormProvider.js

@@ -1,9 +1,9 @@
 import {
   AuthFormProvider,
   useAuthForm
-} from "../../chunk-CUODMU27.js";
-import "../../chunk-WK5RAFJ3.js";
-import "../../chunk-6DNBJVR5.js";
+} from "../../chunk-T5WAVOPI.js";
+import "../../chunk-NFWMF6T7.js";
+import "../../chunk-ZSWTJ6E7.js";
 import "../../chunk-OZS4WEKF.js";
 import "../../chunk-A7J4DAE7.js";
 import "../../chunk-XEZF7G64.js";
@@ -12,7 +12,6 @@ import "../../chunk-33WZFL2D.js";
 import "../../chunk-FKIMKZ4Y.js";
 import "../../chunk-QTL5I5C2.js";
 import "../../chunk-HATQVB6H.js";
-import "../../chunk-QJ44PL7L.js";
 import "../../chunk-RZPQIRIY.js";
 import "../../chunk-ZDQGQY7Z.js";
 import "../../chunk-IQPA3QOV.js";
@@ -26,11 +25,11 @@ import "../../chunk-I63FQCIV.js";
 import "../../chunk-ZIHCLVCD.js";
 import "../../chunk-H4F7UVPT.js";
 import "../../chunk-YWVQCHQF.js";
-import "../../chunk-6TUZ5CU7.js";
-import "../../chunk-GN7OANUR.js";
+import "../../chunk-KCGRRFIF.js";
+import "../../chunk-EFT2TZG5.js";
 import "../../chunk-3J6CUUWT.js";
 import "../../chunk-AUEQQ4D3.js";
-import "../../chunk-MWRMO6JC.js";
+import "../../chunk-6PCSAKDU.js";
 import "../../chunk-CRTRMMJ7.js";
 export {
   AuthFormProvider,

package/dist/providers/index.cjs

@@ -3,9 +3,9 @@
 
 
 
-var _chunkFOCUIKYHcjs = require('../chunk-FOCUIKYH.cjs');
-require('../chunk-DJ32OEWG.cjs');
-require('../chunk-ZCYU7QA6.cjs');
+var _chunkEBMORHG3cjs = require('../chunk-EBMORHG3.cjs');
+require('../chunk-HSLAH2PN.cjs');
+require('../chunk-Q3UM7UCM.cjs');
 require('../chunk-5S4VO6RB.cjs');
 require('../chunk-QQXBYOKA.cjs');
 require('../chunk-MJHLKJ6X.cjs');
@@ -14,7 +14,6 @@ require('../chunk-MH37OJT2.cjs');
 require('../chunk-PBSL6JOF.cjs');
 require('../chunk-B7LYPQ4K.cjs');
 require('../chunk-BE2ZLB3L.cjs');
-require('../chunk-GY6G3ZC2.cjs');
 require('../chunk-5RX5WFEW.cjs');
 require('../chunk-HCW4RO2O.cjs');
 require('../chunk-UASNCH3A.cjs');
@@ -28,16 +27,16 @@ require('../chunk-URKPLEPV.cjs');
 require('../chunk-HPOZ6I54.cjs');
 require('../chunk-YE55IKBP.cjs');
 require('../chunk-ENCR5SUW.cjs');
-require('../chunk-67AB7TWG.cjs');
-require('../chunk-COLJFFZF.cjs');
+require('../chunk-AQELE4DZ.cjs');
+require('../chunk-RYB3MSFQ.cjs');
 require('../chunk-KEKBOJCF.cjs');
 require('../chunk-A2JCJ2OV.cjs');
-require('../chunk-RTC2AZ6A.cjs');
+require('../chunk-ITCHCRGX.cjs');
 require('../chunk-4DAZAO6Y.cjs');
 
 
 
 
 
-exports.AuthContext = _chunkFOCUIKYHcjs.AuthContext; exports.CrossmintAuthProvider = _chunkFOCUIKYHcjs.CrossmintAuthProvider; exports.CrossmintWalletProvider = _chunkFOCUIKYHcjs.CrossmintWalletProvider; exports.WalletContext = _chunkFOCUIKYHcjs.WalletContext;
+exports.AuthContext = _chunkEBMORHG3cjs.AuthContext; exports.CrossmintAuthProvider = _chunkEBMORHG3cjs.CrossmintAuthProvider; exports.CrossmintWalletProvider = _chunkEBMORHG3cjs.CrossmintWalletProvider; exports.WalletContext = _chunkEBMORHG3cjs.WalletContext;
 //# sourceMappingURL=index.cjs.map

package/dist/providers/index.js

@@ -3,9 +3,9 @@ import {
   CrossmintAuthProvider,
   CrossmintWalletProvider,
   WalletContext
-} from "../chunk-CUODMU27.js";
-import "../chunk-WK5RAFJ3.js";
-import "../chunk-6DNBJVR5.js";
+} from "../chunk-T5WAVOPI.js";
+import "../chunk-NFWMF6T7.js";
+import "../chunk-ZSWTJ6E7.js";
 import "../chunk-OZS4WEKF.js";
 import "../chunk-A7J4DAE7.js";
 import "../chunk-XEZF7G64.js";
@@ -14,7 +14,6 @@ import "../chunk-33WZFL2D.js";
 import "../chunk-FKIMKZ4Y.js";
 import "../chunk-QTL5I5C2.js";
 import "../chunk-HATQVB6H.js";
-import "../chunk-QJ44PL7L.js";
 import "../chunk-RZPQIRIY.js";
 import "../chunk-ZDQGQY7Z.js";
 import "../chunk-IQPA3QOV.js";
@@ -28,11 +27,11 @@ import "../chunk-I63FQCIV.js";
 import "../chunk-ZIHCLVCD.js";
 import "../chunk-H4F7UVPT.js";
 import "../chunk-YWVQCHQF.js";
-import "../chunk-6TUZ5CU7.js";
-import "../chunk-GN7OANUR.js";
+import "../chunk-KCGRRFIF.js";
+import "../chunk-EFT2TZG5.js";
 import "../chunk-3J6CUUWT.js";
 import "../chunk-AUEQQ4D3.js";
-import "../chunk-MWRMO6JC.js";
+import "../chunk-6PCSAKDU.js";
 import "../chunk-CRTRMMJ7.js";
 export {
   AuthContext,

package/dist/utils/createCrossmintApiClient.cjs

@@ -1,9 +1,9 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunkCOLJFFZFcjs = require('../chunk-COLJFFZF.cjs');
-require('../chunk-RTC2AZ6A.cjs');
+var _chunkRYB3MSFQcjs = require('../chunk-RYB3MSFQ.cjs');
+require('../chunk-ITCHCRGX.cjs');
 require('../chunk-4DAZAO6Y.cjs');
 
 
-exports.createCrossmintApiClient = _chunkCOLJFFZFcjs.createCrossmintApiClient;
+exports.createCrossmintApiClient = _chunkRYB3MSFQcjs.createCrossmintApiClient;
 //# sourceMappingURL=createCrossmintApiClient.cjs.map

package/dist/utils/createCrossmintApiClient.js

@@ -1,7 +1,7 @@
 import {
   createCrossmintApiClient
-} from "../chunk-GN7OANUR.js";
-import "../chunk-MWRMO6JC.js";
+} from "../chunk-EFT2TZG5.js";
+import "../chunk-6PCSAKDU.js";
 import "../chunk-CRTRMMJ7.js";
 export {
   createCrossmintApiClient

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crossmint/client-sdk-react-ui",
-  "version": "1.10.2",
+  "version": "1.10.4",
   "repository": "https://github.com/Crossmint/crossmint-sdk",
   "license": "Apache-2.0",
   "author": "Paella Labs Inc",
@@ -43,11 +43,11 @@
     "viem": "2.17.5",
     "wagmi": "2.12.25",
     "zod": "3.22.4",
-    "@crossmint/client-sdk-auth": "1.0.0",
+    "@crossmint/client-sdk-auth": "1.1.0",
     "@crossmint/client-sdk-base": "1.3.2",
     "@crossmint/client-sdk-smart-wallet": "0.1.22",
     "@crossmint/client-sdk-window": "0.1.0",
-    "@crossmint/common-sdk-auth": "1.0.0",
+    "@crossmint/common-sdk-auth": "1.0.1",
     "@crossmint/common-sdk-base": "0.3.0"
   },
   "devDependencies": {

package/src/components/auth/AuthForm.tsx

@@ -7,11 +7,33 @@ import { PoweredByCrossmint } from "../common/PoweredByCrossmint";
 import { FarcasterProvider } from "../../providers/auth/FarcasterProvider";
 import { classNames } from "@/utils/classNames";
 import { Web3AuthFlow } from "./methods/web3/Web3AuthFlow";
+import Color from "color";
+import { AlertIcon } from "@/icons/alert";
 
 export function AuthForm({ className }: { className?: string }) {
-    const { step, appearance, loginMethods, baseUrl } = useAuthForm();
+    const { step, appearance, loginMethods, baseUrl, error } = useAuthForm();
+
     return (
-        <div className={classNames("flex flex-col gap-[10px] antialiased animate-none", className)}>
+        <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
+            )}
+        >
+            {error ? (
+                <div
+                    className="flex items-start justify-start w-full rounded-lg p-2 mt-4 bg-cm-danger-muted"
+                    style={{
+                        backgroundColor: new Color(appearance?.colors?.danger ?? "#f44336").alpha(0.12).toString(),
+                    }}
+                >
+                    <AlertIcon customColor={appearance?.colors?.danger ?? "#f44336"} />
+                    <p className="ml-2 text-sm" style={{ color: appearance?.colors?.danger ?? "#f44336" }}>
+                        {error}
+                    </p>
+                </div>
+            ) : null}
+
             {step === "initial" ? (
                 <div>
                     <h1

package/src/components/auth/AuthFormBackButton.tsx

@@ -1,19 +1,27 @@
 import type React from "react";
 import { classNames } from "../../utils/classNames";
 import { LeftArrowIcon } from "@/icons/leftArrow";
+import { useAuthForm } from "@/providers/auth/AuthFormProvider";
 
 export const AuthFormBackButton = ({
     className,
     iconColor,
     ringColor,
+    onClick,
     ...props
 }: React.HTMLAttributes<HTMLButtonElement> & { iconColor?: string; ringColor?: string }) => {
+    const { setError } = useAuthForm();
+
     return (
         <button
             className={classNames(
-                "absolute 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",
+                "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?.(event);
+            }}
             {...props}
         >
             <LeftArrowIcon className="w-6 h-6" style={{ color: iconColor }} />

package/src/components/auth/AuthFormDialog.tsx

@@ -18,7 +18,7 @@ export default function AuthFormDialog({ open }: { open: boolean }) {
                 onOpenAutoFocus={(e) => e.preventDefault()}
                 closeButtonColor={appearance?.colors?.textPrimary}
                 closeButtonRingColor={appearance?.colors?.accent}
-                className="cm-responsive-border-radius-auth-dialog"
+                className="cm-responsive-border-radius-auth-dialog !p-0 !min-[480px]:p-0"
                 style={{
                     borderRadius: appearance?.borderRadius,
                     backgroundColor: appearance?.colors?.background,

package/src/components/auth/methods/email/EmailOTPInput.tsx

@@ -13,7 +13,7 @@ export function EmailOTPInput({
     setOtpEmailData,
 }: { otpEmailData: OtpEmailPayload | null; setOtpEmailData: (data: OtpEmailPayload | null) => void }) {
     const { crossmintAuth } = useCrossmintAuth();
-    const { appearance, setDialogOpen, setStep } = useAuthForm();
+    const { appearance, setDialogOpen, setStep, setError } = useAuthForm();
 
     const [token, setToken] = useState("");
     const [hasError, setHasError] = useState(false);
@@ -31,8 +31,9 @@ export function EmailOTPInput({
             await crossmintAuth?.handleRefreshAuthMaterial(oneTimeSecret as string);
             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);
@@ -79,6 +80,7 @@ export function EmailOTPInput({
                         onChange={(val) => {
                             setToken(val);
                             setHasError(false);
+                            setError(null);
                         }}
                         onComplete={handleOnSubmit}
                         disabled={loading}

package/src/components/auth/methods/email/EmailSignIn.tsx

@@ -11,7 +11,7 @@ import { useCrossmintAuth } from "@/hooks/useCrossmintAuth";
 
 export function EmailSignIn({ setOtpEmailData }: { setOtpEmailData: (data: OtpEmailPayload) => void }) {
     const { crossmintAuth } = useCrossmintAuth();
-    const { appearance, setStep } = useAuthForm();
+    const { appearance, setStep, setError } = useAuthForm();
 
     const [emailInput, setEmailInput] = useState("");
     const [emailError, setEmailError] = useState("");
@@ -35,7 +35,7 @@ export function EmailSignIn({ setOtpEmailData }: { setOtpEmailData: (data: OtpEm
             setStep("otp");
         } catch (_e: unknown) {
             setIsLoading(false);
-            setEmailError("Failed to send email. Please try again or contact support.");
+            setError("Failed to send email. Please try again or contact support.");
         }
     }
 
@@ -75,6 +75,7 @@ export function EmailSignIn({ setOtpEmailData }: { setOtpEmailData: (data: OtpEm
                             onChange={(e) => {
                                 setEmailInput(e.target.value);
                                 setEmailError("");
+                                setError(null);
                             }}
                             readOnly={isLoading}
                             aria-describedby="emailError"

package/src/components/auth/methods/farcaster/FarcasterSignIn.tsx

@@ -7,7 +7,7 @@ import { classNames } from "@/utils/classNames";
 import { AuthFormBackButton } from "../../AuthFormBackButton";
 import { useCrossmintAuth } from "@/hooks/useCrossmintAuth";
 export function FarcasterSignIn() {
-    const { step, appearance, setStep } = useAuthForm();
+    const { step, appearance, setStep, setError } = useAuthForm();
 
     if (step === "initial") {
         return (
@@ -24,6 +24,7 @@ export function FarcasterSignIn() {
                     }}
                     onClick={() => {
                         setStep("qrCode");
+                        setError(null);
                     }}
                 >
                     <FarcasterIcon className="h-[25px] w-[25px] absolute left-[18px]" />
@@ -49,7 +50,7 @@ export function FarcasterSignIn() {
 // We want this to be a separate component so it can completely un-render when the user goes back to the initial screen
 function FarcasterQRCode() {
     const { crossmintAuth } = useCrossmintAuth();
-    const { appearance, setStep, setDialogOpen } = useAuthForm();
+    const { appearance, setStep, setDialogOpen, setError } = useAuthForm();
     const [farcasterData, setFarcasterData] = useState<UseSignInData | null>(null);
 
     const farcasterProps = useMemo(
@@ -65,6 +66,7 @@ function FarcasterQRCode() {
     const { signIn, url: qrCodeUrl, connect, signOut, isConnected } = useSignIn(farcasterProps);
 
     const handleFarcasterSignIn = async (data: UseSignInData) => {
+        setError(null);
         try {
             const oneTimeSecret = await crossmintAuth?.signInWithFarcaster(data);
             // Step 5. fetch the auth material, close the dialog, and unrender any farcaster client stuff
@@ -73,6 +75,7 @@ function FarcasterQRCode() {
             setStep("initial");
         } catch (error) {
             console.error("Error during Farcaster sign-in:", error);
+            setError("Failed to sign in with Farcaster");
         }
     };
 

package/src/components/auth/methods/web3/Web3AuthFlow.tsx

@@ -1,5 +1,5 @@
 import { useAuthForm } from "@/providers/auth/AuthFormProvider";
-import { Web3SignIn } from "./Web3SignIn";
+import { Web3AuthFlowButton } from "./Web3AuthFlowButton";
 import { Web3Connectors } from "./Web3Connectors";
 
 export function Web3AuthFlow() {
@@ -10,7 +10,7 @@ export function Web3AuthFlow() {
     }
 
     if (step === "initial") {
-        return <Web3SignIn />;
+        return <Web3AuthFlowButton />;
     }
 
     return null;

package/src/components/auth/methods/web3/{Web3SignIn.tsx → Web3AuthFlowButton.tsx}

@@ -3,8 +3,8 @@ import { WalletIcon } from "@/icons/wallet";
 import { useAuthForm } from "@/providers/auth/AuthFormProvider";
 import { classNames } from "@/utils/classNames";
 
-export function Web3SignIn() {
-    const { step, appearance, setStep } = useAuthForm();
+export function Web3AuthFlowButton() {
+    const { step, appearance, setStep, setError } = useAuthForm();
 
     if (step !== "initial") {
         return null;
@@ -22,7 +22,10 @@ export function Web3SignIn() {
                 borderColor: appearance?.colors?.border,
                 backgroundColor: appearance?.colors?.buttonBackground,
             }}
-            onClick={() => setStep("web3")}
+            onClick={() => {
+                setStep("web3");
+                setError(null);
+            }}
         >
             <WalletIcon
                 className="h-[21px] w-[21px] absolute left-[20px]"

package/src/components/auth/methods/web3/{Web3ConnectButton.tsx → Web3Connector.tsx}

@@ -2,7 +2,7 @@ import type { UIConfig } from "@crossmint/common-sdk-base";
 import { PoweredByCrossmint } from "@/components/common/PoweredByCrossmint";
 import { classNames } from "@/utils/classNames";
 
-export function Web3ConnectButton({
+export function Web3Connector({
     icon,
     appearance,
     isLoading,

package/src/components/auth/methods/web3/{Web3ProviderButton.tsx → Web3ConnectorButton.tsx}

@@ -2,7 +2,7 @@ import type { UIConfig } from "@crossmint/common-sdk-base";
 import type React from "react";
 import { classNames } from "../../../../utils/classNames";
 
-export function Web3ProviderButton({
+export function Web3ConnectorButton({
     title,
     appearance,
     img,

package/src/components/auth/methods/web3/{Web3AuthWrapper.tsx → Web3ConnectorContainer.tsx}

@@ -1,6 +1,6 @@
 import { useState, useEffect } from "react";
 import { useAuthForm } from "@/providers/auth/AuthFormProvider";
-import { Web3ConnectButton } from "./Web3ConnectButton";
+import { Web3Connector } from "./Web3Connector";
 import { useAccount, useChainId, useConnect, useSignMessage } from "wagmi";
 import { useCrossmintAuth } from "@/hooks/useCrossmintAuth";
 
@@ -10,11 +10,10 @@ interface Web3AuthWrapperProps {
     icon: string;
 }
 
-export function Web3AuthWrapper({ providerType, flag, icon }: Web3AuthWrapperProps) {
+export function Web3ConnectorContainer({ providerType, flag, icon }: Web3AuthWrapperProps) {
     const { crossmintAuth } = useCrossmintAuth();
-    const { appearance } = useAuthForm();
+    const { appearance, error, setError } = useAuthForm();
     const [isLoading, setIsLoading] = useState(false);
-    const [error, setError] = useState<string | null>(null);
 
     const chainId = useChainId();
     const { address, status: accountStatus } = useAccount(); // hook is causing a hydration error when navigating back
@@ -44,6 +43,7 @@ export function Web3AuthWrapper({ providerType, flag, icon }: Web3AuthWrapperPro
             return;
         }
         setIsLoading(true);
+        setError(null);
 
         try {
             const res = await crossmintAuth?.signInWithSmartWallet(address);
@@ -69,7 +69,7 @@ export function Web3AuthWrapper({ providerType, flag, icon }: Web3AuthWrapperPro
         signMessageStatus === "pending";
 
     return (
-        <Web3ConnectButton
+        <Web3Connector
             icon={icon}
             appearance={appearance}
             headingText={signMessageStatus === "pending" ? "Sign to verify" : "Connect your wallet"}

package/src/components/auth/methods/web3/Web3Connectors.tsx

@@ -1,8 +1,8 @@
 import { useAuthForm } from "@/providers/auth/AuthFormProvider";
 import { AuthFormBackButton } from "../../AuthFormBackButton";
-import { Web3ProviderButton } from "./Web3ProviderButton";
+import { Web3ConnectorButton } from "./Web3ConnectorButton";
 import { metamaskIcon, walletConnectIcon } from "@/icons/base64Icons";
-import { Web3AuthWrapper } from "./Web3AuthWrapper";
+import { Web3ConnectorContainer } from "./Web3ConnectorContainer";
 import { useAccount, useDisconnect } from "wagmi";
 
 export function Web3Connectors() {
@@ -28,7 +28,7 @@ export function Web3Connectors() {
                         </h3>
                     </div>
                     <div className="flex flex-col gap-[10px] w-full">
-                        <Web3ProviderButton
+                        <Web3ConnectorButton
                             title="Metamask"
                             appearance={appearance}
                             img={metamaskIcon}
@@ -42,7 +42,7 @@ export function Web3Connectors() {
                                 }, 200);
                             }}
                         />
-                        <Web3ProviderButton
+                        <Web3ConnectorButton
                             title="WalletConnect"
                             appearance={appearance}
                             img={walletConnectIcon}
@@ -65,11 +65,13 @@ export function Web3Connectors() {
         return (
             <>
                 <AuthFormBackButton
-                    onClick={() => setStep("web3")}
+                    onClick={() => {
+                        setStep("web3");
+                    }}
                     iconColor={appearance?.colors?.textPrimary}
                     ringColor={appearance?.colors?.accent}
                 />
-                <Web3AuthWrapper providerType="metaMaskSDK" flag="isMetaMask" icon={metamaskIcon} />
+                <Web3ConnectorContainer providerType="metaMaskSDK" flag="isMetaMask" icon={metamaskIcon} />
             </>
         );
     }
@@ -78,11 +80,13 @@ export function Web3Connectors() {
         return (
             <>
                 <AuthFormBackButton
-                    onClick={() => setStep("web3")}
+                    onClick={() => {
+                        setStep("web3");
+                    }}
                     iconColor={appearance?.colors?.textPrimary}
                     ringColor={appearance?.colors?.accent}
                 />
-                <Web3AuthWrapper providerType="walletConnect" icon={walletConnectIcon} />
+                <Web3ConnectorContainer providerType="walletConnect" icon={walletConnectIcon} />
             </>
         );
     }

package/src/components/embed/v3/EmbeddedCheckoutV3IFrame.tsx

@@ -77,6 +77,7 @@ export function EmbeddedCheckoutV3IFrame(props: CrossmintEmbeddedCheckoutV3Props
                     apiKeyEnvironment={apiClient["parsedAPIKey"].environment}
                 />
             ) : null}
+            <span id="crossmint-focus-target" tabIndex={-1} />
         </>
     );
 }