@b3dotfun/sdk 0.1.69 → 0.1.70-alpha.10

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

@@ -0,0 +1,431 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { WalletCoinbase, WalletMetamask, WalletPhantom, WalletRabby, WalletRainbow, WalletWalletConnect, } from "@web3icons/react";
+import { truncateAddress } from "../../../shared/utils/index.js";
+import { AlertCircle, Check, ChevronDown, Copy, Loader2, LogOut, Wallet, X } from "lucide-react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useWalletDisconnect } from "../hooks/useWalletDisconnect.js";
+import { useWalletState } from "../hooks/useWalletState.js";
+/** Injects the spinner keyframe once into the document head (idempotent via DOM id). */
+function SpinnerKeyframes() {
+    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 _jsx(WalletMetamask, { width: size, height: size });
+        case "coinbase wallet":
+            return _jsx(WalletCoinbase, { width: size, height: size });
+        case "phantom":
+            return _jsx(WalletPhantom, { width: size, height: size });
+        case "walletconnect":
+            return _jsx(WalletWalletConnect, { width: size, height: size });
+        case "rabby wallet":
+        case "rabby":
+            return _jsx(WalletRabby, { width: size, height: size });
+        case "rainbow":
+            return _jsx(WalletRainbow, { width: size, height: size });
+        default:
+            return _jsx(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.
+ */
+export function ConnectWallet({ theme: themeProp = "light", buttonLabel = "Connect Wallet" }) {
+    const { address, isConnected, chain, connectors } = useWalletState();
+    const { disconnect } = useWalletDisconnect();
+    const [modalOpen, setModalOpen] = useState(false);
+    const [popoverOpen, setPopoverOpen] = useState(false);
+    const [copied, setCopied] = useState(false);
+    const [hoveredUid, setHoveredUid] = useState(null);
+    const [btnHover, setBtnHover] = useState(false);
+    const [disconnectHover, setDisconnectHover] = useState(false);
+    const [copyHover, setCopyHover] = useState(false);
+    const [connectingUid, setConnectingUid] = useState(null);
+    const [connectError, setConnectError] = useState(null);
+    const [connectSuccess, setConnectSuccess] = useState(false);
+    const t = theme[themeProp];
+    const successTimerRef = useRef(null);
+    const resetConnectState = useCallback(() => {
+        setConnectingUid(null);
+        setConnectError(null);
+        setConnectSuccess(false);
+        if (successTimerRef.current) {
+            clearTimeout(successTimerRef.current);
+            successTimerRef.current = null;
+        }
+    }, []);
+    // Cleanup success timer on unmount
+    useEffect(() => {
+        return () => {
+            if (successTimerRef.current)
+                clearTimeout(successTimerRef.current);
+        };
+    }, []);
+    const handleConnect = 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 = useCallback(() => {
+        disconnect();
+        setPopoverOpen(false);
+    }, [disconnect]);
+    const handleCopyAddress = useCallback(async () => {
+        if (address) {
+            try {
+                await navigator.clipboard.writeText(address);
+                setCopied(true);
+            }
+            catch {
+                // Clipboard API may be denied
+            }
+        }
+    }, [address]);
+    useEffect(() => {
+        if (!copied)
+            return;
+        const timer = setTimeout(() => setCopied(false), 2000);
+        return () => clearTimeout(timer);
+    }, [copied]);
+    // Close popover on Escape key
+    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 (_jsxs("div", { style: {
+                position: "relative",
+                display: "inline-block",
+                fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
+            }, children: [_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: [_jsx("span", { style: {
+                                width: 8,
+                                height: 8,
+                                borderRadius: "50%",
+                                background: t.connectedDot,
+                                display: "inline-block",
+                                boxShadow: `0 0 6px ${t.connectedDot}`,
+                            } }), _jsx("span", { style: { fontFamily: "'SF Mono', 'Fira Code', 'Cascadia Code', monospace", fontSize: 13 }, children: truncateAddress(address) }), _jsx(ChevronDown, { size: 14, color: t.textTertiary, style: { transition: "transform 200ms", transform: popoverOpen ? "rotate(180deg)" : "none" } })] }), popoverOpen && (_jsxs(_Fragment, { children: [_jsx("div", { style: { position: "fixed", inset: 0, zIndex: 40 }, onClick: () => setPopoverOpen(false) }), _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: [_jsxs("div", { style: {
+                                        padding: "16px 20px 14px",
+                                        borderBottom: `1px solid ${t.borderLight}`,
+                                        display: "flex",
+                                        alignItems: "center",
+                                        justifyContent: "space-between",
+                                    }, children: [_jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [_jsx("span", { style: {
+                                                        width: 8,
+                                                        height: 8,
+                                                        borderRadius: "50%",
+                                                        background: t.connectedDot,
+                                                        display: "inline-block",
+                                                        boxShadow: `0 0 6px ${t.connectedDot}`,
+                                                    } }), _jsx("span", { style: { fontSize: 13, fontWeight: 600, color: t.text, letterSpacing: "-0.01em" }, children: "Connected" })] }), chain && (_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 }))] }), _jsxs("div", { style: { padding: "12px 12px 16px" }, children: [_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: [_jsx("span", { style: { flex: 1 }, children: address }), copied ? (_jsx(Check, { size: 14, color: t.connectedDot, style: { flexShrink: 0 } })) : (_jsx(Copy, { size: 14, color: t.textTertiary, style: { flexShrink: 0 } }))] }), _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: [_jsx(LogOut, { size: 15 }), "Disconnect"] })] })] })] }))] }));
+    }
+    // --- Disconnected state ---
+    return (_jsxs(DialogPrimitive.Root, { open: modalOpen, onOpenChange: open => {
+            setModalOpen(open);
+            if (!open)
+                resetConnectState();
+        }, children: [_jsx(DialogPrimitive.Trigger, { asChild: true, children: _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 }) }), _jsx(SpinnerKeyframes, {}), _jsxs(DialogPrimitive.Portal, { children: [_jsx(DialogPrimitive.Overlay, { style: {
+                            position: "fixed",
+                            inset: 0,
+                            zIndex: 50,
+                            background: t.overlayBg,
+                            backdropFilter: "blur(20px)",
+                            WebkitBackdropFilter: "blur(20px)",
+                        } }), _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: [_jsxs("div", { style: {
+                                    display: "flex",
+                                    alignItems: "center",
+                                    justifyContent: "space-between",
+                                    padding: "20px 24px 16px",
+                                }, children: [_jsxs("div", { children: [_jsx(DialogPrimitive.Title, { style: {
+                                                    fontSize: 18,
+                                                    fontWeight: 700,
+                                                    margin: 0,
+                                                    letterSpacing: "-0.02em",
+                                                    color: t.text,
+                                                }, children: "Connect Wallet" }), _jsx("p", { style: { fontSize: 13, color: t.textSecondary, margin: "4px 0 0", letterSpacing: "-0.01em" }, children: "Choose your preferred wallet" })] }), _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: _jsx(X, { size: 16 }) })] }), connectError && (_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: [_jsx(AlertCircle, { size: 16, style: { flexShrink: 0 } }), _jsx("span", { style: { flex: 1 }, children: connectError }), _jsx("button", { onClick: () => setConnectError(null), style: { background: "none", border: "none", cursor: "pointer", color: t.disconnectText, padding: 2 }, children: _jsx(X, { size: 14 }) })] })), _jsx("div", { style: { padding: "0 12px 16px" }, children: connectors.length === 0 ? (_jsx("p", { style: { padding: "40px 0", textAlign: "center", fontSize: 14, color: t.textSecondary }, children: "No wallets detected" })) : (_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 (_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: [_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) }), _jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [_jsx("div", { style: { fontSize: 14, fontWeight: 600, letterSpacing: "-0.01em" }, children: connector.name }), isLoading && (_jsx("div", { style: { fontSize: 12, color: B3_BLUE, marginTop: 2 }, children: "Waiting for approval..." })), isSuccess && (_jsx("div", { style: { fontSize: 12, color: t.connectedDot, marginTop: 2 }, children: "Connected" }))] }), isLoading && (_jsx(Loader2, { size: 18, color: B3_BLUE, style: { flexShrink: 0, animation: "b3-spin 1s linear infinite" } })), isSuccess && _jsx(Check, { size: 18, color: t.connectedDot, style: { flexShrink: 0 } }), !isLoading && !isSuccess && !connector.isInstalled && (_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));
+                                    }) })) }), _jsxs("div", { style: {
+                                    padding: "12px 24px 16px",
+                                    borderTop: `1px solid ${t.borderLight}`,
+                                    display: "flex",
+                                    alignItems: "center",
+                                    justifyContent: "center",
+                                    gap: 6,
+                                }, children: [_jsx("img", { src: "https://cdn.b3.fun/b3_logo.svg", alt: "B3", width: 16, height: 16 }), _jsx("span", { style: {
+                                            fontSize: 11,
+                                            fontWeight: 700,
+                                            color: B3_BLUE,
+                                            letterSpacing: "0.06em",
+                                            textTransform: "uppercase",
+                                        }, children: "Powered by B3" })] })] })] })] }));
+}

