@crossmint/client-sdk-react-ui 1.10.7 → 1.11.1

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

@@ -1,144 +0,0 @@
-import DynamicContextProviderWrapper from "@/components/dynamic-xyz/DynamicContextProviderWrapper";
-import type { EmbeddedCheckoutV3IFrameEmitter } from "@crossmint/client-sdk-base";
-import type { APIKeyEnvironmentPrefix, BlockchainIncludingTestnet } from "@crossmint/common-sdk-base";
-import { EthereumWalletConnectors } from "@dynamic-labs/ethereum";
-import { DynamicContext, useDynamicContext } from "@dynamic-labs/sdk-react-core";
-import { SolanaWalletConnectors } from "@dynamic-labs/solana";
-import { type Dispatch, type SetStateAction, useContext, useEffect, useState } from "react";
-import { handleSendTransaction } from "./utils/handleSendTransaction";
-import { dynamicChainToCrossmintChain } from "@/utils/dynamic/dynamicChainToCrossmintChain";
-
-export function CryptoWalletConnectionHandler(props: {
-    iframeClient: EmbeddedCheckoutV3IFrameEmitter | null;
-    apiKeyEnvironment: APIKeyEnvironmentPrefix;
-}) {
-    const { iframeClient, apiKeyEnvironment } = props;
-
-    return (
-        <DynamicContextProviderWrapper
-            apiKeyEnvironment={apiKeyEnvironment}
-            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 [showDynamicModal, setShowDynamicModal] = useState(false);
-    const { primaryWallet } = useDynamicContext();
-
-    useEffect(() => {
-        if (iframeClient == null) {
-            return;
-        }
-        const showAuthFlowListener = iframeClient.on("crypto:connect-wallet.show", ({ show }) => {
-            setShowDynamicModal(show);
-        });
-
-        return () => {
-            iframeClient.off(showAuthFlowListener);
-        };
-    }, [iframeClient]);
-
-    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 showDynamicModal ? <ShowDynamicModal setShowDynamicModal={setShowDynamicModal} /> : null;
-}
-
-export function ShowDynamicModal({ setShowDynamicModal }: { setShowDynamicModal: Dispatch<SetStateAction<boolean>> }) {
-    const context = useContext(DynamicContext);
-    if (context == null) {
-        throw new Error("DynamicContext is missing");
-    }
-    const { setShowAuthFlow, handleLogOut } = context;
-
-    useEffect(() => {
-        // Move focus from the iframe to the main page, otherwise the modal will require a double click to interact with it
-        document.getElementById("crossmint-focus-target")?.focus();
-
-        (async () => {
-            await handleLogOut();
-            setShowAuthFlow(true, {
-                clearErrors: true,
-                emitCancelAuth: true,
-                ignoreIfIsEmbeddedWidget: true,
-                initializeWalletConnect: true,
-                performMultiWalletChecks: false, // Important to be false in order to not require double clicking connect button
-            });
-            setShowDynamicModal(false);
-        })();
-    }, []);
-
-    return null;
-}

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

@@ -1,78 +0,0 @@
-import type { EmbeddedCheckoutV3IFrameEmitter } from "@crossmint/client-sdk-base";
-import {
-    type BlockchainIncludingTestnet,
-    blockchainToChainId,
-    type EVMBlockchainIncludingTestnet,
-} from "@crossmint/common-sdk-base";
-import type { Wallet } from "@dynamic-labs/sdk-react-core";
-import {
-    type Chain,
-    type Account,
-    type WalletClient,
-    type TransactionSerializableEIP1559,
-    type Transport,
-    parseTransaction,
-} from "viem";
-
-export async function handleEvmTransaction({
-    primaryWallet,
-    chain,
-    serializedTransaction,
-    iframeClient,
-}: {
-    primaryWallet: Wallet;
-    chain: BlockchainIncludingTestnet;
-    serializedTransaction: string;
-    iframeClient: EmbeddedCheckoutV3IFrameEmitter;
-}) {
-    const { connector } = primaryWallet;
-    const chainId = blockchainToChainId(chain as EVMBlockchainIncludingTestnet);
-
-    try {
-        await connector.switchNetwork({ networkChainId: chainId });
-    } catch (error) {
-        console.error(`[CryptoWalletConnectionHandler] failed to switch network to ${chainId}`, error);
-        iframeClient.send("crypto:send-transaction:failed", {
-            error: (error as Error).message,
-        });
-        return;
-    }
-
-    let walletClient: WalletClient<Transport, Chain, Account> | undefined;
-    try {
-        walletClient = connector.getWalletClient<WalletClient<Transport, Chain, Account> | undefined>(String(chainId));
-        if (!walletClient) {
-            throw new Error(`connector.getWalletClient(${chainId}) returned undefined`);
-        }
-    } 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

@@ -1,29 +0,0 @@
-import type { Wallet } from "@dynamic-labs/sdk-react-core";
-import type { BlockchainIncludingTestnet } from "@crossmint/common-sdk-base";
-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,
-    };
-
-    switch (primaryWallet.chain) {
-        case "EVM":
-            // @ts-expect-error - Error because we dont use 'module' field in tsconfig, which is expected because we use tsup to compile
-            const { handleEvmTransaction } = await import("./handleEvmTransaction");
-            return await handleEvmTransaction({ ...commonParams, primaryWallet });
-        case "SOL":
-            // @ts-expect-error - Error because we dont use 'module' field in tsconfig, which is expected because we use tsup to compile
-            const { handleSolanaTransaction } = await import("./handleSolanaTransaction");
-            return await handleSolanaTransaction({ ...commonParams, primaryWallet });
-        default:
-            throw new Error(`Connected wallet is on an unsupported chain: ${primaryWallet.chain}`);
-    }
-}

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

