@crossmint/client-sdk-react-ui 1.9.3 → 1.10.1

package/dist/testUtils.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/testUtils.ts"],"names":[],"mappings":";;;AAAO,IAAM,eAAe","sourcesContent":["export const MOCK_API_KEY = \"sk_development_12341234\";\n"]}

package/dist/testUtils.d.cts

@@ -1,4 +1,3 @@
 declare const MOCK_API_KEY = "sk_development_12341234";
-declare const waitForSettledState: (callback: () => void) => Promise<void>;
 
-export { MOCK_API_KEY, waitForSettledState };
+export { MOCK_API_KEY };

package/dist/testUtils.d.ts

@@ -1,4 +1,3 @@
 declare const MOCK_API_KEY = "sk_development_12341234";
-declare const waitForSettledState: (callback: () => void) => Promise<void>;
 
-export { MOCK_API_KEY, waitForSettledState };
+export { MOCK_API_KEY };

package/dist/testUtils.js

@@ -1 +1,8 @@
-import{d as t}from"./chunk-PXDN3KFO.js";var i="sk_development_12341234",n=e=>t(void 0,null,function*(){yield new Promise(o=>setTimeout(o,20)),e()});export{i as MOCK_API_KEY,n as waitForSettledState};
+import "./chunk-CRTRMMJ7.js";
+
+// src/testUtils.ts
+var MOCK_API_KEY = "sk_development_12341234";
+export {
+  MOCK_API_KEY
+};
+//# sourceMappingURL=testUtils.js.map

package/dist/testUtils.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/testUtils.ts"],"sourcesContent":["export const MOCK_API_KEY = \"sk_development_12341234\";\n"],"mappings":";;;AAAO,IAAM,eAAe;","names":[]}

package/dist/twind.config.cjs

@@ -1 +1,8 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});var _chunkUOHM5SBYcjs = require('./chunk-UOHM5SBY.cjs');require('./chunk-2WSEHVNP.cjs');exports.default = _chunkUOHM5SBYcjs.a;
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+var _chunkA2JCJ2OVcjs = require('./chunk-A2JCJ2OV.cjs');
+require('./chunk-4DAZAO6Y.cjs');
+
+
+exports.default = _chunkA2JCJ2OVcjs.twind_config_default;
+//# sourceMappingURL=twind.config.cjs.map

package/dist/twind.config.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":""}

package/dist/twind.config.d.cts

@@ -2,9 +2,6 @@ import * as _twind_preset_tailwind from '@twind/preset-tailwind';
 import * as _twind_core from '@twind/core';
 
 declare const _default: _twind_core.TwindConfig<_twind_core.BaseTheme & _twind_preset_tailwind.TailwindTheme & {
-    screens: {
-        xs: string;
-    };
     extend: never;
 }>;
 

package/dist/twind.config.d.ts

@@ -2,9 +2,6 @@ import * as _twind_preset_tailwind from '@twind/preset-tailwind';
 import * as _twind_core from '@twind/core';
 
 declare const _default: _twind_core.TwindConfig<_twind_core.BaseTheme & _twind_preset_tailwind.TailwindTheme & {
-    screens: {
-        xs: string;
-    };
     extend: never;
 }>;
 

package/dist/twind.config.js

@@ -1 +1,8 @@
-import{a}from"./chunk-63OMZNLN.js";import"./chunk-PXDN3KFO.js";export{a as default};
+import {
+  twind_config_default
+} from "./chunk-AUEQQ4D3.js";
+import "./chunk-CRTRMMJ7.js";
+export {
+  twind_config_default as default
+};
+//# sourceMappingURL=twind.config.js.map

package/dist/twind.config.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/types/auth.cjs

@@ -1 +1 @@
-"use strict";
+"use strict";//# sourceMappingURL=auth.cjs.map

package/dist/types/auth.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":""}

package/dist/types/auth.js

@@ -0,0 +1 @@
+//# sourceMappingURL=auth.js.map

package/dist/types/auth.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/utils/classNames.cjs

