@crossmint/client-sdk-react-ui 1.9.3 → 1.10.1

package/dist/chunk-W3SNJ5XS.cjs

@@ -0,0 +1,153 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+
+var _chunkQ3M4UH5Ucjs = require('./chunk-Q3M4UH5U.cjs');
+
+
+var _chunkKLWDDALZcjs = require('./chunk-KLWDDALZ.cjs');
+
+
+var _chunkHENBZUEDcjs = require('./chunk-HENBZUED.cjs');
+
+
+
+var _chunk4DAZAO6Ycjs = require('./chunk-4DAZAO6Y.cjs');
+
+// src/components/hosted/CrossmintPayButton.tsx
+var _react = require('react');
+
+
+
+
+
+var _clientsdkbase = require('@crossmint/client-sdk-base');
+var _jsxruntime = require('react/jsx-runtime');
+function CrossmintPayButton(buttonProps) {
+  const _a = buttonProps, {
+    className,
+    disabled,
+    onClick,
+    style,
+    tabIndex,
+    theme = "dark",
+    mintTo,
+    emailTo,
+    listingId,
+    auctionId,
+    showOverlay = true,
+    mintConfig,
+    whPassThroughArgs,
+    environment,
+    paymentMethod,
+    preferredSigninMethod,
+    dismissOverlayOnClick,
+    prepay,
+    locale = "en-US",
+    currency = "usd",
+    successCallbackURL = "",
+    failureCallbackURL = "",
+    loginEmail = "",
+    projectId,
+    getButtonText,
+    checkoutProps = {
+      experimental: false,
+      display: "same-tab",
+      paymentMethods: ["fiat", "ETH", "SOL"]
+    }
+  } = _a, props = _chunk4DAZAO6Ycjs.__objRest.call(void 0, _a, [
+    "className",
+    "disabled",
+    "onClick",
+    "style",
+    "tabIndex",
+    "theme",
+    "mintTo",
+    "emailTo",
+    "listingId",
+    "auctionId",
+    "showOverlay",
+    "mintConfig",
+    "whPassThroughArgs",
+    "environment",
+    "paymentMethod",
+    "preferredSigninMethod",
+    "dismissOverlayOnClick",
+    "prepay",
+    "locale",
+    "currency",
+    "successCallbackURL",
+    "failureCallbackURL",
+    "loginEmail",
+    "projectId",
+    "getButtonText",
+    "checkoutProps"
+  ]);
+  const collectionId = "clientId" in props ? props.clientId : props.collectionId;
+  const [connecting, setConnecting] = _react.useState.call(void 0, false);
+  const { isServerSideRendering } = _chunkKLWDDALZcjs.useEnvironment.call(void 0, );
+  const { connect } = _clientsdkbase.crossmintModalService.call(void 0, {
+    clientId: collectionId,
+    projectId,
+    showOverlay,
+    dismissOverlayOnClick,
+    setConnecting,
+    libVersion: _chunkHENBZUEDcjs.LIB_VERSION,
+    environment,
+    clientName: _clientsdkbase.clientNames.reactUi,
+    locale,
+    currency,
+    successCallbackURL,
+    failureCallbackURL,
+    loginEmail
+  });
+  const { getButtonText: getButtonTextInternal, handleClick } = _clientsdkbase.crossmintPayButtonService.call(void 0, {
+    onClick,
+    connecting,
+    paymentMethod,
+    locale,
+    checkoutProps
+  });
+  const _handleClick = (event) => handleClick(event, () => {
+    connect(
+      mintConfig,
+      mintTo,
+      emailTo,
+      listingId,
+      whPassThroughArgs,
+      paymentMethod,
+      preferredSigninMethod,
+      prepay,
+      checkoutProps
+    );
+  });
+  const classes = _chunkQ3M4UH5Ucjs.useStyles.call(void 0, _chunkQ3M4UH5Ucjs.formatProps.call(void 0, theme));
+  const content = _react.useMemo.call(void 0, () => {
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: classes.crossmintParagraph, role: "button-paragraph", children: getButtonText != null ? getButtonText(connecting, paymentMethod || "fiat") : getButtonTextInternal(connecting) });
+  }, [connecting, getButtonText, paymentMethod]);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _jsxruntime.Fragment, { children: !isServerSideRendering && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+    "button",
+    {
+      className: `${classes.crossmintButton} ${className || ""}`,
+      disabled,
+      onClick: _handleClick,
+      style: _chunk4DAZAO6Ycjs.__spreadValues.call(void 0, {}, style),
+      tabIndex,
+      children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+          "img",
+          {
+            className: classes.crossmintImg,
+            src: "https://www.crossmint.io/assets/crossmint/logo.svg",
+            alt: "Crossmint logo"
+          }
+        ),
+        content
+      ]
+    }
+  ) });
+}
+
+
+
+exports.CrossmintPayButton = CrossmintPayButton;
+//# sourceMappingURL=chunk-W3SNJ5XS.cjs.map