@@ -1,54 +0,0 @@
-import type { EmbeddedCheckoutV3IFrameEmitter } from "@crossmint/client-sdk-base";
-import type { Wallet } from "@dynamic-labs/sdk-react-core";
-import type { ISolana } from "@dynamic-labs/solana";
-import { Transaction } from "@solana/web3.js";
-import base58 from "bs58";
-
-export async function handleSolanaTransaction({
-    primaryWallet,
-    serializedTransaction,
-    iframeClient,
-}: {
-    primaryWallet: Wallet;
-    serializedTransaction: string;
-    iframeClient: EmbeddedCheckoutV3IFrameEmitter;
-}) {
-    // TODO: Handle switch network
-
-    const { connector } = primaryWallet;
-
-    let signer: ISolana;
-    try {
-        signer = await connector.getSigner<ISolana>();
-    } 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

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

package/src/components/hosted/CrossmintPayButton.test.tsx

@@ -1,188 +0,0 @@
-import "@testing-library/jest-dom/vitest";
-import { act, fireEvent, render, screen } from "@testing-library/react";
-import { afterEach, describe, expect, it, vi } from "vitest";
-
-import { CrossmintPayButton } from ".";
-import { LIB_VERSION } from "../../consts/version";
-
-// TODO(#60): create a global service for this to work everywhere and to be able to customize resolved/rejected responses
-const fetchReturns = Promise.resolve({
-    json: () => Promise.resolve({}),
-}) as any;
-global.fetch = vi.fn(() => fetchReturns);
-
-// TODO(#61): make this automatically mocked in every test suite
-const openReturns = {} as Window;
-global.open = vi.fn(() => openReturns);
-global.console = {
-    log: vi.fn(),
-    error: vi.fn(),
-    warn: vi.fn(),
-} as any;
-
-const defaultProps = {
-    clientId: "a4e1bfcc-9884-11ec-b909-0242ac120002",
-};
-
-describe("CrossmintPayButton", () => {
-    afterEach(() => {
-        vi.clearAllMocks();
-    });
-
-    it("should open window with correct url", async () => {
-        render(<CrossmintPayButton {...defaultProps} />);
-
-        await act(async () => {
-            fireEvent.click(screen.getByText("Buy with credit card"));
-        });
-
-        const urlOrigin = "https://www.crossmint.com";
-
-        const mintQueryParams = new URLSearchParams({
-            clientId: defaultProps.clientId,
-            clientName: "client-sdk-react-ui",
-            clientVersion: LIB_VERSION,
-            locale: "en-US",
-            currency: "usd",
-        }).toString();
-
-        const callbackUrl = encodeURIComponent(`${urlOrigin}/checkout/mint?${mintQueryParams}`);
-
-        const signinURLParams = new URLSearchParams({
-            locale: "en-US",
-            currency: "usd",
-            email: "",
-        }).toString();
-
-        const expectedURL = `${urlOrigin}/signin?${signinURLParams}&callbackUrl=${callbackUrl}`;
-        expect(global.open).toHaveBeenCalledWith(
-            expectedURL,
-            "popUpWindow",
-            "height=750,width=400,left=312,top=9,resizable=yes,scrollbars=yes,toolbar=yes,menubar=true,location=no,directories=no,status=yes"
-        );
-    });
-
-    it("should add the `whPassThroughArgs` prop on the window url", async () => {
-        const whPassThroughArgs = { hello: "hi" };
-        render(<CrossmintPayButton {...defaultProps} whPassThroughArgs={whPassThroughArgs} />);
-
-        await act(async () => {
-            fireEvent.click(screen.getByText("Buy with credit card"));
-        });
-        expect(global.open).toHaveBeenCalledWith(
-            expect.stringContaining("whPassThroughArgs%3D%257B%2522hello%2522%253A%2522hi%2522%257D"),
-            expect.anything(),
-            expect.anything()
-        );
-    });
-
-    describe("when passing the prepay prop", () => {
-        it("should pass the prepay query param", async () => {
-            render(<CrossmintPayButton {...defaultProps} prepay />);
-
-            await act(async () => {
-                fireEvent.click(screen.getByText("Buy with credit card"));
-            });
-            expect(global.open).toHaveBeenCalledWith(
-                expect.stringContaining("prepay%3Dtrue"),
-                expect.anything(),
-                expect.anything()
-            );
-        });
-    });
-
-    describe("when passing the prepay prop as false", () => {
-        it("should not pass the prepay query param", async () => {
-            render(<CrossmintPayButton {...defaultProps} prepay={false} />);
-
-            await act(async () => {
-                fireEvent.click(screen.getByText("Buy with credit card"));
-            });
-            expect(global.open).toHaveBeenCalledWith(
-                expect.not.stringContaining("prepay"),
-                expect.anything(),
-                expect.anything()
-            );
-        });
-    });
-
-    describe("when passing the loginEmail prop", () => {
-        it("should pass an email in the email query param", async () => {
-            render(<CrossmintPayButton {...defaultProps} loginEmail="user@gmail.com" />);
-
-            await act(async () => {
-                fireEvent.click(screen.getByText("Buy with credit card"));
-            });
-            expect(global.open).toHaveBeenCalledWith(
-                expect.stringContaining("email=user%40gmail.com"),
-                expect.anything(),
-                expect.anything()
-            );
-        });
-
-        it("should pass the email query param empty if loginEmail is empty", async () => {
-            render(<CrossmintPayButton {...defaultProps} loginEmail="" />);
-
-            await act(async () => {
-                fireEvent.click(screen.getByText("Buy with credit card"));
-            });
-            expect(global.open).toHaveBeenCalledWith(
-                expect.stringContaining("email=&"),
-                expect.anything(),
-                expect.anything()
-            );
-        });
-
-        it("should pass the email query param empty if loginEmail is not present as a param", async () => {
-            render(<CrossmintPayButton {...defaultProps} />);
-
-            await act(async () => {
-                fireEvent.click(screen.getByText("Buy with credit card"));
-            });
-            expect(global.open).toHaveBeenCalledWith(
-                expect.stringContaining("email=&"),
-                expect.anything(),
-                expect.anything()
-            );
-        });
-    });
-
-    describe("when passing collectionId instead of clientId", () => {
-        it("should open window with correct url", async () => {
-            render(<CrossmintPayButton collectionId={defaultProps.clientId} />);
-
-            await act(async () => {
-                fireEvent.click(screen.getByText("Buy with credit card"));
-            });
-
-            expect(global.open).toHaveBeenCalledWith(
-                expect.stringContaining(`clientId%3D${defaultProps.clientId}`),
-                expect.anything(),
-                expect.anything()
-            );
-        });
-    });
-
-    describe("when passing projectId", () => {
-        it("should open window with projectId included in query params", async () => {
-            render(<CrossmintPayButton {...defaultProps} projectId="123" />);
-
-            await act(async () => {
-                fireEvent.click(screen.getByText("Buy with credit card"));
-            });
-
-            expect(global.open).toHaveBeenCalledWith(
-                expect.stringContaining(`projectId%3D123`),
-                expect.anything(),
-                expect.anything()
-            );
-        });
-    });
-
-    describe("when passing getButtonText prop", () => {
-        it("should show custom text", async () => {
-            render(<CrossmintPayButton {...defaultProps} getButtonText={() => "Custom text"} />);
-            expect(screen.getByText("Custom text")).toBeInTheDocument();
-        });
-    });
-});

package/src/components/hosted/CrossmintPayButton.tsx

@@ -1,132 +0,0 @@
-import { type CSSProperties, type MouseEvent, useMemo } from "react";
-import { useState } from "react";
-
-import {
-    type CheckoutProps,
-    type CrossmintPayButtonProps,
-    clientNames,
-    crossmintModalService,
-    crossmintPayButtonService,
-} from "@crossmint/client-sdk-base";
-
-import { LIB_VERSION } from "../../consts/version";
-import useEnvironment from "../../hooks/useEnvironment";
-import { formatProps, useStyles } from "./styles";
-
-export type CrossmintPayButtonReactProps = CrossmintPayButtonProps & {
-    onClick?: (e: MouseEvent<HTMLButtonElement>) => void;
-    style?: CSSProperties;
-};
-
-export function CrossmintPayButton(buttonProps: CrossmintPayButtonReactProps) {
-    const {
-        className,
-        disabled,
-        onClick,
-        style,
-        tabIndex,
-        theme = "dark",
-        mintTo,
-        emailTo,
-        listingId,
-        auctionId,
-        showOverlay = true,
-        mintConfig,
-        whPassThroughArgs,
-        environment,
-        paymentMethod,
-        preferredSigninMethod,
-        dismissOverlayOnClick,
-        prepay,
-        locale = "en-US",
-        currency = "usd",
-        successCallbackURL = "",
-        failureCallbackURL = "",
-        loginEmail = "",
-        projectId,
-        getButtonText,
-        checkoutProps = {
-            experimental: false,
-            display: "same-tab",
-            paymentMethods: ["fiat", "ETH", "SOL"],
-        } as CheckoutProps,
-        ...props
-    } = buttonProps;
-
-    const collectionId = "clientId" in props ? props.clientId : props.collectionId;
-
-    const [connecting, setConnecting] = useState(false);
-    const { isServerSideRendering } = useEnvironment();
-
-    const { connect } = crossmintModalService({
-        clientId: collectionId,
-        projectId,
-        showOverlay,
-        dismissOverlayOnClick,
-        setConnecting,
-        libVersion: LIB_VERSION,
-        environment,
-        clientName: clientNames.reactUi,
-        locale,
-        currency,
-        successCallbackURL,
-        failureCallbackURL,
-        loginEmail,
-    });
-
-    const { getButtonText: getButtonTextInternal, handleClick } = crossmintPayButtonService({
-        onClick,
-        connecting,
-        paymentMethod,
-        locale,
-        checkoutProps,
-    });
-
-    const _handleClick = (event: MouseEvent<HTMLButtonElement>) =>
-        handleClick(event, () => {
-            connect(
-                mintConfig,
-                mintTo,
-                emailTo,
-                listingId,
-                whPassThroughArgs,
-                paymentMethod,
-                preferredSigninMethod,
-                prepay,
-                checkoutProps
-            );
-        });
-
-    const classes = useStyles(formatProps(theme));
-
-    const content = useMemo(() => {
-        return (
-            <span className={classes.crossmintParagraph} role="button-paragraph">
-                {getButtonText != null
-                    ? getButtonText(connecting, paymentMethod || "fiat")
-                    : getButtonTextInternal(connecting)}
-            </span>
-        );
-    }, [connecting, getButtonText, paymentMethod]);
-
-    return (
-        <>
-            {!isServerSideRendering && (
-                <button
-                    className={`${classes.crossmintButton} ${className || ""}`}
-                    disabled={disabled}
-                    onClick={_handleClick}
-                    style={{ ...style }}
-                    tabIndex={tabIndex}
-                >
-                    <img
-                        className={classes.crossmintImg}
-                        src="https://www.crossmint.io/assets/crossmint/logo.svg"
-                        alt="Crossmint logo"
-                    />
-                    {content}
-                </button>
-            )}
-        </>
-    );
-}

package/src/components/hosted/index.ts

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

package/src/components/hosted/styles.ts

@@ -1,58 +0,0 @@
-import { type Styles, createUseStyles } from "react-jss";
-
-const DARK_BG = "#1e1e1e";
-
-const themeIsLight = (theme: string) => theme === "light";
-
-export const formatProps = (theme: string): CustomStylingProps => ({
-    buttonBgColor: themeIsLight(theme) ? "white" : DARK_BG,
-    paragraphColor: themeIsLight(theme) ? "black" : "white",
-});
-
-export type Classes<Name extends string | number | symbol = string> = Record<Name, string>;
-interface CustomStylingProps {
-    buttonBgColor?: string;
-    paragraphColor?: string;
-}
-
-const styles: Styles<"crossmintButton" | "crossmintImg" | "crossmintParagraph" | "@global", CustomStylingProps> = {
-    "@global": {
-        "@import":
-            "url('https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap')",
-    },
-    crossmintButton: {
-        display: "flex",
-        "flex-direction": "row",
-        "align-items": "center",
-        padding: "0.875rem 0.875rem",
-        "font-weight": "900",
-        transition: "opacity ease-in-out 0.25s",
-        "border-radius": "0.5rem",
-        "font-family": `"Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif`,
-        outline: "none",
-        border: "none",
-        "box-shadow": "0px 8px 15px rgba(0, 0, 0, 0.1)",
-        "justify-content": "center",
-        background: ({ buttonBgColor }: CustomStylingProps) => buttonBgColor,
-
-        "&:hover:enabled": {
-            opacity: "0.6",
-            cursor: "pointer",
-        },
-    },
-    crossmintImg: {
-        width: "21px",
-        height: "21px",
-        "margin-right": "0.875rem",
-    },
-    crossmintParagraph: {
-        color: ({ paragraphColor }: CustomStylingProps) => paragraphColor,
-        margin: "0",
-    },
-};
-
-export const useStyles: (
-    data?: CustomStylingProps & {
-        theme?: any;
-    }
-) => Classes<"crossmintButton" | "crossmintImg" | "crossmintParagraph" | "@global"> = createUseStyles(styles);