@crossmint/client-sdk-react-ui 1.10.4 → 1.10.6

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

@@ -0,0 +1,33 @@
+import {
+  DynamicWeb3WalletConnect
+} from "../../../chunk-KB5JOTFH.js";
+import "../../../chunk-6CPZDD6Y.js";
+import "../../../chunk-RZT2J42J.js";
+import "../../../chunk-QTTQHZ7M.js";
+import "../../../chunk-A7J4DAE7.js";
+import "../../../chunk-XEZF7G64.js";
+import "../../../chunk-NMXFWIFA.js";
+import "../../../chunk-33WZFL2D.js";
+import "../../../chunk-FKIMKZ4Y.js";
+import "../../../chunk-QTL5I5C2.js";
+import "../../../chunk-HATQVB6H.js";
+import "../../../chunk-RZPQIRIY.js";
+import "../../../chunk-ZDQGQY7Z.js";
+import "../../../chunk-IQPA3QOV.js";
+import "../../../chunk-CPYPI45H.js";
+import "../../../chunk-DZ5MGN25.js";
+import "../../../chunk-7KIY6DLW.js";
+import "../../../chunk-I63FQCIV.js";
+import "../../../chunk-ZIHCLVCD.js";
+import "../../../chunk-H4F7UVPT.js";
+import "../../../chunk-YWVQCHQF.js";
+import "../../../chunk-WV5WYSUU.js";
+import "../../../chunk-D2OKRE2Q.js";
+import "../../../chunk-3J6CUUWT.js";
+import "../../../chunk-AUEQQ4D3.js";
+import "../../../chunk-3LEJNXQ7.js";
+import "../../../chunk-CRTRMMJ7.js";
+export {
+  DynamicWeb3WalletConnect
+};
+//# sourceMappingURL=DynamicWeb3WalletConnect.js.map

package/dist/providers/index.cjs

@@ -3,10 +3,7 @@
 
 
 
-var _chunkEBMORHG3cjs = require('../chunk-EBMORHG3.cjs');
-require('../chunk-HSLAH2PN.cjs');
-require('../chunk-Q3UM7UCM.cjs');
-require('../chunk-5S4VO6RB.cjs');
+var _chunkC7VFXQ2Gcjs = require('../chunk-C7VFXQ2G.cjs');
 require('../chunk-QQXBYOKA.cjs');
 require('../chunk-MJHLKJ6X.cjs');
 require('../chunk-QT7UEJZG.cjs');
@@ -19,24 +16,21 @@ require('../chunk-HCW4RO2O.cjs');
 require('../chunk-UASNCH3A.cjs');
 require('../chunk-MUS7DUPS.cjs');
 require('../chunk-IP4HQL5I.cjs');
-require('../chunk-KNOUJZN5.cjs');
 require('../chunk-ZMSST6ZZ.cjs');
-require('../chunk-QK5J7FD3.cjs');
-require('../chunk-AXZLLRBU.cjs');
 require('../chunk-URKPLEPV.cjs');
 require('../chunk-HPOZ6I54.cjs');
 require('../chunk-YE55IKBP.cjs');
 require('../chunk-ENCR5SUW.cjs');
-require('../chunk-AQELE4DZ.cjs');
-require('../chunk-RYB3MSFQ.cjs');
+require('../chunk-TM3K5JAV.cjs');
+require('../chunk-UAA5ZXHF.cjs');
 require('../chunk-KEKBOJCF.cjs');
 require('../chunk-A2JCJ2OV.cjs');
-require('../chunk-ITCHCRGX.cjs');
+require('../chunk-MPRVUXM6.cjs');
 require('../chunk-4DAZAO6Y.cjs');
 
 
 
 
 
-exports.AuthContext = _chunkEBMORHG3cjs.AuthContext; exports.CrossmintAuthProvider = _chunkEBMORHG3cjs.CrossmintAuthProvider; exports.CrossmintWalletProvider = _chunkEBMORHG3cjs.CrossmintWalletProvider; exports.WalletContext = _chunkEBMORHG3cjs.WalletContext;
+exports.AuthContext = _chunkC7VFXQ2Gcjs.AuthContext; exports.CrossmintAuthProvider = _chunkC7VFXQ2Gcjs.CrossmintAuthProvider; exports.CrossmintWalletProvider = _chunkC7VFXQ2Gcjs.CrossmintWalletProvider; exports.WalletContext = _chunkC7VFXQ2Gcjs.WalletContext;
 //# sourceMappingURL=index.cjs.map

package/dist/providers/index.js