package/dist/esm/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/esm/wallet/react/components/WalletProvider.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { useMemo, useState } from "react";
+import { ThirdwebProvider } from "thirdweb/react";
+import { WagmiProvider } from "wagmi";
+import { createWalletConfig } from "../../utils/createWalletConfig.js";
+/**
+ * Standalone wallet connection provider.
+ * Wraps ThirdwebProvider, WagmiProvider, and QueryClientProvider.
+ * Use wagmi hooks (useAccount, useConnect, useDisconnect) directly inside.
+ */
+export function WalletProvider({ children, chains, connectors, rpcUrls, wagmiConfig: wagmiConfigProp, queryClient: queryClientProp, reconnectOnMount = false, }) {
+    const [defaultQueryClient] = useState(() => new QueryClient());
+    const queryClient = queryClientProp ?? defaultQueryClient;
+    const wagmiConfig = useMemo(() => wagmiConfigProp ?? createWalletConfig({ chains, connectors, rpcUrls }), [wagmiConfigProp, chains, connectors, rpcUrls]);
+    return (_jsx(ThirdwebProvider, { children: _jsx(WagmiProvider, { config: wagmiConfig, reconnectOnMount: reconnectOnMount, children: _jsx(QueryClientProvider, { client: queryClient, children: children }) }) }));
+}

