@b3dotfun/sdk 0.0.46 → 0.0.47-test.4

package/src/global-account/react/hooks/useAuthentication.ts

@@ -1,124 +1,173 @@
 import app from "@b3dotfun/sdk/global-account/app";
 import { authenticateWithB3JWT } from "@b3dotfun/sdk/global-account/bsmnt";
-import { useAuthStore, useB3 } from "@b3dotfun/sdk/global-account/react";
+import { useAuthStore, useSiwe } from "@b3dotfun/sdk/global-account/react";
 import { ecosystemWalletId } from "@b3dotfun/sdk/shared/constants";
-import { b3MainnetThirdWeb } from "@b3dotfun/sdk/shared/constants/chains/supported";
 import { debugB3React } from "@b3dotfun/sdk/shared/utils/debug";
 import { client } from "@b3dotfun/sdk/shared/utils/thirdweb";
-import { useEffect, useRef } from "react";
-import { useActiveWallet, useAutoConnect, useConnectedWallets, useDisconnect } from "thirdweb/react";
-import { ecosystemWallet } from "thirdweb/wallets";
+import { ConnectionOptions } from "@thirdweb-dev/wagmi-adapter";
+import { getConnectors } from "@wagmi/core";
+import { useCallback, useEffect, useRef } from "react";
+import {
+  useActiveWallet,
+  useAutoConnect,
+  useConnectedWallets,
+  useDisconnect,
+  useSetActiveWallet,
+} from "thirdweb/react";
+import { ecosystemWallet, Wallet } from "thirdweb/wallets";
 import { preAuthenticate } from "thirdweb/wallets/in-app";
-import { useConnect } from "./useConnect";
-import { useSiwe } from "./useSiwe";
+import { useAccount, useConnect } from "wagmi";
+import { useUserQuery } from "./useUserQuery";
+import { useWagmiConfig } from "./useWagmiConfig";
 
 const debug = debugB3React("useAuthentication");
 
