@crossmint/client-sdk-react-ui 1.10.7 → 1.11.1

package/src/components/auth/AuthFormDialog.tsx

@@ -1,38 +0,0 @@
-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 modal={false} open={open} onOpenChange={setDialogOpen}>
-            <DialogContent
-                onInteractOutside={(e) => e.preventDefault()}
-                onOpenAutoFocus={(e) => e.preventDefault()}
-                closeButtonColor={appearance?.colors?.textPrimary}
-                closeButtonRingColor={appearance?.colors?.accent}
-                className="cm-responsive-border-radius-auth-dialog !p-0 !min-[480px]:p-0"
-                style={{
-                    borderRadius: appearance?.borderRadius,
-                    backgroundColor: appearance?.colors?.background,
-                }}
-            >
-                <VisuallyHidden asChild>
-                    <DialogTitle>Crossmint Auth</DialogTitle>
-                </VisuallyHidden>
-                <VisuallyHidden asChild>
-                    <DialogDescription>Sign in via Crossmint</DialogDescription>
-                </VisuallyHidden>
-
-                <AuthForm className="max-w-[448px]" />
-            </DialogContent>
-        </Dialog>
-    );
-}

package/src/components/auth/EmbeddedAuthForm.tsx

@@ -1,5 +0,0 @@
-import { AuthForm } from "./AuthForm";
-
-export function EmbeddedAuthForm() {
-    return <AuthForm className="w-full" />;
-}

package/src/components/auth/PasskeyPrompt.tsx

