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

package/dist/providers/auth/web3/DynamicWeb3WalletConnect.js

@@ -1,9 +1,9 @@
 import {
   DynamicWeb3WalletConnect
-} from "../../../chunk-BFTVVPCU.js";
+} from "../../../chunk-KPTRUNFA.js";
 import "../../../chunk-6CPZDD6Y.js";
 import "../../../chunk-RZT2J42J.js";
-import "../../../chunk-O53ZB544.js";
+import "../../../chunk-LBGALVRW.js";
 import "../../../chunk-A7J4DAE7.js";
 import "../../../chunk-XEZF7G64.js";
 import "../../../chunk-NMXFWIFA.js";
@@ -21,11 +21,11 @@ import "../../../chunk-I63FQCIV.js";
 import "../../../chunk-ZIHCLVCD.js";
 import "../../../chunk-H4F7UVPT.js";
 import "../../../chunk-YWVQCHQF.js";
-import "../../../chunk-U7LXB3SM.js";
-import "../../../chunk-HOTEC5UH.js";
+import "../../../chunk-MARIDIHZ.js";
+import "../../../chunk-NLGUTNQM.js";
 import "../../../chunk-3J6CUUWT.js";
 import "../../../chunk-AUEQQ4D3.js";
-import "../../../chunk-FGHABNQM.js";
+import "../../../chunk-JD2M6AS5.js";
 import "../../../chunk-CRTRMMJ7.js";
 export {
   DynamicWeb3WalletConnect

package/dist/providers/index.cjs

@@ -3,7 +3,7 @@
 
 
 
-var _chunkMCINXS2Ycjs = require('../chunk-MCINXS2Y.cjs');
+var _chunk4S3T65XYcjs = require('../chunk-4S3T65XY.cjs');
 require('../chunk-QQXBYOKA.cjs');
 require('../chunk-MJHLKJ6X.cjs');
 require('../chunk-QT7UEJZG.cjs');
@@ -21,16 +21,16 @@ require('../chunk-URKPLEPV.cjs');
 require('../chunk-HPOZ6I54.cjs');
 require('../chunk-YE55IKBP.cjs');
 require('../chunk-ENCR5SUW.cjs');
-require('../chunk-ZJC4OB5Z.cjs');
-require('../chunk-GMKTZIU2.cjs');
+require('../chunk-QFVOIF7B.cjs');
+require('../chunk-QP2A7HRU.cjs');
 require('../chunk-KEKBOJCF.cjs');
 require('../chunk-A2JCJ2OV.cjs');
-require('../chunk-Y3SUMTUI.cjs');
+require('../chunk-W3P2I3UE.cjs');
 require('../chunk-4DAZAO6Y.cjs');
 
 
 
 
 
-exports.AuthContext = _chunkMCINXS2Ycjs.AuthContext; exports.CrossmintAuthProvider = _chunkMCINXS2Ycjs.CrossmintAuthProvider; exports.CrossmintWalletProvider = _chunkMCINXS2Ycjs.CrossmintWalletProvider; exports.WalletContext = _chunkMCINXS2Ycjs.WalletContext;
+exports.AuthContext = _chunk4S3T65XYcjs.AuthContext; exports.CrossmintAuthProvider = _chunk4S3T65XYcjs.CrossmintAuthProvider; exports.CrossmintWalletProvider = _chunk4S3T65XYcjs.CrossmintWalletProvider; exports.WalletContext = _chunk4S3T65XYcjs.WalletContext;
 //# sourceMappingURL=index.cjs.map

package/dist/providers/index.js

@@ -3,7 +3,7 @@ import {
   CrossmintAuthProvider,
   CrossmintWalletProvider,
   WalletContext
-} from "../chunk-O53ZB544.js";
+} from "../chunk-LBGALVRW.js";
 import "../chunk-A7J4DAE7.js";
 import "../chunk-XEZF7G64.js";
 import "../chunk-NMXFWIFA.js";
@@ -21,11 +21,11 @@ import "../chunk-I63FQCIV.js";
 import "../chunk-ZIHCLVCD.js";
 import "../chunk-H4F7UVPT.js";
 import "../chunk-YWVQCHQF.js";
-import "../chunk-U7LXB3SM.js";
-import "../chunk-HOTEC5UH.js";
+import "../chunk-MARIDIHZ.js";
+import "../chunk-NLGUTNQM.js";
 import "../chunk-3J6CUUWT.js";
 import "../chunk-AUEQQ4D3.js";