package/dist/chunk-W3SNJ5XS.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/hosted/CrossmintPayButton.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;AAAA,SAA8C,eAAe;AAC7D,SAAS,gBAAgB;AAEzB;AAAA,EAGI;AAAA,EACA;AAAA,EACA;AAAA,OACG;AA8FK,SASJ,UATI,KAWI,YAXJ;AAnFL,SAAS,mBAAmB,aAA2C;AAC1E,QAgCI,kBA/BA;AAAA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,WAAW;AAAA,IACX,qBAAqB;AAAA,IACrB,qBAAqB;AAAA,IACrB,aAAa;AAAA,IACb;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,MACZ,cAAc;AAAA,MACd,SAAS;AAAA,MACT,gBAAgB,CAAC,QAAQ,OAAO,KAAK;AAAA,IACzC;AAAA,EAnDR,IAqDQ,IADG,kBACH,IADG;AAAA,IA9BH;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAQJ,QAAM,eAAe,cAAc,QAAQ,MAAM,WAAW,MAAM;AAElE,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,KAAK;AAClD,QAAM,EAAE,sBAAsB,IAAI,eAAe;AAEjD,QAAM,EAAE,QAAQ,IAAI,sBAAsB;AAAA,IACtC,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,YAAY;AAAA,IACZ;AAAA,IACA,YAAY,YAAY;AAAA,IACxB;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACJ,CAAC;AAED,QAAM,EAAE,eAAe,uBAAuB,YAAY,IAAI,0BAA0B;AAAA,IACpF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACJ,CAAC;AAED,QAAM,eAAe,CAAC,UAClB,YAAY,OAAO,MAAM;AACrB;AAAA,MACI;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IACJ;AAAA,EACJ,CAAC;AAEL,QAAM,UAAU,UAAU,YAAY,KAAK,CAAC;AAE5C,QAAM,UAAU,QAAQ,MAAM;AAC1B,WACI,oBAAC,UAAK,WAAW,QAAQ,oBAAoB,MAAK,oBAC7C,2BAAiB,OACZ,cAAc,YAAY,iBAAiB,MAAM,IACjD,sBAAsB,UAAU,GAC1C;AAAA,EAER,GAAG,CAAC,YAAY,eAAe,aAAa,CAAC;AAE7C,SACI,gCACK,WAAC,yBACE;AAAA,IAAC;AAAA;AAAA,MACG,WAAW,GAAG,QAAQ,eAAe,IAAI,aAAa,EAAE;AAAA,MACxD;AAAA,MACA,SAAS;AAAA,MACT,OAAO,mBAAK;AAAA,MACZ;AAAA,MAEA;AAAA;AAAA,UAAC;AAAA;AAAA,YACG,WAAW,QAAQ;AAAA,YACnB,KAAI;AAAA,YACJ,KAAI;AAAA;AAAA,QACR;AAAA,QACC;AAAA;AAAA;AAAA,EACL,GAER;AAER","sourcesContent":["import { type CSSProperties, type MouseEvent, useMemo } from \"react\";\nimport { useState } from \"react\";\n\nimport {\n    type CheckoutProps,\n    type CrossmintPayButtonProps,\n    clientNames,\n    crossmintModalService,\n    crossmintPayButtonService,\n} from \"@crossmint/client-sdk-base\";\n\nimport { LIB_VERSION } from \"../../consts/version\";\nimport useEnvironment from \"../../hooks/useEnvironment\";\nimport { formatProps, useStyles } from \"./styles\";\n\nexport type CrossmintPayButtonReactProps = CrossmintPayButtonProps & {\n    onClick?: (e: MouseEvent<HTMLButtonElement>) => void;\n    style?: CSSProperties;\n};\n\nexport function CrossmintPayButton(buttonProps: CrossmintPayButtonReactProps) {\n    const {\n        className,\n        disabled,\n        onClick,\n        style,\n        tabIndex,\n        theme = \"dark\",\n        mintTo,\n        emailTo,\n        listingId,\n        auctionId,\n        showOverlay = true,\n        mintConfig,\n        whPassThroughArgs,\n        environment,\n        paymentMethod,\n        preferredSigninMethod,\n        dismissOverlayOnClick,\n        prepay,\n        locale = \"en-US\",\n        currency = \"usd\",\n        successCallbackURL = \"\",\n        failureCallbackURL = \"\",\n        loginEmail = \"\",\n        projectId,\n        getButtonText,\n        checkoutProps = {\n            experimental: false,\n            display: \"same-tab\",\n            paymentMethods: [\"fiat\", \"ETH\", \"SOL\"],\n        } as CheckoutProps,\n        ...props\n    } = buttonProps;\n\n    const collectionId = \"clientId\" in props ? props.clientId : props.collectionId;\n\n    const [connecting, setConnecting] = useState(false);\n    const { isServerSideRendering } = useEnvironment();\n\n    const { connect } = crossmintModalService({\n        clientId: collectionId,\n        projectId,\n        showOverlay,\n        dismissOverlayOnClick,\n        setConnecting,\n        libVersion: LIB_VERSION,\n        environment,\n        clientName: clientNames.reactUi,\n        locale,\n        currency,\n        successCallbackURL,\n        failureCallbackURL,\n        loginEmail,\n    });\n\n    const { getButtonText: getButtonTextInternal, handleClick } = crossmintPayButtonService({\n        onClick,\n        connecting,\n        paymentMethod,\n        locale,\n        checkoutProps,\n    });\n\n    const _handleClick = (event: MouseEvent<HTMLButtonElement>) =>\n        handleClick(event, () => {\n            connect(\n                mintConfig,\n                mintTo,\n                emailTo,\n                listingId,\n                whPassThroughArgs,\n                paymentMethod,\n                preferredSigninMethod,\n                prepay,\n                checkoutProps\n            );\n        });\n\n    const classes = useStyles(formatProps(theme));\n\n    const content = useMemo(() => {\n        return (\n            <span className={classes.crossmintParagraph} role=\"button-paragraph\">\n                {getButtonText != null\n                    ? getButtonText(connecting, paymentMethod || \"fiat\")\n                    : getButtonTextInternal(connecting)}\n            </span>\n        );\n    }, [connecting, getButtonText, paymentMethod]);\n\n    return (\n        <>\n            {!isServerSideRendering && (\n                <button\n                    className={`${classes.crossmintButton} ${className || \"\"}`}\n                    disabled={disabled}\n                    onClick={_handleClick}\n                    style={{ ...style }}\n                    tabIndex={tabIndex}\n                >\n                    <img\n                        className={classes.crossmintImg}\n                        src=\"https://www.crossmint.io/assets/crossmint/logo.svg\"\n                        alt=\"Crossmint logo\"\n                    />\n                    {content}\n                </button>\n            )}\n        </>\n    );\n}\n"]}

package/dist/chunk-WK5RAFJ3.js

@@ -0,0 +1,54 @@
+import {
+  classNames
+} from "./chunk-RZPQIRIY.js";
+import {
+  __objRest,
+  __spreadProps,
+  __spreadValues
+} from "./chunk-CRTRMMJ7.js";
+
+// src/components/auth/methods/web3/Web3ProviderButton.tsx
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function Web3ProviderButton(_a) {
+  var _b = _a, {
+    title,
+    appearance,
+    img
+  } = _b, props = __objRest(_b, [
+    "title",
+    "appearance",
+    "img"
+  ]);
+  var _a2, _b2, _c;
+  return /* @__PURE__ */ jsxs(
+    "button",
+    __spreadProps(__spreadValues({
+      className: classNames(
+        "relative flex text-base p-4 bg-cm-muted-primary text-cm-text-primary items-center w-full rounded-xl justify-center",
+        "transition-colors duration-200 ease-in-out",
+        "hover:bg-cm-hover focus:bg-cm-hover outline-none"
+      ),
+      style: {
+        borderRadius: appearance == null ? void 0 : appearance.borderRadius,
+        borderColor: (_a2 = appearance == null ? void 0 : appearance.colors) == null ? void 0 : _a2.border,
+        backgroundColor: (_b2 = appearance == null ? void 0 : appearance.colors) == null ? void 0 : _b2.buttonBackground
+      }
+    }, props), {
+      children: [
+        /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("img", { src: img, alt: title, className: "h-[25px] w-[25px] absolute left-[18px]" }),
+          /* @__PURE__ */ jsx("span", { className: "font-medium", style: { color: (_c = appearance == null ? void 0 : appearance.colors) == null ? void 0 : _c.textPrimary }, children: title })
+        ] }),
+        /* @__PURE__ */ jsxs("span", { className: "sr-only", children: [
+          "Sign in with ",
+          title
+        ] })
+      ]
+    })
+  );
+}
+
+export {
+  Web3ProviderButton
+};
+//# sourceMappingURL=chunk-WK5RAFJ3.js.map

