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

package/src/components/common/CrossmintLogoV2/schemas.ts

@@ -1,34 +0,0 @@
-import { z } from "zod";
-import { CROSSMINT_LOGO_DEFAULTS } from "./consts";
-
-const iconGradientColorSchema = z.object({
-    type: z.literal("gradient"),
-    from: z.string(),
-    to: z.string(),
-});
-
-const iconSolidColorSchema = z.object({
-    type: z.literal("solid"),
-    color: z.string(),
-});
-const iconColorSchema = z.discriminatedUnion("type", [iconGradientColorSchema, iconSolidColorSchema]);
-
-export const crossmintLogoColorsSchema = z.object({
-    icon: iconColorSchema.optional().default(CROSSMINT_LOGO_DEFAULTS.colors.icon),
-    text: z.string().optional().default(CROSSMINT_LOGO_DEFAULTS.colors.text),
-});
-
-export const crossmintLogoDisplayTypeSchema = z
-    .enum(["icon-only", "icon-and-text"])
-    .default(CROSSMINT_LOGO_DEFAULTS.displayType);
-
-export const crossmintLogoColorsAndDisplayTypeRawSchema = z.object({
-    colors: crossmintLogoColorsSchema.optional().default(CROSSMINT_LOGO_DEFAULTS.colors),
-    displayType: crossmintLogoDisplayTypeSchema.optional().default(CROSSMINT_LOGO_DEFAULTS.displayType),
-});
-
-export const crossmintLogoColorsAndDisplayTypeSchema = crossmintLogoColorsAndDisplayTypeRawSchema
-    .optional()
-    .default(CROSSMINT_LOGO_DEFAULTS);
-
-export type CrossmintLogoColorsAndDisplayType = z.infer<typeof crossmintLogoColorsAndDisplayTypeSchema>;

package/src/components/common/Dialog.tsx

