@b3dotfun/sdk 0.1.1-test.0 → 0.1.2-test.0

package/src/anyspend/react/hooks/useWatchTransfer.ts

@@ -0,0 +1,114 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { formatUnits } from "viem";
+import { useBalance } from "wagmi";
+import { isNativeToken } from "../../utils";
+
+export interface TransferResult {
+  amount: string;
+  formattedAmount: string;
+  txHash?: string;
+  timestamp: number;
+}
+
+export interface UseWatchTransferProps {
+  /** Address to watch for incoming transfers */
+  address: string;
+  /** Chain ID to watch on */
+  chainId: number;
+  /** Token address (use zero address for native token) */
+  tokenAddress: string;
+  /** Token decimals */
+  tokenDecimals: number;
+  /** Whether watching is enabled */
+  enabled?: boolean;
+  /** Callback when a transfer is detected */
+  onTransferDetected?: (result: TransferResult) => void;
+}
+
+/**
+ * Hook to watch for incoming transfers to an address by monitoring balance changes.
+ * When a transfer is detected (balance increases), it captures the amount and notifies.
+ */
+export function useWatchTransfer({
+  address,
+  chainId,
+  tokenAddress,
+  tokenDecimals,
+  enabled = true,
+  onTransferDetected,
+}: UseWatchTransferProps) {
+  const [transferResult, setTransferResult] = useState<TransferResult | null>(null);
+  const [isWatching, setIsWatching] = useState(false);
+  const initialBalanceRef = useRef<bigint | null>(null);
+  const transferDetectedRef = useRef(false);
+
+  const isNative = isNativeToken(tokenAddress);
+  // Get current balance
+  const { data: balanceData, refetch: refetchBalance } = useBalance({
+    address: address as `0x${string}`,
+    chainId,
+    token: isNative ? undefined : (tokenAddress as `0x${string}`),
+    query: {
+      enabled: enabled && !!address,
+      refetchInterval: 3000,
+    },
+  });
+
+  // Initialize or update the initial balance
+  useEffect(() => {
+    if (balanceData && initialBalanceRef.current === null && enabled) {
+      initialBalanceRef.current = balanceData.value;
+      setIsWatching(true);
+    }
+  }, [balanceData, enabled]);
+
+  // Check for balance increase (transfer detected)
+  useEffect(() => {
+    if (!enabled || transferDetectedRef.current || initialBalanceRef.current === null || !balanceData) {
+      return;
+    }
+
+    const currentBalance = balanceData.value;
+    const initialBalance = initialBalanceRef.current;
+
+    if (currentBalance > initialBalance) {
+      const transferAmount = currentBalance - initialBalance;
+      const formattedAmount = formatUnits(transferAmount, tokenDecimals);
+
+      const result: TransferResult = {
+        amount: transferAmount.toString(),
+        formattedAmount,
+        timestamp: Date.now(),
+      };
+
+      transferDetectedRef.current = true;
+      setTransferResult(result);
+      setIsWatching(false);
+      onTransferDetected?.(result);
+    }
+  }, [balanceData, enabled, tokenDecimals, onTransferDetected]);
+
+  // Reset function to start watching again
+  const reset = useCallback(() => {
+    transferDetectedRef.current = false;
+    initialBalanceRef.current = null;
+    setTransferResult(null);
+    setIsWatching(false);
+  }, []);
+
+  return useMemo(
+    () => ({
+      /** Whether currently watching for transfers */
+      isWatching,
+      /** The detected transfer result, if any */
+      transferResult,
+      /** Whether a transfer has been detected */
+      hasTransfer: transferResult !== null,
+      /** Reset and start watching again */
+      reset,
+      /** Manually refetch balance */
+      refetchBalance,
+    }),
+    [isWatching, transferResult, reset, refetchBalance],
+  );
+}

package/src/anyspend/utils/address.ts

@@ -38,3 +38,16 @@ export function eqci(a: string | null | undefined, b: string | null | undefined)
   if (!a || !b) return false;
   return a.toLowerCase() === b.toLowerCase();
 }
+
+/**
+ * Check if source and destination represent the same token on the same chain.
+ * When true, this is a pure transfer (no swap/bridge needed).
+ */
+export function isSameChainAndToken(
+  sourceChainId: number,
+  sourceTokenAddress: string,
+  destinationChainId: number,
+  destinationTokenAddress: string,
+): boolean {
+  return sourceChainId === destinationChainId && eqci(sourceTokenAddress, destinationTokenAddress);
+}