package/dist/chunk-WK5RAFJ3.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/auth/methods/web3/Web3ProviderButton.tsx"],"sourcesContent":["import type { UIConfig } from \"@crossmint/common-sdk-base\";\nimport type React from \"react\";\nimport { classNames } from \"../../../../utils/classNames\";\n\nexport function Web3ProviderButton({\n    title,\n    appearance,\n    img,\n    ...props\n}: {\n    title: string;\n    appearance?: UIConfig;\n    img: string;\n} & React.ButtonHTMLAttributes<HTMLButtonElement>) {\n    return (\n        <button\n            className={classNames(\n                \"relative flex text-base p-4 bg-cm-muted-primary text-cm-text-primary items-center w-full rounded-xl justify-center\",\n                \"transition-colors duration-200 ease-in-out\",\n                \"hover:bg-cm-hover focus:bg-cm-hover outline-none\"\n            )}\n            style={{\n                borderRadius: appearance?.borderRadius,\n                borderColor: appearance?.colors?.border,\n                backgroundColor: appearance?.colors?.buttonBackground,\n            }}\n            {...props}\n        >\n            <>\n                <img src={img} alt={title} className=\"h-[25px] w-[25px] absolute left-[18px]\" />\n                <span className=\"font-medium\" style={{ color: appearance?.colors?.textPrimary }}>\n                    {title}\n                </span>\n            </>\n            <span className=\"sr-only\">Sign in with {title}</span>\n        </button>\n    );\n}\n"],"mappings":";;;;;;;;;;AA4BY,mBACI,KADJ;AAxBL,SAAS,mBAAmB,IASgB;AAThB,eAC/B;AAAA;AAAA,IACA;AAAA,IACA;AAAA,EAPJ,IAImC,IAI5B,kBAJ4B,IAI5B;AAAA,IAHH;AAAA,IACA;AAAA,IACA;AAAA;AAPJ,MAAAA,KAAAC,KAAA;AAcI,SACI;AAAA,IAAC;AAAA;AAAA,MACG,WAAW;AAAA,QACP;AAAA,QACA;AAAA,QACA;AAAA,MACJ;AAAA,MACA,OAAO;AAAA,QACH,cAAc,yCAAY;AAAA,QAC1B,cAAaD,MAAA,yCAAY,WAAZ,gBAAAA,IAAoB;AAAA,QACjC,kBAAiBC,MAAA,yCAAY,WAAZ,gBAAAA,IAAoB;AAAA,MACzC;AAAA,OACI,QAXP;AAAA,MAaG;AAAA,yCACI;AAAA,8BAAC,SAAI,KAAK,KAAK,KAAK,OAAO,WAAU,0CAAyC;AAAA,UAC9E,oBAAC,UAAK,WAAU,eAAc,OAAO,EAAE,QAAO,8CAAY,WAAZ,mBAAoB,YAAY,GACzE,iBACL;AAAA,WACJ;AAAA,QACA,qBAAC,UAAK,WAAU,WAAU;AAAA;AAAA,UAAc;AAAA,WAAM;AAAA;AAAA;AAAA,EAClD;AAER;","names":["_a","_b"]}

package/dist/chunk-WQ7WULBW.cjs

@@ -0,0 +1,31 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+var _chunkHENBZUEDcjs = require('./chunk-HENBZUED.cjs');
+
+// src/components/CrossmintNFTDetail.tsx
+var _clientsdkbase = require('@crossmint/client-sdk-base');
+var _jsxruntime = require('react/jsx-runtime');
+function CrossmintNFTDetail(props) {
+  _clientsdkbase.assertValidValidateNFTDetailProps.call(void 0, props);
+  const src = _clientsdkbase.getNFTDetailSrc.call(void 0, props, _chunkHENBZUEDcjs.LIB_VERSION);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    "iframe",
+    {
+      src,
+      width: "100%",
+      height: "100%",
+      style: {
+        flexGrow: "1",
+        border: "none",
+        margin: "0",
+        padding: "0"
+      },
+      role: "nft-details"
+    }
+  );
+}
+
+
+
+exports.CrossmintNFTDetail = CrossmintNFTDetail;
+//# sourceMappingURL=chunk-WQ7WULBW.cjs.map

package/dist/chunk-WQ7WULBW.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/CrossmintNFTDetail.tsx"],"names":[],"mappings":";;;;;AAAA,SAAS,mCAAmC,uBAAuB;AAW3D;AAND,SAAS,mBAAmB,OAAuB;AACtD,oCAAkC,KAAK;AAEvC,QAAM,MAAM,gBAAgB,OAAO,WAAW;AAE9C,SACI;AAAA,IAAC;AAAA;AAAA,MACG;AAAA,MACA,OAAM;AAAA,MACN,QAAO;AAAA,MACP,OAAO;AAAA,QACH,UAAU;AAAA,QACV,QAAQ;AAAA,QACR,QAAQ;AAAA,QACR,SAAS;AAAA,MACb;AAAA,MACA,MAAK;AAAA;AAAA,EACT;AAER","sourcesContent":["import { assertValidValidateNFTDetailProps, getNFTDetailSrc } from \"@crossmint/client-sdk-base\";\nimport type { NFTDetailProps } from \"@crossmint/common-sdk-base\";\n\nimport { LIB_VERSION } from \"../consts/version\";\n\nexport function CrossmintNFTDetail(props: NFTDetailProps) {\n    assertValidValidateNFTDetailProps(props);\n\n    const src = getNFTDetailSrc(props, LIB_VERSION);\n\n    return (\n        <iframe\n            src={src}\n            width=\"100%\"\n            height=\"100%\"\n            style={{\n                flexGrow: \"1\",\n                border: \"none\",\n                margin: \"0\",\n                padding: \"0\",\n            }}\n            role=\"nft-details\"\n        />\n    );\n}\n"]}

