@embarkai/ui-kit 0.2.1 → 0.2.3

package/dist/index.d.cts

@@ -328,7 +328,14 @@ interface CallbacksConfig {
 interface UIContextType {
     config: MutableRefObject<ProviderConfig>;
     updateConfig: (updates: Partial<ProviderConfig>) => void;
+    /**
+     * Legacy snapshot of callbacks from provider props.
+     * This field is not reactive and may become stale after calling updateCallbacks().
+     * Use callbacksRef to read the current callbacks.
+     * @deprecated
+     */
     callbacks?: CallbacksConfig;
+    callbacksRef: MutableRefObject<CallbacksConfig | undefined>;
     updateCallbacks: (updates: Partial<CallbacksConfig> | null) => void;
 }
 interface ProviderProps {

package/dist/index.d.ts

@@ -328,7 +328,14 @@ interface CallbacksConfig {
 interface UIContextType {
     config: MutableRefObject<ProviderConfig>;
     updateConfig: (updates: Partial<ProviderConfig>) => void;
+    /**
+     * Legacy snapshot of callbacks from provider props.
+     * This field is not reactive and may become stale after calling updateCallbacks().
+     * Use callbacksRef to read the current callbacks.
+     * @deprecated
+     */
     callbacks?: CallbacksConfig;
+    callbacksRef: MutableRefObject<CallbacksConfig | undefined>;
     updateCallbacks: (updates: Partial<CallbacksConfig> | null) => void;
 }
 interface ProviderProps {

package/dist/index.js

@@ -832,27 +832,27 @@ var PageKey, useLayoutDataStore;
 var init_useLayoutDataStore = __esm({
   "src/internal/hooks/useLayoutDataStore.ts"() {
     init_constants();
-    PageKey = /* @__PURE__ */ ((PageKey4) => {
-      PageKey4["AUTH"] = "auth";
-      PageKey4["LANGUAGES"] = "languages";
-      PageKey4["TERMS_OF_SERVICE"] = "terms-of-service";
-      PageKey4["MAIN_MENU"] = "main-menu";
-      PageKey4["SETTINGS"] = "settings";
-      PageKey4["SEND"] = "send";
-      PageKey4["RECEIVE"] = "receive";
-      PageKey4["BUY"] = "buy";
-      PageKey4["KYC"] = "kyc";
-      PageKey4["TRANSACTIONS"] = "transactions";
-      PageKey4["ASSETS"] = "assets";
-      PageKey4["MANAGE_WALLET"] = "manage-wallet";
-      PageKey4["UNLINK_PROVIDER"] = "unlink-provider";
-      PageKey4["SECURITY"] = "security";
-      PageKey4["KEYSARE_BACKUP"] = "keysare-backup";
-      PageKey4["KEYSHARE_RESTORE"] = "keyshare-restore";
-      PageKey4["CHAIN"] = "chain";
-      PageKey4["CHAIN_SWITCH_REQUEST"] = "chain-switch-request";
-      PageKey4["NICKNAME_SETTINGS"] = "nickname-settings";
-      return PageKey4;
+    PageKey = /* @__PURE__ */ ((PageKey3) => {
+      PageKey3["AUTH"] = "auth";
+      PageKey3["LANGUAGES"] = "languages";
+      PageKey3["TERMS_OF_SERVICE"] = "terms-of-service";
+      PageKey3["MAIN_MENU"] = "main-menu";
+      PageKey3["SETTINGS"] = "settings";
+      PageKey3["SEND"] = "send";
+      PageKey3["RECEIVE"] = "receive";
+      PageKey3["BUY"] = "buy";
+      PageKey3["KYC"] = "kyc";
+      PageKey3["TRANSACTIONS"] = "transactions";
+      PageKey3["ASSETS"] = "assets";
+      PageKey3["MANAGE_WALLET"] = "manage-wallet";
+      PageKey3["UNLINK_PROVIDER"] = "unlink-provider";
+      PageKey3["SECURITY"] = "security";
+      PageKey3["KEYSARE_BACKUP"] = "keysare-backup";
+      PageKey3["KEYSHARE_RESTORE"] = "keyshare-restore";
+      PageKey3["CHAIN"] = "chain";
+      PageKey3["CHAIN_SWITCH_REQUEST"] = "chain-switch-request";
+      PageKey3["NICKNAME_SETTINGS"] = "nickname-settings";
+      return PageKey3;
     })(PageKey || {});
     useLayoutDataStore = create((set) => ({
       page: null,
@@ -1148,7 +1148,7 @@ import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { throttle } from "lodash-es";
 import { useCallback, useEffect as useEffect2, useRef } from "react";
 function ChainSync() {
-  const { config, callbacks } = useProviderConfig();
+  const { config, callbacksRef } = useProviderConfig();
   const qc = useQueryClient();
   const setPage = useLayoutDataStore((st) => st.setPage);
   const { address, session, activeChainId, setAddress, setSession, setActiveChain, setIsLoading, setStatus, setError } = useSession();
@@ -1213,7 +1213,7 @@ function ChainSync() {
         address: smartAccountAddress,
         factoryAddress: chainConfig.factoryAddress
       });
-      await callbacks?.onChainChange?.({
+      await callbacksRef.current?.onChainChange?.({
         chainId: targetChainId,
         previousChainId: prevChainId.current
       });
@@ -2397,7 +2397,7 @@ import { useCallback as useCallback2, useEffect as useEffect3, useRef as useRef2
 function useAutoConnect() {
   const {
     config: { current: config },
-    callbacks
+    callbacksRef
   } = useProviderConfig();
   const setPage = useLayoutDataStore((st) => st.setPage);
   const {
@@ -2420,7 +2420,7 @@ function useAutoConnect() {
     async (userId, hasServerKeyshare, isNewUser) => {
       try {
         try {
-          callbacks?.onConnecting?.({ method: "wallet" });
+          callbacksRef.current?.onConnecting?.({ method: "wallet" });
         } catch {
         }
         setStatus("checking key management setup...");
@@ -2452,7 +2452,7 @@ function useAutoConnect() {
         throw error;
       }
     },
-    [usePaymaster, setStatus, callbacks, activeChainId]
+    [usePaymaster, setStatus, activeChainId]
   );
   const autoConnectAttemptedRef = useRef2(false);
   useEffect3(() => {
@@ -2504,7 +2504,7 @@ function useAutoConnect() {
       }
       const finalHasKeyshare = verify?.hasKeyshare ?? hasKeyshare ?? false;
       try {
-        callbacks?.onAccount?.({ userId, address: null, session: null, hasKeyshare: finalHasKeyshare });
+        callbacksRef.current?.onAccount?.({ userId, address: null, session: null, hasKeyshare: finalHasKeyshare });
       } catch (error) {
         console.warn("[UI-KIT][AutoConnect] Error due onAccount callback:", error);
       }
@@ -2520,12 +2520,12 @@ function useAutoConnect() {
         setStatus("ready");
         setIsLoading(false);
         try {
-          callbacks?.onConnect?.({ address: addr, session: sess });
+          callbacksRef.current?.onConnect?.({ address: addr, session: sess });
         } catch (error) {
           console.warn("[UI-KIT][AutoConnect] Error due onConnect callback:", error);
         }
         try {
-          callbacks?.onAccount?.({
+          callbacksRef.current?.onAccount?.({
             userId,
             address: addr,
             session: sess,
@@ -3888,7 +3888,7 @@ function PassKeyStep(props) {
   const { pendingLoginResponseRef, onAuthSuccess } = props;
   const {
     config: { current: config },
-    callbacks
+    callbacksRef
   } = useProviderConfig();
   const { t } = useT();
   const isLoading = useSession((st) => st.isLoading);
@@ -3944,7 +3944,7 @@ function PassKeyStep(props) {
       }
       if (!normalized.benignCancel) {
         try {
-          callbacks?.onError?.({
+          callbacksRef.current?.onError?.({
             error: e instanceof Error ? e : new Error(errorMessage),
             message: errorMessage
           });
@@ -3955,7 +3955,7 @@ function PassKeyStep(props) {
     } finally {
       setIsLoading(false);
     }
-  }, [onAuthSuccess, setPage, callbacks]);
+  }, [onAuthSuccess, setPage]);
   const onPasskeyAuth = useCallback6(async () => {
     setAlert(null);
     setPasskeyStatus("checking available passkeys...");
@@ -4024,7 +4024,7 @@ function PassKeyStep(props) {
           message: errorMessage
         });
         try {
-          callbacks?.onError?.({
+          callbacksRef.current?.onError?.({
             error: e instanceof Error ? e : new Error(errorMessage),
             message: errorMessage
           });
@@ -4036,7 +4036,7 @@ function PassKeyStep(props) {
     } finally {
       setIsLoading(false);
     }
-  }, [onAuthSuccess, setPage, callbacks]);
+  }, [onAuthSuccess, setPage]);
   return /* @__PURE__ */ jsxs5(Fragment3, { children: [
     /* @__PURE__ */ jsxs5("div", { className: "relative flex items-center justify-center gap-2 px-5 pt-3 pb-6", children: [
       /* @__PURE__ */ jsx8(Key2, { className: "w-6 h-6" }),
@@ -4149,7 +4149,7 @@ import { ChevronRight, Loader as Loader2, Mail as Mail2 } from "lucide-react";
 import { useEffect as useEffect8, useRef as useRef5 } from "react";
 import { jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
 function Email() {
-  const { config, callbacks } = useProviderConfig();
+  const { callbacksRef } = useProviderConfig();
   const { t } = useT();
   const focusRef = useRef5(null);
   const inputRef = useRef5(null);
@@ -4201,7 +4201,7 @@ function Email() {
       setIsLoading(false);
     },
     onError: (error) => {
-      callbacks?.onError?.({ error, message: error?.message || "" });
+      callbacksRef.current?.onError?.({ error, message: error?.message || "" });
       setAlert({
         title: "Failed to send verification code",
         message: error?.message || "Unknown error occurred"
@@ -4421,7 +4421,7 @@ import { useCallback as useCallback7 } from "react";
 import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
 function Social(props) {
   const { pendingLoginResponseRef, onAuthSuccess } = props;
-  const { config, callbacks } = useProviderConfig();
+  const { config } = useProviderConfig();
   const { t } = useT();
   const isLoading = useSession((st) => st.isLoading);
   const setIsLoading = useSession((st) => st.setIsLoading);
@@ -4605,7 +4605,7 @@ function Social(props) {
         setIsLoading(false);
       }
     },
-    [onAuthSuccess, callbacks]
+    [onAuthSuccess]
   );
   const enabledSocialProviders = config.current?.social?.providers?.filter((provider) => provider.enabled) || [];
   const isPasskey = !!config.current?.passkey?.enabled;
@@ -4919,7 +4919,7 @@ var init_constants4 = __esm({
 import { useQueryClient as useQueryClient2 } from "@tanstack/react-query";
 import { useCallback as useCallback8, useRef as useRef6, useState as useState2 } from "react";
 function useAuthMenuHandlers() {
-  const { config, callbacks } = useProviderConfig();
+  const { config, callbacksRef } = useProviderConfig();
   const qc = useQueryClient2();
   const pendingLoginResponseRef = useRef6(null);
   const setPage = useLayoutDataStore((st) => st.setPage);
@@ -4943,7 +4943,7 @@ function useAuthMenuHandlers() {
     async (userId, hasServerKeyshare, isNewUser) => {
       try {
         try {
-          callbacks?.onConnecting?.({ method: "wallet" });
+          callbacksRef.current?.onConnecting?.({ method: "wallet" });
         } catch {
         }
         setStatus("checking key management setup...");
@@ -4978,7 +4978,7 @@ function useAuthMenuHandlers() {
         throw error;
       }
     },
-    [setStatus, callbacks, usePaymaster, activeChainId]
+    [setStatus, usePaymaster, activeChainId]
   );
   const onAuthSuccess = useCallback8(async () => {
     setIsLoading(true);
@@ -5031,12 +5031,12 @@ function useAuthMenuHandlers() {
       setAddress(addr);
       setStatus("ready");
       try {
-        callbacks?.onConnect?.({ address: addr, session: sess });
+        callbacksRef.current?.onConnect?.({ address: addr, session: sess });
       } catch (error) {
         console.warn("[UI-KIT][AuthMenu] Error due onConnect callback:", error);
       }
       try {
-        callbacks?.onAccount?.({ userId, address: addr, session: sess, hasKeyshare: hasServerKeyshare });
+        callbacksRef.current?.onAccount?.({ userId, address: addr, session: sess, hasKeyshare: hasServerKeyshare });
       } catch (error) {
         console.warn("[UI-KIT][AuthMenu] Error due onAccount callback:", error);
       }
@@ -5078,7 +5078,6 @@ function useAuthMenuHandlers() {
     }
   }, [
     qc,
-    callbacks,
     setStep,
     setPage,
     setError,
@@ -5276,7 +5275,7 @@ import { ArrowLeft as ArrowLeft2, Loader as Loader3 } from "lucide-react";
 import { Fragment as Fragment7, jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
 function VerifyStep(props) {
   const { pendingLoginResponseRef, goBackToSignIn, onAuthSuccess } = props;
-  const { callbacks } = useProviderConfig();
+  const { callbacksRef } = useProviderConfig();
   const { t } = useT();
   const recoveryUserId = useSession((st) => st.recoveryUserId);
   const isSessionLoading = useSession((st) => st.isLoading);
@@ -5349,7 +5348,7 @@ function VerifyStep(props) {
         title: "Verification failed",
         message: errorMessage
       });
-      callbacks?.onError?.({
+      callbacksRef.current?.onError?.({
         error: error instanceof Error ? error : new Error(errorMessage),
         message: errorMessage
       });
@@ -7440,7 +7439,7 @@ var init_useRestoreStore = __esm({
 // src/internal/components/KeyshareRestoreMenu/hooks/useOnRestoreSuccess.ts
 import { useCallback as useCallback10 } from "react";
 function useOnRestoreSuccess() {
-  const { config, callbacks } = useProviderConfig();
+  const { config, callbacksRef } = useProviderConfig();
   const setIsDialogForced = useLayoutStore((st) => st.setIsDialogForced);
   const setPage = useLayoutDataStore((st) => st.setPage);
   const {
@@ -7458,7 +7457,7 @@ function useOnRestoreSuccess() {
     async (userId, hasServerKeyshare, isNewUser) => {
       try {
         try {
-          callbacks?.onConnecting?.({ method: "wallet" });
+          callbacksRef.current?.onConnecting?.({ method: "wallet" });
         } catch {
         }
         setStatus("checking key management setup...");
@@ -7493,7 +7492,7 @@ function useOnRestoreSuccess() {
         throw error;
       }
     },
-    [setStatus, callbacks, usePaymaster, activeChainId, publicClient]
+    [setStatus, usePaymaster, activeChainId, publicClient]
   );
   const onRestoreSuccess = useCallback10(async () => {
     const { verifyToken: verifyToken2, jwtTokenManager: jwtTokenManager4 } = await Promise.resolve().then(() => (init_auth(), auth_exports));
@@ -7524,12 +7523,12 @@ function useOnRestoreSuccess() {
         setAddress(addr);
         setStatus("ready");
         try {
-          callbacks?.onConnect?.({ address: addr, session: sess });
+          callbacksRef.current?.onConnect?.({ address: addr, session: sess });
         } catch (error) {
           console.warn("[UI-KIT][Restore] Error due onConnect callback:", error);
         }
         try {
-          callbacks?.onAccount?.({
+          callbacksRef.current?.onAccount?.({
             userId: recoveryUserId,
             address: addr,
             session: sess,
@@ -7556,8 +7555,7 @@ function useOnRestoreSuccess() {
     setAddress,
     setStatus,
     setRecoveryUserId,
-    setPage,
-    callbacks
+    setPage
   ]);
   return { onRestoreSuccess };
 }
@@ -8928,7 +8926,7 @@ var init_KeyshareRestoreMenu = __esm({
     };
     KeyshareRestoreMenu = () => {
       const qc = useQueryClient7();
-      const callbacks = useProviderConfig().callbacks;
+      const { callbacksRef } = useProviderConfig();
       const { t } = useT();
       const { address, setSession, setAddress, setStatus, setIsLoading } = useSession();
       const maxScrollHeight = useLayoutStore((st) => st.maxScrollHeight);
@@ -8994,7 +8992,7 @@ var init_KeyshareRestoreMenu = __esm({
           setStatus("idle");
           setIsLoading(false);
           setIsDialogForced(false);
-          callbacks?.onDisconnect?.({ address: "0x", userId: disconnectedUserId });
+          callbacksRef.current?.onDisconnect?.({ address: "0x", userId: disconnectedUserId });
           setTimeout(() => setPage("auth" /* AUTH */), 50);
         },
         onError: (err) => {
@@ -9860,7 +9858,7 @@ import { useMutation as useMutation10 } from "@tanstack/react-query";
 import { ChevronRight as ChevronRight4, Loader as Loader14, Mail as Mail4 } from "lucide-react";
 import { jsx as jsx52, jsxs as jsxs45 } from "react/jsx-runtime";
 function EmailForm() {
-  const { callbacks } = useProviderConfig();
+  const { callbacksRef } = useProviderConfig();
   const { t } = useT();
   const isLoading = useSession((st) => st.isLoading);
   const setIsLoading = useSession((st) => st.setIsLoading);
@@ -9912,7 +9910,7 @@ function EmailForm() {
           message: errorMessage
         });
         try {
-          callbacks?.onError?.({
+          callbacksRef.current?.onError?.({
             error: error instanceof Error ? error : new Error(errorMessage),
             message: errorMessage
           });
@@ -10033,7 +10031,7 @@ var init_useSendVerificationCode = __esm({
 // src/internal/components/ManageWalletMenu/hooks/useVerifyCode.ts
 import { useMutation as useMutation12, useQueryClient as useQueryClient10 } from "@tanstack/react-query";
 function useVerifyCode() {
-  const { callbacks } = useProviderConfig();
+  const { callbacksRef } = useProviderConfig();
   const qc = useQueryClient10();
   const address = useSession((st) => st.address);
   const setIsLoading = useSession((st) => st.setIsLoading);
@@ -10059,7 +10057,7 @@ function useVerifyCode() {
       setAlert(null);
       setEmailStep("input");
       try {
-        callbacks?.onAccountUpdate?.({ providers: qc.getQueryData([PROVIDERS_QUERY_KEY, address]) });
+        callbacksRef.current?.onAccountUpdate?.({ providers: qc.getQueryData([PROVIDERS_QUERY_KEY, address]) });
       } catch {
       }
       setIsLoading(false);
@@ -10098,7 +10096,7 @@ function normalizePasskeyLinkError(msg) {
 }
 function AddProvider() {
   const qc = useQueryClient11();
-  const callbacks = useProviderConfig().callbacks;
+  const { callbacksRef } = useProviderConfig();
   const address = useSession((st) => st.address);
   const { t } = useT();
   const {
@@ -10162,7 +10160,7 @@ function AddProvider() {
               await qc.invalidateQueries({ queryKey: [PROVIDERS_QUERY_KEY, address] });
               await qc.invalidateQueries({ queryKey: [LINKED_PROFILES_QUERY_KEY, address] });
               try {
-                callbacks?.onAccountUpdate?.({
+                callbacksRef.current?.onAccountUpdate?.({
                   providers: qc.getQueryData([PROVIDERS_QUERY_KEY, address])
                 });
               } catch {
@@ -10203,7 +10201,7 @@ function AddProvider() {
               await qc.invalidateQueries({ queryKey: [PROVIDERS_QUERY_KEY, address] });
               await qc.invalidateQueries({ queryKey: [LINKED_PROFILES_QUERY_KEY, address] });
               try {
-                callbacks?.onAccountUpdate?.({
+                callbacksRef.current?.onAccountUpdate?.({
                   providers: qc.getQueryData([PROVIDERS_QUERY_KEY, address])
                 });
               } catch {
@@ -10281,7 +10279,7 @@ function useLinkSocial() {
   const address = useSession((st) => st.address);
   const {
     config: { current: config },
-    callbacks
+    callbacksRef
   } = useProviderConfig();
   const setPage = useLayoutDataStore((st) => st.setPage);
   const isWalletLinking = useLayoutDataStore((st) => st.isWalletLinking);
@@ -10328,7 +10326,7 @@ function useLinkSocial() {
         await qc.invalidateQueries({ queryKey: [PROVIDERS_QUERY_KEY, address] });
         await qc.invalidateQueries({ queryKey: [LINKED_PROFILES_QUERY_KEY, address] });
         try {
-          callbacks?.onAccountUpdate?.({ providers: qc.getQueryData([PROVIDERS_QUERY_KEY, address]) });
+          callbacksRef.current?.onAccountUpdate?.({ providers: qc.getQueryData([PROVIDERS_QUERY_KEY, address]) });
         } catch {
         }
         setProviderType(null);
@@ -10342,7 +10340,7 @@ function useLinkSocial() {
         setLinkIsLoading(false);
       }
     },
-    [config.social?.providers, callbacks]
+    [config.social?.providers]
   );
   const [socialLinkStarted, setSocialLinkStarted] = React5.useState(false);
   useEffect26(() => {
@@ -10432,7 +10430,7 @@ import { useCallback as useCallback13, useEffect as useEffect27, useState as use
 function useLinkTelegram() {
   const {
     config: { current: config },
-    callbacks
+    callbacksRef
   } = useProviderConfig();
   const qc = useQueryClient13();
   const address = useSession((st) => st.address);
@@ -10473,7 +10471,7 @@ function useLinkTelegram() {
       await qc.invalidateQueries({ queryKey: [PROVIDERS_QUERY_KEY, address] });
       await qc.invalidateQueries({ queryKey: [LINKED_PROFILES_QUERY_KEY, address] });
       try {
-        callbacks?.onAccountUpdate?.({ providers: qc.getQueryData([PROVIDERS_QUERY_KEY, address]) });
+        callbacksRef.current?.onAccountUpdate?.({ providers: qc.getQueryData([PROVIDERS_QUERY_KEY, address]) });
       } catch {
       }
       setPage("manage-wallet" /* MANAGE_WALLET */);
@@ -10485,7 +10483,7 @@ function useLinkTelegram() {
     } finally {
       setLinkIsLoading(false);
     }
-  }, [config.social?.providers, callbacks]);
+  }, [config.social?.providers]);
   const [telegramLinkStarted, setTelegramLinkStarted] = useState9(false);
   useEffect27(() => {
     console.log("[useLinkTelegram] Effect triggered:", {
@@ -10791,7 +10789,7 @@ import { jsx as jsx57, jsxs as jsxs50 } from "react/jsx-runtime";
 function UnlinkProviderMenu() {
   const qc = useQueryClient14();
   const address = useSession((st) => st.address);
-  const { callbacks } = useProviderConfig();
+  const { callbacksRef } = useProviderConfig();
   const { t } = useT();
   const setPage = useLayoutDataStore((st) => st.setPage);
   const { confirmUnlink, setConfirmUnlink, setAlert } = useManageWalletStore();
@@ -10811,7 +10809,7 @@ function UnlinkProviderMenu() {
       await qc.invalidateQueries({ queryKey: [LINKED_PROFILES_QUERY_KEY, address], refetchType: "active" });
       await qc.refetchQueries({ queryKey: [PROVIDERS_QUERY_KEY, address] });
       try {
-        callbacks?.onAccountUpdate?.({ providers: qc.getQueryData([PROVIDERS_QUERY_KEY, address]) });
+        callbacksRef.current?.onAccountUpdate?.({ providers: qc.getQueryData([PROVIDERS_QUERY_KEY, address]) });
       } catch {
       }
     },
@@ -11034,7 +11032,7 @@ function NicknameEditForm(props) {
   const qc = useQueryClient15();
   const { t } = useT();
   const passportWalletAddress = useSession((st) => st.address);
-  const callbacks = useProviderConfig().callbacks;
+  const { callbacksRef } = useProviderConfig();
   const [isNicknameCopied, setIsNicknameCopied] = useState11(false);
   const {
     mutate: changeNickname2,
@@ -11049,7 +11047,9 @@ function NicknameEditForm(props) {
       qc.invalidateQueries({ queryKey: [QUERY_KEYS.nicknameInfo] });
       qc.invalidateQueries({ queryKey: [QUERY_KEYS.userProfile] });
       try {
-        callbacks?.onAccountUpdate?.({ providers: qc.getQueryData([PROVIDERS_QUERY_KEY, passportWalletAddress]) });
+        callbacksRef.current?.onAccountUpdate?.({
+          providers: qc.getQueryData([PROVIDERS_QUERY_KEY, passportWalletAddress])
+        });
       } catch (err) {
         console.warn("[NicknameEditForm] Error due executing onAccountUpdate callback", err);
       }
@@ -15470,7 +15470,7 @@ var init_package = __esm({
   "package.json"() {
     package_default = {
       name: "@embarkai/ui-kit",
-      version: "0.2.1",
+      version: "0.2.3",
       description: "React UI components and hooks for EmbarkAI authentication and Account Abstraction",
       type: "module",
       main: "./dist/index.cjs",
@@ -15572,7 +15572,7 @@ import { Loader as Loader31, LogOut } from "lucide-react";
 import { jsx as jsx88, jsxs as jsxs79 } from "react/jsx-runtime";
 function Footer() {
   const qc = useQueryClient20();
-  const { callbacks } = useProviderConfig();
+  const { callbacksRef } = useProviderConfig();
   const { address, setSession, setAddress, setStatus, setError, setIsLoading } = useSession();
   const chainConfig = useSession((st) => st.chainConfig);
   const { t } = useT();
@@ -15597,7 +15597,7 @@ function Footer() {
       setError(null);
       setStatus("idle");
       setIsLoading(false);
-      callbacks?.onDisconnect?.({ address: disconnectAddress, userId: disconnectedUserId });
+      callbacksRef.current?.onDisconnect?.({ address: disconnectAddress, userId: disconnectedUserId });
       setTimeout(() => {
         setPage("auth" /* AUTH */);
         setIsDialogForced(false);
@@ -16252,7 +16252,7 @@ import React8, { useCallback as useCallback23, useEffect as useEffect36 } from "
 import { useAccount, useDisconnect, useSignMessage } from "wagmi";
 function WalletConnectHandler() {
   const qc = useQueryClient21();
-  const callbacks = useProviderConfig().callbacks;
+  const { callbacksRef } = useProviderConfig();
   const passportWalletAddress = useSession((st) => st.address);
   const { address: walletAddress, isConnected, chain, connector } = useAccount();
   const { openConnectModal, connectModalOpen } = useConnectModal();
@@ -16290,11 +16290,13 @@ function WalletConnectHandler() {
         refetchType: "active"
       });
       try {
-        callbacks?.onAccountUpdate?.({ providers: qc.getQueryData([PROVIDERS_QUERY_KEY, passportWalletAddress]) });
+        callbacksRef.current?.onAccountUpdate?.({
+          providers: qc.getQueryData([PROVIDERS_QUERY_KEY, passportWalletAddress])
+        });
       } catch {
       }
     },
-    [qc, passportWalletAddress, callbacks, setProviderType, setPage, setIsWalletLinking]
+    [qc, passportWalletAddress, setProviderType, setPage, setIsWalletLinking]
   );
   const [hasStartedLinking, setHasStartedLinking] = React8.useState(false);
   useEffect36(() => {
@@ -16334,7 +16336,16 @@ function WalletConnectHandler() {
       const shouldKeepConnected = walletMode === "direct" || walletMode === "both";
       if (isConnected && !shouldKeepConnected) disconnect();
     }
-  }, [isWalletLinking, hasStartedLinking, isConnected, openConnectModal, disconnect, setPage, setProviderType, walletMode]);
+  }, [
+    isWalletLinking,
+    hasStartedLinking,
+    isConnected,
+    openConnectModal,
+    disconnect,
+    setPage,
+    setProviderType,
+    walletMode
+  ]);
   useEffect36(() => {
     if (hasStartedLinking && !connectModalOpen && !isConnected && isWalletLinking) {
       console.log("[WalletConnectHandler] Modal closed without connecting");
@@ -16447,7 +16458,16 @@ function WalletConnectHandler() {
       }, 5e3);
       return () => clearTimeout(timeout);
     }
-  }, [isConnected, chain?.id, isWalletLinking, hasStartedLinking, connectModalOpen, isWalletSigning, onLinkingComplete, disconnect]);
+  }, [
+    isConnected,
+    chain?.id,
+    isWalletLinking,
+    hasStartedLinking,
+    connectModalOpen,
+    isWalletSigning,
+    onLinkingComplete,
+    disconnect
+  ]);
   return null;
 }
 var init_WalletConnectHandler = __esm({
@@ -19352,7 +19372,14 @@ function Provider(props) {
     }
   }, [projectId]);
   const contextValue = useMemo10(
-    () => ({ config, updateConfig, callbacks, updateCallbacks }),
+    () => ({
+      config,
+      updateConfig,
+      /** @deprecated */
+      callbacks,
+      callbacksRef,
+      updateCallbacks
+    }),
     [config, updateConfig, callbacks, updateCallbacks]
   );
   if (!!initialConfig?.wallet?.enabled)
@@ -20712,7 +20739,7 @@ import { logout as coreLogout, jwtTokenManager as jwtTokenManager3 } from "@emba
 import { useCallback as useCallback32 } from "react";
 function useLogout() {
   const { setSession, setIsLoading, setAddress, setStatus, setError, address } = useSession();
-  const { callbacks } = useProviderConfig();
+  const { callbacksRef } = useProviderConfig();
   const logout2 = useCallback32(async () => {
     const prevAddress = address;
     let userId = null;
@@ -20733,14 +20760,14 @@ function useLogout() {
     setError(null);
     setIsLoading(false);
     try {
-      callbacks?.onDisconnect?.({
+      callbacksRef.current?.onDisconnect?.({
         address: prevAddress,
         userId
       });
     } catch (error) {
       console.warn("[useLogout] Callback error:", error);
     }
-  }, [address, setAddress, setError, setSession, setStatus, callbacks]);
+  }, [address, setAddress, setError, setSession, setStatus]);
   return { logout: logout2 };
 }
 var init_useLogout = __esm({