package/dist/esm/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/esm/wallet/react/hooks/useWalletDisconnect.js

@@ -0,0 +1,19 @@
+import { useCallback } from "react";
+import { useDisconnect } from "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.
+ */
+export function useWalletDisconnect() {
+    const { disconnect: wagmiDisconnect } = useDisconnect();
+    const disconnect = useCallback(() => {
+        wagmiDisconnect();
+    }, [wagmiDisconnect]);
+    return { disconnect };
+}

package/dist/esm/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;

package/dist/esm/wallet/react/hooks/useWalletState.js

@@ -0,0 +1,60 @@
+import { useEffect, useMemo, useRef } from "react";
+import { useAccount, useConnect, useConnectors } from "wagmi";
+/**
+ * Unified wallet state from both thirdweb and wagmi layers.
+ * Provides available connectors with install status and connect functions.
+ */
+export function useWalletState() {
+    const { address, isConnected, chain } = useAccount();
+    const { connectAsync, isPending } = useConnect();
+    const wagmiConnectors = useConnectors();
+    // Ref to avoid connectAsync in useMemo deps — wagmi returns a new reference on state
+    // changes, which would recreate the connectors array on every render.
+    const connectAsyncRef = useRef(connectAsync);
+    useEffect(() => {
+        connectAsyncRef.current = connectAsync;
+    });
+    const connectors = useMemo(() => {
+        const seen = new Set();
+        const mapped = wagmiConnectors
+            .filter(c => {
+            // Hide generic "Injected" — it duplicates the actual wallet (MetaMask, Rabby, etc.)
+            if (c.name === "Injected")
+                return false;
+            if (seen.has(c.name))
+                return false;
+            seen.add(c.name);
+            return true;
+        })
+            .map(connector => ({
+            name: connector.name,
+            uid: connector.uid,
+            isInstalled: isConnectorInstalled(connector),
+            connect: async () => {
+                await connectAsyncRef.current({ connector });
+            },
+            connector,
+        }));
+        // Sort: installed connectors first
+        return mapped.sort((a, b) => (a.isInstalled === b.isInstalled ? 0 : a.isInstalled ? -1 : 1));
+    }, [wagmiConnectors]);
+    return { address, isConnected, chain, isPending, connectors };
+}
+/** Check if a wallet connector's provider is available in the browser. */
+function isConnectorInstalled(connector) {
+    // WalletConnect is always "available" (uses QR code, no extension needed)
+    if (connector.id === "walletConnect")
+        return true;
+    // For injected connectors, check if any provider exists. This may report
+    // false positives (e.g., Rabby shows as installed when only MetaMask is)
+    // because multiple injected connectors share window.ethereum. This is
+    // intentional — we surface all options and let the wallet handle conflicts.
+    if (connector.type === "injected") {
+        return typeof window !== "undefined" && !!window.ethereum;
+    }
+    // Coinbase Wallet SDK works without extension (has mobile/QR fallback)
+    if (connector.id === "coinbaseWalletSDK")
+        return true;
+    // Default: assume available (better UX than hiding connectors)
+    return true;
+}