@@ -1 +1,8 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});var _chunkWABJHG6Bcjs = require('../chunk-WABJHG6B.cjs');require('../chunk-2WSEHVNP.cjs');exports.classNames = _chunkWABJHG6Bcjs.a;
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+var _chunk5RX5WFEWcjs = require('../chunk-5RX5WFEW.cjs');
+require('../chunk-4DAZAO6Y.cjs');
+
+
+exports.classNames = _chunk5RX5WFEWcjs.classNames;
+//# sourceMappingURL=classNames.cjs.map

package/dist/utils/classNames.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":""}

package/dist/utils/classNames.js

@@ -1 +1,8 @@
-import{a}from"../chunk-NBJIJZGO.js";import"../chunk-PXDN3KFO.js";export{a as classNames};
+import {
+  classNames
+} from "../chunk-RZPQIRIY.js";
+import "../chunk-CRTRMMJ7.js";
+export {
+  classNames
+};
+//# sourceMappingURL=classNames.js.map

package/dist/utils/classNames.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/utils/createCrossmintApiClient.cjs

@@ -1 +1,9 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});var _chunkDCG56C7Rcjs = require('../chunk-DCG56C7R.cjs');require('../chunk-WARJE3L2.cjs');require('../chunk-2WSEHVNP.cjs');exports.createCrossmintApiClient = _chunkDCG56C7Rcjs.a;
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+var _chunkY7PF2Z3Wcjs = require('../chunk-Y7PF2Z3W.cjs');
+require('../chunk-HENBZUED.cjs');
+require('../chunk-4DAZAO6Y.cjs');
+
+
+exports.createCrossmintApiClient = _chunkY7PF2Z3Wcjs.createCrossmintApiClient;
+//# sourceMappingURL=createCrossmintApiClient.cjs.map

package/dist/utils/createCrossmintApiClient.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":""}

package/dist/utils/createCrossmintApiClient.js

@@ -1 +1,9 @@
-import{a}from"../chunk-IKY4YQDO.js";import"../chunk-HFIIBQLK.js";import"../chunk-PXDN3KFO.js";export{a as createCrossmintApiClient};
+import {
+  createCrossmintApiClient
+} from "../chunk-L3L7YEW3.js";
+import "../chunk-5IX763AW.js";
+import "../chunk-CRTRMMJ7.js";
+export {
+  createCrossmintApiClient
+};
+//# sourceMappingURL=createCrossmintApiClient.js.map

package/dist/utils/createCrossmintApiClient.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crossmint/client-sdk-react-ui",
-  "version": "1.9.3",
+  "version": "1.10.1",
   "repository": "https://github.com/Crossmint/crossmint-sdk",
   "license": "Apache-2.0",
   "author": "Paella Labs Inc",
@@ -19,36 +19,42 @@
     "LICENSE"
   ],
   "dependencies": {
-    "@dynamic-labs/ethereum": "3.3.0",
-    "@dynamic-labs/ethereum-core": "3.3.0",
-    "@dynamic-labs/sdk-react-core": "3.3.0",
-    "@dynamic-labs/solana": "3.3.0",
-    "@dynamic-labs/solana-core": "3.3.0",
+    "@dynamic-labs/ethereum": "3.4.4",
+    "@dynamic-labs/ethereum-core": "3.4.4",
+    "@dynamic-labs/sdk-react-core": "3.4.4",
+    "@dynamic-labs/solana": "3.4.4",
+    "@dynamic-labs/solana-core": "3.4.4",
     "@ethersproject/transactions": "5.7.0",
     "@farcaster/auth-kit": "0.6.0",
     "@headlessui/react": "2.1.5",
     "@radix-ui/react-dialog": "1.1.2",
     "@radix-ui/react-visually-hidden": "1.1.0",
     "@solana/web3.js": "1.95.1",
+    "@tanstack/react-query": "5.51.18",
     "@twind/core": "1.1.3",
     "@twind/preset-tailwind": "1.1.4",
+    "@wagmi/connectors": "5.3.3",
     "bs58": "5.0.0",
     "clsx": "2.1.1",
+    "color": "4.2.3",
     "input-otp": "1.2.4",
     "lodash.isequal": "4.5.0",
     "react-jss": "10.10.0",
     "tailwind-merge": "2.4.0",
     "tailwindcss": "3.4.10",
     "viem": "2.17.5",
+    "wagmi": "2.12.25",
     "zod": "3.22.4",
-    "@crossmint/client-sdk-auth": "0.2.3",
-    "@crossmint/common-sdk-auth": "0.2.3",
-    "@crossmint/client-sdk-base": "1.3.1",
-    "@crossmint/common-sdk-base": "0.2.0",
-    "@crossmint/client-sdk-smart-wallet": "0.1.21",
-    "@crossmint/client-sdk-window": "0.1.0"
+    "@crossmint/client-sdk-auth": "1.0.0",
+    "@crossmint/client-sdk-base": "1.3.2",
+    "@crossmint/client-sdk-window": "0.1.0",
+    "@crossmint/common-sdk-auth": "1.0.0",
+    "@crossmint/common-sdk-base": "0.3.0",
+    "@crossmint/client-sdk-smart-wallet": "0.1.22"
   },
   "devDependencies": {
+    "@testing-library/react": "^16.0.1",
+    "@types/color": "4.2.0",
     "@types/lodash.isequal": "4.5.6",
     "@types/react": "^18.3.0",
     "@types/react-dom": "^18.3.0",
@@ -60,8 +66,8 @@
     "react-dom": ">=17.0.2"
   },
   "scripts": {
-    "build": "NODE_OPTIONS='--max-old-space-size=8192' tsup",
-    "dev": "tsup --watch",
-    "test": "vitest run"
+    "build": "cross-env NODE_OPTIONS='--max-old-space-size=8192' tsup",
+    "dev": "cross-env NODE_OPTIONS='--max-old-space-size=8192' tsup --watch",
+    "test:vitest": "vitest run"
   }
 }