package/dist/chunk-XDJ6F7N4.cjs

@@ -0,0 +1,107 @@
+"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; } } function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _chunk35RV5AOTcjs = require('./chunk-35RV5AOT.cjs');
+
+
+var _chunkSBA6FMFTcjs = require('./chunk-SBA6FMFT.cjs');
+
+
+
+var _chunk4DAZAO6Ycjs = require('./chunk-4DAZAO6Y.cjs');
+
+// src/components/embed/crypto/CryptoEmbeddedCheckoutIFrame.tsx
+var _bs58 = require('bs58'); var _bs582 = _interopRequireDefault(_bs58);
+
+
+
+
+
+var _clientsdkbase = require('@crossmint/client-sdk-base');
+var _jsxruntime = require('react/jsx-runtime');
+function CryptoEmbeddedCheckoutIFrame(props) {
+  const { emitInternalEvent } = _clientsdkbase.crossmintIFrameService.call(void 0, props);
+  const { signer, paymentMethod } = props;
+  function onInternalEvent(event) {
+    const { type, payload } = event;
+    if (type === _clientsdkbase.IncomingInternalEvents.CRYPTO_PAYMENT_INCOMING_TRANSACTION) {
+      const { serializedTransaction } = payload;
+      console.log("[Crossmint] Received incoming transaction", serializedTransaction);
+      handleIncomingTransaction(serializedTransaction);
+    }
+    if (type === _clientsdkbase.IncomingInternalEvents.CRYPTO_CHAIN_SWITCH) {
+      const { chain } = payload;
+      console.log("[Crossmint] Received change of chain", chain);
+      const handleChainSwitch = signer.handleChainSwitch;
+      if (handleChainSwitch == null) {
+        throw new Error("switchNetwork function should have been defined");
+      }
+      handleChainSwitch(chain);
+    }
+  }
+  function handleIncomingTransaction(serializedTransaction) {
+    return _chunk4DAZAO6Ycjs.__async.call(void 0, this, null, function* () {
+      try {
+        let txId;
+        switch (paymentMethod) {
+          case "SOL":
+            txId = yield handleSOLTransaction(signer, serializedTransaction);
+            break;
+          case "ETH":
+            txId = yield handleETHTransaction(signer, serializedTransaction);
+            break;
+          default:
+            throw new Error(`Unsupported payment method ${paymentMethod}`);
+        }
+        console.log("[Crossmint] Signed and sent transaction", txId);
+        emitInternalEvent({
+          type: _clientsdkbase.OutgoingInternalEvents.CRYPTO_PAYMENT_USER_ACCEPTED,
+          payload: {
+            txId
+          }
+        });
+      } catch (e) {
+        console.error("[Crossmint] Failed to sign and send transaction", e);
+        emitInternalEvent({
+          type: _clientsdkbase.OutgoingInternalEvents.CRYPTO_PAYMENT_USER_REJECTED,
+          payload: {}
+        });
+      }
+    });
+  }
+  function handleSOLTransaction(signer2, serializedTransaction) {
+    return _chunk4DAZAO6Ycjs.__async.call(void 0, this, null, function* () {
+      const { Transaction } = yield Promise.resolve().then(() => _interopRequireWildcard(require("@solana/web3.js")));
+      const transaction = Transaction.from(_bs582.default.decode(serializedTransaction));
+      console.log("[Crossmint] Deserialized SOL transaction", transaction);
+      return yield signer2.signAndSendTransaction(transaction);
+    });
+  }
+  function handleETHTransaction(signer2, serializedTransaction) {
+    return _chunk4DAZAO6Ycjs.__async.call(void 0, this, null, function* () {
+      const { parse: parseTransaction } = yield Promise.resolve().then(() => _interopRequireWildcard(require("@ethersproject/transactions")));
+      const transaction = parseTransaction(serializedTransaction);
+      console.log("[Crossmint] Deserialized ETH transaction", transaction);
+      return yield signer2.signAndSendTransaction(transaction);
+    });
+  }
+  _chunkSBA6FMFTcjs.useDeepEffect.call(void 0, () => {
+    emitInternalEvent({
+      type: "params-update",
+      payload: _clientsdkbase.embeddedCheckoutPropsToUpdatableParamsPayload.call(void 0, props)
+    });
+  }, [
+    props.signer.address,
+    props.recipient,
+    props.mintConfig,
+    props.locale,
+    props.currency,
+    props.whPassThroughArgs,
+    ..."chain" in props.signer ? [props.signer.chain] : []
+  ]);
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _chunk35RV5AOTcjs.CrossmintEmbeddedCheckoutIFrame, _chunk4DAZAO6Ycjs.__spreadValues.call(void 0, { onInternalEvent }, props));
+}
+
+
+
+exports.CryptoEmbeddedCheckoutIFrame = CryptoEmbeddedCheckoutIFrame;
+//# sourceMappingURL=chunk-XDJ6F7N4.cjs.map

