@embarkai/ui-kit 0.4.10 → 0.4.12

package/dist/iframe/index.html

@@ -15,7 +15,7 @@
     <meta http-equiv="X-Content-Type-Options" content="nosniff" />
     <meta http-equiv="Referrer-Policy" content="strict-origin-when-cross-origin" />
 
-    <title>EmbarkAI Secure Wallet - iframe version 0.4.10</title>
+    <title>EmbarkAI Secure Wallet - iframe version 0.4.12</title>
 
     <!-- Styles will be injected by build process -->
     <style>

package/dist/iframe/main.js

@@ -6262,7 +6262,7 @@ var SigningManager = class extends TokenRefreshApiClient {
 };
 
 // src/iframe/main.ts
-var IFRAME_VERSION = "0.4.10";
+var IFRAME_VERSION = "0.4.12";
 var IframeWallet = class {
   constructor() {
     console.log("=".repeat(60));

package/dist/index.cjs

@@ -5281,7 +5281,7 @@ var init_OtpIcon = __esm({
 });
 
 // src/internal/components/AuthMenu/VerifyStep/VerificationCodeInput.tsx
-var import_react16, import_jsx_runtime15, VerificationCodeInput;
+var import_react16, import_jsx_runtime15, getRemainingSeconds, VerificationCodeInput;
 var init_VerificationCodeInput = __esm({
   "src/internal/components/AuthMenu/VerifyStep/VerificationCodeInput.tsx"() {
     init_i18n();
@@ -5290,16 +5290,39 @@ var init_VerificationCodeInput = __esm({
     init_button();
     init_useAuthStore();
     import_jsx_runtime15 = require("react/jsx-runtime");
+    getRemainingSeconds = (expiresAt) => Math.max(0, Math.ceil((expiresAt - Date.now()) / 1e3));
     VerificationCodeInput = (props) => {
       const { onVerifyCode, onResendCode, isLoading, expiresIn } = props;
       const { t } = useT();
       const setAlert = useAuthStore((st) => st.setAlert);
-      const [timeLeft, setTimeLeft] = (0, import_react16.useState)(expiresIn);
+      const [expiresAt, setExpiresAt] = (0, import_react16.useState)(() => Date.now() + Math.max(0, expiresIn) * 1e3);
+      const [timeLeft, setTimeLeft] = (0, import_react16.useState)(() => getRemainingSeconds(expiresAt));
       (0, import_react16.useEffect)(() => {
-        if (timeLeft <= 0) return;
-        const t2 = setTimeout(() => setTimeLeft((s) => s - 1), 1e3);
-        return () => clearTimeout(t2);
-      }, [timeLeft]);
+        const nextExpiresAt = Date.now() + Math.max(0, expiresIn) * 1e3;
+        setExpiresAt(nextExpiresAt);
+        setTimeLeft(getRemainingSeconds(nextExpiresAt));
+      }, [expiresIn]);
+      (0, import_react16.useEffect)(() => {
+        let intervalId;
+        const syncTimeLeft = () => {
+          const remaining = getRemainingSeconds(expiresAt);
+          setTimeLeft(remaining);
+          if (remaining <= 0 && intervalId) {
+            window.clearInterval(intervalId);
+            intervalId = void 0;
+          }
+        };
+        syncTimeLeft();
+        if (getRemainingSeconds(expiresAt) <= 0) return;
+        intervalId = window.setInterval(syncTimeLeft, 1e3);
+        window.addEventListener("focus", syncTimeLeft);
+        document.addEventListener("visibilitychange", syncTimeLeft);
+        return () => {
+          if (intervalId) window.clearInterval(intervalId);
+          window.removeEventListener("focus", syncTimeLeft);
+          document.removeEventListener("visibilitychange", syncTimeLeft);
+        };
+      }, [expiresAt]);
       const lastSubmittedRef = (0, import_react16.useRef)(null);
       const inputsRef = (0, import_react16.useRef)([]);
       const [digits, setDigits] = (0, import_react16.useState)(["", "", "", "", "", ""]);
@@ -5480,14 +5503,17 @@ function VerifyStep(props) {
     },
     onError: (error) => {
       let errorMessage = "";
-      if (error.message?.includes("Invalid") || error.message?.includes("invalid")) {
+      const rawErrorMessage = error.message || "";
+      const normalizedErrorMessage = rawErrorMessage.toLowerCase();
+      if (normalizedErrorMessage.includes("invalid")) {
         errorMessage = "Invalid verification code. Please try again.";
-      } else if (error.message?.includes("expired")) {
+      } else if (normalizedErrorMessage.includes("expired")) {
         errorMessage = "Verification code expired. Please request a new one.";
-      } else if (error.message?.includes("429") || error.message?.includes("Too many")) {
+        setExpiresIn(0);
+      } else if (normalizedErrorMessage.includes("429") || normalizedErrorMessage.includes("too many")) {
         errorMessage = "Too many attempts. Please try again later.";
       } else {
-        errorMessage = error.message || "Verification failed. Please try again.";
+        errorMessage = rawErrorMessage || "Verification failed. Please try again.";
       }
       setAlert({
         title: "Verification failed",
@@ -13716,7 +13742,17 @@ function useVerifyCode() {
   const qc = (0, import_react_query30.useQueryClient)();
   const address = useSession((st) => st.address);
   const setIsLoading = useSession((st) => st.setIsLoading);
-  const { email, emailCode, setEmail, setEmailStep, setEmailCode, setProviderType, setLinkIsLoading, setAlert } = useManageWalletStore();
+  const {
+    email,
+    emailCode,
+    setEmail,
+    setEmailStep,
+    setEmailCode,
+    setEmailCodeExpiresIn,
+    setProviderType,
+    setLinkIsLoading,
+    setAlert
+  } = useManageWalletStore();
   return (0, import_react_query30.useMutation)({
     mutationFn: async (codeToVerify) => {
       const code = codeToVerify ?? emailCode;
@@ -13745,7 +13781,11 @@ function useVerifyCode() {
       setLinkIsLoading(false);
     },
     onError: (error) => {
-      setAlert({ title: "Error", message: error?.message || "Failed to verify and link email" });
+      const message = error?.message || "Failed to verify and link email";
+      if (message.toLowerCase().includes("expired")) {
+        setEmailCodeExpiresIn(0);
+      }
+      setAlert({ title: "Error", message });
       setIsLoading(false);
       setLinkIsLoading(false);
     }
@@ -15813,6 +15853,55 @@ var init_constants6 = __esm({
   }
 });
 
+// src/internal/components/SecurityMenu/hooks.ts
+function useConnectedApps() {
+  const session = useSession((st) => st.session);
+  const userId = session?.mpcUserId || null;
+  return (0, import_react_query42.useQuery)({
+    retry: false,
+    enabled: !!userId,
+    queryKey: [CONNECTED_TRUSTED_APPS_QUERY, userId],
+    queryFn: async () => {
+      const iframeManager = getIframeManager();
+      return await iframeManager.getTrustedApps(userId).catch(() => {
+        console.error("[ConnectedApps] Failed to load connected apps from iframe");
+        return [];
+      });
+    }
+  });
+}
+function useKeyshareRecoveryStats() {
+  const session = useSession((st) => st.session);
+  const userId = session?.mpcUserId || null;
+  return (0, import_react_query42.useQuery)({
+    enabled: !!userId,
+    queryKey: [KEYSHARE_RECOVERY_STATS_QUERY, userId],
+    queryFn: async () => {
+      const iframeManager = getIframeManager();
+      if (!iframeManager) {
+        throw new Error("Iframe manager not available");
+      }
+      const keyshareInfo = await getKeyshareInfo(userId);
+      const shareRecoveryStats = await getShareRecoveryStats();
+      return {
+        keyshareInfo,
+        shareRecoveryStats
+      };
+    }
+  });
+}
+var import_react_query42;
+var init_hooks2 = __esm({
+  "src/internal/components/SecurityMenu/hooks.ts"() {
+    init_SessionContext();
+    import_react_query42 = require("@tanstack/react-query");
+    init_keyshare();
+    init_iframe_manager();
+    init_vaultClient();
+    init_constants6();
+  }
+});
+
 // src/internal/components/SecurityMenu/ConnectedApps.tsx
 function Application(props) {
   const { appLogo, appName, origin, trustedAt, untrustApp } = props;
@@ -15876,20 +15965,7 @@ function Application(props) {
 function ConnectedApps(props) {
   const { isLoading: isParentLoading, untrustApp } = props;
   const { t } = useT();
-  const session = useSession((st) => st.session);
-  const userId = session?.mpcUserId || null;
-  const { data: connectedApps = [], isLoading: isConnectedAppsLoading } = (0, import_react_query42.useQuery)({
-    retry: false,
-    enabled: !!userId,
-    queryKey: [CONNECTED_TRUSTED_APPS_QUERY, userId],
-    queryFn: async () => {
-      const iframeManager = getIframeManager();
-      return await iframeManager.getTrustedApps(userId).catch(() => {
-        console.error("[ConnectedApps] Failed to load connected apps from iframe");
-        return [];
-      });
-    }
-  });
+  const { data: connectedApps = [], isLoading: isConnectedAppsLoading } = useConnectedApps();
   const isLoading = isConnectedAppsLoading || isParentLoading;
   if (isLoading) return null;
   if (!isLoading && connectedApps.length === 0)
@@ -15908,20 +15984,17 @@ function ConnectedApps(props) {
     /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className: "w-full flex flex-col gap-[var(--ui-kit-gap)]", children: connectedApps.map((app, index) => /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(Application, { ...app, untrustApp }, index)) })
   ] });
 }
-var import_react_query42, import_dayjs5, import_lodash_es7, import_lucide_react52, import_jsx_runtime82;
+var import_dayjs5, import_lodash_es7, import_lucide_react52, import_jsx_runtime82;
 var init_ConnectedApps = __esm({
   "src/internal/components/SecurityMenu/ConnectedApps.tsx"() {
     init_utils2();
-    init_SessionContext();
     init_i18n();
-    import_react_query42 = require("@tanstack/react-query");
     import_dayjs5 = __toESM(require("dayjs"), 1);
     import_lodash_es7 = require("lodash-es");
     import_lucide_react52 = require("lucide-react");
-    init_iframe_manager();
     init_button();
     init_highlight();
-    init_constants6();
+    init_hooks2();
     import_jsx_runtime82 = require("react/jsx-runtime");
   }
 });
@@ -16202,22 +16275,7 @@ function SecurityMenu() {
   const userId = import_auth20.jwtTokenManager.getUserId();
   const serverHasKeyshare = import_auth20.jwtTokenManager.getHasKeyshare() ?? false;
   const [appToUntrust, untrustApp] = (0, import_react60.useState)(null);
-  const { data: recoveryData, isLoading: isRecoveryLoading } = (0, import_react_query43.useQuery)({
-    enabled: !!userId,
-    queryKey: [KEYSHARE_RECOVERY_STATS_QUERY, userId],
-    queryFn: async () => {
-      const iframeManager = getIframeManager();
-      if (!iframeManager) {
-        throw new Error("Iframe manager not available");
-      }
-      const keyshareInfo = await getKeyshareInfo(userId);
-      const shareRecoveryStats = await getShareRecoveryStats();
-      return {
-        keyshareInfo,
-        shareRecoveryStats
-      };
-    }
-  });
+  const { data: recoveryData, isLoading: isRecoveryLoading } = useKeyshareRecoveryStats();
   const localInfo = recoveryData?.keyshareInfo || {};
   const hasServerBackup = !!recoveryData?.shareRecoveryStats?.created || recoveryData?.shareRecoveryStats?.devices?.length > 0;
   const { mutate: handleUntrustApp, isPending: isUntrustingApp } = (0, import_react_query43.useMutation)({
@@ -16300,15 +16358,14 @@ var init_SecurityMenu = __esm({
     import_lucide_react57 = require("lucide-react");
     import_react60 = require("react");
     init_auth();
-    init_keyshare();
     init_useLayoutDataStore();
     init_useLayoutStore();
     init_iframe_manager();
-    init_vaultClient();
     init_Expandable2();
     init_button();
     init_ConnectedApps();
     init_constants6();
+    init_hooks2();
     init_Keyshare2();
     init_UntrustApplication();
     import_jsx_runtime88 = require("react/jsx-runtime");
@@ -19223,7 +19280,7 @@ var init_package = __esm({
   "package.json"() {
     package_default = {
       name: "@embarkai/ui-kit",
-      version: "0.4.10",
+      version: "0.4.12",
       description: "React UI components and hooks for EmbarkAI authentication and Account Abstraction",
       type: "module",
       main: "./dist/index.cjs",
@@ -25083,7 +25140,6 @@ var USER_PROFILE_QUERY_KEY;
 var init_exportedQueryKeys = __esm({
   "src/internal/exportedQueryKeys.ts"() {
     init_profile();
-    init_constants6();
     USER_PROFILE_QUERY_KEY = QUERY_KEYS.userProfile;
   }
 });
@@ -25093,11 +25149,9 @@ var index_exports = {};
 __export(index_exports, {
   AccountAbstractionError: () => AccountAbstractionError,
   Address: () => Address,
-  CONNECTED_TRUSTED_APPS_QUERY_KEY: () => CONNECTED_TRUSTED_APPS_QUERY,
   ConnectWalletButton: () => ConnectWalletButton,
   ErrorCodes: () => ErrorCodes,
   Hash: () => Hash,
-  KEYSHARE_RECOVERY_STATS_QUERY_KEY: () => KEYSHARE_RECOVERY_STATS_QUERY,
   KeyshareBackup: () => KeyshareBackupMenu,
   LOCAL_STORAGE_I18N_KEY: () => LOCAL_STORAGE_I18N_KEY,
   LangToggle: () => LangToggle,
@@ -25141,6 +25195,7 @@ __export(index_exports, {
   useBalance: () => useBalance,
   useBlockscoutAssets: () => useBlockscoutAssets,
   useColorMode: () => useColorMode,
+  useConnectedApps: () => useConnectedApps,
   useDirectWallet: () => useDirectWallet,
   useErc3643Compliance: () => useErc3643Compliance,
   useError: () => useError,
@@ -25148,6 +25203,7 @@ __export(index_exports, {
   useHydrated: () => useHydrated,
   useIFrameReady: () => useIFrameReady,
   useIsMobileView: () => useIsMobileView,
+  useKeyshareRecoveryStats: () => useKeyshareRecoveryStats,
   useLinkedProfiles: () => useLinkedProfiles,
   useLoadingStatus: () => useLoadingStatus,
   useLogout: () => useLogout,
@@ -25218,6 +25274,7 @@ var init_index = __esm({
     init_clients2();
     init_auth();
     init_profile();
+    init_hooks2();
     init_linkedProfiles();
     init_nickname_fingerprint();
     init_errors();
@@ -25239,11 +25296,9 @@ init_index();
 0 && (module.exports = {
   AccountAbstractionError,
   Address,
-  CONNECTED_TRUSTED_APPS_QUERY_KEY,
   ConnectWalletButton,
   ErrorCodes,
   Hash,
-  KEYSHARE_RECOVERY_STATS_QUERY_KEY,
   KeyshareBackup,
   LOCAL_STORAGE_I18N_KEY,
   LangToggle,
@@ -25287,6 +25342,7 @@ init_index();
   useBalance,
   useBlockscoutAssets,
   useColorMode,
+  useConnectedApps,
   useDirectWallet,
   useErc3643Compliance,
   useError,
@@ -25294,6 +25350,7 @@ init_index();
   useHydrated,
   useIFrameReady,
   useIsMobileView,
+  useKeyshareRecoveryStats,
   useLinkedProfiles,
   useLoadingStatus,
   useLogout,

package/dist/index.d.cts

@@ -1802,6 +1802,24 @@ declare function getUserProfile(): Promise<UserProfile>;
  */
 declare function updateUserProfile(updates: UpdateProfileRequest): Promise<UserProfile>;
 
+declare function useConnectedApps(): _tanstack_react_query.UseQueryResult<any[] | {
+    userId: string;
+    projectId: string;
+    origin: string;
+    trustedAt: number;
+    appName?: string;
+    appLogo?: string;
+}[], Error>;
+declare function useKeyshareRecoveryStats(): _tanstack_react_query.UseQueryResult<{
+    keyshareInfo: {
+        hasKeyshare: boolean;
+        ownerAddress?: `0x${string}`;
+        sessionId?: string;
+        keyshareSize?: number;
+    };
+    shareRecoveryStats: RecoveryStats;
+}, Error>;
+
 interface LinkedProfileDisplay extends AuthProvider {
     displayName: string;
     icon?: React.ComponentType<{
@@ -2981,9 +2999,6 @@ declare function combineI18NResources(...resourses: TranslationResources[]): Tra
 declare function getAvailableLanguages(resourses: TranslationResources): string[];
 declare function getLanguageIcon(languageKey: string): string | null;
 
-declare const KEYSHARE_RECOVERY_STATS_QUERY = "keyshare-recovery-stats-query";
-declare const CONNECTED_TRUSTED_APPS_QUERY = "connected-trusted-apps-query";
-
 declare const USER_PROFILE_QUERY_KEY: string;
 
-export { AccountAbstractionError, type AccountSession, Address, type AddressProps, type Asset, CONNECTED_TRUSTED_APPS_QUERY as CONNECTED_TRUSTED_APPS_QUERY_KEY, type CallbacksConfig, ConnectWalletButton, type ConnectWalletButtonProps, type DirectTransactionParams, ErrorCodes, type FingerprintVerificationResult, Hash, type HashProps, KEYSHARE_RECOVERY_STATS_QUERY as KEYSHARE_RECOVERY_STATS_QUERY_KEY, KeyshareBackupMenu as KeyshareBackup, LOCAL_STORAGE_I18N_KEY, LangToggle, type NicknameAvailability, type NicknameAvatar, type NicknameChangeResult, type NicknameInfo, type NicknameResolution, type NicknameResolveRequest, type NicknameResolvedTarget, type NicknameValidationResult, PASSPORT_TRANSLATIONS, PageKey, type PageOpenParams, Provider, type ProviderConfig, type ProviderDetail, type ProviderProps, type RegisterSmartAccountResult, type SendTransactionParams, type SendTransactionResult, type SignTypedDataParams, type SmartAccountEntry, ThemeToggle, type TokenBalance, type Transaction, TransactionsList, type TransferToLinkedParams, type TypedDataDomain, type TypedDataField, USER_PROFILE_QUERY_KEY, type UpdateProfileRequest, type UseDirectWalletReturn, type UseErc3643ComplianceOptions, type UseErc3643ComplianceResult, type UseLogoutReturn, type UseNicknameResolveOptions, type UseNicknameResolveResult, type UseSendDirectTransactionReturn, type UseSendTransactionReturn, type UseTransferToLinkedReturn, type UseUserOpStatusOptions, type UseUserOpStatusReturn, type UseWalletModeReturn, type UserOpMempool, type SendTransactionParams$1 as UserOpSendTransactionParams, type UserOpState, UserOpStatus, type UserOpStatusProps, type UserOperation, type UserOperationByHash, type UserOperationReceipt, UserOperationTimeoutError, type UserProfile, UserRejectedError, type WaitForReceiptOptions, type WalletMode, type WalletReadyStatus, type WatchToken, combineI18NResources, createAccountAbstractionError, deployAccount, destroyIframeManager, generateFingerprint, getAllSmartAccounts, getAvailableLanguages, getExplorerUrl, getIframeManager, getLanguageIcon, getShareRecoveryStats, getSmartAccountForChain, getUserOperationByHash, getUserOperationReceipt, getUserProfile, looksLikeNickname, prepareUserOperation, requireActiveChainId, sendUserOperation, signTypedData, updateUserProfile, useAccountSession, useActiveChainId, useAddress, useAssets, useBalance, useBlockscoutAssets, useColorMode, useDirectWallet, useErc3643Compliance, useError, useHasServerVault, useHydrated, useIFrameReady, useIsMobileView, useLinkedProfiles, useLoadingStatus, useLogout, useNativeWalletSignature, useNicknameResolve, useOpenPage, useProviderConfig, useRecoveryUserId, useSendDirectTransaction, useSendTransaction, useSession, useSmartAccountTransactions, useTokenBalance, useTokenInfo, useTransactions, useTransferToLinkedWallet, useUserOpStatus, useWalletMode, verifyFingerprint, verifyFingerprintDetailed, wagmiConfig, waitForStoreHydration, waitForUserOperationReceipt };
+export { AccountAbstractionError, type AccountSession, Address, type AddressProps, type Asset, type CallbacksConfig, ConnectWalletButton, type ConnectWalletButtonProps, type DirectTransactionParams, ErrorCodes, type FingerprintVerificationResult, Hash, type HashProps, KeyshareBackupMenu as KeyshareBackup, LOCAL_STORAGE_I18N_KEY, LangToggle, type NicknameAvailability, type NicknameAvatar, type NicknameChangeResult, type NicknameInfo, type NicknameResolution, type NicknameResolveRequest, type NicknameResolvedTarget, type NicknameValidationResult, PASSPORT_TRANSLATIONS, PageKey, type PageOpenParams, Provider, type ProviderConfig, type ProviderDetail, type ProviderProps, type RegisterSmartAccountResult, type SendTransactionParams, type SendTransactionResult, type SignTypedDataParams, type SmartAccountEntry, ThemeToggle, type TokenBalance, type Transaction, TransactionsList, type TransferToLinkedParams, type TypedDataDomain, type TypedDataField, USER_PROFILE_QUERY_KEY, type UpdateProfileRequest, type UseDirectWalletReturn, type UseErc3643ComplianceOptions, type UseErc3643ComplianceResult, type UseLogoutReturn, type UseNicknameResolveOptions, type UseNicknameResolveResult, type UseSendDirectTransactionReturn, type UseSendTransactionReturn, type UseTransferToLinkedReturn, type UseUserOpStatusOptions, type UseUserOpStatusReturn, type UseWalletModeReturn, type UserOpMempool, type SendTransactionParams$1 as UserOpSendTransactionParams, type UserOpState, UserOpStatus, type UserOpStatusProps, type UserOperation, type UserOperationByHash, type UserOperationReceipt, UserOperationTimeoutError, type UserProfile, UserRejectedError, type WaitForReceiptOptions, type WalletMode, type WalletReadyStatus, type WatchToken, combineI18NResources, createAccountAbstractionError, deployAccount, destroyIframeManager, generateFingerprint, getAllSmartAccounts, getAvailableLanguages, getExplorerUrl, getIframeManager, getLanguageIcon, getShareRecoveryStats, getSmartAccountForChain, getUserOperationByHash, getUserOperationReceipt, getUserProfile, looksLikeNickname, prepareUserOperation, requireActiveChainId, sendUserOperation, signTypedData, updateUserProfile, useAccountSession, useActiveChainId, useAddress, useAssets, useBalance, useBlockscoutAssets, useColorMode, useConnectedApps, useDirectWallet, useErc3643Compliance, useError, useHasServerVault, useHydrated, useIFrameReady, useIsMobileView, useKeyshareRecoveryStats, useLinkedProfiles, useLoadingStatus, useLogout, useNativeWalletSignature, useNicknameResolve, useOpenPage, useProviderConfig, useRecoveryUserId, useSendDirectTransaction, useSendTransaction, useSession, useSmartAccountTransactions, useTokenBalance, useTokenInfo, useTransactions, useTransferToLinkedWallet, useUserOpStatus, useWalletMode, verifyFingerprint, verifyFingerprintDetailed, wagmiConfig, waitForStoreHydration, waitForUserOperationReceipt };

package/dist/index.d.ts

@@ -1802,6 +1802,24 @@ declare function getUserProfile(): Promise<UserProfile>;
  */
 declare function updateUserProfile(updates: UpdateProfileRequest): Promise<UserProfile>;
 
+declare function useConnectedApps(): _tanstack_react_query.UseQueryResult<any[] | {
+    userId: string;
+    projectId: string;
+    origin: string;
+    trustedAt: number;
+    appName?: string;
+    appLogo?: string;
+}[], Error>;
+declare function useKeyshareRecoveryStats(): _tanstack_react_query.UseQueryResult<{
+    keyshareInfo: {
+        hasKeyshare: boolean;
+        ownerAddress?: `0x${string}`;
+        sessionId?: string;
+        keyshareSize?: number;
+    };
+    shareRecoveryStats: RecoveryStats;
+}, Error>;
+
 interface LinkedProfileDisplay extends AuthProvider {
     displayName: string;
     icon?: React.ComponentType<{
@@ -2981,9 +2999,6 @@ declare function combineI18NResources(...resourses: TranslationResources[]): Tra
 declare function getAvailableLanguages(resourses: TranslationResources): string[];
 declare function getLanguageIcon(languageKey: string): string | null;
 
-declare const KEYSHARE_RECOVERY_STATS_QUERY = "keyshare-recovery-stats-query";
-declare const CONNECTED_TRUSTED_APPS_QUERY = "connected-trusted-apps-query";
-
 declare const USER_PROFILE_QUERY_KEY: string;
 
-export { AccountAbstractionError, type AccountSession, Address, type AddressProps, type Asset, CONNECTED_TRUSTED_APPS_QUERY as CONNECTED_TRUSTED_APPS_QUERY_KEY, type CallbacksConfig, ConnectWalletButton, type ConnectWalletButtonProps, type DirectTransactionParams, ErrorCodes, type FingerprintVerificationResult, Hash, type HashProps, KEYSHARE_RECOVERY_STATS_QUERY as KEYSHARE_RECOVERY_STATS_QUERY_KEY, KeyshareBackupMenu as KeyshareBackup, LOCAL_STORAGE_I18N_KEY, LangToggle, type NicknameAvailability, type NicknameAvatar, type NicknameChangeResult, type NicknameInfo, type NicknameResolution, type NicknameResolveRequest, type NicknameResolvedTarget, type NicknameValidationResult, PASSPORT_TRANSLATIONS, PageKey, type PageOpenParams, Provider, type ProviderConfig, type ProviderDetail, type ProviderProps, type RegisterSmartAccountResult, type SendTransactionParams, type SendTransactionResult, type SignTypedDataParams, type SmartAccountEntry, ThemeToggle, type TokenBalance, type Transaction, TransactionsList, type TransferToLinkedParams, type TypedDataDomain, type TypedDataField, USER_PROFILE_QUERY_KEY, type UpdateProfileRequest, type UseDirectWalletReturn, type UseErc3643ComplianceOptions, type UseErc3643ComplianceResult, type UseLogoutReturn, type UseNicknameResolveOptions, type UseNicknameResolveResult, type UseSendDirectTransactionReturn, type UseSendTransactionReturn, type UseTransferToLinkedReturn, type UseUserOpStatusOptions, type UseUserOpStatusReturn, type UseWalletModeReturn, type UserOpMempool, type SendTransactionParams$1 as UserOpSendTransactionParams, type UserOpState, UserOpStatus, type UserOpStatusProps, type UserOperation, type UserOperationByHash, type UserOperationReceipt, UserOperationTimeoutError, type UserProfile, UserRejectedError, type WaitForReceiptOptions, type WalletMode, type WalletReadyStatus, type WatchToken, combineI18NResources, createAccountAbstractionError, deployAccount, destroyIframeManager, generateFingerprint, getAllSmartAccounts, getAvailableLanguages, getExplorerUrl, getIframeManager, getLanguageIcon, getShareRecoveryStats, getSmartAccountForChain, getUserOperationByHash, getUserOperationReceipt, getUserProfile, looksLikeNickname, prepareUserOperation, requireActiveChainId, sendUserOperation, signTypedData, updateUserProfile, useAccountSession, useActiveChainId, useAddress, useAssets, useBalance, useBlockscoutAssets, useColorMode, useDirectWallet, useErc3643Compliance, useError, useHasServerVault, useHydrated, useIFrameReady, useIsMobileView, useLinkedProfiles, useLoadingStatus, useLogout, useNativeWalletSignature, useNicknameResolve, useOpenPage, useProviderConfig, useRecoveryUserId, useSendDirectTransaction, useSendTransaction, useSession, useSmartAccountTransactions, useTokenBalance, useTokenInfo, useTransactions, useTransferToLinkedWallet, useUserOpStatus, useWalletMode, verifyFingerprint, verifyFingerprintDetailed, wagmiConfig, waitForStoreHydration, waitForUserOperationReceipt };
+export { AccountAbstractionError, type AccountSession, Address, type AddressProps, type Asset, type CallbacksConfig, ConnectWalletButton, type ConnectWalletButtonProps, type DirectTransactionParams, ErrorCodes, type FingerprintVerificationResult, Hash, type HashProps, KeyshareBackupMenu as KeyshareBackup, LOCAL_STORAGE_I18N_KEY, LangToggle, type NicknameAvailability, type NicknameAvatar, type NicknameChangeResult, type NicknameInfo, type NicknameResolution, type NicknameResolveRequest, type NicknameResolvedTarget, type NicknameValidationResult, PASSPORT_TRANSLATIONS, PageKey, type PageOpenParams, Provider, type ProviderConfig, type ProviderDetail, type ProviderProps, type RegisterSmartAccountResult, type SendTransactionParams, type SendTransactionResult, type SignTypedDataParams, type SmartAccountEntry, ThemeToggle, type TokenBalance, type Transaction, TransactionsList, type TransferToLinkedParams, type TypedDataDomain, type TypedDataField, USER_PROFILE_QUERY_KEY, type UpdateProfileRequest, type UseDirectWalletReturn, type UseErc3643ComplianceOptions, type UseErc3643ComplianceResult, type UseLogoutReturn, type UseNicknameResolveOptions, type UseNicknameResolveResult, type UseSendDirectTransactionReturn, type UseSendTransactionReturn, type UseTransferToLinkedReturn, type UseUserOpStatusOptions, type UseUserOpStatusReturn, type UseWalletModeReturn, type UserOpMempool, type SendTransactionParams$1 as UserOpSendTransactionParams, type UserOpState, UserOpStatus, type UserOpStatusProps, type UserOperation, type UserOperationByHash, type UserOperationReceipt, UserOperationTimeoutError, type UserProfile, UserRejectedError, type WaitForReceiptOptions, type WalletMode, type WalletReadyStatus, type WatchToken, combineI18NResources, createAccountAbstractionError, deployAccount, destroyIframeManager, generateFingerprint, getAllSmartAccounts, getAvailableLanguages, getExplorerUrl, getIframeManager, getLanguageIcon, getShareRecoveryStats, getSmartAccountForChain, getUserOperationByHash, getUserOperationReceipt, getUserProfile, looksLikeNickname, prepareUserOperation, requireActiveChainId, sendUserOperation, signTypedData, updateUserProfile, useAccountSession, useActiveChainId, useAddress, useAssets, useBalance, useBlockscoutAssets, useColorMode, useConnectedApps, useDirectWallet, useErc3643Compliance, useError, useHasServerVault, useHydrated, useIFrameReady, useIsMobileView, useKeyshareRecoveryStats, useLinkedProfiles, useLoadingStatus, useLogout, useNativeWalletSignature, useNicknameResolve, useOpenPage, useProviderConfig, useRecoveryUserId, useSendDirectTransaction, useSendTransaction, useSession, useSmartAccountTransactions, useTokenBalance, useTokenInfo, useTransactions, useTransferToLinkedWallet, useUserOpStatus, useWalletMode, verifyFingerprint, verifyFingerprintDetailed, wagmiConfig, waitForStoreHydration, waitForUserOperationReceipt };

package/dist/index.js

@@ -5262,23 +5262,46 @@ var init_OtpIcon = __esm({
 // src/internal/components/AuthMenu/VerifyStep/VerificationCodeInput.tsx
 import { useEffect as useEffect9, useRef as useRef7, useState as useState3 } from "react";
 import { Fragment as Fragment6, jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
-var VerificationCodeInput;
+var getRemainingSeconds, VerificationCodeInput;
 var init_VerificationCodeInput = __esm({
   "src/internal/components/AuthMenu/VerifyStep/VerificationCodeInput.tsx"() {
     init_i18n();
     init_utils2();
     init_button();
     init_useAuthStore();
+    getRemainingSeconds = (expiresAt) => Math.max(0, Math.ceil((expiresAt - Date.now()) / 1e3));
     VerificationCodeInput = (props) => {
       const { onVerifyCode, onResendCode, isLoading, expiresIn } = props;
       const { t } = useT();
       const setAlert = useAuthStore((st) => st.setAlert);
-      const [timeLeft, setTimeLeft] = useState3(expiresIn);
+      const [expiresAt, setExpiresAt] = useState3(() => Date.now() + Math.max(0, expiresIn) * 1e3);
+      const [timeLeft, setTimeLeft] = useState3(() => getRemainingSeconds(expiresAt));
       useEffect9(() => {
-        if (timeLeft <= 0) return;
-        const t2 = setTimeout(() => setTimeLeft((s) => s - 1), 1e3);
-        return () => clearTimeout(t2);
-      }, [timeLeft]);
+        const nextExpiresAt = Date.now() + Math.max(0, expiresIn) * 1e3;
+        setExpiresAt(nextExpiresAt);
+        setTimeLeft(getRemainingSeconds(nextExpiresAt));
+      }, [expiresIn]);
+      useEffect9(() => {
+        let intervalId;
+        const syncTimeLeft = () => {
+          const remaining = getRemainingSeconds(expiresAt);
+          setTimeLeft(remaining);
+          if (remaining <= 0 && intervalId) {
+            window.clearInterval(intervalId);
+            intervalId = void 0;
+          }
+        };
+        syncTimeLeft();
+        if (getRemainingSeconds(expiresAt) <= 0) return;
+        intervalId = window.setInterval(syncTimeLeft, 1e3);
+        window.addEventListener("focus", syncTimeLeft);
+        document.addEventListener("visibilitychange", syncTimeLeft);
+        return () => {
+          if (intervalId) window.clearInterval(intervalId);
+          window.removeEventListener("focus", syncTimeLeft);
+          document.removeEventListener("visibilitychange", syncTimeLeft);
+        };
+      }, [expiresAt]);
       const lastSubmittedRef = useRef7(null);
       const inputsRef = useRef7([]);
       const [digits, setDigits] = useState3(["", "", "", "", "", ""]);
@@ -5463,14 +5486,17 @@ function VerifyStep(props) {
     },
     onError: (error) => {
       let errorMessage = "";
-      if (error.message?.includes("Invalid") || error.message?.includes("invalid")) {
+      const rawErrorMessage = error.message || "";
+      const normalizedErrorMessage = rawErrorMessage.toLowerCase();
+      if (normalizedErrorMessage.includes("invalid")) {
         errorMessage = "Invalid verification code. Please try again.";
-      } else if (error.message?.includes("expired")) {
+      } else if (normalizedErrorMessage.includes("expired")) {
         errorMessage = "Verification code expired. Please request a new one.";
-      } else if (error.message?.includes("429") || error.message?.includes("Too many")) {
+        setExpiresIn(0);
+      } else if (normalizedErrorMessage.includes("429") || normalizedErrorMessage.includes("too many")) {
         errorMessage = "Too many attempts. Please try again later.";
       } else {
-        errorMessage = error.message || "Verification failed. Please try again.";
+        errorMessage = rawErrorMessage || "Verification failed. Please try again.";
       }
       setAlert({
         title: "Verification failed",
@@ -13660,7 +13686,17 @@ function useVerifyCode() {
   const qc = useQueryClient14();
   const address = useSession((st) => st.address);
   const setIsLoading = useSession((st) => st.setIsLoading);
-  const { email, emailCode, setEmail, setEmailStep, setEmailCode, setProviderType, setLinkIsLoading, setAlert } = useManageWalletStore();
+  const {
+    email,
+    emailCode,
+    setEmail,
+    setEmailStep,
+    setEmailCode,
+    setEmailCodeExpiresIn,
+    setProviderType,
+    setLinkIsLoading,
+    setAlert
+  } = useManageWalletStore();
   return useMutation14({
     mutationFn: async (codeToVerify) => {
       const code = codeToVerify ?? emailCode;
@@ -13689,7 +13725,11 @@ function useVerifyCode() {
       setLinkIsLoading(false);
     },
     onError: (error) => {
-      setAlert({ title: "Error", message: error?.message || "Failed to verify and link email" });
+      const message = error?.message || "Failed to verify and link email";
+      if (message.toLowerCase().includes("expired")) {
+        setEmailCodeExpiresIn(0);
+      }
+      setAlert({ title: "Error", message });
       setIsLoading(false);
       setLinkIsLoading(false);
     }
@@ -15745,8 +15785,55 @@ var init_constants6 = __esm({
   }
 });
 
-// src/internal/components/SecurityMenu/ConnectedApps.tsx
+// src/internal/components/SecurityMenu/hooks.ts
 import { useQuery as useQuery18 } from "@tanstack/react-query";
+function useConnectedApps() {
+  const session = useSession((st) => st.session);
+  const userId = session?.mpcUserId || null;
+  return useQuery18({
+    retry: false,
+    enabled: !!userId,
+    queryKey: [CONNECTED_TRUSTED_APPS_QUERY, userId],
+    queryFn: async () => {
+      const iframeManager = getIframeManager();
+      return await iframeManager.getTrustedApps(userId).catch(() => {
+        console.error("[ConnectedApps] Failed to load connected apps from iframe");
+        return [];
+      });
+    }
+  });
+}
+function useKeyshareRecoveryStats() {
+  const session = useSession((st) => st.session);
+  const userId = session?.mpcUserId || null;
+  return useQuery18({
+    enabled: !!userId,
+    queryKey: [KEYSHARE_RECOVERY_STATS_QUERY, userId],
+    queryFn: async () => {
+      const iframeManager = getIframeManager();
+      if (!iframeManager) {
+        throw new Error("Iframe manager not available");
+      }
+      const keyshareInfo = await getKeyshareInfo(userId);
+      const shareRecoveryStats = await getShareRecoveryStats();
+      return {
+        keyshareInfo,
+        shareRecoveryStats
+      };
+    }
+  });
+}
+var init_hooks2 = __esm({
+  "src/internal/components/SecurityMenu/hooks.ts"() {
+    init_SessionContext();
+    init_keyshare();
+    init_iframe_manager();
+    init_vaultClient();
+    init_constants6();
+  }
+});
+
+// src/internal/components/SecurityMenu/ConnectedApps.tsx
 import dayjs5 from "dayjs";
 import { omit } from "lodash-es";
 import { AppWindowMac, Info as Info5, ShieldBanIcon, ShieldCheckIcon } from "lucide-react";
@@ -15813,20 +15900,7 @@ function Application(props) {
 function ConnectedApps(props) {
   const { isLoading: isParentLoading, untrustApp } = props;
   const { t } = useT();
-  const session = useSession((st) => st.session);
-  const userId = session?.mpcUserId || null;
-  const { data: connectedApps = [], isLoading: isConnectedAppsLoading } = useQuery18({
-    retry: false,
-    enabled: !!userId,
-    queryKey: [CONNECTED_TRUSTED_APPS_QUERY, userId],
-    queryFn: async () => {
-      const iframeManager = getIframeManager();
-      return await iframeManager.getTrustedApps(userId).catch(() => {
-        console.error("[ConnectedApps] Failed to load connected apps from iframe");
-        return [];
-      });
-    }
-  });
+  const { data: connectedApps = [], isLoading: isConnectedAppsLoading } = useConnectedApps();
   const isLoading = isConnectedAppsLoading || isParentLoading;
   if (isLoading) return null;
   if (!isLoading && connectedApps.length === 0)
@@ -15848,12 +15922,10 @@ function ConnectedApps(props) {
 var init_ConnectedApps = __esm({
   "src/internal/components/SecurityMenu/ConnectedApps.tsx"() {
     init_utils2();
-    init_SessionContext();
     init_i18n();
-    init_iframe_manager();
     init_button();
     init_highlight();
-    init_constants6();
+    init_hooks2();
   }
 });
 
@@ -16122,7 +16194,7 @@ var init_UntrustApplication = __esm({
 });
 
 // src/internal/components/SecurityMenu/SecurityMenu.tsx
-import { useMutation as useMutation17, useQuery as useQuery19, useQueryClient as useQueryClient22 } from "@tanstack/react-query";
+import { useMutation as useMutation17, useQueryClient as useQueryClient22 } from "@tanstack/react-query";
 import { ArrowLeft as ArrowLeft17 } from "lucide-react";
 import { useState as useState23 } from "react";
 import { jsx as jsx88, jsxs as jsxs81 } from "react/jsx-runtime";
@@ -16134,22 +16206,7 @@ function SecurityMenu() {
   const userId = jwtTokenManager2.getUserId();
   const serverHasKeyshare = jwtTokenManager2.getHasKeyshare() ?? false;
   const [appToUntrust, untrustApp] = useState23(null);
-  const { data: recoveryData, isLoading: isRecoveryLoading } = useQuery19({
-    enabled: !!userId,
-    queryKey: [KEYSHARE_RECOVERY_STATS_QUERY, userId],
-    queryFn: async () => {
-      const iframeManager = getIframeManager();
-      if (!iframeManager) {
-        throw new Error("Iframe manager not available");
-      }
-      const keyshareInfo = await getKeyshareInfo(userId);
-      const shareRecoveryStats = await getShareRecoveryStats();
-      return {
-        keyshareInfo,
-        shareRecoveryStats
-      };
-    }
-  });
+  const { data: recoveryData, isLoading: isRecoveryLoading } = useKeyshareRecoveryStats();
   const localInfo = recoveryData?.keyshareInfo || {};
   const hasServerBackup = !!recoveryData?.shareRecoveryStats?.created || recoveryData?.shareRecoveryStats?.devices?.length > 0;
   const { mutate: handleUntrustApp, isPending: isUntrustingApp } = useMutation17({
@@ -16228,15 +16285,14 @@ var init_SecurityMenu = __esm({
   "src/internal/components/SecurityMenu/SecurityMenu.tsx"() {
     init_i18n();
     init_auth();
-    init_keyshare();
     init_useLayoutDataStore();
     init_useLayoutStore();
     init_iframe_manager();
-    init_vaultClient();
     init_Expandable2();
     init_button();
     init_ConnectedApps();
     init_constants6();
+    init_hooks2();
     init_Keyshare2();
     init_UntrustApplication();
   }
@@ -19142,7 +19198,7 @@ var init_package = __esm({
   "package.json"() {
     package_default = {
       name: "@embarkai/ui-kit",
-      version: "0.4.10",
+      version: "0.4.12",
       description: "React UI components and hooks for EmbarkAI authentication and Account Abstraction",
       type: "module",
       main: "./dist/index.cjs",
@@ -25010,7 +25066,6 @@ var USER_PROFILE_QUERY_KEY;
 var init_exportedQueryKeys = __esm({
   "src/internal/exportedQueryKeys.ts"() {
     init_profile();
-    init_constants6();
     USER_PROFILE_QUERY_KEY = QUERY_KEYS.userProfile;
   }
 });
@@ -25061,6 +25116,7 @@ var init_index = __esm({
     init_clients2();
     init_auth();
     init_profile();
+    init_hooks2();
     init_linkedProfiles();
     init_nickname_fingerprint();
     init_errors();
@@ -25081,11 +25137,9 @@ init_index();
 export {
   AccountAbstractionError,
   Address,
-  CONNECTED_TRUSTED_APPS_QUERY as CONNECTED_TRUSTED_APPS_QUERY_KEY,
   ConnectWalletButton,
   ErrorCodes,
   Hash,
-  KEYSHARE_RECOVERY_STATS_QUERY as KEYSHARE_RECOVERY_STATS_QUERY_KEY,
   KeyshareBackupMenu as KeyshareBackup,
   LOCAL_STORAGE_I18N_KEY,
   LangToggle,
@@ -25129,6 +25183,7 @@ export {
   useBalance,
   useBlockscoutAssets,
   useColorMode,
+  useConnectedApps,
   useDirectWallet,
   useErc3643Compliance,
   useError,
@@ -25136,6 +25191,7 @@ export {
   useHydrated,
   useIFrameReady,
   useIsMobileView,
+  useKeyshareRecoveryStats,
   useLinkedProfiles,
   useLoadingStatus,
   useLogout,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@embarkai/ui-kit",
-  "version": "0.4.10",
+  "version": "0.4.12",
   "description": "React UI components and hooks for EmbarkAI authentication and Account Abstraction",
   "type": "module",
   "main": "./dist/index.cjs",