@crossmint/client-sdk-react-ui 1.3.8 → 1.3.9

package/src/hooks/useCrossmint.test.tsx

@@ -1,23 +1,17 @@
-import { act, render } from "@testing-library/react";
+import { fireEvent, render } from "@testing-library/react";
 import { useEffect } from "react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
 
-import { Crossmint } from "@crossmint/common-sdk-base";
+import { Crossmint, createCrossmint } from "@crossmint/common-sdk-base";
 
 import { CrossmintProvider, useCrossmint } from "./useCrossmint";
 
 const MOCK_API_KEY =
     "sk_development_5ZUNkuhjP8aYZEgUTDfWToqFpo5zakEqte1db4pHZgPAVKZ9JuSvnKeGiqY654DoBuuZEzYz4Eb8gRV2ePqQ1fxTjEP8tTaUQdzbGfyG9RgyeN5YbqViXinqxk8EayEkAGtvSSgjpjEr6iaBptJtUFwPW59DjQzTQP6P8uZdiajenVg7bARGKjzFyByNuVEoz41DpRB4hDZNFdwCTuf5joFv";
 
-jest.mock("@crossmint/common-sdk-base", () => {
-    const actualModule = jest.requireActual("@crossmint/common-sdk-base");
-
-    return {
-        ...actualModule,
-        createCrossmint: jest.fn(() => ({
-            apiKey: MOCK_API_KEY,
-        })),
-    };
-});
+vi.mock("@crossmint/common-sdk-base", () => ({
+    createCrossmint: vi.fn(),
+}));
 
 class MockSDK {
     constructor(public crossmint: Crossmint) {}
@@ -31,6 +25,14 @@ function renderCrossmintProvider({ children }: { children: JSX.Element }) {
 }
 
 describe("CrossmintProvider", () => {
+    beforeEach(() => {
+        vi.resetAllMocks();
+        vi.mocked(createCrossmint).mockImplementation(() => ({
+            apiKey: MOCK_API_KEY,
+            jwt: "",
+        }));
+    });
+
     it("provides initial JWT value", () => {
         const TestComponent = () => {
             const { crossmint } = useCrossmint();
@@ -51,9 +53,7 @@ describe("CrossmintProvider", () => {
             );
         };
         const { getByTestId, getByText } = renderCrossmintProvider({ children: <TestComponent /> });
-        act(() => {
-            getByText("Update JWT").click();
-        });
+        fireEvent.click(getByText("Update JWT"));
         expect(getByTestId("jwt").textContent).toBe("new_jwt");
     });
 
@@ -71,7 +71,7 @@ describe("CrossmintProvider", () => {
     });
 
     it("triggers re-render on JWT change", () => {
-        const renderCount = jest.fn();
+        const renderCount = vi.fn();
         const TestComponent = () => {
             const { crossmint, setJwt } = useCrossmint();
             useEffect(() => {
@@ -89,9 +89,7 @@ describe("CrossmintProvider", () => {
 
         expect(renderCount).toHaveBeenCalledTimes(1);
 
-        act(() => {
-            getByText("Update JWT").click();
-        });
+        fireEvent.click(getByText("Update JWT"));
 
         expect(renderCount).toHaveBeenCalledTimes(2);
     });

package/src/hooks/useCrossmint.tsx

@@ -1,5 +1,6 @@
 import { ReactNode, createContext, useCallback, useContext, useMemo, useRef, useState } from "react";
 
+import { getCachedJwt } from "@crossmint/client-sdk-auth-core/client";
 import { Crossmint, createCrossmint } from "@crossmint/common-sdk-base";
 
 export interface CrossmintContext {
@@ -16,14 +17,17 @@ export function CrossmintProvider({
     const [version, setVersion] = useState(0);
 
     const crossmintRef = useRef<Crossmint>(
-        new Proxy<Crossmint>(createCrossmint(createCrossmintParams), {
-            set(target, prop, value) {
-                if (prop === "jwt" && target.jwt !== value) {
-                    setVersion((v) => v + 1);
-                }
-                return Reflect.set(target, prop, value);
-            },
-        })
+        new Proxy<Crossmint>(
+            createCrossmint({ ...createCrossmintParams, jwt: createCrossmintParams.jwt ?? getCachedJwt() }),
+            {
+                set(target, prop, value) {
+                    if (prop === "jwt" && target.jwt !== value) {
+                        setVersion((v) => v + 1);
+                    }
+                    return Reflect.set(target, prop, value);
+                },
+            }
+        )
     );
 
     const setJwt = useCallback((jwt: string | undefined) => {
@@ -45,10 +49,10 @@ export function CrossmintProvider({
     return <CrossmintContext.Provider value={value}>{children}</CrossmintContext.Provider>;
 }
 
-export function useCrossmint() {
+export function useCrossmint(missingContextMessage?: string) {
     const context = useContext(CrossmintContext);
     if (context == null) {
-        throw new Error("useCrossmint must be used within a CrossmintProvider");
+        throw new Error(missingContextMessage ?? "useCrossmint must be used within a CrossmintProvider");
     }
     return context;
 }

package/src/hooks/useWallet.ts

@@ -0,0 +1,12 @@
+import { WalletContext } from "@/providers/CrossmintWalletProvider";
+import { useContext } from "react";
+
+export function useWallet() {
+    const walletContext = useContext(WalletContext);
+
+    if (!walletContext) {
+        throw new Error("useWallet must be used within CrossmintAuthProvider or CrossmintWalletProvider");
+    }
+
+    return walletContext;
+}

package/src/providers/CrossmintAuthProvider.tsx

@@ -1,57 +1,22 @@
-import { createContext, useEffect, useMemo, useState } from "react";
+import { useCrossmint } from "@/hooks";
+import { ReactNode } from "react";
 
-import { AuthProvider, type AuthProviderParams, useAuth as useAuthCore } from "@crossmint/client-sdk-auth-core/client";
-import { EVMSmartWallet, SmartWalletSDK } from "@crossmint/client-sdk-smart-wallet";
+import { AuthProvider as AuthCoreProvider } from "@crossmint/client-sdk-auth-core/client";
 
-type AuthWalletProviderParams = AuthProviderParams & {
-    embeddedWallets: {
-        type: "evm-smart-wallet";
-        defaultChain: "polygon-amoy" | "base-sepolia";
-        createOnLogin: "all-users" | "off";
-    };
-};
+import { CrossmintWalletConfig, CrossmintWalletProvider } from "./CrossmintWalletProvider";
 
-export const WalletContext = createContext<{ wallet: EVMSmartWallet | null }>({
-    wallet: null,
-});
+export function CrossmintAuthProvider({
+    embeddedWallets,
+    children,
+}: {
+    embeddedWallets: CrossmintWalletConfig;
+    children: ReactNode;
+}) {
+    const { crossmint, setJwt } = useCrossmint("CrossmintAuthProvider must be used within CrossmintProvider");
 
-export function CrossmintAuthProvider(props: AuthWalletProviderParams) {
     return (
-        <AuthProvider {...props}>
-            <AuthWalletProvider {...props}></AuthWalletProvider>
-        </AuthProvider>
+        <AuthCoreProvider setJwtToken={setJwt} crossmint={crossmint}>
+            <CrossmintWalletProvider config={embeddedWallets}>{children}</CrossmintWalletProvider>
+        </AuthCoreProvider>
     );
 }
-
-function AuthWalletProvider(props: AuthWalletProviderParams) {
-    const { jwt } = useAuthCore();
-
-    const [wallet, setWallet] = useState<EVMSmartWallet | null>(null);
-
-    const smartWalletSDK = useMemo(() => SmartWalletSDK.init({ clientApiKey: props.apiKey }), [props.apiKey]);
-
-    const getOrCreateWallet = async (jwt: string) => {
-        try {
-            const wallet = await smartWalletSDK.getOrCreateWallet({ jwt }, props.embeddedWallets.defaultChain);
-            setWallet(wallet);
-        } catch (e: any) {
-            console.error("There was an error creating a wallet ", e);
-            throw e;
-        }
-    };
-
-    useEffect(() => {
-        if (props.embeddedWallets.createOnLogin && jwt) {
-            console.log("Getting or Creating wallet");
-            getOrCreateWallet(jwt);
-        }
-
-        if (wallet && !jwt) {
-            // implies a logout has occurred, clear wallet
-            console.log("Clearing wallet");
-            setWallet(null);
-        }
-    }, [jwt, props.embeddedWallets.createOnLogin]);
-
-    return <WalletContext.Provider value={{ wallet }}>{props.children}</WalletContext.Provider>;
-}

package/src/providers/CrossmintWalletProvider.tsx

@@ -0,0 +1,80 @@
+import { useCrossmint } from "@/hooks";
+import { ReactNode, createContext, useEffect, useMemo, useState } from "react";
+
+import { EVMSmartWallet, SmartWalletError, SmartWalletSDK } from "@crossmint/client-sdk-smart-wallet";
+
+export type CrossmintWalletConfig = {
+    type: "evm-smart-wallet";
+    defaultChain: "polygon-amoy" | "base-sepolia" | "optimism-sepolia" | "arbitrum-sepolia";
+    createOnLogin: "all-users" | "off";
+};
+
+type WalletStatus = "not-loaded" | "in-progress" | "loaded" | "loading-error";
+
+type ValidWalletState =
+    | { status: "not-loaded" | "in-progress" }
+    | { status: "loaded"; wallet: EVMSmartWallet }
+    | { status: "loading-error"; error: SmartWalletError };
+
+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) };
+}
+
+function shouldGetOrCreateWallet(status: WalletStatus, jwt: string | undefined): jwt is string {
+    return jwt != null && !(status === "in-progress" || status === "loaded");
+}
+
+type WalletContext = {
+    status: WalletStatus;
+    wallet?: EVMSmartWallet;
+    error?: SmartWalletError;
+    getOrCreateWallet: () => Promise<void>;
+};
+
+export const WalletContext = createContext<WalletContext>({
+    status: "not-loaded",
+    getOrCreateWallet: async () => {},
+});
+
+export function CrossmintWalletProvider({ children, config }: { config: CrossmintWalletConfig; children: ReactNode }) {
+    const { crossmint } = useCrossmint("CrossmintWalletProvider must be used within CrossmintProvider");
+    const [state, setState] = useState<ValidWalletState>({ status: "not-loaded" });
+    const smartWalletSDK = useMemo(() => SmartWalletSDK.init({ clientApiKey: crossmint.apiKey }), [crossmint.apiKey]);
+
+    const getOrCreateWallet = async () => {
+        if (!shouldGetOrCreateWallet(state.status, crossmint.jwt)) {
+            return;
+        }
+
+        try {
+            setState({ status: "in-progress" });
+            const wallet = await smartWalletSDK.getOrCreateWallet({ jwt: crossmint.jwt }, config.defaultChain);
+            setState({ status: "loaded", wallet });
+        } catch (error: unknown) {
+            console.error("There was an error creating a wallet ", error);
+            setState(deriveErrorState(error));
+        }
+    };
+
+    useEffect(() => {
+        if (config.createOnLogin === "all-users" && shouldGetOrCreateWallet(state.status, crossmint.jwt)) {
+            console.log("Getting or Creating wallet");
+            getOrCreateWallet();
+            return;
+        }
+
+        if (state.status === "loaded" && crossmint.jwt == null) {
+            console.log("Clearing wallet");
+            setState({ status: "not-loaded" });
+            return;
+        }
+    }, [crossmint.jwt, config.createOnLogin, state.status]);
+
+    return <WalletContext.Provider value={{ ...state, getOrCreateWallet }}>{children}</WalletContext.Provider>;
+}

package/src/providers/index.ts

@@ -1 +1,2 @@
 export * from "./CrossmintAuthProvider";
+export * from "./CrossmintWalletProvider";

package/src/hooks/useAuth.ts

@@ -1,15 +0,0 @@
-import { WalletContext } from "@/providers/CrossmintAuthProvider";
-import { useContext } from "react";
-
-import { useAuth as useAuthCore } from "@crossmint/client-sdk-auth-core/client";
-
-export function useAuth() {
-    const walletContext = useContext(WalletContext);
-
-    if (!walletContext) {
-        throw new Error("useAuth must be used within a CrossmintAuthProvider");
-    }
-
-    const authContext = useAuthCore();
-    return { ...authContext, ...walletContext };
-}