@retinalabsllc/zairusjs 5.1.50 → 5.1.56

package/dist/index.js

@@ -179,7 +179,7 @@ var ThreeDButton = ({
     {
       href,
       onClick,
-      className: `relative inline-flex items-center justify-center py-2.5 px-8 rounded-full text-neutral-900 text-xs font-semibold transition-all duration-150 select-none group overflow-hidden ${className}`,
+      className: `relative inline-flex items-center justify-center py-2.5 px-8 rounded-full text-neutral-900 text-xs font-medium transition-all duration-150 select-none group overflow-hidden ${className}`,
       style: {
         backgroundImage: silverBg,
         backgroundSize: "cover",
@@ -236,7 +236,7 @@ var ThreeDActionButton = ({
       "aria-label": ariaLabel,
       className: `
         relative inline-flex items-center justify-center py-2.5 px-8 rounded-full 
-        text-neutral-900 text-xs font-semibold tracking-widest 
+        text-neutral-900 text-xs font-medium tracking-widest 
         transition-all duration-150 select-none group outline-none overflow-hidden
         ${isInteractionDisabled ? "opacity-70 cursor-not-allowed" : "active:translate-y-0.5"}
         ${className}
@@ -991,7 +991,7 @@ var HeroSection = ({
     import_link4.default,
     {
       href: secondaryCtaHref,
-      className: "w-full sm:w-60 inline-flex font-semibold items-center justify-center text-[11px] tracking-widest rounded-full px-8 py-3  bg-black/40 backdrop-blur-md text-center text-white text-xs hover:bg-neutral-800 hover:border-neutral-500 outline-none transition-all drop-shadow-lg"
+      className: "w-full sm:w-60 inline-flex font-medium items-center justify-center text-[11px] tracking-widest rounded-full px-8 py-3  bg-black/40 backdrop-blur-md text-center text-white text-xs  hover:border-neutral-500 outline-none transition-all drop-shadow-lg"
     },
     secondaryCtaText
   )), showApps && appLogos && appLogos.length > 0 && /* @__PURE__ */ import_react10.default.createElement("div", { className: "w-full flex flex-col items-center mt-4" }, appsText && /* @__PURE__ */ import_react10.default.createElement("p", { className: "text-[9px] tracking-[0.2em] text-neutral-300 mb-5 " }, appsText), /* @__PURE__ */ import_react10.default.createElement("div", { className: "flex flex-wrap justify-center items-center gap-6 opacity-90" }, appLogos.map((logo, idx) => /* @__PURE__ */ import_react10.default.createElement("div", { key: idx, className: "relative h-6 w-6 sm:h-8 sm:w-8 flex items-center justify-center cursor-default filter invert" }, /* @__PURE__ */ import_react10.default.createElement(
@@ -1377,7 +1377,7 @@ var ManagedPricingBlock = ({
       {
         key: idx,
         onClick: () => setActiveTabIndex(idx),
-        className: `px-4 sm:px-6 py-1.5 sm:py-2 rounded-full text-[11px] sm:text-xs transition-all duration-200 outline-none whitespace-nowrap shrink-0 ${isActive ? "bg-neutral-800 text-white" : "text-neutral-500 hover:text-white hover:bg-neutral-800/50"}`
+        className: `px-4 sm:px-6 py-1.5 sm:py-2 rounded-full text-[11px] sm:text-xs transition-all duration-200 outline-none whitespace-nowrap shrink-0 ${isActive ? "bg-neutral-800 text-white" : "text-neutral-500 hover:text-white /50"}`
       },
       tab.label
     );
@@ -1408,7 +1408,7 @@ var ManagedPricingBlock = ({
       import_link5.default,
       {
         href: plan.ctaHref,
-        className: "w-full py-2.5 px-5 rounded-full font-semibold border border-neutral-700 text-center text-white text-xs hover:bg-neutral-800 hover:border-neutral-600 transition-colors mb-6 outline-none block"
+        className: "w-full py-2.5 px-5 rounded-full font-medium border border-neutral-700 text-center text-white text-xs  hover:border-neutral-600 transition-colors mb-6 outline-none block"
       },
       plan.ctaText
     ),
@@ -1501,7 +1501,7 @@ var ManagedNotFoundBlock = ({
     import_link6.default,
     {
       href: backLinkHref,
-      className: "inline-flex items-center justify-center px-8 py-2.5  border border-neutral-800 text-white hover:bg-neutral-800 transition-colors rounded-full text-[11px] tracking-widest outline-none"
+      className: "inline-flex items-center justify-center px-8 py-2.5  border border-neutral-800 text-white  transition-colors rounded-full text-[11px] tracking-widest outline-none"
     },
     backLinkText
   )));
@@ -1757,7 +1757,7 @@ var PortfolioHero = ({
       import_link7.default,
       {
         href: secondaryCtaHref,
-        className: "w-full sm:w-auto inline-flex items-center justify-center gap-3 text-[11px] tracking-[0.2em] rounded-full px-8 py-2.5  border border-neutral-700 transition-colors text-white hover:bg-neutral-700 outline-none"
+        className: "w-full sm:w-auto inline-flex items-center justify-center gap-3 text-[11px] tracking-[0.2em] rounded-full px-8 py-2.5  border border-neutral-700 transition-colors text-white  outline-none"
       },
       secondaryCtaText,
       /* @__PURE__ */ import_react29.default.createElement(import_react30.HugeiconsIcon, { icon: import_core_free_icons5.ArrowRight01Icon, size: 16 })
@@ -1881,7 +1881,7 @@ var UniversalSidebar = ({
     "div",
     {
       onClick: handleCopyWallet,
-      className: "flex items-center gap-2 bg-neutral-900  rounded-full p-1 pr-3 cursor-pointer hover:bg-neutral-800 transition-colors",
+      className: "flex items-center gap-2 bg-neutral-900  rounded-full p-1 pr-3 cursor-pointer  transition-colors",
       title: "Copy Address"
     },
     web3Avatar ? /* @__PURE__ */ import_react33.default.createElement("img", { src: web3Avatar, alt: "Avatar", className: "w-6 h-6 rounded-full bg-neutral-800 object-cover shrink-0" }) : /* @__PURE__ */ import_react33.default.createElement("div", { className: "w-6 h-6 rounded-full bg-neutral-800 flex items-center justify-center text-[9px] text-white shrink-0" }, userInitials.substring(0, 2)),
@@ -1893,7 +1893,7 @@ var UniversalSidebar = ({
         setShowNotifDialog(true);
         setSelectedNotif(null);
       },
-      className: "relative w-8 h-8 shrink-0 bg-neutral-900  rounded-full flex items-center justify-center text-neutral-400 hover:text-white hover:bg-neutral-800 transition-all duration-300 outline-none"
+      className: "relative w-8 h-8 shrink-0 bg-neutral-900  rounded-full flex items-center justify-center text-neutral-400 hover:text-white  transition-all duration-300 outline-none"
     },
     /* @__PURE__ */ import_react33.default.createElement(import_react34.HugeiconsIcon, { icon: import_core_free_icons7.Notification01Icon, size: 14 }),
     unreadNotificationsCount > 0 && /* @__PURE__ */ import_react33.default.createElement("span", { className: "absolute top-2 right-2.5 w-2 h-2 bg-blue-500 rounded-full border border-neutral-900" })
@@ -1901,7 +1901,7 @@ var UniversalSidebar = ({
     import_link8.default,
     {
       href: backUrl,
-      className: "w-10 h-10 shrink-0 bg-neutral-900  rounded-full flex items-center justify-center text-neutral-400 hover:text-white hover:bg-neutral-800 transition-all duration-300 outline-none",
+      className: "w-10 h-10 shrink-0 bg-neutral-900  rounded-full flex items-center justify-center text-neutral-400 hover:text-white  transition-all duration-300 outline-none",
       "aria-label": "Go Back"
     },
     /* @__PURE__ */ import_react33.default.createElement(import_react34.HugeiconsIcon, { icon: import_core_free_icons7.ArrowLeft01Icon, size: 18 })
@@ -1948,7 +1948,7 @@ var UniversalSidebar = ({
           key: item.name,
           href: item.path,
           onClick: (e) => onNavClick ? onNavClick(e, item.path) : void 0,
-          className: `flex items-center gap-3 px-3 py-2 rounded-full transition-all outline-none group shrink-0 ${isCurrentRoute ? "bg-neutral-800 text-white" : "text-neutral-400 hover:text-white hover:bg-neutral-800/50"}`,
+          className: `flex items-center gap-3 px-3 py-2 rounded-full transition-all outline-none group shrink-0 ${isCurrentRoute ? "bg-neutral-800 text-white" : "text-neutral-400 hover:text-white /50"}`,
           title: isCollapsed && !isMobileOpen ? item.name : void 0
         },
         /* @__PURE__ */ import_react33.default.createElement(
@@ -1966,7 +1966,7 @@ var UniversalSidebar = ({
       "button",
       {
         onClick: () => setShowLogoutDialog(true),
-        className: "w-8 h-8 shrink-0 rounded-full bg-neutral-800 flex items-center justify-center text-neutral-400 hover:text-white hover:bg-neutral-700 transition-all outline-none",
+        className: "w-8 h-8 shrink-0 rounded-full bg-neutral-800 flex items-center justify-center text-neutral-400 hover:text-white  transition-all outline-none",
         title: "Secure Logout"
       },
       /* @__PURE__ */ import_react33.default.createElement(import_react34.HugeiconsIcon, { icon: import_core_free_icons7.LogoutCircle02Icon, size: 16 })
@@ -1974,7 +1974,7 @@ var UniversalSidebar = ({
       "button",
       {
         onClick: () => setIsCollapsed(!isCollapsed),
-        className: "flex items-center justify-center md:justify-start gap-3 w-full p-2.5 rounded-full text-neutral-400 hover:text-white hover:bg-neutral-800 transition-colors outline-none"
+        className: "flex items-center justify-center md:justify-start gap-3 w-full p-2.5 rounded-full text-neutral-400 hover:text-white  transition-colors outline-none"
       },
       /* @__PURE__ */ import_react33.default.createElement(import_react34.HugeiconsIcon, { icon: import_core_free_icons7.SidebarLeft01Icon, size: 18, className: "shrink-0 text-neutral-500" }),
       !isCollapsed && /* @__PURE__ */ import_react33.default.createElement("span", { className: "text-xs " }, "Collapse")
@@ -1987,7 +1987,7 @@ var UniversalSidebar = ({
         setSelectedNotif(notif);
         onNotificationClick?.(notif);
       },
-      className: "p-3 flex items-start gap-3 hover:bg-neutral-800 cursor-pointer transition-colors"
+      className: "p-3 flex items-start gap-3  cursor-pointer transition-colors"
     },
     /* @__PURE__ */ import_react33.default.createElement("div", { className: "mt-1.5 shrink-0" }, !notif.isRead ? /* @__PURE__ */ import_react33.default.createElement("div", { className: "w-1.5 h-1.5 bg-blue-500 rounded-full" }) : /* @__PURE__ */ import_react33.default.createElement("div", { className: "w-1.5 h-1.5 bg-transparent" })),
     /* @__PURE__ */ import_react33.default.createElement("div", { className: "flex-1 min-w-0 text-left" }, /* @__PURE__ */ import_react33.default.createElement("h5", { className: `text-[12px] truncate ${notif.isRead ? "text-neutral-400" : "text-white"}` }, notif.title), /* @__PURE__ */ import_react33.default.createElement("p", { className: "text-[11px] text-neutral-500 truncate mt-0.5" }, notif.message), /* @__PURE__ */ import_react33.default.createElement("span", { className: "text-[9px] text-neutral-600 tracking-widest mt-2 block" }, formatNotifDate(notif.createdAt)))
@@ -1996,7 +1996,7 @@ var UniversalSidebar = ({
     {
       disabled: notificationPage <= 1,
       onClick: () => onNotificationPageChange?.(notificationPage - 1),
-      className: "w-7 h-7 flex items-center justify-center rounded-full  border border-neutral-700 text-neutral-400 disabled:opacity-30 outline-none hover:bg-neutral-700 hover:text-white transition-colors"
+      className: "w-7 h-7 flex items-center justify-center rounded-full  border border-neutral-700 text-neutral-400 disabled:opacity-30 outline-none  hover:text-white transition-colors"
     },
     /* @__PURE__ */ import_react33.default.createElement(import_react34.HugeiconsIcon, { icon: import_core_free_icons7.ArrowLeft01Icon, size: 12 })
   ), /* @__PURE__ */ import_react33.default.createElement(
@@ -2004,7 +2004,7 @@ var UniversalSidebar = ({
     {
       disabled: notificationPage >= notificationTotalPages || notificationTotalPages === 0,
       onClick: () => onNotificationPageChange?.(notificationPage + 1),
-      className: "w-7 h-7 flex items-center justify-center rounded-full  border border-neutral-700 text-neutral-400 disabled:opacity-30 outline-none hover:bg-neutral-700 hover:text-white transition-colors"
+      className: "w-7 h-7 flex items-center justify-center rounded-full  border border-neutral-700 text-neutral-400 disabled:opacity-30 outline-none  hover:text-white transition-colors"
     },
     /* @__PURE__ */ import_react33.default.createElement(import_react34.HugeiconsIcon, { icon: import_core_free_icons7.ArrowRight01Icon, size: 12 })
   ))))), showLogoutDialog && showLogoutAction && /* @__PURE__ */ import_react33.default.createElement("div", { className: "fixed inset-0 z-110 flex items-center justify-center p-4 pointer-events-auto" }, /* @__PURE__ */ import_react33.default.createElement(
@@ -2018,7 +2018,7 @@ var UniversalSidebar = ({
     {
       onClick: () => setShowLogoutDialog(false),
       disabled: isLoggingOut,
-      className: "flex-1 py-3 text-[13px] text-neutral-400 hover:bg-neutral-800 hover:text-white transition-colors disabled:opacity-50 outline-none"
+      className: "flex-1 py-3 text-[13px] text-neutral-400  hover:text-white transition-colors disabled:opacity-50 outline-none"
     },
     "Cancel"
   ), /* @__PURE__ */ import_react33.default.createElement(
@@ -2026,7 +2026,7 @@ var UniversalSidebar = ({
     {
       onClick: handleLogoutInitiation,
       disabled: isLoggingOut,
-      className: "flex-1 py-3 text-[13px] text-red-400 hover:bg-neutral-800 hover:text-red-300 transition-colors disabled:opacity-50 flex justify-center items-center outline-none"
+      className: "flex-1 py-3 text-[13px] text-red-400  hover:text-red-300 transition-colors disabled:opacity-50 flex justify-center items-center outline-none"
     },
     isLoggingOut ? /* @__PURE__ */ import_react33.default.createElement(ButtonSpinner, null) : "Log Out"
   )))), showInterceptDialog && /* @__PURE__ */ import_react33.default.createElement("div", { className: "fixed inset-0 z-110 flex items-center justify-center p-4 pointer-events-auto" }, /* @__PURE__ */ import_react33.default.createElement(
@@ -2039,14 +2039,14 @@ var UniversalSidebar = ({
     "button",
     {
       onClick: onCancelIntercept,
-      className: "flex-1 py-3 text-[13px] text-neutral-400 hover:bg-neutral-800 hover:text-white transition-colors outline-none"
+      className: "flex-1 py-3 text-[13px] text-neutral-400  hover:text-white transition-colors outline-none"
     },
     "Cancel"
   ), /* @__PURE__ */ import_react33.default.createElement(
     "button",
     {
       onClick: onConfirmIntercept,
-      className: "flex-1 py-3 text-[13px] text-white hover:bg-neutral-800 transition-colors flex justify-center items-center outline-none"
+      className: "flex-1 py-3 text-[13px] text-white  transition-colors flex justify-center items-center outline-none"
     },
     "Leave"
   )))));
@@ -2397,7 +2397,7 @@ var UniversalErrorView = ({
       "button",
       {
         onClick: () => window.location.href = returnUrl,
-        className: "px-6 py-2 bg-neutral-800 hover:bg-neutral-700 text-white border border-neutral-700 rounded-full text-[11px] tracking-widest transition-colors w-full sm:w-auto outline-none"
+        className: "px-6 py-2   text-white border border-neutral-700 rounded-full text-[11px] tracking-widest transition-colors w-full sm:w-auto outline-none"
       },
       returnLabel
     ) : (
@@ -2406,14 +2406,14 @@ var UniversalErrorView = ({
         "button",
         {
           onClick: () => window.location.href = returnUrl,
-          className: "px-6 py-2 bg-transparent border border-neutral-700 hover:bg-neutral-800 text-neutral-400 hover:text-white rounded-full text-[11px] tracking-widest transition-colors w-full sm:w-auto outline-none"
+          className: "px-6 py-2 bg-transparent border border-neutral-700  text-neutral-400 hover:text-white rounded-full text-[11px] tracking-widest transition-colors w-full sm:w-auto outline-none"
         },
         "Back Home"
       ), /* @__PURE__ */ import_react41.default.createElement(
         "button",
         {
           onClick: onRetry,
-          className: "px-6 py-2 bg-white hover:bg-neutral-200 text-black rounded-full text-[11px] tracking-widest transition-colors w-full sm:w-auto outline-none capitalize"
+          className: "px-6 py-2 bg-white  text-black rounded-full text-[11px] tracking-widest transition-colors w-full sm:w-auto outline-none capitalize"
         },
         "Refresh ",
         envName
@@ -2439,6 +2439,10 @@ var formatDate = (dateInput) => {
 var formatTime = (dateInput) => {
   return new Date(dateInput).toLocaleTimeString("en-US", { hour: "2-digit", minute: "2-digit" });
 };
+var truncateAddress = (address) => {
+  if (!address || address.length < 12) return address;
+  return `${address.substring(0, 6)}...${address.substring(address.length - 4)}`;
+};
 var UniversalTransactionPage = ({
   headerTitle,
   headerDescription,
@@ -2523,7 +2527,7 @@ var UniversalTransactionPage = ({
     "button",
     {
       onClick: () => setIsDirectionModalOpen(true),
-      className: "flex items-center gap-2 whitespace-nowrap  border border-neutral-800 px-5 py-2 rounded-full text-[12px] text-neutral-400 hover:text-white hover:bg-neutral-800 transition-colors outline-none"
+      className: "flex items-center gap-2 whitespace-nowrap  border border-neutral-800 px-5 py-2 rounded-full text-[12px] text-neutral-400 hover:text-white  transition-colors outline-none"
     },
     /* @__PURE__ */ import_react43.default.createElement(import_react44.HugeiconsIcon, { icon: import_core_free_icons12.SearchList02Icon, size: 12 }),
     activeDirectionFilter === "ALL" ? "Payment Type" : activeDirectionFilter
@@ -2531,7 +2535,7 @@ var UniversalTransactionPage = ({
     "button",
     {
       onClick: () => setIsTypeModalOpen(true),
-      className: "flex items-center gap-2 whitespace-nowrap  border border-neutral-800 px-5 py-2 rounded-full text-[12px] text-neutral-400 hover:text-white hover:bg-neutral-800 transition-colors outline-none"
+      className: "flex items-center gap-2 whitespace-nowrap  border border-neutral-800 px-5 py-2 rounded-full text-[12px] text-neutral-400 hover:text-white  transition-colors outline-none"
     },
     /* @__PURE__ */ import_react43.default.createElement(import_react44.HugeiconsIcon, { icon: import_core_free_icons12.ListSettingIcon, size: 14 }),
     activeTypeFilter === "ALL" ? "All Transactions" : activeTypeFilter.replace("_", " ")
@@ -2540,7 +2544,7 @@ var UniversalTransactionPage = ({
     {
       key: tx.id,
       onClick: () => setSelectedTransaction(tx),
-      className: "flex items-center justify-between py-4 hover:bg-neutral-800/50 transition-colors cursor-pointer group min-w-0 px-2 -mx-2 rounded-xl"
+      className: "flex items-center justify-between py-4 /50 transition-colors cursor-pointer group min-w-0 px-2 -mx-2 rounded-xl"
     },
     /* @__PURE__ */ import_react43.default.createElement("div", { className: "flex items-center gap-4 min-w-0 flex-1" }, /* @__PURE__ */ import_react43.default.createElement("div", { className: `w-10 h-10 shrink-0 rounded-full flex items-center justify-center bg-neutral-700 text-white` }, /* @__PURE__ */ import_react43.default.createElement(import_react44.HugeiconsIcon, { icon: tx.direction === "CREDIT" ? import_core_free_icons12.ArrowDownRight01Icon : import_core_free_icons12.ArrowUpRight01Icon, size: 18 })), /* @__PURE__ */ import_react43.default.createElement("div", { className: "min-w-0 flex-1 flex flex-col gap-1" }, /* @__PURE__ */ import_react43.default.createElement("p", { className: "text-[13px] text-white truncate" }, getDisplayName(tx)), /* @__PURE__ */ import_react43.default.createElement("p", { className: `text-[13px] text-neutral-400 truncate transition-all duration-300 ${hideBalanceAmounts ? "blur-sm opacity-40 select-none" : ""}` }, tx.direction === "CREDIT" ? "+" : "-", tx.amount, " ", tx.currency))),
     /* @__PURE__ */ import_react43.default.createElement("div", { className: "shrink-0 flex flex-col items-end gap-1 text-right" }, /* @__PURE__ */ import_react43.default.createElement("span", { className: "text-[11px] text-neutral-500" }, formatDate(tx.createdAt)), /* @__PURE__ */ import_react43.default.createElement("span", { className: "text-[11px] text-neutral-500 capitalize" }, tx.direction.toLowerCase()))
@@ -2560,16 +2564,8 @@ var UniversalTransactionPage = ({
       className: "p-2 border border-neutral-800 rounded-full text-neutral-500 hover:text-white hover:border-neutral-600 disabled:opacity-30 disabled:cursor-not-allowed transition-all outline-none"
     },
     /* @__PURE__ */ import_react43.default.createElement(import_react44.HugeiconsIcon, { icon: import_core_free_icons12.ArrowRight01Icon, size: 14 })
-  )))))), selectedTransaction && /* @__PURE__ */ import_react43.default.createElement("div", { className: "fixed inset-0 z-120 flex items-center justify-center p-4 pointer-events-auto" }, /* @__PURE__ */ import_react43.default.createElement("div", { className: "absolute inset-0 bg-black/60", onClick: () => setSelectedTransaction(null) }), /* @__PURE__ */ import_react43.default.createElement("div", { className: "relative w-full max-w-sm bg-neutral-900 rounded-2xl flex flex-col overflow-hidden shadow-2xl animate-in zoom-in-95 duration-200 max-h-[90vh]" }, /* @__PURE__ */ import_react43.default.createElement("div", { className: "flex items-center justify-between p-5 shrink-0" }, /* @__PURE__ */ import_react43.default.createElement("h3", { className: "text-[15px] text-white tracking-tight" }, "Details"), /* @__PURE__ */ import_react43.default.createElement("button", { onClick: () => setSelectedTransaction(null), className: "text-neutral-500 hover:text-white transition-colors outline-none" }, /* @__PURE__ */ import_react43.default.createElement(import_react44.HugeiconsIcon, { icon: import_core_free_icons12.CancelCircleIcon, size: 18 }))), /* @__PURE__ */ import_react43.default.createElement("div", { className: "flex-1 overflow-y-auto custom-scrollbar p-6" }, /* @__PURE__ */ import_react43.default.createElement("div", { className: "flex flex-col items-center justify-center mb-4" }, /* @__PURE__ */ import_react43.default.createElement("div", { className: `w-12 h-12 rounded-full flex items-center justify-center mb-4 bg-neutral-700 text-white` }, /* @__PURE__ */ import_react43.default.createElement(import_react44.HugeiconsIcon, { icon: selectedTransaction.direction === "CREDIT" ? import_core_free_icons12.ArrowDownRight01Icon : import_core_free_icons12.ArrowUpRight01Icon, size: 20 })), /* @__PURE__ */ import_react43.default.createElement("h2", { className: `text-2xl text-white mb-2 transition-all duration-300 ${hideBalanceAmounts ? "blur-[6px] opacity-40 select-none" : ""}` }, selectedTransaction.direction === "CREDIT" ? "+" : "-", selectedTransaction.amount, " ", selectedTransaction.currency), /* @__PURE__ */ import_react43.default.createElement("span", { className: "text-[9px] tracking-widest text-neutral-400 px-4 py-1.5 rounded-full border border-neutral-800" }, selectedTransaction.status), selectedTransaction.type === "WALLET_TRANSACTION" && /* @__PURE__ */ import_react43.default.createElement(
-    "a",
-    {
-      href: `https://basescan.org/tx/${selectedTransaction.reference}`,
-      target: "_blank",
-      rel: "noopener noreferrer",
-      className: "text-[11px] text-white mt-4 transition-colors tracking-wide hover:text-neutral-300"
-    },
-    "View in block explorer"
-  )), /* @__PURE__ */ import_react43.default.createElement("div", { className: "grid grid-cols-1 gap-y-8 gap-x-4 mb-10 mt-6" }, /* @__PURE__ */ import_react43.default.createElement("div", null, /* @__PURE__ */ import_react43.default.createElement("span", { className: "text-[11px] tracking-[0.2em] text-neutral-500 block mb-2" }, "Reference ID"), /* @__PURE__ */ import_react43.default.createElement("span", { className: "text-[13px] text-white break-all" }, selectedTransaction.reference)), /* @__PURE__ */ import_react43.default.createElement("div", null, /* @__PURE__ */ import_react43.default.createElement("span", { className: "text-[11px] tracking-[0.2em] text-neutral-500 block mb-2" }, "Date & Time"), /* @__PURE__ */ import_react43.default.createElement("span", { className: "text-[13px] text-white" }, formatDate(selectedTransaction.createdAt), " at ", formatTime(selectedTransaction.createdAt))), /* @__PURE__ */ import_react43.default.createElement("div", null, /* @__PURE__ */ import_react43.default.createElement("span", { className: "text-[11px] tracking-[0.2em] text-neutral-500 block mb-2" }, "Transaction Type"), /* @__PURE__ */ import_react43.default.createElement("span", { className: "text-[13px] text-white capitalize" }, selectedTransaction.type.replace("_", " ").toLowerCase())), /* @__PURE__ */ import_react43.default.createElement("div", null, /* @__PURE__ */ import_react43.default.createElement("span", { className: "text-[11px] tracking-[0.2em] text-neutral-500 block mb-2" }, "Flow Direction"), /* @__PURE__ */ import_react43.default.createElement("span", { className: "text-[13px] text-white capitalize" }, selectedTransaction.direction.toLowerCase())), selectedTransaction.metadata && Object.entries(selectedTransaction.metadata).map(([key, value]) => {
+  )))))), selectedTransaction && /* @__PURE__ */ import_react43.default.createElement("div", { className: "fixed inset-0 z-120 flex items-center justify-center p-4 pointer-events-auto" }, /* @__PURE__ */ import_react43.default.createElement("div", { className: "absolute inset-0 bg-black/60", onClick: () => setSelectedTransaction(null) }), /* @__PURE__ */ import_react43.default.createElement("div", { className: "relative w-full max-w-sm bg-neutral-900 rounded-2xl flex flex-col overflow-hidden shadow-2xl animate-in zoom-in-95 duration-200 max-h-[90vh]" }, /* @__PURE__ */ import_react43.default.createElement("div", { className: "flex items-center justify-between p-5 shrink-0" }, /* @__PURE__ */ import_react43.default.createElement("h3", { className: "text-[15px] text-white tracking-tight" }, "Details"), /* @__PURE__ */ import_react43.default.createElement("button", { onClick: () => setSelectedTransaction(null), className: "text-neutral-500 hover:text-white transition-colors outline-none" }, /* @__PURE__ */ import_react43.default.createElement(import_react44.HugeiconsIcon, { icon: import_core_free_icons12.CancelCircleIcon, size: 18 }))), /* @__PURE__ */ import_react43.default.createElement("div", { className: "flex-1 overflow-y-auto custom-scrollbar p-6" }, /* @__PURE__ */ import_react43.default.createElement("div", { className: "flex flex-col items-center justify-center mb-4" }, /* @__PURE__ */ import_react43.default.createElement("div", { className: `w-12 h-12 rounded-full flex items-center justify-center mb-4 bg-neutral-700 text-white` }, /* @__PURE__ */ import_react43.default.createElement(import_react44.HugeiconsIcon, { icon: selectedTransaction.direction === "CREDIT" ? import_core_free_icons12.ArrowDownRight01Icon : import_core_free_icons12.ArrowUpRight01Icon, size: 20 })), /* @__PURE__ */ import_react43.default.createElement("h2", { className: `text-2xl text-white mb-2 transition-all duration-300 ${hideBalanceAmounts ? "blur-[6px] opacity-40 select-none" : ""}` }, selectedTransaction.direction === "CREDIT" ? "+" : "-", selectedTransaction.amount, " ", selectedTransaction.currency), /* @__PURE__ */ import_react43.default.createElement("span", { className: "text-[9px] tracking-widest text-neutral-400 px-4 py-1.5 rounded-full border border-neutral-800" }, selectedTransaction.status)), /* @__PURE__ */ import_react43.default.createElement("div", { className: "grid grid-cols-1 gap-y-8 gap-x-4 mb-10 mt-6" }, /* @__PURE__ */ import_react43.default.createElement("div", null, /* @__PURE__ */ import_react43.default.createElement("span", { className: "text-[11px] tracking-[0.2em] text-neutral-500 block mb-2" }, "Reference ID"), /* @__PURE__ */ import_react43.default.createElement("span", { className: "text-[13px] text-white break-all" }, selectedTransaction.reference)), /* @__PURE__ */ import_react43.default.createElement("div", null, /* @__PURE__ */ import_react43.default.createElement("span", { className: "text-[11px] tracking-[0.2em] text-neutral-500 block mb-2" }, "Date & Time"), /* @__PURE__ */ import_react43.default.createElement("span", { className: "text-[13px] text-white" }, formatDate(selectedTransaction.createdAt), " at ", formatTime(selectedTransaction.createdAt))), /* @__PURE__ */ import_react43.default.createElement("div", null, /* @__PURE__ */ import_react43.default.createElement("span", { className: "text-[11px] tracking-[0.2em] text-neutral-500 block mb-2" }, "Transaction Type"), /* @__PURE__ */ import_react43.default.createElement("span", { className: "text-[13px] text-white capitalize" }, selectedTransaction.type.replace("_", " ").toLowerCase())), /* @__PURE__ */ import_react43.default.createElement("div", null, /* @__PURE__ */ import_react43.default.createElement("span", { className: "text-[11px] tracking-[0.2em] text-neutral-500 block mb-2" }, "Flow Direction"), /* @__PURE__ */ import_react43.default.createElement("span", { className: "text-[13px] text-white capitalize" }, selectedTransaction.direction.toLowerCase())), selectedTransaction.metadata?.fromAddress && selectedTransaction.metadata?.toAddress && /* @__PURE__ */ import_react43.default.createElement("div", null, /* @__PURE__ */ import_react43.default.createElement("span", { className: "text-[11px] tracking-[0.2em] text-neutral-500 block mb-2" }, "Transfer Route"), /* @__PURE__ */ import_react43.default.createElement("div", { className: "flex items-center gap-2 text-[13px] text-white" }, /* @__PURE__ */ import_react43.default.createElement("span", { className: "truncate" }, truncateAddress(String(selectedTransaction.metadata.fromAddress))), /* @__PURE__ */ import_react43.default.createElement("span", { className: "text-neutral-500" }, "\u2192"), /* @__PURE__ */ import_react43.default.createElement("span", { className: "truncate" }, truncateAddress(String(selectedTransaction.metadata.toAddress))))), selectedTransaction.metadata && Object.entries(selectedTransaction.metadata).map(([key, value]) => {
+    if (key === "fromAddress" || key === "toAddress") return null;
     if (value === null || value === void 0 || typeof value === "object") return null;
     const formattedKey = key.replace(/([A-Z])/g, " $1").replace(/^./, (str) => str.toUpperCase());
     return /* @__PURE__ */ import_react43.default.createElement("div", { key }, /* @__PURE__ */ import_react43.default.createElement("span", { className: "text-[11px] tracking-[0.2em] text-neutral-500 block mb-2" }, formattedKey), /* @__PURE__ */ import_react43.default.createElement("span", { className: "text-[13px] text-white break-all" }, String(value)));
@@ -2585,9 +2581,18 @@ var UniversalTransactionPage = ({
     "button",
     {
       onClick: () => onReportTransaction && onReportTransaction(selectedTransaction),
-      className: "w-full flex items-center font-semibold justify-center py-2.5 rounded-full border border-neutral-700 text-white hover:bg-neutral-800 transition-colors outline-none text-[13px] tracking-wide mt-2"
+      className: "w-full flex items-center font-medium justify-center py-2.5 rounded-full border border-neutral-700 text-white  transition-colors outline-none text-[13px] tracking-wide mt-2"
     },
     "Report Transaction"
+  ), selectedTransaction.type === "WALLET_TRANSACTION" && /* @__PURE__ */ import_react43.default.createElement(
+    "a",
+    {
+      href: `https://basescan.org/tx/${selectedTransaction.reference}`,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      className: "w-full flex items-center font-medium justify-center py-2.5 rounded-full border border-neutral-700 text-white  transition-colors outline-none text-[13px] tracking-wide mt-2"
+    },
+    "View in block explorer"
   ))))), isDirectionModalOpen && /* @__PURE__ */ import_react43.default.createElement("div", { className: "fixed inset-0 z-110 flex items-center justify-center p-4" }, /* @__PURE__ */ import_react43.default.createElement("div", { className: "absolute inset-0 bg-black/60", onClick: () => setIsDirectionModalOpen(false) }), /* @__PURE__ */ import_react43.default.createElement("div", { ref: directionDropdownRef, className: "relative w-72 bg-neutral-900 shadow-2xl rounded-2xl flex flex-col items-center overflow-hidden animate-in zoom-in-95 duration-200" }, /* @__PURE__ */ import_react43.default.createElement("div", { className: "p-6 text-center w-full" }, /* @__PURE__ */ import_react43.default.createElement("h3", { className: "text-[14px] text-white tracking-tight" }, "Payment Type")), /* @__PURE__ */ import_react43.default.createElement("div", { className: "w-full flex flex-col pl-2 pr-2" }, ["ALL", "CREDIT", "DEBIT"].map((option) => /* @__PURE__ */ import_react43.default.createElement(
     "button",
     {
@@ -2596,14 +2601,14 @@ var UniversalTransactionPage = ({
         onDirectionFilterChange(option);
         setIsDirectionModalOpen(false);
       },
-      className: `text-left px-4 py-3 text-[11px] tracking-wide transition-colors rounded-full flex items-center justify-between outline-none ${activeDirectionFilter === option ? "bg-neutral-800 text-white" : "text-neutral-400 hover:bg-neutral-800 hover:text-white"}`
+      className: `text-left px-4 py-3 text-[11px] tracking-wide transition-colors rounded-full flex items-center justify-between outline-none ${activeDirectionFilter === option ? "bg-neutral-800 text-white" : "text-neutral-400  hover:text-white"}`
     },
     /* @__PURE__ */ import_react43.default.createElement("span", { className: "truncate pr-2" }, option.charAt(0).toUpperCase() + option.slice(1).toLowerCase())
   ))), /* @__PURE__ */ import_react43.default.createElement("div", { className: "w-full flex" }, /* @__PURE__ */ import_react43.default.createElement(
     "button",
     {
       onClick: () => setIsDirectionModalOpen(false),
-      className: "w-full py-3 text-[13px] text-neutral-500 hover:bg-neutral-800 hover:text-white transition-colors outline-none"
+      className: "w-full py-3 text-[13px] text-neutral-500  hover:text-white transition-colors outline-none"
     },
     "Cancel"
   )))), isTypeModalOpen && /* @__PURE__ */ import_react43.default.createElement("div", { className: "fixed inset-0 z-110 flex items-center justify-center p-4" }, /* @__PURE__ */ import_react43.default.createElement("div", { className: "absolute inset-0 bg-black/60", onClick: () => setIsTypeModalOpen(false) }), /* @__PURE__ */ import_react43.default.createElement("div", { ref: typeDropdownRef, className: "relative w-72 bg-neutral-900 shadow-2xl rounded-2xl flex flex-col items-center overflow-hidden animate-in zoom-in-95 duration-200" }, /* @__PURE__ */ import_react43.default.createElement("div", { className: "p-6 text-center w-full" }, /* @__PURE__ */ import_react43.default.createElement("h3", { className: "text-[14px] text-white tracking-tight" }, "Transactions Type")), /* @__PURE__ */ import_react43.default.createElement("div", { className: "w-full flex flex-col pl-2 pr-2" }, [
@@ -2618,14 +2623,14 @@ var UniversalTransactionPage = ({
         onTypeFilterChange(option.value);
         setIsTypeModalOpen(false);
       },
-      className: `text-left px-4 py-3 text-[11px] tracking-wide transition-colors rounded-full flex items-center justify-between outline-none ${activeTypeFilter === option.value ? "bg-neutral-800 text-white" : "text-neutral-400 hover:bg-neutral-800 hover:text-white"}`
+      className: `text-left px-4 py-3 text-[11px] tracking-wide transition-colors rounded-full flex items-center justify-between outline-none ${activeTypeFilter === option.value ? "bg-neutral-800 text-white" : "text-neutral-400  hover:text-white"}`
     },
     /* @__PURE__ */ import_react43.default.createElement("span", { className: "truncate pr-2" }, option.label.charAt(0).toUpperCase() + option.label.slice(1).toLowerCase())
   ))), /* @__PURE__ */ import_react43.default.createElement("div", { className: "w-full flex" }, /* @__PURE__ */ import_react43.default.createElement(
     "button",
     {
       onClick: () => setIsTypeModalOpen(false),
-      className: "w-full py-3 text-[13px] text-neutral-500 hover:bg-neutral-800 hover:text-white transition-colors outline-none"
+      className: "w-full py-3 text-[13px] text-neutral-500  hover:text-white transition-colors outline-none"
     },
     "Cancel"
   )))));
@@ -2716,12 +2721,12 @@ var UniversalHomeView = ({
       }
     },
     /* @__PURE__ */ import_react45.default.createElement("span", { className: "absolute inset-0 bg-linear-to-r from-white/30 to-transparent pointer-events-none" }),
-    /* @__PURE__ */ import_react45.default.createElement("span", { className: "relative z-10 flex items-center gap-1.5 leading-none text-[13px] tracking-wide font-semibold drop-shadow-[0_1px_1px_rgba(255,255,255,0.8)]" }, primaryAction.label, primaryAction.icon && /* @__PURE__ */ import_react45.default.createElement(import_react46.HugeiconsIcon, { icon: primaryAction.icon, size: 16 }))
+    /* @__PURE__ */ import_react45.default.createElement("span", { className: "relative z-10 flex items-center gap-1.5 leading-none text-[13px] tracking-wide font-medium drop-shadow-[0_1px_1px_rgba(255,255,255,0.8)]" }, primaryAction.label, primaryAction.icon && /* @__PURE__ */ import_react45.default.createElement(import_react46.HugeiconsIcon, { icon: primaryAction.icon, size: 16 }))
   ), secondaryAction && /* @__PURE__ */ import_react45.default.createElement(
     "button",
     {
       onClick: secondaryAction.onClick,
-      className: "flex items-center gap-1.5 px-8 py-2 rounded-full  border border-neutral-800 text-white transition-colors hover:bg-neutral-800 outline-none"
+      className: "flex items-center gap-1.5 px-8 py-2 rounded-full  border border-neutral-800 text-white transition-colors  outline-none"
     },
     /* @__PURE__ */ import_react45.default.createElement("span", { className: "text-[13px] tracking-wide" }, secondaryAction.label),
     secondaryAction.icon && /* @__PURE__ */ import_react45.default.createElement(import_react46.HugeiconsIcon, { icon: secondaryAction.icon, size: 16 })
@@ -2730,9 +2735,9 @@ var UniversalHomeView = ({
     {
       key: action.id,
       onClick: action.onClick,
-      className: `w-full h-23.75 sm:h-28.75 rounded-2xl bg-neutral-900  hover:bg-neutral-800 p-2.5 sm:p-3 flex flex-col justify-between items-start cursor-pointer active:scale-[0.98] transition-all outline-none`
+      className: `w-full h-23.75 sm:h-28.75 rounded-2xl border border-neutral-800  p-2.5 sm:p-3 flex flex-col justify-between items-start cursor-pointer active:scale-[0.98] transition-all outline-none`
     },
-    /* @__PURE__ */ import_react45.default.createElement("div", { className: `w-7 h-7 sm:w-9 sm:h-9 rounded-full flex items-center justify-center bg-neutral-700 text-white}` }, /* @__PURE__ */ import_react45.default.createElement("div", { className: "scale-75 sm:scale-100 text-white flex items-center justify-center" }, /* @__PURE__ */ import_react45.default.createElement(import_react46.HugeiconsIcon, { icon: action.icon, size: 18 }))),
+    /* @__PURE__ */ import_react45.default.createElement("div", { className: `w-7 h-7 sm:w-9 sm:h-9 rounded-full flex items-center justify-center border border-neutral-800 text-white}` }, /* @__PURE__ */ import_react45.default.createElement("div", { className: "scale-75 sm:scale-100 text-white flex items-center justify-center" }, /* @__PURE__ */ import_react45.default.createElement(import_react46.HugeiconsIcon, { icon: action.icon, size: 18 }))),
     /* @__PURE__ */ import_react45.default.createElement("span", { className: "text-[10px] sm:text-[12px] text-neutral-300 text-left leading-[1.2] whitespace-pre-line mt-1" }, action.label)
   )))), /* @__PURE__ */ import_react45.default.createElement("div", { className: "w-full" }, /* @__PURE__ */ import_react45.default.createElement(
     UniversalTransactionPage,
@@ -2804,7 +2809,7 @@ var UniversalWalletPage = ({
     {
       key: wallet.id,
       onClick: () => setSelectedWallet(wallet),
-      className: "flex items-center justify-between py-4 hover:bg-neutral-800/50 transition-colors cursor-pointer group min-w-0 px-2 -mx-2 rounded-xl"
+      className: "flex items-center justify-between py-4 /50 transition-colors cursor-pointer group min-w-0 px-2 -mx-2 rounded-xl"
     },
     /* @__PURE__ */ import_react47.default.createElement("div", { className: "flex items-center gap-4 min-w-0 flex-1" }, /* @__PURE__ */ import_react47.default.createElement(WalletLogo, { src: wallet.logoSrc, alt: wallet.name }), /* @__PURE__ */ import_react47.default.createElement("div", { className: "min-w-0 flex-1 flex flex-col gap-1" }, /* @__PURE__ */ import_react47.default.createElement("p", { className: "text-[13px] text-white truncate font-medium" }, wallet.name), /* @__PURE__ */ import_react47.default.createElement("p", { className: `text-[13px] text-neutral-400 truncate transition-all duration-300 ${hideBalanceAmounts ? "blur-sm opacity-40 select-none" : ""}` }, wallet.balance, " ", wallet.currency))),
     /* @__PURE__ */ import_react47.default.createElement("div", { className: "shrink-0 flex flex-col items-end gap-1 text-right" }, /* @__PURE__ */ import_react47.default.createElement("span", { className: "text-[10px] tracking-wide text-neutral-400 bg-neutral-800  px-2.5 py-1 rounded-full " }, wallet.network))
@@ -2826,7 +2831,7 @@ var UniversalWalletPage = ({
     "button",
     {
       onClick: () => handleCopy(selectedWallet),
-      className: "w-full flex font-semibold  items-center justify-center py-2.5 rounded-full border border-neutral-700 text-white hover:bg-neutral-800 outline-none text-[13px] tracking-wide"
+      className: "w-full flex font-medium  items-center justify-center py-2.5 rounded-full border border-neutral-700 text-white  outline-none text-[13px] tracking-wide"
     },
     "Copy Wallet Address"
   ))))));
