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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crossmint/client-sdk-react-ui",
-  "version": "1.7.0",
+  "version": "1.8.0",
   "repository": "https://github.com/Crossmint/crossmint-sdk",
   "license": "Apache-2.0",
   "author": "Paella Labs Inc",
@@ -19,6 +19,11 @@
     "LICENSE"
   ],
   "dependencies": {
+    "@dynamic-labs/ethereum": "3.3.0",
+    "@dynamic-labs/ethereum-core": "3.3.0",
+    "@dynamic-labs/sdk-react-core": "3.3.0",
+    "@dynamic-labs/solana": "3.3.0",
+    "@dynamic-labs/solana-core": "3.3.0",
     "@ethersproject/transactions": "5.7.0",
     "@headlessui/react": "2.1.5",
     "@solana/web3.js": "1.95.1",
@@ -30,13 +35,14 @@
     "react-jss": "10.10.0",
     "tailwind-merge": "2.4.0",
     "tailwindcss": "3.4.10",
+    "viem": "2.17.5",
     "zod": "3.22.4",
-    "@crossmint/client-sdk-auth": "0.2.0",
-    "@crossmint/client-sdk-base": "1.2.8",
-    "@crossmint/client-sdk-smart-wallet": "0.1.19",
-    "@crossmint/client-sdk-window": "0.0.10",
+    "@crossmint/client-sdk-auth": "0.2.1",
+    "@crossmint/client-sdk-base": "1.3.0",
+    "@crossmint/client-sdk-smart-wallet": "0.1.20",
+    "@crossmint/client-sdk-window": "0.1.0",
     "@crossmint/common-sdk-base": "0.2.0",
-    "@crossmint/common-sdk-auth": "0.2.0"
+    "@crossmint/common-sdk-auth": "0.2.1"
   },
   "devDependencies": {
     "@types/lodash.isequal": "4.5.6",

package/src/components/auth/AuthModal.tsx

@@ -5,7 +5,7 @@ import { z } from "zod";
 import { IFrameWindow } from "@crossmint/client-sdk-window";
 import type { UIConfig } from "@crossmint/common-sdk-base";
 import { CrossmintInternalEvents } from "@crossmint/client-sdk-base";
-import type { AuthMaterial } from "@crossmint/common-sdk-auth";
+import type { AuthMaterialWithUser } from "@crossmint/common-sdk-auth";
 import type { LoginMethod } from "@/providers";
 
 import X from "../../icons/x";
@@ -25,7 +25,7 @@ type IncomingModalIframeEventsType = {
 type AuthModalProps = {
     setModalOpen: (open: boolean) => void;
     apiKey: string;
-    fetchAuthMaterial: (refreshToken: string) => Promise<AuthMaterial>;
+    fetchAuthMaterial: (refreshToken: string) => Promise<AuthMaterialWithUser>;
     baseUrl: string;
     appearance?: UIConfig;
     loginMethods?: LoginMethod[];

package/src/components/dynamic-xyz/DynamicContextProviderWrapper.tsx

@@ -0,0 +1,21 @@
+import { type DynamicContextProps, DynamicContextProvider } from "@dynamic-labs/sdk-react-core";
+import type { ReactNode } from "react";
+
+export interface DynamicContextProviderWrapperProps {
+    children?: ReactNode;
+    settings: Omit<DynamicContextProps["settings"], "initialAuthenticationMode" | "environmentId">;
+}
+
+export default function DynamicContextProviderWrapper({ children, settings }: DynamicContextProviderWrapperProps) {
+    return (
+        <DynamicContextProvider
+            settings={{
+                initialAuthenticationMode: "connect-only",
+                environmentId: "cd53135a-b32b-4704-bfca-324b665e9329", // TODO: Key per env
+                ...settings,
+            }}
+        >
+            {children}
+        </DynamicContextProvider>
+    );
+}

package/src/components/embed/v3/CrossmintEmbeddedCheckoutV3.tsx

@@ -0,0 +1,7 @@
+import type { CrossmintEmbeddedCheckoutV3Props } from "@crossmint/client-sdk-base";
+
+import { EmbeddedCheckoutV3IFrame } from "./EmbeddedCheckoutV3IFrame";
+
+export function CrossmintEmbeddedCheckout_Alpha(props: CrossmintEmbeddedCheckoutV3Props) {
+    return <EmbeddedCheckoutV3IFrame {...props} />;
+}

package/src/components/embed/v3/EmbeddedCheckoutV3IFrame.tsx

@@ -0,0 +1,69 @@
+import { useCrossmint } from "@/hooks";
+import { useEffect, useRef, useState } from "react";
+
+import {
+    type CrossmintEmbeddedCheckoutV3Props,
+    type EmbeddedCheckoutV3IFrameEmitter,
+    crossmintEmbeddedCheckoutV3Service,
+} from "@crossmint/client-sdk-base";
+
+import { CryptoWalletConnectionHandler } from "./crypto/CryptoWalletConnectionHandler";
+import { createCrossmintApiClient } from "@/utils/createCrossmintApiClient";
+
+export function EmbeddedCheckoutV3IFrame(props: CrossmintEmbeddedCheckoutV3Props) {
+    const [iframeClient, setIframeClient] = useState<EmbeddedCheckoutV3IFrameEmitter | null>(null);
+    const [height, setHeight] = useState(0);
+
+    const { crossmint } = useCrossmint();
+    const apiClient = createCrossmintApiClient(crossmint);
+    const embedV3Service = crossmintEmbeddedCheckoutV3Service({ apiClient });
+
+    const ref = useRef<HTMLIFrameElement>(null);
+
+    useEffect(() => {
+        const iframe = ref.current;
+        if (!iframe || iframeClient) {
+            return;
+        }
+        setIframeClient(embedV3Service.iframe.createClient(iframe));
+    }, [ref.current, iframeClient]);
+
+    useEffect(() => {
+        if (iframeClient == null) {
+            return;
+        }
+        iframeClient.on("ui:height.changed", (data) => setHeight(data.height));
+
+        return () => {
+            iframeClient.off("ui:height.changed");
+        };
+    }, [iframeClient]);
+
+    return (
+        <>
+            <iframe
+                ref={ref}
+                src={embedV3Service.iframe.getUrl(props)}
+                id="crossmint-embedded-checkout.iframe"
+                role="crossmint-embedded-checkout.iframe"
+                allow="payment *"
+                style={{
+                    boxShadow: "none",
+                    border: "none",
+                    padding: "0px",
+                    width: "100%",
+                    minWidth: "100%",
+                    overflow: "hidden",
+                    display: "block",
+                    userSelect: "none",
+                    transform: "translate(0px)",
+                    opacity: "1",
+                    transition: "ease 0s, opacity 0.4s ease 0.1s",
+                    height: `${height}px`,
+                    backgroundColor: "transparent",
+                }}
+            />
+            {props.payment.crypto.enabled ? <CryptoWalletConnectionHandler iframeClient={iframeClient} /> : null}
+        </>
+    );
+}

package/src/components/embed/v3/crypto/CryptoWalletConnectionHandler.tsx

@@ -0,0 +1,130 @@
+import DynamicContextProviderWrapper from "@/components/dynamic-xyz/DynamicContextProviderWrapper";
+import type { EmbeddedCheckoutV3IFrameEmitter } from "@crossmint/client-sdk-base";
+import { type BlockchainIncludingTestnet, chainIdToBlockchain } from "@crossmint/common-sdk-base";
+import { EthereumWalletConnectors } from "@dynamic-labs/ethereum";
+import { type HandleConnectedWallet, useDynamicContext } from "@dynamic-labs/sdk-react-core";
+import { SolanaWalletConnectors } from "@dynamic-labs/solana";
+import { useEffect } from "react";
+import { handleSendTransaction } from "./utils/handleSendTransaction";
+
+export function CryptoWalletConnectionHandler(props: { iframeClient: EmbeddedCheckoutV3IFrameEmitter | null }) {
+    const { iframeClient } = props;
+
+    return (
+        <DynamicContextProviderWrapper
+            settings={{
+                walletConnectors: [EthereumWalletConnectors, SolanaWalletConnectors],
+                events: {
+                    onAuthFlowCancel() {
+                        console.log("[CryptoWalletConnectionHandler] onAuthFlowCancel");
+                        iframeClient?.send("crypto:connect-wallet.failed", {
+                            error: "cancelled",
+                        });
+                    },
+                    onAuthFlowClose() {
+                        console.log("[CryptoWalletConnectionHandler] onAuthFlowClose");
+                    },
+                    onAuthFailure(data, reason) {
+                        console.error("[CryptoWalletConnectionHandler] onAuthFailure", data, reason);
+                    },
+                    onAuthSuccess(data) {
+                        console.log("[CryptoWalletConnectionHandler] onAuthSuccess", data);
+                    },
+                },
+                handlers: {
+                    handleConnectedWallet: async (wallet) => {
+                        console.log("[CryptoWalletConnectionHandler] handleConnectedWallet", wallet);
+
+                        const address = wallet.address;
+                        if (!address) {
+                            console.error("[CryptoWalletConnectionHandler] handleConnectedWallet: address is missing");
+                            iframeClient?.send("crypto:connect-wallet.failed", {
+                                error: "address is missing",
+                            });
+                            return false;
+                        }
+
+                        const chain = await dynamicChainToCrossmintChain(wallet);
+
+                        iframeClient?.send("crypto:connect-wallet.success", {
+                            address,
+                            chain,
+                            walletProviderKey: wallet.connector?.key,
+                        });
+
+                        return true;
+                    },
+                },
+            }}
+        >
+            <_CryptoWalletConnectionHandler {...props} />
+        </DynamicContextProviderWrapper>
+    );
+}
+
+function _CryptoWalletConnectionHandler({ iframeClient }: Parameters<typeof CryptoWalletConnectionHandler>[0]) {
+    const { setShowAuthFlow, primaryWallet, handleLogOut } = useDynamicContext();
+
+    useEffect(() => {
+        if (iframeClient == null) {
+            return;
+        }
+        const showAuthFlowListener = iframeClient.on("crypto:connect-wallet.show", async ({ show }) => {
+            await handleLogOut();
+            setShowAuthFlow(show);
+        });
+
+        return () => {
+            iframeClient.off(showAuthFlowListener);
+        };
+    }, [iframeClient, handleLogOut, setShowAuthFlow]);
+
+    useEffect(() => {
+        if (iframeClient == null) {
+            return;
+        }
+        const signTransactionListener = iframeClient.on(
+            "crypto:send-transaction",
+            async ({ chain, serializedTransaction }) => {
+                if (primaryWallet == null) {
+                    console.error("[CryptoWalletConnectionHandler] signTransaction: primaryWallet is missing");
+                    iframeClient.send("crypto:send-transaction:failed", {
+                        error: "primaryWallet is missing",
+                    });
+                    return;
+                }
+
+                await handleSendTransaction(
+                    primaryWallet,
+                    chain as BlockchainIncludingTestnet,
+                    serializedTransaction,
+                    iframeClient
+                );
+            }
+        );
+
+        return () => {
+            iframeClient.off(signTransactionListener);
+        };
+    }, [iframeClient, primaryWallet]);
+
+    return null;
+}
+
+async function dynamicChainToCrossmintChain(
+    wallet: Parameters<HandleConnectedWallet>[0]
+): Promise<BlockchainIncludingTestnet> {
+    const chain = wallet.chain;
+    if (chain === "SOL") {
+        return "solana";
+    }
+    const chainId = await wallet.connector?.getNetwork();
+    if (typeof chainId !== "number") {
+        throw new Error("chainId is not a number");
+    }
+    const chainFromChainId = chainIdToBlockchain(chainId);
+    if (!chainFromChainId) {
+        throw new Error(`ChainId ${chainId} is not supported`);
+    }
+    return chainFromChainId as BlockchainIncludingTestnet;
+}

package/src/components/embed/v3/crypto/utils/handleEvmTransaction.ts

@@ -0,0 +1,65 @@
+import type { EmbeddedCheckoutV3IFrameEmitter } from "@crossmint/client-sdk-base";
+import {
+    type BlockchainIncludingTestnet,
+    blockchainToChainId,
+    type EVMBlockchainIncludingTestnet,
+} from "@crossmint/common-sdk-base";
+import type { EthereumWallet } from "@dynamic-labs/ethereum-core";
+import { parseTransaction, type TransactionSerializableEIP1559 } from "viem";
+
+export async function handleEvmTransaction({
+    primaryWallet,
+    chain,
+    serializedTransaction,
+    iframeClient,
+}: {
+    primaryWallet: EthereumWallet;
+    chain: BlockchainIncludingTestnet;
+    serializedTransaction: string;
+    iframeClient: EmbeddedCheckoutV3IFrameEmitter;
+}) {
+    try {
+        await primaryWallet.switchNetwork(blockchainToChainId(chain as EVMBlockchainIncludingTestnet));
+    } catch (error) {
+        console.error("[CryptoWalletConnectionHandler] failed to switch network", error);
+        iframeClient.send("crypto:send-transaction:failed", {
+            error: (error as Error).message,
+        });
+        return;
+    }
+
+    let walletClient: Awaited<ReturnType<typeof primaryWallet.getWalletClient>>;
+    try {
+        walletClient = await primaryWallet.getWalletClient();
+    } catch (error) {
+        console.error("[CryptoWalletConnectionHandler] failed to get wallet client", error);
+        iframeClient.send("crypto:send-transaction:failed", {
+            error: (error as Error).message,
+        });
+        return;
+    }
+
+    let parsedTransaction: TransactionSerializableEIP1559;
+    try {
+        parsedTransaction = parseTransaction(serializedTransaction as `0x${string}`) as TransactionSerializableEIP1559;
+    } catch (error) {
+        console.error("[CryptoWalletConnectionHandler] failed to parse transaction", error);
+        iframeClient.send("crypto:send-transaction:failed", {
+            error: (error as Error).message,
+        });
+        return;
+    }
+
+    try {
+        const txId = await walletClient.sendTransaction(parsedTransaction);
+        console.log("[CryptoWalletConnectionHandler] txId", txId);
+        iframeClient.send("crypto:send-transaction:success", {
+            txId,
+        });
+    } catch (error) {
+        console.error("[CryptoWalletConnectionHandler] failed to send transaction", error);
+        iframeClient.send("crypto:send-transaction:failed", {
+            error: (error as Error).message,
+        });
+    }
+}

package/src/components/embed/v3/crypto/utils/handleSendTransaction.ts

@@ -0,0 +1,31 @@
+import type { Wallet } from "@dynamic-labs/sdk-react-core";
+
+import type { BlockchainIncludingTestnet } from "@crossmint/common-sdk-base";
+
+import { handleEvmTransaction } from "./handleEvmTransaction";
+
+import { isSolanaWallet } from "@dynamic-labs/solana";
+import { handleSolanaTransaction } from "./handleSolanaTransaction";
+import { isEthereumWallet } from "@dynamic-labs/ethereum";
+import type { EmbeddedCheckoutV3IFrameEmitter } from "@crossmint/client-sdk-base";
+
+export async function handleSendTransaction(
+    primaryWallet: Wallet,
+    chain: BlockchainIncludingTestnet,
+    serializedTransaction: string,
+    iframeClient: EmbeddedCheckoutV3IFrameEmitter
+) {
+    const commonParams = {
+        chain,
+        serializedTransaction,
+        iframeClient,
+    };
+    if (isSolanaWallet(primaryWallet)) {
+        return await handleSolanaTransaction({
+            ...commonParams,
+            primaryWallet,
+        });
+    } else if (isEthereumWallet(primaryWallet)) {
+        return await handleEvmTransaction({ ...commonParams, primaryWallet });
+    }
+}

package/src/components/embed/v3/crypto/utils/handleSolanaTransaction.ts

@@ -0,0 +1,51 @@
+import type { EmbeddedCheckoutV3IFrameEmitter } from "@crossmint/client-sdk-base";
+import type { SolanaWallet } from "@dynamic-labs/solana-core";
+import { Transaction } from "@solana/web3.js";
+import base58 from "bs58";
+
+export async function handleSolanaTransaction({
+    primaryWallet,
+    serializedTransaction,
+    iframeClient,
+}: {
+    primaryWallet: SolanaWallet;
+    serializedTransaction: string;
+    iframeClient: EmbeddedCheckoutV3IFrameEmitter;
+}) {
+    // TODO: Handle switch network
+
+    let signer: Awaited<ReturnType<typeof primaryWallet.getSigner>>;
+    try {
+        signer = await primaryWallet.getSigner();
+    } catch (error) {
+        console.error("[CryptoWalletConnectionHandler] failed to get signer", error);
+        iframeClient.send("crypto:send-transaction:failed", {
+            error: "Failed to get signer",
+        });
+        return;
+    }
+
+    let deserializedTransaction: Transaction;
+    try {
+        deserializedTransaction = Transaction.from(base58.decode(serializedTransaction));
+    } catch (error) {
+        console.error("[CryptoWalletConnectionHandler] failed to deserialize transaction", error);
+        iframeClient.send("crypto:send-transaction:failed", {
+            error: "Failed to deserialize transaction",
+        });
+        return;
+    }
+
+    try {
+        const { signature: txId } = await signer.signAndSendTransaction(deserializedTransaction);
+        console.log("[CryptoWalletConnectionHandler] txId", txId);
+        iframeClient.send("crypto:send-transaction:success", {
+            txId,
+        });
+    } catch (error) {
+        console.error("[CryptoWalletConnectionHandler] failed to send transaction", error);
+        iframeClient.send("crypto:send-transaction:failed", {
+            error: (error as Error).message,
+        });
+    }
+}

package/src/components/embed/v3/index.ts

@@ -0,0 +1 @@
+export * from "./CrossmintEmbeddedCheckoutV3";

package/src/components/index.ts

@@ -3,3 +3,5 @@ export * from "./CrossmintNFTDetail";
 
 export * from "./embed";
 export * from "./hosted";
+
+export * from "./embed/v3";

package/src/hooks/index.ts

@@ -1,4 +1,5 @@
 export * from "./useCrossmint";
+export * from "./useCrossmintCheckout";
 export * from "./useWallet";
 export * from "./useAuth";
 export * from "./useRefreshToken";

package/src/hooks/useCrossmintCheckout.tsx

@@ -0,0 +1,54 @@
+import { createContext, type ReactNode, useContext, useEffect, useState } from "react";
+import type { embeddedCheckoutV3IncomingEvents } from "@crossmint/client-sdk-base";
+import type { z } from "zod";
+import { useCrossmint } from "./useCrossmint";
+import { createCrossmintApiClient } from "@/utils/createCrossmintApiClient";
+
+export interface CrossmintCheckoutContext {
+    order?: any;
+    orderClientSecret?: string;
+}
+
+const CrossmintCheckoutContext = createContext<CrossmintCheckoutContext | undefined>(undefined);
+
+export function CrossmintCheckoutProvider({ children }: { children: ReactNode }) {
+    const [order, setOrder] = useState<any>();
+    const [orderClientSecret, setOrderClientSecret] = useState<string>();
+
+    const { crossmint } = useCrossmint();
+    const apiClient = createCrossmintApiClient(crossmint);
+
+    useEffect(() => {
+        const listener = (event: MessageEvent) => {
+            if (event.origin !== new URL(apiClient.baseUrl).origin) {
+                return;
+            }
+            if (event.data.event !== "order:updated") {
+                return;
+            }
+            const { order, orderClientSecret } = event.data.data as z.infer<
+                (typeof embeddedCheckoutV3IncomingEvents)["order:updated"]
+            >;
+            setOrder(order);
+            setOrderClientSecret(orderClientSecret);
+        };
+        window.addEventListener("message", listener);
+        return () => {
+            window.removeEventListener("message", listener);
+        };
+    }, [order]);
+
+    return (
+        <CrossmintCheckoutContext.Provider value={{ order, orderClientSecret }}>
+            {children}
+        </CrossmintCheckoutContext.Provider>
+    );
+}
+
+export function useCrossmintCheckout() {
+    const context = useContext(CrossmintCheckoutContext);
+    if (!context) {
+        throw new Error("useCrossmintCheckout must be used within a CrossmintCheckoutProvider");
+    }
+    return context;
+}

package/src/hooks/useRefreshToken.test.ts

@@ -1,11 +1,12 @@
 import { act, renderHook } from "@testing-library/react";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 
+import type { AuthMaterialWithUser } from "@crossmint/common-sdk-auth";
 import { type CrossmintAuthService, getJWTExpiration } from "@crossmint/client-sdk-auth";
 import { queueTask } from "@crossmint/client-sdk-base";
 
 import * as authCookies from "../utils/authCookies";
-import { type AuthMaterial, useRefreshToken } from "./useRefreshToken";
+import { useRefreshToken } from "./useRefreshToken";
 
 vi.mock("@crossmint/client-sdk-auth", () => ({
     CrossmintAuthService: vi.fn(),
@@ -17,9 +18,13 @@ vi.mock("../utils/authCookies", () => ({
     REFRESH_TOKEN_PREFIX: "crossmint-refresh-token",
 }));
 
-vi.mock("@crossmint/client-sdk-base", () => ({
-    queueTask: vi.fn(),
-}));
+vi.mock("@crossmint/client-sdk-base", async () => {
+    const actual = await vi.importActual("@crossmint/client-sdk-base");
+    return {
+        ...actual,
+        queueTask: vi.fn(),
+    };
+});
 
 describe("useRefreshToken", () => {
     const mockCrossmintAuthService = {
@@ -59,12 +64,16 @@ describe("useRefreshToken", () => {
 
     it("should refresh token if refresh token is present", async () => {
         const mockRefreshToken = "mock-refresh-token";
-        const mockAuthMaterial: AuthMaterial = {
-            jwtToken: "mock-jwt-token",
+        const mockAuthMaterial: AuthMaterialWithUser = {
+            jwt: "mock-jwt-token",
             refreshToken: {
                 secret: "mock-secret",
                 expiresAt: "2023-04-01T00:00:00Z",
             },
+            user: {
+                id: "123",
+                email: "test@test.com",
+            },
         };
 
         vi.mocked(authCookies.getCookie).mockReturnValue(mockRefreshToken);
@@ -89,12 +98,16 @@ describe("useRefreshToken", () => {
 
     it("should schedule next refresh before token expiration", async () => {
         const mockRefreshToken = "mock-refresh-token";
-        const mockAuthMaterial: AuthMaterial = {
-            jwtToken: "mock-jwt-token",
+        const mockAuthMaterial: AuthMaterialWithUser = {
+            jwt: "mock-jwt-token",
             refreshToken: {
                 secret: "mock-secret",
                 expiresAt: "2023-04-01T00:00:00Z",
             },
+            user: {
+                id: "123",
+                email: "test@test.com",
+            },
         };
 
         vi.mocked(authCookies.getCookie).mockReturnValue(mockRefreshToken);

package/src/hooks/useRefreshToken.ts

@@ -1,18 +1,19 @@
 import { useCallback, useEffect, useRef } from "react";
 
-import type { AuthMaterial } from "@crossmint/common-sdk-auth";
+import type { AuthMaterialWithUser } from "@crossmint/common-sdk-auth";
 import type { CrossmintAuthService } from "@crossmint/client-sdk-auth";
 import { getJWTExpiration } from "@crossmint/client-sdk-auth";
 import { queueTask, type CancellableTask } from "@crossmint/client-sdk-base";
+import { REFRESH_TOKEN_PREFIX } from "@crossmint/common-sdk-auth";
 
-import { REFRESH_TOKEN_PREFIX, getCookie } from "../utils/authCookies";
+import { getCookie } from "../utils/authCookies";
 
 // 2 minutes before jwt expiration
 const TIME_BEFORE_EXPIRING_JWT_IN_SECONDS = 120;
 
 type UseAuthTokenRefreshProps = {
     crossmintAuthService: CrossmintAuthService;
-    setAuthMaterial: (authMaterial: AuthMaterial) => void;
+    setAuthMaterial: (authMaterial: AuthMaterialWithUser) => void;
     logout: () => void;
 };
 
@@ -34,7 +35,7 @@ export function useRefreshToken({ crossmintAuthService, setAuthMaterial, logout
                 try {
                     const result = await crossmintAuthService.refreshAuthMaterial(refreshToken);
                     setAuthMaterial(result);
-                    const jwtExpiration = getJWTExpiration(result.jwtToken);
+                    const jwtExpiration = getJWTExpiration(result.jwt);
 
                     if (jwtExpiration == null) {
                         throw new Error("Invalid JWT");

package/src/providers/CrossmintAuthProvider.test.tsx

@@ -1,4 +1,5 @@
-import { deleteCookie, REFRESH_TOKEN_PREFIX, SESSION_PREFIX } from "@/utils/authCookies";
+import { deleteCookie } from "@/utils/authCookies";
+import { SESSION_PREFIX, REFRESH_TOKEN_PREFIX } from "@crossmint/common-sdk-auth";
 import { fireEvent, render } from "@testing-library/react";
 import { type ReactNode, act } from "react";
 import { beforeEach, describe, expect, vi } from "vitest";
@@ -39,7 +40,7 @@ vi.mock("@crossmint/client-sdk-auth", async () => {
         getJWTExpiration: vi.fn(),
         CrossmintAuthService: vi.fn().mockImplementation(() => ({
             refreshAuthMaterial: vi.fn().mockResolvedValue({
-                jwtToken: "new-mock-jwt",
+                jwt: "new-mock-jwt",
                 refreshToken: {
                     secret: "new-mock-refresh-token",
                     expiresAt: new Date(Date.now() + 1000 * 60 * 60).toISOString(),
@@ -123,7 +124,7 @@ describe("CrossmintAuthProvider", () => {
 
         mockCrossmintAuthService = {
             refreshAuthMaterial: vi.fn().mockResolvedValue({
-                jwtToken: "new-mock-jwt",
+                jwt: "new-mock-jwt",
                 refreshToken: {
                     secret: "new-mock-refresh-token",
                     expiresAt: new Date(Date.now() + 1000 * 60 * 60).toISOString(),