@b3dotfun/sdk 0.1.69-alpha.11 → 0.1.69-alpha.13

package/dist/cjs/wallet/react/components/ConnectWallet.js

@@ -0,0 +1,467 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ConnectWallet = ConnectWallet;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const DialogPrimitive = __importStar(require("@radix-ui/react-dialog"));
+const react_1 = require("@web3icons/react");
+const utils_1 = require("../../../shared/utils");
+const lucide_react_1 = require("lucide-react");
+const react_2 = require("react");
+const useWalletDisconnect_1 = require("../hooks/useWalletDisconnect");
+const useWalletState_1 = require("../hooks/useWalletState");
+/** Injects the spinner keyframe once into the document head (idempotent via DOM id). */
+function SpinnerKeyframes() {
+    (0, react_2.useEffect)(() => {
+        if (document.getElementById("b3-spin-keyframes"))
+            return;
+        const style = document.createElement("style");
+        style.id = "b3-spin-keyframes";
+        style.textContent = "@keyframes b3-spin { to { transform: rotate(360deg) } }";
+        document.head.appendChild(style);
+    }, []);
+    return null;
+}
+const WALLET_DOWNLOAD_URLS = {
+    metamask: "https://metamask.io/download/",
+    "coinbase wallet": "https://www.coinbase.com/wallet/downloads",
+    phantom: "https://phantom.app/download",
+    rabby: "https://rabby.io/",
+    rainbow: "https://rainbow.me/download",
+    walletconnect: "https://walletconnect.com/",
+};
+function getWalletIcon(name, size = 24) {
+    switch (name.toLowerCase()) {
+        case "metamask":
+            return (0, jsx_runtime_1.jsx)(react_1.WalletMetamask, { width: size, height: size });
+        case "coinbase wallet":
+            return (0, jsx_runtime_1.jsx)(react_1.WalletCoinbase, { width: size, height: size });
+        case "phantom":
+            return (0, jsx_runtime_1.jsx)(react_1.WalletPhantom, { width: size, height: size });
+        case "walletconnect":
+            return (0, jsx_runtime_1.jsx)(react_1.WalletWalletConnect, { width: size, height: size });
+        case "rabby wallet":
+        case "rabby":
+            return (0, jsx_runtime_1.jsx)(react_1.WalletRabby, { width: size, height: size });
+        case "rainbow":
+            return (0, jsx_runtime_1.jsx)(react_1.WalletRainbow, { width: size, height: size });
+        default:
+            return (0, jsx_runtime_1.jsx)(lucide_react_1.Wallet, { width: size, height: size });
+    }
+}
+// B3 brand colors
+const B3_BLUE = "#3368ef";
+const B3_BLUE_HOVER = "#2554d4";
+const theme = {
+    light: {
+        bg: "#ffffff",
+        cardBg: "#ffffff",
+        text: "#1a1a2e",
+        textSecondary: "#64748b",
+        textTertiary: "#94a3b8",
+        border: "#D1D1D6",
+        borderLight: "#e2e8f0",
+        hoverBg: "#f1f5f9",
+        iconBg: "#f1f5f9",
+        shadow: "0 20px 24px -4px rgba(10,13,18,0.08), 0 8px 8px -4px rgba(10,13,18,0.03), 0 3px 3px -1.5px rgba(10,13,18,0.04)",
+        popoverShadow: "0 10px 30px -5px rgba(10,13,18,0.1), 0 4px 6px -4px rgba(10,13,18,0.05)",
+        overlayBg: "rgba(0,0,0,0.8)",
+        badgeInstalledBg: "#ecfdf5",
+        badgeInstalledText: "#059669",
+        badgeInstallBg: "#f1f5f9",
+        badgeInstallText: "#64748b",
+        connectedDot: "#10b981",
+        disconnectBorder: "#fca5a5",
+        disconnectText: "#dc2626",
+        disconnectHoverBg: "#fef2f2",
+        copyHoverBg: "#f1f5f9",
+    },
+    dark: {
+        bg: "#0f0f14",
+        cardBg: "#1a1a24",
+        text: "#f1f5f9",
+        textSecondary: "#94a3b8",
+        textTertiary: "#64748b",
+        border: "#2a2a3a",
+        borderLight: "#2a2a3a",
+        hoverBg: "#22222e",
+        iconBg: "#22222e",
+        shadow: "0 20px 24px -4px rgba(0,0,0,0.3), 0 8px 8px -4px rgba(0,0,0,0.2)",
+        popoverShadow: "0 10px 30px -5px rgba(0,0,0,0.4)",
+        overlayBg: "rgba(0,0,0,0.85)",
+        badgeInstalledBg: "#052e16",
+        badgeInstalledText: "#34d399",
+        badgeInstallBg: "#22222e",
+        badgeInstallText: "#64748b",
+        connectedDot: "#34d399",
+        disconnectBorder: "#7f1d1d",
+        disconnectText: "#f87171",
+        disconnectHoverBg: "#1c1017",
+        copyHoverBg: "#22222e",
+    },
+};
+/**
+ * Drop-in wallet connection component styled to match the B3 design system.
+ * Uses inline styles — works in any app without tailwind configuration.
+ */
+function ConnectWallet({ theme: themeProp = "light", buttonLabel = "Connect Wallet" }) {
+    const { address, isConnected, chain, connectors } = (0, useWalletState_1.useWalletState)();
+    const { disconnect } = (0, useWalletDisconnect_1.useWalletDisconnect)();
+    const [modalOpen, setModalOpen] = (0, react_2.useState)(false);
+    const [popoverOpen, setPopoverOpen] = (0, react_2.useState)(false);
+    const [copied, setCopied] = (0, react_2.useState)(false);
+    const [hoveredUid, setHoveredUid] = (0, react_2.useState)(null);
+    const [btnHover, setBtnHover] = (0, react_2.useState)(false);
+    const [disconnectHover, setDisconnectHover] = (0, react_2.useState)(false);
+    const [copyHover, setCopyHover] = (0, react_2.useState)(false);
+    const [connectingUid, setConnectingUid] = (0, react_2.useState)(null);
+    const [connectError, setConnectError] = (0, react_2.useState)(null);
+    const [connectSuccess, setConnectSuccess] = (0, react_2.useState)(false);
+    const t = theme[themeProp];
+    const successTimerRef = (0, react_2.useRef)(null);
+    const resetConnectState = (0, react_2.useCallback)(() => {
+        setConnectingUid(null);
+        setConnectError(null);
+        setConnectSuccess(false);
+        if (successTimerRef.current) {
+            clearTimeout(successTimerRef.current);
+            successTimerRef.current = null;
+        }
+    }, []);
+    // Cleanup success timer on unmount
+    (0, react_2.useEffect)(() => {
+        return () => {
+            if (successTimerRef.current)
+                clearTimeout(successTimerRef.current);
+        };
+    }, []);
+    const handleConnect = (0, react_2.useCallback)(async (connector) => {
+        if (!connector.isInstalled) {
+            const url = WALLET_DOWNLOAD_URLS[connector.name.toLowerCase()];
+            if (url)
+                window.open(url, "_blank", "noopener,noreferrer");
+            return;
+        }
+        setConnectingUid(connector.uid);
+        setConnectError(null);
+        setConnectSuccess(false);
+        try {
+            await connector.connect();
+            setConnectSuccess(true);
+            successTimerRef.current = setTimeout(() => {
+                setModalOpen(false);
+                resetConnectState();
+            }, 800);
+        }
+        catch (err) {
+            const message = err instanceof Error ? err.message : "Connection failed";
+            if (message.includes("rejected") || message.includes("denied") || message.includes("User rejected")) {
+                setConnectError("Connection rejected");
+            }
+            else {
+                setConnectError(message.length > 60 ? message.slice(0, 60) + "..." : message);
+            }
+            setConnectingUid(null);
+        }
+    }, [resetConnectState]);
+    const handleDisconnect = (0, react_2.useCallback)(() => {
+        disconnect();
+        setPopoverOpen(false);
+    }, [disconnect]);
+    const handleCopyAddress = (0, react_2.useCallback)(async () => {
+        if (address) {
+            try {
+                await navigator.clipboard.writeText(address);
+                setCopied(true);
+            }
+            catch {
+                // Clipboard API may be denied
+            }
+        }
+    }, [address]);
+    (0, react_2.useEffect)(() => {
+        if (!copied)
+            return;
+        const timer = setTimeout(() => setCopied(false), 2000);
+        return () => clearTimeout(timer);
+    }, [copied]);
+    // Close popover on Escape key
+    (0, react_2.useEffect)(() => {
+        if (!popoverOpen)
+            return;
+        const handleKeyDown = (e) => {
+            if (e.key === "Escape")
+                setPopoverOpen(false);
+        };
+        document.addEventListener("keydown", handleKeyDown);
+        return () => document.removeEventListener("keydown", handleKeyDown);
+    }, [popoverOpen]);
+    // --- Connected state ---
+    if (isConnected && address) {
+        return ((0, jsx_runtime_1.jsxs)("div", { style: {
+                position: "relative",
+                display: "inline-block",
+                fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+            }, children: [(0, jsx_runtime_1.jsxs)("button", { onClick: () => setPopoverOpen(!popoverOpen), "aria-expanded": popoverOpen, "aria-haspopup": "true", style: {
+                        display: "flex",
+                        alignItems: "center",
+                        gap: 10,
+                        padding: "10px 16px",
+                        borderRadius: 12,
+                        border: `1.5px solid ${t.border}`,
+                        background: t.cardBg,
+                        color: t.text,
+                        fontSize: 14,
+                        fontWeight: 600,
+                        cursor: "pointer",
+                        letterSpacing: "-0.01em",
+                        transition: "all 150ms ease",
+                    }, children: [(0, jsx_runtime_1.jsx)("span", { style: {
+                                width: 8,
+                                height: 8,
+                                borderRadius: "50%",
+                                background: t.connectedDot,
+                                display: "inline-block",
+                                boxShadow: `0 0 6px ${t.connectedDot}`,
+                            } }), (0, jsx_runtime_1.jsx)("span", { style: { fontFamily: "'SF Mono', 'Fira Code', 'Cascadia Code', monospace", fontSize: 13 }, children: (0, utils_1.truncateAddress)(address) }), (0, jsx_runtime_1.jsx)(lucide_react_1.ChevronDown, { size: 14, color: t.textTertiary, style: { transition: "transform 200ms", transform: popoverOpen ? "rotate(180deg)" : "none" } })] }), popoverOpen && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: { position: "fixed", inset: 0, zIndex: 40 }, onClick: () => setPopoverOpen(false) }), (0, jsx_runtime_1.jsxs)("div", { role: "dialog", "aria-label": "Wallet details", onClick: e => e.stopPropagation(), style: {
+                                position: "absolute",
+                                right: 0,
+                                top: "100%",
+                                marginTop: 8,
+                                width: 320,
+                                borderRadius: 16,
+                                border: `1.5px solid ${t.border}`,
+                                background: t.cardBg,
+                                boxShadow: t.popoverShadow,
+                                zIndex: 50,
+                                overflow: "hidden",
+                            }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
+                                        padding: "16px 20px 14px",
+                                        borderBottom: `1px solid ${t.borderLight}`,
+                                        display: "flex",
+                                        alignItems: "center",
+                                        justifyContent: "space-between",
+                                    }, children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [(0, jsx_runtime_1.jsx)("span", { style: {
+                                                        width: 8,
+                                                        height: 8,
+                                                        borderRadius: "50%",
+                                                        background: t.connectedDot,
+                                                        display: "inline-block",
+                                                        boxShadow: `0 0 6px ${t.connectedDot}`,
+                                                    } }), (0, jsx_runtime_1.jsx)("span", { style: { fontSize: 13, fontWeight: 600, color: t.text, letterSpacing: "-0.01em" }, children: "Connected" })] }), chain && ((0, jsx_runtime_1.jsx)("span", { style: {
+                                                fontSize: 11,
+                                                fontWeight: 600,
+                                                padding: "3px 10px",
+                                                borderRadius: 99,
+                                                background: t.iconBg,
+                                                color: t.textSecondary,
+                                                letterSpacing: "0.02em",
+                                                textTransform: "uppercase",
+                                            }, children: chain.name }))] }), (0, jsx_runtime_1.jsxs)("div", { style: { padding: "12px 12px 16px" }, children: [(0, jsx_runtime_1.jsxs)("button", { onClick: handleCopyAddress, onMouseEnter: () => setCopyHover(true), onMouseLeave: () => setCopyHover(false), style: {
+                                                display: "flex",
+                                                alignItems: "center",
+                                                gap: 10,
+                                                width: "100%",
+                                                padding: "10px 12px",
+                                                borderRadius: 10,
+                                                border: "none",
+                                                background: copyHover ? t.copyHoverBg : "transparent",
+                                                textAlign: "left",
+                                                fontFamily: "'SF Mono', 'Fira Code', 'Cascadia Code', monospace",
+                                                fontSize: 12,
+                                                color: t.text,
+                                                cursor: "pointer",
+                                                marginBottom: 8,
+                                                wordBreak: "break-all",
+                                                lineHeight: 1.5,
+                                                transition: "background 150ms ease",
+                                            }, children: [(0, jsx_runtime_1.jsx)("span", { style: { flex: 1 }, children: address }), copied ? ((0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: 14, color: t.connectedDot, style: { flexShrink: 0 } })) : ((0, jsx_runtime_1.jsx)(lucide_react_1.Copy, { size: 14, color: t.textTertiary, style: { flexShrink: 0 } }))] }), (0, jsx_runtime_1.jsxs)("button", { onClick: handleDisconnect, onMouseEnter: () => setDisconnectHover(true), onMouseLeave: () => setDisconnectHover(false), style: {
+                                                display: "flex",
+                                                alignItems: "center",
+                                                justifyContent: "center",
+                                                gap: 8,
+                                                width: "100%",
+                                                padding: "10px 16px",
+                                                borderRadius: 10,
+                                                border: `1.5px solid ${t.disconnectBorder}`,
+                                                background: disconnectHover ? t.disconnectHoverBg : "transparent",
+                                                color: t.disconnectText,
+                                                fontSize: 13,
+                                                fontWeight: 600,
+                                                cursor: "pointer",
+                                                transition: "all 150ms ease",
+                                            }, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.LogOut, { size: 15 }), "Disconnect"] })] })] })] }))] }));
+    }
+    // --- Disconnected state ---
+    return ((0, jsx_runtime_1.jsxs)(DialogPrimitive.Root, { open: modalOpen, onOpenChange: open => {
+            setModalOpen(open);
+            if (!open)
+                resetConnectState();
+        }, children: [(0, jsx_runtime_1.jsx)(DialogPrimitive.Trigger, { asChild: true, children: (0, jsx_runtime_1.jsx)("button", { onMouseEnter: () => setBtnHover(true), onMouseLeave: () => setBtnHover(false), style: {
+                        padding: "12px 24px",
+                        borderRadius: 12,
+                        border: "none",
+                        background: btnHover ? B3_BLUE_HOVER : B3_BLUE,
+                        color: "#ffffff",
+                        fontSize: 14,
+                        fontWeight: 600,
+                        cursor: "pointer",
+                        letterSpacing: "-0.01em",
+                        transition: "all 150ms ease",
+                        boxShadow: btnHover ? `0 4px 12px ${B3_BLUE}40, 0 1px 3px rgba(0,0,0,0.1)` : `0 2px 8px ${B3_BLUE}30`,
+                        fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+                    }, children: buttonLabel }) }), (0, jsx_runtime_1.jsx)(SpinnerKeyframes, {}), (0, jsx_runtime_1.jsxs)(DialogPrimitive.Portal, { children: [(0, jsx_runtime_1.jsx)(DialogPrimitive.Overlay, { style: {
+                            position: "fixed",
+                            inset: 0,
+                            zIndex: 50,
+                            background: t.overlayBg,
+                            backdropFilter: "blur(20px)",
+                            WebkitBackdropFilter: "blur(20px)",
+                        } }), (0, jsx_runtime_1.jsxs)(DialogPrimitive.Content, { style: {
+                            position: "fixed",
+                            left: "50%",
+                            top: "50%",
+                            transform: "translate(-50%, -50%)",
+                            zIndex: 50,
+                            width: "calc(100% - 32px)",
+                            maxWidth: 400,
+                            borderRadius: 20,
+                            border: `1.5px solid ${t.border}`,
+                            background: t.cardBg,
+                            color: t.text,
+                            boxShadow: t.shadow,
+                            overflow: "hidden",
+                            fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+                        }, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
+                                    display: "flex",
+                                    alignItems: "center",
+                                    justifyContent: "space-between",
+                                    padding: "20px 24px 16px",
+                                }, children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(DialogPrimitive.Title, { style: {
+                                                    fontSize: 18,
+                                                    fontWeight: 700,
+                                                    margin: 0,
+                                                    letterSpacing: "-0.02em",
+                                                    color: t.text,
+                                                }, children: "Connect Wallet" }), (0, jsx_runtime_1.jsx)("p", { style: { fontSize: 13, color: t.textSecondary, margin: "4px 0 0", letterSpacing: "-0.01em" }, children: "Choose your preferred wallet" })] }), (0, jsx_runtime_1.jsx)(DialogPrimitive.Close, { style: {
+                                            background: t.iconBg,
+                                            border: "none",
+                                            cursor: "pointer",
+                                            padding: 8,
+                                            borderRadius: 10,
+                                            color: t.textSecondary,
+                                            display: "flex",
+                                            alignItems: "center",
+                                            justifyContent: "center",
+                                            transition: "all 150ms ease",
+                                        }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 16 }) })] }), connectError && ((0, jsx_runtime_1.jsxs)("div", { style: {
+                                    margin: "0 12px 8px",
+                                    padding: "10px 14px",
+                                    borderRadius: 10,
+                                    background: themeProp === "dark" ? "#1c1017" : "#fef2f2",
+                                    border: `1px solid ${t.disconnectBorder}`,
+                                    display: "flex",
+                                    alignItems: "center",
+                                    gap: 8,
+                                    fontSize: 13,
+                                    color: t.disconnectText,
+                                }, children: [(0, jsx_runtime_1.jsx)(lucide_react_1.AlertCircle, { size: 16, style: { flexShrink: 0 } }), (0, jsx_runtime_1.jsx)("span", { style: { flex: 1 }, children: connectError }), (0, jsx_runtime_1.jsx)("button", { onClick: () => setConnectError(null), style: { background: "none", border: "none", cursor: "pointer", color: t.disconnectText, padding: 2 }, children: (0, jsx_runtime_1.jsx)(lucide_react_1.X, { size: 14 }) })] })), (0, jsx_runtime_1.jsx)("div", { style: { padding: "0 12px 16px" }, children: connectors.length === 0 ? ((0, jsx_runtime_1.jsx)("p", { style: { padding: "40px 0", textAlign: "center", fontSize: 14, color: t.textSecondary }, children: "No wallets detected" })) : ((0, jsx_runtime_1.jsx)("div", { style: { display: "flex", flexDirection: "column", gap: 4 }, children: connectors.map(connector => {
+                                        const isLoading = connectingUid === connector.uid;
+                                        const isSuccess = connectSuccess && connectingUid === connector.uid;
+                                        const isDisabled = connectingUid !== null && connectingUid !== connector.uid;
+                                        return ((0, jsx_runtime_1.jsxs)("button", { onClick: () => !connectingUid && handleConnect(connector), onMouseEnter: () => setHoveredUid(connector.uid), onMouseLeave: () => setHoveredUid(null), style: {
+                                                display: "flex",
+                                                alignItems: "center",
+                                                gap: 14,
+                                                width: "100%",
+                                                padding: "14px 16px",
+                                                borderRadius: 14,
+                                                border: isLoading
+                                                    ? `1.5px solid ${B3_BLUE}`
+                                                    : isSuccess
+                                                        ? `1.5px solid ${t.connectedDot}`
+                                                        : hoveredUid === connector.uid && !isDisabled
+                                                            ? `1.5px solid ${B3_BLUE}40`
+                                                            : "1.5px solid transparent",
+                                                background: isLoading
+                                                    ? themeProp === "dark"
+                                                        ? "#1a1a30"
+                                                        : "#eff6ff"
+                                                    : isSuccess
+                                                        ? themeProp === "dark"
+                                                            ? "#0a1f15"
+                                                            : "#ecfdf5"
+                                                        : hoveredUid === connector.uid && !isDisabled
+                                                            ? t.hoverBg
+                                                            : "transparent",
+                                                textAlign: "left",
+                                                cursor: isDisabled ? "default" : "pointer",
+                                                color: t.text,
+                                                opacity: isDisabled ? 0.4 : 1,
+                                                transition: "all 150ms ease",
+                                            }, children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                                                        width: 44,
+                                                        height: 44,
+                                                        borderRadius: 12,
+                                                        background: t.iconBg,
+                                                        display: "flex",
+                                                        alignItems: "center",
+                                                        justifyContent: "center",
+                                                        flexShrink: 0,
+                                                        border: `1px solid ${t.borderLight}`,
+                                                    }, children: getWalletIcon(connector.name, 24) }), (0, jsx_runtime_1.jsxs)("div", { style: { flex: 1, minWidth: 0 }, children: [(0, jsx_runtime_1.jsx)("div", { style: { fontSize: 14, fontWeight: 600, letterSpacing: "-0.01em" }, children: connector.name }), isLoading && ((0, jsx_runtime_1.jsx)("div", { style: { fontSize: 12, color: B3_BLUE, marginTop: 2 }, children: "Waiting for approval..." })), isSuccess && ((0, jsx_runtime_1.jsx)("div", { style: { fontSize: 12, color: t.connectedDot, marginTop: 2 }, children: "Connected" }))] }), isLoading && ((0, jsx_runtime_1.jsx)(lucide_react_1.Loader2, { size: 18, color: B3_BLUE, style: { flexShrink: 0, animation: "b3-spin 1s linear infinite" } })), isSuccess && (0, jsx_runtime_1.jsx)(lucide_react_1.Check, { size: 18, color: t.connectedDot, style: { flexShrink: 0 } }), !isLoading && !isSuccess && !connector.isInstalled && ((0, jsx_runtime_1.jsx)("span", { style: {
+                                                        fontSize: 11,
+                                                        fontWeight: 600,
+                                                        padding: "4px 10px",
+                                                        borderRadius: 99,
+                                                        background: t.badgeInstallBg,
+                                                        color: t.badgeInstallText,
+                                                        letterSpacing: "0.01em",
+                                                    }, children: "Install" }))] }, connector.uid));
+                                    }) })) }), (0, jsx_runtime_1.jsxs)("div", { style: {
+                                    padding: "12px 24px 16px",
+                                    borderTop: `1px solid ${t.borderLight}`,
+                                    display: "flex",
+                                    alignItems: "center",
+                                    justifyContent: "center",
+                                    gap: 6,
+                                }, children: [(0, jsx_runtime_1.jsx)("img", { src: "https://cdn.b3.fun/b3_logo.svg", alt: "B3", width: 16, height: 16 }), (0, jsx_runtime_1.jsx)("span", { style: {
+                                            fontSize: 11,
+                                            fontWeight: 700,
+                                            color: B3_BLUE,
+                                            letterSpacing: "0.06em",
+                                            textTransform: "uppercase",
+                                        }, children: "Powered by B3" })] })] })] })] }));
+}

