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

package/src/providers/CrossmintAuthProvider.tsx

@@ -1,211 +0,0 @@
-import { type ReactNode, createContext, useEffect, useMemo, useRef, useState } from "react";
-
-import { CrossmintAuth, getCookie } from "@crossmint/client-sdk-auth";
-import type { EVMSmartWalletChain } from "@crossmint/client-sdk-smart-wallet";
-import { type UIConfig, validateApiKeyAndGetCrossmintBaseUrl } from "@crossmint/common-sdk-base";
-import { type AuthMaterialWithUser, SESSION_PREFIX, type SDKExternalUser } from "@crossmint/common-sdk-auth";
-
-import AuthFormDialog from "../components/auth/AuthFormDialog";
-import { useCrossmint, useWallet } from "../hooks";
-import { CrossmintWalletProvider } from "./CrossmintWalletProvider";
-import { AuthFormProvider } from "./auth/AuthFormProvider";
-import { TwindProvider } from "./TwindProvider";
-
-export type CrossmintAuthWalletConfig = {
-    defaultChain: EVMSmartWalletChain;
-    createOnLogin: "all-users" | "off";
-    type: "evm-smart-wallet";
-    showPasskeyHelpers?: boolean;
-};
-
-export type LoginMethod = "email" | "google" | "farcaster" | "web3";
-
-export type CrossmintAuthProviderProps = {
-    embeddedWallets?: CrossmintAuthWalletConfig;
-    appearance?: UIConfig;
-    children: ReactNode;
-    loginMethods?: LoginMethod[];
-    refreshRoute?: string;
-    logoutRoute?: string;
-};
-
-type AuthStatus = "logged-in" | "logged-out" | "in-progress";
-
-export interface AuthContextType {
-    crossmintAuth?: CrossmintAuth;
-    login: () => void;
-    logout: () => void;
-    jwt?: string;
-    user?: SDKExternalUser;
-    status: AuthStatus;
-    getUser: () => void;
-}
-
-const defaultContextValue: AuthContextType = {
-    crossmintAuth: undefined,
-    login: () => {},
-    logout: () => {},
-    jwt: undefined,
-    user: undefined,
-    status: "logged-out",
-    getUser: () => {},
-};
-
-export const AuthContext = createContext<AuthContextType>(defaultContextValue);
-
-const defaultEmbeddedWallets: CrossmintAuthWalletConfig = {
-    defaultChain: "base-sepolia",
-    createOnLogin: "off",
-    type: "evm-smart-wallet",
-};
-
-export function CrossmintAuthProvider({
-    embeddedWallets = defaultEmbeddedWallets,
-    children,
-    appearance,
-    loginMethods = ["email", "google"],
-    refreshRoute,
-    logoutRoute,
-}: CrossmintAuthProviderProps) {
-    const [user, setUser] = useState<SDKExternalUser | undefined>(undefined);
-    const { crossmint, setJwt } = useCrossmint("CrossmintAuthProvider must be used within CrossmintProvider");
-    // Only create the CrossmintAuth instance once, even in StrictMode, as the constructor calls /refresh
-    // It can only be called once to avoid race conditions
-    const crossmintAuthRef = useRef<CrossmintAuth | null>(null);
-    // biome-ignore lint/correctness/useExhaustiveDependencies: crossmint can't be a dependency because it updates with each jwt change
-    const crossmintAuth = useMemo(() => {
-        if (!crossmintAuthRef.current) {
-            crossmintAuthRef.current = CrossmintAuth.from(crossmint, {
-                callbacks: {
-                    onLogout: () => {
-                        setJwt(undefined);
-                        setUser(undefined);
-                    },
-                    onTokenRefresh: (authMaterial: AuthMaterialWithUser) => {
-                        setJwt(authMaterial.jwt);
-                        setUser(authMaterial.user);
-                    },
-                },
-                refreshRoute,
-                logoutRoute,
-            });
-        }
-        return crossmintAuthRef.current;
-    }, []);
-
-    const crossmintBaseUrl = validateApiKeyAndGetCrossmintBaseUrl(crossmint.apiKey);
-    const [dialogOpen, setDialogOpen] = useState(false);
-
-    useEffect(() => {
-        if (crossmint.jwt == null) {
-            const jwt = getCookie(SESSION_PREFIX);
-            setJwt(jwt);
-        }
-    }, []);
-
-    useEffect(() => {
-        if (crossmint.jwt == null) {
-            return;
-        }
-
-        setDialogOpen(false);
-    }, [crossmint.jwt]);
-
-    const login = () => {
-        if (crossmint.jwt != null) {
-            console.log("User already logged in");
-            return;
-        }
-
-        setDialogOpen(true);
-    };
-
-    const logout = () => {
-        crossmintAuth.logout();
-    };
-
-    const getAuthStatus = (): AuthStatus => {
-        if (crossmint.jwt != null) {
-            return "logged-in";
-        }
-        if (dialogOpen) {
-            return "in-progress";
-        }
-        return "logged-out";
-    };
-
-    const getUser = async () => {
-        if (crossmint.jwt == null) {
-            console.log("User not logged in");
-            return;
-        }
-
-        const user = await crossmintAuth.getUser();
-        setUser(user);
-    };
-
-    return (
-        <TwindProvider>
-            <AuthContext.Provider
-                value={{
-                    crossmintAuth,
-                    login,
-                    logout,
-                    jwt: crossmint.jwt,
-                    user,
-                    status: getAuthStatus(),
-                    getUser,
-                }}
-            >
-                <CrossmintWalletProvider
-                    defaultChain={embeddedWallets.defaultChain}
-                    showPasskeyHelpers={embeddedWallets.showPasskeyHelpers}
-                    appearance={appearance}
-                >
-                    <AuthFormProvider
-                        initialState={{
-                            appearance,
-                            setDialogOpen,
-                            loginMethods,
-                            embeddedWallets,
-                            baseUrl: crossmintBaseUrl,
-                        }}
-                    >
-                        <WalletManager embeddedWallets={embeddedWallets} accessToken={crossmint.jwt}>
-                            {children}
-                        </WalletManager>
-
-                        <AuthFormDialog open={dialogOpen} />
-                    </AuthFormProvider>
-                </CrossmintWalletProvider>
-            </AuthContext.Provider>
-        </TwindProvider>
-    );
-}
-
-function WalletManager({
-    embeddedWallets,
-    children,
-    accessToken,
-}: {
-    embeddedWallets: CrossmintAuthWalletConfig;
-    children: ReactNode;
-    accessToken: string | undefined;
-}) {
-    const { getOrCreateWallet, clearWallet, status } = useWallet();
-
-    useEffect(() => {
-        if (embeddedWallets.createOnLogin === "all-users" && status === "not-loaded" && accessToken != null) {
-            getOrCreateWallet({
-                type: embeddedWallets.type,
-                signer: { type: "PASSKEY" },
-            });
-        }
-
-        if (status === "loaded" && accessToken == null) {
-            clearWallet();
-        }
-    }, [accessToken, status]);
-
-    return <>{children}</>;
-}