package/src/global-account/react/components/AvatarEditor/AvatarEditor.tsx

@@ -6,7 +6,7 @@ import {
   IPFSMediaRenderer,
   toast,
   useAuthentication,
-  useB3,
+  useB3Config,
   useProfile,
 } from "@b3dotfun/sdk/global-account/react";
 import { validateImageUrl } from "@b3dotfun/sdk/global-account/react/utils/profileDisplay";
@@ -57,7 +57,7 @@ export function AvatarEditor({ onSetAvatar, className }: AvatarEditorProps) {
   const [zoom, setZoom] = useState(1);
   const [croppedAreaPixels, setCroppedAreaPixels] = useState<Area | null>(null);
   const fileInputRef = useRef<HTMLInputElement>(null);
-  const { partnerId } = useB3();
+  const { partnerId } = useB3Config();
   const { user, setUser } = useAuthentication(partnerId);
   const setB3ModalContentType = useModalStore(state => state.setB3ModalContentType);
   const contentType = useModalStore(state => state.contentType);

package/src/global-account/react/components/B3DynamicModal.tsx

@@ -10,11 +10,12 @@ import {
   AnySpendTournament,
   OrderHistory,
 } from "@b3dotfun/sdk/anyspend/react";
+import { AnySpendDeposit } from "@b3dotfun/sdk/anyspend/react/components/AnySpendDeposit";
 import { AnySpendDepositHype } from "@b3dotfun/sdk/anyspend/react/components/AnyspendDepositHype";
 import { AnySpendDepositUpside } from "@b3dotfun/sdk/anyspend/react/components/AnySpendDepositUpside";
 import { AnySpendStakeUpside } from "@b3dotfun/sdk/anyspend/react/components/AnySpendStakeUpside";
 import { AnySpendStakeUpsideExactIn } from "@b3dotfun/sdk/anyspend/react/components/AnySpendStakeUpsideExactIn";
-import { useB3, useIsMobile, useModalStore } from "@b3dotfun/sdk/global-account/react";
+import { useB3Config, useIsMobile, useModalStore } from "@b3dotfun/sdk/global-account/react";
 import { cn } from "@b3dotfun/sdk/shared/utils/cn";
 import { debugB3React } from "@b3dotfun/sdk/shared/utils/debug";
 import { AnimatePresence, motion } from "framer-motion";
@@ -39,7 +40,7 @@ export function B3DynamicModal() {
   const setB3ModalOpen = useModalStore(state => state.setB3ModalOpen);
   const contentType = useModalStore(state => state.contentType);
   const navigateBack = useModalStore(state => state.navigateBack);
-  const { theme } = useB3();
+  const { theme } = useB3Config();
   const isMobile = useIsMobile();
   const { toasts, removeToast } = useToastContext();
 
@@ -65,6 +66,7 @@ export function B3DynamicModal() {
     "deposit",
     "send",
     "notifications",
+    "anySpendDeposit",
   ];
 
   const freestyleTypes = [
@@ -153,6 +155,8 @@ export function B3DynamicModal() {
         return <AnySpendDepositHype {...contentType} mode="modal" />;
       case "anySpendCollectorClubPurchase":
         return <AnySpendCollectorClubPurchase {...contentType} mode="modal" />;
+      case "anySpendDeposit":
+        return <AnySpendDeposit {...contentType} mode="modal" />;
       case "avatarEditor":
         return <AvatarEditor onSetAvatar={contentType.onSuccess} />;
       case "deposit":

package/src/global-account/react/components/B3Provider/AuthenticationProvider.tsx

@@ -0,0 +1,19 @@
+import { useAuthentication } from "../../hooks";
+import { useAutoSelectWallet } from "../../hooks/useAutoSelectWallet";
+
+const AuthenticationProvider = ({
+  partnerId,
+  automaticallySetFirstEoa,
+}: {
+  partnerId: string;
+  automaticallySetFirstEoa: boolean;
+}) => {
+  useAuthentication(partnerId);
+  useAutoSelectWallet({
+    enabled: automaticallySetFirstEoa,
+  });
+
+  return null;
+};
+
+export default AuthenticationProvider;

package/src/global-account/react/components/B3Provider/B3ConfigProvider.tsx

@@ -0,0 +1,84 @@
+import { CreateOnrampOrderParams } from "@b3dotfun/sdk/anyspend/react/hooks/useAnyspendCreateOnrampOrder";
+import { CreateOrderParams } from "@b3dotfun/sdk/anyspend/react/hooks/useAnyspendCreateOrder";
+import { PermissionsConfig } from "@b3dotfun/sdk/global-account/types/permissions";
+import { createContext, useContext } from "react";
+import { Account } from "thirdweb/wallets";
+import { ClientType } from "../../../client-manager";
+
+/**
+ * Default permissions configuration for B3 provider
+ */
+const DEFAULT_PERMISSIONS: PermissionsConfig = {
+  approvedTargets: ["0xa8e42121e318e3D3BeD7f5969AF6D360045317DD"],
+  nativeTokenLimitPerTransaction: 0.1,
+  startDate: new Date(),
+  endDate: new Date(Date.now() + 1000 * 60 * 60 * 24 * 365), // 1 year from now
+};
+
+export interface B3ConfigContextType {
+  accountOverride?: Account;
+  automaticallySetFirstEoa: boolean;
+  environment: "development" | "production";
+  defaultPermissions: PermissionsConfig;
+  theme: "light" | "dark";
+  clientType: ClientType;
+  partnerId: string;
+  stripePublishableKey?: string;
+  createClientReferenceId?: (params: CreateOrderParams | CreateOnrampOrderParams) => Promise<string>;
+  enableTurnkey: boolean;
+}
+
+const B3ConfigContext = createContext<B3ConfigContextType | null>(null);
+
+export function B3ConfigProvider({
+  children,
+  accountOverride,
+  environment = "development",
+  defaultPermissions = DEFAULT_PERMISSIONS,
+  automaticallySetFirstEoa = false,
+  theme = "light",
+  clientType = "rest",
+  partnerId,
+  stripePublishableKey,
+  createClientReferenceId,
+  enableTurnkey = false,
+}: {
+  children: React.ReactNode;
+  accountOverride?: Account;
+  environment?: "development" | "production";
+  defaultPermissions?: PermissionsConfig;
+  automaticallySetFirstEoa?: boolean;
+  theme?: "light" | "dark";
+  clientType?: ClientType;
+  partnerId: string;
+  stripePublishableKey?: string;
+  createClientReferenceId?: (params: CreateOrderParams | CreateOnrampOrderParams) => Promise<string>;
+  enableTurnkey?: boolean;
+}) {
+  return (
+    <B3ConfigContext.Provider
+      value={{
+        accountOverride,
+        environment,
+        defaultPermissions,
+        automaticallySetFirstEoa,
+        theme,
+        clientType,
+        partnerId,
+        stripePublishableKey,
+        createClientReferenceId,
+        enableTurnkey,
+      }}
+    >
+      {children}
+    </B3ConfigContext.Provider>
+  );
+}
+
+export function useB3Config(): B3ConfigContextType {
+  const context = useContext(B3ConfigContext);
+  if (!context) {
+    throw new Error("useB3Config must be used within a B3ConfigProvider");
+  }
+  return context;
+}

package/src/global-account/react/components/B3Provider/B3Provider.native.tsx

@@ -1,78 +1,73 @@
 import { PermissionsConfig } from "@b3dotfun/sdk/global-account/types/permissions";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { ThirdwebProvider, useActiveAccount } from "thirdweb/react";
+import { ThirdwebProvider } from "thirdweb/react";
 import { Account, Wallet } from "thirdweb/wallets";
 
 import { ClientType } from "../../../client-manager";
 
 import { WagmiProvider } from "wagmi";
 import { createWagmiConfig } from "../../utils/createWagmiConfig";
+import AuthenticationProvider from "./AuthenticationProvider";
+import { B3ConfigProvider } from "./B3ConfigProvider";
 import { LocalSDKProvider } from "./LocalSDKProvider";
-import { B3Context, B3ContextType } from "./types";
-
-/**
- * Default permissions configuration for B3 provider
- */
-const DEFAULT_PERMISSIONS = {
-  approvedTargets: ["0xa8e42121e318e3D3BeD7f5969AF6D360045317DD"], // Example contract
-  nativeTokenLimitPerTransaction: 0.1, // in ETH
-  startDate: new Date(),
-  endDate: new Date(Date.now() + 1000 * 60 * 60 * 24 * 365), // 1 year from now
-};
 
 // Create queryClient instance
 const queryClient = new QueryClient();
 
 /**
- * Main B3Provider component for React Native
+ * Main B3Provider component
  */
 export function B3Provider({
-  theme,
+  theme = "light",
   children,
   accountOverride,
   environment,
-  clientType,
+  clientType = "socket",
   partnerId,
   rpcUrls,
   onConnect,
+  defaultPermissions,
 }: {
   theme: "light" | "dark";
   children: React.ReactNode;
   accountOverride?: Account;
-  environment: B3ContextType["environment"];
+  environment?: "development" | "production";
   clientType?: ClientType;
   partnerId: string;
   rpcUrls?: Record<number, string>;
   onConnect?: (wallet: Wallet, b3Jwt: string) => void | Promise<void>;
+  defaultPermissions?: PermissionsConfig;
 }) {
   return (
     <ThirdwebProvider>
       <LocalSDKProvider onConnectCallback={onConnect}>
-        <InnerProvider
+        <B3ConfigProvider
           accountOverride={accountOverride}
           environment={environment}
+          automaticallySetFirstEoa={false}
           theme={theme}
           clientType={clientType}
           partnerId={partnerId}
-          rpcUrls={rpcUrls}
+          defaultPermissions={defaultPermissions}
         >
           {/* <RelayKitProviderWrapper> */}
           {children}
+          <AuthenticationProvider partnerId={partnerId} automaticallySetFirstEoa={false} />
           {/* </RelayKitProviderWrapper> */}
-        </InnerProvider>
+        </B3ConfigProvider>
       </LocalSDKProvider>
     </ThirdwebProvider>
   );
 }
 
 /**
- * Inner provider component that provides the actual B3Context
+ * Inner provider component for native
  */
 export function InnerProvider({
   children,
   accountOverride,
   environment,
-  defaultPermissions = DEFAULT_PERMISSIONS,
+  defaultPermissions,
   theme = "light",
   clientType = "socket",
   partnerId,
@@ -80,43 +75,29 @@ export function InnerProvider({
 }: {
   children: React.ReactNode;
   accountOverride?: Account;
-  environment: B3ContextType["environment"];
+  environment?: "development" | "production";
   defaultPermissions?: PermissionsConfig;
   theme: "light" | "dark";
   clientType?: ClientType;
   partnerId: string;
   rpcUrls?: Record<number, string>;
 }) {
-  const activeAccount = useActiveAccount();
-  //const { user, setUser, refetchUser } = useAuthentication(partnerId);
   const wagmiConfig = createWagmiConfig({ partnerId, rpcUrls });
 
-  // Use given accountOverride or activeAccount from thirdweb
-  const effectiveAccount = accountOverride || activeAccount;
-
   return (
     <WagmiProvider config={wagmiConfig}>
       <QueryClientProvider client={queryClient}>
-        <B3Context.Provider
-          value={{
-            //account: effectiveAccount,
-            automaticallySetFirstEoa: false,
-            //setWallet: () => {},
-            wallet: undefined,
-            //user,
-            //setUser,
-            initialized: true,
-            ready: !!effectiveAccount,
-            environment,
-            defaultPermissions,
-            theme,
-            clientType,
-            partnerId,
-            //refetchUser,
-          }}
+        <B3ConfigProvider
+          accountOverride={accountOverride}
+          environment={environment}
+          automaticallySetFirstEoa={false}
+          theme={theme}
+          clientType={clientType}
+          partnerId={partnerId}
+          defaultPermissions={defaultPermissions}
         >
           {children}
-        </B3Context.Provider>
+        </B3ConfigProvider>
       </QueryClientProvider>
     </WagmiProvider>
   );

package/src/global-account/react/components/B3Provider/B3Provider.tsx

@@ -1,36 +1,21 @@
 import { CreateOnrampOrderParams } from "@b3dotfun/sdk/anyspend/react/hooks/useAnyspendCreateOnrampOrder";
 import { CreateOrderParams } from "@b3dotfun/sdk/anyspend/react/hooks/useAnyspendCreateOrder";
-import {
-  RelayKitProviderWrapper,
-  TooltipProvider,
-  useAuthentication,
-  useAuthStore,
-} from "@b3dotfun/sdk/global-account/react";
-import { useAutoSelectWallet } from "@b3dotfun/sdk/global-account/react/hooks/useAutoSelectWallet";
+import { RelayKitProviderWrapper, TooltipProvider } from "@b3dotfun/sdk/global-account/react";
 import { createWagmiConfig } from "@b3dotfun/sdk/global-account/react/utils/createWagmiConfig";
 import { PermissionsConfig } from "@b3dotfun/sdk/global-account/types/permissions";
 import { loadGA4Script } from "@b3dotfun/sdk/global-account/utils/analytics";
 import "@relayprotocol/relay-kit-ui/styles.css";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { useEffect, useMemo } from "react";
-import { ThirdwebProvider, useActiveAccount } from "thirdweb/react";
+import { ThirdwebProvider } from "thirdweb/react";
 import { Account, Wallet } from "thirdweb/wallets";
 import { CreateConnectorFn, WagmiProvider } from "wagmi";
 import { ClientType, setClientType } from "../../../client-manager";
 import { StyleRoot } from "../StyleRoot";
 import { setToastContext, ToastProvider, useToastContext } from "../Toast/index";
+import AuthenticationProvider from "./AuthenticationProvider";
+import { B3ConfigProvider } from "./B3ConfigProvider";
 import { LocalSDKProvider } from "./LocalSDKProvider";
-import { B3Context, B3ContextType } from "./types";
-
-/**
- * Default permissions configuration for B3 provider
- */
-const DEFAULT_PERMISSIONS = {
-  approvedTargets: ["0xa8e42121e318e3D3BeD7f5969AF6D360045317DD"], // Example contract
-  nativeTokenLimitPerTransaction: 0.1, // in ETH
-  startDate: new Date(),
-  endDate: new Date(Date.now() + 1000 * 60 * 60 * 24 * 365), // 1 year from now
-};
 
 // Create queryClient instance
 const queryClient = new QueryClient();
@@ -52,15 +37,17 @@ export function B3Provider({
   partnerId,
   stripePublishableKey,
   onConnect,
+  onLogout,
   connectors,
   overrideDefaultConnectors = false,
   createClientReferenceId,
   enableTurnkey = false,
+  defaultPermissions,
 }: {
   theme: "light" | "dark";
   children: React.ReactNode;
   accountOverride?: Account;
-  environment: B3ContextType["environment"];
+  environment?: "development" | "production";
   automaticallySetFirstEoa?: boolean;
   simDuneApiKey?: string;
   toaster?: {
@@ -73,10 +60,12 @@ export function B3Provider({
   /** Partner-specific Stripe publishable key. If not provided, uses default B3 Stripe account. */
   stripePublishableKey?: string;
   onConnect?: (wallet: Wallet, b3Jwt: string) => void | Promise<void>;
+  onLogout?: () => void | Promise<void>;
   connectors?: CreateConnectorFn[];
   overrideDefaultConnectors?: boolean;
   createClientReferenceId?: (params: CreateOrderParams | CreateOnrampOrderParams) => Promise<string>;
   enableTurnkey?: boolean;
+  defaultPermissions?: PermissionsConfig;
 }) {
   // Initialize Google Analytics on mount
   useEffect(() => {
@@ -99,17 +88,18 @@ export function B3Provider({
         <QueryClientProvider client={queryClient}>
           <TooltipProvider>
             <ToastProvider>
-              <LocalSDKProvider onConnectCallback={onConnect}>
-                <InnerProvider
+              <LocalSDKProvider onConnectCallback={onConnect} onLogoutCallback={onLogout}>
+                <B3ConfigProvider
                   accountOverride={accountOverride}
                   environment={environment}
-                  theme={theme}
                   automaticallySetFirstEoa={!!automaticallySetFirstEoa}
+                  theme={theme}
                   clientType={clientType}
                   partnerId={partnerId}
                   stripePublishableKey={stripePublishableKey}
                   createClientReferenceId={createClientReferenceId}
                   enableTurnkey={enableTurnkey}
+                  defaultPermissions={defaultPermissions}
                 >
                   <ToastContextConnector />
                   <RelayKitProviderWrapper simDuneApiKey={simDuneApiKey}>
@@ -117,7 +107,8 @@ export function B3Provider({
                     {/* For the modal https://github.com/b3-fun/b3/blob/main/packages/sdk/src/global-account/react/components/ui/dialog.tsx#L46 */}
                     <StyleRoot id="b3-root" />
                   </RelayKitProviderWrapper>
-                </InnerProvider>
+                  <AuthenticationProvider partnerId={partnerId} automaticallySetFirstEoa={!!automaticallySetFirstEoa} />
+                </B3ConfigProvider>
               </LocalSDKProvider>
             </ToastProvider>
           </TooltipProvider>
@@ -127,85 +118,6 @@ export function B3Provider({
   );
 }
 
-/**
- * Inner provider component that provides the actual B3Context
- */
-export function InnerProvider({
-  children,
-  accountOverride,
-  environment,
-  defaultPermissions = DEFAULT_PERMISSIONS,
-  automaticallySetFirstEoa,
-  theme = "light",
-  clientType = "socket",
-  partnerId,
-  stripePublishableKey,
-  createClientReferenceId,
-  enableTurnkey,
-}: {
-  children: React.ReactNode;
-  accountOverride?: Account;
-  environment: B3ContextType["environment"];
-  defaultPermissions?: PermissionsConfig;
-  automaticallySetFirstEoa: boolean;
-  theme: "light" | "dark";
-  clientType?: ClientType;
-  partnerId: string;
-  stripePublishableKey?: string;
-  createClientReferenceId?: (params: CreateOrderParams | CreateOnrampOrderParams) => Promise<string>;
-  enableTurnkey?: boolean;
-}) {
-  const activeAccount = useActiveAccount();
-  const isAuthenticated = useAuthStore(state => state.isAuthenticated);
-  //const isConnected = useAuthStore(state => state.isConnected);
-  //const justCompletedLogin = useAuthStore(state => state.justCompletedLogin);
-
-  // Note: This fixes a bug where useAuthentication is no longer rendered on every page, as of this PR https://github.com/b3-fun/b3/pull/385/files#diff-3ef996931b8fc8e49021ba1b42ddaa97535214681610dc5fdacf63542e261af7
-  // The above PR removes useAuthentication from the overall B3Provider. useAuthentication should be everywhere the provider is, since it sets the overall auth state
-  // By just calling it manually, we fix that issue
-  // As a follow up, we should fix the SDK directly
-  useAuthentication(partnerId);
-
-  // Use given accountOverride or activeAccount from thirdweb
-  // WOJ: why if isAuthenticated is false, we don't use activeAccount, which should be undefined?
-  // skip isAuthenticated check ?
-  const effectiveAccount = isAuthenticated ? accountOverride || activeAccount : undefined;
-
-  // Wrapper to set active wallet via thirdweb
-  // Note: `wallet` in context is deprecated - use useActiveWallet() from thirdweb/react instead
-
-  // Auto-select first EOA wallet when enabled
-  useAutoSelectWallet({
-    enabled: automaticallySetFirstEoa,
-  });
-
-  return (
-    <B3Context.Provider
-      value={{
-        account: effectiveAccount,
-        // setWallet,
-        //wallet: undefined, // Deprecated: use useActiveWallet() from thirdweb/react instead
-        //user,
-        //setUser,
-        //refetchUser,
-        initialized: true,
-        ready: !!effectiveAccount,
-        automaticallySetFirstEoa,
-        environment,
-        defaultPermissions,
-        theme,
-        clientType,
-        partnerId: partnerId,
-        stripePublishableKey,
-        createClientReferenceId,
-        enableTurnkey,
-      }}
-    >
-      {children}
-    </B3Context.Provider>
-  );
-}
-
 /**
  * Component to connect the toast context to the global toast API
  */

package/src/global-account/react/components/B3Provider/LocalSDKProvider.tsx

@@ -7,10 +7,12 @@ import { Wallet } from "thirdweb/wallets";
  */
 export interface LocalSDKContextType {
   onConnectCallback?: (wallet: Wallet, b3Jwt: string) => void | Promise<void>;
+  onLogoutCallback?: () => void | Promise<void>;
 }
 
 export const LocalSDKContext = createContext<LocalSDKContextType>({
   onConnectCallback: undefined,
+  onLogoutCallback: undefined,
 });
 
 /**
@@ -19,14 +21,17 @@ export const LocalSDKContext = createContext<LocalSDKContextType>({
 export function LocalSDKProvider({
   children,
   onConnectCallback,
+  onLogoutCallback,
 }: {
   children: React.ReactNode;
   onConnectCallback?: (wallet: Wallet, b3Jwt: string) => void | Promise<void>;
+  onLogoutCallback?: () => void | Promise<void>;
 }) {
   return (
     <LocalSDKContext.Provider
       value={{
         onConnectCallback,
+        onLogoutCallback,
       }}
     >
       {children}