@crossmint/client-sdk-react-ui 1.3.13 → 1.3.14

package/src/providers/CrossmintAuthProvider.test.tsx

@@ -0,0 +1,198 @@
+import { fireEvent, render } from "@testing-library/react";
+import { ReactNode } from "react";
+import { beforeEach, describe, expect, vi } from "vitest";
+import { mock } from "vitest-mock-extended";
+
+import { EVMSmartWallet, SmartWalletSDK } from "@crossmint/client-sdk-smart-wallet";
+import { createCrossmint } from "@crossmint/common-sdk-base";
+
+import { useAuth, useWallet } from "../hooks";
+import { CrossmintProvider, useCrossmint } from "../hooks/useCrossmint";
+import { MOCK_API_KEY, waitForSettledState } from "../testUtils";
+import { CrossmintAuthProvider, CrossmintAuthWalletConfig } from "./CrossmintAuthProvider";
+
+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(),
+        validateApiKeyAndGetCrossmintBaseUrl: vi.fn(),
+    };
+});
+
+function renderAuthProvider({
+    children,
+    embeddedWallets,
+}: {
+    children: ReactNode;
+    embeddedWallets: CrossmintAuthWalletConfig;
+}) {
+    return render(
+        <CrossmintProvider apiKey={MOCK_API_KEY}>
+            <CrossmintAuthProvider embeddedWallets={embeddedWallets}>{children}</CrossmintAuthProvider>
+        </CrossmintProvider>
+    );
+}
+
+function TestComponent() {
+    const { setJwt } = useCrossmint();
+    const { wallet, status: walletStatus, error } = useWallet();
+    const { status: authStatus } = useAuth();
+
+    return (
+        <div>
+            <div data-testid="error">{error?.message ?? "No Error"}</div>
+            <div data-testid="wallet-status">{walletStatus}</div>
+            <div data-testid="auth-status">{authStatus}</div>
+            <div data-testid="wallet">{wallet ? "Wallet Loaded" : "No Wallet"}</div>
+            <button data-testid="jwt-input" onClick={() => setJwt("mock-jwt")}>
+                Set JWT
+            </button>
+
+            <button data-testid="clear-jwt-button" onClick={() => setJwt(undefined)}>
+                Clear JWT
+            </button>
+        </div>
+    );
+}
+
+describe("CrossmintAuthProvider", () => {
+    let mockSDK: SmartWalletSDK;
+    let mockWallet: EVMSmartWallet;
+    let embeddedWallets: CrossmintAuthWalletConfig;
+
+    beforeEach(() => {
+        vi.resetAllMocks();
+        vi.mocked(createCrossmint).mockImplementation(() => ({
+            apiKey: MOCK_API_KEY,
+            jwt: "mock-jwt",
+        }));
+
+        mockSDK = mock<SmartWalletSDK>();
+        mockWallet = mock<EVMSmartWallet>();
+        vi.mocked(SmartWalletSDK.init).mockReturnValue(mockSDK);
+        vi.mocked(mockSDK.getOrCreateWallet).mockResolvedValue(mockWallet);
+
+        embeddedWallets = {
+            defaultChain: "polygon",
+            createOnLogin: "all-users",
+            type: "evm-smart-wallet",
+        };
+    });
+
+    test("Happy path", async () => {
+        const { getByTestId } = renderAuthProvider({
+            children: <TestComponent />,
+            embeddedWallets,
+        });
+
+        expect(getByTestId("wallet-status").textContent).toBe("in-progress");
+        expect(getByTestId("auth-status").textContent).toBe("logged-in");
+        expect(getByTestId("wallet").textContent).toBe("No Wallet");
+        expect(getByTestId("error").textContent).toBe("No Error");
+
+        await waitForSettledState(() => {
+            expect(getByTestId("wallet-status").textContent).toBe("loaded");
+            expect(getByTestId("auth-status").textContent).toBe("logged-in");
+            expect(getByTestId("wallet").textContent).toBe("Wallet Loaded");
+            expect(getByTestId("error").textContent).toBe("No Error");
+        });
+
+        expect(vi.mocked(mockSDK.getOrCreateWallet)).toHaveBeenCalledOnce();
+    });
+
+    test(`When "createOnLogin" is "false", wallet is not loaded`, async () => {
+        const { getByTestId } = renderAuthProvider({
+            children: <TestComponent />,
+            embeddedWallets: {
+                defaultChain: "polygon",
+                createOnLogin: "off",
+                type: "evm-smart-wallet",
+            },
+        });
+
+        await waitForSettledState(() => {
+            expect(getByTestId("wallet").textContent).toBe("No Wallet");
+            expect(getByTestId("wallet-status").textContent).toBe("not-loaded");
+        });
+
+        expect(vi.mocked(mockSDK.getOrCreateWallet)).not.toHaveBeenCalled();
+    });
+
+    test(`When the jwt from crossmint provider is not defined, wallet is not loaded`, async () => {
+        vi.mocked(createCrossmint).mockImplementation(() => ({
+            apiKey: MOCK_API_KEY,
+            jwt: undefined,
+        }));
+
+        const { getByTestId } = renderAuthProvider({
+            children: <TestComponent />,
+            embeddedWallets,
+        });
+
+        await waitForSettledState(() => {
+            expect(getByTestId("wallet-status").textContent).toBe("not-loaded");
+            expect(getByTestId("auth-status").textContent).toBe("logged-out");
+            expect(getByTestId("wallet").textContent).toBe("No Wallet");
+        });
+
+        expect(vi.mocked(mockSDK.getOrCreateWallet)).not.toHaveBeenCalled();
+    });
+
+    test("When the jwt is cleared, so is the wallet", async () => {
+        const { getByTestId } = renderAuthProvider({
+            children: <TestComponent />,
+            embeddedWallets,
+        });
+
+        await waitForSettledState(() => {
+            expect(getByTestId("wallet-status").textContent).toBe("loaded");
+            expect(getByTestId("auth-status").textContent).toBe("logged-in");
+            expect(getByTestId("wallet").textContent).toBe("Wallet Loaded");
+        });
+
+        fireEvent.click(getByTestId("clear-jwt-button"));
+
+        await waitForSettledState(() => {
+            expect(getByTestId("wallet-status").textContent).toBe("not-loaded");
+            expect(getByTestId("auth-status").textContent).toBe("logged-out");
+            expect(getByTestId("wallet").textContent).toBe("No Wallet");
+        });
+
+        expect(vi.mocked(mockSDK.getOrCreateWallet)).toHaveBeenCalledOnce();
+    });
+
+    test(`Logging in and asserting the auth status`, async () => {
+        vi.mocked(createCrossmint).mockImplementation(() => ({
+            apiKey: MOCK_API_KEY,
+            jwt: undefined,
+        }));
+
+        const { getByTestId } = renderAuthProvider({
+            children: <TestComponent />,
+            embeddedWallets,
+        });
+
+        await waitForSettledState(() => {
+            expect(getByTestId("auth-status").textContent).toBe("logged-out");
+        });
+
+        fireEvent.click(getByTestId("jwt-input"));
+
+        // We can't assert the status: "in-progress" because the jwt state is set instantly
+
+        await waitForSettledState(() => {
+            expect(getByTestId("auth-status").textContent).toBe("logged-in");
+        });
+    });
+});

