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

package/src/icons/google.tsx

@@ -0,0 +1,30 @@
+export function GoogleIcon({ className }: { className?: string }) {
+    return (
+        <svg
+            xmlns="http://www.w3.org/2000/svg"
+            x="0px"
+            y="0px"
+            width="100"
+            height="100"
+            viewBox="0 0 48 48"
+            className={className}
+        >
+            <path
+                fill="#fbc02d"
+                d="M43.611,20.083H42V20H24v8h11.303c-1.649,4.657-6.08,8-11.303,8c-6.627,0-12-5.373-12-12	s5.373-12,12-12c3.059,0,5.842,1.154,7.961,3.039l5.657-5.657C34.046,6.053,29.268,4,24,4C12.955,4,4,12.955,4,24s8.955,20,20,20	s20-8.955,20-20C44,22.659,43.862,21.35,43.611,20.083z"
+            ></path>
+            <path
+                fill="#e53935"
+                d="M6.306,14.691l6.571,4.819C14.655,15.108,18.961,12,24,12c3.059,0,5.842,1.154,7.961,3.039	l5.657-5.657C34.046,6.053,29.268,4,24,4C16.318,4,9.656,8.337,6.306,14.691z"
+            ></path>
+            <path
+                fill="#4caf50"
+                d="M24,44c5.166,0,9.86-1.977,13.409-5.192l-6.19-5.238C29.211,35.091,26.715,36,24,36	c-5.202,0-9.619-3.317-11.283-7.946l-6.522,5.025C9.505,39.556,16.227,44,24,44z"
+            ></path>
+            <path
+                fill="#1565c0"
+                d="M43.611,20.083L43.595,20L42,20H24v8h11.303c-0.792,2.237-2.231,4.166-4.087,5.571	c0.001-0.001,0.002-0.001,0.003-0.002l6.19,5.238C36.971,39.205,44,34,44,24C44,22.659,43.862,21.35,43.611,20.083z"
+            ></path>
+        </svg>
+    );
+}

package/src/icons/leftArrow.tsx

@@ -0,0 +1,20 @@
+export function LeftArrowIcon({ className, style }: { className?: string; style?: React.CSSProperties }) {
+    return (
+        <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={className}
+            style={style}
+        >
+            <path d="m12 19-7-7 7-7" />
+            <path d="M19 12H5" />
+        </svg>
+    );
+}

package/src/icons/poweredByLeaf.tsx