@@ -3049,7 +3054,7 @@ var ManagedProjectsBlock = ({
     }
   ), /* @__PURE__ */ import_react57.default.createElement("div", { className: "relative z-10" }, /* @__PURE__ */ import_react57.default.createElement(GridSection, null, tagline && /* @__PURE__ */ import_react57.default.createElement("span", { className: "text-[11px] tracking-[0.4em] text-neutral-500 text-left block" }, tagline), /* @__PURE__ */ import_react57.default.createElement("h1", { className: "text-3xl mt-4 text-white tracking-tight text-left" }, title)), projects.map((project, index) => {
     const isLast = index === projects.length - 1;
-    const projectContent = /* @__PURE__ */ import_react57.default.createElement("div", { className: "group block w-full" }, /* @__PURE__ */ import_react57.default.createElement("div", { className: "flex flex-col md:flex-row md:items-center justify-between gap-3 md:gap-4 mb-4 md:mb-5" }, /* @__PURE__ */ import_react57.default.createElement("div", { className: "flex items-center gap-3 md:gap-4" }, /* @__PURE__ */ import_react57.default.createElement("h2", { className: "text-[16px] text-white transition-all flex items-center gap-2" }, project.title, /* @__PURE__ */ import_react57.default.createElement("span", { className: "text-[11px] text-neutral-500 opacity-0 -translate-x-2 group-hover:opacity-100 group-hover:translate-x-0 group-hover:text-white transition-all duration-300" }, project.isExternal ? "\u2197" : "\u2192")), /* @__PURE__ */ import_react57.default.createElement("span", { className: `text-[9px] px-2.5 py-1 rounded-full tracking-[0.15em] transition-colors ${project.status.toLowerCase() === "production" ? "bg-white text-black" : "bg-neutral-800 text-neutral-400 group-hover:bg-neutral-700 group-hover:text-white"}` }, project.status)), /* @__PURE__ */ import_react57.default.createElement("span", { className: "text-[11px] tracking-[0.2em] text-neutral-500 shrink-0" }, project.date)), /* @__PURE__ */ import_react57.default.createElement("p", { className: "text-[13px] leading-[1.8] text-neutral-400 max-w-4xl text-left transition-colors group-hover:text-neutral-300" }, project.description));
+    const projectContent = /* @__PURE__ */ import_react57.default.createElement("div", { className: "group block w-full" }, /* @__PURE__ */ import_react57.default.createElement("div", { className: "flex flex-col md:flex-row md:items-center justify-between gap-3 md:gap-4 mb-4 md:mb-5" }, /* @__PURE__ */ import_react57.default.createElement("div", { className: "flex items-center gap-3 md:gap-4" }, /* @__PURE__ */ import_react57.default.createElement("h2", { className: "text-[16px] text-white transition-all flex items-center gap-2" }, project.title, /* @__PURE__ */ import_react57.default.createElement("span", { className: "text-[11px] text-neutral-500 opacity-0 -translate-x-2 group-hover:opacity-100 group-hover:translate-x-0 group-hover:text-white transition-all duration-300" }, project.isExternal ? "\u2197" : "\u2192")), /* @__PURE__ */ import_react57.default.createElement("span", { className: `text-[9px] px-2.5 py-1 rounded-full tracking-[0.15em] transition-colors ${project.status.toLowerCase() === "production" ? "bg-white text-black" : "bg-neutral-800 text-neutral-400 group- group-hover:text-white"}` }, project.status)), /* @__PURE__ */ import_react57.default.createElement("span", { className: "text-[11px] tracking-[0.2em] text-neutral-500 shrink-0" }, project.date)), /* @__PURE__ */ import_react57.default.createElement("p", { className: "text-[13px] leading-[1.8] text-neutral-400 max-w-4xl text-left transition-colors group-hover:text-neutral-300" }, project.description));
     return /* @__PURE__ */ import_react57.default.createElement(GridSection, { key: project.id || index, isLast, className: isLast ? "py-8 md:py-10 pb-12 md:pb-14" : "py-8 md:py-10" }, project.isExternal ? /* @__PURE__ */ import_react57.default.createElement("a", { href: project.link, target: "_blank", rel: "noopener noreferrer", className: "block outline-none" }, projectContent) : /* @__PURE__ */ import_react57.default.createElement(import_link9.default, { href: project.link, className: "block outline-none" }, projectContent));
   }))));
 };