@@ -1,258 +0,0 @@
-import { Button, Dialog, Transition } from "@headlessui/react";
-import { type CSSProperties, Fragment, type ReactNode } from "react";
-import type { UIConfig } from "@crossmint/common-sdk-base";
-
-import FingerprintIcon from "../../icons/fingerprint";
-import PasskeyIcon from "../../icons/passkey";
-import PasskeyPromptLogo from "../../icons/passkeyPromptLogo";
-import { PoweredByCrossmint } from "../common/PoweredByCrossmint";
-import { classNames } from "@/utils/classNames";
-
-type PasskeyPromptCoreProps = {
-    title: string;
-    content: ReactNode;
-    primaryButton: ReactNode;
-    secondaryAction?: ReactNode;
-    appearance?: UIConfig;
-};
-function PasskeyPromptCore({ title, content, primaryButton, secondaryAction, appearance }: PasskeyPromptCoreProps) {
-    return (
-        <Dialog
-            open
-            onClose={() => {}}
-            className={classNames("fixed inset-0 z-20 flex items-center justify-center overflow-y-auto")}
-        >
-            {/* This is a hacky workaround to have the foreground transparent styles to work. */}
-            <Transition.Child
-                as={Fragment}
-                enter="ease-out duration-400"
-                enterFrom="opacity-0"
-                enterTo="opacity-100"
-                leave="ease-in duration-400"
-                leaveFrom="opacity-100"
-                leaveTo="opacity-0"
-            >
-                <div
-                    className={classNames(
-                        "fixed inset-0 bg-[rgba(139,151,151,0.2)] backdrop-blur-[2px] transition-opacity duration-300 ease-in-out -z-10"
-                    )}
-                />
-            </Transition.Child>
-            <div
-                style={{
-                    display: "flex",
-                    flexDirection: "column",
-                    alignItems: "center",
-                    width: "100%",
-                    maxWidth: "28rem",
-                    borderRadius: "1rem",
-                    boxShadow: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
-                    zIndex: 30,
-                    border: "1px solid",
-                    backgroundColor: appearance?.colors?.background || "white",
-                    borderColor: appearance?.colors?.border || "#D0D5DD",
-                }}
-                onClick={(e) => e.stopPropagation()}
-            >
-                <div className="pt-12 pb-10 px-8">
-                    <div className="flex justify-center left-1.5 relative">
-                        <PasskeyPromptLogo appearance={appearance} />
-                    </div>
-                    <div className="flex justify-center">
-                        <p
-                            style={{
-                                fontSize: "1.125rem",
-                                lineHeight: "1.75rem",
-                                fontWeight: "bold",
-                                color: appearance?.colors?.textPrimary || "#20343E",
-                            }}
-                        >
-                            {title}
-                        </p>
-                    </div>
-                    <div className="mt-4 mb-9">
-                        <div
-                            style={{
-                                fontWeight: "normal",
-                                color: appearance?.colors?.textSecondary || "#67797F",
-                            }}
-                        >
-                            {content}
-                        </div>
-                    </div>
-                    <div className="flex flex-col gap-4 justify-center">
-                        {primaryButton}
-                        {secondaryAction}
-                    </div>
-                    <div className="flex justify-center pt-4">
-                        <PoweredByCrossmint color={appearance?.colors?.textSecondary} />
-                    </div>
-                </div>
-            </div>
-        </Dialog>
-    );
-}
-
-type PromptType = "create-wallet" | "transaction" | "not-supported" | "create-wallet-error" | "transaction-error";
-
-type PasskeyPromptProps = {
-    state: {
-        type: PromptType;
-        primaryActionOnClick: () => void;
-        secondaryActionOnClick?: () => void;
-    };
-    appearance?: UIConfig;
-};
-export function PasskeyPrompt({ state, appearance }: PasskeyPromptProps) {
-    // These components are currently assembled based on the mockups.
-    switch (state.type) {
-        case "create-wallet":
-            return (
-                <PasskeyPromptCore
-                    title="Create Your Wallet"
-                    appearance={appearance}
-                    content={
-                        <>
-                            <div className="mb-4">You're about to create a wallet.</div>
-                            <div className="flex flex-col gap-2">
-                                <div className="flex gap-2">
-                                    <div>
-                                        <PasskeyIcon />
-                                    </div>
-                                    Your wallet will be secured with a passkey
-                                </div>
-
-                                <div className="flex gap-2">
-                                    <div>
-                                        <FingerprintIcon />
-                                    </div>
-                                    Your device will ask you for your fingerprint, face, or screen lock to set it up
-                                </div>
-                            </div>
-                        </>
-                    }
-                    primaryButton={
-                        <Button style={primaryButtonStyles(appearance)} onClick={state.primaryActionOnClick}>
-                            Create Wallet
-                        </Button>
-                    }
-                />
-            );
-
-        case "create-wallet-error":
-            return (
-                <PasskeyPromptCore
-                    title="Wallet Creation Failed"
-                    appearance={appearance}
-                    content={
-                        <div className="mb-6">
-                            We couldn't create your wallet. This could be due to rejecting the request, a timeout, or
-                            not having access to your passkey on this device.
-                        </div>
-                    }
-                    primaryButton={
-                        <Button style={primaryButtonStyles(appearance)} onClick={state.primaryActionOnClick}>
-                            Try again
-                        </Button>
-                    }
-                />
-            );
-
-        case "transaction":
-            return (
-                <PasskeyPromptCore
-                    title="First Time Using Your Wallet"
-                    appearance={appearance}
-                    content={
-                        <div className="flex flex-col gap-2">
-                            <div className="flex gap-2">
-                                <div>
-                                    <FingerprintIcon />
-                                </div>
-                                <span>
-                                    Your device will ask you for your fingerprint, face, or screen lock to authorize
-                                    this action.
-                                </span>
-                            </div>
-                        </div>
-                    }
-                    primaryButton={
-                        <Button style={primaryButtonStyles(appearance)} onClick={state.primaryActionOnClick}>
-                            Use Wallet
-                        </Button>
-                    }
-                />
-            );
-
-        case "transaction-error":
-            return (
-                <PasskeyPromptCore
-                    title="Wallet Access Failed"
-                    appearance={appearance}
-                    content={
-                        <div className="mb-6">
-                            We couldn't access your wallet. This could be due to rejecting the request, a timeout, or
-                            not having access to your passkey on this device.
-                        </div>
-                    }
-                    primaryButton={
-                        <Button style={primaryButtonStyles(appearance)} onClick={state.primaryActionOnClick}>
-                            Try again
-                        </Button>
-                    }
-                    secondaryAction={
-                        <a
-                            href="https://docs.crossmint.com/wallets/smart-wallets/users/troubleshoot"
-                            rel="noopener noreferrer"
-                            target="_blank"
-                            style={{
-                                padding: "0.875rem",
-                                width: "100%",
-                                textAlign: "center",
-                                textDecoration: "none",
-                                borderRadius: "0.5rem",
-                                fontWeight: "bold",
-                                backgroundColor: appearance?.colors?.inputBackground || "#F0F2F4",
-                                color: appearance?.colors?.textSecondary || "#00150D",
-                            }}
-                        >
-                            Troubleshoot
-                        </a>
-                    }
-                />
-            );
-
-        case "not-supported":
-            return (
-                <PasskeyPromptCore
-                    title="Passkeys Not Supported on This Device"
-                    appearance={appearance}
-                    content={
-                        <div className="mb-6">
-                            To access your wallet with a passkey, switch to a device or browser that supports passkeys,
-                            such as Chrome or Safari on a smartphone, tablet, or modern computer
-                        </div>
-                    }
-                    primaryButton={
-                        <Button style={primaryButtonStyles(appearance)} onClick={state.primaryActionOnClick}>
-                            Understood
-                        </Button>
-                    }
-                />
-            );
-
-        default:
-            return null;
-    }
-}
-
-const primaryButtonStyles = (appearance?: UIConfig): CSSProperties => ({
-    padding: "0.875rem",
-    width: "100%",
-    backgroundColor: appearance?.colors?.buttonBackground ?? "#04AA6D",
-    color: appearance?.colors?.textPrimary ?? "white",
-    borderRadius: appearance?.borderRadius ?? "8px",
-    borderColor: appearance?.colors?.border ?? "#04AA6D",
-    borderWidth: "1px",
-    fontWeight: "bold",
-});

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