package/src/providers/CrossmintWalletProvider.test.tsx

@@ -1,218 +0,0 @@
-import { fireEvent, render, waitFor } from "@testing-library/react";
-import type { ReactNode } from "react";
-import { beforeEach, describe, expect, it, vi } from "vitest";
-import { mock } from "vitest-mock-extended";
-
-import { type EVMSmartWallet, SmartWalletError, SmartWalletSDK } from "@crossmint/client-sdk-smart-wallet";
-import { createCrossmint } from "@crossmint/common-sdk-base";
-
-import { CrossmintProvider, useCrossmint } from "../hooks/useCrossmint";
-import { useWallet } from "../hooks/useWallet";
-import { MOCK_API_KEY } from "../testUtils";
-import { CrossmintWalletProvider } from "./CrossmintWalletProvider";
-
-vi.mock("@crossmint/client-sdk-smart-wallet", async () => {
-    const actual = await vi.importActual("@crossmint/client-sdk-smart-wallet");
-    return {
-        ...actual,
-        SmartWalletSDK: {
-            init: vi.fn(),
-        },
-    };
-});
-
-vi.mock("@crossmint/common-sdk-base", async () => {
-    const actual = await vi.importActual("@crossmint/common-sdk-base");
-    return {
-        ...actual,
-        createCrossmint: vi.fn(),
-    };
-});
-
-vi.mock("../hooks/useCrossmint", async () => {
-    const actual = await vi.importActual("../hooks/useCrossmint");
-    return {
-        ...actual,
-        useCrossmint: vi.fn(),
-    };
-});
-
-function renderWalletProvider({ children }: { children: ReactNode }) {
-    return render(
-        <CrossmintProvider apiKey={MOCK_API_KEY}>
-            <CrossmintWalletProvider defaultChain="polygon-amoy">{children}</CrossmintWalletProvider>
-        </CrossmintProvider>
-    );
-}
-
-function TestComponent() {
-    const { status, wallet, error, getOrCreateWallet, clearWallet } = useWallet();
-
-    return (
-        <div>
-            <div data-testid="error">{error?.message ?? "No Error"}</div>
-            <div data-testid="status">{status}</div>
-            <div data-testid="wallet">{wallet ? "Wallet Loaded" : "No Wallet"}</div>
-            <button data-testid="create-wallet-button" onClick={() => getOrCreateWallet()}>
-                Create Wallet
-            </button>
-            <button data-testid="clear-wallet-button" onClick={() => clearWallet()}>
-                Clear Wallet
-            </button>
-        </div>
-    );
-}
-
-describe("CrossmintWalletProvider", () => {
-    let mockSDK: SmartWalletSDK;
-    let mockWallet: EVMSmartWallet;
-
-    beforeEach(() => {
-        vi.resetAllMocks();
-        vi.mocked(createCrossmint).mockImplementation(() => ({}) as any);
-        vi.mocked(useCrossmint).mockReturnValue({
-            crossmint: {
-                apiKey: MOCK_API_KEY,
-                jwt: "mock-jwt",
-            },
-            setJwt: () => {},
-        });
-
-        mockSDK = mock<SmartWalletSDK>();
-        mockWallet = mock<EVMSmartWallet>();
-        vi.mocked(SmartWalletSDK.init).mockReturnValue(mockSDK);
-        vi.mocked(mockSDK.getOrCreateWallet).mockResolvedValue(mockWallet);
-    });
-
-    describe("getOrCreateWallet", () => {
-        it("happy path ", async () => {
-            const { getByTestId } = renderWalletProvider({
-                children: <TestComponent />,
-            });
-            expect(getByTestId("wallet").textContent).toBe("No Wallet");
-            expect(getByTestId("error").textContent).toBe("No Error");
-
-            fireEvent.click(getByTestId("create-wallet-button"));
-
-            await waitFor(() => {
-                expect(getByTestId("status").textContent).toBe("in-progress");
-                expect(getByTestId("wallet").textContent).toBe("No Wallet");
-                expect(getByTestId("error").textContent).toBe("No Error");
-            });
-
-            await waitFor(() => {
-                expect(getByTestId("status").textContent).toBe("loaded");
-                expect(getByTestId("wallet").textContent).toBe("Wallet Loaded");
-                expect(getByTestId("error").textContent).toBe("No Error");
-            });
-
-            expect(vi.mocked(mockSDK.getOrCreateWallet)).toHaveBeenCalledOnce();
-        });
-
-        describe(`When jwt is not set in "CrossmintProvider"`, () => {
-            beforeEach(() => {
-                vi.mocked(useCrossmint).mockReturnValue({
-                    crossmint: {
-                        apiKey: MOCK_API_KEY,
-                        jwt: undefined,
-                    },
-                    setJwt: () => {},
-                });
-            });
-
-            it("does not create a wallet", async () => {
-                const { getByTestId } = renderWalletProvider({
-                    children: <TestComponent />,
-                });
-
-                fireEvent.click(getByTestId("create-wallet-button"));
-
-                await waitFor(() => {
-                    expect(getByTestId("status").textContent).toBe("not-loaded");
-                    expect(getByTestId("wallet").textContent).toBe("No Wallet");
-                    expect(getByTestId("error").textContent).toBe("No Error");
-                });
-
-                expect(vi.mocked(mockSDK.getOrCreateWallet)).not.toHaveBeenCalled();
-            });
-        });
-
-        describe("When getOrCreateWallet throws a known error", () => {
-            beforeEach(() => {
-                vi.mocked(mockSDK.getOrCreateWallet).mockRejectedValue(new SmartWalletError("Wallet creation failed"));
-            });
-
-            it("should set error directly with the thrown error", async () => {
-                const { getByTestId } = renderWalletProvider({
-                    children: <TestComponent />,
-                });
-
-                fireEvent.click(getByTestId("create-wallet-button"));
-
-                await waitFor(() => {
-                    expect(getByTestId("status").textContent).toBe("in-progress");
-                    expect(getByTestId("wallet").textContent).toBe("No Wallet");
-                    expect(getByTestId("error").textContent).toBe("No Error");
-                });
-
-                await waitFor(() => {
-                    expect(getByTestId("status").textContent).toBe("loading-error");
-                    expect(getByTestId("wallet").textContent).toBe("No Wallet");
-                    expect(getByTestId("error").textContent).toBe("Wallet creation failed");
-                });
-
-                expect(vi.mocked(mockSDK.getOrCreateWallet)).toHaveBeenCalledOnce();
-            });
-        });
-
-        describe("When getOrCreateWallet throws an unknown error", () => {
-            beforeEach(() => {
-                vi.mocked(mockSDK.getOrCreateWallet).mockRejectedValue(new Error("Wallet creation failed"));
-            });
-
-            it("should set the error with the thrown error wrapped with a SmartWalletError", async () => {
-                const { getByTestId } = renderWalletProvider({
-                    children: <TestComponent />,
-                });
-
-                fireEvent.click(getByTestId("create-wallet-button"));
-
-                await waitFor(() => {
-                    expect(getByTestId("status").textContent).toBe("in-progress");
-                    expect(getByTestId("wallet").textContent).toBe("No Wallet");
-                    expect(getByTestId("error").textContent).toBe("No Error");
-                });
-
-                await waitFor(() => {
-                    expect(getByTestId("status").textContent).toBe("loading-error");
-                    expect(getByTestId("wallet").textContent).toBe("No Wallet");
-                    expect(getByTestId("error").textContent).toBe("Unknown Wallet Error: Wallet creation failed");
-                });
-
-                expect(vi.mocked(mockSDK.getOrCreateWallet)).toHaveBeenCalledOnce();
-            });
-        });
-    });
-
-    it("clearWallet happy path", async () => {
-        const { getByTestId } = renderWalletProvider({
-            children: <TestComponent />,
-        });
-
-        fireEvent.click(getByTestId("create-wallet-button"));
-
-        await waitFor(() => {
-            expect(getByTestId("status").textContent).toBe("loaded");
-            expect(getByTestId("wallet").textContent).toBe("Wallet Loaded");
-            expect(getByTestId("error").textContent).toBe("No Error");
-        });
-
-        fireEvent.click(getByTestId("clear-wallet-button"));
-
-        await waitFor(() => {
-            expect(getByTestId("status").textContent).toBe("not-loaded");
-            expect(getByTestId("wallet").textContent).toBe("No Wallet");
-            expect(getByTestId("error").textContent).toBe("No Error");
-        });
-    });
-});

