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

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(),

package/src/providers/CrossmintAuthProvider.tsx

@@ -1,15 +1,20 @@
-import { REFRESH_TOKEN_PREFIX, SESSION_PREFIX, deleteCookie, getCookie, setCookie } from "@/utils/authCookies";
 import { type ReactNode, createContext, useEffect, useState } from "react";
 import { createPortal } from "react-dom";
 
 import { CrossmintAuthService } from "@crossmint/client-sdk-auth";
 import type { EVMSmartWalletChain } from "@crossmint/client-sdk-smart-wallet";
 import { type UIConfig, validateApiKeyAndGetCrossmintBaseUrl } from "@crossmint/common-sdk-base";
+import {
+    SESSION_PREFIX,
+    REFRESH_TOKEN_PREFIX,
+    type AuthMaterialWithUser,
+    type SDKExternalUser,
+} from "@crossmint/common-sdk-auth";
 
 import AuthModal from "../components/auth/AuthModal";
 import { useCrossmint, useRefreshToken, useWallet } from "../hooks";
 import { CrossmintWalletProvider } from "./CrossmintWalletProvider";
-import type { AuthMaterial, SDKExternalUser } from "@crossmint/common-sdk-auth";
+import { deleteCookie, getCookie, setCookie } from "@/utils/authCookies";
 
 export type CrossmintAuthWalletConfig = {
     defaultChain: EVMSmartWalletChain;
@@ -66,10 +71,10 @@ export function CrossmintAuthProvider({
     const crossmintBaseUrl = validateApiKeyAndGetCrossmintBaseUrl(crossmint.apiKey);
     const [modalOpen, setModalOpen] = useState(false);
 
-    const setAuthMaterial = (authMaterial: AuthMaterial) => {
-        setCookie(SESSION_PREFIX, authMaterial.jwtToken);
+    const setAuthMaterial = (authMaterial: AuthMaterialWithUser) => {
+        setCookie(SESSION_PREFIX, authMaterial.jwt);
         setCookie(REFRESH_TOKEN_PREFIX, authMaterial.refreshToken.secret, authMaterial.refreshToken.expiresAt);
-        setJwt(authMaterial.jwtToken);
+        setJwt(authMaterial.jwt);
         setRefreshToken(authMaterial.refreshToken.secret);
         setUser(authMaterial.user);
     };
@@ -118,7 +123,7 @@ export function CrossmintAuthProvider({
         return "logged-out";
     };
 
-    const fetchAuthMaterial = async (refreshToken: string): Promise<AuthMaterial> => {
+    const fetchAuthMaterial = async (refreshToken: string): Promise<AuthMaterialWithUser> => {
         const authMaterial = await crossmintAuthService.refreshAuthMaterial(refreshToken);
         setAuthMaterial(authMaterial);
         return authMaterial;

package/src/utils/authCookies.ts

@@ -1,6 +1,3 @@
-export const SESSION_PREFIX = "crossmint-jwt";
-export const REFRESH_TOKEN_PREFIX = "crossmint-refresh-token";
-
 export function getCookie(name: string): string | undefined {
     const crossmintRefreshToken = document.cookie.split("; ").find((row) => row.startsWith(name));
     return crossmintRefreshToken ? crossmintRefreshToken.split("=")[1] : undefined;

package/src/utils/createCrossmintApiClient.ts

@@ -0,0 +1,17 @@
+import { LIB_VERSION } from "@/consts/version";
+import { type Crossmint, CrossmintApiClient, type CrossmintApiClientInternalConfig } from "@crossmint/common-sdk-base";
+
+export function createCrossmintApiClient(
+    crossmint: Crossmint,
+    apiKeyExpectations?: CrossmintApiClientInternalConfig["apiKeyExpectations"]
+) {
+    return new CrossmintApiClient(crossmint, {
+        internalConfig: {
+            sdkMetadata: {
+                name: "@crossmint/client-sdk-react-ui",
+                version: LIB_VERSION,
+            },
+            apiKeyExpectations,
+        },
+    });
+}