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

package/dist/providers/auth/AuthFormProvider.cjs

@@ -26,11 +26,11 @@ require('../../chunk-URKPLEPV.cjs');
 require('../../chunk-HPOZ6I54.cjs');
 require('../../chunk-YE55IKBP.cjs');
 require('../../chunk-ENCR5SUW.cjs');
-require('../../chunk-67AB7TWG.cjs');
-require('../../chunk-COLJFFZF.cjs');
+require('../../chunk-GBW67Z6V.cjs');
+require('../../chunk-NGWVWCWP.cjs');
 require('../../chunk-KEKBOJCF.cjs');
 require('../../chunk-A2JCJ2OV.cjs');
-require('../../chunk-RTC2AZ6A.cjs');
+require('../../chunk-2EYYCX3O.cjs');
 require('../../chunk-4DAZAO6Y.cjs');
 
 

package/dist/providers/auth/AuthFormProvider.js

@@ -26,11 +26,11 @@ import "../../chunk-I63FQCIV.js";
 import "../../chunk-ZIHCLVCD.js";
 import "../../chunk-H4F7UVPT.js";
 import "../../chunk-YWVQCHQF.js";
-import "../../chunk-6TUZ5CU7.js";
-import "../../chunk-GN7OANUR.js";
+import "../../chunk-WBKHUVJU.js";
+import "../../chunk-R2H6H2HY.js";
 import "../../chunk-3J6CUUWT.js";
 import "../../chunk-AUEQQ4D3.js";
-import "../../chunk-MWRMO6JC.js";
+import "../../chunk-O4DWHB3U.js";
 import "../../chunk-CRTRMMJ7.js";
 export {
   AuthFormProvider,

package/dist/providers/index.cjs

@@ -28,11 +28,11 @@ require('../chunk-URKPLEPV.cjs');
 require('../chunk-HPOZ6I54.cjs');
 require('../chunk-YE55IKBP.cjs');
 require('../chunk-ENCR5SUW.cjs');
-require('../chunk-67AB7TWG.cjs');
-require('../chunk-COLJFFZF.cjs');
+require('../chunk-GBW67Z6V.cjs');
+require('../chunk-NGWVWCWP.cjs');
 require('../chunk-KEKBOJCF.cjs');
 require('../chunk-A2JCJ2OV.cjs');
-require('../chunk-RTC2AZ6A.cjs');
+require('../chunk-2EYYCX3O.cjs');
 require('../chunk-4DAZAO6Y.cjs');
 
 

package/dist/providers/index.js

@@ -28,11 +28,11 @@ import "../chunk-I63FQCIV.js";
 import "../chunk-ZIHCLVCD.js";
 import "../chunk-H4F7UVPT.js";
 import "../chunk-YWVQCHQF.js";
-import "../chunk-6TUZ5CU7.js";
-import "../chunk-GN7OANUR.js";
+import "../chunk-WBKHUVJU.js";
+import "../chunk-R2H6H2HY.js";
 import "../chunk-3J6CUUWT.js";
 import "../chunk-AUEQQ4D3.js";
-import "../chunk-MWRMO6JC.js";
+import "../chunk-O4DWHB3U.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 _chunkCOLJFFZFcjs = require('../chunk-COLJFFZF.cjs');
-require('../chunk-RTC2AZ6A.cjs');
+var _chunkNGWVWCWPcjs = require('../chunk-NGWVWCWP.cjs');
+require('../chunk-2EYYCX3O.cjs');
 require('../chunk-4DAZAO6Y.cjs');
 
 
-exports.createCrossmintApiClient = _chunkCOLJFFZFcjs.createCrossmintApiClient;
+exports.createCrossmintApiClient = _chunkNGWVWCWPcjs.createCrossmintApiClient;
 //# sourceMappingURL=createCrossmintApiClient.cjs.map

package/dist/utils/createCrossmintApiClient.js

@@ -1,7 +1,7 @@
 import {
   createCrossmintApiClient
-} from "../chunk-GN7OANUR.js";
-import "../chunk-MWRMO6JC.js";
+} from "../chunk-R2H6H2HY.js";
+import "../chunk-O4DWHB3U.js";
 import "../chunk-CRTRMMJ7.js";
 export {
   createCrossmintApiClient

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crossmint/client-sdk-react-ui",
-  "version": "1.10.2",
+  "version": "1.10.3",
   "repository": "https://github.com/Crossmint/crossmint-sdk",
   "license": "Apache-2.0",
   "author": "Paella Labs Inc",
@@ -45,8 +45,8 @@
     "zod": "3.22.4",
     "@crossmint/client-sdk-auth": "1.0.0",
     "@crossmint/client-sdk-base": "1.3.2",
-    "@crossmint/client-sdk-smart-wallet": "0.1.22",
     "@crossmint/client-sdk-window": "0.1.0",
+    "@crossmint/client-sdk-smart-wallet": "0.1.22",
     "@crossmint/common-sdk-auth": "1.0.0",
     "@crossmint/common-sdk-base": "0.3.0"
   },