-export function useAuthentication(partnerId: string, loginWithSiwe?: boolean) {
+export function useAuthentication(partnerId: string) {
   const { disconnect } = useDisconnect();
   const wallets = useConnectedWallets();
   const activeWallet = useActiveWallet();
-  const { authenticate } = useSiwe();
-  const { setUser } = useB3();
   const isAuthenticated = useAuthStore(state => state.isAuthenticated);
   const setIsAuthenticated = useAuthStore(state => state.setIsAuthenticated);
-  const setIsConnecting = useAuthStore(state => state.setIsConnecting);
   const setIsConnected = useAuthStore(state => state.setIsConnected);
   const isConnecting = useAuthStore(state => state.isConnecting);
   const isConnected = useAuthStore(state => state.isConnected);
-  const useAutoConnectLoadingPrevious = useRef(false);
-  const setIsAuthenticating = useAuthStore(state => state.setIsAuthenticating);
   const isAuthenticating = useAuthStore(state => state.isAuthenticating);
-  const hasStartedConnecting = useAuthStore(state => state.hasStartedConnecting);
+  const setIsAuthenticating = useAuthStore(state => state.setIsAuthenticating);
   const setHasStartedConnecting = useAuthStore(state => state.setHasStartedConnecting);
-  const { connect } = useConnect(partnerId, b3MainnetThirdWeb);
+  const setActiveWallet = useSetActiveWallet();
+  const hasStartedConnecting = useAuthStore(state => state.hasStartedConnecting);
+  const { authenticate } = useSiwe();
+  const { user, setUser } = useUserQuery();
+  const useAutoConnectLoadingPrevious = useRef(false);
+  const wagmiConfig = useWagmiConfig(partnerId);
+  const { connect } = useConnect();
+  const activeWagmiAccount = useAccount();
+  debug("@@activeWagmiAccount", activeWagmiAccount);
 
   const wallet = ecosystemWallet(ecosystemWalletId, {
     partnerId: partnerId,
   });
 
-  const { isLoading: useAutoConnectLoading } = useAutoConnect({
-    client,
-    wallets: [wallet],
-    onConnect: async wallet => {
+  const syncWagmi = useCallback(async () => {
+    function syncWagmiFunc() {
+      const connectors = getConnectors(wagmiConfig);
+      debug("@@syncWagmi", {
+        connectors,
+        wallets,
+      });
+
+      // For each that matchs a TW wallet on wallets, connect to the wagmi connector
+      // or, since ecosystem wallets is separate, connect those via in-app-wallet from wagmi
+      connectors.forEach(async connector => {
+        const twWallet = wallets.find(wallet => wallet.id === connector.id || connector.id === "in-app-wallet");
+        if (
+          twWallet &&
+          // If it's not an in-app wallet or it is the ecosystem wallet, connect
+          (connector.id !== "in-app-wallet" || (connector.id === "in-app-wallet" && twWallet.id === ecosystemWalletId))
+        ) {
+          try {
+            const options = {
+              wallet: twWallet, // the connected wallet
+            } satisfies ConnectionOptions;
+            debug("@@syncWagmi:connecting", { twWallet, connector });
+            connect({
+              connector,
+              ...options,
+            });
+          } catch (error) {
+            console.error("@@syncWagmi:error", error);
+          }
+        } else {
+          debug("@@syncWagmi:not-connecting", connector);
+        }
+      });
+    }
+    syncWagmiFunc();
+    // wagmi config shouldn't change
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [partnerId, wallets]);
+
+  useEffect(() => {
+    syncWagmi();
+  }, [wallets, syncWagmi]);
+
+  const authenticateUser = useCallback(
+    async (wallet?: Wallet) => {
       setHasStartedConnecting(true);
 
+      const account = wallet ? wallet.getAccount() : activeWallet?.getAccount();
+      if (!account) {
+        throw new Error("No account found during auto-connect");
+      }
+      if (!account) {
+        throw new Error("No account found during auto-connect");
+      }
+
+      // Try to re-authenticate first
       try {
-        setIsConnected(true);
-        if (!loginWithSiwe) {
-          debug("Skipping SIWE login", { loginWithSiwe });
-          setIsAuthenticated(true);
+        const userAuth = await app.reAuthenticate();
+        setUser(userAuth.user);
+        setIsAuthenticated(true);
+        setIsAuthenticating(false);
+        debug("Re-authenticated successfully", { userAuth });
+
+        // Authenticate on BSMNT with B3 JWT
+        const b3Jwt = await authenticateWithB3JWT(userAuth.accessToken);
+        debug("@@b3Jwt", b3Jwt);
+      } catch (error) {
+        // If re-authentication fails, try fresh authentication
+        debug("Re-authentication failed, attempting fresh authentication");
+        const userAuth = await authenticate(account, partnerId);
+        setUser(userAuth.user);
+        setIsAuthenticated(true);
+        setIsAuthenticating(false);
+        debug("Fresh authentication successful", { userAuth });
+
+        // Authenticate on BSMNT with B3 JWT
+        const b3Jwt = await authenticateWithB3JWT(userAuth.accessToken);
+        debug("@@b3Jwt", b3Jwt);
+      }
+    },
+    [activeWallet, partnerId, authenticate, setIsAuthenticated, setIsAuthenticating, setUser, setHasStartedConnecting],
+  );
 
-          setIsAuthenticating(false);
-          return;
-        }
-        debug("setIsAuthenticating:true:4");
-        const account = await wallet.getAccount();
-        if (!account) {
-          throw new Error("No account found during auto-connect");
-        }
+  const onConnect = useCallback(
+    async (wallet: Wallet) => {
+      debug("@@useAuthentication:onConnect", { wallet });
 
-        // Try to re-authenticate first
-        try {
-          const userAuth = await app.reAuthenticate();
-          setUser(userAuth.user);
-          setIsAuthenticated(true);
-          setIsAuthenticating(false);
-          debug("Re-authenticated successfully", { userAuth });
-
-          // Authenticate on BSMNT with B3 JWT
-          const b3Jwt = await authenticateWithB3JWT(userAuth.accessToken);
-          console.log("@@b3Jwt", b3Jwt);
-        } catch (error) {
-          // If re-authentication fails, try fresh authentication
-          debug("Re-authentication failed, attempting fresh authentication");
-          const userAuth = await authenticate(account, partnerId);
-          setUser(userAuth.user);
-          setIsAuthenticated(true);
-          setIsAuthenticating(false);
-          debug("Fresh authentication successful", { userAuth });
-
-          // Authenticate on BSMNT with B3 JWT
-          const b3Jwt = await authenticateWithB3JWT(userAuth.accessToken);
-          console.log("@@b3Jwt", b3Jwt);
-        }
+      try {
+        setHasStartedConnecting(true);
+        setIsConnected(true);
+        setIsAuthenticating(true);
+        await setActiveWallet(wallet);
+        await authenticateUser(wallet);
       } catch (error) {
-        debug("Auto-connect authentication failed", { error });
+        debug("@@useAuthentication:onConnect:failed", { error });
         setIsAuthenticated(false);
-        debug("setIsAuthenticating:false:4");
-        setUser();
+        setUser(undefined);
+      } finally {
+        setIsAuthenticating(false);
       }
-      setIsAuthenticating(false);
-    },
-  });
 
-  /**
-   * useAutoConnectLoading starts as false
-   */
-  useEffect(() => {
-    if (!useAutoConnectLoading && useAutoConnectLoadingPrevious.current && !hasStartedConnecting) {
-      setIsAuthenticating(false);
-    }
-    useAutoConnectLoadingPrevious.current = useAutoConnectLoading;
-  }, [useAutoConnectLoading, hasStartedConnecting, setIsAuthenticating]);
-
-  // Ensure isAuthenticating stays true until we're fully ready
-  useEffect(() => {
-    if (useAutoConnectLoading) {
-      setIsConnecting(true);
-    } else if (!isAuthenticated) {
-      // Only set isAuthenticating to false if we're not authenticated
-      // This prevents the flicker state where both isAuthenticating and isAuthenticated are false
-      const timeout = setTimeout(() => {
-        debug("setIsAuthenticating:false:5a");
-        setIsConnecting(false);
-      }, 100); // Add a small delay to prevent quick flickers
-      return () => clearTimeout(timeout);
-    } else {
-      debug("setIsAuthenticating:false:5b");
-      setIsConnecting(false);
-    }
-  }, [useAutoConnectLoading, isAuthenticated, setIsConnecting, setIsConnected]);
+      debug({
+        isAuthenticated,
+        isAuthenticating,
+        isConnected,
+      });
+    },
+    [
+      authenticateUser,
+      isAuthenticated,
+      isAuthenticating,
+      isConnected,
+      setActiveWallet,
+      setHasStartedConnecting,
+      setIsAuthenticated,
+      setIsAuthenticating,
+      setIsConnected,
+      setUser,
+    ],
+  );
 
   const logout = async (callback?: () => void) => {
     if (activeWallet) {
@@ -150,7 +199,23 @@ export function useAuthentication(partnerId: string, loginWithSiwe?: boolean) {
     callback?.();
   };
 
-  const isReady = isAuthenticated && !useAutoConnectLoading && !isAuthenticating;
+  const { isLoading: useAutoConnectLoading } = useAutoConnect({
+    client,
+    wallets: [wallet],
+    onConnect: onConnect,
+  });
+
+  /**
+   * useAutoConnectLoading starts as false
+   */
+  useEffect(() => {
+    if (!useAutoConnectLoading && useAutoConnectLoadingPrevious.current && !hasStartedConnecting) {
+      setIsAuthenticating(false);
+    }
+    useAutoConnectLoadingPrevious.current = useAutoConnectLoading;
+  }, [useAutoConnectLoading, hasStartedConnecting, setIsAuthenticating]);
+
+  const isReady = isAuthenticated && !isAuthenticating;
 
   return {
     logout,
@@ -160,7 +225,11 @@ export function useAuthentication(partnerId: string, loginWithSiwe?: boolean) {
     isConnected,
     wallet,
     preAuthenticate,
-    connect,
+    connect: onConnect,
     isAuthenticating,
+    onConnect,
+    user,
+    refetchUser: authenticateUser,
+    setUser,
   };
 }

package/src/global-account/react/hooks/useHandleConnectWithPrivy.tsx

@@ -1,4 +1,4 @@
-import { useConnect } from "@b3dotfun/sdk/global-account/react";
+import { useB3, useConnect } from "@b3dotfun/sdk/global-account/react";
 import { debugB3React } from "@b3dotfun/sdk/shared/utils/debug";
 import { useIdentityToken, usePrivy } from "@privy-io/react-auth";
 import { useCallback, useRef, useState } from "react";
@@ -10,7 +10,8 @@ const debug = debugB3React("@@b3:useHandleConnectWithPrivy");
  * This essentially wraps our useConnect hook to handle the Privy auth flow.
  * Currently, this is for the basement-privy strategy
  */
-export function useHandleConnectWithPrivy(partnerId: string, chain?: Chain, onSuccess?: (account: Account) => void) {
+export function useHandleConnectWithPrivy(chain?: Chain, onSuccess?: (account: Account) => void) {
+  const { partnerId } = useB3();
   if (!chain) {
     throw new Error("Chain is required");
   }

package/src/global-account/react/hooks/useUserQuery.ts

@@ -0,0 +1,95 @@
+import { Users } from "@b3dotfun/b3-api";
+import { debugB3React } from "@b3dotfun/sdk/shared/utils/debug";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+
+const debug = debugB3React("useUserQuery");
+
+const USER_QUERY_KEY = ["b3-user"];
+
+/**
+ * Retrieves the user from localStorage
+ */
+function getUserFromStorage(): Users | null {
+  if (typeof window === "undefined") {
+    return null;
+  }
+
+  try {
+    const storedUser = localStorage.getItem("b3-user");
+    return storedUser ? JSON.parse(storedUser) : null;
+  } catch (error) {
+    console.warn("Failed to restore user from localStorage:", error);
+    return null;
+  }
+}
+
+/**
+ * Saves user to localStorage
+ */
+function saveUserToStorage(user: Users | null) {
+  if (typeof window === "undefined") {
+    return;
+  }
+
+  if (user) {
+    localStorage.setItem("b3-user", JSON.stringify(user));
+  } else {
+    localStorage.removeItem("b3-user");
+  }
+}
+
+/**
+ * NOTE: THIS IS ONLY MEANT FOR INTERNAL USE, from useOnConnect
+ *
+ * Custom hook to manage user state with react-query
+ * This allows for invalidation and refetching of user data
+ */
+export function useUserQuery() {
+  const queryClient = useQueryClient();
+
+  // Query to get user data (primarily from cache/localStorage)
+  const { data: user } = useQuery<Users | null>({
+    queryKey: USER_QUERY_KEY,
+    queryFn: getUserFromStorage,
+    staleTime: Infinity, // User data doesn't go stale automatically
+    gcTime: Infinity, // Keep in cache indefinitely
+    initialData: getUserFromStorage,
+  });
+
+  // Mutation to update user
+  const setUserMutation = useMutation({
+    mutationFn: async (newUser: Users | undefined) => {
+      const userToSave = newUser ?? null;
+      saveUserToStorage(userToSave);
+      return userToSave;
+    },
+    onSuccess: data => {
+      queryClient.setQueryData(USER_QUERY_KEY, data);
+      debug("User updated", data);
+    },
+  });
+
+  // Helper function to set user (maintains backward compatibility)
+  const setUser = (newUser?: Users) => {
+    setUserMutation.mutate(newUser);
+  };
+
+  // Helper function to invalidate and refetch user
+  const refetchUser = async () => {
+    await queryClient.invalidateQueries({ queryKey: USER_QUERY_KEY });
+    return queryClient.refetchQueries({ queryKey: USER_QUERY_KEY });
+  };
+
+  // Helper function to clear user
+  const clearUser = () => {
+    setUser(undefined);
+  };
+
+  return {
+    user: user ?? undefined,
+    setUser,
+    refetchUser,
+    clearUser,
+    queryKey: USER_QUERY_KEY,
+  };
+}

package/src/global-account/react/hooks/useWagmiConfig.tsx

@@ -0,0 +1,44 @@
+import { ecosystemWalletId } from "@b3dotfun/sdk/shared/constants";
+import { supportedChains } from "@b3dotfun/sdk/shared/constants/chains/supported";
+import { client } from "@b3dotfun/sdk/shared/utils/thirdweb";
+import { inAppWalletConnector } from "@thirdweb-dev/wagmi-adapter";
+import { useMemo } from "react";
+import { http } from "viem";
+import { createConfig } from "wagmi";
+
+export function useWagmiConfig(partnerId: string, rpcUrls?: Record<number, string>) {
+  // Stringify rpcUrls for stable comparison to prevent wagmiConfig recreation
+  // when parent component passes new object references with same content
+  const rpcUrlsString = useMemo(() => (rpcUrls ? JSON.stringify(rpcUrls) : undefined), [rpcUrls]);
+
+  const ecocystemConfig = useMemo(() => {
+    return {
+      ecosystemId: ecosystemWalletId,
+      partnerId: partnerId,
+      client,
+    };
+  }, [partnerId]);
+
+  /**
+   * Creates wagmi config with optional custom RPC URLs
+   * @param rpcUrls - Optional mapping of chain IDs to RPC URLs
+   */
+  const wagmiConfig = useMemo(() => {
+    const parsedRpcUrls = rpcUrlsString ? JSON.parse(rpcUrlsString) : undefined;
+
+    return createConfig({
+      chains: [supportedChains[0], ...supportedChains.slice(1)],
+      transports: Object.fromEntries(supportedChains.map(chain => [chain.id, http(parsedRpcUrls?.[chain.id])])),
+      connectors: [
+        inAppWalletConnector({
+          ...ecocystemConfig,
+          client,
+        }),
+        // injected(),
+        // coinbaseWallet({ appName: "HypeDuel" }),
+      ],
+    });
+  }, [rpcUrlsString, ecocystemConfig]);
+
+  return wagmiConfig;
+}

package/src/global-account/react/stores/useModalStore.ts

@@ -35,8 +35,6 @@ export interface SignInWithB3ModalProps extends BaseModalProps {
   sessionKeyAddress?: Address;
   /** Unique identifier for the partner application */
   partnerId: string;
-  /** Whether to authenticate with Sign In With Ethereum */
-  loginWithSiwe?: boolean;
   /** Whether to close the modal after successful login */
   closeAfterLogin?: boolean;
   /** Source of the sign-in request */

package/src/shared/utils/index.ts

@@ -1,5 +1,4 @@
 // Export utility functions
-export * from "./auth-token";
 export * from "./cn";
 export * from "./formatNumber";
 export * from "./formatUsername";

package/dist/cjs/anyspend/react/components/common/ErrorSection.d.ts

@@ -1,6 +0,0 @@
-interface ErrorSectionProps {
-    error?: Error | null;
-    message?: string;
-}
-export declare function ErrorSection({ error, message }: ErrorSectionProps): import("react/jsx-runtime").JSX.Element | null;
-export {};

package/dist/cjs/anyspend/react/components/common/ErrorSection.js

@@ -1,12 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ErrorSection = ErrorSection;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const lucide_react_1 = require("lucide-react");
-function ErrorSection({ error, message }) {
-    if (!error && !message) {
-        return null;
-    }
-    const errorMessage = message || error?.message || "An error occurred";
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "error-section bg-as-on-surface-1 flex w-full max-w-[460px] items-center gap-2 rounded-2xl px-4 py-2", children: [(0, jsx_runtime_1.jsx)(lucide_react_1.CircleAlert, { className: "bg-as-red h-4 min-h-4 w-4 min-w-4 rounded-full p-0 text-sm font-medium text-white" }), (0, jsx_runtime_1.jsx)("div", { className: "text-as-red text-sm", children: errorMessage })] }));
-}

package/dist/cjs/notifications/index.d.ts

@@ -1,3 +0,0 @@
-export * from "./types";
-export * from "./services";
-export { getAuthToken } from "../shared/utils/auth-token";

package/dist/cjs/notifications/index.js

@@ -1,25 +0,0 @@
-"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getAuthToken = void 0;
-// Export types
-__exportStar(require("./types"), exports);
-// Export services
-__exportStar(require("./services"), exports);
-// Re-export auth token getter from shared for convenience
-// Note: Auth token is managed by B3 Global Account authentication
-var auth_token_1 = require("../shared/utils/auth-token");
-Object.defineProperty(exports, "getAuthToken", { enumerable: true, get: function () { return auth_token_1.getAuthToken; } });

package/dist/cjs/notifications/react/hooks/index.d.ts

@@ -1 +0,0 @@
-export * from "./useNotifications";

package/dist/cjs/notifications/react/hooks/index.js

@@ -1,17 +0,0 @@
-"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 __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./useNotifications"), exports);

package/dist/cjs/notifications/react/hooks/useNotifications.d.ts

@@ -1,42 +0,0 @@
-import type { UserData } from "../../types";
-/**
- * React hook for managing B3 notifications
- * Automatically uses the authenticated user's ID from JWT
- *
- * @example
- * ```tsx
- * import { useNotifications } from '../../../notifications/react';
- *
- * function NotificationSettings() {
- *   const { user, loading, connectEmail, connectTelegram, isEmailConnected } = useNotifications();
- *
- *   if (loading) return <div>Loading...</div>;
- *
- *   return (
- *     <div>
- *       {!isEmailConnected && (
- *         <button onClick={() => connectEmail('user@example.com')}>
- *           Connect Email
- *         </button>
- *       )}
- *       <button onClick={connectTelegram}>Connect Telegram</button>
- *     </div>
- *   );
- * }
- * ```
- */
-export declare function useNotifications(): {
-    user: UserData | null;
-    loading: boolean;
-    error: Error | null;
-    refresh: () => Promise<void>;
-    connectEmail: (email: string) => Promise<void>;
-    connectTelegram: () => Promise<void>;
-    updateChannel: (channelId: string, updates: {
-        enabled?: boolean;
-    }) => Promise<void>;
-    deleteChannel: (channelId: string) => Promise<void>;
-    isEmailConnected: boolean;
-    isTelegramConnected: boolean;
-    isDiscordConnected: boolean;
-};