package/dist/chunk-XDJ6F7N4.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/embed/crypto/CryptoEmbeddedCheckoutIFrame.tsx"],"names":["signer"],"mappings":";;;;;;;;;;;;AAAA,OAAO,UAAU;AAEjB;AAAA,EAII;AAAA,EACA;AAAA,EAEA;AAAA,EACA;AAAA,OACG;AA+FI;AAzFI,SAAR,6BAA8C,OAA8C;AAC/F,QAAM,EAAE,kBAAkB,IAAI,uBAAuB,KAAK;AAE1D,QAAM,EAAE,QAAQ,cAAc,IAAI;AAElC,WAAS,gBAAgB,OAA8B;AACnD,UAAM,EAAE,MAAM,QAAQ,IAAI;AAE1B,QAAI,SAAS,uBAAuB,qCAAqC;AACrE,YAAM,EAAE,sBAAsB,IAAI;AAClC,cAAQ,IAAI,6CAA6C,qBAAqB;AAC9E,gCAA0B,qBAAqB;AAAA,IACnD;AAEA,QAAI,SAAS,uBAAuB,qBAAqB;AACrD,YAAM,EAAE,MAAM,IAAI;AAClB,cAAQ,IAAI,wCAAwC,KAAK;AAEzD,YAAM,oBAAqB,OAAqC;AAChE,UAAI,qBAAqB,MAAM;AAC3B,cAAM,IAAI,MAAM,iDAAiD;AAAA,MACrE;AACA,wBAAkB,KAAsC;AAAA,IAC5D;AAAA,EACJ;AAEA,WAAe,0BAA0B,uBAA+B;AAAA;AACpE,UAAI;AACA,YAAI;AACJ,gBAAQ,eAAe;AAAA,UACnB,KAAK;AACD,mBAAO,MAAM,qBAAqB,QAAQ,qBAAqB;AAC/D;AAAA,UACJ,KAAK;AACD,mBAAO,MAAM,qBAAqB,QAAQ,qBAAqB;AAC/D;AAAA,UACJ;AACI,kBAAM,IAAI,MAAM,8BAA8B,aAAa,EAAE;AAAA,QACrE;AAEA,gBAAQ,IAAI,2CAA2C,IAAI;AAC3D,0BAAkB;AAAA,UACd,MAAM,uBAAuB;AAAA,UAC7B,SAAS;AAAA,YACL;AAAA,UACJ;AAAA,QACJ,CAAC;AAAA,MACL,SAAS,GAAG;AACR,gBAAQ,MAAM,mDAAmD,CAAC;AAClE,0BAAkB;AAAA,UACd,MAAM,uBAAuB;AAAA,UAC7B,SAAS,CAAC;AAAA,QACd,CAAC;AAAA,MACL;AAAA,IACJ;AAAA;AAEA,WAAe,qBAAqBA,SAAmC,uBAA+B;AAAA;AAElG,YAAM,EAAE,YAAY,IAAI,MAAM,OAAO,iBAAiB;AACtD,YAAM,cAAc,YAAY,KAAK,KAAK,OAAO,qBAAqB,CAAC;AACvE,cAAQ,IAAI,4CAA4C,WAAW;AAEnE,aAAO,MAAMA,QAAO,uBAAuB,WAAW;AAAA,IAC1D;AAAA;AAEA,WAAe,qBAAqBA,SAAmC,uBAA+B;AAAA;AAElG,YAAM,EAAE,OAAO,iBAAiB,IAAI,MAAM,OAAO,6BAA6B;AAC9E,YAAM,cAAc,iBAAiB,qBAAqB;AAC1D,cAAQ,IAAI,4CAA4C,WAAW;AAEnE,aAAO,MAAMA,QAAO,uBAAuB,WAAW;AAAA,IAC1D;AAAA;AAEA,gBAAc,MAAM;AAChB,sBAAkB;AAAA,MACd,MAAM;AAAA,MACN,SAAS,8CAA8C,KAAK;AAAA,IAChE,CAAC;AAAA,EACL,GAAG;AAAA,IACC,MAAM,OAAO;AAAA,IACb,MAAM;AAAA,IACN,MAAM;AAAA,IACN,MAAM;AAAA,IACN,MAAM;AAAA,IACN,MAAM;AAAA,IACN,GAAI,WAAW,MAAM,SAAS,CAAC,MAAM,OAAO,KAAK,IAAI,CAAC;AAAA,EAC1D,CAAC;AAED,SAAO,oBAAC,kDAAgC,mBAAsC,MAAO;AACzF","sourcesContent":["import bs58 from \"bs58\";\n\nimport {\n    type CryptoEmbeddedCheckoutPropsWithSigner,\n    type ETHEmbeddedCheckoutSigner,\n    type IncomingInternalEvent,\n    IncomingInternalEvents,\n    OutgoingInternalEvents,\n    type SOLEmbeddedCheckoutSigner,\n    crossmintIFrameService,\n    embeddedCheckoutPropsToUpdatableParamsPayload,\n} from \"@crossmint/client-sdk-base\";\nimport type { EVMBlockchainIncludingTestnet } from \"@crossmint/common-sdk-base\";\n\nimport useDeepEffect from \"../../../hooks/useDeepEffect\";\nimport CrossmintEmbeddedCheckoutIFrame from \"../EmbeddedCheckoutIFrame\";\n\nexport default function CryptoEmbeddedCheckoutIFrame(props: CryptoEmbeddedCheckoutPropsWithSigner) {\n    const { emitInternalEvent } = crossmintIFrameService(props);\n\n    const { signer, paymentMethod } = props;\n\n    function onInternalEvent(event: IncomingInternalEvent) {\n        const { type, payload } = event;\n\n        if (type === IncomingInternalEvents.CRYPTO_PAYMENT_INCOMING_TRANSACTION) {\n            const { serializedTransaction } = payload;\n            console.log(\"[Crossmint] Received incoming transaction\", serializedTransaction);\n            handleIncomingTransaction(serializedTransaction);\n        }\n\n        if (type === IncomingInternalEvents.CRYPTO_CHAIN_SWITCH) {\n            const { chain } = payload;\n            console.log(\"[Crossmint] Received change of chain\", chain);\n\n            const handleChainSwitch = (signer as ETHEmbeddedCheckoutSigner).handleChainSwitch;\n            if (handleChainSwitch == null) {\n                throw new Error(\"switchNetwork function should have been defined\");\n            }\n            handleChainSwitch(chain as EVMBlockchainIncludingTestnet);\n        }\n    }\n\n    async function handleIncomingTransaction(serializedTransaction: string) {\n        try {\n            let txId: string;\n            switch (paymentMethod) {\n                case \"SOL\":\n                    txId = await handleSOLTransaction(signer, serializedTransaction);\n                    break;\n                case \"ETH\":\n                    txId = await handleETHTransaction(signer, serializedTransaction);\n                    break;\n                default:\n                    throw new Error(`Unsupported payment method ${paymentMethod}`);\n            }\n\n            console.log(\"[Crossmint] Signed and sent transaction\", txId);\n            emitInternalEvent({\n                type: OutgoingInternalEvents.CRYPTO_PAYMENT_USER_ACCEPTED,\n                payload: {\n                    txId,\n                },\n            });\n        } catch (e) {\n            console.error(\"[Crossmint] Failed to sign and send transaction\", e);\n            emitInternalEvent({\n                type: OutgoingInternalEvents.CRYPTO_PAYMENT_USER_REJECTED,\n                payload: {},\n            });\n        }\n    }\n\n    async function handleSOLTransaction(signer: SOLEmbeddedCheckoutSigner, serializedTransaction: string) {\n        // @ts-ignore - Error becasue we dont use 'module' field in tsconfig, which is expected because we use tsup to compile\n        const { Transaction } = await import(\"@solana/web3.js\");\n        const transaction = Transaction.from(bs58.decode(serializedTransaction));\n        console.log(\"[Crossmint] Deserialized SOL transaction\", transaction);\n\n        return await signer.signAndSendTransaction(transaction);\n    }\n\n    async function handleETHTransaction(signer: ETHEmbeddedCheckoutSigner, serializedTransaction: string) {\n        // @ts-ignore - Error becasue we dont use 'module' field in tsconfig, which is expected because we use tsup to compile\n        const { parse: parseTransaction } = await import(\"@ethersproject/transactions\");\n        const transaction = parseTransaction(serializedTransaction);\n        console.log(\"[Crossmint] Deserialized ETH transaction\", transaction);\n\n        return await signer.signAndSendTransaction(transaction);\n    }\n\n    useDeepEffect(() => {\n        emitInternalEvent({\n            type: \"params-update\",\n            payload: embeddedCheckoutPropsToUpdatableParamsPayload(props),\n        });\n    }, [\n        props.signer.address,\n        props.recipient,\n        props.mintConfig,\n        props.locale,\n        props.currency,\n        props.whPassThroughArgs,\n        ...(\"chain\" in props.signer ? [props.signer.chain] : []),\n    ]);\n\n    return <CrossmintEmbeddedCheckoutIFrame onInternalEvent={onInternalEvent} {...props} />;\n}\n"]}

