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

package/src/components/common/PoweredByCrossmint.tsx

@@ -1,10 +0,0 @@
-import { PoweredByLeaf } from "@/icons/poweredByLeaf";
-import { classNames } from "@/utils/classNames";
-
-export function PoweredByCrossmint({ color = "#A4AFB2", className }: { color?: string; className?: string }) {
-    return (
-        <p className={classNames("flex", className)}>
-            <PoweredByLeaf color={color} />
-        </p>
-    );
-}

package/src/components/common/Spinner.tsx

@@ -1,22 +0,0 @@
-import type React from "react";
-import { classNames } from "@/utils/classNames";
-
-export const Spinner = ({ className, style }: { className?: string; style?: React.CSSProperties }) => (
-    <svg
-        aria-hidden="true"
-        className={classNames("w-6 h-6 fill-cm-text-primary text-cm-text-secondary animate-spin", className)}
-        style={style}
-        viewBox="0 0 100 101"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-    >
-        <path
-            d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
-            fill="currentColor"
-        />
-        <path
-            d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
-            fill="currentFill"
-        />
-    </svg>
-);

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

@@ -1,31 +0,0 @@
-import type { APIKeyEnvironmentPrefix } from "@crossmint/common-sdk-base";
-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">;
-    apiKeyEnvironment: APIKeyEnvironmentPrefix;
-}
-
-export default function DynamicContextProviderWrapper({
-    children,
-    settings,
-    apiKeyEnvironment,
-}: DynamicContextProviderWrapperProps) {
-    return (
-        <DynamicContextProvider
-            settings={{
-                initialAuthenticationMode: "connect-only",
-                environmentId:
-                    apiKeyEnvironment === "production"
-                        ? "3fc6c24e-6a8e-45f8-aae1-a87d7a027e12"
-                        : "cd53135a-b32b-4704-bfca-324b665e9329",
-                cssOverrides: `.powered-by-dynamic { display: none !important; }`,
-                ...settings,
-            }}
-        >
-            {children}
-        </DynamicContextProvider>
-    );
-}

package/src/components/embed/CrossmintPaymentElement.test.tsx

@@ -1,79 +0,0 @@
-import "@testing-library/jest-dom/vitest";
-import { render, screen } from "@testing-library/react";
-import { describe, expect, it, vi } from "vitest";
-
-import { CrossmintEvents } from "@crossmint/client-sdk-base";
-
-import { CrossmintPaymentElement } from ".";
-
-const embeddedCheckoutProps = {
-    clientId: "db218e78-d042-4761-83af-3c4e5e6659dd",
-};
-
-describe("CrossmintPaymentElement", () => {
-    it("renders an iframe with the correct props", () => {
-        render(<CrossmintPaymentElement {...embeddedCheckoutProps} />);
-        const iframe = screen.getByRole("crossmint-embedded-checkout.iframe");
-
-        expect(iframe).toHaveAttribute("src");
-        expect(iframe).toHaveAttribute("id", "crossmint-embedded-checkout.iframe");
-        expect(iframe).toHaveStyle({
-            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",
-        });
-    });
-
-    it("calls the onEvent prop when a CrossmintEvents is received", () => {
-        const onEvent = vi.fn();
-        render(<CrossmintPaymentElement {...embeddedCheckoutProps} onEvent={onEvent} environment="" />);
-        screen.getByRole("crossmint-embedded-checkout.iframe");
-
-        // Simulate receiving a CrossmintEvents message
-        const eventData = { type: CrossmintEvents.QUOTE_STATUS_CHANGED, payload: {} };
-        const event = new MessageEvent("message", { data: eventData, origin: "https://www.crossmint.com" });
-        window.dispatchEvent(event);
-
-        expect(onEvent).toHaveBeenCalledWith(eventData);
-    });
-
-    it("does not call the onEvent prop when a different origin than the environment is received in the event", () => {
-        const onEvent = vi.fn();
-        render(<CrossmintPaymentElement {...embeddedCheckoutProps} onEvent={onEvent} environment="" />);
-        screen.getByRole("crossmint-embedded-checkout.iframe");
-
-        // Simulate receiving a CrossmintEvents message
-        const eventData = { type: CrossmintEvents.QUOTE_STATUS_CHANGED, payload: {} };
-        const event = new MessageEvent("message", { data: eventData, origin: "http://hacker.com" });
-        window.dispatchEvent(event);
-
-        expect(onEvent).not.toHaveBeenCalled();
-    });
-
-    it("should add the `whPassThroughArgs` prop when passed", async () => {
-        render(<CrossmintPaymentElement {...embeddedCheckoutProps} whPassThroughArgs={{ hello: "hi" }} />);
-        const iframe = screen.getByRole("crossmint-embedded-checkout.iframe");
-
-        expect(iframe.getAttribute("src")).toContain("whPassThroughArgs=%7B%22hello%22%3A%22hi%22%7D");
-    });
-
-    it("should add the clientId when passing the collectionId prop", () => {
-        render(<CrossmintPaymentElement collectionId={embeddedCheckoutProps.clientId} />);
-        const iframe = screen.getByRole("crossmint-embedded-checkout.iframe");
-
-        expect(iframe.getAttribute("src")).toContain(`clientId=${embeddedCheckoutProps.clientId}`);
-    });
-
-    it("should add projectId when added", () => {
-        render(<CrossmintPaymentElement collectionId={embeddedCheckoutProps.clientId} projectId="123" />);
-        const iframe = screen.getByRole("crossmint-embedded-checkout.iframe");
-
-        expect(iframe.getAttribute("src")).toContain("projectId=123");
-    });
-});

