@crossmint/client-sdk-react-ui 1.8.0 → 1.9.1

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

@@ -0,0 +1,123 @@
+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";
+
+export const EMAIL_VERIFICATION_TOKEN_LENGTH = 6;
+
+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 [token, setToken] = useState("");
+    const [hasError, setHasError] = useState(false);
+    const [loading, setLoading] = useState(false);
+
+    const handleOnSubmit = async () => {
+        setLoading(true);
+        try {
+            const oneTimeSecret = await onConfirmEmailOtp(
+                otpEmailData?.email ?? "",
+                otpEmailData?.emailId ?? "",
+                token,
+                {
+                    baseUrl,
+                    apiKey,
+                }
+            );
+
+            await fetchAuthMaterial(oneTimeSecret as string);
+            setDialogOpen(false);
+            setStep("initial");
+        } catch (e) {
+            console.error("Error signing in via email ", e);
+            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-[#67797F]"
+                    style={{ color: appearance?.colors?.textPrimary }}
+                >
+                    {"Check your email"}
+                </p>
+                <p className="text-center 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);
+                        }}
+                        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-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"
+                        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

@@ -0,0 +1,113 @@
+import { type FormEvent, useState } from "react";
+
+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";
+
+export function EmailSignIn({ setOtpEmailData }: { setOtpEmailData: (data: OtpEmailPayload) => void }) {
+    const { baseUrl, apiKey, appearance, setStep } = useAuthForm();
+    const { onEmailSignIn } = useAuthSignIn();
+
+    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 onEmailSignIn(trimmedEmailInput, { baseUrl, apiKey })) as { emailId: string };
+
+            setOtpEmailData({ email: trimmedEmailInput, emailId: emailSignInRes.emailId });
+            setStep("otp");
+        } catch (_e: unknown) {
+            setIsLoading(false);
+            setEmailError("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">
+                    <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"
+                        onSubmit={handleOnSubmit}
+                        noValidate // we want to handle validation ourselves
+                    >
+                        <label htmlFor="emailInput" className="sr-only">
+                            Email
+                        </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
+                                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 --tw-ring-color is not recognized by typescript but gets picked up by tailwind
+                                "--tw-ring-color": appearance?.colors?.accent ?? "#1A73E8",
+                            }}
+                            type="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">
+                            {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 text-nowrap")}
+                                    style={{ color: appearance?.colors?.accent ?? "#1A73E8" }}
+                                    disabled={!emailInput}
+                                >
+                                    Sign in
+                                </button>
+                            )}
+                        </div>
+                    </form>
+                    {emailError && <p className="text-xs text-red-500 mb-2 pt-2">{emailError}</p>}
+                </div>
+            </div>
+        </>
+    );
+}

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