@@ -1,122 +0,0 @@
-"use client";
-
-import * as React from "react";
-import * as DialogPrimitive from "@radix-ui/react-dialog";
-import { classNames } from "@/utils/classNames";
-
-const Dialog = DialogPrimitive.Root;
-const DialogTrigger = DialogPrimitive.Trigger;
-const DialogClose = DialogPrimitive.Close;
-const DialogPortal = DialogPrimitive.Portal;
-
-interface DialogContentProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {
-    showCloseButton?: boolean;
-    closeButtonColor?: string;
-    closeButtonRingColor?: string;
-}
-
-const DialogContent = React.forwardRef<React.ElementRef<typeof DialogPrimitive.Content>, DialogContentProps>(
-    ({ className, children, showCloseButton = true, closeButtonColor, closeButtonRingColor, ...props }, ref) => (
-        <DialogPortal>
-            {/* Because we're using modal={false}, the regular overlay is not shown. We need to add our own overlay */}
-            <div className="fixed inset-0 z-40 bg-black/60 backdrop-blur-sm overflow-x-hidden" />
-            <DialogPrimitive.Content
-                ref={ref}
-                className={classNames(
-                    "fixed z-50 p-6 pb-4 bg-cm-background-primary border border-cm-border shadow-xl transition-none",
-                    // Small viewport styles (bottom sheet)
-                    "inset-x-0 bottom-0 w-full border-t rounded-t-xl",
-                    "data-[state=closed]:animate-slide-out-to-bottom data-[state=open]:animate-slide-in-from-bottom",
-                    // Regular viewport styles (centered modal)
-                    "min-[480px]:inset-auto !min-[480px]:p-10 !min-[480px]:pb-8 min-[480px]:left-[50%] min-[480px]:top-[50%] min-[480px]:translate-x-[-50%] min-[480px]:translate-y-[-52%]",
-                    "min-[480px]:max-w-[448px] min-[480px]:rounded-xl",
-                    "min-[480px]:data-[state=closed]:animate-fade-out min-[480px]:data-[state=closed]:animate-zoom-out-95",
-                    "min-[480px]:data-[state=open]:animate-fade-in min-[480px]:data-[state=open]:animate-zoom-in-95",
-                    // Duration for animations
-                    "data-[state=closed]:duration-300 data-[state=open]:duration-500",
-                    className
-                )}
-                {...props}
-            >
-                {children}
-                {showCloseButton && (
-                    <DialogPrimitive.Close
-                        className={classNames(
-                            "absolute rounded-full opacity-70 ring-offset-background transition-opacity hover:opacity-100",
-                            "focus:outline-none focus:ring-2 focus:ring-cm-accent focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-text-primary",
-                            "right-4 top-4 !min-[480px]:right-6 !min-[480px]:top-6"
-                        )}
-                        style={{ color: closeButtonColor ?? "#00150D" }}
-                    >
-                        <svg
-                            xmlns="http://www.w3.org/2000/svg"
-                            width="24"
-                            height="24"
-                            viewBox="0 0 24 24"
-                            fill="none"
-                            stroke="currentColor"
-                            strokeWidth="2"
-                            strokeLinecap="round"
-                            strokeLinejoin="round"
-                            className="h-6 w-6"
-                        >
-                            <path d="M18 6 6 18" />
-                            <path d="m6 6 12 12" />
-                        </svg>
-                        <span className="sr-only">Close</span>
-                    </DialogPrimitive.Close>
-                )}
-            </DialogPrimitive.Content>
-        </DialogPortal>
-    )
-);
-DialogContent.displayName = DialogPrimitive.Content.displayName;
-
-const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-    <div className={classNames("flex flex-col space-y-1.5 text-center sm:text-left", className)} {...props} />
-);
-DialogHeader.displayName = "DialogHeader";
-
-const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-    <div
-        className={classNames("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
-        {...props}
-    />
-);
-DialogFooter.displayName = "DialogFooter";
-
-const DialogTitle = React.forwardRef<
-    React.ElementRef<typeof DialogPrimitive.Title>,
-    React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
->(({ className, ...props }, ref) => (
-    <DialogPrimitive.Title
-        ref={ref}
-        className={classNames("text-lg font-semibold leading-none tracking-tight", className)}
-        {...props}
-    />
-));
-DialogTitle.displayName = DialogPrimitive.Title.displayName;
-
-const DialogDescription = React.forwardRef<
-    React.ElementRef<typeof DialogPrimitive.Description>,
-    React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
->(({ className, ...props }, ref) => (
-    <DialogPrimitive.Description
-        ref={ref}
-        className={classNames("text-sm text-muted-foreground", className)}
-        {...props}
-    />
-));
-DialogDescription.displayName = DialogPrimitive.Description.displayName;
-
-export {
-    Dialog,
-    DialogPortal,
-    DialogClose,
-    DialogTrigger,
-    DialogContent,
-    DialogHeader,
-    DialogFooter,
-    DialogTitle,
-    DialogDescription,
-};

package/src/components/common/Divider.tsx

@@ -1,25 +0,0 @@
-import { useAuthForm } from "@/providers/auth/AuthFormProvider";
-import type { UIConfig } from "@crossmint/common-sdk-base";
-
-export function Divider({ appearance, text }: { appearance?: UIConfig; text?: string }) {
-    const { step } = useAuthForm();
-
-    if (step !== "initial") {
-        return null;
-    }
-
-    return (
-        <div className="flex items-center justify-center w-full pt-2 pb-3">
-            <span className="w-full h-[1px] bg-cm-border" style={{ backgroundColor: appearance?.colors?.border }} />
-            {text != null ? (
-                <p
-                    className="flex-none px-2 text-sm text-cm-text-primary"
-                    style={{ color: appearance?.colors?.textSecondary }}
-                >
-                    {text}
-                </p>
-            ) : null}
-            <span className="w-full h-[1px] bg-cm-border" style={{ backgroundColor: appearance?.colors?.border }} />
-        </div>
-    );
-}

package/src/components/common/InputOTP.tsx

@@ -1,94 +0,0 @@
-"use client";
-
-import * as React from "react";
-import { OTPInput, OTPInputContext } from "input-otp";
-import { createContext, useContext } from "react";
-import { classNames } from "@/utils/classNames";
-
-// Define the type for customStyles
-type CustomStyles = {
-    textPrimary: string;
-    inputBackground: string;
-    buttonBackground: string;
-    accent: string;
-    danger: string;
-    border: string;
-    borderRadius?: string;
-};
-
-// Create a context for customStyles
-const CustomStylesContext = createContext<CustomStyles | undefined>(undefined);
-
-type InputOTPProps = React.ComponentPropsWithoutRef<typeof OTPInput> & {
-    customStyles?: CustomStyles;
-};
-type InputOTPRef = React.ElementRef<typeof OTPInput>;
-
-const InputOTP: React.ForwardRefExoticComponent<InputOTPProps & React.RefAttributes<InputOTPRef>> = React.forwardRef<
-    InputOTPRef,
-    InputOTPProps
->(({ className, containerClassName, customStyles, ...props }, ref) => (
-    <CustomStylesContext.Provider value={customStyles}>
-        <OTPInput
-            autoFocus
-            ref={ref}
-            containerClassName={classNames("flex items-center gap-2 has-[:disabled]:opacity-50", containerClassName)}
-            className={classNames("disabled:cursor-not-allowed", className)}
-            {...props}
-        />
-    </CustomStylesContext.Provider>
-));
-InputOTP.displayName = "InputOTP";
-
-const InputOTPGroup = React.forwardRef<React.ElementRef<"div">, React.ComponentPropsWithoutRef<"div">>(
-    ({ className, ...props }, ref) => (
-        <div ref={ref} className={classNames("flex gap-2 items-center", className)} {...props} />
-    )
-);
-InputOTPGroup.displayName = "InputOTPGroup";
-
-const InputOTPSlot = React.forwardRef<
-    React.ElementRef<"div">,
-    React.ComponentPropsWithoutRef<"div"> & {
-        index: number;
-        hasError?: boolean;
-    }
->(({ index, className, hasError, ...props }, ref) => {
-    const inputOTPContext = React.useContext(OTPInputContext);
-    const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index];
-    const customStyles = useContext(CustomStylesContext);
-
-    return (
-        <div
-            ref={ref}
-            className={classNames(
-                "relative flex h-14 w-12 items-center bg-cm-muted-primary justify-center border border-cm-border text-lg transition-all rounded-md text-cm-text-primary",
-                isActive && `z-10 ring-2 ring-offset-background`,
-                className
-            )}
-            style={{
-                borderRadius: customStyles?.borderRadius,
-                borderColor: hasError ? customStyles?.danger : customStyles?.border,
-                boxShadow: isActive ? `0 0 0 2px ${customStyles?.accent}` : "none",
-                backgroundColor: char ? customStyles?.buttonBackground : customStyles?.inputBackground,
-            }}
-            {...props}
-        >
-            {char}
-            {hasFakeCaret && (
-                <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
-                    <div
-                        className="h-4 w-px animate-caret-blink duration-1000"
-                        style={{
-                            height: "18px",
-                            backgroundColor: customStyles?.textPrimary,
-                        }}
-                    />
-                </div>
-            )}
-        </div>
-    );
-});
-InputOTPSlot.displayName = "InputOTPSlot";
-
-export { InputOTP, InputOTPGroup, InputOTPSlot };

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} />;
-}