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

package/src/components/embed/v3/crypto/utils/handleEvmTransaction.ts

@@ -4,8 +4,15 @@ import {
     blockchainToChainId,
     type EVMBlockchainIncludingTestnet,
 } from "@crossmint/common-sdk-base";
-import type { EthereumWallet } from "@dynamic-labs/ethereum-core";
-import { parseTransaction, type TransactionSerializableEIP1559 } from "viem";
+import type { Wallet } from "@dynamic-labs/sdk-react-core";
+import {
+    type Chain,
+    type Account,
+    type WalletClient,
+    type TransactionSerializableEIP1559,
+    type Transport,
+    parseTransaction,
+} from "viem";
 
 export async function handleEvmTransaction({
     primaryWallet,
@@ -13,24 +20,30 @@ export async function handleEvmTransaction({
     serializedTransaction,
     iframeClient,
 }: {
-    primaryWallet: EthereumWallet;
+    primaryWallet: Wallet;
     chain: BlockchainIncludingTestnet;
     serializedTransaction: string;
     iframeClient: EmbeddedCheckoutV3IFrameEmitter;
 }) {
+    const { connector } = primaryWallet;
+    const chainId = blockchainToChainId(chain as EVMBlockchainIncludingTestnet);
+
     try {
-        await primaryWallet.switchNetwork(blockchainToChainId(chain as EVMBlockchainIncludingTestnet));
+        await connector.switchNetwork({ networkChainId: chainId });
     } catch (error) {
-        console.error("[CryptoWalletConnectionHandler] failed to switch network", error);
+        console.error(`[CryptoWalletConnectionHandler] failed to switch network to ${chainId}`, error);
         iframeClient.send("crypto:send-transaction:failed", {
             error: (error as Error).message,
         });
         return;
     }
 
-    let walletClient: Awaited<ReturnType<typeof primaryWallet.getWalletClient>>;
+    let walletClient: WalletClient<Transport, Chain, Account> | undefined;
     try {
-        walletClient = await primaryWallet.getWalletClient();
+        walletClient = connector.getWalletClient<WalletClient<Transport, Chain, Account> | undefined>(String(chainId));
+        if (!walletClient) {
+            throw new Error(`connector.getWalletClient(${chainId}) returned undefined`);
+        }
     } catch (error) {
         console.error("[CryptoWalletConnectionHandler] failed to get wallet client", error);
         iframeClient.send("crypto:send-transaction:failed", {

package/src/components/embed/v3/crypto/utils/handleSendTransaction.ts

@@ -1,7 +1,5 @@
 import type { Wallet } from "@dynamic-labs/sdk-react-core";
-
 import type { BlockchainIncludingTestnet } from "@crossmint/common-sdk-base";
-
 import type { EmbeddedCheckoutV3IFrameEmitter } from "@crossmint/client-sdk-base";
 
 export async function handleSendTransaction(
@@ -16,22 +14,16 @@ export async function handleSendTransaction(
         iframeClient,
     };
 
-    // @ts-expect-error - Error because we dont use 'module' field in tsconfig, which is expected because we use tsup to compile
-    const { isSolanaWallet } = await import("@dynamic-labs/solana");
-    if (isSolanaWallet(primaryWallet)) {
-        // @ts-expect-error - Error because we dont use 'module' field in tsconfig, which is expected because we use tsup to compile
-        const { handleSolanaTransaction } = await import("./handleSolanaTransaction");
-        return await handleSolanaTransaction({
-            ...commonParams,
-            primaryWallet,
-        });
-    }
-
-    // @ts-expect-error - Error because we dont use 'module' field in tsconfig, which is expected because we use tsup to compile
-    const { isEthereumWallet } = await import("@dynamic-labs/ethereum");
-    if (isEthereumWallet(primaryWallet)) {
-        // @ts-expect-error - Error because we dont use 'module' field in tsconfig, which is expected because we use tsup to compile
-        const { handleEvmTransaction } = await import("./handleEvmTransaction");
-        return await handleEvmTransaction({ ...commonParams, primaryWallet });
+    switch (primaryWallet.chain) {
+        case "EVM":
+            // @ts-expect-error - Error because we dont use 'module' field in tsconfig, which is expected because we use tsup to compile
+            const { handleEvmTransaction } = await import("./handleEvmTransaction");
+            return await handleEvmTransaction({ ...commonParams, primaryWallet });
+        case "SOL":
+            // @ts-expect-error - Error because we dont use 'module' field in tsconfig, which is expected because we use tsup to compile
+            const { handleSolanaTransaction } = await import("./handleSolanaTransaction");
+            return await handleSolanaTransaction({ ...commonParams, primaryWallet });
+        default:
+            throw new Error(`Connected wallet is on an unsupported chain: ${primaryWallet.chain}`);
     }
 }

package/src/components/embed/v3/crypto/utils/handleSolanaTransaction.ts

@@ -1,5 +1,6 @@
 import type { EmbeddedCheckoutV3IFrameEmitter } from "@crossmint/client-sdk-base";
-import type { SolanaWallet } from "@dynamic-labs/solana-core";
+import type { Wallet } from "@dynamic-labs/sdk-react-core";
+import type { ISolana } from "@dynamic-labs/solana";
 import { Transaction } from "@solana/web3.js";
 import base58 from "bs58";
 
@@ -8,15 +9,17 @@ export async function handleSolanaTransaction({
     serializedTransaction,
     iframeClient,
 }: {
-    primaryWallet: SolanaWallet;
+    primaryWallet: Wallet;
     serializedTransaction: string;
     iframeClient: EmbeddedCheckoutV3IFrameEmitter;
 }) {
     // TODO: Handle switch network
 
-    let signer: Awaited<ReturnType<typeof primaryWallet.getSigner>>;
+    const { connector } = primaryWallet;
+
+    let signer: ISolana;
     try {
-        signer = await primaryWallet.getSigner();
+        signer = await connector.getSigner<ISolana>();
     } catch (error) {
         console.error("[CryptoWalletConnectionHandler] failed to get signer", error);
         iframeClient.send("crypto:send-transaction:failed", {

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

@@ -1 +0,0 @@
-{"version":3,"sources":["../package.json","../src/consts/version.ts"],"sourcesContent":["{\n    \"name\": \"@crossmint/client-sdk-react-ui\",\n    \"version\": \"1.10.1\",\n    \"repository\": \"https://github.com/Crossmint/crossmint-sdk\",\n    \"license\": \"Apache-2.0\",\n    \"author\": \"Paella Labs Inc\",\n    \"sideEffects\": false,\n    \"type\": \"module\",\n    \"exports\": {\n        \"import\": \"./dist/index.js\",\n        \"require\": \"./dist/index.cjs\"\n    },\n    \"main\": \"./dist/index.cjs\",\n    \"module\": \"./dist/index.js\",\n    \"types\": \"./dist/index.d.ts\",\n    \"files\": [\"dist\", \"src\", \"LICENSE\"],\n    \"scripts\": {\n        \"build\": \"cross-env NODE_OPTIONS='--max-old-space-size=8192' tsup\",\n        \"dev\": \"cross-env NODE_OPTIONS='--max-old-space-size=8192' tsup --watch\",\n        \"test:vitest\": \"vitest run\"\n    },\n    \"dependencies\": {\n        \"@crossmint/client-sdk-auth\": \"workspace:*\",\n        \"@crossmint/client-sdk-base\": \"workspace:*\",\n        \"@crossmint/client-sdk-smart-wallet\": \"workspace:*\",\n        \"@crossmint/client-sdk-window\": \"workspace:*\",\n        \"@crossmint/common-sdk-auth\": \"workspace:*\",\n        \"@crossmint/common-sdk-base\": \"workspace:*\",\n        \"@dynamic-labs/ethereum\": \"3.4.4\",\n        \"@dynamic-labs/ethereum-core\": \"3.4.4\",\n        \"@dynamic-labs/sdk-react-core\": \"3.4.4\",\n        \"@dynamic-labs/solana\": \"3.4.4\",\n        \"@dynamic-labs/solana-core\": \"3.4.4\",\n        \"@ethersproject/transactions\": \"5.7.0\",\n        \"@farcaster/auth-kit\": \"0.6.0\",\n        \"@headlessui/react\": \"2.1.5\",\n        \"@radix-ui/react-dialog\": \"1.1.2\",\n        \"@radix-ui/react-visually-hidden\": \"1.1.0\",\n        \"@solana/web3.js\": \"1.95.1\",\n        \"@tanstack/react-query\": \"5.51.18\",\n        \"@twind/core\": \"1.1.3\",\n        \"@twind/preset-tailwind\": \"1.1.4\",\n        \"@wagmi/connectors\": \"5.3.3\",\n        \"bs58\": \"5.0.0\",\n        \"clsx\": \"2.1.1\",\n        \"color\": \"4.2.3\",\n        \"input-otp\": \"1.2.4\",\n        \"lodash.isequal\": \"4.5.0\",\n        \"react-jss\": \"10.10.0\",\n        \"tailwind-merge\": \"2.4.0\",\n        \"tailwindcss\": \"3.4.10\",\n        \"viem\": \"2.17.5\",\n        \"wagmi\": \"2.12.25\",\n        \"zod\": \"3.22.4\"\n    },\n    \"devDependencies\": {\n        \"@testing-library/react\": \"^16.0.1\",\n        \"@types/color\": \"4.2.0\",\n        \"@types/lodash.isequal\": \"4.5.6\",\n        \"@types/react\": \"^18.3.0\",\n        \"@types/react-dom\": \"^18.3.0\",\n        \"react\": \"^18.3.0\",\n        \"react-dom\": \"^18.3.0\"\n    },\n    \"peerDependencies\": {\n        \"react\": \">=17.0.2\",\n        \"react-dom\": \">=17.0.2\"\n    }\n}\n","import { version } from \"../../package.json\";\n\nexport const LIB_VERSION = version;\n"],"mappings":";AAEI,cAAW;;;ACAR,IAAM,cAAc;","names":[]}

package/dist/chunk-GGE3H4XP.cjs

@@ -1,33 +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 _chunk4DAZAO6Ycjs = require('./chunk-4DAZAO6Y.cjs');
-
-// src/components/embed/v3/crypto/utils/handleSendTransaction.ts
-function handleSendTransaction(primaryWallet, chain, serializedTransaction, iframeClient) {
-  return _chunk4DAZAO6Ycjs.__async.call(void 0, this, null, function* () {
-    const commonParams = {
-      chain,
-      serializedTransaction,
-      iframeClient
-    };
-    const { isSolanaWallet } = yield Promise.resolve().then(() => _interopRequireWildcard(require("@dynamic-labs/solana")));
-    if (isSolanaWallet(primaryWallet)) {
-      const { handleSolanaTransaction } = yield Promise.resolve().then(() => _interopRequireWildcard(require("./components/embed/v3/crypto/utils/handleSolanaTransaction.cjs")));
-      return yield handleSolanaTransaction(_chunk4DAZAO6Ycjs.__spreadProps.call(void 0, _chunk4DAZAO6Ycjs.__spreadValues.call(void 0, {}, commonParams), {
-        primaryWallet
-      }));
-    }
-    const { isEthereumWallet } = yield Promise.resolve().then(() => _interopRequireWildcard(require("@dynamic-labs/ethereum")));
-    if (isEthereumWallet(primaryWallet)) {
-      const { handleEvmTransaction } = yield Promise.resolve().then(() => _interopRequireWildcard(require("./components/embed/v3/crypto/utils/handleEvmTransaction.cjs")));
-      return yield handleEvmTransaction(_chunk4DAZAO6Ycjs.__spreadProps.call(void 0, _chunk4DAZAO6Ycjs.__spreadValues.call(void 0, {}, commonParams), { primaryWallet }));
-    }
-  });
-}
-
-
-
-exports.handleSendTransaction = handleSendTransaction;
-//# sourceMappingURL=chunk-GGE3H4XP.cjs.map

package/dist/chunk-GGE3H4XP.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/embed/v3/crypto/utils/handleSendTransaction.ts"],"names":[],"mappings":";;;;;;;AAMA,SAAsB,sBAClB,eACA,OACA,uBACA,cACF;AAAA;AACE,UAAM,eAAe;AAAA,MACjB;AAAA,MACA;AAAA,MACA;AAAA,IACJ;AAGA,UAAM,EAAE,eAAe,IAAI,MAAM,OAAO,sBAAsB;AAC9D,QAAI,eAAe,aAAa,GAAG;AAE/B,YAAM,EAAE,wBAAwB,IAAI,MAAM,OAAO,gEAA2B;AAC5E,aAAO,MAAM,wBAAwB,iCAC9B,eAD8B;AAAA,QAEjC;AAAA,MACJ,EAAC;AAAA,IACL;AAGA,UAAM,EAAE,iBAAiB,IAAI,MAAM,OAAO,wBAAwB;AAClE,QAAI,iBAAiB,aAAa,GAAG;AAEjC,YAAM,EAAE,qBAAqB,IAAI,MAAM,OAAO,6DAAwB;AACtE,aAAO,MAAM,qBAAqB,iCAAK,eAAL,EAAmB,cAAc,EAAC;AAAA,IACxE;AAAA,EACJ;AAAA","sourcesContent":["import type { Wallet } from \"@dynamic-labs/sdk-react-core\";\n\nimport type { BlockchainIncludingTestnet } from \"@crossmint/common-sdk-base\";\n\nimport type { EmbeddedCheckoutV3IFrameEmitter } from \"@crossmint/client-sdk-base\";\n\nexport async function handleSendTransaction(\n    primaryWallet: Wallet,\n    chain: BlockchainIncludingTestnet,\n    serializedTransaction: string,\n    iframeClient: EmbeddedCheckoutV3IFrameEmitter\n) {\n    const commonParams = {\n        chain,\n        serializedTransaction,\n        iframeClient,\n    };\n\n    // @ts-expect-error - Error because we dont use 'module' field in tsconfig, which is expected because we use tsup to compile\n    const { isSolanaWallet } = await import(\"@dynamic-labs/solana\");\n    if (isSolanaWallet(primaryWallet)) {\n        // @ts-expect-error - Error because we dont use 'module' field in tsconfig, which is expected because we use tsup to compile\n        const { handleSolanaTransaction } = await import(\"./handleSolanaTransaction\");\n        return await handleSolanaTransaction({\n            ...commonParams,\n            primaryWallet,\n        });\n    }\n\n    // @ts-expect-error - Error because we dont use 'module' field in tsconfig, which is expected because we use tsup to compile\n    const { isEthereumWallet } = await import(\"@dynamic-labs/ethereum\");\n    if (isEthereumWallet(primaryWallet)) {\n        // @ts-expect-error - Error because we dont use 'module' field in tsconfig, which is expected because we use tsup to compile\n        const { handleEvmTransaction } = await import(\"./handleEvmTransaction\");\n        return await handleEvmTransaction({ ...commonParams, primaryWallet });\n    }\n}\n"]}

package/dist/chunk-HENBZUED.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../package.json","../src/consts/version.ts"],"names":[],"mappings":";AAEI,cAAW;;;ACAR,IAAM,cAAc","sourcesContent":["{\n    \"name\": \"@crossmint/client-sdk-react-ui\",\n    \"version\": \"1.10.1\",\n    \"repository\": \"https://github.com/Crossmint/crossmint-sdk\",\n    \"license\": \"Apache-2.0\",\n    \"author\": \"Paella Labs Inc\",\n    \"sideEffects\": false,\n    \"type\": \"module\",\n    \"exports\": {\n        \"import\": \"./dist/index.js\",\n        \"require\": \"./dist/index.cjs\"\n    },\n    \"main\": \"./dist/index.cjs\",\n    \"module\": \"./dist/index.js\",\n    \"types\": \"./dist/index.d.ts\",\n    \"files\": [\"dist\", \"src\", \"LICENSE\"],\n    \"scripts\": {\n        \"build\": \"cross-env NODE_OPTIONS='--max-old-space-size=8192' tsup\",\n        \"dev\": \"cross-env NODE_OPTIONS='--max-old-space-size=8192' tsup --watch\",\n        \"test:vitest\": \"vitest run\"\n    },\n    \"dependencies\": {\n        \"@crossmint/client-sdk-auth\": \"workspace:*\",\n        \"@crossmint/client-sdk-base\": \"workspace:*\",\n        \"@crossmint/client-sdk-smart-wallet\": \"workspace:*\",\n        \"@crossmint/client-sdk-window\": \"workspace:*\",\n        \"@crossmint/common-sdk-auth\": \"workspace:*\",\n        \"@crossmint/common-sdk-base\": \"workspace:*\",\n        \"@dynamic-labs/ethereum\": \"3.4.4\",\n        \"@dynamic-labs/ethereum-core\": \"3.4.4\",\n        \"@dynamic-labs/sdk-react-core\": \"3.4.4\",\n        \"@dynamic-labs/solana\": \"3.4.4\",\n        \"@dynamic-labs/solana-core\": \"3.4.4\",\n        \"@ethersproject/transactions\": \"5.7.0\",\n        \"@farcaster/auth-kit\": \"0.6.0\",\n        \"@headlessui/react\": \"2.1.5\",\n        \"@radix-ui/react-dialog\": \"1.1.2\",\n        \"@radix-ui/react-visually-hidden\": \"1.1.0\",\n        \"@solana/web3.js\": \"1.95.1\",\n        \"@tanstack/react-query\": \"5.51.18\",\n        \"@twind/core\": \"1.1.3\",\n        \"@twind/preset-tailwind\": \"1.1.4\",\n        \"@wagmi/connectors\": \"5.3.3\",\n        \"bs58\": \"5.0.0\",\n        \"clsx\": \"2.1.1\",\n        \"color\": \"4.2.3\",\n        \"input-otp\": \"1.2.4\",\n        \"lodash.isequal\": \"4.5.0\",\n        \"react-jss\": \"10.10.0\",\n        \"tailwind-merge\": \"2.4.0\",\n        \"tailwindcss\": \"3.4.10\",\n        \"viem\": \"2.17.5\",\n        \"wagmi\": \"2.12.25\",\n        \"zod\": \"3.22.4\"\n    },\n    \"devDependencies\": {\n        \"@testing-library/react\": \"^16.0.1\",\n        \"@types/color\": \"4.2.0\",\n        \"@types/lodash.isequal\": \"4.5.6\",\n        \"@types/react\": \"^18.3.0\",\n        \"@types/react-dom\": \"^18.3.0\",\n        \"react\": \"^18.3.0\",\n        \"react-dom\": \"^18.3.0\"\n    },\n    \"peerDependencies\": {\n        \"react\": \">=17.0.2\",\n        \"react-dom\": \">=17.0.2\"\n    }\n}\n","import { version } from \"../../package.json\";\n\nexport const LIB_VERSION = version;\n"]}

package/dist/chunk-HYGCZCR2.js

@@ -1,33 +0,0 @@
-import {
-  __async,
-  __spreadProps,
-  __spreadValues
-} from "./chunk-CRTRMMJ7.js";
-
-// src/components/embed/v3/crypto/utils/handleSendTransaction.ts
-function handleSendTransaction(primaryWallet, chain, serializedTransaction, iframeClient) {
-  return __async(this, null, function* () {
-    const commonParams = {
-      chain,
-      serializedTransaction,
-      iframeClient
-    };
-    const { isSolanaWallet } = yield import("@dynamic-labs/solana");
-    if (isSolanaWallet(primaryWallet)) {
-      const { handleSolanaTransaction } = yield import("./components/embed/v3/crypto/utils/handleSolanaTransaction.js");
-      return yield handleSolanaTransaction(__spreadProps(__spreadValues({}, commonParams), {
-        primaryWallet
-      }));
-    }
-    const { isEthereumWallet } = yield import("@dynamic-labs/ethereum");
-    if (isEthereumWallet(primaryWallet)) {
-      const { handleEvmTransaction } = yield import("./components/embed/v3/crypto/utils/handleEvmTransaction.js");
-      return yield handleEvmTransaction(__spreadProps(__spreadValues({}, commonParams), { primaryWallet }));
-    }
-  });
-}
-
-export {
-  handleSendTransaction
-};
-//# sourceMappingURL=chunk-HYGCZCR2.js.map

package/dist/chunk-HYGCZCR2.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/embed/v3/crypto/utils/handleSendTransaction.ts"],"sourcesContent":["import type { Wallet } from \"@dynamic-labs/sdk-react-core\";\n\nimport type { BlockchainIncludingTestnet } from \"@crossmint/common-sdk-base\";\n\nimport type { EmbeddedCheckoutV3IFrameEmitter } from \"@crossmint/client-sdk-base\";\n\nexport async function handleSendTransaction(\n    primaryWallet: Wallet,\n    chain: BlockchainIncludingTestnet,\n    serializedTransaction: string,\n    iframeClient: EmbeddedCheckoutV3IFrameEmitter\n) {\n    const commonParams = {\n        chain,\n        serializedTransaction,\n        iframeClient,\n    };\n\n    // @ts-expect-error - Error because we dont use 'module' field in tsconfig, which is expected because we use tsup to compile\n    const { isSolanaWallet } = await import(\"@dynamic-labs/solana\");\n    if (isSolanaWallet(primaryWallet)) {\n        // @ts-expect-error - Error because we dont use 'module' field in tsconfig, which is expected because we use tsup to compile\n        const { handleSolanaTransaction } = await import(\"./handleSolanaTransaction\");\n        return await handleSolanaTransaction({\n            ...commonParams,\n            primaryWallet,\n        });\n    }\n\n    // @ts-expect-error - Error because we dont use 'module' field in tsconfig, which is expected because we use tsup to compile\n    const { isEthereumWallet } = await import(\"@dynamic-labs/ethereum\");\n    if (isEthereumWallet(primaryWallet)) {\n        // @ts-expect-error - Error because we dont use 'module' field in tsconfig, which is expected because we use tsup to compile\n        const { handleEvmTransaction } = await import(\"./handleEvmTransaction\");\n        return await handleEvmTransaction({ ...commonParams, primaryWallet });\n    }\n}\n"],"mappings":";;;;;;;AAMA,SAAsB,sBAClB,eACA,OACA,uBACA,cACF;AAAA;AACE,UAAM,eAAe;AAAA,MACjB;AAAA,MACA;AAAA,MACA;AAAA,IACJ;AAGA,UAAM,EAAE,eAAe,IAAI,MAAM,OAAO,sBAAsB;AAC9D,QAAI,eAAe,aAAa,GAAG;AAE/B,YAAM,EAAE,wBAAwB,IAAI,MAAM,OAAO,+DAA2B;AAC5E,aAAO,MAAM,wBAAwB,iCAC9B,eAD8B;AAAA,QAEjC;AAAA,MACJ,EAAC;AAAA,IACL;AAGA,UAAM,EAAE,iBAAiB,IAAI,MAAM,OAAO,wBAAwB;AAClE,QAAI,iBAAiB,aAAa,GAAG;AAEjC,YAAM,EAAE,qBAAqB,IAAI,MAAM,OAAO,4DAAwB;AACtE,aAAO,MAAM,qBAAqB,iCAAK,eAAL,EAAmB,cAAc,EAAC;AAAA,IACxE;AAAA,EACJ;AAAA;","names":[]}

package/dist/chunk-SVI3L5G5.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,KACR;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        </>\n    );\n}\n"]}