package/src/components/auth/AuthForm.tsx

@@ -6,21 +6,22 @@ import { FarcasterSignIn } from "./methods/farcaster/FarcasterSignIn";
 import { PoweredByCrossmint } from "../common/PoweredByCrossmint";
 import { FarcasterProvider } from "../../providers/auth/FarcasterProvider";
 import { classNames } from "@/utils/classNames";
+import { Web3AuthFlow } from "./methods/web3/Web3AuthFlow";
 
 export function AuthForm({ className }: { className?: string }) {
-    const { step, appearance, baseUrl, loginMethods } = useAuthForm();
+    const { step, appearance, loginMethods, baseUrl } = useAuthForm();
     return (
-        <div className={classNames("flex flex-col gap-4", className)}>
+        <div className={classNames("flex flex-col gap-[10px] antialiased animate-none", className)}>
             {step === "initial" ? (
                 <div>
                     <h1
-                        className="text-2xl font-semibold text-cm-text-primary"
+                        className="text-2xl font-bold text-cm-text-primary"
                         style={{ color: appearance?.colors?.textPrimary }}
                     >
                         Sign In
                     </h1>
                     <p
-                        className="text-base font-normal mb-5 text-cm-text-secondary"
+                        className="text-base font-normal mb-3 text-cm-text-secondary"
                         style={{ color: appearance?.colors?.textSecondary }}
                     >
                         Sign in using one of the options below
@@ -41,9 +42,13 @@ export function AuthForm({ className }: { className?: string }) {
                     <FarcasterSignIn />
                 </FarcasterProvider>
             ) : null}
+            {loginMethods.includes("web3") ? <Web3AuthFlow /> : null}
 
             {step === "initial" || step === "otp" ? (
-                <PoweredByCrossmint className="justify-center" color={appearance?.colors?.textSecondary ?? "#A4AFB2"} />
+                <PoweredByCrossmint
+                    className="mt-4 justify-center"
+                    color={appearance?.colors?.textSecondary ?? "#A4AFB2"}
+                />
             ) : null}
         </div>
     );

package/src/components/auth/AuthFormBackButton.tsx

@@ -11,13 +11,9 @@ export const AuthFormBackButton = ({
     return (
         <button
             className={classNames(
-                "absolute rounded-full opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-cm-ring focus:ring-offset-2 disabled:pointer-events-none",
+                "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",
                 className
             )}
-            style={{
-                // @ts-expect-error --tw-ring-color is not recognized by typescript but gets picked up by tailwind
-                "--tw-ring-color": ringColor ?? "#1A73E8",
-            }}
             {...props}
         >
             <LeftArrowIcon className="w-6 h-6" style={{ color: iconColor }} />

package/src/components/auth/AuthFormDialog.tsx

@@ -2,18 +2,23 @@ import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
 import { useAuthForm } from "@/providers/auth/AuthFormProvider";
 import { AuthForm } from "./AuthForm";
 import { Dialog, DialogContent, DialogDescription, DialogTitle } from "../common/Dialog";
+import { useEffect } from "react";
 
 export default function AuthFormDialog({ open }: { open: boolean }) {
     const { appearance, setDialogOpen } = useAuthForm();
 
+    useEffect(() => {
+        document.body.style.overflow = open ? "hidden" : "";
+    }, [open]);
+
     return (
-        <Dialog open={open} onOpenChange={setDialogOpen}>
+        <Dialog modal={false} open={open} onOpenChange={setDialogOpen}>
             <DialogContent
                 onInteractOutside={(e) => e.preventDefault()}
                 onOpenAutoFocus={(e) => e.preventDefault()}
                 closeButtonColor={appearance?.colors?.textPrimary}
                 closeButtonRingColor={appearance?.colors?.accent}
-                className="responsive-border-radius-auth-dialog"
+                className="cm-responsive-border-radius-auth-dialog"
                 style={{
                     borderRadius: appearance?.borderRadius,
                     backgroundColor: appearance?.colors?.background,

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

@@ -1,10 +1,10 @@
 import { useState } from "react";
 import { InputOTP, InputOTPGroup, InputOTPSlot } from "@/components/common/InputOTP";
-import { useAuthSignIn } from "@/hooks/useAuthSignIn";
 import { EmailOtpIcon } from "@/icons/emailOTP";
 import { useAuthForm } from "@/providers/auth/AuthFormProvider";
 import type { OtpEmailPayload } from "@/types/auth";
 import { AuthFormBackButton } from "../../AuthFormBackButton";
+import { useCrossmintAuth } from "@/hooks/useCrossmintAuth";
 
 export const EMAIL_VERIFICATION_TOKEN_LENGTH = 6;
 
@@ -12,8 +12,8 @@ export function EmailOTPInput({
     otpEmailData,
     setOtpEmailData,
 }: { otpEmailData: OtpEmailPayload | null; setOtpEmailData: (data: OtpEmailPayload | null) => void }) {
-    const { appearance, baseUrl, apiKey, fetchAuthMaterial, setDialogOpen, setStep } = useAuthForm();
-    const { onConfirmEmailOtp } = useAuthSignIn();
+    const { crossmintAuth } = useCrossmintAuth();
+    const { appearance, setDialogOpen, setStep } = useAuthForm();
 
     const [token, setToken] = useState("");
     const [hasError, setHasError] = useState(false);
@@ -22,17 +22,13 @@ export function EmailOTPInput({
     const handleOnSubmit = async () => {
         setLoading(true);
         try {
-            const oneTimeSecret = await onConfirmEmailOtp(
+            const oneTimeSecret = await crossmintAuth?.confirmEmailOtp(
                 otpEmailData?.email ?? "",
                 otpEmailData?.emailId ?? "",
-                token,
-                {
-                    baseUrl,
-                    apiKey,
-                }
+                token
             );
 
-            await fetchAuthMaterial(oneTimeSecret as string);
+            await crossmintAuth?.handleRefreshAuthMaterial(oneTimeSecret as string);
             setDialogOpen(false);
             setStep("initial");
         } catch (e) {
@@ -65,12 +61,15 @@ export function EmailOTPInput({
                     />
                 </div>
                 <p
-                    className="text-base font-normal mt-4 mb-1 text-center text-[#67797F]"
+                    className="text-base font-normal mt-4 mb-1 text-center text-cm-text-primary"
                     style={{ color: appearance?.colors?.textPrimary }}
                 >
                     {"Check your email"}
                 </p>
-                <p className="text-center px-4" style={{ color: appearance?.colors?.textSecondary }}>
+                <p
+                    className="text-center text-cm-text-secondary px-4"
+                    style={{ color: appearance?.colors?.textSecondary }}
+                >
                     {"A temporary login code has been sent to your email"}
                 </p>
                 <div className="py-8">
@@ -104,13 +103,13 @@ export function EmailOTPInput({
                     </InputOTP>
                 </div>
 
-                <p className="text-sm leading-tight text-center">
+                <p className="text-sm leading-tight text-cm-text-secondary text-center">
                     <span style={{ color: appearance?.colors?.textSecondary }}>
                         Can't find the email? Check spam folder or contact
                     </span>{" "}
                     <a
                         key="resend-email-link"
-                        className="transition-opacity duration-150 text-link hover:opacity-70"
+                        className="transition-opacity duration-150 text-cm-link hover:opacity-70"
                         style={{ color: appearance?.colors?.textLink }}
                         href="mailto:support@crossmint.io"
                     >

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

@@ -1,16 +1,17 @@
 import { type FormEvent, useState } from "react";
+import Color from "color";
 
 import { Spinner } from "@/components/common/Spinner";
 import { classNames } from "@/utils/classNames";
 import { AlertIcon } from "../../../../icons/alert";
-import { useAuthSignIn } from "@/hooks/useAuthSignIn";
 import { isEmailValid } from "@crossmint/common-sdk-auth";
 import { useAuthForm } from "@/providers/auth/AuthFormProvider";
 import type { OtpEmailPayload } from "@/types/auth";
+import { useCrossmintAuth } from "@/hooks/useCrossmintAuth";
 
 export function EmailSignIn({ setOtpEmailData }: { setOtpEmailData: (data: OtpEmailPayload) => void }) {
-    const { baseUrl, apiKey, appearance, setStep } = useAuthForm();
-    const { onEmailSignIn } = useAuthSignIn();
+    const { crossmintAuth } = useCrossmintAuth();
+    const { appearance, setStep } = useAuthForm();
 
     const [emailInput, setEmailInput] = useState("");
     const [emailError, setEmailError] = useState("");
@@ -28,7 +29,7 @@ export function EmailSignIn({ setOtpEmailData }: { setOtpEmailData: (data: OtpEm
 
         try {
             const trimmedEmailInput = emailInput.trim().toLowerCase();
-            const emailSignInRes = (await onEmailSignIn(trimmedEmailInput, { baseUrl, apiKey })) as { emailId: string };
+            const emailSignInRes = (await crossmintAuth?.sendEmailOtp(trimmedEmailInput)) as { emailId: string };
 
             setOtpEmailData({ email: trimmedEmailInput, emailId: emailSignInRes.emailId });
             setStep("otp");
@@ -42,12 +43,6 @@ export function EmailSignIn({ setOtpEmailData }: { setOtpEmailData: (data: OtpEm
         <>
             <div className="flex flex-col items-start justify-start w-full rounded-lg">
                 <div className="w-full">
-                    <p
-                        className="text-sm font-inter font-medium text-cm-text-primary pb-2"
-                        style={{ color: appearance?.colors?.textPrimary }}
-                    >
-                        Email
-                    </p>
                     <form
                         role="form"
                         className="relative"
@@ -59,9 +54,9 @@ export function EmailSignIn({ setOtpEmailData }: { setOtpEmailData: (data: OtpEm
                         </label>
                         <input
                             className={classNames(
-                                "flex-grow text-left pl-[16px] pr-[80px] h-[58px] w-full border border-cm-border rounded-xl bg-cm-background-primary placeholder:text-sm placeholder:text-opacity-60",
-                                "transition-all duration-200 ease-in-out", // Add smooth transition
-                                "focus:outline-none focus:ring-1 focus:ring-opacity-50", // Add focus ring
+                                "flex-grow text-cm-text-secondary text-left pl-[16px] pr-[80px] h-[58px] w-full border border-cm-border rounded-xl bg-cm-background-primary placeholder:text-sm placeholder:text-opacity-60",
+                                "transition-none duration-200 ease-in-out",
+                                "focus:outline-none focus-ring-custom", // Add focus ring
                                 emailError ? "border-red-500" : ""
                             )}
                             style={{
@@ -69,18 +64,19 @@ export function EmailSignIn({ setOtpEmailData }: { setOtpEmailData: (data: OtpEm
                                 borderRadius: appearance?.borderRadius,
                                 borderColor: emailError ? appearance?.colors?.danger : appearance?.colors?.border,
                                 backgroundColor: appearance?.colors?.inputBackground,
-                                // @ts-expect-error --tw-ring-color is not recognized by typescript but gets picked up by tailwind
-                                "--tw-ring-color": appearance?.colors?.accent ?? "#1A73E8",
+                                // @ts-expect-error Add custom ring color to tailwind
+                                "--focus-ring-color": new Color(appearance?.colors?.accent ?? "#04AA6D")
+                                    .alpha(0.18)
+                                    .toString(),
                             }}
                             type="email"
-                            placeholder={"Enter email"}
+                            placeholder="Enter email"
                             value={emailInput}
                             onChange={(e) => {
                                 setEmailInput(e.target.value);
                                 setEmailError("");
                             }}
                             readOnly={isLoading}
-                            // aria-invalid={emailError != null}
                             aria-describedby="emailError"
                         />
                         <div className="absolute inset-y-0 right-0 flex items-center pr-4">
@@ -96,8 +92,8 @@ export function EmailSignIn({ setOtpEmailData }: { setOtpEmailData: (data: OtpEm
                             {!emailError && !isLoading && (
                                 <button
                                     type="submit"
-                                    className={classNames("cursor-pointer text-nowrap")}
-                                    style={{ color: appearance?.colors?.accent ?? "#1A73E8" }}
+                                    className={classNames("cursor-pointer font-medium text-cm-accent text-nowrap")}
+                                    style={{ color: appearance?.colors?.accent }}
                                     disabled={!emailInput}
                                 >
                                     Sign in

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

@@ -1,12 +1,11 @@
 import { useEffect, useMemo, useState } from "react";
 import { useSignIn, QRCode, type UseSignInData } from "@farcaster/auth-kit";
-import { useAuthSignIn } from "@/hooks/useAuthSignIn";
 import { FarcasterIcon } from "@/icons/farcaster";
 import { useAuthForm } from "@/providers/auth/AuthFormProvider";
 import { Spinner } from "@/components/common/Spinner";
 import { classNames } from "@/utils/classNames";
 import { AuthFormBackButton } from "../../AuthFormBackButton";
-
+import { useCrossmintAuth } from "@/hooks/useCrossmintAuth";
 export function FarcasterSignIn() {
     const { step, appearance, setStep } = useAuthForm();
 
@@ -15,16 +14,13 @@ export function FarcasterSignIn() {
             <div>
                 <button
                     className={classNames(
-                        "relative flex text-base p-4 bg-cm-muted-primary text-cm-text-primary border border-cm-border items-center w-full rounded-xl justify-center",
-                        "transition-all duration-200 ease-in-out",
-                        "focus:outline-none focus:ring-1 focus:ring-opacity-50"
+                        "relative flex text-base p-4 bg-cm-muted-primary text-cm-text-primary items-center w-full rounded-xl justify-center",
+                        "transition-colors duration-200 ease-in-out",
+                        "hover:bg-cm-hover focus:bg-cm-hover outline-none"
                     )}
                     style={{
                         borderRadius: appearance?.borderRadius,
-                        borderColor: appearance?.colors?.border,
                         backgroundColor: appearance?.colors?.buttonBackground,
-                        // @ts-expect-error --tw-ring-color is not recognized by typescript but gets picked up by tailwind
-                        "--tw-ring-color": appearance?.colors?.accent ?? "#1A73E8",
                     }}
                     onClick={() => {
                         setStep("qrCode");
@@ -35,7 +31,7 @@ export function FarcasterSignIn() {
                         className="font-medium"
                         style={{ margin: "0px 32px", color: appearance?.colors?.textPrimary }}
                     >
-                        Farcaster
+                        Sign in with Farcaster
                     </span>
                     <span className="sr-only">Sign in with Farcaster</span>
                 </button>
@@ -52,8 +48,8 @@ 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 { appearance, baseUrl, apiKey, setStep, fetchAuthMaterial, setDialogOpen } = useAuthForm();
-    const { onFarcasterSignIn } = useAuthSignIn();
+    const { crossmintAuth } = useCrossmintAuth();
+    const { appearance, setStep, setDialogOpen } = useAuthForm();
     const [farcasterData, setFarcasterData] = useState<UseSignInData | null>(null);
 
     const farcasterProps = useMemo(
@@ -70,9 +66,9 @@ function FarcasterQRCode() {
 
     const handleFarcasterSignIn = async (data: UseSignInData) => {
         try {
-            const oneTimeSecret = await onFarcasterSignIn(data, { baseUrl, apiKey });
+            const oneTimeSecret = await crossmintAuth?.signInWithFarcaster(data);
             // Step 5. fetch the auth material, close the dialog, and unrender any farcaster client stuff
-            await fetchAuthMaterial(oneTimeSecret as string);
+            await crossmintAuth?.handleRefreshAuthMaterial(oneTimeSecret as string);
             setDialogOpen(false);
             setStep("initial");
         } catch (error) {
@@ -157,7 +153,7 @@ function FarcasterQRCode() {
                             href={qrCodeUrl}
                             rel="noopener noreferrer"
                             target="_blank"
-                            className="text-base font-normal text-cm-ring"
+                            className="text-base font-normal text-cm-link"
                             style={{ color: appearance?.colors?.textLink }}
                         >
                             Open Warpcast

package/src/components/auth/methods/google/GoogleSignIn.tsx

@@ -6,12 +6,8 @@ import { useAuthForm } from "@/providers/auth/AuthFormProvider";
 import { classNames } from "@/utils/classNames";
 
 export function GoogleSignIn({ ...props }: ButtonHTMLAttributes<HTMLButtonElement>) {
-    const { step, apiKey, baseUrl, appearance, isLoadingOauthUrlMap, fetchAuthMaterial } = useAuthForm();
-    const { createPopupAndSetupListeners, isLoading: isLoadingOAuthWindow } = useOAuthWindowListener("google", {
-        apiKey,
-        baseUrl,
-        fetchAuthMaterial,
-    });
+    const { step, appearance, isLoadingOauthUrlMap } = useAuthForm();
+    const { createPopupAndSetupListeners, isLoading: isLoadingOAuthWindow } = useOAuthWindowListener("google");
     const isLoading = isLoadingOauthUrlMap || isLoadingOAuthWindow;
 
     if (step !== "initial") {
@@ -21,17 +17,14 @@ export function GoogleSignIn({ ...props }: ButtonHTMLAttributes<HTMLButtonElemen
     return (
         <button
             className={classNames(
-                "relative flex text-base p-4 bg-cm-muted-primary text-cm-text-primary border border-cm-border items-center w-full rounded-xl justify-center",
-                "transition-all duration-200 ease-in-out", // Add smooth transition
-                "focus:outline-none focus:ring-1 focus:ring-opacity-50", // Add focus ring
-                isLoading ? "cursor-not-allowed" : ""
+                "relative flex text-base p-4 bg-cm-muted-primary text-cm-text-primary items-center w-full rounded-xl justify-center",
+                "transition-colors duration-200 ease-in-out",
+                "hover:bg-cm-hover focus:bg-cm-hover outline-none",
+                isLoading ? "cursor-not-allowed hover:bg-cm-muted-primary" : ""
             )}
             style={{
                 borderRadius: appearance?.borderRadius,
-                borderColor: appearance?.colors?.border,
                 backgroundColor: appearance?.colors?.buttonBackground,
-                // @ts-expect-error --tw-ring-color is not recognized by typescript but gets picked up by tailwind
-                "--tw-ring-color": appearance?.colors?.accent ?? "#1A73E8",
             }}
             onClick={isLoading ? undefined : createPopupAndSetupListeners}
             {...props}
@@ -50,12 +43,10 @@ export function GoogleSignIn({ ...props }: ButtonHTMLAttributes<HTMLButtonElemen
                         className="font-medium"
                         style={{ margin: "0px 32px", color: appearance?.colors?.textPrimary }}
                     >
-                        Google
+                        Sign in with Google
                     </span>
                 )}
             </>
-
-            {/* For accessibility sake   */}
             <span className="sr-only">Sign in with Google</span>
         </button>
     );

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

@@ -0,0 +1,17 @@
+import { useAuthForm } from "@/providers/auth/AuthFormProvider";
+import { Web3SignIn } from "./Web3SignIn";
+import { Web3Connectors } from "./Web3Connectors";
+
+export function Web3AuthFlow() {
+    const { step } = useAuthForm();
+
+    if (step.startsWith("web3")) {
+        return <Web3Connectors />;
+    }
+
+    if (step === "initial") {
+        return <Web3SignIn />;
+    }
+
+    return null;
+}