@@ -1,19 +0,0 @@
-import { useState } from "react";
-import { EmailOTPInput } from "./EmailOTPInput";
-import { EmailSignIn } from "./EmailSignIn";
-import { useAuthForm } from "@/providers/auth/AuthFormProvider";
-import type { OtpEmailPayload } from "@/types/auth";
-
-export function EmailAuthFlow() {
-    const { step } = useAuthForm();
-    const [otpEmailData, setOtpEmailData] = useState<OtpEmailPayload | null>(null);
-
-    if (step === "otp") {
-        return <EmailOTPInput otpEmailData={otpEmailData} setOtpEmailData={setOtpEmailData} />;
-    }
-    if (step === "initial") {
-        return <EmailSignIn setOtpEmailData={setOtpEmailData} />;
-    }
-
-    return null;
-}

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

@@ -1,124 +0,0 @@
-import { useState } from "react";
-import { InputOTP, InputOTPGroup, InputOTPSlot } from "@/components/common/InputOTP";
-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;
-
-export function EmailOTPInput({
-    otpEmailData,
-    setOtpEmailData,
-}: { otpEmailData: OtpEmailPayload | null; setOtpEmailData: (data: OtpEmailPayload | null) => void }) {
-    const { crossmintAuth } = useCrossmintAuth();
-    const { appearance, setDialogOpen, setStep, setError } = useAuthForm();
-
-    const [token, setToken] = useState("");
-    const [hasError, setHasError] = useState(false);
-    const [loading, setLoading] = useState(false);
-
-    const handleOnSubmit = async () => {
-        setLoading(true);
-        try {
-            const oneTimeSecret = await crossmintAuth?.confirmEmailOtp(
-                otpEmailData?.email ?? "",
-                otpEmailData?.emailId ?? "",
-                token
-            );
-
-            await crossmintAuth?.handleRefreshAuthMaterial(oneTimeSecret as string);
-            setDialogOpen(false);
-            setStep("initial");
-        } catch (error) {
-            console.error("Error confirming email OTP", error);
-            setError("Invalid code. Please try again.");
-            setHasError(true);
-        } finally {
-            setLoading(false);
-        }
-    };
-
-    const handleOnBack = () => {
-        setStep("initial");
-        setOtpEmailData(null);
-    };
-
-    return (
-        <div>
-            <AuthFormBackButton
-                onClick={handleOnBack}
-                iconColor={appearance?.colors?.textPrimary}
-                ringColor={appearance?.colors?.accent}
-            />
-
-            <div className="flex flex-col items-center justify-start w-full">
-                <div className="relative left-3">
-                    <EmailOtpIcon
-                        customAccentColor={appearance?.colors?.accent}
-                        customButtonBackgroundColor={appearance?.colors?.buttonBackground}
-                        customBackgroundColor={appearance?.colors?.background}
-                    />
-                </div>
-                <p
-                    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 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">
-                    <InputOTP
-                        maxLength={EMAIL_VERIFICATION_TOKEN_LENGTH}
-                        value={token}
-                        onChange={(val) => {
-                            setToken(val);
-                            setHasError(false);
-                            setError(null);
-                        }}
-                        onComplete={handleOnSubmit}
-                        disabled={loading}
-                        customStyles={{
-                            accent: appearance?.colors?.accent ?? "#04AA6D",
-                            danger: appearance?.colors?.danger ?? "#f44336",
-                            border: appearance?.colors?.border ?? "#E5E7EB",
-                            textPrimary: appearance?.colors?.textPrimary ?? "#909ca3",
-                            buttonBackground: appearance?.colors?.buttonBackground ?? "#eff6ff",
-                            inputBackground: appearance?.colors?.inputBackground ?? "#FFFFFF",
-                            borderRadius: appearance?.borderRadius,
-                        }}
-                    >
-                        <InputOTPGroup>
-                            <InputOTPSlot index={0} hasError={hasError} />
-                            <InputOTPSlot index={1} hasError={hasError} />
-                            <InputOTPSlot index={2} hasError={hasError} />
-                            <InputOTPSlot index={3} hasError={hasError} />
-                            <InputOTPSlot index={4} hasError={hasError} />
-                            <InputOTPSlot index={5} hasError={hasError} />
-                        </InputOTPGroup>
-                    </InputOTP>
-                </div>
-
-                <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-cm-link hover:opacity-70"
-                        style={{ color: appearance?.colors?.textLink }}
-                        href="mailto:support@crossmint.io"
-                    >
-                        support@crossmint.io
-                    </a>
-                </p>
-            </div>
-        </div>
-    );
-}

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

