@embarkai/ui-kit 0.4.11 → 0.4.13

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.13</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.13";
 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);
     }
@@ -15822,11 +15862,20 @@ function useConnectedApps() {
     enabled: !!userId,
     queryKey: [CONNECTED_TRUSTED_APPS_QUERY, userId],
     queryFn: async () => {
+      const response = await tssClient.get("/api/auth/connected-apps", true);
+      if (!response.success || !response.data) {
+        const error = response.error || "Failed to fetch connected apps";
+        throw new Error(error);
+      }
       const iframeManager = getIframeManager();
-      return await iframeManager.getTrustedApps(userId).catch(() => {
-        console.error("[ConnectedApps] Failed to load connected apps from iframe");
+      const trustedApps = await iframeManager.getTrustedApps(userId).catch(() => {
+        console.error("[ConnectedApps] Failed to load trusted apps from iframe");
         return [];
       });
+      return response.data.apps.map((app) => ({
+        ...app,
+        trustedMeta: trustedApps.find((ta) => ta.projectId === app.projectId) || null
+      }));
     }
   });
 }
@@ -15856,6 +15905,7 @@ var init_hooks2 = __esm({
     init_SessionContext();
     import_react_query42 = require("@tanstack/react-query");
     init_keyshare();
+    init_httpClient();
     init_iframe_manager();
     init_vaultClient();
     init_constants6();
@@ -15864,9 +15914,16 @@ var init_hooks2 = __esm({
 
 // src/internal/components/SecurityMenu/ConnectedApps.tsx
 function Application(props) {
-  const { appLogo, appName, origin, trustedAt, untrustApp } = props;
+  const {
+    logo,
+    name,
+    // domains,
+    firstConnectedAt,
+    trustedMeta,
+    untrustApp
+  } = props;
   const { t } = useT();
-  const isAppTrusted = trustedAt && (0, import_dayjs5.default)(trustedAt).isValid() && (0, import_dayjs5.default)(trustedAt).isBefore((0, import_dayjs5.default)());
+  const resolvedLogo = logo || trustedMeta?.appLogo || null;
   return /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(
     "div",
     {
@@ -15885,8 +15942,8 @@ function Application(props) {
               "rounded-[var(--ui-kit-el-bdrs)] bg-[var(--ui-kit-bg)]"
             ),
             children: [
-              appLogo ? /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className: "w-full h-full p-1", children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("img", { src: appLogo, alt: appName, className: "w-full h-full object-contain" }) }) : /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(import_lucide_react52.AppWindowMac, { className: "w-6 h-6 text-[var(--ui-kit-fg)]" }),
-              isAppTrusted && /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
+              resolvedLogo ? /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className: "w-full h-full p-1", children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("img", { src: resolvedLogo, alt: name, className: "w-full h-full object-contain" }) }) : /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(import_lucide_react52.AppWindowMac, { className: "w-6 h-6 text-[var(--ui-kit-fg)]" }),
+              !!trustedMeta && /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
                 "div",
                 {
                   className: cn(
@@ -15900,21 +15957,26 @@ function Application(props) {
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("div", { className: "flex-1 min-w-0", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className: "font-semibold truncate", children: appName || new URL(origin).hostname }),
-          /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className: "text-[var(--ui-kit-fg-muted)] truncate", children: new URL(origin).hostname }),
-          isAppTrusted ? /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className: "text-[var(--ui-kit-fg)] truncate", children: t("passport:securityMenu.connectedApps.trustedAt", {
-            time: (0, import_dayjs5.default)(trustedAt).format("MMM D, YYYY HH:mm")
+          /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className: "font-semibold truncate", children: name }),
+          trustedMeta?.origin && /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className: "text-[var(--ui-kit-fg-muted)] truncate", children: new URL(trustedMeta.origin).hostname }),
+          !!trustedMeta ? /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className: "text-[var(--ui-kit-fg)] truncate", children: t("passport:securityMenu.connectedApps.trustedAt", {
+            time: (0, import_dayjs5.default)(trustedMeta.trustedAt).format("MMM D, YYYY HH:mm")
           }) }) : /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("div", { className: "text-[var(--ui-kit-fg-muted)] truncate", children: t("passport:securityMenu.connectedApps.connectedAt", {
-            time: (0, import_dayjs5.default)(trustedAt).format("MMM D, YYYY HH:mm")
+            time: (0, import_dayjs5.default)(firstConnectedAt).format("MMM D, YYYY HH:mm")
           }) })
         ] }),
