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

package/src/wallet/react/components/WalletProvider.tsx

@@ -0,0 +1,64 @@
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { useMemo, useState } from "react";
+import { ThirdwebProvider } from "thirdweb/react";
+import { type Config, WagmiProvider, type CreateConnectorFn } from "wagmi";
+import type { Chain } from "viem";
+import { createWalletConfig } from "../../utils/createWalletConfig";
+
+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 function WalletProvider({
+  children,
+  chains,
+  connectors,
+  rpcUrls,
+  wagmiConfig: wagmiConfigProp,
+  queryClient: queryClientProp,
+  reconnectOnMount = false,
+}: WalletProviderProps) {
+  const [defaultQueryClient] = useState(() => new QueryClient());
+  const queryClient = queryClientProp ?? defaultQueryClient;
+
+  const wagmiConfig = useMemo(
+    () => wagmiConfigProp ?? createWalletConfig({ chains, connectors, rpcUrls }),
+    [wagmiConfigProp, chains, connectors, rpcUrls],
+  );
+
+  return (
+    <ThirdwebProvider>
+      <WagmiProvider config={wagmiConfig} reconnectOnMount={reconnectOnMount}>
+        <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+      </WagmiProvider>
+    </ThirdwebProvider>
+  );
+}

package/src/wallet/react/hooks/useWalletDisconnect.ts

@@ -0,0 +1,22 @@
+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/src/wallet/react/hooks/useWalletState.ts

@@ -0,0 +1,93 @@
+import { useEffect, useMemo, useRef } from "react";
+import { useAccount, useConnect, useConnectors } from "wagmi";
+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 function useWalletState(): WalletState {
+  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: WalletConnector[] = useMemo(() => {
+    const seen = new Set<string>();
+    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: Connector): boolean {
+  // 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/src/wallet/react/index.ts

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

package/src/wallet/utils/createWalletConfig.ts

@@ -0,0 +1,39 @@
+import { supportedChains } from "@b3dotfun/sdk/shared/constants/chains/supported";
+import { http } from "viem";
+import { createConfig, type CreateConnectorFn } from "wagmi";
+import { coinbaseWallet, injected } from "wagmi/connectors";
+import type { Chain } from "viem";
+
+/** Default connectors: injected (MetaMask, Rabby, Brave, etc.) + Coinbase Wallet. */
+const DEFAULT_CONNECTORS: CreateConnectorFn[] = [injected(), coinbaseWallet({ appName: "B3" })];
+
+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 function createWalletConfig(options: CreateWalletConfigOptions = {}) {
+  const { chains = supportedChains, connectors = DEFAULT_CONNECTORS, rpcUrls } = options;
+
+  if (chains.length === 0) {
+    throw new Error("createWalletConfig: at least one chain must be provided");
+  }
+
+  return createConfig({
+    chains: [chains[0], ...chains.slice(1)],
+    transports: Object.fromEntries(chains.map(chain => [chain.id, http(rpcUrls?.[chain.id])])),
+    connectors,
+  });
+}