-import "../chunk-FGHABNQM.js";
+import "../chunk-JD2M6AS5.js";
 import "../chunk-CRTRMMJ7.js";
 export {
   AuthContext,

package/dist/utils/createCrossmintApiClient.cjs

@@ -1,9 +1,9 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true});
 
-var _chunkGMKTZIU2cjs = require('../chunk-GMKTZIU2.cjs');
-require('../chunk-Y3SUMTUI.cjs');
+var _chunkQP2A7HRUcjs = require('../chunk-QP2A7HRU.cjs');
+require('../chunk-W3P2I3UE.cjs');
 require('../chunk-4DAZAO6Y.cjs');
 
 
-exports.createCrossmintApiClient = _chunkGMKTZIU2cjs.createCrossmintApiClient;
+exports.createCrossmintApiClient = _chunkQP2A7HRUcjs.createCrossmintApiClient;
 //# sourceMappingURL=createCrossmintApiClient.cjs.map

package/dist/utils/createCrossmintApiClient.js

@@ -1,7 +1,7 @@
 import {
   createCrossmintApiClient
-} from "../chunk-HOTEC5UH.js";
-import "../chunk-FGHABNQM.js";
+} from "../chunk-NLGUTNQM.js";
+import "../chunk-JD2M6AS5.js";
 import "../chunk-CRTRMMJ7.js";
 export {
   createCrossmintApiClient

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crossmint/client-sdk-react-ui",
-  "version": "1.10.7",
+  "version": "1.11.0",
   "repository": "https://github.com/Crossmint/crossmint-sdk",
   "license": "Apache-2.0",
   "author": "Paella Labs Inc",
@@ -40,14 +40,15 @@
     "tailwindcss": "3.4.10",
     "viem": "2.17.5",
     "zod": "3.22.4",
-    "@crossmint/client-sdk-auth": "1.1.3",
-    "@crossmint/client-sdk-base": "1.3.4",
-    "@crossmint/client-sdk-smart-wallet": "0.1.24",
-    "@crossmint/client-sdk-window": "0.1.0",
-    "@crossmint/common-sdk-auth": "1.0.3",
+    "@crossmint/client-sdk-auth": "1.1.4",
+    "@crossmint/client-sdk-base": "1.4.0",
+    "@crossmint/client-sdk-smart-wallet": "0.1.25",
+    "@crossmint/client-sdk-window": "0.2.0",
+    "@crossmint/common-sdk-auth": "1.0.4",
     "@crossmint/common-sdk-base": "0.3.0"
   },
   "devDependencies": {
+    "pino-pretty": "^7.6.0",
     "@testing-library/react": "^16.0.1",
     "@types/color": "4.2.0",
     "@types/lodash.isequal": "4.5.6",

package/src/components/common/CrossmintLogoV2/CrossmintLogoV2.tsx

@@ -0,0 +1,98 @@
+import type { z } from "zod";
+import type { CrossmintLogoColorsAndDisplayType, crossmintLogoColorsAndDisplayTypeSchema } from "./schemas";
+import { CROSSMINT_LOGO_DEFAULTS, CROSSMINT_LOGO_DEFAULT_COLORS, CROSSMINT_LOGO_VIEWBOXES } from "./consts";
+import { useId, type JSX } from "react";
+
+export type CrossmintLogoV2Props = Omit<JSX.IntrinsicElements["svg"], "viewBox"> &
+    z.input<typeof crossmintLogoColorsAndDisplayTypeSchema>;
+
+export function CrossmintLogoV2({ colors, displayType = "icon-and-text", ...props }: CrossmintLogoV2Props) {
+    const { icon: iconColor, text: textColor } = {
+        icon: colors?.icon || CROSSMINT_LOGO_DEFAULTS.colors.icon,
+        text: colors?.text || CROSSMINT_LOGO_DEFAULT_COLORS.light.text,
+    };
+
+    const colorsAndDisplayType: CrossmintLogoColorsAndDisplayType = {
+        colors: { icon: iconColor, text: textColor },
+        displayType,
+    };
+
+    // We must only set a default width if both width and height are not provided
+    if (props.width == null && props.height == null) {
+        props.width = 144;
+    }
+
+    const gradientId = useId();
+
+    const Logo = (
+        <svg viewBox={CROSSMINT_LOGO_VIEWBOXES[displayType]} {...props}>
+            {getSvgGradientDefinition(colorsAndDisplayType, gradientId)}
+            <g>
+                <g>
+                    {getSvgText(colorsAndDisplayType)}
+                    {getSvgIcon(colorsAndDisplayType, gradientId)}
+                </g>
+            </g>
+        </svg>
+    );
+
+    return Logo;
+}
+
+function getSvgGradientDefinition(props: CrossmintLogoColorsAndDisplayType, gradientId: string) {
+    const { icon: iconColor } = props.colors;
+    if (iconColor.type !== "gradient") {
+        return null;
+    }
+    return (
+        <defs>
+            <linearGradient
+                id={`logoGradient-${gradientId}`}
+                className={`logoGradient`}
+                x1=".1"
+                y1=".1"
+                x2="85.8"
+                y2="85.8"
+                gradientUnits="userSpaceOnUse"
+            >
+                <stop className="stop-0" offset="0" stopColor={iconColor.from} />
+                <stop className="stop-1" offset="1" stopColor={iconColor.to} />
+            </linearGradient>
+        </defs>
+    );
+}
+
+function getSvgText({ colors, displayType }: CrossmintLogoColorsAndDisplayType) {
+    if (displayType === "icon-only") {
+        return null;
+    }
+    const { text: textColor } = colors;
+    return (
+        <>
+            <path
+                fill={textColor}
+                d="M372.7 9.5c0-3.4 2.7-6.1 6-6.1S385 6 385 9.5s-2.8 6-6.2 6-6-2.6-6-6m77.7 1.9V24h8.6v8.8h-8.6V52q-.1 5.4 5.3 5.2c1.3 0 3-.2 3.4-.3v8.2c-.6.2-2.5 1-6 1-7.7 0-12.5-4.7-12.5-12.5V33H433v-9h8.5V11.4zm-338 44.4q3 5 7.8 7.9 5 2.8 11.3 2.8 4.5 0 8.4-1.5 3.7-1.7 6.6-4.4 2.8-2.9 4-6.4l-8.9-4a10.5 10.5 0 0 1-10.1 7 11 11 0 0 1-6-1.5q-2.4-1.7-4-4.5-1.5-2.9-1.4-6.6a12 12 0 0 1 1.4-6.5q1.5-3 4-4.5a11 11 0 0 1 6-1.6q3.5 0 6.2 2 2.8 1.9 4 5l8.8-3.8q-1.2-3.9-4-6.5-2.9-2.8-6.7-4.3-3.9-1.6-8.3-1.6-6.3 0-11.3 2.8a21 21 0 0 0-7.8 7.8q-2.8 5-2.8 11.2c0 6.2 1 7.9 2.8 11.2m53-32.1h-9.4v41.9h10V42.3q0-4.8 2.7-7.4 2.5-2.7 6.9-2.7h3.6v-9H177q-4.5 0-7.6 1.9a10 10 0 0 0-3.8 4.5z"
+            />
+            <path
+                d="M202.9 22.8c12.4 0 21.6 9.3 21.6 22s-9.1 22-21.6 22-21.5-9.2-21.5-22 9.1-22 21.5-22m0 35.2c6.1 0 11.6-4.5 11.6-13.2s-5.5-13-11.6-13-11.6 4.4-11.6 13S196.8 58 203 58"
+                fillRule="evenodd"
+                fill={textColor}
+            />
+            <path
+                fill={textColor}
+                d="m236.4 52-8.6 2.4c.5 4.6 5 12.5 17.1 12.5 10.6 0 15.7-7 15.7-13.3s-4.1-11-12-12.6l-6.3-1.3q-4-1-4.1-4.4c0-2.5 2.4-4.7 6-4.7 5.5 0 7.3 3.8 7.6 6.2l8.4-2.4c-.7-4.1-4.5-11.6-16-11.6-8.7 0-15.3 6.1-15.3 13.4 0 5.7 3.8 10.5 11.1 12l6.2 1.4q4.9 1.2 4.8 4.6c0 2.6-2 4.8-6.2 4.8-5.3 0-8-3.3-8.4-7m27.6 2.4 8.5-2.4c.4 3.7 3.2 7 8.5 7 4 0 6.2-2.2 6.2-4.7q.1-3.6-4.9-4.6l-6.1-1.4c-7.3-1.6-11.2-6.4-11.2-12.1 0-7.2 6.7-13.4 15.3-13.4 11.6 0 15.3 7.5 16 11.6l-8.4 2.4c-.3-2.4-2-6.2-7.6-6.2-3.5 0-6 2.2-6 4.7q.2 3.5 4.2 4.4l6.3 1.3c7.8 1.7 12 6.5 12 12.6s-5.2 13.3-15.8 13.3c-12 0-16.6-7.8-17-12.5m48.6-30.7h-9.5v41.9h10.1V41q0-2.7 1-4.8a8 8 0 0 1 7-4.2 8 8 0 0 1 7.2 4.2q1 2.1 1 4.8v24.6h10.1V41q0-2.7 1-4.8a8 8 0 0 1 7-4.2q2.6 0 4.4 1.2 1.8 1 2.8 3 1 2.1 1 4.8v24.6h10v-27q0-4.5-2-8.2a14 14 0 0 0-5.5-5.6q-3.5-2-8-2-5 0-8.8 2.5-2.4 1.6-4.1 4.2-1.4-2.3-3.9-4a16 16 0 0 0-9-2.7q-4.8 0-8.3 2.2-2.2 1.5-3.5 4zm71.1 41.9h-9.8V24.1h9.8zm8.8-41.6v41.6h10V41.3q0-2.8 1.1-4.8a8 8 0 0 1 7.3-4.2 8 8 0 0 1 7.4 4.2q1 2 1 4.7v24.4h10V38.9q0-4.6-2-8.2a14 14 0 0 0-5.5-5.6q-3.4-2-8.1-2c-4.7 0-5.5.7-7.8 2q-2.5 1.6-4 4v-5z"
+            />
+        </>
+    );
+}
+
+function getSvgIcon(props: CrossmintLogoColorsAndDisplayType, gradientId: string) {
+    const { icon: iconColor } = props.colors;
+    return (
+        <path
+            d="M70 48.3A62 62 0 0 0 47.5 43c7.7-.6 22.8-2.7 29-10.4C86.6 25.2 86 .3 86 .3S62.3-2.4 52 9.4c-6.5 6.4-8.4 17.5-9 25.2-.6-7.7-2.6-18.8-9-25.2C23.7-2.4 0 .3 0 .3S-.3 15.8 4.4 26C6.8 31 11 35.1 16 37.6c7.2 3.7 16.8 5 22.4 5.4-5.6.4-15.2 1.7-22.4 5.3C11 51 6.8 55 4.4 60-.3 70.2 0 85.7 0 85.7s23.7 2.6 34-9.2c6.4-6.3 8.4-17.5 9-25.2.6 7.8 2.6 18.9 9 25.3 10.3 11.7 34 9.1 34 9.1s.3-15.6-4.5-25.7A25 25 0 0 0 70 48.3m.8 21.9c-.1 0-12.5-3.6-28.3-24.7A195 195 0 0 0 15 71.8l-.5.6.2-.8c0-.1 3.7-12.8 25.7-29C38.3 39.4 33.3 32.2 14 15l-.4-.4.6.1c.4 0 10.3 1.6 28.5 25l.6 1c2.6-1.8 10-7.1 26.7-26l.4-.4-.1.6c0 .4-1.6 10.3-24.9 28.4A193 193 0 0 0 71 69.9l.6.5z"
+            fill={iconColor.type === "gradient" ? `url(#logoGradient-${gradientId})` : iconColor.color}
+            fillRule="evenodd"
+        />
+    );
+}

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

@@ -0,0 +1,28 @@
+export const CROSSMINT_LOGO_DEFAULT_COLORS = {
+    light: {
+        icon: {
+            type: "gradient",
+            from: "#5edd4d",
+            to: "#05ce6c",
+        },
+        text: "#222",
+    },
+    dark: {
+        icon: {
+            type: "gradient",
+            from: "#5edd4d",
+            to: "#05ce6c",
+        },
+        text: "#fff",
+    },
+} as const;
+
+export const CROSSMINT_LOGO_DEFAULTS = {
+    colors: CROSSMINT_LOGO_DEFAULT_COLORS.light,
+    displayType: "icon-and-text",
+} as const;
+
+export const CROSSMINT_LOGO_VIEWBOXES = {
+    "icon-only": "0 0 86 86",
+    "icon-and-text": "0 0 459.2 86",
+} as const;

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

@@ -0,0 +1,34 @@
+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/embed/v3/EmbeddedCheckoutV3IFrame.tsx

@@ -24,7 +24,7 @@ export function EmbeddedCheckoutV3IFrame(props: CrossmintEmbeddedCheckoutV3Props
     const apiClient = createCrossmintApiClient(crossmint, {
         usageOrigin: "client",
     });
-    const embedV3Service = crossmintEmbeddedCheckoutV3Service({ apiClient });
+    const embeddedCheckoutService = crossmintEmbeddedCheckoutV3Service({ apiClient });
 
     const ref = useRef<HTMLIFrameElement>(null);
 
@@ -33,7 +33,7 @@ export function EmbeddedCheckoutV3IFrame(props: CrossmintEmbeddedCheckoutV3Props
         if (!iframe || iframeClient) {
             return;
         }
-        setIframeClient(embedV3Service.iframe.createClient(iframe));
+        setIframeClient(embeddedCheckoutService.iframe.createClient(iframe));
     }, [ref.current, iframeClient]);
 
     useEffect(() => {
@@ -51,7 +51,7 @@ export function EmbeddedCheckoutV3IFrame(props: CrossmintEmbeddedCheckoutV3Props
         <>
             <iframe
                 ref={ref}
-                src={embedV3Service.iframe.getUrl(props)}
+                src={embeddedCheckoutService.iframe.getUrl(props)}
                 id="crossmint-embedded-checkout.iframe"
                 role="crossmint-embedded-checkout.iframe"
                 allow="payment *"

package/src/components/hosted/index.ts

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

package/src/components/hosted/v3/CrossmintHostedCheckoutV3.tsx

@@ -0,0 +1,74 @@
+import { CrossmintLogoV2 } from "@/components/common/CrossmintLogoV2/CrossmintLogoV2";
+import { useCrossmint } from "@/hooks/useCrossmint";
+import { createCrossmintApiClient } from "@/utils/createCrossmintApiClient";
+import {
+    crossmintHostedCheckoutV3Service,
+    crossmintHostedCheckoutV3StylesService,
+    type CrossmintHostedCheckoutV3Props,
+} from "@crossmint/client-sdk-base";
+import clsx from "clsx";
+import { type MouseEvent, type JSX, useEffect, useState } from "react";
+
+export type CrossmintHostedCheckoutV3ReactProps = CrossmintHostedCheckoutV3Props & JSX.IntrinsicElements["button"];
+
+export function CrossmintHostedCheckout_Alpha(props: CrossmintHostedCheckoutV3ReactProps) {
+    const [didInjectCss, setDidInjectCss] = useState(false);
+
+    const { crossmint } = useCrossmint();
+    const apiClient = createCrossmintApiClient(crossmint);
+
+    // separate custom props from jsx button props
+    const { receipient, locale, webhookPassthroughData, lineItems, payment, appearance, ...buttonProps } = props;
+    const customProps: CrossmintHostedCheckoutV3Props = {
+        receipient,
+        locale,
+        webhookPassthroughData,
+        lineItems,
+        payment,
+        appearance,
+    };
+
+    const hostedCheckoutService = crossmintHostedCheckoutV3Service({ apiClient, hostedCheckoutProps: customProps });
+    const stylesService = crossmintHostedCheckoutV3StylesService(customProps);
+
+    const { onClick, className, children, ...restButtonProps } = buttonProps;
+
+    function _onClick(e: MouseEvent<HTMLButtonElement>) {
+        e.preventDefault();
+        e.stopPropagation();
+        hostedCheckoutService.createWindow();
+
+        if (onClick) {
+            onClick(e);
+        }
+    }
+
+    const css = stylesService.generateCss();
+
+    useEffect(() => {
+        const { cleanup } = stylesService.injectCss(css);
+        setDidInjectCss(true);
+        return cleanup;
+    }, [css]);
+
+    if (!didInjectCss) {
+        return null;
+    }
+
+    return (
+        <button
+            onClick={_onClick}
+            className={clsx(stylesService.identifiers.buttonClassNames, className)}
+            {...restButtonProps}
+        >
+            <CrossmintLogoV2
+                style={{ marginRight: "12px", flex: "none" }}
+                displayType="icon-only"
+                id={stylesService.identifiers.logoId}
+                height={16}
+                width={16}
+            />
+            {children ?? <p style={{ margin: 0 }}>{stylesService.getButtonText()}</p>}
+        </button>
+    );
+}

package/src/components/hosted/v3/index.ts

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

package/dist/chunk-5EE2IAIP.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/embed/v3/EmbeddedCheckoutV3IFrame.tsx"],"sourcesContent":["import { useCrossmint } from \"@/hooks\";\nimport { lazy, useEffect, useRef, useState } from \"react\";\n\nimport {\n    type CrossmintEmbeddedCheckoutV3Props,\n    type EmbeddedCheckoutV3IFrameEmitter,\n    crossmintEmbeddedCheckoutV3Service,\n} from \"@crossmint/client-sdk-base\";\n\nimport { createCrossmintApiClient } from \"@/utils/createCrossmintApiClient\";\n\nconst CryptoWalletConnectionHandler = lazy(() =>\n    // @ts-expect-error - Error because we dont use 'module' field in tsconfig, which is expected because we use tsup to compile\n    import(\"./crypto/CryptoWalletConnectionHandler\").then((mod) => ({\n        default: mod.CryptoWalletConnectionHandler,\n    }))\n);\n\nexport function EmbeddedCheckoutV3IFrame(props: CrossmintEmbeddedCheckoutV3Props) {\n    const [iframeClient, setIframeClient] = useState<EmbeddedCheckoutV3IFrameEmitter | null>(null);\n    const [height, setHeight] = useState(0);\n\n    const { crossmint } = useCrossmint();\n    const apiClient = createCrossmintApiClient(crossmint, {\n        usageOrigin: \"client\",\n    });\n    const embedV3Service = crossmintEmbeddedCheckoutV3Service({ apiClient });\n\n    const ref = useRef<HTMLIFrameElement>(null);\n\n    useEffect(() => {\n        const iframe = ref.current;\n        if (!iframe || iframeClient) {\n            return;\n        }\n        setIframeClient(embedV3Service.iframe.createClient(iframe));\n    }, [ref.current, iframeClient]);\n\n    useEffect(() => {\n        if (iframeClient == null) {\n            return;\n        }\n        iframeClient.on(\"ui:height.changed\", (data) => setHeight(data.height));\n\n        return () => {\n            iframeClient.off(\"ui:height.changed\");\n        };\n    }, [iframeClient]);\n\n    return (\n        <>\n            <iframe\n                ref={ref}\n                src={embedV3Service.iframe.getUrl(props)}\n                id=\"crossmint-embedded-checkout.iframe\"\n                role=\"crossmint-embedded-checkout.iframe\"\n                allow=\"payment *\"\n                style={{\n                    boxShadow: \"none\",\n                    border: \"none\",\n                    padding: \"0px\",\n                    width: \"100%\",\n                    minWidth: \"100%\",\n                    overflow: \"hidden\",\n                    display: \"block\",\n                    userSelect: \"none\",\n                    transform: \"translate(0px)\",\n                    opacity: \"1\",\n                    transition: \"ease 0s, opacity 0.4s ease 0.1s\",\n                    height: `${height}px`,\n                    backgroundColor: \"transparent\",\n                }}\n            />\n            {props.payment.crypto.enabled ? (\n                <CryptoWalletConnectionHandler\n                    iframeClient={iframeClient}\n                    apiKeyEnvironment={apiClient[\"parsedAPIKey\"].environment}\n                />\n            ) : null}\n            <span id=\"crossmint-focus-target\" tabIndex={-1} />\n        </>\n    );\n}\n"],"mappings":";;;;;;;;AACA,SAAS,MAAM,WAAW,QAAQ,gBAAgB;AAElD;AAAA,EAGI;AAAA,OACG;AA2CC,mBACI,KADJ;AAvCR,IAAM,gCAAgC;AAAA,EAAK;AAAA;AAAA,IAEvC,OAAO,+DAAwC,EAAE,KAAK,CAAC,SAAS;AAAA,MAC5D,SAAS,IAAI;AAAA,IACjB,EAAE;AAAA;AACN;AAEO,SAAS,yBAAyB,OAAyC;AAC9E,QAAM,CAAC,cAAc,eAAe,IAAI,SAAiD,IAAI;AAC7F,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,CAAC;AAEtC,QAAM,EAAE,UAAU,IAAI,aAAa;AACnC,QAAM,YAAY,yBAAyB,WAAW;AAAA,IAClD,aAAa;AAAA,EACjB,CAAC;AACD,QAAM,iBAAiB,mCAAmC,EAAE,UAAU,CAAC;AAEvE,QAAM,MAAM,OAA0B,IAAI;AAE1C,YAAU,MAAM;AACZ,UAAM,SAAS,IAAI;AACnB,QAAI,CAAC,UAAU,cAAc;AACzB;AAAA,IACJ;AACA,oBAAgB,eAAe,OAAO,aAAa,MAAM,CAAC;AAAA,EAC9D,GAAG,CAAC,IAAI,SAAS,YAAY,CAAC;AAE9B,YAAU,MAAM;AACZ,QAAI,gBAAgB,MAAM;AACtB;AAAA,IACJ;AACA,iBAAa,GAAG,qBAAqB,CAAC,SAAS,UAAU,KAAK,MAAM,CAAC;AAErE,WAAO,MAAM;AACT,mBAAa,IAAI,mBAAmB;AAAA,IACxC;AAAA,EACJ,GAAG,CAAC,YAAY,CAAC;AAEjB,SACI,iCACI;AAAA;AAAA,MAAC;AAAA;AAAA,QACG;AAAA,QACA,KAAK,eAAe,OAAO,OAAO,KAAK;AAAA,QACvC,IAAG;AAAA,QACH,MAAK;AAAA,QACL,OAAM;AAAA,QACN,OAAO;AAAA,UACH,WAAW;AAAA,UACX,QAAQ;AAAA,UACR,SAAS;AAAA,UACT,OAAO;AAAA,UACP,UAAU;AAAA,UACV,UAAU;AAAA,UACV,SAAS;AAAA,UACT,YAAY;AAAA,UACZ,WAAW;AAAA,UACX,SAAS;AAAA,UACT,YAAY;AAAA,UACZ,QAAQ,GAAG,MAAM;AAAA,UACjB,iBAAiB;AAAA,QACrB;AAAA;AAAA,IACJ;AAAA,IACC,MAAM,QAAQ,OAAO,UAClB;AAAA,MAAC;AAAA;AAAA,QACG;AAAA,QACA,mBAAmB,UAAU,cAAc,EAAE;AAAA;AAAA,IACjD,IACA;AAAA,IACJ,oBAAC,UAAK,IAAG,0BAAyB,UAAU,IAAI;AAAA,KACpD;AAER;","names":[]}

package/dist/chunk-7SBZ6OIH.js

@@ -1 +0,0 @@
-//# sourceMappingURL=chunk-7SBZ6OIH.js.map

package/dist/chunk-BKVDVDKX.cjs

@@ -1 +0,0 @@
-"use strict";//# sourceMappingURL=chunk-BKVDVDKX.cjs.map

package/dist/chunk-LJA62EVT.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/embed/v3/EmbeddedCheckoutV3IFrame.tsx"],"names":[],"mappings":";;;;;;;;AACA,SAAS,MAAM,WAAW,QAAQ,gBAAgB;AAElD;AAAA,EAGI;AAAA,OACG;AA2CC,mBACI,KADJ;AAvCR,IAAM,gCAAgC;AAAA,EAAK;AAAA;AAAA,IAEvC,OAAO,gEAAwC,EAAE,KAAK,CAAC,SAAS;AAAA,MAC5D,SAAS,IAAI;AAAA,IACjB,EAAE;AAAA;AACN;AAEO,SAAS,yBAAyB,OAAyC;AAC9E,QAAM,CAAC,cAAc,eAAe,IAAI,SAAiD,IAAI;AAC7F,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,CAAC;AAEtC,QAAM,EAAE,UAAU,IAAI,aAAa;AACnC,QAAM,YAAY,yBAAyB,WAAW;AAAA,IAClD,aAAa;AAAA,EACjB,CAAC;AACD,QAAM,iBAAiB,mCAAmC,EAAE,UAAU,CAAC;AAEvE,QAAM,MAAM,OAA0B,IAAI;AAE1C,YAAU,MAAM;AACZ,UAAM,SAAS,IAAI;AACnB,QAAI,CAAC,UAAU,cAAc;AACzB;AAAA,IACJ;AACA,oBAAgB,eAAe,OAAO,aAAa,MAAM,CAAC;AAAA,EAC9D,GAAG,CAAC,IAAI,SAAS,YAAY,CAAC;AAE9B,YAAU,MAAM;AACZ,QAAI,gBAAgB,MAAM;AACtB;AAAA,IACJ;AACA,iBAAa,GAAG,qBAAqB,CAAC,SAAS,UAAU,KAAK,MAAM,CAAC;AAErE,WAAO,MAAM;AACT,mBAAa,IAAI,mBAAmB;AAAA,IACxC;AAAA,EACJ,GAAG,CAAC,YAAY,CAAC;AAEjB,SACI,iCACI;AAAA;AAAA,MAAC;AAAA;AAAA,QACG;AAAA,QACA,KAAK,eAAe,OAAO,OAAO,KAAK;AAAA,QACvC,IAAG;AAAA,QACH,MAAK;AAAA,QACL,OAAM;AAAA,QACN,OAAO;AAAA,UACH,WAAW;AAAA,UACX,QAAQ;AAAA,UACR,SAAS;AAAA,UACT,OAAO;AAAA,UACP,UAAU;AAAA,UACV,UAAU;AAAA,UACV,SAAS;AAAA,UACT,YAAY;AAAA,UACZ,WAAW;AAAA,UACX,SAAS;AAAA,UACT,YAAY;AAAA,UACZ,QAAQ,GAAG,MAAM;AAAA,UACjB,iBAAiB;AAAA,QACrB;AAAA;AAAA,IACJ;AAAA,IACC,MAAM,QAAQ,OAAO,UAClB;AAAA,MAAC;AAAA;AAAA,QACG;AAAA,QACA,mBAAmB,UAAU,cAAc,EAAE;AAAA;AAAA,IACjD,IACA;AAAA,IACJ,oBAAC,UAAK,IAAG,0BAAyB,UAAU,IAAI;AAAA,KACpD;AAER","sourcesContent":["import { useCrossmint } from \"@/hooks\";\nimport { lazy, useEffect, useRef, useState } from \"react\";\n\nimport {\n    type CrossmintEmbeddedCheckoutV3Props,\n    type EmbeddedCheckoutV3IFrameEmitter,\n    crossmintEmbeddedCheckoutV3Service,\n} from \"@crossmint/client-sdk-base\";\n\nimport { createCrossmintApiClient } from \"@/utils/createCrossmintApiClient\";\n\nconst CryptoWalletConnectionHandler = lazy(() =>\n    // @ts-expect-error - Error because we dont use 'module' field in tsconfig, which is expected because we use tsup to compile\n    import(\"./crypto/CryptoWalletConnectionHandler\").then((mod) => ({\n        default: mod.CryptoWalletConnectionHandler,\n    }))\n);\n\nexport function EmbeddedCheckoutV3IFrame(props: CrossmintEmbeddedCheckoutV3Props) {\n    const [iframeClient, setIframeClient] = useState<EmbeddedCheckoutV3IFrameEmitter | null>(null);\n    const [height, setHeight] = useState(0);\n\n    const { crossmint } = useCrossmint();\n    const apiClient = createCrossmintApiClient(crossmint, {\n        usageOrigin: \"client\",\n    });\n    const embedV3Service = crossmintEmbeddedCheckoutV3Service({ apiClient });\n\n    const ref = useRef<HTMLIFrameElement>(null);\n\n    useEffect(() => {\n        const iframe = ref.current;\n        if (!iframe || iframeClient) {\n            return;\n        }\n        setIframeClient(embedV3Service.iframe.createClient(iframe));\n    }, [ref.current, iframeClient]);\n\n    useEffect(() => {\n        if (iframeClient == null) {\n            return;\n        }\n        iframeClient.on(\"ui:height.changed\", (data) => setHeight(data.height));\n\n        return () => {\n            iframeClient.off(\"ui:height.changed\");\n        };\n    }, [iframeClient]);\n\n    return (\n        <>\n            <iframe\n                ref={ref}\n                src={embedV3Service.iframe.getUrl(props)}\n                id=\"crossmint-embedded-checkout.iframe\"\n                role=\"crossmint-embedded-checkout.iframe\"\n                allow=\"payment *\"\n                style={{\n                    boxShadow: \"none\",\n                    border: \"none\",\n                    padding: \"0px\",\n                    width: \"100%\",\n                    minWidth: \"100%\",\n                    overflow: \"hidden\",\n                    display: \"block\",\n                    userSelect: \"none\",\n                    transform: \"translate(0px)\",\n                    opacity: \"1\",\n                    transition: \"ease 0s, opacity 0.4s ease 0.1s\",\n                    height: `${height}px`,\n                    backgroundColor: \"transparent\",\n                }}\n            />\n            {props.payment.crypto.enabled ? (\n                <CryptoWalletConnectionHandler\n                    iframeClient={iframeClient}\n                    apiKeyEnvironment={apiClient[\"parsedAPIKey\"].environment}\n                />\n            ) : null}\n            <span id=\"crossmint-focus-target\" tabIndex={-1} />\n        </>\n    );\n}\n"]}