@@ -7,8 +7,8 @@ export const PoweredByLeaf = ({ color, size = "16" }: { color: string; size?: st
                 maskUnits="userSpaceOnUse"
                 x="0"
                 y="0"
-                width={size}
-                height={size}
+                width="16"
+                height="16"
             >
                 <mask id="path-1-inside-1_794_7000" fill="white">
                     <path

package/src/providers/CrossmintAuthProvider.tsx

@@ -1,5 +1,4 @@
 import { type ReactNode, createContext, useEffect, useState } from "react";
-import { createPortal } from "react-dom";
 
 import { CrossmintAuthService } from "@crossmint/client-sdk-auth";
 import type { EVMSmartWalletChain } from "@crossmint/client-sdk-smart-wallet";
@@ -11,16 +10,17 @@ import {
     type SDKExternalUser,
 } from "@crossmint/common-sdk-auth";
 
-import AuthModal from "../components/auth/AuthModal";
+import AuthFormDialog from "../components/auth/AuthFormDialog";
 import { useCrossmint, useRefreshToken, useWallet } from "../hooks";
 import { CrossmintWalletProvider } from "./CrossmintWalletProvider";
 import { deleteCookie, getCookie, setCookie } from "@/utils/authCookies";
+import { AuthFormProvider } from "./auth/AuthFormProvider";
 
 export type CrossmintAuthWalletConfig = {
     defaultChain: EVMSmartWalletChain;
     createOnLogin: "all-users" | "off";
     type: "evm-smart-wallet";
-    showWalletModals?: boolean;
+    showPasskeyHelpers?: boolean;
 };
 
 export type LoginMethod = "email" | "google" | "farcaster";
@@ -69,7 +69,7 @@ export function CrossmintAuthProvider({
     );
     const crossmintAuthService = new CrossmintAuthService(crossmint.apiKey);
     const crossmintBaseUrl = validateApiKeyAndGetCrossmintBaseUrl(crossmint.apiKey);
-    const [modalOpen, setModalOpen] = useState(false);
+    const [dialogOpen, setDialogOpen] = useState(false);
 
     const setAuthMaterial = (authMaterial: AuthMaterialWithUser) => {
         setCookie(SESSION_PREFIX, authMaterial.jwt);
@@ -101,7 +101,7 @@ export function CrossmintAuthProvider({
             return;
         }
 
-        setModalOpen(false);
+        setDialogOpen(false);
     }, [crossmint.jwt]);
 
     const login = () => {
@@ -110,14 +110,14 @@ export function CrossmintAuthProvider({
             return;
         }
 
-        setModalOpen(true);
+        setDialogOpen(true);
     };
 
     const getAuthStatus = (): AuthStatus => {
         if (crossmint.jwt != null) {
             return "logged-in";
         }
-        if (modalOpen) {
+        if (dialogOpen) {
             return "in-progress";
         }
         return "logged-out";
@@ -153,26 +153,25 @@ export function CrossmintAuthProvider({
         >
             <CrossmintWalletProvider
                 defaultChain={embeddedWallets.defaultChain}
-                showWalletModals={embeddedWallets.showWalletModals}
+                showPasskeyHelpers={embeddedWallets.showPasskeyHelpers}
                 appearance={appearance}
             >
-                <WalletManager embeddedWallets={embeddedWallets} accessToken={crossmint.jwt}>
-                    {children}
-                </WalletManager>
-                {modalOpen
-                    ? createPortal(
-                          <AuthModal
-                              baseUrl={crossmintBaseUrl}
-                              setModalOpen={setModalOpen}
-                              fetchAuthMaterial={fetchAuthMaterial}
-                              apiKey={crossmint.apiKey}
-                              appearance={appearance}
-                              loginMethods={loginMethods}
-                          />,
-
-                          document.body
-                      )
-                    : null}
+                <AuthFormProvider
+                    initialState={{
+                        apiKey: crossmint.apiKey,
+                        baseUrl: crossmintBaseUrl,
+                        fetchAuthMaterial,
+                        appearance,
+                        setDialogOpen,
+                        loginMethods,
+                    }}
+                >
+                    <WalletManager embeddedWallets={embeddedWallets} accessToken={crossmint.jwt}>
+                        {children}
+                    </WalletManager>
+
+                    <AuthFormDialog open={dialogOpen} />
+                </AuthFormProvider>
             </CrossmintWalletProvider>
         </AuthContext.Provider>
     );

package/src/providers/CrossmintWalletProvider.tsx

@@ -57,12 +57,12 @@ export type WalletConfig = WalletParams & { type: "evm-smart-wallet" };
 export function CrossmintWalletProvider({
     children,
     defaultChain,
-    showWalletModals = true, // enabled by default
+    showPasskeyHelpers = true, // enabled by default
     appearance,
 }: {
     children: ReactNode;
     defaultChain: EVMSmartWalletChain;
-    showWalletModals?: boolean;
+    showPasskeyHelpers?: boolean;
     appearance?: UIConfig;
 }) {
     const { crossmint } = useCrossmint("CrossmintWalletProvider must be used within CrossmintProvider");
@@ -99,7 +99,7 @@ export function CrossmintWalletProvider({
     };
 
     const enhanceConfigWithPasskeyPrompts = (config: WalletConfig) => {
-        if (showWalletModals && (config.signer as PasskeySigner).type === "PASSKEY") {
+        if (showPasskeyHelpers && (config.signer as PasskeySigner).type === "PASSKEY") {
             return {
                 ...config,
                 signer: {

package/src/providers/auth/AuthFormProvider.test.tsx

@@ -0,0 +1,105 @@
+import { render, fireEvent, waitFor } from "@testing-library/react";
+import { AuthFormProvider, useAuthForm } from "./AuthFormProvider";
+import { describe, expect, test, vi } from "vitest";
+import type { LoginMethod } from "..";
+
+// Mock component to test the AuthFormProvider
+function TestComponent() {
+    const { step, apiKey, baseUrl, loginMethods, setStep, setDialogOpen, oauthUrlMap, isLoadingOauthUrlMap } =
+        useAuthForm();
+
+    return (
+        <div>
+            <div data-testid="step">{step}</div>
+            <div data-testid="api-key">{apiKey}</div>
+            <div data-testid="base-url">{baseUrl}</div>
+            <div data-testid="login-methods">{JSON.stringify(loginMethods)}</div>
+            <button onClick={() => setStep("otp")} data-testid="set-step">
+                Set Step to OTP
+            </button>
+            <button onClick={() => setDialogOpen(true)} data-testid="set-dialog-open">
+                Open Dialog
+            </button>
+            <div data-testid="oauth-url">{JSON.stringify(oauthUrlMap)}</div>
+            <div data-testid="is-loading-oauth-url">{isLoadingOauthUrlMap.toString()}</div>
+        </div>
+    );
+}
+
+describe("AuthFormProvider", () => {
+    const mockFetchAuthMaterial = vi.fn().mockResolvedValue({});
+    const mockInitialState = {
+        apiKey: "test-api-key",
+        baseUrl: "https://api.example.com",
+        fetchAuthMaterial: mockFetchAuthMaterial,
+        loginMethods: ["email", "google"] as LoginMethod[],
+        setDialogOpen: vi.fn(),
+    };
+
+    beforeEach(() => {
+        vi.resetAllMocks();
+        global.fetch = vi.fn().mockResolvedValue({
+            ok: true,
+            json: () => Promise.resolve({ oauthUrl: "https://oauth.example.com" }),
+        });
+    });
+
+    test("provides initial context values and fetches OAuth URLs", async () => {
+        const { getByTestId } = render(
+            <AuthFormProvider initialState={mockInitialState}>
+                <TestComponent />
+            </AuthFormProvider>
+        );
+
+        expect(getByTestId("step").textContent).toBe("initial");
+        expect(getByTestId("api-key").textContent).toBe("test-api-key");
+        expect(getByTestId("base-url").textContent).toBe("https://api.example.com");
+        expect(getByTestId("login-methods").textContent).toBe('["email","google"]');
+
+        await waitFor(() => {
+            expect(getByTestId("oauth-url").textContent).toBe('{"google":"https://oauth.example.com"}');
+            expect(getByTestId("is-loading-oauth-url").textContent).toBe("false");
+        });
+    });
+
+    test("updates step", () => {
+        const { getByTestId } = render(
+            <AuthFormProvider initialState={mockInitialState}>
+                <TestComponent />
+            </AuthFormProvider>
+        );
+
+        fireEvent.click(getByTestId("set-step"));
+        expect(getByTestId("step").textContent).toBe("otp");
+    });
+
+    test("calls setDialogOpen", () => {
+        const { getByTestId } = render(
+            <AuthFormProvider initialState={mockInitialState}>
+                <TestComponent />
+            </AuthFormProvider>
+        );
+
+        fireEvent.click(getByTestId("set-dialog-open"));
+        expect(mockInitialState.setDialogOpen).toHaveBeenCalledWith(true);
+    });
+
+    test("handles OAuth URL fetch error", async () => {
+        global.fetch = vi.fn().mockRejectedValue(new Error("Fetch failed"));
+        const consoleSpy = vi.spyOn(console, "error").mockImplementation(() => {});
+
+        const { getByTestId } = render(
+            <AuthFormProvider initialState={mockInitialState}>
+                <TestComponent />
+            </AuthFormProvider>
+        );
+
+        await waitFor(() => {
+            expect(getByTestId("oauth-url").textContent).toBe('{"google":""}');
+            expect(getByTestId("is-loading-oauth-url").textContent).toBe("false");
+        });
+
+        expect(consoleSpy).toHaveBeenCalled();
+        consoleSpy.mockRestore();
+    });
+});

package/src/providers/auth/AuthFormProvider.tsx

@@ -0,0 +1,116 @@
+import { createContext, useContext, useEffect, useState, type ReactNode } from "react";
+import type { AuthMaterialWithUser, OAuthProvider } from "@crossmint/common-sdk-auth";
+import type { UIConfig } from "@crossmint/common-sdk-base";
+import type { LoginMethod } from "../CrossmintAuthProvider";
+
+type AuthStep = "initial" | "walletMethod" | "otp" | "qrCode";
+type OAuthUrlMap = Record<OAuthProvider, string>;
+const initialOAuthUrlMap: OAuthUrlMap = {
+    google: "",
+    // Farcaster is not included here as it uses a different authentication method
+};
+interface AuthFormContextType {
+    step: AuthStep;
+    apiKey: string;
+    baseUrl: string;
+    fetchAuthMaterial: (refreshToken: string) => Promise<AuthMaterialWithUser>;
+    appearance?: UIConfig;
+    loginMethods: LoginMethod[];
+    oauthUrlMap: OAuthUrlMap;
+    isLoadingOauthUrlMap: boolean;
+    setStep: (step: AuthStep) => void;
+    setDialogOpen: (open: boolean) => void;
+}
+
+type ContextInitialStateProps = {
+    apiKey: string;
+    baseUrl: string;
+    fetchAuthMaterial: (refreshToken: string) => Promise<AuthMaterialWithUser>;
+    appearance?: UIConfig;
+    loginMethods: LoginMethod[];
+    setDialogOpen?: (open: boolean) => void;
+};
+
+const AuthFormContext = createContext<AuthFormContextType | undefined>(undefined);
+
+export const useAuthForm = () => {
+    const context = useContext(AuthFormContext);
+    if (!context) {
+        throw new Error("useAuthForm must be used within an AuthFormProvider");
+    }
+    return context;
+};
+
+export const AuthFormProvider = ({
+    children,
+    initialState,
+}: { children: ReactNode; initialState: ContextInitialStateProps }) => {
+    const [step, setStep] = useState<AuthStep>("initial");
+    const [oauthUrlMap, setOauthUrlMap] = useState<OAuthUrlMap>(initialOAuthUrlMap);
+    const [isLoadingOauthUrlMap, setIsLoadingOauthUrlMap] = useState(true);
+
+    const { loginMethods, apiKey, baseUrl } = initialState;
+
+    useEffect(() => {
+        const preFetchAndSetOauthUrl = async () => {
+            setIsLoadingOauthUrlMap(true);
+            try {
+                const oauthProviders = loginMethods.filter(
+                    (method): method is OAuthProvider => method in initialOAuthUrlMap
+                );
+
+                const oauthPromiseList = oauthProviders.map(async (provider) => {
+                    const url = await getOAuthUrl(provider, { apiKey, baseUrl });
+                    return { [provider]: url };
+                });
+
+                const oauthUrlMap = Object.assign({}, ...(await Promise.all(oauthPromiseList)));
+                setOauthUrlMap(oauthUrlMap);
+            } catch (error) {
+                console.error("Error fetching OAuth URLs:", error);
+            } finally {
+                setIsLoadingOauthUrlMap(false);
+            }
+        };
+        preFetchAndSetOauthUrl();
+    }, [loginMethods, apiKey, baseUrl]);
+
+    const value: AuthFormContextType = {
+        step,
+        apiKey,
+        baseUrl,
+        fetchAuthMaterial: initialState.fetchAuthMaterial,
+        appearance: initialState.appearance,
+        loginMethods,
+        oauthUrlMap,
+        isLoadingOauthUrlMap,
+        setDialogOpen: initialState.setDialogOpen ?? (() => {}),
+        setStep,
+    };
+
+    return <AuthFormContext.Provider value={value}>{children}</AuthFormContext.Provider>;
+};
+
+async function getOAuthUrl(provider: OAuthProvider, options: { baseUrl: string; apiKey: string }) {
+    try {
+        const queryParams = new URLSearchParams({ apiKey: options.apiKey });
+        const response = await fetch(
+            `${options.baseUrl}api/2024-09-26/session/sdk/auth/social/${provider}/start?${queryParams}`,
+            {
+                headers: {
+                    "x-api-key": options.apiKey,
+                },
+            }
+        );
+
+        if (!response.ok) {
+            throw new Error("Failed to get OAuth URL. Please try again or contact support.");
+        }
+
+        const data = (await response.json()) as { oauthUrl: string };
+        return data.oauthUrl;
+    } catch (error) {
+        console.error(`Error fetching OAuth URL for ${provider}:`, error);
+        throw new Error(`Failed to get OAuth URL for ${provider}. Please try again or contact support.`);
+    }
+}

package/src/providers/auth/FarcasterProvider.tsx

@@ -0,0 +1,12 @@
+import type { ReactNode } from "react";
+import { AuthKitProvider } from "@farcaster/auth-kit";
+
+export function FarcasterProvider({ baseUrl, children }: { baseUrl: string; children: ReactNode }) {
+    const config = {
+        rpcUrl: "https://mainnet.optimism.io",
+        domain: new URL(baseUrl).hostname.replace(/^www\./, ""),
+        siweUri: `${baseUrl}api/2024-09-26/session/sdk/auth/authenticate`,
+    };
+
+    return <AuthKitProvider config={config}>{children}</AuthKitProvider>;
+}

package/src/twind.config.ts

@@ -2,6 +2,106 @@ import { defineConfig } from "@twind/core";
 import presetTailwind from "@twind/preset-tailwind";
 
 export default defineConfig({
-    presets: [presetTailwind(/* options */)],
+    presets: [presetTailwind()],
+    theme: {
+        screens: {
+            xs: "480px",
+        },
+        extend: {
+            colors: {
+                // Crossmint colors (cm- prefix)
+                "cm-text-primary": "#00150D",
+                "cm-text-secondary": "#67797F",
+                "cm-background-primary": "#FFFFFF",
+                "cm-muted-primary": "#F0F2F4",
+                "cm-border": "#D9D9D9",
+                "cm-ring": "#1A73E8",
+            },
+            keyframes: {
+                "caret-blink": {
+                    "0%,70%,100%": { opacity: "1" },
+                    "20%,50%": { opacity: "0" },
+                },
+                "fade-in": {
+                    from: { opacity: "0" },
+                    to: { opacity: "1" },
+                },
+                "fade-out": {
+                    from: { opacity: "1" },
+                    to: { opacity: "0" },
+                },
+                "slide-in-from-top": {
+                    "0%": { transform: "translateY(-100%)" },
+                    "100%": { transform: "translateY(0)" },
+                },
+                "slide-out-to-top": {
+                    "0%": { transform: "translateY(0)" },
+                    "100%": { transform: "translateY(-100%)" },
+                },
+                "slide-in-from-bottom": {
+                    "0%": { transform: "translateY(100%)" },
+                    "100%": { transform: "translateY(0)" },
+                },
+                "slide-out-to-bottom": {
+                    "0%": { transform: "translateY(0)" },
+                    "100%": { transform: "translateY(100%)" },
+                },
+                "slide-in-from-left": {
+                    "0%": { transform: "translateX(-100%)" },
+                    "100%": { transform: "translateX(0)" },
+                },
+                "slide-out-to-left": {
+                    "0%": { transform: "translateX(0)" },
+                    "100%": { transform: "translateX(-100%)" },
+                },
+                "slide-in-from-right": {
+                    "0%": { transform: "translateX(100%)" },
+                    "100%": { transform: "translateX(0)" },
+                },
+                "slide-out-to-right": {
+                    "0%": { transform: "translateX(0)" },
+                    "100%": { transform: "translateX(100%)" },
+                },
+                "zoom-in-95": {
+                    "0%": { opacity: "0", transform: "scale(0.95) translate(-50%, -50%)" },
+                    "100%": { opacity: "1", transform: "scale(1) translate(-50%, -50%)" },
+                },
+                "zoom-out-95": {
+                    "0%": { opacity: "1", transform: "scale(1) translate(-50%, -50%)" },
+                    "100%": { opacity: "0", transform: "scale(0.95) translate(-50%, -50%)" },
+                },
+            },
+            animation: {
+                "caret-blink": "caret-blink 1.25s ease-out infinite",
+                "fade-in": "fade-in 150ms cubic-bezier(0.16, 1, 0.3, 1)",
+                "fade-out": "fade-out 150ms cubic-bezier(0.16, 1, 0.3, 1)",
+                "slide-in-from-top": "slide-in-from-top 150ms cubic-bezier(0.16, 1, 0.3, 1)",
+                "slide-out-to-top": "slide-out-to-top 150ms cubic-bezier(0.16, 1, 0.3, 1)",
+                "slide-in-from-bottom": "slide-in-from-bottom 150ms cubic-bezier(0.16, 1, 0.3, 1)",
+                "slide-out-to-bottom": "slide-out-to-bottom 150ms cubic-bezier(0.16, 1, 0.3, 1)",
+                "slide-in-from-left": "slide-in-from-left 150ms cubic-bezier(0.16, 1, 0.3, 1)",
+                "slide-out-to-left": "slide-out-to-left 150ms cubic-bezier(0.16, 1, 0.3, 1)",
+                "slide-in-from-right": "slide-in-from-right 150ms cubic-bezier(0.16, 1, 0.3, 1)",
+                "slide-out-to-right": "slide-out-to-right 150ms cubic-bezier(0.16, 1, 0.3, 1)",
+                "zoom-in-95": "zoom-in-95 150ms cubic-bezier(0.16, 1, 0.3, 1)",
+                "zoom-out-95": "zoom-out-95 150ms cubic-bezier(0.16, 1, 0.3, 1)",
+            },
+            durations: {
+                "300": "300ms",
+                "500": "500ms",
+            },
+        },
+    },
+    rules: [
+        [
+            "responsive-border-radius-auth-dialog",
+            {
+                "@media (max-width: 479px)": {
+                    "border-bottom-left-radius": "0 !important",
+                    "border-bottom-right-radius": "0 !important",
+                },
+            },
+        ],
+    ],
     /* config */
 });

package/src/types/auth.ts

@@ -0,0 +1,4 @@
+export type OtpEmailPayload = {
+    email: string;
+    emailId: string;
+};