@@ -0,0 +1,170 @@
+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";
+
+export function FarcasterSignIn() {
+    const { step, appearance, setStep } = useAuthForm();
+
+    if (step === "initial") {
+        return (
+            <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"
+                    )}
+                    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");
+                    }}
+                >
+                    <FarcasterIcon className="h-[25px] w-[25px] absolute left-[18px]" />
+                    <span
+                        className="font-medium"
+                        style={{ margin: "0px 32px", color: appearance?.colors?.textPrimary }}
+                    >
+                        Farcaster
+                    </span>
+                    <span className="sr-only">Sign in with Farcaster</span>
+                </button>
+            </div>
+        );
+    }
+
+    if (step === "qrCode") {
+        return <FarcasterQRCode />;
+    }
+
+    return null;
+}
+
+// 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 [farcasterData, setFarcasterData] = useState<UseSignInData | null>(null);
+
+    const farcasterProps = useMemo(
+        () => ({
+            onSuccess: (data: UseSignInData) => {
+                // Step 3. set the farcaster data once the sign in is successful
+                setFarcasterData(data);
+            },
+        }),
+        []
+    );
+
+    const { signIn, url: qrCodeUrl, connect, signOut, isConnected } = useSignIn(farcasterProps);
+
+    const handleFarcasterSignIn = async (data: UseSignInData) => {
+        try {
+            const oneTimeSecret = await onFarcasterSignIn(data, { baseUrl, apiKey });
+            // Step 5. fetch the auth material, close the dialog, and unrender any farcaster client stuff
+            await fetchAuthMaterial(oneTimeSecret as string);
+            setDialogOpen(false);
+            setStep("initial");
+        } catch (error) {
+            console.error("Error during Farcaster sign-in:", error);
+        }
+    };
+
+    useEffect(() => {
+        if (farcasterData != null) {
+            // Step 4. call the handleFarcasterSignInfunction to handle the sign in
+            handleFarcasterSignIn(farcasterData);
+        }
+    }, [farcasterData]);
+
+    useEffect(() => {
+        if (isConnected) {
+            // Step 2. once connected, call the signIn function to start the sign in process
+            signIn();
+        }
+    }, [isConnected]);
+
+    useEffect(() => {
+        // Step 1. call the connect function to initialize the connection
+        connect();
+    }, []);
+
+    return (
+        <div>
+            <AuthFormBackButton
+                onClick={() => {
+                    signOut();
+                    setStep("initial");
+                }}
+                iconColor={appearance?.colors?.textPrimary}
+                ringColor={appearance?.colors?.accent}
+            />
+
+            <div className="flex flex-col items-center gap-4">
+                <div className="text-center">
+                    <h3
+                        className="text-lg font-semibold text-cm-text-primary mb-2"
+                        style={{ color: appearance?.colors?.textPrimary }}
+                    >
+                        Sign in with Farcaster
+                    </h3>
+                    <p
+                        className="text-base font-normal text-cm-text-secondary"
+                        style={{ color: appearance?.colors?.textSecondary }}
+                    >
+                        Scan with your phone's camera to continue.
+                    </p>
+                </div>
+                <div
+                    className="bg-white aspect-square rounded-lg p-4"
+                    style={{
+                        backgroundColor: appearance?.colors?.inputBackground,
+                        borderRadius: appearance?.borderRadius,
+                    }}
+                >
+                    {qrCodeUrl != null ? (
+                        <QRCode uri={qrCodeUrl} size={280} />
+                    ) : (
+                        <div className="min-h-[246px] flex items-center justify-center">
+                            <Spinner
+                                style={{
+                                    color: appearance?.colors?.textSecondary,
+                                    fill: appearance?.colors?.textPrimary,
+                                }}
+                            />
+                        </div>
+                    )}
+                </div>
+                {qrCodeUrl ? (
+                    <>
+                        <p
+                            className="text-base text-center font-normal text-cm-text-secondary"
+                            style={{ color: appearance?.colors?.textSecondary }}
+                        >
+                            Alternatively, click on this link to open Warpcast.
+                        </p>
+                        <a
+                            href={qrCodeUrl}
+                            rel="noopener noreferrer"
+                            target="_blank"
+                            className="text-base font-normal text-cm-ring"
+                            style={{ color: appearance?.colors?.textLink }}
+                        >
+                            Open Warpcast
+                        </a>
+                    </>
+                ) : null}
+            </div>
+        </div>
+    );
+}

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

@@ -0,0 +1,62 @@
+import type { ButtonHTMLAttributes } from "react";
+import { GoogleIcon } from "@/icons/google";
+import { useOAuthWindowListener } from "@/hooks/useOAuthWindowListener";
+import { Spinner } from "@/components/common/Spinner";
+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 isLoading = isLoadingOauthUrlMap || isLoadingOAuthWindow;
+
+    if (step !== "initial") {
+        return null;
+    }
+
+    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" : ""
+            )}
+            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}
+        >
+            <>
+                <GoogleIcon className="h-[25px] w-[25px] absolute left-[18px]" />
+                {isLoading ? (
+                    <Spinner
+                        style={{
+                            color: appearance?.colors?.textSecondary,
+                            fill: appearance?.colors?.textPrimary,
+                        }}
+                    />
+                ) : (
+                    <span
+                        className="font-medium"
+                        style={{ margin: "0px 32px", color: appearance?.colors?.textPrimary }}
+                    >
+                        Google
+                    </span>
+                )}
+            </>
+
+            {/* For accessibility sake   */}
+            <span className="sr-only">Sign in with Google</span>
+        </button>
+    );
+}

package/src/components/common/Dialog.tsx