package/dist/index.mjs

@@ -108,7 +108,7 @@ var ThreeDButton = ({
     {
       href,
       onClick,
-      className: `relative inline-flex items-center justify-center py-2.5 px-8 rounded-full text-neutral-900 text-xs font-semibold transition-all duration-150 select-none group overflow-hidden ${className}`,
+      className: `relative inline-flex items-center justify-center py-2.5 px-8 rounded-full text-neutral-900 text-xs font-medium transition-all duration-150 select-none group overflow-hidden ${className}`,
       style: {
         backgroundImage: silverBg,
         backgroundSize: "cover",
@@ -165,7 +165,7 @@ var ThreeDActionButton = ({
       "aria-label": ariaLabel,
       className: `
         relative inline-flex items-center justify-center py-2.5 px-8 rounded-full 
-        text-neutral-900 text-xs font-semibold tracking-widest 
+        text-neutral-900 text-xs font-medium tracking-widest 
         transition-all duration-150 select-none group outline-none overflow-hidden
         ${isInteractionDisabled ? "opacity-70 cursor-not-allowed" : "active:translate-y-0.5"}
         ${className}
@@ -920,7 +920,7 @@ var HeroSection = ({
     Link4,
     {
       href: secondaryCtaHref,
-      className: "w-full sm:w-60 inline-flex font-semibold items-center justify-center text-[11px] tracking-widest rounded-full px-8 py-3  bg-black/40 backdrop-blur-md text-center text-white text-xs hover:bg-neutral-800 hover:border-neutral-500 outline-none transition-all drop-shadow-lg"
+      className: "w-full sm:w-60 inline-flex font-medium items-center justify-center text-[11px] tracking-widest rounded-full px-8 py-3  bg-black/40 backdrop-blur-md text-center text-white text-xs  hover:border-neutral-500 outline-none transition-all drop-shadow-lg"
     },
     secondaryCtaText
   )), showApps && appLogos && appLogos.length > 0 && /* @__PURE__ */ React8.createElement("div", { className: "w-full flex flex-col items-center mt-4" }, appsText && /* @__PURE__ */ React8.createElement("p", { className: "text-[9px] tracking-[0.2em] text-neutral-300 mb-5 " }, appsText), /* @__PURE__ */ React8.createElement("div", { className: "flex flex-wrap justify-center items-center gap-6 opacity-90" }, appLogos.map((logo, idx) => /* @__PURE__ */ React8.createElement("div", { key: idx, className: "relative h-6 w-6 sm:h-8 sm:w-8 flex items-center justify-center cursor-default filter invert" }, /* @__PURE__ */ React8.createElement(
@@ -1306,7 +1306,7 @@ var ManagedPricingBlock = ({
       {
         key: idx,
         onClick: () => setActiveTabIndex(idx),
-        className: `px-4 sm:px-6 py-1.5 sm:py-2 rounded-full text-[11px] sm:text-xs transition-all duration-200 outline-none whitespace-nowrap shrink-0 ${isActive ? "bg-neutral-800 text-white" : "text-neutral-500 hover:text-white hover:bg-neutral-800/50"}`
+        className: `px-4 sm:px-6 py-1.5 sm:py-2 rounded-full text-[11px] sm:text-xs transition-all duration-200 outline-none whitespace-nowrap shrink-0 ${isActive ? "bg-neutral-800 text-white" : "text-neutral-500 hover:text-white /50"}`
       },
       tab.label
     );
@@ -1337,7 +1337,7 @@ var ManagedPricingBlock = ({
       Link5,
       {
         href: plan.ctaHref,
-        className: "w-full py-2.5 px-5 rounded-full font-semibold border border-neutral-700 text-center text-white text-xs hover:bg-neutral-800 hover:border-neutral-600 transition-colors mb-6 outline-none block"
+        className: "w-full py-2.5 px-5 rounded-full font-medium border border-neutral-700 text-center text-white text-xs  hover:border-neutral-600 transition-colors mb-6 outline-none block"
       },
       plan.ctaText
     ),
@@ -1430,7 +1430,7 @@ var ManagedNotFoundBlock = ({
     Link6,
     {
       href: backLinkHref,
-      className: "inline-flex items-center justify-center px-8 py-2.5  border border-neutral-800 text-white hover:bg-neutral-800 transition-colors rounded-full text-[11px] tracking-widest outline-none"
+      className: "inline-flex items-center justify-center px-8 py-2.5  border border-neutral-800 text-white  transition-colors rounded-full text-[11px] tracking-widest outline-none"
     },
     backLinkText
   )));
@@ -1686,7 +1686,7 @@ var PortfolioHero = ({
       Link7,
       {
         href: secondaryCtaHref,
-        className: "w-full sm:w-auto inline-flex items-center justify-center gap-3 text-[11px] tracking-[0.2em] rounded-full px-8 py-2.5  border border-neutral-700 transition-colors text-white hover:bg-neutral-700 outline-none"
+        className: "w-full sm:w-auto inline-flex items-center justify-center gap-3 text-[11px] tracking-[0.2em] rounded-full px-8 py-2.5  border border-neutral-700 transition-colors text-white  outline-none"
       },
       secondaryCtaText,
       /* @__PURE__ */ React21.createElement(HugeiconsIcon9, { icon: ArrowRight01Icon2, size: 16 })
@@ -1817,7 +1817,7 @@ var UniversalSidebar = ({
     "div",
     {
       onClick: handleCopyWallet,
-      className: "flex items-center gap-2 bg-neutral-900  rounded-full p-1 pr-3 cursor-pointer hover:bg-neutral-800 transition-colors",
+      className: "flex items-center gap-2 bg-neutral-900  rounded-full p-1 pr-3 cursor-pointer  transition-colors",
       title: "Copy Address"
     },
     web3Avatar ? /* @__PURE__ */ React23.createElement("img", { src: web3Avatar, alt: "Avatar", className: "w-6 h-6 rounded-full bg-neutral-800 object-cover shrink-0" }) : /* @__PURE__ */ React23.createElement("div", { className: "w-6 h-6 rounded-full bg-neutral-800 flex items-center justify-center text-[9px] text-white shrink-0" }, userInitials.substring(0, 2)),
@@ -1829,7 +1829,7 @@ var UniversalSidebar = ({
         setShowNotifDialog(true);
         setSelectedNotif(null);
       },
-      className: "relative w-8 h-8 shrink-0 bg-neutral-900  rounded-full flex items-center justify-center text-neutral-400 hover:text-white hover:bg-neutral-800 transition-all duration-300 outline-none"
+      className: "relative w-8 h-8 shrink-0 bg-neutral-900  rounded-full flex items-center justify-center text-neutral-400 hover:text-white  transition-all duration-300 outline-none"
     },
     /* @__PURE__ */ React23.createElement(HugeiconsIcon11, { icon: Notification01Icon, size: 14 }),
     unreadNotificationsCount > 0 && /* @__PURE__ */ React23.createElement("span", { className: "absolute top-2 right-2.5 w-2 h-2 bg-blue-500 rounded-full border border-neutral-900" })
@@ -1837,7 +1837,7 @@ var UniversalSidebar = ({
     Link8,
     {
       href: backUrl,
-      className: "w-10 h-10 shrink-0 bg-neutral-900  rounded-full flex items-center justify-center text-neutral-400 hover:text-white hover:bg-neutral-800 transition-all duration-300 outline-none",
+      className: "w-10 h-10 shrink-0 bg-neutral-900  rounded-full flex items-center justify-center text-neutral-400 hover:text-white  transition-all duration-300 outline-none",
       "aria-label": "Go Back"
     },
     /* @__PURE__ */ React23.createElement(HugeiconsIcon11, { icon: ArrowLeft01Icon2, size: 18 })
@@ -1884,7 +1884,7 @@ var UniversalSidebar = ({
           key: item.name,
           href: item.path,
           onClick: (e) => onNavClick ? onNavClick(e, item.path) : void 0,
-          className: `flex items-center gap-3 px-3 py-2 rounded-full transition-all outline-none group shrink-0 ${isCurrentRoute ? "bg-neutral-800 text-white" : "text-neutral-400 hover:text-white hover:bg-neutral-800/50"}`,
+          className: `flex items-center gap-3 px-3 py-2 rounded-full transition-all outline-none group shrink-0 ${isCurrentRoute ? "bg-neutral-800 text-white" : "text-neutral-400 hover:text-white /50"}`,
           title: isCollapsed && !isMobileOpen ? item.name : void 0
         },
         /* @__PURE__ */ React23.createElement(
@@ -1902,7 +1902,7 @@ var UniversalSidebar = ({
       "button",
       {
         onClick: () => setShowLogoutDialog(true),
-        className: "w-8 h-8 shrink-0 rounded-full bg-neutral-800 flex items-center justify-center text-neutral-400 hover:text-white hover:bg-neutral-700 transition-all outline-none",
+        className: "w-8 h-8 shrink-0 rounded-full bg-neutral-800 flex items-center justify-center text-neutral-400 hover:text-white  transition-all outline-none",
         title: "Secure Logout"
       },
       /* @__PURE__ */ React23.createElement(HugeiconsIcon11, { icon: LogoutCircle02Icon, size: 16 })
@@ -1910,7 +1910,7 @@ var UniversalSidebar = ({
       "button",
       {
         onClick: () => setIsCollapsed(!isCollapsed),
-        className: "flex items-center justify-center md:justify-start gap-3 w-full p-2.5 rounded-full text-neutral-400 hover:text-white hover:bg-neutral-800 transition-colors outline-none"
+        className: "flex items-center justify-center md:justify-start gap-3 w-full p-2.5 rounded-full text-neutral-400 hover:text-white  transition-colors outline-none"
       },
       /* @__PURE__ */ React23.createElement(HugeiconsIcon11, { icon: SidebarLeft01Icon, size: 18, className: "shrink-0 text-neutral-500" }),
       !isCollapsed && /* @__PURE__ */ React23.createElement("span", { className: "text-xs " }, "Collapse")
@@ -1923,7 +1923,7 @@ var UniversalSidebar = ({
         setSelectedNotif(notif);
         onNotificationClick?.(notif);
       },
-      className: "p-3 flex items-start gap-3 hover:bg-neutral-800 cursor-pointer transition-colors"
+      className: "p-3 flex items-start gap-3  cursor-pointer transition-colors"
     },
     /* @__PURE__ */ React23.createElement("div", { className: "mt-1.5 shrink-0" }, !notif.isRead ? /* @__PURE__ */ React23.createElement("div", { className: "w-1.5 h-1.5 bg-blue-500 rounded-full" }) : /* @__PURE__ */ React23.createElement("div", { className: "w-1.5 h-1.5 bg-transparent" })),
     /* @__PURE__ */ React23.createElement("div", { className: "flex-1 min-w-0 text-left" }, /* @__PURE__ */ React23.createElement("h5", { className: `text-[12px] truncate ${notif.isRead ? "text-neutral-400" : "text-white"}` }, notif.title), /* @__PURE__ */ React23.createElement("p", { className: "text-[11px] text-neutral-500 truncate mt-0.5" }, notif.message), /* @__PURE__ */ React23.createElement("span", { className: "text-[9px] text-neutral-600 tracking-widest mt-2 block" }, formatNotifDate(notif.createdAt)))
@@ -1932,7 +1932,7 @@ var UniversalSidebar = ({
     {
       disabled: notificationPage <= 1,
       onClick: () => onNotificationPageChange?.(notificationPage - 1),
-      className: "w-7 h-7 flex items-center justify-center rounded-full  border border-neutral-700 text-neutral-400 disabled:opacity-30 outline-none hover:bg-neutral-700 hover:text-white transition-colors"
+      className: "w-7 h-7 flex items-center justify-center rounded-full  border border-neutral-700 text-neutral-400 disabled:opacity-30 outline-none  hover:text-white transition-colors"
     },
     /* @__PURE__ */ React23.createElement(HugeiconsIcon11, { icon: ArrowLeft01Icon2, size: 12 })
   ), /* @__PURE__ */ React23.createElement(
@@ -1940,7 +1940,7 @@ var UniversalSidebar = ({
     {
       disabled: notificationPage >= notificationTotalPages || notificationTotalPages === 0,
       onClick: () => onNotificationPageChange?.(notificationPage + 1),
-      className: "w-7 h-7 flex items-center justify-center rounded-full  border border-neutral-700 text-neutral-400 disabled:opacity-30 outline-none hover:bg-neutral-700 hover:text-white transition-colors"
+      className: "w-7 h-7 flex items-center justify-center rounded-full  border border-neutral-700 text-neutral-400 disabled:opacity-30 outline-none  hover:text-white transition-colors"
     },
     /* @__PURE__ */ React23.createElement(HugeiconsIcon11, { icon: ArrowRight01Icon3, size: 12 })
   ))))), showLogoutDialog && showLogoutAction && /* @__PURE__ */ React23.createElement("div", { className: "fixed inset-0 z-110 flex items-center justify-center p-4 pointer-events-auto" }, /* @__PURE__ */ React23.createElement(
@@ -1954,7 +1954,7 @@ var UniversalSidebar = ({
     {
       onClick: () => setShowLogoutDialog(false),
       disabled: isLoggingOut,
-      className: "flex-1 py-3 text-[13px] text-neutral-400 hover:bg-neutral-800 hover:text-white transition-colors disabled:opacity-50 outline-none"
+      className: "flex-1 py-3 text-[13px] text-neutral-400  hover:text-white transition-colors disabled:opacity-50 outline-none"
     },
     "Cancel"
   ), /* @__PURE__ */ React23.createElement(
@@ -1962,7 +1962,7 @@ var UniversalSidebar = ({
     {
       onClick: handleLogoutInitiation,
       disabled: isLoggingOut,
-      className: "flex-1 py-3 text-[13px] text-red-400 hover:bg-neutral-800 hover:text-red-300 transition-colors disabled:opacity-50 flex justify-center items-center outline-none"
+      className: "flex-1 py-3 text-[13px] text-red-400  hover:text-red-300 transition-colors disabled:opacity-50 flex justify-center items-center outline-none"
     },
     isLoggingOut ? /* @__PURE__ */ React23.createElement(ButtonSpinner, null) : "Log Out"
   )))), showInterceptDialog && /* @__PURE__ */ React23.createElement("div", { className: "fixed inset-0 z-110 flex items-center justify-center p-4 pointer-events-auto" }, /* @__PURE__ */ React23.createElement(
@@ -1975,14 +1975,14 @@ var UniversalSidebar = ({
     "button",
     {
       onClick: onCancelIntercept,
-      className: "flex-1 py-3 text-[13px] text-neutral-400 hover:bg-neutral-800 hover:text-white transition-colors outline-none"
+      className: "flex-1 py-3 text-[13px] text-neutral-400  hover:text-white transition-colors outline-none"
     },
     "Cancel"
   ), /* @__PURE__ */ React23.createElement(
     "button",
     {
       onClick: onConfirmIntercept,
-      className: "flex-1 py-3 text-[13px] text-white hover:bg-neutral-800 transition-colors flex justify-center items-center outline-none"
+      className: "flex-1 py-3 text-[13px] text-white  transition-colors flex justify-center items-center outline-none"
     },
     "Leave"
   )))));
@@ -2342,7 +2342,7 @@ var UniversalErrorView = ({
       "button",
       {
         onClick: () => window.location.href = returnUrl,
-        className: "px-6 py-2 bg-neutral-800 hover:bg-neutral-700 text-white border border-neutral-700 rounded-full text-[11px] tracking-widest transition-colors w-full sm:w-auto outline-none"
+        className: "px-6 py-2   text-white border border-neutral-700 rounded-full text-[11px] tracking-widest transition-colors w-full sm:w-auto outline-none"
       },
       returnLabel
     ) : (
@@ -2351,14 +2351,14 @@ var UniversalErrorView = ({
         "button",
         {
           onClick: () => window.location.href = returnUrl,
-          className: "px-6 py-2 bg-transparent border border-neutral-700 hover:bg-neutral-800 text-neutral-400 hover:text-white rounded-full text-[11px] tracking-widest transition-colors w-full sm:w-auto outline-none"
+          className: "px-6 py-2 bg-transparent border border-neutral-700  text-neutral-400 hover:text-white rounded-full text-[11px] tracking-widest transition-colors w-full sm:w-auto outline-none"
         },
         "Back Home"
       ), /* @__PURE__ */ React27.createElement(
         "button",
         {
           onClick: onRetry,
-          className: "px-6 py-2 bg-white hover:bg-neutral-200 text-black rounded-full text-[11px] tracking-widest transition-colors w-full sm:w-auto outline-none capitalize"
+          className: "px-6 py-2 bg-white  text-black rounded-full text-[11px] tracking-widest transition-colors w-full sm:w-auto outline-none capitalize"
         },
         "Refresh ",
         envName
@@ -2394,6 +2394,10 @@ var formatDate = (dateInput) => {
 var formatTime = (dateInput) => {
   return new Date(dateInput).toLocaleTimeString("en-US", { hour: "2-digit", minute: "2-digit" });
 };
+var truncateAddress = (address) => {
+  if (!address || address.length < 12) return address;
+  return `${address.substring(0, 6)}...${address.substring(address.length - 4)}`;
+};
 var UniversalTransactionPage = ({
   headerTitle,
   headerDescription,
@@ -2478,7 +2482,7 @@ var UniversalTransactionPage = ({
     "button",
     {
       onClick: () => setIsDirectionModalOpen(true),
-      className: "flex items-center gap-2 whitespace-nowrap  border border-neutral-800 px-5 py-2 rounded-full text-[12px] text-neutral-400 hover:text-white hover:bg-neutral-800 transition-colors outline-none"
+      className: "flex items-center gap-2 whitespace-nowrap  border border-neutral-800 px-5 py-2 rounded-full text-[12px] text-neutral-400 hover:text-white  transition-colors outline-none"
     },
     /* @__PURE__ */ React28.createElement(HugeiconsIcon16, { icon: SearchList02Icon, size: 12 }),
     activeDirectionFilter === "ALL" ? "Payment Type" : activeDirectionFilter
@@ -2486,7 +2490,7 @@ var UniversalTransactionPage = ({
     "button",
     {
       onClick: () => setIsTypeModalOpen(true),
-      className: "flex items-center gap-2 whitespace-nowrap  border border-neutral-800 px-5 py-2 rounded-full text-[12px] text-neutral-400 hover:text-white hover:bg-neutral-800 transition-colors outline-none"
+      className: "flex items-center gap-2 whitespace-nowrap  border border-neutral-800 px-5 py-2 rounded-full text-[12px] text-neutral-400 hover:text-white  transition-colors outline-none"
     },
     /* @__PURE__ */ React28.createElement(HugeiconsIcon16, { icon: ListSettingIcon, size: 14 }),
     activeTypeFilter === "ALL" ? "All Transactions" : activeTypeFilter.replace("_", " ")
@@ -2495,7 +2499,7 @@ var UniversalTransactionPage = ({
     {
       key: tx.id,
       onClick: () => setSelectedTransaction(tx),
-      className: "flex items-center justify-between py-4 hover:bg-neutral-800/50 transition-colors cursor-pointer group min-w-0 px-2 -mx-2 rounded-xl"
+      className: "flex items-center justify-between py-4 /50 transition-colors cursor-pointer group min-w-0 px-2 -mx-2 rounded-xl"
     },
     /* @__PURE__ */ React28.createElement("div", { className: "flex items-center gap-4 min-w-0 flex-1" }, /* @__PURE__ */ React28.createElement("div", { className: `w-10 h-10 shrink-0 rounded-full flex items-center justify-center bg-neutral-700 text-white` }, /* @__PURE__ */ React28.createElement(HugeiconsIcon16, { icon: tx.direction === "CREDIT" ? ArrowDownRight01Icon : ArrowUpRight01Icon, size: 18 })), /* @__PURE__ */ React28.createElement("div", { className: "min-w-0 flex-1 flex flex-col gap-1" }, /* @__PURE__ */ React28.createElement("p", { className: "text-[13px] text-white truncate" }, getDisplayName(tx)), /* @__PURE__ */ React28.createElement("p", { className: `text-[13px] text-neutral-400 truncate transition-all duration-300 ${hideBalanceAmounts ? "blur-sm opacity-40 select-none" : ""}` }, tx.direction === "CREDIT" ? "+" : "-", tx.amount, " ", tx.currency))),
     /* @__PURE__ */ React28.createElement("div", { className: "shrink-0 flex flex-col items-end gap-1 text-right" }, /* @__PURE__ */ React28.createElement("span", { className: "text-[11px] text-neutral-500" }, formatDate(tx.createdAt)), /* @__PURE__ */ React28.createElement("span", { className: "text-[11px] text-neutral-500 capitalize" }, tx.direction.toLowerCase()))
@@ -2515,16 +2519,8 @@ var UniversalTransactionPage = ({
       className: "p-2 border border-neutral-800 rounded-full text-neutral-500 hover:text-white hover:border-neutral-600 disabled:opacity-30 disabled:cursor-not-allowed transition-all outline-none"
     },
     /* @__PURE__ */ React28.createElement(HugeiconsIcon16, { icon: ArrowRight01Icon4, size: 14 })
-  )))))), selectedTransaction && /* @__PURE__ */ React28.createElement("div", { className: "fixed inset-0 z-120 flex items-center justify-center p-4 pointer-events-auto" }, /* @__PURE__ */ React28.createElement("div", { className: "absolute inset-0 bg-black/60", onClick: () => setSelectedTransaction(null) }), /* @__PURE__ */ React28.createElement("div", { className: "relative w-full max-w-sm bg-neutral-900 rounded-2xl flex flex-col overflow-hidden shadow-2xl animate-in zoom-in-95 duration-200 max-h-[90vh]" }, /* @__PURE__ */ React28.createElement("div", { className: "flex items-center justify-between p-5 shrink-0" }, /* @__PURE__ */ React28.createElement("h3", { className: "text-[15px] text-white tracking-tight" }, "Details"), /* @__PURE__ */ React28.createElement("button", { onClick: () => setSelectedTransaction(null), className: "text-neutral-500 hover:text-white transition-colors outline-none" }, /* @__PURE__ */ React28.createElement(HugeiconsIcon16, { icon: CancelCircleIcon2, size: 18 }))), /* @__PURE__ */ React28.createElement("div", { className: "flex-1 overflow-y-auto custom-scrollbar p-6" }, /* @__PURE__ */ React28.createElement("div", { className: "flex flex-col items-center justify-center mb-4" }, /* @__PURE__ */ React28.createElement("div", { className: `w-12 h-12 rounded-full flex items-center justify-center mb-4 bg-neutral-700 text-white` }, /* @__PURE__ */ React28.createElement(HugeiconsIcon16, { icon: selectedTransaction.direction === "CREDIT" ? ArrowDownRight01Icon : ArrowUpRight01Icon, size: 20 })), /* @__PURE__ */ React28.createElement("h2", { className: `text-2xl text-white mb-2 transition-all duration-300 ${hideBalanceAmounts ? "blur-[6px] opacity-40 select-none" : ""}` }, selectedTransaction.direction === "CREDIT" ? "+" : "-", selectedTransaction.amount, " ", selectedTransaction.currency), /* @__PURE__ */ React28.createElement("span", { className: "text-[9px] tracking-widest text-neutral-400 px-4 py-1.5 rounded-full border border-neutral-800" }, selectedTransaction.status), selectedTransaction.type === "WALLET_TRANSACTION" && /* @__PURE__ */ React28.createElement(
-    "a",
-    {
-      href: `https://basescan.org/tx/${selectedTransaction.reference}`,
-      target: "_blank",
-      rel: "noopener noreferrer",
-      className: "text-[11px] text-white mt-4 transition-colors tracking-wide hover:text-neutral-300"
-    },
-    "View in block explorer"
-  )), /* @__PURE__ */ React28.createElement("div", { className: "grid grid-cols-1 gap-y-8 gap-x-4 mb-10 mt-6" }, /* @__PURE__ */ React28.createElement("div", null, /* @__PURE__ */ React28.createElement("span", { className: "text-[11px] tracking-[0.2em] text-neutral-500 block mb-2" }, "Reference ID"), /* @__PURE__ */ React28.createElement("span", { className: "text-[13px] text-white break-all" }, selectedTransaction.reference)), /* @__PURE__ */ React28.createElement("div", null, /* @__PURE__ */ React28.createElement("span", { className: "text-[11px] tracking-[0.2em] text-neutral-500 block mb-2" }, "Date & Time"), /* @__PURE__ */ React28.createElement("span", { className: "text-[13px] text-white" }, formatDate(selectedTransaction.createdAt), " at ", formatTime(selectedTransaction.createdAt))), /* @__PURE__ */ React28.createElement("div", null, /* @__PURE__ */ React28.createElement("span", { className: "text-[11px] tracking-[0.2em] text-neutral-500 block mb-2" }, "Transaction Type"), /* @__PURE__ */ React28.createElement("span", { className: "text-[13px] text-white capitalize" }, selectedTransaction.type.replace("_", " ").toLowerCase())), /* @__PURE__ */ React28.createElement("div", null, /* @__PURE__ */ React28.createElement("span", { className: "text-[11px] tracking-[0.2em] text-neutral-500 block mb-2" }, "Flow Direction"), /* @__PURE__ */ React28.createElement("span", { className: "text-[13px] text-white capitalize" }, selectedTransaction.direction.toLowerCase())), selectedTransaction.metadata && Object.entries(selectedTransaction.metadata).map(([key, value]) => {
+  )))))), selectedTransaction && /* @__PURE__ */ React28.createElement("div", { className: "fixed inset-0 z-120 flex items-center justify-center p-4 pointer-events-auto" }, /* @__PURE__ */ React28.createElement("div", { className: "absolute inset-0 bg-black/60", onClick: () => setSelectedTransaction(null) }), /* @__PURE__ */ React28.createElement("div", { className: "relative w-full max-w-sm bg-neutral-900 rounded-2xl flex flex-col overflow-hidden shadow-2xl animate-in zoom-in-95 duration-200 max-h-[90vh]" }, /* @__PURE__ */ React28.createElement("div", { className: "flex items-center justify-between p-5 shrink-0" }, /* @__PURE__ */ React28.createElement("h3", { className: "text-[15px] text-white tracking-tight" }, "Details"), /* @__PURE__ */ React28.createElement("button", { onClick: () => setSelectedTransaction(null), className: "text-neutral-500 hover:text-white transition-colors outline-none" }, /* @__PURE__ */ React28.createElement(HugeiconsIcon16, { icon: CancelCircleIcon2, size: 18 }))), /* @__PURE__ */ React28.createElement("div", { className: "flex-1 overflow-y-auto custom-scrollbar p-6" }, /* @__PURE__ */ React28.createElement("div", { className: "flex flex-col items-center justify-center mb-4" }, /* @__PURE__ */ React28.createElement("div", { className: `w-12 h-12 rounded-full flex items-center justify-center mb-4 bg-neutral-700 text-white` }, /* @__PURE__ */ React28.createElement(HugeiconsIcon16, { icon: selectedTransaction.direction === "CREDIT" ? ArrowDownRight01Icon : ArrowUpRight01Icon, size: 20 })), /* @__PURE__ */ React28.createElement("h2", { className: `text-2xl text-white mb-2 transition-all duration-300 ${hideBalanceAmounts ? "blur-[6px] opacity-40 select-none" : ""}` }, selectedTransaction.direction === "CREDIT" ? "+" : "-", selectedTransaction.amount, " ", selectedTransaction.currency), /* @__PURE__ */ React28.createElement("span", { className: "text-[9px] tracking-widest text-neutral-400 px-4 py-1.5 rounded-full border border-neutral-800" }, selectedTransaction.status)), /* @__PURE__ */ React28.createElement("div", { className: "grid grid-cols-1 gap-y-8 gap-x-4 mb-10 mt-6" }, /* @__PURE__ */ React28.createElement("div", null, /* @__PURE__ */ React28.createElement("span", { className: "text-[11px] tracking-[0.2em] text-neutral-500 block mb-2" }, "Reference ID"), /* @__PURE__ */ React28.createElement("span", { className: "text-[13px] text-white break-all" }, selectedTransaction.reference)), /* @__PURE__ */ React28.createElement("div", null, /* @__PURE__ */ React28.createElement("span", { className: "text-[11px] tracking-[0.2em] text-neutral-500 block mb-2" }, "Date & Time"), /* @__PURE__ */ React28.createElement("span", { className: "text-[13px] text-white" }, formatDate(selectedTransaction.createdAt), " at ", formatTime(selectedTransaction.createdAt))), /* @__PURE__ */ React28.createElement("div", null, /* @__PURE__ */ React28.createElement("span", { className: "text-[11px] tracking-[0.2em] text-neutral-500 block mb-2" }, "Transaction Type"), /* @__PURE__ */ React28.createElement("span", { className: "text-[13px] text-white capitalize" }, selectedTransaction.type.replace("_", " ").toLowerCase())), /* @__PURE__ */ React28.createElement("div", null, /* @__PURE__ */ React28.createElement("span", { className: "text-[11px] tracking-[0.2em] text-neutral-500 block mb-2" }, "Flow Direction"), /* @__PURE__ */ React28.createElement("span", { className: "text-[13px] text-white capitalize" }, selectedTransaction.direction.toLowerCase())), selectedTransaction.metadata?.fromAddress && selectedTransaction.metadata?.toAddress && /* @__PURE__ */ React28.createElement("div", null, /* @__PURE__ */ React28.createElement("span", { className: "text-[11px] tracking-[0.2em] text-neutral-500 block mb-2" }, "Transfer Route"), /* @__PURE__ */ React28.createElement("div", { className: "flex items-center gap-2 text-[13px] text-white" }, /* @__PURE__ */ React28.createElement("span", { className: "truncate" }, truncateAddress(String(selectedTransaction.metadata.fromAddress))), /* @__PURE__ */ React28.createElement("span", { className: "text-neutral-500" }, "\u2192"), /* @__PURE__ */ React28.createElement("span", { className: "truncate" }, truncateAddress(String(selectedTransaction.metadata.toAddress))))), selectedTransaction.metadata && Object.entries(selectedTransaction.metadata).map(([key, value]) => {
+    if (key === "fromAddress" || key === "toAddress") return null;
     if (value === null || value === void 0 || typeof value === "object") return null;
     const formattedKey = key.replace(/([A-Z])/g, " $1").replace(/^./, (str) => str.toUpperCase());
     return /* @__PURE__ */ React28.createElement("div", { key }, /* @__PURE__ */ React28.createElement("span", { className: "text-[11px] tracking-[0.2em] text-neutral-500 block mb-2" }, formattedKey), /* @__PURE__ */ React28.createElement("span", { className: "text-[13px] text-white break-all" }, String(value)));
@@ -2540,9 +2536,18 @@ var UniversalTransactionPage = ({
     "button",
     {
       onClick: () => onReportTransaction && onReportTransaction(selectedTransaction),
-      className: "w-full flex items-center font-semibold justify-center py-2.5 rounded-full border border-neutral-700 text-white hover:bg-neutral-800 transition-colors outline-none text-[13px] tracking-wide mt-2"
+      className: "w-full flex items-center font-medium justify-center py-2.5 rounded-full border border-neutral-700 text-white  transition-colors outline-none text-[13px] tracking-wide mt-2"
     },
     "Report Transaction"
+  ), selectedTransaction.type === "WALLET_TRANSACTION" && /* @__PURE__ */ React28.createElement(
+    "a",
+    {
+      href: `https://basescan.org/tx/${selectedTransaction.reference}`,
+      target: "_blank",
+      rel: "noopener noreferrer",
+      className: "w-full flex items-center font-medium justify-center py-2.5 rounded-full border border-neutral-700 text-white  transition-colors outline-none text-[13px] tracking-wide mt-2"
+    },
+    "View in block explorer"
   ))))), isDirectionModalOpen && /* @__PURE__ */ React28.createElement("div", { className: "fixed inset-0 z-110 flex items-center justify-center p-4" }, /* @__PURE__ */ React28.createElement("div", { className: "absolute inset-0 bg-black/60", onClick: () => setIsDirectionModalOpen(false) }), /* @__PURE__ */ React28.createElement("div", { ref: directionDropdownRef, className: "relative w-72 bg-neutral-900 shadow-2xl rounded-2xl flex flex-col items-center overflow-hidden animate-in zoom-in-95 duration-200" }, /* @__PURE__ */ React28.createElement("div", { className: "p-6 text-center w-full" }, /* @__PURE__ */ React28.createElement("h3", { className: "text-[14px] text-white tracking-tight" }, "Payment Type")), /* @__PURE__ */ React28.createElement("div", { className: "w-full flex flex-col pl-2 pr-2" }, ["ALL", "CREDIT", "DEBIT"].map((option) => /* @__PURE__ */ React28.createElement(
     "button",
     {
@@ -2551,14 +2556,14 @@ var UniversalTransactionPage = ({
         onDirectionFilterChange(option);
         setIsDirectionModalOpen(false);
       },
-      className: `text-left px-4 py-3 text-[11px] tracking-wide transition-colors rounded-full flex items-center justify-between outline-none ${activeDirectionFilter === option ? "bg-neutral-800 text-white" : "text-neutral-400 hover:bg-neutral-800 hover:text-white"}`
+      className: `text-left px-4 py-3 text-[11px] tracking-wide transition-colors rounded-full flex items-center justify-between outline-none ${activeDirectionFilter === option ? "bg-neutral-800 text-white" : "text-neutral-400  hover:text-white"}`
     },
     /* @__PURE__ */ React28.createElement("span", { className: "truncate pr-2" }, option.charAt(0).toUpperCase() + option.slice(1).toLowerCase())
   ))), /* @__PURE__ */ React28.createElement("div", { className: "w-full flex" }, /* @__PURE__ */ React28.createElement(
     "button",
     {
       onClick: () => setIsDirectionModalOpen(false),
-      className: "w-full py-3 text-[13px] text-neutral-500 hover:bg-neutral-800 hover:text-white transition-colors outline-none"
+      className: "w-full py-3 text-[13px] text-neutral-500  hover:text-white transition-colors outline-none"
     },
     "Cancel"
   )))), isTypeModalOpen && /* @__PURE__ */ React28.createElement("div", { className: "fixed inset-0 z-110 flex items-center justify-center p-4" }, /* @__PURE__ */ React28.createElement("div", { className: "absolute inset-0 bg-black/60", onClick: () => setIsTypeModalOpen(false) }), /* @__PURE__ */ React28.createElement("div", { ref: typeDropdownRef, className: "relative w-72 bg-neutral-900 shadow-2xl rounded-2xl flex flex-col items-center overflow-hidden animate-in zoom-in-95 duration-200" }, /* @__PURE__ */ React28.createElement("div", { className: "p-6 text-center w-full" }, /* @__PURE__ */ React28.createElement("h3", { className: "text-[14px] text-white tracking-tight" }, "Transactions Type")), /* @__PURE__ */ React28.createElement("div", { className: "w-full flex flex-col pl-2 pr-2" }, [
@@ -2573,14 +2578,14 @@ var UniversalTransactionPage = ({
         onTypeFilterChange(option.value);
         setIsTypeModalOpen(false);
       },
-      className: `text-left px-4 py-3 text-[11px] tracking-wide transition-colors rounded-full flex items-center justify-between outline-none ${activeTypeFilter === option.value ? "bg-neutral-800 text-white" : "text-neutral-400 hover:bg-neutral-800 hover:text-white"}`
+      className: `text-left px-4 py-3 text-[11px] tracking-wide transition-colors rounded-full flex items-center justify-between outline-none ${activeTypeFilter === option.value ? "bg-neutral-800 text-white" : "text-neutral-400  hover:text-white"}`
     },
     /* @__PURE__ */ React28.createElement("span", { className: "truncate pr-2" }, option.label.charAt(0).toUpperCase() + option.label.slice(1).toLowerCase())
   ))), /* @__PURE__ */ React28.createElement("div", { className: "w-full flex" }, /* @__PURE__ */ React28.createElement(
     "button",
     {
       onClick: () => setIsTypeModalOpen(false),
-      className: "w-full py-3 text-[13px] text-neutral-500 hover:bg-neutral-800 hover:text-white transition-colors outline-none"
+      className: "w-full py-3 text-[13px] text-neutral-500  hover:text-white transition-colors outline-none"
     },
     "Cancel"
   )))));
@@ -2671,12 +2676,12 @@ var UniversalHomeView = ({
       }
     },
     /* @__PURE__ */ React29.createElement("span", { className: "absolute inset-0 bg-linear-to-r from-white/30 to-transparent pointer-events-none" }),
-    /* @__PURE__ */ React29.createElement("span", { className: "relative z-10 flex items-center gap-1.5 leading-none text-[13px] tracking-wide font-semibold drop-shadow-[0_1px_1px_rgba(255,255,255,0.8)]" }, primaryAction.label, primaryAction.icon && /* @__PURE__ */ React29.createElement(HugeiconsIcon17, { icon: primaryAction.icon, size: 16 }))
+    /* @__PURE__ */ React29.createElement("span", { className: "relative z-10 flex items-center gap-1.5 leading-none text-[13px] tracking-wide font-medium drop-shadow-[0_1px_1px_rgba(255,255,255,0.8)]" }, primaryAction.label, primaryAction.icon && /* @__PURE__ */ React29.createElement(HugeiconsIcon17, { icon: primaryAction.icon, size: 16 }))
   ), secondaryAction && /* @__PURE__ */ React29.createElement(
     "button",
     {
       onClick: secondaryAction.onClick,
-      className: "flex items-center gap-1.5 px-8 py-2 rounded-full  border border-neutral-800 text-white transition-colors hover:bg-neutral-800 outline-none"
+      className: "flex items-center gap-1.5 px-8 py-2 rounded-full  border border-neutral-800 text-white transition-colors  outline-none"
     },
     /* @__PURE__ */ React29.createElement("span", { className: "text-[13px] tracking-wide" }, secondaryAction.label),
     secondaryAction.icon && /* @__PURE__ */ React29.createElement(HugeiconsIcon17, { icon: secondaryAction.icon, size: 16 })
@@ -2685,9 +2690,9 @@ var UniversalHomeView = ({
     {
       key: action.id,
       onClick: action.onClick,
-      className: `w-full h-23.75 sm:h-28.75 rounded-2xl bg-neutral-900  hover:bg-neutral-800 p-2.5 sm:p-3 flex flex-col justify-between items-start cursor-pointer active:scale-[0.98] transition-all outline-none`
+      className: `w-full h-23.75 sm:h-28.75 rounded-2xl border border-neutral-800  p-2.5 sm:p-3 flex flex-col justify-between items-start cursor-pointer active:scale-[0.98] transition-all outline-none`
     },
-    /* @__PURE__ */ React29.createElement("div", { className: `w-7 h-7 sm:w-9 sm:h-9 rounded-full flex items-center justify-center bg-neutral-700 text-white}` }, /* @__PURE__ */ React29.createElement("div", { className: "scale-75 sm:scale-100 text-white flex items-center justify-center" }, /* @__PURE__ */ React29.createElement(HugeiconsIcon17, { icon: action.icon, size: 18 }))),
+    /* @__PURE__ */ React29.createElement("div", { className: `w-7 h-7 sm:w-9 sm:h-9 rounded-full flex items-center justify-center border border-neutral-800 text-white}` }, /* @__PURE__ */ React29.createElement("div", { className: "scale-75 sm:scale-100 text-white flex items-center justify-center" }, /* @__PURE__ */ React29.createElement(HugeiconsIcon17, { icon: action.icon, size: 18 }))),
     /* @__PURE__ */ React29.createElement("span", { className: "text-[10px] sm:text-[12px] text-neutral-300 text-left leading-[1.2] whitespace-pre-line mt-1" }, action.label)
   )))), /* @__PURE__ */ React29.createElement("div", { className: "w-full" }, /* @__PURE__ */ React29.createElement(
     UniversalTransactionPage,
@@ -2763,7 +2768,7 @@ var UniversalWalletPage = ({
     {
       key: wallet.id,
       onClick: () => setSelectedWallet(wallet),
-      className: "flex items-center justify-between py-4 hover:bg-neutral-800/50 transition-colors cursor-pointer group min-w-0 px-2 -mx-2 rounded-xl"
+      className: "flex items-center justify-between py-4 /50 transition-colors cursor-pointer group min-w-0 px-2 -mx-2 rounded-xl"
     },
     /* @__PURE__ */ React30.createElement("div", { className: "flex items-center gap-4 min-w-0 flex-1" }, /* @__PURE__ */ React30.createElement(WalletLogo, { src: wallet.logoSrc, alt: wallet.name }), /* @__PURE__ */ React30.createElement("div", { className: "min-w-0 flex-1 flex flex-col gap-1" }, /* @__PURE__ */ React30.createElement("p", { className: "text-[13px] text-white truncate font-medium" }, wallet.name), /* @__PURE__ */ React30.createElement("p", { className: `text-[13px] text-neutral-400 truncate transition-all duration-300 ${hideBalanceAmounts ? "blur-sm opacity-40 select-none" : ""}` }, wallet.balance, " ", wallet.currency))),
     /* @__PURE__ */ React30.createElement("div", { className: "shrink-0 flex flex-col items-end gap-1 text-right" }, /* @__PURE__ */ React30.createElement("span", { className: "text-[10px] tracking-wide text-neutral-400 bg-neutral-800  px-2.5 py-1 rounded-full " }, wallet.network))
@@ -2785,7 +2790,7 @@ var UniversalWalletPage = ({
     "button",
     {
       onClick: () => handleCopy(selectedWallet),
-      className: "w-full flex font-semibold  items-center justify-center py-2.5 rounded-full border border-neutral-700 text-white hover:bg-neutral-800 outline-none text-[13px] tracking-wide"
+      className: "w-full flex font-medium  items-center justify-center py-2.5 rounded-full border border-neutral-700 text-white  outline-none text-[13px] tracking-wide"
     },
     "Copy Wallet Address"
   ))))));
