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

package/src/providers/CrossmintWalletProvider.tsx

@@ -1,90 +1,93 @@
-import { useCrossmint } from "@/hooks";
-import { ReactNode, createContext, useEffect, useMemo, useState } from "react";
+import { ReactNode, createContext, useMemo, useState } from "react";
 
-import { EVMSmartWallet, SmartWalletError, SmartWalletSDK } from "@crossmint/client-sdk-smart-wallet";
+import {
+    EVMSmartWallet,
+    EVMSmartWalletChain,
+    SmartWalletError,
+    SmartWalletSDK,
+    WalletParams,
+} 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";
-};
+import { useCrossmint } from "../hooks";
 
 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) };
-}
-
 type WalletContext = {
     status: WalletStatus;
     wallet?: EVMSmartWallet;
     error?: SmartWalletError;
-    getOrCreateWallet: () => Promise<void>;
+    getOrCreateWallet: (config?: WalletConfig) => { startedCreation: boolean; reason?: string };
+    clearWallet: () => void;
 };
 
 export const WalletContext = createContext<WalletContext>({
     status: "not-loaded",
-    getOrCreateWallet: async () => {},
+    getOrCreateWallet: () => ({ startedCreation: false }),
+    clearWallet: () => {},
 });
 
-export function CrossmintWalletProvider({ children, config }: { config: CrossmintWalletConfig; children: ReactNode }) {
+export type WalletConfig = WalletParams & { type: "evm-smart-wallet" };
+
+export function CrossmintWalletProvider({
+    children,
+    defaultChain,
+}: {
+    children: ReactNode;
+    defaultChain: EVMSmartWalletChain;
+}) {
     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 getOrCreateWalletInternal = async (jwt: string) => {
-        try {
-            setState({ status: "in-progress" });
-            const wallet = await smartWalletSDK.getOrCreateWallet({ 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" && crossmint.jwt != null && state.status === "not-loaded") {
-            console.log("Getting or Creating wallet");
-            getOrCreateWalletInternal(crossmint.jwt);
-            return;
-        }
+    const [state, setState] = useState<ValidWalletState>({ status: "not-loaded" });
 
-        if (state.status === "loaded" && crossmint.jwt == null) {
-            console.log("Clearing wallet");
-            setState({ status: "not-loaded" });
-            return;
+    const getOrCreateWallet = (config: WalletConfig = { type: "evm-smart-wallet", signer: { type: "PASSKEY" } }) => {
+        if (state.status == "in-progress") {
+            console.log("Wallet already loading");
+            return { startedCreation: false, reason: "Wallet is already loading." };
         }
-    }, [crossmint.jwt, config.createOnLogin, state.status]);
 
-    const getOrCreateWalletExternal = async () => {
         if (crossmint.jwt == null) {
-            console.log("No authenticated user, not creating wallet.");
-            return;
+            return { startedCreation: false, reason: `Jwt not set in "CrossmintProvider".` };
         }
 
-        if (state.status === "loaded" || state.status === "in-progress") {
-            console.log("Wallet is already loaded, or is currently loading.");
-            return;
-        }
+        const internalCall = async () => {
+            try {
+                setState({ status: "in-progress" });
+                const wallet = await smartWalletSDK.getOrCreateWallet(
+                    { jwt: crossmint.jwt as string },
+                    defaultChain,
+                    config
+                );
+                setState({ status: "loaded", wallet });
+            } catch (error: unknown) {
+                console.error("There was an error creating a wallet ", error);
+                setState(deriveErrorState(error));
+            }
+        };
+
+        internalCall();
+        return { startedCreation: true };
+    };
 
-        return getOrCreateWalletInternal(crossmint.jwt);
+    const clearWallet = () => {
+        setState({ status: "not-loaded" });
     };
 
     return (
-        <WalletContext.Provider value={{ ...state, getOrCreateWallet: getOrCreateWalletExternal }}>
-            {children}
-        </WalletContext.Provider>
+        <WalletContext.Provider value={{ ...state, getOrCreateWallet, clearWallet }}>{children}</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/testUtils.ts

@@ -0,0 +1,5 @@
+export const MOCK_API_KEY = "sk_development_12341234";
+export const waitForSettledState = async (callback: () => void) => {
+    await new Promise((resolve) => setTimeout(resolve, 20));
+    callback();
+};

package/src/utils/constants.ts

@@ -0,0 +1 @@
+export const SESSION_PREFIX = "crossmint-session";

package/src/utils/index.ts

@@ -0,0 +1,2 @@
+export * from "./constants";
+export * from "./jwt";

package/src/utils/jwt.ts

@@ -0,0 +1,9 @@
+import { SESSION_PREFIX } from "./constants";
+
+export function getCachedJwt(): string | undefined {
+    if (typeof document === "undefined") {
+        return undefined; // Check if we're on the client-side
+    }
+    const crossmintSession = document.cookie.split("; ").find((row) => row.startsWith(SESSION_PREFIX));
+    return crossmintSession ? crossmintSession.split("=")[1] : undefined;
+}