@@ -1,110 +0,0 @@
-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 { 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 { crossmintAuth } = useCrossmintAuth();
-    const { appearance, setStep, setError } = useAuthForm();
-
-    const [emailInput, setEmailInput] = useState("");
-    const [emailError, setEmailError] = useState("");
-    const [isLoading, setIsLoading] = useState(false);
-
-    async function handleOnSubmit(e: FormEvent<HTMLFormElement>) {
-        e.preventDefault();
-
-        if (!isEmailValid(emailInput)) {
-            setEmailError("Please enter a valid email address");
-            return;
-        }
-
-        setIsLoading(true);
-
-        try {
-            const trimmedEmailInput = emailInput.trim().toLowerCase();
-            const emailSignInRes = (await crossmintAuth?.sendEmailOtp(trimmedEmailInput)) as { emailId: string };
-
-            setOtpEmailData({ email: trimmedEmailInput, emailId: emailSignInRes.emailId });
-            setStep("otp");
-        } catch (_e: unknown) {
-            setIsLoading(false);
-            setError("Failed to send email. Please try again or contact support.");
-        }
-    }
-
-    return (
-        <>
-            <div className="flex flex-col items-start justify-start w-full rounded-lg">
-                <div className="w-full">
-                    <form
-                        role="form"
-                        className="relative"
-                        onSubmit={handleOnSubmit}
-                        noValidate // we want to handle validation ourselves
-                    >
-                        <label htmlFor="emailInput" className="sr-only">
-                            Email
-                        </label>
-                        <input
-                            className={classNames(
-                                "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={{
-                                color: appearance?.colors?.textPrimary,
-                                borderRadius: appearance?.borderRadius,
-                                borderColor: emailError ? appearance?.colors?.danger : appearance?.colors?.border,
-                                backgroundColor: appearance?.colors?.inputBackground,
-                                // @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"
-                            value={emailInput}
-                            onChange={(e) => {
-                                setEmailInput(e.target.value);
-                                setEmailError("");
-                                setError(null);
-                            }}
-                            readOnly={isLoading}
-                            aria-describedby="emailError"
-                        />
-                        <div className="absolute inset-y-0 right-0 flex items-center pr-4">
-                            {emailError && <AlertIcon customColor={appearance?.colors?.danger} />}
-                            {isLoading && (
-                                <Spinner
-                                    style={{
-                                        color: appearance?.colors?.textSecondary,
-                                        fill: appearance?.colors?.textPrimary,
-                                    }}
-                                />
-                            )}
-                            {!emailError && !isLoading && (
-                                <button
-                                    type="submit"
-                                    className={classNames("cursor-pointer font-medium text-cm-accent text-nowrap")}
-                                    style={{ color: appearance?.colors?.accent }}
-                                    disabled={!emailInput}
-                                >
-                                    Sign in
-                                </button>
-                            )}
-                        </div>
-                    </form>
-                    {emailError && <p className="text-xs text-red-500 mb-2 pt-2">{emailError}</p>}
-                </div>
-            </div>
-        </>
-    );
-}