package/src/providers/CrossmintWalletProvider.tsx

@@ -1,155 +0,0 @@
-import { type ReactNode, createContext, useMemo, useState } from "react";
-import { createPortal } from "react-dom";
-
-import {
-    type EVMSmartWallet,
-    type EVMSmartWalletChain,
-    SmartWalletError,
-    SmartWalletSDK,
-    type WalletParams,
-    type PasskeySigner,
-} from "@crossmint/client-sdk-smart-wallet";
-
-import { useCrossmint } from "../hooks";
-import type { UIConfig } from "@crossmint/common-sdk-base";
-import { PasskeyPrompt } from "@/components/auth/PasskeyPrompt";
-
-type WalletStatus = "not-loaded" | "in-progress" | "loaded" | "loading-error";
-
-type ValidPasskeyPromptType =
-    | "create-wallet"
-    | "transaction"
-    | "not-supported"
-    | "create-wallet-error"
-    | "transaction-error";
-type PasskeyPromptState =
-    | {
-          type: ValidPasskeyPromptType;
-          open: true;
-          primaryActionOnClick: () => void;
-          secondaryActionOnClick?: () => void;
-      }
-    | { open: false };
-
-type ValidWalletState =
-    | { status: "not-loaded" | "in-progress" }
-    | { status: "loaded"; wallet: EVMSmartWallet }
-    | { status: "loading-error"; error: SmartWalletError };
-
-type WalletContext = {
-    status: WalletStatus;
-    wallet?: EVMSmartWallet;
-    error?: SmartWalletError;
-    getOrCreateWallet: (
-        config?: Pick<WalletConfig, "signer" | "type">
-    ) => Promise<{ startedCreation: boolean; reason?: string }>;
-    clearWallet: () => void;
-};
-
-export const WalletContext = createContext<WalletContext>({
-    status: "not-loaded",
-    getOrCreateWallet: () => Promise.resolve({ startedCreation: false }),
-    clearWallet: () => {},
-});
-
-export type WalletConfig = WalletParams & { type: "evm-smart-wallet" };
-
-export function CrossmintWalletProvider({
-    children,
-    defaultChain,
-    showPasskeyHelpers = true, // enabled by default
-    appearance,
-}: {
-    children: ReactNode;
-    defaultChain: EVMSmartWalletChain;
-    showPasskeyHelpers?: boolean;
-    appearance?: UIConfig;
-}) {
-    const { crossmint } = useCrossmint("CrossmintWalletProvider must be used within CrossmintProvider");
-    const smartWalletSDK = useMemo(() => SmartWalletSDK.init({ clientApiKey: crossmint.apiKey }), [crossmint.apiKey]);
-
-    const [walletState, setWalletState] = useState<ValidWalletState>({ status: "not-loaded" });
-    const [passkeyPromptState, setPasskeyPromptState] = useState<PasskeyPromptState>({ open: false });
-
-    const getOrCreateWallet = async (
-        config: WalletConfig = { type: "evm-smart-wallet", signer: { type: "PASSKEY" } }
-    ) => {
-        if (walletState.status == "in-progress") {
-            console.log("Wallet already loading");
-            return { startedCreation: false, reason: "Wallet is already loading." };
-        }
-
-        if (crossmint.jwt == null) {
-            return { startedCreation: false, reason: `Jwt not set in "CrossmintProvider".` };
-        }
-
-        try {
-            setWalletState({ status: "in-progress" });
-            const wallet = await smartWalletSDK.getOrCreateWallet(
-                { jwt: crossmint.jwt as string },
-                defaultChain,
-                enhanceConfigWithPasskeyPrompts(config)
-            );
-            setWalletState({ status: "loaded", wallet });
-        } catch (error: unknown) {
-            console.error("There was an error creating a wallet ", error);
-            setWalletState(deriveErrorState(error));
-        }
-        return { startedCreation: true };
-    };
-
-    const enhanceConfigWithPasskeyPrompts = (config: WalletConfig) => {
-        if (showPasskeyHelpers && (config.signer as PasskeySigner).type === "PASSKEY") {
-            return {
-                ...config,
-                signer: {
-                    ...config.signer,
-                    onPrePasskeyRegistration: createPasskeyPrompt("create-wallet"),
-                    onPasskeyRegistrationError: createPasskeyPrompt("create-wallet-error"),
-                    onFirstTimePasskeySigning: createPasskeyPrompt("transaction"),
-                    onFirstTimePasskeySigningError: createPasskeyPrompt("transaction-error"),
-                },
-            };
-        }
-        return config;
-    };
-
-    const createPasskeyPrompt = (type: ValidPasskeyPromptType) => () =>
-        new Promise<void>((resolve) => {
-            setPasskeyPromptState({
-                type,
-                open: true,
-                primaryActionOnClick: () => {
-                    setPasskeyPromptState({ open: false });
-                    resolve();
-                },
-                secondaryActionOnClick: () => {
-                    setPasskeyPromptState({ open: false });
-                    resolve();
-                },
-            });
-        });
-
-    const clearWallet = () => {
-        setWalletState({ status: "not-loaded" });
-    };
-
-    return (
-        <WalletContext.Provider value={{ ...walletState, getOrCreateWallet, clearWallet }}>
-            {children}
-            {passkeyPromptState.open
-                ? createPortal(<PasskeyPrompt state={passkeyPromptState} appearance={appearance} />, document.body)
-                : null}
-        </WalletContext.Provider>
-    );
-}
-
-function deriveErrorState(error: unknown): { status: "loading-error"; error: SmartWalletError } {
-    if (error instanceof SmartWalletError) {
-        return { status: "loading-error", error };
-    }
-
-    const message = error instanceof Error ? error.message : String(error);
-    const stack = error instanceof Error ? error.stack : undefined;
-    return { status: "loading-error", error: new SmartWalletError(`Unknown Wallet Error: ${message}`, stack) };
-}

package/src/providers/TwindProvider.tsx

@@ -1,14 +0,0 @@
-import type React from "react";
-import twindConfig from "@/twind.config";
-import { install } from "@twind/core";
-import { useEffect } from "react";
-
-export function TwindProvider({ children }: { children: React.ReactNode }) {
-    useEffect(() => {
-        // Initialize twind with custom configuration
-        // This sets up the CSS-in-JS styling solution for the entire application
-        install(twindConfig);
-    }, []);
-
-    return <>{children}</>;
-}