package/dist/chunk-XEZF7G64.js

@@ -0,0 +1,212 @@
+import {
+  PoweredByCrossmint
+} from "./chunk-FKIMKZ4Y.js";
+import {
+  classNames
+} from "./chunk-RZPQIRIY.js";
+import {
+  PasskeyIcon
+} from "./chunk-IQPA3QOV.js";
+import {
+  PasskeyPromptLogo
+} from "./chunk-CPYPI45H.js";
+import {
+  FingerprintIcon
+} from "./chunk-H4F7UVPT.js";
+
+// src/components/auth/PasskeyPrompt.tsx
+import { Button, Dialog, Transition } from "@headlessui/react";
+import { Fragment } from "react";
+import { Fragment as Fragment2, jsx, jsxs } from "react/jsx-runtime";
+function PasskeyPromptCore({ title, content, primaryButton, secondaryAction, appearance }) {
+  var _a, _b, _c, _d, _e;
+  return /* @__PURE__ */ jsxs(
+    Dialog,
+    {
+      open: true,
+      onClose: () => {
+      },
+      className: classNames("fixed inset-0 z-20 flex items-center justify-center overflow-y-auto"),
+      children: [
+        /* @__PURE__ */ jsx(
+          Transition.Child,
+          {
+            as: Fragment,
+            enter: "ease-out duration-400",
+            enterFrom: "opacity-0",
+            enterTo: "opacity-100",
+            leave: "ease-in duration-400",
+            leaveFrom: "opacity-100",
+            leaveTo: "opacity-0",
+            children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: classNames(
+                  "fixed inset-0 bg-[rgba(139,151,151,0.2)] backdrop-blur-[2px] transition-opacity duration-300 ease-in-out -z-10"
+                )
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
+              width: "100%",
+              maxWidth: "28rem",
+              borderRadius: "1rem",
+              boxShadow: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
+              zIndex: 30,
+              border: "1px solid",
+              backgroundColor: ((_a = appearance == null ? void 0 : appearance.colors) == null ? void 0 : _a.background) || "white",
+              borderColor: ((_b = appearance == null ? void 0 : appearance.colors) == null ? void 0 : _b.border) || "#D0D5DD"
+            },
+            onClick: (e) => e.stopPropagation(),
+            children: /* @__PURE__ */ jsxs("div", { className: "pt-12 pb-10 px-8", children: [
+              /* @__PURE__ */ jsx("div", { className: "flex justify-center left-1.5 relative", children: /* @__PURE__ */ jsx(PasskeyPromptLogo, { appearance }) }),
+              /* @__PURE__ */ jsx("div", { className: "flex justify-center", children: /* @__PURE__ */ jsx(
+                "p",
+                {
+                  style: {
+                    fontSize: "1.125rem",
+                    lineHeight: "1.75rem",
+                    fontWeight: "bold",
+                    color: ((_c = appearance == null ? void 0 : appearance.colors) == null ? void 0 : _c.textPrimary) || "#20343E"
+                  },
+                  children: title
+                }
+              ) }),
+              /* @__PURE__ */ jsx("div", { className: "mt-4 mb-9", children: /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    fontWeight: "normal",
+                    color: ((_d = appearance == null ? void 0 : appearance.colors) == null ? void 0 : _d.textSecondary) || "#67797F"
+                  },
+                  children: content
+                }
+              ) }),
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-4 justify-center", children: [
+                primaryButton,
+                secondaryAction
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: "flex justify-center pt-4", children: /* @__PURE__ */ jsx(PoweredByCrossmint, { color: (_e = appearance == null ? void 0 : appearance.colors) == null ? void 0 : _e.textSecondary }) })
+            ] })
+          }
+        )
+      ]
+    }
+  );
+}
+function PasskeyPrompt({ state, appearance }) {
+  var _a, _b;
+  switch (state.type) {
+    case "create-wallet":
+      return /* @__PURE__ */ jsx(
+        PasskeyPromptCore,
+        {
+          title: "Create Your Wallet",
+          appearance,
+          content: /* @__PURE__ */ jsxs(Fragment2, { children: [
+            /* @__PURE__ */ jsx("div", { className: "mb-4", children: "You're about to create a wallet." }),
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+                /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(PasskeyIcon, {}) }),
+                "Your wallet will be secured with a passkey"
+              ] }),
+              /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+                /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(FingerprintIcon, {}) }),
+                "Your device will ask you for your fingerprint, face, or screen lock to set it up"
+              ] })
+            ] })
+          ] }),
+          primaryButton: /* @__PURE__ */ jsx(Button, { style: primaryButtonStyles(appearance), onClick: state.primaryActionOnClick, children: "Create Wallet" })
+        }
+      );
+    case "create-wallet-error":
+      return /* @__PURE__ */ jsx(
+        PasskeyPromptCore,
+        {
+          title: "Wallet Creation Failed",
+          appearance,
+          content: /* @__PURE__ */ jsx("div", { className: "mb-6", children: "We couldn't create your wallet. This could be due to rejecting the request, a timeout, or not having access to your passkey on this device." }),
+          primaryButton: /* @__PURE__ */ jsx(Button, { style: primaryButtonStyles(appearance), onClick: state.primaryActionOnClick, children: "Try again" })
+        }
+      );
+    case "transaction":
+      return /* @__PURE__ */ jsx(
+        PasskeyPromptCore,
+        {
+          title: "First Time Using Your Wallet",
+          appearance,
+          content: /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-2", children: /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+            /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(FingerprintIcon, {}) }),
+            /* @__PURE__ */ jsx("span", { children: "Your device will ask you for your fingerprint, face, or screen lock to authorize this action." })
+          ] }) }),
+          primaryButton: /* @__PURE__ */ jsx(Button, { style: primaryButtonStyles(appearance), onClick: state.primaryActionOnClick, children: "Use Wallet" })
+        }
+      );
+    case "transaction-error":
+      return /* @__PURE__ */ jsx(
+        PasskeyPromptCore,
+        {
+          title: "Wallet Access Failed",
+          appearance,
+          content: /* @__PURE__ */ jsx("div", { className: "mb-6", children: "We couldn't access your wallet. This could be due to rejecting the request, a timeout, or not having access to your passkey on this device." }),
+          primaryButton: /* @__PURE__ */ jsx(Button, { style: primaryButtonStyles(appearance), onClick: state.primaryActionOnClick, children: "Try again" }),
+          secondaryAction: /* @__PURE__ */ jsx(
+            "a",
+            {
+              href: "https://docs.crossmint.com/wallets/smart-wallets/users/troubleshoot",
+              rel: "noopener noreferrer",
+              target: "_blank",
+              style: {
+                padding: "0.875rem",
+                width: "100%",
+                textAlign: "center",
+                textDecoration: "none",
+                borderRadius: "0.5rem",
+                fontWeight: "bold",
+                backgroundColor: ((_a = appearance == null ? void 0 : appearance.colors) == null ? void 0 : _a.inputBackground) || "#F0F2F4",
+                color: ((_b = appearance == null ? void 0 : appearance.colors) == null ? void 0 : _b.textSecondary) || "#00150D"
+              },
+              children: "Troubleshoot"
+            }
+          )
+        }
+      );
+    case "not-supported":
+      return /* @__PURE__ */ jsx(
+        PasskeyPromptCore,
+        {
+          title: "Passkeys Not Supported on This Device",
+          appearance,
+          content: /* @__PURE__ */ jsx("div", { className: "mb-6", children: "To access your wallet with a passkey, switch to a device or browser that supports passkeys, such as Chrome or Safari on a smartphone, tablet, or modern computer" }),
+          primaryButton: /* @__PURE__ */ jsx(Button, { style: primaryButtonStyles(appearance), onClick: state.primaryActionOnClick, children: "Understood" })
+        }
+      );
+    default:
+      return null;
+  }
+}
+var primaryButtonStyles = (appearance) => {
+  var _a, _b, _c, _d, _e, _f, _g;
+  return {
+    padding: "0.875rem",
+    width: "100%",
+    backgroundColor: (_b = (_a = appearance == null ? void 0 : appearance.colors) == null ? void 0 : _a.buttonBackground) != null ? _b : "#04AA6D",
+    color: (_d = (_c = appearance == null ? void 0 : appearance.colors) == null ? void 0 : _c.textPrimary) != null ? _d : "white",
+    borderRadius: (_e = appearance == null ? void 0 : appearance.borderRadius) != null ? _e : "8px",
+    borderColor: (_g = (_f = appearance == null ? void 0 : appearance.colors) == null ? void 0 : _f.border) != null ? _g : "#04AA6D",
+    borderWidth: "1px",
+    fontWeight: "bold"
+  };
+};
+
+export {
+  PasskeyPrompt
+};
+//# sourceMappingURL=chunk-XEZF7G64.js.map