package/src/providers/CrossmintAuthProvider.tsx

@@ -1,23 +1,138 @@
-import { useCrossmint } from "@/hooks";
-import { ReactNode } from "react";
+import { type ReactNode, createContext, useEffect, useState } from "react";
+import { createPortal } from "react-dom";
 
-import { AuthProvider as AuthCoreProvider } from "@crossmint/client-sdk-auth-core/client";
-import { UIConfig } from "@crossmint/common-sdk-base";
+import type { EVMSmartWalletChain } from "@crossmint/client-sdk-smart-wallet";
+import { type UIConfig, validateApiKeyAndGetCrossmintBaseUrl } from "@crossmint/common-sdk-base";
 
-import { CrossmintWalletConfig, CrossmintWalletProvider } from "./CrossmintWalletProvider";
+import AuthModal from "../components/auth/AuthModal";
+import { useCrossmint, useWallet } from "../hooks";
+import { SESSION_PREFIX } from "../utils";
+import { CrossmintWalletProvider } from "./CrossmintWalletProvider";
 
-type CrossmintAuthProviderProps = {
-    embeddedWallets: CrossmintWalletConfig;
-    children: ReactNode;
+export type CrossmintAuthWalletConfig = {
+    defaultChain: EVMSmartWalletChain;
+    createOnLogin: "all-users" | "off";
+    type: "evm-smart-wallet";
+};
+
+export type CrossmintAuthProviderProps = {
+    embeddedWallets: CrossmintAuthWalletConfig;
     appearance?: UIConfig;
+    children: ReactNode;
 };
 
+type AuthStatus = "logged-in" | "logged-out" | "in-progress";
+
+type AuthContextType = {
+    login: () => void;
+    logout: () => void;
+    jwt?: string;
+    status: AuthStatus;
+};
+
+export const AuthContext = createContext<AuthContextType>({
+    login: () => {},
+    logout: () => {},
+    status: "logged-out",
+});
+
 export function CrossmintAuthProvider({ embeddedWallets, children, appearance }: CrossmintAuthProviderProps) {
     const { crossmint, setJwt } = useCrossmint("CrossmintAuthProvider must be used within CrossmintProvider");
+    const crossmintBaseUrl = validateApiKeyAndGetCrossmintBaseUrl(crossmint.apiKey);
+    const [modalOpen, setModalOpen] = useState(false);
+
+    const login = () => {
+        if (crossmint.jwt != null) {
+            console.log("User already logged in");
+            return;
+        }
+
+        setModalOpen(true);
+    };
+
+    const logout = () => {
+        document.cookie = `${SESSION_PREFIX}=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;`;
+        setJwt(undefined);
+    };
+
+    useEffect(() => {
+        if (crossmint.jwt == null) {
+            return;
+        }
+
+        setModalOpen(false);
+    }, [crossmint.jwt]);
+
+    useEffect(() => {
+        if (crossmint.jwt) {
+            document.cookie = `${SESSION_PREFIX}=${crossmint.jwt}; path=/;SameSite=Lax;`;
+        }
+    }, [crossmint.jwt]);
+
+    const getAuthStatus = (): AuthStatus => {
+        if (crossmint.jwt != null) {
+            return "logged-in";
+        }
+        if (modalOpen) {
+            return "in-progress";
+        }
+        return "logged-out";
+    };
 
     return (
-        <AuthCoreProvider setJwtToken={setJwt} crossmint={crossmint} appearance={appearance}>
-            <CrossmintWalletProvider config={embeddedWallets}>{children}</CrossmintWalletProvider>
-        </AuthCoreProvider>
+        <AuthContext.Provider
+            value={{
+                login,
+                logout,
+                jwt: crossmint.jwt,
+                status: getAuthStatus(),
+            }}
+        >
+            <CrossmintWalletProvider defaultChain={embeddedWallets.defaultChain}>
+                <WalletManager embeddedWallets={embeddedWallets} accessToken={crossmint.jwt}>
+                    {children}
+                </WalletManager>
+                {modalOpen
+                    ? createPortal(
+                          <AuthModal
+                              baseUrl={crossmintBaseUrl}
+                              setModalOpen={setModalOpen}
+                              setJwtToken={setJwt}
+                              apiKey={crossmint.apiKey}
+                              appearance={appearance}
+                          />,
+
+                          document.body
+                      )
+                    : null}
+            </CrossmintWalletProvider>
+        </AuthContext.Provider>
     );
 }
+
+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

@@ -0,0 +1,206 @@
+import { fireEvent, render, waitFor } from "@testing-library/react";
+import { ReactNode } from "react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { mock } from "vitest-mock-extended";
+
+import { 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, waitForSettledState } 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(),
+    };
+});
+
+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(() => ({
+            apiKey: MOCK_API_KEY,
+            jwt: "mock-jwt",
+        }));
+
+        mockSDK = mock<SmartWalletSDK>();
+        mockWallet = mock<EVMSmartWallet>();
+        vi.mocked(SmartWalletSDK.init).mockReturnValue(mockSDK);
+        vi.mocked(mockSDK.getOrCreateWallet).mockResolvedValue(mockWallet);
+    });
+
+    describe("getOrCreateWallet", () => {
+        test("happy path ", async () => {
+            const { getByTestId } = renderWalletProvider({
+                children: <TestComponent />,
+            });
+
+            expect(getByTestId("status").textContent).toBe("not-loaded");
+            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 waitForSettledState(() => {
+                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(createCrossmint).mockImplementation(() => ({
+                    apiKey: MOCK_API_KEY,
+                    jwt: undefined,
+                }));
+            });
+
+            it("does not create a wallet", async () => {
+                const { getByTestId } = renderWalletProvider({
+                    children: <TestComponent />,
+                });
+
+                fireEvent.click(getByTestId("create-wallet-button"));
+
+                await waitForSettledState(() => {
+                    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 waitForSettledState(() => {
+                    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 waitForSettledState(() => {
+                    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();
+            });
+        });
+    });
+
+    test("clearWallet happy path", async () => {
+        const { getByTestId } = renderWalletProvider({
+            children: <TestComponent />,
+        });
+
+        fireEvent.click(getByTestId("create-wallet-button"));
+
+        await waitForSettledState(() => {
+            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 waitForSettledState(() => {
+            expect(getByTestId("status").textContent).toBe("not-loaded");
+            expect(getByTestId("wallet").textContent).toBe("No Wallet");
+            expect(getByTestId("error").textContent).toBe("No Error");
+        });
+    });
+});