package/dist/esm/wallet/react/index.d.ts

@@ -0,0 +1,5 @@
+export { WalletProvider, type WalletProviderProps } from "./components/WalletProvider";
+export { createWalletConfig, type CreateWalletConfigOptions } from "../utils/createWalletConfig";
+export { useWalletDisconnect } from "./hooks/useWalletDisconnect";
+export { useWalletState, type WalletConnector, type WalletState } from "./hooks/useWalletState";
+export { ConnectWallet, type ConnectWalletProps } from "./components/ConnectWallet";

package/dist/esm/wallet/react/index.js

@@ -0,0 +1,8 @@
+// Provider
+export { WalletProvider } from "./components/WalletProvider.js";
+export { createWalletConfig } from "../utils/createWalletConfig.js";
+// Hooks
+export { useWalletDisconnect } from "./hooks/useWalletDisconnect.js";
+export { useWalletState } from "./hooks/useWalletState.js";
+// Components
+export { ConnectWallet } from "./components/ConnectWallet.js";

package/dist/esm/wallet/utils/createWalletConfig.d.ts

@@ -0,0 +1,21 @@
+import { type CreateConnectorFn } from "wagmi";
+import type { Chain } from "viem";
+export interface CreateWalletConfigOptions {
+    /** Chains to support. Defaults to SDK's supportedChains. Must be non-empty. */
+    chains?: Chain[];
+    /**
+     * Wagmi connectors. Defaults to injected + Coinbase Wallet.
+     * Must be memoized if passed to WalletProvider — inline arrays
+     * will cause the config to rebuild on every render, losing wallet connection state.
+     */
+    connectors?: CreateConnectorFn[];
+    /** Optional RPC URL overrides per chain ID. */
+    rpcUrls?: Record<number, string>;
+}
+/**
+ * Creates a generic wagmi config with sensible defaults.
+ * No ecosystem wallet, no B3-specific concerns.
+ */
+export declare function createWalletConfig(options?: CreateWalletConfigOptions): import("wagmi").Config<readonly [Chain, ...Chain[]], {
+    [k: string]: import("viem").HttpTransport<undefined, false>;
+}, CreateConnectorFn[]>;