package/dist/chunk-XEZF7G64.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/auth/PasskeyPrompt.tsx"],"sourcesContent":["import { Button, Dialog, Transition } from \"@headlessui/react\";\nimport { type CSSProperties, Fragment, type ReactNode } from \"react\";\nimport type { UIConfig } from \"@crossmint/common-sdk-base\";\n\nimport FingerprintIcon from \"../../icons/fingerprint\";\nimport PasskeyIcon from \"../../icons/passkey\";\nimport PasskeyPromptLogo from \"../../icons/passkeyPromptLogo\";\nimport { PoweredByCrossmint } from \"../common/PoweredByCrossmint\";\nimport { classNames } from \"@/utils/classNames\";\n\ntype PasskeyPromptCoreProps = {\n    title: string;\n    content: ReactNode;\n    primaryButton: ReactNode;\n    secondaryAction?: ReactNode;\n    appearance?: UIConfig;\n};\nfunction PasskeyPromptCore({ title, content, primaryButton, secondaryAction, appearance }: PasskeyPromptCoreProps) {\n    return (\n        <Dialog\n            open\n            onClose={() => {}}\n            className={classNames(\"fixed inset-0 z-20 flex items-center justify-center overflow-y-auto\")}\n        >\n            {/* This is a hacky workaround to have the foreground transparent styles to work. */}\n            <Transition.Child\n                as={Fragment}\n                enter=\"ease-out duration-400\"\n                enterFrom=\"opacity-0\"\n                enterTo=\"opacity-100\"\n                leave=\"ease-in duration-400\"\n                leaveFrom=\"opacity-100\"\n                leaveTo=\"opacity-0\"\n            >\n                <div\n                    className={classNames(\n                        \"fixed inset-0 bg-[rgba(139,151,151,0.2)] backdrop-blur-[2px] transition-opacity duration-300 ease-in-out -z-10\"\n                    )}\n                />\n            </Transition.Child>\n            <div\n                style={{\n                    display: \"flex\",\n                    flexDirection: \"column\",\n                    alignItems: \"center\",\n                    width: \"100%\",\n                    maxWidth: \"28rem\",\n                    borderRadius: \"1rem\",\n                    boxShadow: \"0 1px 2px 0 rgba(0, 0, 0, 0.05)\",\n                    zIndex: 30,\n                    border: \"1px solid\",\n                    backgroundColor: appearance?.colors?.background || \"white\",\n                    borderColor: appearance?.colors?.border || \"#D0D5DD\",\n                }}\n                onClick={(e) => e.stopPropagation()}\n            >\n                <div className=\"pt-12 pb-10 px-8\">\n                    <div className=\"flex justify-center left-1.5 relative\">\n                        <PasskeyPromptLogo appearance={appearance} />\n                    </div>\n                    <div className=\"flex justify-center\">\n                        <p\n                            style={{\n                                fontSize: \"1.125rem\",\n                                lineHeight: \"1.75rem\",\n                                fontWeight: \"bold\",\n                                color: appearance?.colors?.textPrimary || \"#20343E\",\n                            }}\n                        >\n                            {title}\n                        </p>\n                    </div>\n                    <div className=\"mt-4 mb-9\">\n                        <div\n                            style={{\n                                fontWeight: \"normal\",\n                                color: appearance?.colors?.textSecondary || \"#67797F\",\n                            }}\n                        >\n                            {content}\n                        </div>\n                    </div>\n                    <div className=\"flex flex-col gap-4 justify-center\">\n                        {primaryButton}\n                        {secondaryAction}\n                    </div>\n                    <div className=\"flex justify-center pt-4\">\n                        <PoweredByCrossmint color={appearance?.colors?.textSecondary} />\n                    </div>\n                </div>\n            </div>\n        </Dialog>\n    );\n}\n\ntype PromptType = \"create-wallet\" | \"transaction\" | \"not-supported\" | \"create-wallet-error\" | \"transaction-error\";\n\ntype PasskeyPromptProps = {\n    state: {\n        type: PromptType;\n        primaryActionOnClick: () => void;\n        secondaryActionOnClick?: () => void;\n    };\n    appearance?: UIConfig;\n};\nexport function PasskeyPrompt({ state, appearance }: PasskeyPromptProps) {\n    // These components are currently assembled based on the mockups.\n    switch (state.type) {\n        case \"create-wallet\":\n            return (\n                <PasskeyPromptCore\n                    title=\"Create Your Wallet\"\n                    appearance={appearance}\n                    content={\n                        <>\n                            <div className=\"mb-4\">You're about to create a wallet.</div>\n                            <div className=\"flex flex-col gap-2\">\n                                <div className=\"flex gap-2\">\n                                    <div>\n                                        <PasskeyIcon />\n                                    </div>\n                                    Your wallet will be secured with a passkey\n                                </div>\n\n                                <div className=\"flex gap-2\">\n                                    <div>\n                                        <FingerprintIcon />\n                                    </div>\n                                    Your device will ask you for your fingerprint, face, or screen lock to set it up\n                                </div>\n                            </div>\n                        </>\n                    }\n                    primaryButton={\n                        <Button style={primaryButtonStyles(appearance)} onClick={state.primaryActionOnClick}>\n                            Create Wallet\n                        </Button>\n                    }\n                />\n            );\n\n        case \"create-wallet-error\":\n            return (\n                <PasskeyPromptCore\n                    title=\"Wallet Creation Failed\"\n                    appearance={appearance}\n                    content={\n                        <div className=\"mb-6\">\n                            We couldn't create your wallet. This could be due to rejecting the request, a timeout, or\n                            not having access to your passkey on this device.\n                        </div>\n                    }\n                    primaryButton={\n                        <Button style={primaryButtonStyles(appearance)} onClick={state.primaryActionOnClick}>\n                            Try again\n                        </Button>\n                    }\n                />\n            );\n\n        case \"transaction\":\n            return (\n                <PasskeyPromptCore\n                    title=\"First Time Using Your Wallet\"\n                    appearance={appearance}\n                    content={\n                        <div className=\"flex flex-col gap-2\">\n                            <div className=\"flex gap-2\">\n                                <div>\n                                    <FingerprintIcon />\n                                </div>\n                                <span>\n                                    Your device will ask you for your fingerprint, face, or screen lock to authorize\n                                    this action.\n                                </span>\n                            </div>\n                        </div>\n                    }\n                    primaryButton={\n                        <Button style={primaryButtonStyles(appearance)} onClick={state.primaryActionOnClick}>\n                            Use Wallet\n                        </Button>\n                    }\n                />\n            );\n\n        case \"transaction-error\":\n            return (\n                <PasskeyPromptCore\n                    title=\"Wallet Access Failed\"\n                    appearance={appearance}\n                    content={\n                        <div className=\"mb-6\">\n                            We couldn't access your wallet. This could be due to rejecting the request, a timeout, or\n                            not having access to your passkey on this device.\n                        </div>\n                    }\n                    primaryButton={\n                        <Button style={primaryButtonStyles(appearance)} onClick={state.primaryActionOnClick}>\n                            Try again\n                        </Button>\n                    }\n                    secondaryAction={\n                        <a\n                            href=\"https://docs.crossmint.com/wallets/smart-wallets/users/troubleshoot\"\n                            rel=\"noopener noreferrer\"\n                            target=\"_blank\"\n                            style={{\n                                padding: \"0.875rem\",\n                                width: \"100%\",\n                                textAlign: \"center\",\n                                textDecoration: \"none\",\n                                borderRadius: \"0.5rem\",\n                                fontWeight: \"bold\",\n                                backgroundColor: appearance?.colors?.inputBackground || \"#F0F2F4\",\n                                color: appearance?.colors?.textSecondary || \"#00150D\",\n                            }}\n                        >\n                            Troubleshoot\n                        </a>\n                    }\n                />\n            );\n\n        case \"not-supported\":\n            return (\n                <PasskeyPromptCore\n                    title=\"Passkeys Not Supported on This Device\"\n                    appearance={appearance}\n                    content={\n                        <div className=\"mb-6\">\n                            To access your wallet with a passkey, switch to a device or browser that supports passkeys,\n                            such as Chrome or Safari on a smartphone, tablet, or modern computer\n                        </div>\n                    }\n                    primaryButton={\n                        <Button style={primaryButtonStyles(appearance)} onClick={state.primaryActionOnClick}>\n                            Understood\n                        </Button>\n                    }\n                />\n            );\n\n        default:\n            return null;\n    }\n}\n\nconst primaryButtonStyles = (appearance?: UIConfig): CSSProperties => ({\n    padding: \"0.875rem\",\n    width: \"100%\",\n    backgroundColor: appearance?.colors?.buttonBackground ?? \"#04AA6D\",\n    color: appearance?.colors?.textPrimary ?? \"white\",\n    borderRadius: appearance?.borderRadius ?? \"8px\",\n    borderColor: appearance?.colors?.border ?? \"#04AA6D\",\n    borderWidth: \"1px\",\n    fontWeight: \"bold\",\n});\n"],"mappings":"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","names":["Fragment"]}