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

package/dist/chunk-LJA62EVT.cjs

@@ -1,87 +0,0 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { newObj[key] = obj[key]; } } } newObj.default = obj; return newObj; } }
-
-var _chunkGMKTZIU2cjs = require('./chunk-GMKTZIU2.cjs');
-
-
-var _chunkKEKBOJCFcjs = require('./chunk-KEKBOJCF.cjs');
-
-// src/components/embed/v3/EmbeddedCheckoutV3IFrame.tsx
-var _react = require('react');
-
-
-var _clientsdkbase = require('@crossmint/client-sdk-base');
-var _jsxruntime = require('react/jsx-runtime');
-var CryptoWalletConnectionHandler = _react.lazy.call(void 0, 
-  () => (
-    // @ts-expect-error - Error because we dont use 'module' field in tsconfig, which is expected because we use tsup to compile
-    Promise.resolve().then(() => _interopRequireWildcard(require("./components/embed/v3/crypto/CryptoWalletConnectionHandler.cjs"))).then((mod) => ({
-      default: mod.CryptoWalletConnectionHandler
-    }))
-  )
-);
-function EmbeddedCheckoutV3IFrame(props) {
-  const [iframeClient, setIframeClient] = _react.useState.call(void 0, null);
-  const [height, setHeight] = _react.useState.call(void 0, 0);
-  const { crossmint } = _chunkKEKBOJCFcjs.useCrossmint.call(void 0, );
-  const apiClient = _chunkGMKTZIU2cjs.createCrossmintApiClient.call(void 0, crossmint, {
-    usageOrigin: "client"
-  });
-  const embedV3Service = _clientsdkbase.crossmintEmbeddedCheckoutV3Service.call(void 0, { apiClient });
-  const ref = _react.useRef.call(void 0, null);
-  _react.useEffect.call(void 0, () => {
-    const iframe = ref.current;
-    if (!iframe || iframeClient) {
-      return;
-    }
-    setIframeClient(embedV3Service.iframe.createClient(iframe));
-  }, [ref.current, iframeClient]);
-  _react.useEffect.call(void 0, () => {
-    if (iframeClient == null) {
-      return;
-    }
-    iframeClient.on("ui:height.changed", (data) => setHeight(data.height));
-    return () => {
-      iframeClient.off("ui:height.changed");
-    };
-  }, [iframeClient]);
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      "iframe",
-      {
-        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 ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
-      CryptoWalletConnectionHandler,
-      {
-        iframeClient,
-        apiKeyEnvironment: apiClient["parsedAPIKey"].environment
-      }
-    ) : null,
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { id: "crossmint-focus-target", tabIndex: -1 })
-  ] });
-}
-
-
-
-exports.EmbeddedCheckoutV3IFrame = EmbeddedCheckoutV3IFrame;
-//# sourceMappingURL=chunk-LJA62EVT.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"]}