@@ -0,0 +1,141 @@
+"use client";
+
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { classNames } from "@/utils/classNames";
+
+const Dialog = DialogPrimitive.Root;
+const DialogTrigger = DialogPrimitive.Trigger;
+const DialogClose = DialogPrimitive.Close;
+const DialogPortal = DialogPrimitive.Portal;
+
+const DialogOverlay = React.forwardRef<
+    React.ElementRef<typeof DialogPrimitive.Overlay>,
+    React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+    <DialogPrimitive.Overlay
+        ref={ref}
+        className={classNames(
+            "fixed inset-0 z-50 bg-black/80 backdrop-blur-[2px] data-[state=closed]:animate-out data-[state=closed]:animate-fade-out data-[state=open]:animate-in data-[state=open]:animate-fade-in",
+            className
+        )}
+        {...props}
+    />
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+
+interface DialogContentProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {
+    showCloseButton?: boolean;
+    closeButtonColor?: string;
+    closeButtonRingColor?: string;
+}
+
+const DialogContent = React.forwardRef<React.ElementRef<typeof DialogPrimitive.Content>, DialogContentProps>(
+    ({ className, children, showCloseButton = true, closeButtonColor, closeButtonRingColor, ...props }, ref) => (
+        <DialogPortal>
+            <DialogOverlay />
+            <DialogPrimitive.Content
+                ref={ref}
+                className={classNames(
+                    "fixed z-50 p-6 pb-2 bg-cm-background-primary border border-cm-border shadow-xl transition-none",
+                    // Small viewport styles (bottom sheet)
+                    "inset-x-0 bottom-0 w-full border-t rounded-t-xl",
+                    "data-[state=closed]:animate-slide-out-to-bottom data-[state=open]:animate-slide-in-from-bottom",
+                    // Regular viewport styles (centered modal)
+                    "xs:inset-auto !xs:p-10 xs:left-[50%] xs:top-[50%] xs:translate-x-[-50%] xs:translate-y-[-50%]",
+                    "xs:max-w-[448px] xs:rounded-xl",
+                    "xs:data-[state=closed]:animate-fade-out xs:data-[state=closed]:animate-zoom-out-95",
+                    "xs:data-[state=open]:animate-fade-in xs:data-[state=open]:animate-zoom-in-95",
+                    // Duration for animations
+                    "data-[state=closed]:duration-300 data-[state=open]:duration-500",
+                    className
+                )}
+                {...props}
+            >
+                {children}
+                {showCloseButton && (
+                    <DialogPrimitive.Close
+                        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 data-[state=open]:bg-text-primary",
+                            "right-4 top-4 !xs:right-6 !xs:top-6"
+                        )}
+                        style={{
+                            color: closeButtonColor,
+                            // @ts-expect-error --tw-ring-color is not recognized by typescript but gets picked up by tailwind
+                            "--tw-ring-color": closeButtonRingColor ?? "#1A73E8",
+                        }}
+                    >
+                        <svg
+                            xmlns="http://www.w3.org/2000/svg"
+                            width="24"
+                            height="24"
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            strokeWidth="2"
+                            strokeLinecap="round"
+                            strokeLinejoin="round"
+                            className="h-6 w-6"
+                        >
+                            <path d="M18 6 6 18" />
+                            <path d="m6 6 12 12" />
+                        </svg>
+                        <span className="sr-only">Close</span>
+                    </DialogPrimitive.Close>
+                )}
+            </DialogPrimitive.Content>
+        </DialogPortal>
+    )
+);
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+
+const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+    <div className={classNames("flex flex-col space-y-1.5 text-center sm:text-left", className)} {...props} />
+);
+DialogHeader.displayName = "DialogHeader";
+
+const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+    <div
+        className={classNames("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
+        {...props}
+    />
+);
+DialogFooter.displayName = "DialogFooter";
+
+const DialogTitle = React.forwardRef<
+    React.ElementRef<typeof DialogPrimitive.Title>,
+    React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+    <DialogPrimitive.Title
+        ref={ref}
+        className={classNames("text-lg font-semibold leading-none tracking-tight", className)}
+        {...props}
+    />
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+
+const DialogDescription = React.forwardRef<
+    React.ElementRef<typeof DialogPrimitive.Description>,
+    React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+    <DialogPrimitive.Description
+        ref={ref}
+        className={classNames("text-sm text-muted-foreground", className)}
+        {...props}
+    />
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+
+export {
+    Dialog,
+    DialogPortal,
+    DialogOverlay,
+    DialogClose,
+    DialogTrigger,
+    DialogContent,
+    DialogHeader,
+    DialogFooter,
+    DialogTitle,
+    DialogDescription,
+};

package/src/components/common/Divider.tsx

@@ -0,0 +1,25 @@
+import { useAuthForm } from "@/providers/auth/AuthFormProvider";
+import type { UIConfig } from "@crossmint/common-sdk-base";
+
+export function Divider({ appearance, text }: { appearance?: UIConfig; text?: string }) {
+    const { step } = useAuthForm();
+
+    if (step !== "initial") {
+        return null;
+    }
+
+    return (
+        <div className="flex items-center justify-center w-full pt-1 pb-2">
+            <span className="w-full h-[1px] bg-cm-border" style={{ backgroundColor: appearance?.colors?.border }} />
+            {text != null ? (
+                <p
+                    className="flex-none px-2 text-sm text-cm-text-primary"
+                    style={{ color: appearance?.colors?.textSecondary }}
+                >
+                    {text}
+                </p>
+            ) : null}
+            <span className="w-full h-[1px] bg-cm-border" style={{ backgroundColor: appearance?.colors?.border }} />
+        </div>
+    );
+}