package/src/components/embed/EmbeddedCheckoutIFrame.tsx

@@ -1,71 +0,0 @@
-import { useEffect, useState } from "react";
-
-import {
-    type CrossmintEmbeddedCheckoutProps,
-    type IncomingInternalEvent,
-    IncomingInternalEvents,
-    crossmintIFrameService,
-} from "@crossmint/client-sdk-base";
-
-type CrossmintEmbeddedCheckoutIFrameProps = CrossmintEmbeddedCheckoutProps & {
-    onInternalEvent?: (event: IncomingInternalEvent) => void;
-};
-
-export default function CrossmintEmbeddedCheckoutIFrame({
-    onInternalEvent,
-    ...props
-}: CrossmintEmbeddedCheckoutIFrameProps) {
-    const { getUrl, listenToEvents, listenToInternalEvents } = crossmintIFrameService(props);
-
-    const [height, setHeight] = useState(0);
-    const [url] = useState(getUrl(props));
-
-    // Public events
-    useEffect(() => {
-        const clearListener = listenToEvents((event) => props.onEvent?.(event.data));
-
-        return () => {
-            clearListener();
-        };
-    }, []);
-
-    // Internal events
-    useEffect(() => {
-        const clearListener = listenToInternalEvents((event) => {
-            const { type, payload } = event.data;
-
-            if (type === IncomingInternalEvents.UI_HEIGHT_CHANGED) {
-                setHeight(payload.height);
-            }
-
-            onInternalEvent?.(event.data);
-        });
-
-        return () => {
-            clearListener();
-        };
-    }, []);
-
-    return (
-        <iframe
-            src={url}
-            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`,
-            }}
-        />
-    );
-}

package/src/components/embed/crypto/CryptoEmbeddedCheckout.tsx

@@ -1,11 +0,0 @@
-import { type CryptoEmbeddedCheckoutProps, isCryptoEmbeddedCheckoutPropsWithSigner } from "@crossmint/client-sdk-base";
-
-import CryptoEmbeddedCheckoutIFrame from "./CryptoEmbeddedCheckoutIFrame";
-
-export function CrossmintCryptoEmbeddedCheckout(props: CryptoEmbeddedCheckoutProps) {
-    if (!isCryptoEmbeddedCheckoutPropsWithSigner(props)) {
-        throw new Error("Invalid parameters: signer is required in versions < 2.0.0");
-    }
-
-    return <CryptoEmbeddedCheckoutIFrame {...props} />;
-}

package/src/components/embed/crypto/CryptoEmbeddedCheckoutIFrame.tsx

@@ -1,108 +0,0 @@
-import bs58 from "bs58";
-
-import {
-    type CryptoEmbeddedCheckoutPropsWithSigner,
-    type ETHEmbeddedCheckoutSigner,
-    type IncomingInternalEvent,
-    IncomingInternalEvents,
-    OutgoingInternalEvents,
-    type SOLEmbeddedCheckoutSigner,
-    crossmintIFrameService,
-    embeddedCheckoutPropsToUpdatableParamsPayload,
-} from "@crossmint/client-sdk-base";
-import type { EVMBlockchainIncludingTestnet } from "@crossmint/common-sdk-base";
-
-import useDeepEffect from "../../../hooks/useDeepEffect";
-import CrossmintEmbeddedCheckoutIFrame from "../EmbeddedCheckoutIFrame";
-
-export default function CryptoEmbeddedCheckoutIFrame(props: CryptoEmbeddedCheckoutPropsWithSigner) {
-    const { emitInternalEvent } = crossmintIFrameService(props);
-
-    const { signer, paymentMethod } = props;
-
-    function onInternalEvent(event: IncomingInternalEvent) {
-        const { type, payload } = event;
-
-        if (type === IncomingInternalEvents.CRYPTO_PAYMENT_INCOMING_TRANSACTION) {
-            const { serializedTransaction } = payload;
-            console.log("[Crossmint] Received incoming transaction", serializedTransaction);
-            handleIncomingTransaction(serializedTransaction);
-        }
-
-        if (type === IncomingInternalEvents.CRYPTO_CHAIN_SWITCH) {
-            const { chain } = payload;
-            console.log("[Crossmint] Received change of chain", chain);
-
-            const handleChainSwitch = (signer as ETHEmbeddedCheckoutSigner).handleChainSwitch;
-            if (handleChainSwitch == null) {
-                throw new Error("switchNetwork function should have been defined");
-            }
-            handleChainSwitch(chain as EVMBlockchainIncludingTestnet);
-        }
-    }
-
-    async function handleIncomingTransaction(serializedTransaction: string) {
-        try {
-            let txId: string;
-            switch (paymentMethod) {
-                case "SOL":
-                    txId = await handleSOLTransaction(signer, serializedTransaction);
-                    break;
-                case "ETH":
-                    txId = await handleETHTransaction(signer, serializedTransaction);
-                    break;
-                default:
-                    throw new Error(`Unsupported payment method ${paymentMethod}`);
-            }
-
-            console.log("[Crossmint] Signed and sent transaction", txId);
-            emitInternalEvent({
-                type: OutgoingInternalEvents.CRYPTO_PAYMENT_USER_ACCEPTED,
-                payload: {
-                    txId,
-                },
-            });
-        } catch (e) {
-            console.error("[Crossmint] Failed to sign and send transaction", e);
-            emitInternalEvent({
-                type: OutgoingInternalEvents.CRYPTO_PAYMENT_USER_REJECTED,
-                payload: {},
-            });
-        }
-    }
-
-    async function handleSOLTransaction(signer: SOLEmbeddedCheckoutSigner, serializedTransaction: string) {
-        // @ts-ignore - Error becasue we dont use 'module' field in tsconfig, which is expected because we use tsup to compile
-        const { Transaction } = await import("@solana/web3.js");
-        const transaction = Transaction.from(bs58.decode(serializedTransaction));
-        console.log("[Crossmint] Deserialized SOL transaction", transaction);
-
-        return await signer.signAndSendTransaction(transaction);
-    }
-
-    async function handleETHTransaction(signer: ETHEmbeddedCheckoutSigner, serializedTransaction: string) {
-        // @ts-ignore - Error becasue we dont use 'module' field in tsconfig, which is expected because we use tsup to compile
-        const { parse: parseTransaction } = await import("@ethersproject/transactions");
-        const transaction = parseTransaction(serializedTransaction);
-        console.log("[Crossmint] Deserialized ETH transaction", transaction);
-
-        return await signer.signAndSendTransaction(transaction);
-    }
-
-    useDeepEffect(() => {
-        emitInternalEvent({
-            type: "params-update",
-            payload: embeddedCheckoutPropsToUpdatableParamsPayload(props),
-        });
-    }, [
-        props.signer.address,
-        props.recipient,
-        props.mintConfig,
-        props.locale,
-        props.currency,
-        props.whPassThroughArgs,
-        ...("chain" in props.signer ? [props.signer.chain] : []),
-    ]);
-
-    return <CrossmintEmbeddedCheckoutIFrame onInternalEvent={onInternalEvent} {...props} />;
-}

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

@@ -1,7 +0,0 @@
-import type { FiatEmbeddedCheckoutProps } from "@crossmint/client-sdk-base";
-
-import FiatEmbeddedCheckoutIFrame from "../../../components/embed/fiat/FiatEmbeddedCheckoutIFrame";
-
-export function CrossmintFiatEmbeddedCheckout(props: FiatEmbeddedCheckoutProps) {
-    return <FiatEmbeddedCheckoutIFrame {...props} />;
-}

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

@@ -1,21 +0,0 @@
-import {
-    type FiatEmbeddedCheckoutProps,
-    crossmintIFrameService,
-    embeddedCheckoutPropsToUpdatableParamsPayload,
-} from "@crossmint/client-sdk-base";
-
-import useDeepEffect from "../../../hooks/useDeepEffect";
-import CrossmintEmbeddedCheckoutIFrame from "../EmbeddedCheckoutIFrame";
-
-export default function FiatEmbeddedCheckoutIFrame(props: FiatEmbeddedCheckoutProps) {
-    const { emitInternalEvent } = crossmintIFrameService(props);
-
-    useDeepEffect(() => {
-        emitInternalEvent({
-            type: "params-update",
-            payload: embeddedCheckoutPropsToUpdatableParamsPayload(props),
-        });
-    }, [props.recipient, props.mintConfig, props.locale, props.currency, props.whPassThroughArgs]);
-
-    return <CrossmintEmbeddedCheckoutIFrame {...props} />;
-}

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 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}
-                    apiKeyEnvironment={apiClient["parsedAPIKey"].environment}
-                />
-            ) : null}
-            <span id="crossmint-focus-target" tabIndex={-1} />
-        </>
-    );
-}