package/src/components/embed/v3/EmbeddedCheckoutV3IFrame.tsx

@@ -77,6 +77,7 @@ export function EmbeddedCheckoutV3IFrame(props: CrossmintEmbeddedCheckoutV3Props
                     apiKeyEnvironment={apiClient["parsedAPIKey"].environment}
                 />
             ) : null}
+            <span id="crossmint-focus-target" tabIndex={-1} />
         </>
     );
 }

package/src/components/embed/v3/crypto/CryptoWalletConnectionHandler.tsx

@@ -6,9 +6,9 @@ import {
     chainIdToBlockchain,
 } from "@crossmint/common-sdk-base";
 import { EthereumWalletConnectors } from "@dynamic-labs/ethereum";
-import { type HandleConnectedWallet, useDynamicContext } from "@dynamic-labs/sdk-react-core";
+import { DynamicContext, useDynamicContext, type HandleConnectedWallet } from "@dynamic-labs/sdk-react-core";
 import { SolanaWalletConnectors } from "@dynamic-labs/solana";
-import { useEffect } from "react";
+import { type Dispatch, type SetStateAction, useContext, useEffect, useState } from "react";
 import { handleSendTransaction } from "./utils/handleSendTransaction";
 
 export function CryptoWalletConnectionHandler(props: {
@@ -71,21 +71,21 @@ export function CryptoWalletConnectionHandler(props: {
 }
 
 function _CryptoWalletConnectionHandler({ iframeClient }: Parameters<typeof CryptoWalletConnectionHandler>[0]) {
-    const { setShowAuthFlow, primaryWallet, handleLogOut } = useDynamicContext();
+    const [showDynamicModal, setShowDynamicModal] = useState(false);
+    const { primaryWallet } = useDynamicContext();
 
     useEffect(() => {
         if (iframeClient == null) {
             return;
         }
-        const showAuthFlowListener = iframeClient.on("crypto:connect-wallet.show", async ({ show }) => {
-            await handleLogOut();
-            setShowAuthFlow(show);
+        const showAuthFlowListener = iframeClient.on("crypto:connect-wallet.show", ({ show }) => {
+            setShowDynamicModal(show);
         });
 
         return () => {
             iframeClient.off(showAuthFlowListener);
         };
-    }, [iframeClient, handleLogOut, setShowAuthFlow]);
+    }, [iframeClient]);
 
     useEffect(() => {
         if (iframeClient == null) {
@@ -116,7 +116,7 @@ function _CryptoWalletConnectionHandler({ iframeClient }: Parameters<typeof Cryp
         };
     }, [iframeClient, primaryWallet]);
 
-    return null;
+    return showDynamicModal ? <ShowDynamicModal setShowDynamicModal={setShowDynamicModal} /> : null;
 }
 
 async function dynamicChainToCrossmintChain(
@@ -136,3 +136,30 @@ async function dynamicChainToCrossmintChain(
     }
     return chainFromChainId as BlockchainIncludingTestnet;
 }
+
+export function ShowDynamicModal({ setShowDynamicModal }: { setShowDynamicModal: Dispatch<SetStateAction<boolean>> }) {
+    const context = useContext(DynamicContext);
+    if (context == null) {
+        throw new Error("DynamicContext is missing");
+    }
+    const { setShowAuthFlow, handleLogOut } = context;
+
+    useEffect(() => {
+        // Move focus from the iframe to the main page, otherwise the modal will require a double click to interact with it
+        document.getElementById("crossmint-focus-target")?.focus();
+
+        (async () => {
+            await handleLogOut();
+            setShowAuthFlow(true, {
+                clearErrors: true,
+                emitCancelAuth: true,
+                ignoreIfIsEmbeddedWidget: true,
+                initializeWalletConnect: true,
+                performMultiWalletChecks: false, // Important to be false in order to not require double clicking connect button
+            });
+            setShowDynamicModal(false);
+        })();
+    }, []);
+
+    return null;
+}

package/dist/chunk-MDV3M7FD.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"]}