@embarkai/ui-kit 0.4.11 → 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.11</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.11";
+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);
     }
@@ -19240,7 +19280,7 @@ var init_package = __esm({
   "package.json"() {
     package_default = {
       name: "@embarkai/ui-kit",
-      version: "0.4.11",
+      version: "0.4.12",
       description: "React UI components and hooks for EmbarkAI authentication and Account Abstraction",
       type: "module",
       main: "./dist/index.cjs",

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);
     }
@@ -19158,7 +19198,7 @@ var init_package = __esm({
   "package.json"() {
     package_default = {
       name: "@embarkai/ui-kit",
-      version: "0.4.11",
+      version: "0.4.12",
       description: "React UI components and hooks for EmbarkAI authentication and Account Abstraction",
       type: "module",
       main: "./dist/index.cjs",

package/package.json

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