@@ -3008,7 +3013,7 @@ var ManagedProjectsBlock = ({
     }
   ), /* @__PURE__ */ React36.createElement("div", { className: "relative z-10" }, /* @__PURE__ */ React36.createElement(GridSection, null, tagline && /* @__PURE__ */ React36.createElement("span", { className: "text-[11px] tracking-[0.4em] text-neutral-500 text-left block" }, tagline), /* @__PURE__ */ React36.createElement("h1", { className: "text-3xl mt-4 text-white tracking-tight text-left" }, title)), projects.map((project, index) => {
     const isLast = index === projects.length - 1;
-    const projectContent = /* @__PURE__ */ React36.createElement("div", { className: "group block w-full" }, /* @__PURE__ */ React36.createElement("div", { className: "flex flex-col md:flex-row md:items-center justify-between gap-3 md:gap-4 mb-4 md:mb-5" }, /* @__PURE__ */ React36.createElement("div", { className: "flex items-center gap-3 md:gap-4" }, /* @__PURE__ */ React36.createElement("h2", { className: "text-[16px] text-white transition-all flex items-center gap-2" }, project.title, /* @__PURE__ */ React36.createElement("span", { className: "text-[11px] text-neutral-500 opacity-0 -translate-x-2 group-hover:opacity-100 group-hover:translate-x-0 group-hover:text-white transition-all duration-300" }, project.isExternal ? "\u2197" : "\u2192")), /* @__PURE__ */ React36.createElement("span", { className: `text-[9px] px-2.5 py-1 rounded-full tracking-[0.15em] transition-colors ${project.status.toLowerCase() === "production" ? "bg-white text-black" : "bg-neutral-800 text-neutral-400 group-hover:bg-neutral-700 group-hover:text-white"}` }, project.status)), /* @__PURE__ */ React36.createElement("span", { className: "text-[11px] tracking-[0.2em] text-neutral-500 shrink-0" }, project.date)), /* @__PURE__ */ React36.createElement("p", { className: "text-[13px] leading-[1.8] text-neutral-400 max-w-4xl text-left transition-colors group-hover:text-neutral-300" }, project.description));
+    const projectContent = /* @__PURE__ */ React36.createElement("div", { className: "group block w-full" }, /* @__PURE__ */ React36.createElement("div", { className: "flex flex-col md:flex-row md:items-center justify-between gap-3 md:gap-4 mb-4 md:mb-5" }, /* @__PURE__ */ React36.createElement("div", { className: "flex items-center gap-3 md:gap-4" }, /* @__PURE__ */ React36.createElement("h2", { className: "text-[16px] text-white transition-all flex items-center gap-2" }, project.title, /* @__PURE__ */ React36.createElement("span", { className: "text-[11px] text-neutral-500 opacity-0 -translate-x-2 group-hover:opacity-100 group-hover:translate-x-0 group-hover:text-white transition-all duration-300" }, project.isExternal ? "\u2197" : "\u2192")), /* @__PURE__ */ React36.createElement("span", { className: `text-[9px] px-2.5 py-1 rounded-full tracking-[0.15em] transition-colors ${project.status.toLowerCase() === "production" ? "bg-white text-black" : "bg-neutral-800 text-neutral-400 group- group-hover:text-white"}` }, project.status)), /* @__PURE__ */ React36.createElement("span", { className: "text-[11px] tracking-[0.2em] text-neutral-500 shrink-0" }, project.date)), /* @__PURE__ */ React36.createElement("p", { className: "text-[13px] leading-[1.8] text-neutral-400 max-w-4xl text-left transition-colors group-hover:text-neutral-300" }, project.description));
     return /* @__PURE__ */ React36.createElement(GridSection, { key: project.id || index, isLast, className: isLast ? "py-8 md:py-10 pb-12 md:pb-14" : "py-8 md:py-10" }, project.isExternal ? /* @__PURE__ */ React36.createElement("a", { href: project.link, target: "_blank", rel: "noopener noreferrer", className: "block outline-none" }, projectContent) : /* @__PURE__ */ React36.createElement(Link9, { href: project.link, className: "block outline-none" }, projectContent));
   }))));
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@retinalabsllc/zairusjs",
-  "version": "5.1.50",
+  "version": "5.1.56",
   "description": "A perceptive, Ai data driven Next.js UI component library.",
   "author": "Retina Labs Company",
   "license": "MIT",