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

package/src/components/embed/fiat/FiatPaymentElement_OLD.tsx

@@ -1,73 +0,0 @@
-import { useEffect, useState } from "react";
-
-import type { FiatEmbeddedCheckoutProps } from "@crossmint/client-sdk-base";
-import { crossmintPaymentService_OLD, crossmintUiService_OLD } from "@crossmint/client-sdk-base";
-
-export function CrossmintFiatPaymentElement_OLD(props: FiatEmbeddedCheckoutProps) {
-    const [height, setHeight] = useState(0);
-    const { getIframeUrl, listenToEvents, emitQueryParams } = crossmintPaymentService_OLD(props);
-    const { listenToEvents: listenToUiEvents } = crossmintUiService_OLD({ environment: props.environment });
-    const [url] = useState(getIframeUrl());
-
-    useEffect(() => {
-        const clearListener = listenToEvents((event) => props.onEvent?.(event.data));
-
-        return () => {
-            if (clearListener) {
-                clearListener();
-            }
-        };
-    }, []);
-
-    useEffect(() => {
-        const clearListener = listenToUiEvents((event: MessageEvent<any>) => {
-            const { type, payload } = event.data;
-
-            switch (type) {
-                case "ui:height.changed":
-                    setHeight(payload.height);
-                    break;
-                default:
-                    return;
-            }
-        });
-
-        return () => {
-            if (clearListener) {
-                clearListener();
-            }
-        };
-    }, []);
-
-    useEffect(() => {
-        emitQueryParams({
-            recipient: props.recipient,
-            mintConfig: props.mintConfig,
-            locale: props.locale,
-            currency: props.currency,
-            whPassThroughArgs: props.whPassThroughArgs,
-        });
-    }, [props.recipient, props.mintConfig, props.locale, props.currency, props.whPassThroughArgs]);
-
-    return (
-        <iframe
-            src={url}
-            id="crossmint-embedded-checkout.iframe"
-            role="crossmint-embedded-checkout.iframe"
-            allow="payment *"
-            style={{
-                border: "none !important",
-                padding: "0px !important",
-                width: "100% !important",
-                minWidth: "100% !important",
-                overflow: "hidden !important",
-                display: "block !important",
-                userSelect: "none",
-                transform: "translate(0px) !important",
-                opacity: "1",
-                transition: "ease 0s, opacity 0.4s ease 0.1s",
-                height: `${height}px`,
-            }}
-        ></iframe>
-    );
-}

package/src/components/embed/index.tsx

@@ -1,19 +0,0 @@
-import {
-    type CrossmintEmbeddedCheckoutProps,
-    isCryptoEmbeddedCheckoutProps,
-    isFiatEmbeddedCheckoutProps,
-} from "@crossmint/client-sdk-base";
-
-import { CrossmintCryptoEmbeddedCheckout } from "./crypto/CryptoEmbeddedCheckout";
-import { CrossmintFiatEmbeddedCheckout } from "./fiat/FiatEmbeddedCheckout";
-
-// TODO: Rename to CrossmintEmbeddedCheckout on v2 major publish, prior announcement since its a breaking change
-export function CrossmintPaymentElement(props: CrossmintEmbeddedCheckoutProps) {
-    if (isFiatEmbeddedCheckoutProps(props)) {
-        return <CrossmintFiatEmbeddedCheckout {...props} />;
-    }
-    if (isCryptoEmbeddedCheckoutProps(props)) {
-        return <CrossmintCryptoEmbeddedCheckout {...props} />;
-    }
-    throw new Error("Unsupported: Fiat is the only supported payment method.");
-}

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

@@ -1,7 +0,0 @@
-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

@@ -1,83 +0,0 @@
-import { useCrossmint } from "@/hooks";
-import { lazy, useEffect, useRef, useState } from "react";
-
-import {
-    type CrossmintEmbeddedCheckoutV3Props,
-    type EmbeddedCheckoutV3IFrameEmitter,
-    crossmintEmbeddedCheckoutV3Service,
-} from "@crossmint/client-sdk-base";
-
-import { createCrossmintApiClient } from "@/utils/createCrossmintApiClient";
-
-const CryptoWalletConnectionHandler = lazy(() =>
-    // @ts-expect-error - Error because we dont use 'module' field in tsconfig, which is expected because we use tsup to compile
-    import("./crypto/CryptoWalletConnectionHandler").then((mod) => ({
-        default: mod.CryptoWalletConnectionHandler,
-    }))
-);
-
-export function EmbeddedCheckoutV3IFrame(props: CrossmintEmbeddedCheckoutV3Props) {
-    const [iframeClient, setIframeClient] = useState<EmbeddedCheckoutV3IFrameEmitter | null>(null);
-    const [height, setHeight] = useState(0);
-
-    const { crossmint } = useCrossmint();
-    const apiClient = createCrossmintApiClient(crossmint, {
-        usageOrigin: "client",
-    });
-    const embeddedCheckoutService = crossmintEmbeddedCheckoutV3Service({ apiClient });
-
-    const ref = useRef<HTMLIFrameElement>(null);
-
-    useEffect(() => {
-        const iframe = ref.current;
-        if (!iframe || iframeClient) {
-            return;
-        }
-        setIframeClient(embeddedCheckoutService.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={embeddedCheckoutService.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}
-                    apiKeyEnvironment={apiClient["parsedAPIKey"].environment}
-                />
-            ) : null}
-            <span id="crossmint-focus-target" tabIndex={-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();
-        });
-    });
-});