@@ -3,10 +3,7 @@ import {
   CrossmintAuthProvider,
   CrossmintWalletProvider,
   WalletContext
-} from "../chunk-T5WAVOPI.js";
-import "../chunk-NFWMF6T7.js";
-import "../chunk-ZSWTJ6E7.js";
-import "../chunk-OZS4WEKF.js";
+} from "../chunk-QTTQHZ7M.js";
 import "../chunk-A7J4DAE7.js";
 import "../chunk-XEZF7G64.js";
 import "../chunk-NMXFWIFA.js";
@@ -19,19 +16,16 @@ import "../chunk-ZDQGQY7Z.js";
 import "../chunk-IQPA3QOV.js";
 import "../chunk-CPYPI45H.js";
 import "../chunk-DZ5MGN25.js";
-import "../chunk-VZIXXIU5.js";
 import "../chunk-7KIY6DLW.js";
-import "../chunk-QFQWKKVU.js";
-import "../chunk-3KR4GYLF.js";
 import "../chunk-I63FQCIV.js";
 import "../chunk-ZIHCLVCD.js";
 import "../chunk-H4F7UVPT.js";
 import "../chunk-YWVQCHQF.js";
-import "../chunk-KCGRRFIF.js";
-import "../chunk-EFT2TZG5.js";
+import "../chunk-WV5WYSUU.js";
+import "../chunk-D2OKRE2Q.js";
 import "../chunk-3J6CUUWT.js";
 import "../chunk-AUEQQ4D3.js";
-import "../chunk-6PCSAKDU.js";
+import "../chunk-3LEJNXQ7.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 _chunkRYB3MSFQcjs = require('../chunk-RYB3MSFQ.cjs');
-require('../chunk-ITCHCRGX.cjs');
+var _chunkUAA5ZXHFcjs = require('../chunk-UAA5ZXHF.cjs');
+require('../chunk-MPRVUXM6.cjs');
 require('../chunk-4DAZAO6Y.cjs');
 
 
-exports.createCrossmintApiClient = _chunkRYB3MSFQcjs.createCrossmintApiClient;
+exports.createCrossmintApiClient = _chunkUAA5ZXHFcjs.createCrossmintApiClient;
 //# sourceMappingURL=createCrossmintApiClient.cjs.map

package/dist/utils/createCrossmintApiClient.js

@@ -1,7 +1,7 @@
 import {
   createCrossmintApiClient
-} from "../chunk-EFT2TZG5.js";
-import "../chunk-6PCSAKDU.js";
+} from "../chunk-D2OKRE2Q.js";
+import "../chunk-3LEJNXQ7.js";
 import "../chunk-CRTRMMJ7.js";
 export {
   createCrossmintApiClient

package/dist/utils/dynamic/dynamicChainToCrossmintChain.cjs

@@ -0,0 +1,8 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true});
+
+var _chunkLGY5FQOZcjs = require('../../chunk-LGY5FQOZ.cjs');
+require('../../chunk-4DAZAO6Y.cjs');
+
+
+exports.dynamicChainToCrossmintChain = _chunkLGY5FQOZcjs.dynamicChainToCrossmintChain;
+//# sourceMappingURL=dynamicChainToCrossmintChain.cjs.map

package/dist/utils/dynamic/dynamicChainToCrossmintChain.d.cts

@@ -0,0 +1,6 @@
+import { BlockchainIncludingTestnet } from '@crossmint/common-sdk-base';
+import { HandleConnectedWallet } from '@dynamic-labs/sdk-react-core';
+
+declare function dynamicChainToCrossmintChain(wallet: Parameters<HandleConnectedWallet>[0]): Promise<BlockchainIncludingTestnet>;
+
+export { dynamicChainToCrossmintChain };

package/dist/utils/dynamic/dynamicChainToCrossmintChain.d.ts

@@ -0,0 +1,6 @@
+import { BlockchainIncludingTestnet } from '@crossmint/common-sdk-base';
+import { HandleConnectedWallet } from '@dynamic-labs/sdk-react-core';
+
+declare function dynamicChainToCrossmintChain(wallet: Parameters<HandleConnectedWallet>[0]): Promise<BlockchainIncludingTestnet>;
+
+export { dynamicChainToCrossmintChain };

package/dist/utils/dynamic/dynamicChainToCrossmintChain.js

@@ -0,0 +1,8 @@
+import {
+  dynamicChainToCrossmintChain
+} from "../../chunk-6CPZDD6Y.js";
+import "../../chunk-CRTRMMJ7.js";
+export {
+  dynamicChainToCrossmintChain
+};
+//# sourceMappingURL=dynamicChainToCrossmintChain.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crossmint/client-sdk-react-ui",
-  "version": "1.10.4",
+  "version": "1.10.6",
   "repository": "https://github.com/Crossmint/crossmint-sdk",
   "license": "Apache-2.0",
   "author": "Paella Labs Inc",