-        isAppTrusted && /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
+        !!trustedMeta && /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
           Button,
           {
             variant: "outline",
             size: "icon",
             className: "text-[var(--ui-kit-bg-error)] flex-none rounded-[var(--ui-kit-el-bdrs)]",
-            onClick: () => untrustApp({ ...(0, import_lodash_es7.omit)(props, "untrustApp"), hostname: new URL(origin).hostname }),
+            onClick: () => {
+              untrustApp({
+                ...(0, import_lodash_es7.omit)(props, "untrustApp"),
+                hostname: new URL(trustedMeta.origin).hostname
+              });
+            },
             children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(import_lucide_react52.ShieldBanIcon, { className: "h-4 w-4" })
           }
         )
@@ -15934,13 +15996,7 @@ function ConnectedApps(props) {
       /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("span", { children: t("passport:securityMenu.connectedApps.noConnectedApps") })
     ] });
   return /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(import_jsx_runtime82.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("span", { className: "font-medium text-xs text-[var(--ui-kit-fg)]", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("span", { children: t("passport:securityMenu.connectedApps.connectedApps") }),
-      connectedApps.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)("span", { children: [
-        " ",
-        connectedApps.length
-      ] })
-    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("span", { className: "font-medium text-xs text-[var(--ui-kit-fg)]", children: /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("span", { children: t("passport:securityMenu.connectedApps.connectedApps") }) }),
     /* @__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)) })
   ] });
 }
@@ -19240,7 +19296,7 @@ var init_package = __esm({
   "package.json"() {
     package_default = {
       name: "@embarkai/ui-kit",
-      version: "0.4.11",
+      version: "0.4.13",
       description: "React UI components and hooks for EmbarkAI authentication and Account Abstraction",
       type: "module",
       main: "./dist/index.cjs",

package/dist/index.d.cts

@@ -1802,13 +1802,16 @@ declare function getUserProfile(): Promise<UserProfile>;
  */
 declare function updateUserProfile(updates: UpdateProfileRequest): Promise<UserProfile>;
 
-declare function useConnectedApps(): _tanstack_react_query.UseQueryResult<any[] | {
-    userId: string;
+declare function useConnectedApps(): _tanstack_react_query.UseQueryResult<{
+    trustedMeta: any;
     projectId: string;
-    origin: string;
-    trustedAt: number;
-    appName?: string;
-    appLogo?: string;
+    name: string;
+    logo: string;
+    domains: unknown;
+    providers: unknown;
+    smartWalletAddress: string;
+    firstConnectedAt: string;
+    lastActiveAt: string;
 }[], Error>;
 declare function useKeyshareRecoveryStats(): _tanstack_react_query.UseQueryResult<{
     keyshareInfo: {

package/dist/index.d.ts

@@ -1802,13 +1802,16 @@ declare function getUserProfile(): Promise<UserProfile>;
  */
 declare function updateUserProfile(updates: UpdateProfileRequest): Promise<UserProfile>;
 
-declare function useConnectedApps(): _tanstack_react_query.UseQueryResult<any[] | {
-    userId: string;
+declare function useConnectedApps(): _tanstack_react_query.UseQueryResult<{
+    trustedMeta: any;
     projectId: string;
-    origin: string;
-    trustedAt: number;
-    appName?: string;
-    appLogo?: string;
+    name: string;
+    logo: string;
+    domains: unknown;
+    providers: unknown;
+    smartWalletAddress: string;
+    firstConnectedAt: string;
+    lastActiveAt: string;
 }[], Error>;
 declare function useKeyshareRecoveryStats(): _tanstack_react_query.UseQueryResult<{
     keyshareInfo: {

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);
     }
@@ -15755,11 +15795,20 @@ function useConnectedApps() {
     enabled: !!userId,
     queryKey: [CONNECTED_TRUSTED_APPS_QUERY, userId],
     queryFn: async () => {
+      const response = await tssClient.get("/api/auth/connected-apps", true);
+      if (!response.success || !response.data) {
+        const error = response.error || "Failed to fetch connected apps";
+        throw new Error(error);
+      }
       const iframeManager = getIframeManager();
-      return await iframeManager.getTrustedApps(userId).catch(() => {
-        console.error("[ConnectedApps] Failed to load connected apps from iframe");
+      const trustedApps = await iframeManager.getTrustedApps(userId).catch(() => {
+        console.error("[ConnectedApps] Failed to load trusted apps from iframe");
         return [];
       });
+      return response.data.apps.map((app) => ({
+        ...app,
+        trustedMeta: trustedApps.find((ta) => ta.projectId === app.projectId) || null
+      }));
     }
   });
 }
@@ -15787,6 +15836,7 @@ var init_hooks2 = __esm({
   "src/internal/components/SecurityMenu/hooks.ts"() {
     init_SessionContext();
     init_keyshare();
+    init_httpClient();
     init_iframe_manager();
     init_vaultClient();
     init_constants6();
@@ -15799,9 +15849,16 @@ import { omit } from "lodash-es";
 import { AppWindowMac, Info as Info5, ShieldBanIcon, ShieldCheckIcon } from "lucide-react";
 import { Fragment as Fragment32, jsx as jsx82, jsxs as jsxs75 } from "react/jsx-runtime";
 function Application(props) {
-  const { appLogo, appName, origin, trustedAt, untrustApp } = props;
+  const {
+    logo,
+    name,
+    // domains,
+    firstConnectedAt,
+    trustedMeta,
+    untrustApp
+  } = props;
   const { t } = useT();
-  const isAppTrusted = trustedAt && dayjs5(trustedAt).isValid() && dayjs5(trustedAt).isBefore(dayjs5());
+  const resolvedLogo = logo || trustedMeta?.appLogo || null;
   return /* @__PURE__ */ jsxs75(
     "div",
     {
@@ -15820,8 +15877,8 @@ function Application(props) {
               "rounded-[var(--ui-kit-el-bdrs)] bg-[var(--ui-kit-bg)]"
             ),
             children: [
-              appLogo ? /* @__PURE__ */ jsx82("div", { className: "w-full h-full p-1", children: /* @__PURE__ */ jsx82("img", { src: appLogo, alt: appName, className: "w-full h-full object-contain" }) }) : /* @__PURE__ */ jsx82(AppWindowMac, { className: "w-6 h-6 text-[var(--ui-kit-fg)]" }),
-              isAppTrusted && /* @__PURE__ */ jsx82(
+              resolvedLogo ? /* @__PURE__ */ jsx82("div", { className: "w-full h-full p-1", children: /* @__PURE__ */ jsx82("img", { src: resolvedLogo, alt: name, className: "w-full h-full object-contain" }) }) : /* @__PURE__ */ jsx82(AppWindowMac, { className: "w-6 h-6 text-[var(--ui-kit-fg)]" }),
+              !!trustedMeta && /* @__PURE__ */ jsx82(
                 "div",
                 {
                   className: cn(
@@ -15835,21 +15892,26 @@ function Application(props) {
           }
         ),
         /* @__PURE__ */ jsxs75("div", { className: "flex-1 min-w-0", children: [
-          /* @__PURE__ */ jsx82("div", { className: "font-semibold truncate", children: appName || new URL(origin).hostname }),
-          /* @__PURE__ */ jsx82("div", { className: "text-[var(--ui-kit-fg-muted)] truncate", children: new URL(origin).hostname }),
-          isAppTrusted ? /* @__PURE__ */ jsx82("div", { className: "text-[var(--ui-kit-fg)] truncate", children: t("passport:securityMenu.connectedApps.trustedAt", {
-            time: dayjs5(trustedAt).format("MMM D, YYYY HH:mm")
+          /* @__PURE__ */ jsx82("div", { className: "font-semibold truncate", children: name }),
+          trustedMeta?.origin && /* @__PURE__ */ jsx82("div", { className: "text-[var(--ui-kit-fg-muted)] truncate", children: new URL(trustedMeta.origin).hostname }),
+          !!trustedMeta ? /* @__PURE__ */ jsx82("div", { className: "text-[var(--ui-kit-fg)] truncate", children: t("passport:securityMenu.connectedApps.trustedAt", {
+            time: dayjs5(trustedMeta.trustedAt).format("MMM D, YYYY HH:mm")
           }) }) : /* @__PURE__ */ jsx82("div", { className: "text-[var(--ui-kit-fg-muted)] truncate", children: t("passport:securityMenu.connectedApps.connectedAt", {
-            time: dayjs5(trustedAt).format("MMM D, YYYY HH:mm")
+            time: dayjs5(firstConnectedAt).format("MMM D, YYYY HH:mm")
           }) })
         ] }),
-        isAppTrusted && /* @__PURE__ */ jsx82(
+        !!trustedMeta && /* @__PURE__ */ jsx82(
           Button,
           {
             variant: "outline",
             size: "icon",
             className: "text-[var(--ui-kit-bg-error)] flex-none rounded-[var(--ui-kit-el-bdrs)]",
-            onClick: () => untrustApp({ ...omit(props, "untrustApp"), hostname: new URL(origin).hostname }),
+            onClick: () => {
+              untrustApp({
+                ...omit(props, "untrustApp"),
+                hostname: new URL(trustedMeta.origin).hostname
+              });
+            },
             children: /* @__PURE__ */ jsx82(ShieldBanIcon, { className: "h-4 w-4" })
           }
         )
@@ -15869,13 +15931,7 @@ function ConnectedApps(props) {
       /* @__PURE__ */ jsx82("span", { children: t("passport:securityMenu.connectedApps.noConnectedApps") })
     ] });
   return /* @__PURE__ */ jsxs75(Fragment32, { children: [
-    /* @__PURE__ */ jsxs75("span", { className: "font-medium text-xs text-[var(--ui-kit-fg)]", children: [
-      /* @__PURE__ */ jsx82("span", { children: t("passport:securityMenu.connectedApps.connectedApps") }),
-      connectedApps.length > 0 && /* @__PURE__ */ jsxs75("span", { children: [
-        " ",
-        connectedApps.length
-      ] })
-    ] }),
+    /* @__PURE__ */ jsx82("span", { className: "font-medium text-xs text-[var(--ui-kit-fg)]", children: /* @__PURE__ */ jsx82("span", { children: t("passport:securityMenu.connectedApps.connectedApps") }) }),
     /* @__PURE__ */ jsx82("div", { className: "w-full flex flex-col gap-[var(--ui-kit-gap)]", children: connectedApps.map((app, index) => /* @__PURE__ */ jsx82(Application, { ...app, untrustApp }, index)) })
   ] });
 }
@@ -19158,7 +19214,7 @@ var init_package = __esm({
   "package.json"() {
     package_default = {
       name: "@embarkai/ui-kit",
-      version: "0.4.11",
+      version: "0.4.13",
       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.13",
   "description": "React UI components and hooks for EmbarkAI authentication and Account Abstraction",
   "type": "module",
   "main": "./dist/index.cjs",