package/dist/cjs/wallet/react/components/WalletProvider.d.ts

@@ -0,0 +1,35 @@
+import { QueryClient } from "@tanstack/react-query";
+import { type Config, type CreateConnectorFn } from "wagmi";
+import type { Chain } from "viem";
+export interface WalletProviderProps {
+    children: React.ReactNode;
+    /**
+     * Chains to support. Defaults to SDK's supportedChains.
+     * Must be memoized or defined outside the component — inline arrays cause the
+     * wagmi config to rebuild on every render, losing wallet connection state.
+     */
+    chains?: Chain[];
+    /**
+     * Wagmi connectors. Must be memoized or defined outside the component — inline
+     * arrays cause the wagmi config to rebuild on every render, losing wallet connection state.
+     */
+    connectors?: CreateConnectorFn[];
+    /**
+     * Optional RPC URL overrides per chain ID.
+     * Must be memoized or defined outside the component — inline objects cause the
+     * wagmi config to rebuild on every render, losing wallet connection state.
+     */
+    rpcUrls?: Record<number, string>;
+    /** Escape hatch: pass a fully custom wagmi config. Overrides chains/connectors/rpcUrls. */
+    wagmiConfig?: Config;
+    /** Provide your own QueryClient for React Query. Defaults to an internal instance. */
+    queryClient?: QueryClient;
+    /** Whether to auto-reconnect the last wallet on mount. Defaults to false. */
+    reconnectOnMount?: boolean;
+}
+/**
+ * Standalone wallet connection provider.
+ * Wraps ThirdwebProvider, WagmiProvider, and QueryClientProvider.
+ * Use wagmi hooks (useAccount, useConnect, useDisconnect) directly inside.
+ */
+export declare function WalletProvider({ children, chains, connectors, rpcUrls, wagmiConfig: wagmiConfigProp, queryClient: queryClientProp, reconnectOnMount, }: WalletProviderProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/wallet/react/components/WalletProvider.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WalletProvider = WalletProvider;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_query_1 = require("@tanstack/react-query");
+const react_1 = require("react");
+const react_2 = require("thirdweb/react");
+const wagmi_1 = require("wagmi");
+const createWalletConfig_1 = require("../../utils/createWalletConfig");
+/**
+ * Standalone wallet connection provider.
+ * Wraps ThirdwebProvider, WagmiProvider, and QueryClientProvider.
+ * Use wagmi hooks (useAccount, useConnect, useDisconnect) directly inside.
+ */
+function WalletProvider({ children, chains, connectors, rpcUrls, wagmiConfig: wagmiConfigProp, queryClient: queryClientProp, reconnectOnMount = false, }) {
+    const [defaultQueryClient] = (0, react_1.useState)(() => new react_query_1.QueryClient());
+    const queryClient = queryClientProp ?? defaultQueryClient;
+    const wagmiConfig = (0, react_1.useMemo)(() => wagmiConfigProp ?? (0, createWalletConfig_1.createWalletConfig)({ chains, connectors, rpcUrls }), [wagmiConfigProp, chains, connectors, rpcUrls]);
+    return ((0, jsx_runtime_1.jsx)(react_2.ThirdwebProvider, { children: (0, jsx_runtime_1.jsx)(wagmi_1.WagmiProvider, { config: wagmiConfig, reconnectOnMount: reconnectOnMount, children: (0, jsx_runtime_1.jsx)(react_query_1.QueryClientProvider, { client: queryClient, children: children }) }) }));
+}

package/dist/cjs/wallet/react/hooks/useWalletDisconnect.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Disconnect the current wallet via wagmi.
+ * Consumers should use this instead of wagmi's useDisconnect directly
+ * to ensure a consistent disconnect API across the wallet module.
+ *
+ * Note: this only disconnects the wagmi layer. When used inside B3Provider,
+ * the thirdweb auth session is managed separately by B3Provider's own logout
+ * flow (useAuthentication). ConnectWallet is intended for standalone
+ * WalletProvider usage where thirdweb auth is not involved.
+ */
+export declare function useWalletDisconnect(): {
+    disconnect: () => void;
+};

package/dist/cjs/wallet/react/hooks/useWalletDisconnect.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useWalletDisconnect = useWalletDisconnect;
+const react_1 = require("react");
+const wagmi_1 = require("wagmi");
+/**
+ * Disconnect the current wallet via wagmi.
+ * Consumers should use this instead of wagmi's useDisconnect directly
+ * to ensure a consistent disconnect API across the wallet module.
+ *
+ * Note: this only disconnects the wagmi layer. When used inside B3Provider,
+ * the thirdweb auth session is managed separately by B3Provider's own logout
+ * flow (useAuthentication). ConnectWallet is intended for standalone
+ * WalletProvider usage where thirdweb auth is not involved.
+ */
+function useWalletDisconnect() {
+    const { disconnect: wagmiDisconnect } = (0, wagmi_1.useDisconnect)();
+    const disconnect = (0, react_1.useCallback)(() => {
+        wagmiDisconnect();
+    }, [wagmiDisconnect]);
+    return { disconnect };
+}

package/dist/cjs/wallet/react/hooks/useWalletState.d.ts

@@ -0,0 +1,31 @@
+import type { Chain } from "viem";
+import type { Connector } from "wagmi";
+export interface WalletConnector {
+    /** Display name of the wallet */
+    name: string;
+    /** Unique identifier for this connector instance */
+    uid: string;
+    /** Whether the wallet extension/app is detected in the browser */
+    isInstalled: boolean;
+    /** Connect using this connector. Returns a promise that resolves on success or rejects on failure/rejection. */
+    connect: () => Promise<void>;
+    /** Raw wagmi connector for advanced use */
+    connector: Connector;
+}
+export interface WalletState {
+    /** Connected wallet address, or undefined if not connected */
+    address: string | undefined;
+    /** Whether a wallet is currently connected */
+    isConnected: boolean;
+    /** Current chain the wallet is connected to */
+    chain: Chain | undefined;
+    /** Whether a connection attempt is in progress */
+    isPending: boolean;
+    /** Available wallet connectors, deduplicated by name */
+    connectors: WalletConnector[];
+}
+/**
+ * Unified wallet state from both thirdweb and wagmi layers.
+ * Provides available connectors with install status and connect functions.
+ */
+export declare function useWalletState(): WalletState;