@@ -28,10 +28,8 @@
     "@radix-ui/react-dialog": "1.1.2",
     "@radix-ui/react-visually-hidden": "1.1.0",
     "@solana/web3.js": "1.95.1",
-    "@tanstack/react-query": "5.51.18",
     "@twind/core": "1.1.3",
     "@twind/preset-tailwind": "1.1.4",
-    "@wagmi/connectors": "5.3.3",
     "bs58": "5.0.0",
     "clsx": "2.1.1",
     "color": "4.2.3",
@@ -41,13 +39,12 @@
     "tailwind-merge": "2.4.0",
     "tailwindcss": "3.4.10",
     "viem": "2.17.5",
-    "wagmi": "2.12.25",
     "zod": "3.22.4",
-    "@crossmint/client-sdk-auth": "1.1.0",
-    "@crossmint/client-sdk-base": "1.3.2",
-    "@crossmint/client-sdk-smart-wallet": "0.1.22",
+    "@crossmint/client-sdk-auth": "1.1.2",
+    "@crossmint/client-sdk-base": "1.3.3",
+    "@crossmint/client-sdk-smart-wallet": "0.1.23",
     "@crossmint/client-sdk-window": "0.1.0",
-    "@crossmint/common-sdk-auth": "1.0.1",
+    "@crossmint/common-sdk-auth": "1.0.2",
     "@crossmint/common-sdk-base": "0.3.0"
   },
   "devDependencies": {

package/src/components/auth/AuthForm.tsx

@@ -1,3 +1,5 @@
+import { lazy } from "react";
+import Color from "color";
 import { useAuthForm } from "@/providers/auth/AuthFormProvider";
 import { EmailAuthFlow } from "./methods/email/EmailAuthFlow";
 import { Divider } from "../common/Divider";
@@ -6,10 +8,15 @@ import { FarcasterSignIn } from "./methods/farcaster/FarcasterSignIn";
 import { PoweredByCrossmint } from "../common/PoweredByCrossmint";
 import { FarcasterProvider } from "../../providers/auth/FarcasterProvider";
 import { classNames } from "@/utils/classNames";
-import { Web3AuthFlow } from "./methods/web3/Web3AuthFlow";
-import Color from "color";
 import { AlertIcon } from "@/icons/alert";
 
+const Web3AuthFlow = lazy(() =>
+    // @ts-expect-error - Error because we dont use 'module' field in tsconfig, which is expected because we use tsup to compile
+    import("./methods/web3/Web3AuthFlow").then((mod) => ({
+        default: mod.Web3AuthFlow,
+    }))
+);
+
 export function AuthForm({ className }: { className?: string }) {
     const { step, appearance, loginMethods, baseUrl, error } = useAuthForm();
 

package/src/components/auth/methods/web3/Web3AuthFlow.tsx

@@ -1,14 +1,32 @@
 import { useAuthForm } from "@/providers/auth/AuthFormProvider";
 import { Web3AuthFlowButton } from "./Web3AuthFlowButton";
 import { Web3Connectors } from "./Web3Connectors";
+import { useCrossmint } from "@/hooks";
+import { createCrossmintApiClient } from "@/utils/createCrossmintApiClient";
+import { DynamicWeb3WalletConnect } from "@/providers/auth/web3/DynamicWeb3WalletConnect";
 
 export function Web3AuthFlow() {
+    const { crossmint } = useCrossmint();
+    const apiClient = createCrossmintApiClient(crossmint, {
+        usageOrigin: "client",
+    });
+
+    return (
+        <DynamicWeb3WalletConnect apiKeyEnvironment={apiClient["parsedAPIKey"].environment}>
+            <Web3AuthFlowContent />
+        </DynamicWeb3WalletConnect>
+    );
+}
+
+function Web3AuthFlowContent() {
     const { step } = useAuthForm();
 
+    // Show wallet connectors when in any web3 step
     if (step.startsWith("web3")) {
         return <Web3Connectors />;
     }
 
+    // Show initial connect button on first step
     if (step === "initial") {
         return <Web3AuthFlowButton />;
     }

package/src/components/auth/methods/web3/Web3Connectors.tsx

@@ -1,14 +1,9 @@
 import { useAuthForm } from "@/providers/auth/AuthFormProvider";
 import { AuthFormBackButton } from "../../AuthFormBackButton";
-import { Web3ConnectorButton } from "./Web3ConnectorButton";
-import { metamaskIcon, walletConnectIcon } from "@/icons/base64Icons";
-import { Web3ConnectorContainer } from "./Web3ConnectorContainer";
-import { useAccount, useDisconnect } from "wagmi";
+import { DynamicEmbeddedWidget } from "@dynamic-labs/sdk-react-core";
 
 export function Web3Connectors() {
     const { appearance, step, setStep } = useAuthForm();
-    const { isConnected } = useAccount();
-    const { disconnect } = useDisconnect();
 
     if (step === "web3") {
         return (
@@ -18,78 +13,16 @@ export function Web3Connectors() {
                     iconColor={appearance?.colors?.textPrimary}
                     ringColor={appearance?.colors?.accent}
                 />
-                <div className="flex flex-col items-center gap-2">
-                    <div className="text-center mb-6">
-                        <h3
-                            className="text-lg font-semibold text-cm-text-primary"
-                            style={{ color: appearance?.colors?.textPrimary }}
-                        >
-                            Connect wallet
-                        </h3>
-                    </div>
+                <div className="flex flex-col items-center">
                     <div className="flex flex-col gap-[10px] w-full">
-                        <Web3ConnectorButton
-                            title="Metamask"
-                            appearance={appearance}
-                            img={metamaskIcon}
-                            onClick={() => {
-                                if (isConnected) {
-                                    disconnect();
-                                }
-                                // wait for all disconnect state to be cleared before proceeding to the next step
-                                setTimeout(() => {
-                                    setStep("web3/metamask");
-                                }, 200);
-                            }}
-                        />
-                        <Web3ConnectorButton
-                            title="WalletConnect"
-                            appearance={appearance}
-                            img={walletConnectIcon}
-                            onClick={() => {
-                                if (isConnected) {
-                                    disconnect();
-                                }
-                                setTimeout(() => {
-                                    setStep("web3/walletconnect");
-                                }, 200);
-                            }}
-                        />
+                        <div className="widget-container">
+                            <DynamicEmbeddedWidget background="none" />
+                        </div>
                     </div>
                 </div>
             </>
         );
     }
 
-    if (step === "web3/metamask") {
-        return (
-            <>
-                <AuthFormBackButton
-                    onClick={() => {
-                        setStep("web3");
-                    }}
-                    iconColor={appearance?.colors?.textPrimary}
-                    ringColor={appearance?.colors?.accent}
-                />
-                <Web3ConnectorContainer providerType="metaMaskSDK" flag="isMetaMask" icon={metamaskIcon} />
-            </>
-        );
-    }
-
-    if (step === "web3/walletconnect") {
-        return (
-            <>
-                <AuthFormBackButton
-                    onClick={() => {
-                        setStep("web3");
-                    }}
-                    iconColor={appearance?.colors?.textPrimary}
-                    ringColor={appearance?.colors?.accent}
-                />
-                <Web3ConnectorContainer providerType="walletConnect" icon={walletConnectIcon} />
-            </>
-        );
-    }
-
     return null;
 }

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

@@ -1,15 +1,12 @@
 import DynamicContextProviderWrapper from "@/components/dynamic-xyz/DynamicContextProviderWrapper";
 import type { EmbeddedCheckoutV3IFrameEmitter } from "@crossmint/client-sdk-base";
-import {
-    type APIKeyEnvironmentPrefix,
-    type BlockchainIncludingTestnet,
-    chainIdToBlockchain,
-} from "@crossmint/common-sdk-base";
+import type { APIKeyEnvironmentPrefix, BlockchainIncludingTestnet } from "@crossmint/common-sdk-base";
 import { EthereumWalletConnectors } from "@dynamic-labs/ethereum";
-import { DynamicContext, useDynamicContext, type HandleConnectedWallet } from "@dynamic-labs/sdk-react-core";
+import { DynamicContext, useDynamicContext } from "@dynamic-labs/sdk-react-core";
 import { SolanaWalletConnectors } from "@dynamic-labs/solana";
 import { type Dispatch, type SetStateAction, useContext, useEffect, useState } from "react";
 import { handleSendTransaction } from "./utils/handleSendTransaction";
+import { dynamicChainToCrossmintChain } from "@/utils/dynamic/dynamicChainToCrossmintChain";
 
 export function CryptoWalletConnectionHandler(props: {
     iframeClient: EmbeddedCheckoutV3IFrameEmitter | null;
@@ -119,24 +116,6 @@ function _CryptoWalletConnectionHandler({ iframeClient }: Parameters<typeof Cryp
     return showDynamicModal ? <ShowDynamicModal setShowDynamicModal={setShowDynamicModal} /> : null;
 }
 
-async function dynamicChainToCrossmintChain(
-    wallet: Parameters<HandleConnectedWallet>[0]
-): Promise<BlockchainIncludingTestnet> {
-    const chain = wallet.chain;
-    if (chain === "SOL") {
-        return "solana";
-    }
-    const chainId = await wallet.connector?.getNetwork();
-    if (typeof chainId !== "number") {
-        throw new Error("chainId is not a number");
-    }
-    const chainFromChainId = chainIdToBlockchain(chainId);
-    if (!chainFromChainId) {
-        throw new Error(`ChainId ${chainId} is not supported`);
-    }
-    return chainFromChainId as BlockchainIncludingTestnet;
-}
-
 export function ShowDynamicModal({ setShowDynamicModal }: { setShowDynamicModal: Dispatch<SetStateAction<boolean>> }) {
     const context = useContext(DynamicContext);
     if (context == null) {

package/src/providers/CrossmintAuthProvider.test.tsx

@@ -13,10 +13,6 @@ import { CrossmintProvider, useCrossmint } from "../hooks/useCrossmint";
 import { MOCK_API_KEY } from "../testUtils";
 import { CrossmintAuthProvider, type CrossmintAuthWalletConfig } from "./CrossmintAuthProvider";
 
-vi.mock("./auth/web3/WagmiAuthProvider", () => ({
-    WagmiAuthProvider: ({ children }: { children: ReactNode }) => <>{children}</>,
-}));
-
 vi.mock("@crossmint/client-sdk-smart-wallet", async () => {
     const actual = await vi.importActual("@crossmint/client-sdk-smart-wallet");
     return {

package/src/providers/CrossmintWalletProvider.test.tsx

@@ -11,10 +11,6 @@ import { useWallet } from "../hooks/useWallet";
 import { MOCK_API_KEY } from "../testUtils";
 import { CrossmintWalletProvider } from "./CrossmintWalletProvider";
 
-vi.mock("./auth/web3/WagmiAuthProvider", () => ({
-    WagmiAuthProvider: ({ children }: { children: ReactNode }) => <>{children}</>,
-}));
-
 vi.mock("@crossmint/client-sdk-smart-wallet", async () => {
     const actual = await vi.importActual("@crossmint/client-sdk-smart-wallet");
     return {
@@ -80,7 +76,6 @@ describe("CrossmintWalletProvider", () => {
                 jwt: "mock-jwt",
             },
             setJwt: () => {},
-            setRefreshToken: () => {},
         });
 
         mockSDK = mock<SmartWalletSDK>();
@@ -122,7 +117,6 @@ describe("CrossmintWalletProvider", () => {
                         jwt: undefined,
                     },
                     setJwt: () => {},
-                    setRefreshToken: () => {},
                 });
             });
 

package/src/providers/auth/AuthFormProvider.test.tsx

@@ -1,4 +1,3 @@
-import type { ReactNode } from "react";
 import { render, fireEvent, waitFor } from "@testing-library/react";
 import { beforeEach } from "vitest";
 import { AuthFormProvider, useAuthForm } from "./AuthFormProvider";
@@ -6,10 +5,6 @@ import { describe, expect, it, vi } from "vitest";
 import type { CrossmintAuthWalletConfig, LoginMethod } from "..";
 import { useCrossmintAuth } from "@/hooks/useCrossmintAuth";
 
-vi.mock("./web3/WagmiAuthProvider", () => ({
-    WagmiAuthProvider: ({ children }: { children: ReactNode }) => <>{children}</>,
-}));
-
 vi.mock("@/hooks/useCrossmintAuth");
 
 // Mock component to test the AuthFormProvider

package/src/providers/auth/AuthFormProvider.tsx

@@ -3,7 +3,6 @@ import type { OAuthProvider } from "@crossmint/common-sdk-auth";
 import type { UIConfig } from "@crossmint/common-sdk-base";
 import type { CrossmintAuthWalletConfig, LoginMethod } from "../CrossmintAuthProvider";
 import { useCrossmintAuth } from "@/hooks/useCrossmintAuth";
-import { WagmiAuthProvider } from "./web3/WagmiAuthProvider";
 
 type AuthStep = "initial" | "otp" | "qrCode" | "web3" | "web3/metamask" | "web3/walletconnect";
 
@@ -106,9 +105,5 @@ export const AuthFormProvider = ({
         setStep,
     };
 
-    return (
-        <AuthFormContext.Provider value={value}>
-            <WagmiAuthProvider>{children}</WagmiAuthProvider>
-        </AuthFormContext.Provider>
-    );
+    return <AuthFormContext.Provider value={value}>{children}</AuthFormContext.Provider>;
 };

package/src/providers/auth/web3/DynamicWeb3WalletConnect.tsx

@@ -0,0 +1,73 @@
+import type React from "react";
+import { EthereumWalletConnectors } from "@dynamic-labs/ethereum";
+import { SolanaWalletConnectors } from "@dynamic-labs/solana";
+import type { APIKeyEnvironmentPrefix } from "@crossmint/common-sdk-base";
+import DynamicContextProviderWrapper from "@/components/dynamic-xyz/DynamicContextProviderWrapper";
+import { useCrossmintAuth } from "@/hooks/useCrossmintAuth";
+import { useAuthForm } from "../AuthFormProvider";
+import { dynamicChainToCrossmintChain } from "@/utils/dynamic/dynamicChainToCrossmintChain";
+
+export function DynamicWeb3WalletConnect({
+    children,
+    apiKeyEnvironment,
+}: { children: React.ReactNode; apiKeyEnvironment: APIKeyEnvironmentPrefix }) {
+    const { crossmintAuth } = useCrossmintAuth();
+    const { appearance } = useAuthForm();
+
+    const cssOverrides = `.powered-by-dynamic { display: none !important; } .wallet-list__scroll-container { padding: 0px !important; } .wallet-list__search-container { padding-left: 0px !important; padding-right: 0px !important; } .dynamic-footer { display: none !important; } h1 { color: ${appearance?.colors?.textPrimary} !important; } * { color: ${appearance?.colors?.textSecondary} !important; }`;
+
+    return (
+        <DynamicContextProviderWrapper
+            apiKeyEnvironment={apiKeyEnvironment}
+            settings={{
+                cssOverrides,
+                walletConnectors: [EthereumWalletConnectors, SolanaWalletConnectors],
+                events: {
+                    onAuthFlowCancel() {
+                        console.log("[CryptoWalletConnectionHandler] onAuthFlowCancel");
+                    },
+                    onAuthFlowClose() {
+                        console.log("[CryptoWalletConnectionHandler] onAuthFlowClose");
+                    },
+                    onAuthFailure(data, reason) {
+                        console.error("[CryptoWalletConnectionHandler] onAuthFailure", data, reason);
+                    },
+                    onAuthSuccess(data) {
+                        console.log("[CryptoWalletConnectionHandler] onAuthSuccess", data);
+                    },
+                },
+                handlers: {
+                    handleConnectedWallet: async (wallet) => {
+                        console.log("[CryptoWalletConnectionHandler] handleConnectedWallet", wallet);
+
+                        const address = wallet.address;
+                        if (!address) {
+                            console.error("[CryptoWalletConnectionHandler] handleConnectedWallet: address is missing");
+                            return false;
+                        }
+
+                        const chain = await dynamicChainToCrossmintChain(wallet);
+                        console.log({ chain });
+
+                        try {
+                            const res = await crossmintAuth?.signInWithSmartWallet(address);
+                            const signature = (await wallet.connector?.signMessage(res.challenge)) as `0x${string}`;
+                            const authResponse = (await crossmintAuth?.authenticateSmartWallet(address, signature)) as {
+                                oneTimeSecret: string;
+                            };
+                            const oneTimeSecret = authResponse.oneTimeSecret;
+                            await crossmintAuth?.handleRefreshAuthMaterial(oneTimeSecret);
+                        } catch (error) {
+                            console.error("[CryptoWalletConnectionHandler] Error authenticating wallet:", error);
+                            return false;
+                        }
+
+                        return true;
+                    },
+                },
+            }}
+        >
+            {children}
+        </DynamicContextProviderWrapper>
+    );
+}

package/src/utils/dynamic/dynamicChainToCrossmintChain.ts

@@ -0,0 +1,20 @@
+import { chainIdToBlockchain, type BlockchainIncludingTestnet } from "@crossmint/common-sdk-base";
+import type { HandleConnectedWallet } from "@dynamic-labs/sdk-react-core";
+
+export async function dynamicChainToCrossmintChain(
+    wallet: Parameters<HandleConnectedWallet>[0]
+): Promise<BlockchainIncludingTestnet> {
+    const chain = wallet.chain;
+    if (chain === "SOL") {
+        return "solana";
+    }
+    const chainId = await wallet.connector?.getNetwork();
+    if (typeof chainId !== "number") {
+        throw new Error("chainId is not a number");
+    }
+    const chainFromChainId = chainIdToBlockchain(chainId);
+    if (!chainFromChainId) {
+        throw new Error(`ChainId ${chainId} is not supported`);
+    }
+    return chainFromChainId as BlockchainIncludingTestnet;
+}

package/dist/chunk-5S4VO6RB.cjs

@@ -1,55 +0,0 @@
-"use strict";Object.defineProperty(exports, "__esModule", {value: true});// src/providers/auth/web3/WagmiAuthProvider.tsx
-var _wagmi = require('wagmi');
-
-
-
-
-
-
-
-
-
-
-var _chains = require('wagmi/chains');
-var _reactquery = require('@tanstack/react-query');
-var _connectors = require('wagmi/connectors');
-var _jsxruntime = require('react/jsx-runtime');
-var ALCHEMY_API_KEY = "-7M6vRDBDknwvMxnqah_jbcieWg0qad9";
-var ALCHEMY_RPC_SUBDOMAIN = {
-  mainnet: "mainnet",
-  polygon: "polygon-mainnet",
-  "polygon-amoy": "polygon-amoy",
-  base: "base-mainnet",
-  "base-sepolia": "base-sepolia",
-  optimism: "opt-mainnet",
-  "optimism-sepolia": "opt-sepolia",
-  arbitrum: "arb-mainnet",
-  "arbitrum-sepolia": "arb-sepolia"
-};
-function getAlchemyRPC(chain) {
-  return `https://${ALCHEMY_RPC_SUBDOMAIN[chain]}.g.alchemy.com/v2/${ALCHEMY_API_KEY}`;
-}
-var config = _wagmi.createConfig.call(void 0, {
-  chains: [_chains.mainnet, _chains.base, _chains.polygon, _chains.optimism, _chains.arbitrum, _chains.baseSepolia, _chains.polygonAmoy, _chains.optimismSepolia, _chains.arbitrumSepolia],
-  connectors: [_connectors.metaMask.call(void 0, ), _connectors.walletConnect.call(void 0, { projectId: "94ed8f7549329dad7be968888eec3688" })],
-  transports: {
-    [_chains.mainnet.id]: _wagmi.http.call(void 0, getAlchemyRPC("mainnet")),
-    [_chains.base.id]: _wagmi.http.call(void 0, getAlchemyRPC("base")),
-    [_chains.polygon.id]: _wagmi.http.call(void 0, getAlchemyRPC("polygon")),
-    [_chains.optimism.id]: _wagmi.http.call(void 0, getAlchemyRPC("optimism")),
-    [_chains.arbitrum.id]: _wagmi.http.call(void 0, getAlchemyRPC("arbitrum")),
-    [_chains.baseSepolia.id]: _wagmi.http.call(void 0, getAlchemyRPC("base-sepolia")),
-    [_chains.polygonAmoy.id]: _wagmi.http.call(void 0, getAlchemyRPC("polygon-amoy")),
-    [_chains.optimismSepolia.id]: _wagmi.http.call(void 0, getAlchemyRPC("optimism-sepolia")),
-    [_chains.arbitrumSepolia.id]: _wagmi.http.call(void 0, getAlchemyRPC("arbitrum-sepolia"))
-  }
-});
-function WagmiAuthProvider({ children }) {
-  const queryClient = new (0, _reactquery.QueryClient)();
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _wagmi.WagmiProvider, { config, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _reactquery.QueryClientProvider, { client: queryClient, children }) });
-}
-
-
-
-exports.WagmiAuthProvider = WagmiAuthProvider;
-//# sourceMappingURL=chunk-5S4VO6RB.cjs.map

package/dist/chunk-5S4VO6RB.cjs.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/providers/auth/web3/WagmiAuthProvider.tsx"],"names":[],"mappings":";AACA,SAAS,cAAc,MAAM,qBAAqB;AAClD;AAAA,EACI;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACG;AACP,SAAS,aAAa,2BAA2B;AACjD,SAAS,UAAU,qBAAqB;AAsC5B;AApCZ,IAAM,kBAAkB;AACxB,IAAM,wBAAwB;AAAA,EAC1B,SAAS;AAAA,EACT,SAAS;AAAA,EACT,gBAAgB;AAAA,EAChB,MAAM;AAAA,EACN,gBAAgB;AAAA,EAChB,UAAU;AAAA,EACV,oBAAoB;AAAA,EACpB,UAAU;AAAA,EACV,oBAAoB;AACxB;AACA,SAAS,cAAc,OAAmD;AACtE,SAAO,WAAW,sBAAsB,KAAK,CAAC,qBAAqB,eAAe;AACtF;AAEA,IAAM,SAAS,aAAa;AAAA,EACxB,QAAQ,CAAC,SAAS,MAAM,SAAS,UAAU,UAAU,aAAa,aAAa,iBAAiB,eAAe;AAAA,EAC/G,YAAY,CAAC,SAAS,GAAG,cAAc,EAAE,WAAW,mCAAmC,CAAC,CAAC;AAAA,EACzF,YAAY;AAAA,IACR,CAAC,QAAQ,EAAE,GAAG,KAAK,cAAc,SAAS,CAAC;AAAA,IAC3C,CAAC,KAAK,EAAE,GAAG,KAAK,cAAc,MAAM,CAAC;AAAA,IACrC,CAAC,QAAQ,EAAE,GAAG,KAAK,cAAc,SAAS,CAAC;AAAA,IAC3C,CAAC,SAAS,EAAE,GAAG,KAAK,cAAc,UAAU,CAAC;AAAA,IAC7C,CAAC,SAAS,EAAE,GAAG,KAAK,cAAc,UAAU,CAAC;AAAA,IAC7C,CAAC,YAAY,EAAE,GAAG,KAAK,cAAc,cAAc,CAAC;AAAA,IACpD,CAAC,YAAY,EAAE,GAAG,KAAK,cAAc,cAAc,CAAC;AAAA,IACpD,CAAC,gBAAgB,EAAE,GAAG,KAAK,cAAc,kBAAkB,CAAC;AAAA,IAC5D,CAAC,gBAAgB,EAAE,GAAG,KAAK,cAAc,kBAAkB,CAAC;AAAA,EAChE;AACJ,CAAC;AAEM,SAAS,kBAAkB,EAAE,SAAS,GAAkC;AAC3E,QAAM,cAAc,IAAI,YAAY;AACpC,SACI,oBAAC,iBAAc,QACX,8BAAC,uBAAoB,QAAQ,aAAc,UAAS,GACxD;AAER","sourcesContent":["import type React from \"react\";\nimport { createConfig, http, WagmiProvider } from \"wagmi\";\nimport {\n    arbitrum,\n    arbitrumSepolia,\n    base,\n    baseSepolia,\n    optimism,\n    optimismSepolia,\n    polygon,\n    polygonAmoy,\n    mainnet,\n} from \"wagmi/chains\";\nimport { QueryClient, QueryClientProvider } from \"@tanstack/react-query\";\nimport { metaMask, walletConnect } from \"wagmi/connectors\";\n\nconst ALCHEMY_API_KEY = \"-7M6vRDBDknwvMxnqah_jbcieWg0qad9\";\nconst ALCHEMY_RPC_SUBDOMAIN = {\n    mainnet: \"mainnet\",\n    polygon: \"polygon-mainnet\",\n    \"polygon-amoy\": \"polygon-amoy\",\n    base: \"base-mainnet\",\n    \"base-sepolia\": \"base-sepolia\",\n    optimism: \"opt-mainnet\",\n    \"optimism-sepolia\": \"opt-sepolia\",\n    arbitrum: \"arb-mainnet\",\n    \"arbitrum-sepolia\": \"arb-sepolia\",\n};\nfunction getAlchemyRPC(chain: keyof typeof ALCHEMY_RPC_SUBDOMAIN): string {\n    return `https://${ALCHEMY_RPC_SUBDOMAIN[chain]}.g.alchemy.com/v2/${ALCHEMY_API_KEY}`;\n}\n\nconst config = createConfig({\n    chains: [mainnet, base, polygon, optimism, arbitrum, baseSepolia, polygonAmoy, optimismSepolia, arbitrumSepolia],\n    connectors: [metaMask(), walletConnect({ projectId: \"94ed8f7549329dad7be968888eec3688\" })],\n    transports: {\n        [mainnet.id]: http(getAlchemyRPC(\"mainnet\")),\n        [base.id]: http(getAlchemyRPC(\"base\")),\n        [polygon.id]: http(getAlchemyRPC(\"polygon\")),\n        [optimism.id]: http(getAlchemyRPC(\"optimism\")),\n        [arbitrum.id]: http(getAlchemyRPC(\"arbitrum\")),\n        [baseSepolia.id]: http(getAlchemyRPC(\"base-sepolia\")),\n        [polygonAmoy.id]: http(getAlchemyRPC(\"polygon-amoy\")),\n        [optimismSepolia.id]: http(getAlchemyRPC(\"optimism-sepolia\")),\n        [arbitrumSepolia.id]: http(getAlchemyRPC(\"arbitrum-sepolia\")),\n    },\n});\n\nexport function WagmiAuthProvider({ children }: { children: React.ReactNode }) {\n    const queryClient = new QueryClient();\n    return (\n        <WagmiProvider config={config}>\n            <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>\n        </WagmiProvider>\n    );\n}\n"]}