@retinalabsllc/zairusjs 15.1.25 → 15.1.35

package/dist/index.d.mts

@@ -256,10 +256,6 @@ interface NotificationItem {
 interface UniversalHomeViewProps {
     fullName?: string;
     avatarSrc?: string | null;
-    balanceLabel?: string;
-    balanceAmount: string;
-    balanceCurrency?: string;
-    calculatorAction?: HomeActionBtn;
     buyCryptoAction?: HomeActionBtn;
     referralAction?: HomeActionBtn;
     notifications?: NotificationItem[];

package/dist/index.d.ts

@@ -256,10 +256,6 @@ interface NotificationItem {
 interface UniversalHomeViewProps {
     fullName?: string;
     avatarSrc?: string | null;
-    balanceLabel?: string;
-    balanceAmount: string;
-    balanceCurrency?: string;
-    calculatorAction?: HomeActionBtn;
     buyCryptoAction?: HomeActionBtn;
     referralAction?: HomeActionBtn;
     notifications?: NotificationItem[];

package/dist/index.js

@@ -1617,10 +1617,6 @@ var import_core_free_icons8 = require("@hugeicons/core-free-icons");
 var UniversalHomeView = ({
   fullName = "",
   avatarSrc,
-  balanceLabel = "Pending Balance",
-  balanceAmount,
-  balanceCurrency = "$",
-  calculatorAction,
   buyCryptoAction,
   referralAction,
   notifications = [],
@@ -1633,44 +1629,12 @@ var UniversalHomeView = ({
   customContent,
   transactionsProps
 }) => {
-  const [displayAmount, setDisplayAmount] = (0, import_react25.useState)("0.00");
-  const [isBalanceHidden, setIsBalanceHidden] = (0, import_react25.useState)(false);
   const [isAvatarLoaded, setIsAvatarLoaded] = (0, import_react25.useState)(false);
   const [showNotifDialog, setShowNotifDialog] = (0, import_react25.useState)(false);
   const [selectedNotif, setSelectedNotif] = (0, import_react25.useState)(null);
   const fallbackAvatarUrl = `/api/avatar/?name=${encodeURIComponent(fullName || " ")}&background=ffffff&color=000000&size=200&font-size=0.33`;
   const finalAvatarSrc = avatarSrc || fallbackAvatarUrl;
   const hasUnreadNotifs = notifications.some((n) => !n.isRead);
-  (0, import_react25.useEffect)(() => {
-    const target = parseFloat(balanceAmount.replace(/,/g, ""));
-    if (isNaN(target)) {
-      setDisplayAmount(balanceAmount);
-      return;
-    }
-    const decimalMatch = balanceAmount.match(/\.(\d+)/);
-    const fractionDigits = decimalMatch ? decimalMatch[1].length : 0;
-    let startTimestamp = null;
-    const duration = 1e3;
-    const step = (timestamp) => {
-      if (!startTimestamp) startTimestamp = timestamp;
-      const progress = Math.min((timestamp - startTimestamp) / duration, 1);
-      const easeProgress = progress === 1 ? 1 : 1 - Math.pow(2, -10 * progress);
-      const currentCount = easeProgress * target;
-      setDisplayAmount(currentCount.toLocaleString("en-US", {
-        minimumFractionDigits: fractionDigits,
-        maximumFractionDigits: fractionDigits
-      }));
-      if (progress < 1) requestAnimationFrame(step);
-      else {
-        setDisplayAmount(target.toLocaleString("en-US", {
-          minimumFractionDigits: fractionDigits,
-          maximumFractionDigits: fractionDigits
-        }));
-      }
-    };
-    requestAnimationFrame(step);
-  }, [balanceAmount]);
-  const [intPart, decPart] = displayAmount.includes(".") ? displayAmount.split(".") : [displayAmount, ""];
   return /* @__PURE__ */ import_react25.default.createElement("div", { className: "w-full max-w-3xl mx-auto flex flex-col animate-in fade-in duration-300 relative" }, /* @__PURE__ */ import_react25.default.createElement("div", { className: "flex items-center justify-between w-full pb-4 " }, /* @__PURE__ */ import_react25.default.createElement("div", { className: "w-10 h-10 rounded-full bg-white p-0.75 flex items-center justify-center " }, /* @__PURE__ */ import_react25.default.createElement("div", { className: "relative w-full h-full rounded-full overflow-hidden bg-neutral-100 flex items-center justify-center" }, !isAvatarLoaded && /* @__PURE__ */ import_react25.default.createElement("div", { className: "absolute inset-0 flex items-center justify-center z-10 bg-neutral-100" }, /* @__PURE__ */ import_react25.default.createElement(import_react26.HugeiconsIcon, { icon: import_core_free_icons8.Loading03Icon, size: 16, className: "animate-spin text-black" })), /* @__PURE__ */ import_react25.default.createElement(
     "img",
     {
@@ -1690,27 +1654,13 @@ var UniversalHomeView = ({
     },
     /* @__PURE__ */ import_react25.default.createElement(import_react26.HugeiconsIcon, { icon: import_core_free_icons8.Notification01Icon, size: 20, className: "text-black" }),
     hasUnreadNotifs && /* @__PURE__ */ import_react25.default.createElement("span", { className: "absolute top-2.5 right-2.5 w-2 h-2 bg-red-500 rounded-full border border-white" })
-  )), /* @__PURE__ */ import_react25.default.createElement("div", { className: "w-full pb-6 flex flex-col gap-4" }, /* @__PURE__ */ import_react25.default.createElement("div", { className: "bg-linear-to-tl from-[#4a4a4a] via-[#0b0e14] to-[#03060b] rounded-2xl p-6 relative overflow-hidden flex flex-col justify-center" }, /* @__PURE__ */ import_react25.default.createElement("div", { className: "relative z-10 flex flex-col items-start text-left w-full" }, /* @__PURE__ */ import_react25.default.createElement("div", { className: "flex items-center gap-2 mb-2" }, /* @__PURE__ */ import_react25.default.createElement("span", { className: "text-[12px] text-neutral-300" }, balanceLabel), /* @__PURE__ */ import_react25.default.createElement(
-    "button",
-    {
-      onClick: () => setIsBalanceHidden(!isBalanceHidden),
-      className: "text-neutral-400 hover:text-white transition-colors outline-none"
-    },
-    /* @__PURE__ */ import_react25.default.createElement(import_react26.HugeiconsIcon, { icon: isBalanceHidden ? import_core_free_icons8.ViewIcon : import_core_free_icons8.ViewOffSlashIcon, size: 16 })
-  )), /* @__PURE__ */ import_react25.default.createElement("p", { className: `text-2xl text-white tracking-tight mb-6 tabular-nums flex items-baseline transition-all duration-300 ${isBalanceHidden ? "blur-sm opacity-40 select-none" : ""}` }, /* @__PURE__ */ import_react25.default.createElement("span", { className: "text-lg text-neutral-400 mr-1" }, balanceCurrency), intPart, decPart && /* @__PURE__ */ import_react25.default.createElement("span", { className: "text-lg text-neutral-400" }, ".", decPart)), /* @__PURE__ */ import_react25.default.createElement("div", { className: "flex items-center w-full" }, calculatorAction && /* @__PURE__ */ import_react25.default.createElement(
-    "button",
-    {
-      onClick: calculatorAction.onClick,
-      className: "px-6 py-2 bg-transparent border border-white/20 text-white truncate text-[12px] rounded-full transition-colors hover:bg-white/10 outline-none text-center"
-    },
-    calculatorAction.label || "Rate Calculator"
-  )))), /* @__PURE__ */ import_react25.default.createElement("div", { className: "grid grid-cols-2 gap-2" }, /* @__PURE__ */ import_react25.default.createElement(
+  )), /* @__PURE__ */ import_react25.default.createElement("div", { className: "w-full pb-6 flex flex-col gap-4" }, /* @__PURE__ */ import_react25.default.createElement("div", { className: "grid grid-cols-2 gap-2" }, /* @__PURE__ */ import_react25.default.createElement(
     "div",
     {
       onClick: buyCryptoAction?.onClick,
       className: "bg-[#143731] rounded-2xl p-5 relative overflow-hidden flex flex-col h-32 sm:h-36 cursor-pointer hover:opacity-90 transition-opacity"
     },
-    /* @__PURE__ */ import_react25.default.createElement("div", { className: "relative z-10 flex flex-col h-full justify-between" }, /* @__PURE__ */ import_react25.default.createElement("p", { className: "text-[15px] sm:text-[15px] text-white " }, "Buy Crypto"), /* @__PURE__ */ import_react25.default.createElement("div", { className: "w-8 h-8 rounded-full bg-white/10 border border-white/10 flex items-center justify-center" }, /* @__PURE__ */ import_react25.default.createElement(import_react26.HugeiconsIcon, { icon: import_core_free_icons8.ArrowUpRight01Icon, size: 16, className: "text-white" }))),
+    /* @__PURE__ */ import_react25.default.createElement("div", { className: "relative z-10 flex flex-col h-full justify-between" }, /* @__PURE__ */ import_react25.default.createElement("p", { className: "text-[15px] sm:text-[15px] text-white leading-tight font-medium" }, "Buy", /* @__PURE__ */ import_react25.default.createElement("br", null), /* @__PURE__ */ import_react25.default.createElement("span", { className: "text-white/70" }, "Crypto")), /* @__PURE__ */ import_react25.default.createElement("div", { className: "w-8 h-8 rounded-full bg-white/10  flex items-center justify-center" }, /* @__PURE__ */ import_react25.default.createElement(import_react26.HugeiconsIcon, { icon: import_core_free_icons8.ArrowUpRight01Icon, size: 16, className: "text-white" }))),
     /* @__PURE__ */ import_react25.default.createElement(
       "img",
       {
@@ -1725,7 +1675,7 @@ var UniversalHomeView = ({
       onClick: referralAction?.onClick,
       className: "bg-[#ceff8a] rounded-2xl p-5 relative overflow-hidden flex flex-col h-32 sm:h-36 cursor-pointer hover:opacity-90 transition-opacity"
     },
-    /* @__PURE__ */ import_react25.default.createElement("div", { className: "relative z-10 flex flex-col h-full justify-between" }, /* @__PURE__ */ import_react25.default.createElement("p", { className: "text-[15px] sm:text-[15px] text-black " }, "Referral"), /* @__PURE__ */ import_react25.default.createElement("div", { className: "w-8 h-8 rounded-full bg-black/5 border border-black/5 flex items-center justify-center" }, /* @__PURE__ */ import_react25.default.createElement(import_react26.HugeiconsIcon, { icon: import_core_free_icons8.ArrowRight01Icon, size: 16, className: "text-black" }))),
+    /* @__PURE__ */ import_react25.default.createElement("div", { className: "relative z-10 flex flex-col h-full justify-between" }, /* @__PURE__ */ import_react25.default.createElement("p", { className: "text-[15px] sm:text-[15px] text-black leading-tight font-medium" }, "My", /* @__PURE__ */ import_react25.default.createElement("br", null), /* @__PURE__ */ import_react25.default.createElement("span", { className: "text-black/60" }, "Rewards")), /* @__PURE__ */ import_react25.default.createElement("div", { className: "w-8 h-8 rounded-full bg-black/5  flex items-center justify-center" }, /* @__PURE__ */ import_react25.default.createElement(import_react26.HugeiconsIcon, { icon: import_core_free_icons8.ArrowRight01Icon, size: 16, className: "text-black" }))),
     /* @__PURE__ */ import_react25.default.createElement(
       "img",
       {
@@ -1739,7 +1689,7 @@ var UniversalHomeView = ({
     {
       ...transactionsProps,
       hideControls: true,
-      hideBalanceAmounts: isBalanceHidden,
+      hideBalanceAmounts: false,
       hidePagination: true
     }
   )), showNotifDialog && /* @__PURE__ */ import_react25.default.createElement("div", { className: "fixed inset-0 z-120 flex items-center justify-center p-4 pointer-events-auto" }, /* @__PURE__ */ import_react25.default.createElement("div", { className: "absolute inset-0 bg-black/30", onClick: () => setShowNotifDialog(false) }), /* @__PURE__ */ import_react25.default.createElement("div", { className: "relative w-full max-w-sm bg-white rounded-2xl flex flex-col overflow-hidden shadow-2xl animate-in zoom-in-95 duration-200 h-[80vh]" }, /* @__PURE__ */ import_react25.default.createElement("div", { className: "flex items-center justify-between p-5 shrink-0 " }, selectedNotif ? /* @__PURE__ */ import_react25.default.createElement("button", { onClick: () => setSelectedNotif(null), className: "text-neutral-400 hover:text-black transition-colors outline-none flex items-center gap-2 text-[11px] tracking-widest " }, /* @__PURE__ */ import_react25.default.createElement(import_react26.HugeiconsIcon, { icon: import_core_free_icons8.ArrowLeft01Icon, size: 14 }), " Back") : /* @__PURE__ */ import_react25.default.createElement("h3", { className: "text-[15px] text-black tracking-tight flex items-center gap-2" }, "Notifications", isNotifsLoading && /* @__PURE__ */ import_react25.default.createElement(import_react26.HugeiconsIcon, { icon: import_core_free_icons8.Loading03Icon, size: 14, className: "animate-spin text-neutral-400" })), /* @__PURE__ */ import_react25.default.createElement("button", { onClick: () => setShowNotifDialog(false), className: "text-neutral-400 hover:text-black transition-colors outline-none" }, /* @__PURE__ */ import_react25.default.createElement(import_react26.HugeiconsIcon, { icon: import_core_free_icons8.CancelCircleIcon, size: 18 }))), /* @__PURE__ */ import_react25.default.createElement("div", { className: "flex-1 overflow-y-auto custom-scrollbar p-2" }, selectedNotif ? /* @__PURE__ */ import_react25.default.createElement("div", { className: "p-4 text-left" }, /* @__PURE__ */ import_react25.default.createElement("h4", { className: "text-[14px] text-black mb-1 " }, selectedNotif.title), /* @__PURE__ */ import_react25.default.createElement("span", { className: "text-[10px] text-neutral-400 tracking-widest mb-4 block " }, formatNotifDate(selectedNotif.createdAt)), /* @__PURE__ */ import_react25.default.createElement("p", { className: "text-[12px] text-neutral-600 leading-relaxed whitespace-pre-wrap" }, selectedNotif.message)) : /* @__PURE__ */ import_react25.default.createElement("div", { className: "flex flex-col divide-y divide-neutral-50/50" }, notifications?.length === 0 && !isNotifsLoading ? /* @__PURE__ */ import_react25.default.createElement("div", { className: "p-8 text-center text-xs text-neutral-400" }, "You have no notifications.") : notifications?.map((notif) => /* @__PURE__ */ import_react25.default.createElement(
@@ -2111,9 +2061,9 @@ var UniversalCardPage = ({
     setShowDeleteDialog(false);
   };
   const formatTabLabel = (type) => {
-    return type.charAt(0).toUpperCase() + type.slice(1).toLowerCase();
+    return type.charAt(0).toUpperCase() + type.slice(1).toLowerCase() + " Card";
   };
-  return /* @__PURE__ */ import_react31.default.createElement("div", { className: "w-full max-w-3xl mx-auto flex flex-col animate-in fade-in duration-300 relative" }, /* @__PURE__ */ import_react31.default.createElement("h1", { className: "text-2xl mt-2 text-black tracking-tight mb-2 text-center" }, "My Cards"), sortedCards.length > 1 && /* @__PURE__ */ import_react31.default.createElement("div", { className: "flex items-center justify-center mb-6 w-full px-2 gap-3" }, /* @__PURE__ */ import_react31.default.createElement("div", { className: "flex items-center bg-white rounded-full p-1 max-w-full overflow-x-auto custom-scrollbar" }, sortedCards.map((tab, idx) => /* @__PURE__ */ import_react31.default.createElement(
+  return /* @__PURE__ */ import_react31.default.createElement("div", { className: "w-full max-w-3xl mx-auto flex flex-col animate-in fade-in duration-300 relative" }, sortedCards.length > 1 && /* @__PURE__ */ import_react31.default.createElement("div", { className: "flex items-center justify-center mb-6 w-full px-2 gap-3" }, /* @__PURE__ */ import_react31.default.createElement("div", { className: "flex items-center bg-white rounded-full p-1 max-w-full overflow-x-auto custom-scrollbar" }, sortedCards.map((tab, idx) => /* @__PURE__ */ import_react31.default.createElement(
     "button",
     {
       key: tab.id,
@@ -2137,7 +2087,14 @@ var UniversalCardPage = ({
       className: "absolute inset-0 bg-cover bg-center",
       style: { backgroundImage: `url(${activeCard.cardBgSrc})` }
     }
-  ), /* @__PURE__ */ import_react31.default.createElement("div", { className: "relative z-10 w-full h-full p-5 flex flex-col justify-between" }, /* @__PURE__ */ import_react31.default.createElement("div", { className: "flex items-start justify-end w-full gap-4" }, activeCard.networkLogoSrc && /* @__PURE__ */ import_react31.default.createElement("img", { src: activeCard.networkLogoSrc, alt: "Network Logo", className: "h-7 w-auto max-w-20 object-contain opacity-90" })), /* @__PURE__ */ import_react31.default.createElement("div", { className: "flex justify-between items-end w-full" }, /* @__PURE__ */ import_react31.default.createElement("div", { className: "flex flex-col gap-1" }, /* @__PURE__ */ import_react31.default.createElement("span", { className: `text-[10px] tracking-widest ${activeCard.contentDark ? "text-black/60" : "text-white/70"} drop-shadow-sm` }, "Balance"), /* @__PURE__ */ import_react31.default.createElement("span", { className: `text-[16px] tracking-widest  ${activeCard.contentDark ? "text-black" : "text-white"} drop-shadow-sm` }, activeCard.balance))))))), /* @__PURE__ */ import_react31.default.createElement("div", { className: "w-full flex flex-col gap-4 mt-1" }, /* @__PURE__ */ import_react31.default.createElement("div", { className: "w-full bg-white rounded-2xl overflow-hidden" }, /* @__PURE__ */ import_react31.default.createElement(
+  ), /* @__PURE__ */ import_react31.default.createElement("div", { className: "relative z-10 w-full h-full p-5 flex flex-col justify-between" }, /* @__PURE__ */ import_react31.default.createElement("div", { className: "flex items-start justify-end w-full gap-4" }), /* @__PURE__ */ import_react31.default.createElement("div", { className: "flex justify-between items-end w-full" }, /* @__PURE__ */ import_react31.default.createElement("div", { className: "flex flex-col gap-1" }, /* @__PURE__ */ import_react31.default.createElement("span", { className: `text-[10px] tracking-widest ${activeCard.contentDark ? "text-black/60" : "text-white/70"} drop-shadow-sm` }, "Balance"), /* @__PURE__ */ import_react31.default.createElement("span", { className: `text-[16px] tracking-widest  ${activeCard.contentDark ? "text-black" : "text-white"} drop-shadow-sm` }, activeCard.balance)), activeCard.networkLogoSrc && /* @__PURE__ */ import_react31.default.createElement(
+    "img",
+    {
+      src: activeCard.networkLogoSrc,
+      alt: "Network Logo",
+      className: "h-7 w-auto max-w-20 object-contain opacity-90"
+    }
+  )))))), /* @__PURE__ */ import_react31.default.createElement("div", { className: "w-full flex flex-col gap-4 mt-1" }, /* @__PURE__ */ import_react31.default.createElement("div", { className: "w-full bg-white rounded-2xl overflow-hidden" }, /* @__PURE__ */ import_react31.default.createElement(
     MenuRow,
     {
       icon: import_core_free_icons11.PlusSignIcon,
@@ -2330,10 +2287,10 @@ var UniversalProfilePage = ({
   ), /* @__PURE__ */ import_react33.default.createElement(
     MenuRow2,
     {
-      icon: import_core_free_icons12.ShieldUserIcon,
-      title: "Web3 Profile",
-      subtitle: "Manage web3 profile",
-      onClick: onDefiTap
+      icon: import_core_free_icons12.CrownIcon,
+      title: "My Referrals",
+      subtitle: "Referral & Rewards",
+      onClick: onExportTap
     }
   ), /* @__PURE__ */ import_react33.default.createElement(
     MenuRow2,
@@ -2352,14 +2309,6 @@ var UniversalProfilePage = ({
       subtitle: "Account Verifications",
       onClick: onVerificationsTap
     }
-  ), /* @__PURE__ */ import_react33.default.createElement(
-    MenuRow2,
-    {
-      icon: import_core_free_icons12.CrownIcon,
-      title: "My Referrals",
-      subtitle: "Referral & Rewards",
-      onClick: onExportTap
-    }
   ), /* @__PURE__ */ import_react33.default.createElement(
     MenuRow2,
     {

package/dist/index.mjs

@@ -1557,11 +1557,9 @@ var UniversalTransactionPage = ({
 };
 
 // src/components/UniversalHomeView.tsx
-import React16, { useState as useState10, useEffect as useEffect7 } from "react";
+import React16, { useState as useState10 } from "react";
 import { HugeiconsIcon as HugeiconsIcon10 } from "@hugeicons/react";
 import {
-  ViewOffSlashIcon,
-  ViewIcon,
   Loading03Icon as Loading03Icon5,
   Notification01Icon,
   ArrowLeft01Icon as ArrowLeft01Icon4,
@@ -1572,10 +1570,6 @@ import {
 var UniversalHomeView = ({
   fullName = "",
   avatarSrc,
-  balanceLabel = "Pending Balance",
-  balanceAmount,
-  balanceCurrency = "$",
-  calculatorAction,
   buyCryptoAction,
   referralAction,
   notifications = [],
@@ -1588,44 +1582,12 @@ var UniversalHomeView = ({
   customContent,
   transactionsProps
 }) => {
-  const [displayAmount, setDisplayAmount] = useState10("0.00");
-  const [isBalanceHidden, setIsBalanceHidden] = useState10(false);
   const [isAvatarLoaded, setIsAvatarLoaded] = useState10(false);
   const [showNotifDialog, setShowNotifDialog] = useState10(false);
   const [selectedNotif, setSelectedNotif] = useState10(null);
   const fallbackAvatarUrl = `/api/avatar/?name=${encodeURIComponent(fullName || " ")}&background=ffffff&color=000000&size=200&font-size=0.33`;
   const finalAvatarSrc = avatarSrc || fallbackAvatarUrl;
   const hasUnreadNotifs = notifications.some((n) => !n.isRead);
-  useEffect7(() => {
-    const target = parseFloat(balanceAmount.replace(/,/g, ""));
-    if (isNaN(target)) {
-      setDisplayAmount(balanceAmount);
-      return;
-    }
-    const decimalMatch = balanceAmount.match(/\.(\d+)/);
-    const fractionDigits = decimalMatch ? decimalMatch[1].length : 0;
-    let startTimestamp = null;
-    const duration = 1e3;
-    const step = (timestamp) => {
-      if (!startTimestamp) startTimestamp = timestamp;
-      const progress = Math.min((timestamp - startTimestamp) / duration, 1);
-      const easeProgress = progress === 1 ? 1 : 1 - Math.pow(2, -10 * progress);
-      const currentCount = easeProgress * target;
-      setDisplayAmount(currentCount.toLocaleString("en-US", {
-        minimumFractionDigits: fractionDigits,
-        maximumFractionDigits: fractionDigits
-      }));
-      if (progress < 1) requestAnimationFrame(step);
-      else {
-        setDisplayAmount(target.toLocaleString("en-US", {
-          minimumFractionDigits: fractionDigits,
-          maximumFractionDigits: fractionDigits
-        }));
-      }
-    };
-    requestAnimationFrame(step);
-  }, [balanceAmount]);
-  const [intPart, decPart] = displayAmount.includes(".") ? displayAmount.split(".") : [displayAmount, ""];
   return /* @__PURE__ */ React16.createElement("div", { className: "w-full max-w-3xl mx-auto flex flex-col animate-in fade-in duration-300 relative" }, /* @__PURE__ */ React16.createElement("div", { className: "flex items-center justify-between w-full pb-4 " }, /* @__PURE__ */ React16.createElement("div", { className: "w-10 h-10 rounded-full bg-white p-0.75 flex items-center justify-center " }, /* @__PURE__ */ React16.createElement("div", { className: "relative w-full h-full rounded-full overflow-hidden bg-neutral-100 flex items-center justify-center" }, !isAvatarLoaded && /* @__PURE__ */ React16.createElement("div", { className: "absolute inset-0 flex items-center justify-center z-10 bg-neutral-100" }, /* @__PURE__ */ React16.createElement(HugeiconsIcon10, { icon: Loading03Icon5, size: 16, className: "animate-spin text-black" })), /* @__PURE__ */ React16.createElement(
     "img",
     {
@@ -1645,27 +1607,13 @@ var UniversalHomeView = ({
     },
     /* @__PURE__ */ React16.createElement(HugeiconsIcon10, { icon: Notification01Icon, size: 20, className: "text-black" }),
     hasUnreadNotifs && /* @__PURE__ */ React16.createElement("span", { className: "absolute top-2.5 right-2.5 w-2 h-2 bg-red-500 rounded-full border border-white" })
-  )), /* @__PURE__ */ React16.createElement("div", { className: "w-full pb-6 flex flex-col gap-4" }, /* @__PURE__ */ React16.createElement("div", { className: "bg-linear-to-tl from-[#4a4a4a] via-[#0b0e14] to-[#03060b] rounded-2xl p-6 relative overflow-hidden flex flex-col justify-center" }, /* @__PURE__ */ React16.createElement("div", { className: "relative z-10 flex flex-col items-start text-left w-full" }, /* @__PURE__ */ React16.createElement("div", { className: "flex items-center gap-2 mb-2" }, /* @__PURE__ */ React16.createElement("span", { className: "text-[12px] text-neutral-300" }, balanceLabel), /* @__PURE__ */ React16.createElement(
-    "button",
-    {
-      onClick: () => setIsBalanceHidden(!isBalanceHidden),
-      className: "text-neutral-400 hover:text-white transition-colors outline-none"
-    },
-    /* @__PURE__ */ React16.createElement(HugeiconsIcon10, { icon: isBalanceHidden ? ViewIcon : ViewOffSlashIcon, size: 16 })
-  )), /* @__PURE__ */ React16.createElement("p", { className: `text-2xl text-white tracking-tight mb-6 tabular-nums flex items-baseline transition-all duration-300 ${isBalanceHidden ? "blur-sm opacity-40 select-none" : ""}` }, /* @__PURE__ */ React16.createElement("span", { className: "text-lg text-neutral-400 mr-1" }, balanceCurrency), intPart, decPart && /* @__PURE__ */ React16.createElement("span", { className: "text-lg text-neutral-400" }, ".", decPart)), /* @__PURE__ */ React16.createElement("div", { className: "flex items-center w-full" }, calculatorAction && /* @__PURE__ */ React16.createElement(
-    "button",
-    {
-      onClick: calculatorAction.onClick,
-      className: "px-6 py-2 bg-transparent border border-white/20 text-white truncate text-[12px] rounded-full transition-colors hover:bg-white/10 outline-none text-center"
-    },
-    calculatorAction.label || "Rate Calculator"
-  )))), /* @__PURE__ */ React16.createElement("div", { className: "grid grid-cols-2 gap-2" }, /* @__PURE__ */ React16.createElement(
+  )), /* @__PURE__ */ React16.createElement("div", { className: "w-full pb-6 flex flex-col gap-4" }, /* @__PURE__ */ React16.createElement("div", { className: "grid grid-cols-2 gap-2" }, /* @__PURE__ */ React16.createElement(
     "div",
     {
       onClick: buyCryptoAction?.onClick,
       className: "bg-[#143731] rounded-2xl p-5 relative overflow-hidden flex flex-col h-32 sm:h-36 cursor-pointer hover:opacity-90 transition-opacity"
     },
-    /* @__PURE__ */ React16.createElement("div", { className: "relative z-10 flex flex-col h-full justify-between" }, /* @__PURE__ */ React16.createElement("p", { className: "text-[15px] sm:text-[15px] text-white " }, "Buy Crypto"), /* @__PURE__ */ React16.createElement("div", { className: "w-8 h-8 rounded-full bg-white/10 border border-white/10 flex items-center justify-center" }, /* @__PURE__ */ React16.createElement(HugeiconsIcon10, { icon: ArrowUpRight01Icon2, size: 16, className: "text-white" }))),
+    /* @__PURE__ */ React16.createElement("div", { className: "relative z-10 flex flex-col h-full justify-between" }, /* @__PURE__ */ React16.createElement("p", { className: "text-[15px] sm:text-[15px] text-white leading-tight font-medium" }, "Buy", /* @__PURE__ */ React16.createElement("br", null), /* @__PURE__ */ React16.createElement("span", { className: "text-white/70" }, "Crypto")), /* @__PURE__ */ React16.createElement("div", { className: "w-8 h-8 rounded-full bg-white/10  flex items-center justify-center" }, /* @__PURE__ */ React16.createElement(HugeiconsIcon10, { icon: ArrowUpRight01Icon2, size: 16, className: "text-white" }))),
     /* @__PURE__ */ React16.createElement(
       "img",
       {
@@ -1680,7 +1628,7 @@ var UniversalHomeView = ({
       onClick: referralAction?.onClick,
       className: "bg-[#ceff8a] rounded-2xl p-5 relative overflow-hidden flex flex-col h-32 sm:h-36 cursor-pointer hover:opacity-90 transition-opacity"
     },
-    /* @__PURE__ */ React16.createElement("div", { className: "relative z-10 flex flex-col h-full justify-between" }, /* @__PURE__ */ React16.createElement("p", { className: "text-[15px] sm:text-[15px] text-black " }, "Referral"), /* @__PURE__ */ React16.createElement("div", { className: "w-8 h-8 rounded-full bg-black/5 border border-black/5 flex items-center justify-center" }, /* @__PURE__ */ React16.createElement(HugeiconsIcon10, { icon: ArrowRight01Icon2, size: 16, className: "text-black" }))),
+    /* @__PURE__ */ React16.createElement("div", { className: "relative z-10 flex flex-col h-full justify-between" }, /* @__PURE__ */ React16.createElement("p", { className: "text-[15px] sm:text-[15px] text-black leading-tight font-medium" }, "My", /* @__PURE__ */ React16.createElement("br", null), /* @__PURE__ */ React16.createElement("span", { className: "text-black/60" }, "Rewards")), /* @__PURE__ */ React16.createElement("div", { className: "w-8 h-8 rounded-full bg-black/5  flex items-center justify-center" }, /* @__PURE__ */ React16.createElement(HugeiconsIcon10, { icon: ArrowRight01Icon2, size: 16, className: "text-black" }))),
     /* @__PURE__ */ React16.createElement(
       "img",
       {
@@ -1694,7 +1642,7 @@ var UniversalHomeView = ({
     {
       ...transactionsProps,
       hideControls: true,
-      hideBalanceAmounts: isBalanceHidden,
+      hideBalanceAmounts: false,
       hidePagination: true
     }
   )), showNotifDialog && /* @__PURE__ */ React16.createElement("div", { className: "fixed inset-0 z-120 flex items-center justify-center p-4 pointer-events-auto" }, /* @__PURE__ */ React16.createElement("div", { className: "absolute inset-0 bg-black/30", onClick: () => setShowNotifDialog(false) }), /* @__PURE__ */ React16.createElement("div", { className: "relative w-full max-w-sm bg-white rounded-2xl flex flex-col overflow-hidden shadow-2xl animate-in zoom-in-95 duration-200 h-[80vh]" }, /* @__PURE__ */ React16.createElement("div", { className: "flex items-center justify-between p-5 shrink-0 " }, selectedNotif ? /* @__PURE__ */ React16.createElement("button", { onClick: () => setSelectedNotif(null), className: "text-neutral-400 hover:text-black transition-colors outline-none flex items-center gap-2 text-[11px] tracking-widest " }, /* @__PURE__ */ React16.createElement(HugeiconsIcon10, { icon: ArrowLeft01Icon4, size: 14 }), " Back") : /* @__PURE__ */ React16.createElement("h3", { className: "text-[15px] text-black tracking-tight flex items-center gap-2" }, "Notifications", isNotifsLoading && /* @__PURE__ */ React16.createElement(HugeiconsIcon10, { icon: Loading03Icon5, size: 14, className: "animate-spin text-neutral-400" })), /* @__PURE__ */ React16.createElement("button", { onClick: () => setShowNotifDialog(false), className: "text-neutral-400 hover:text-black transition-colors outline-none" }, /* @__PURE__ */ React16.createElement(HugeiconsIcon10, { icon: CancelCircleIcon3, size: 18 }))), /* @__PURE__ */ React16.createElement("div", { className: "flex-1 overflow-y-auto custom-scrollbar p-2" }, selectedNotif ? /* @__PURE__ */ React16.createElement("div", { className: "p-4 text-left" }, /* @__PURE__ */ React16.createElement("h4", { className: "text-[14px] text-black mb-1 " }, selectedNotif.title), /* @__PURE__ */ React16.createElement("span", { className: "text-[10px] text-neutral-400 tracking-widest mb-4 block " }, formatNotifDate(selectedNotif.createdAt)), /* @__PURE__ */ React16.createElement("p", { className: "text-[12px] text-neutral-600 leading-relaxed whitespace-pre-wrap" }, selectedNotif.message)) : /* @__PURE__ */ React16.createElement("div", { className: "flex flex-col divide-y divide-neutral-50/50" }, notifications?.length === 0 && !isNotifsLoading ? /* @__PURE__ */ React16.createElement("div", { className: "p-8 text-center text-xs text-neutral-400" }, "You have no notifications.") : notifications?.map((notif) => /* @__PURE__ */ React16.createElement(
@@ -2015,7 +1963,7 @@ var UniversalWalletPage = ({
 };
 
 // src/components/UniversalCardPage.tsx
-import React19, { useState as useState12, useEffect as useEffect8 } from "react";
+import React19, { useState as useState12, useEffect as useEffect7 } from "react";
 import { useRouter } from "next/navigation";
 import toast6 from "react-hot-toast";
 import { HugeiconsIcon as HugeiconsIcon13 } from "@hugeicons/react";
@@ -2023,7 +1971,7 @@ import {
   SnowIcon,
   Delete02Icon,
   ArrowRight01Icon as ArrowRight01Icon3,
-  ViewOffSlashIcon as ViewOffSlashIcon2,
+  ViewOffSlashIcon,
   Loading03Icon as Loading03Icon8,
   CancelCircleIcon as CancelCircleIcon5,
   Copy01Icon as Copy01Icon3,
@@ -2051,7 +1999,7 @@ var UniversalCardPage = ({
   const [isFreezing, setIsFreezing] = useState12(false);
   const [showDeleteDialog, setShowDeleteDialog] = useState12(false);
   const [isDeleting, setIsDeleting] = useState12(false);
-  useEffect8(() => {
+  useEffect7(() => {
     setIsBgLoaded(false);
     if (!activeCard?.cardBgSrc) return;
     const img = new Image();
@@ -2085,9 +2033,9 @@ var UniversalCardPage = ({
     setShowDeleteDialog(false);
   };
   const formatTabLabel = (type) => {
-    return type.charAt(0).toUpperCase() + type.slice(1).toLowerCase();
+    return type.charAt(0).toUpperCase() + type.slice(1).toLowerCase() + " Card";
   };
-  return /* @__PURE__ */ React19.createElement("div", { className: "w-full max-w-3xl mx-auto flex flex-col animate-in fade-in duration-300 relative" }, /* @__PURE__ */ React19.createElement("h1", { className: "text-2xl mt-2 text-black tracking-tight mb-2 text-center" }, "My Cards"), sortedCards.length > 1 && /* @__PURE__ */ React19.createElement("div", { className: "flex items-center justify-center mb-6 w-full px-2 gap-3" }, /* @__PURE__ */ React19.createElement("div", { className: "flex items-center bg-white rounded-full p-1 max-w-full overflow-x-auto custom-scrollbar" }, sortedCards.map((tab, idx) => /* @__PURE__ */ React19.createElement(
+  return /* @__PURE__ */ React19.createElement("div", { className: "w-full max-w-3xl mx-auto flex flex-col animate-in fade-in duration-300 relative" }, sortedCards.length > 1 && /* @__PURE__ */ React19.createElement("div", { className: "flex items-center justify-center mb-6 w-full px-2 gap-3" }, /* @__PURE__ */ React19.createElement("div", { className: "flex items-center bg-white rounded-full p-1 max-w-full overflow-x-auto custom-scrollbar" }, sortedCards.map((tab, idx) => /* @__PURE__ */ React19.createElement(
     "button",
     {
       key: tab.id,
@@ -2111,7 +2059,14 @@ var UniversalCardPage = ({
       className: "absolute inset-0 bg-cover bg-center",
       style: { backgroundImage: `url(${activeCard.cardBgSrc})` }
     }
-  ), /* @__PURE__ */ React19.createElement("div", { className: "relative z-10 w-full h-full p-5 flex flex-col justify-between" }, /* @__PURE__ */ React19.createElement("div", { className: "flex items-start justify-end w-full gap-4" }, activeCard.networkLogoSrc && /* @__PURE__ */ React19.createElement("img", { src: activeCard.networkLogoSrc, alt: "Network Logo", className: "h-7 w-auto max-w-20 object-contain opacity-90" })), /* @__PURE__ */ React19.createElement("div", { className: "flex justify-between items-end w-full" }, /* @__PURE__ */ React19.createElement("div", { className: "flex flex-col gap-1" }, /* @__PURE__ */ React19.createElement("span", { className: `text-[10px] tracking-widest ${activeCard.contentDark ? "text-black/60" : "text-white/70"} drop-shadow-sm` }, "Balance"), /* @__PURE__ */ React19.createElement("span", { className: `text-[16px] tracking-widest  ${activeCard.contentDark ? "text-black" : "text-white"} drop-shadow-sm` }, activeCard.balance))))))), /* @__PURE__ */ React19.createElement("div", { className: "w-full flex flex-col gap-4 mt-1" }, /* @__PURE__ */ React19.createElement("div", { className: "w-full bg-white rounded-2xl overflow-hidden" }, /* @__PURE__ */ React19.createElement(
+  ), /* @__PURE__ */ React19.createElement("div", { className: "relative z-10 w-full h-full p-5 flex flex-col justify-between" }, /* @__PURE__ */ React19.createElement("div", { className: "flex items-start justify-end w-full gap-4" }), /* @__PURE__ */ React19.createElement("div", { className: "flex justify-between items-end w-full" }, /* @__PURE__ */ React19.createElement("div", { className: "flex flex-col gap-1" }, /* @__PURE__ */ React19.createElement("span", { className: `text-[10px] tracking-widest ${activeCard.contentDark ? "text-black/60" : "text-white/70"} drop-shadow-sm` }, "Balance"), /* @__PURE__ */ React19.createElement("span", { className: `text-[16px] tracking-widest  ${activeCard.contentDark ? "text-black" : "text-white"} drop-shadow-sm` }, activeCard.balance)), activeCard.networkLogoSrc && /* @__PURE__ */ React19.createElement(
+    "img",
+    {
+      src: activeCard.networkLogoSrc,
+      alt: "Network Logo",
+      className: "h-7 w-auto max-w-20 object-contain opacity-90"
+    }
+  )))))), /* @__PURE__ */ React19.createElement("div", { className: "w-full flex flex-col gap-4 mt-1" }, /* @__PURE__ */ React19.createElement("div", { className: "w-full bg-white rounded-2xl overflow-hidden" }, /* @__PURE__ */ React19.createElement(
     MenuRow,
     {
       icon: PlusSignIcon2,
@@ -2125,7 +2080,7 @@ var UniversalCardPage = ({
   ), /* @__PURE__ */ React19.createElement(
     MenuRow,
     {
-      icon: ViewOffSlashIcon2,
+      icon: ViewOffSlashIcon,
       title: "Reveal Information",
       subtitle: "Show secure card details",
       onClick: () => {
@@ -2185,7 +2140,7 @@ var CardInfoDialog = ({ isOpen, onClose, cardDetails }) => {
 var FundCardDialog = ({ isOpen, onClose, onSubmit }) => {
   const [amount, setAmount] = useState12("");
   const [isProcessing, setIsProcessing] = useState12(false);
-  useEffect8(() => {
+  useEffect7(() => {
     if (isOpen) {
       setAmount("");
     }
@@ -2223,7 +2178,6 @@ import { HugeiconsIcon as HugeiconsIcon14 } from "@hugeicons/react";
 import {
   UserIcon,
   LockKeyIcon as LockKeyIcon2,
-  ShieldUserIcon,
   MessageQuestionIcon,
   UserIdVerificationIcon,
   CrownIcon,
@@ -2316,10 +2270,10 @@ var UniversalProfilePage = ({
   ), /* @__PURE__ */ React20.createElement(
     MenuRow2,
     {
-      icon: ShieldUserIcon,
-      title: "Web3 Profile",
-      subtitle: "Manage web3 profile",
-      onClick: onDefiTap
+      icon: CrownIcon,
+      title: "My Referrals",
+      subtitle: "Referral & Rewards",
+      onClick: onExportTap
     }
   ), /* @__PURE__ */ React20.createElement(
     MenuRow2,
@@ -2338,14 +2292,6 @@ var UniversalProfilePage = ({
       subtitle: "Account Verifications",
       onClick: onVerificationsTap
     }
-  ), /* @__PURE__ */ React20.createElement(
-    MenuRow2,
-    {
-      icon: CrownIcon,
-      title: "My Referrals",
-      subtitle: "Referral & Rewards",
-      onClick: onExportTap
-    }
   ), /* @__PURE__ */ React20.createElement(
     MenuRow2,
     {
@@ -2474,7 +2420,7 @@ var UniversalSidebar = ({
 };
 
 // src/components/HeroSection.tsx
-import React23, { useState as useState16, useEffect as useEffect9, useRef as useRef4 } from "react";
+import React23, { useState as useState16, useEffect as useEffect8, useRef as useRef4 } from "react";
 import Link6 from "next/link";
 import Image3 from "next/image";
 
@@ -2589,7 +2535,7 @@ var HeroSection = ({
   const [isAnimating, setIsAnimating] = useState16(false);
   const [isWaitlistOpen, setIsWaitlistOpen] = useState16(false);
   const titleRef = useRef4(null);
-  useEffect9(() => {
+  useEffect8(() => {
     const observer = new IntersectionObserver(
       ([entry]) => {
         if (entry.isIntersecting) {
@@ -2682,12 +2628,12 @@ var HeroSection = ({
 };
 
 // src/components/AppBento2.tsx
-import React24, { useState as useState17, useEffect as useEffect10, useRef as useRef5 } from "react";
+import React24, { useState as useState17, useEffect as useEffect9, useRef as useRef5 } from "react";
 import { HugeiconsIcon as HugeiconsIcon16 } from "@hugeicons/react";
 var AppBento2 = ({ tagline, headline, features }) => {
   const [isAnimating, setIsAnimating] = useState17(false);
   const titleRef = useRef5(null);
-  useEffect10(() => {
+  useEffect9(() => {
     const observer = new IntersectionObserver(
       ([entry]) => {
         if (entry.isIntersecting) {
@@ -2963,7 +2909,7 @@ var MenuRow3 = ({
 );
 
 // src/components/FeatureScroll.tsx
-import React26, { useRef as useRef6, useState as useState19, useEffect as useEffect11 } from "react";
+import React26, { useRef as useRef6, useState as useState19, useEffect as useEffect10 } from "react";
 import Image4 from "next/image";
 import { HugeiconsIcon as HugeiconsIcon18 } from "@hugeicons/react";
 import { ArrowLeft01Icon as ArrowLeft01Icon7, ArrowRight01Icon as ArrowRight01Icon6, Loading03Icon as Loading03Icon11 } from "@hugeicons/core-free-icons";
@@ -3017,7 +2963,7 @@ var FeatureScroll = ({ tagline, headline, features }) => {
       setCanScrollRight(scrollLeft < scrollWidth - clientWidth - 2);
     }
   };
-  useEffect11(() => {
+  useEffect10(() => {
     checkScroll();
     window.addEventListener("resize", checkScroll);
     return () => window.removeEventListener("resize", checkScroll);
@@ -3098,7 +3044,7 @@ var PlatformFeatures = ({
 };
 
 // src/components/ManagedDocument.tsx
-import React28, { useState as useState20, useEffect as useEffect12, useRef as useRef7 } from "react";
+import React28, { useState as useState20, useEffect as useEffect11, useRef as useRef7 } from "react";
 var ManagedDocument = ({
   tagline,
   title,
@@ -3108,7 +3054,7 @@ var ManagedDocument = ({
 }) => {
   const [isAnimating, setIsAnimating] = useState20(false);
   const titleRef = useRef7(null);
-  useEffect12(() => {
+  useEffect11(() => {
     const observer = new IntersectionObserver(
       ([entry]) => {
         if (entry.isIntersecting) {
@@ -3148,11 +3094,11 @@ var ManagedDocument = ({
 };
 
 // src/components/ManagedContactBlock.tsx
-import React29, { useState as useState21, useEffect as useEffect13 } from "react";
+import React29, { useState as useState21, useEffect as useEffect12 } from "react";
 import { HugeiconsIcon as HugeiconsIcon20 } from "@hugeicons/react";
 var SecureEmail = ({ user, domain, className }) => {
   const [isMounted, setIsMounted] = useState21(false);
-  useEffect13(() => {
+  useEffect12(() => {
     setIsMounted(true);
   }, []);
   if (!isMounted) {
@@ -3213,7 +3159,7 @@ var ManagedContactBlock = ({
 };
 
 // src/components/ManagedPricingBlock.tsx
-import React30, { useState as useState22, useEffect as useEffect14, useRef as useRef8 } from "react";
+import React30, { useState as useState22, useEffect as useEffect13, useRef as useRef8 } from "react";
 import Link7 from "next/link";
 import Image5 from "next/image";
 var CheckIcon = ({ className = "" }) => /* @__PURE__ */ React30.createElement("svg", { viewBox: "0 0 24 24", fill: "none", className: `w-4 h-4 shrink-0 ${className}`, xmlns: "http://www.w3.org/2000/svg" }, /* @__PURE__ */ React30.createElement("circle", { cx: "12", cy: "12", r: "10", fill: "black" }), /* @__PURE__ */ React30.createElement("path", { d: "M8 12L11 15L16 9", stroke: "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }));
@@ -3227,7 +3173,7 @@ var ManagedPricingBlock = ({
   const [isAnimating, setIsAnimating] = useState22(false);
   const [activeTabIndex, setActiveTabIndex] = useState22(0);
   const titleRef = useRef8(null);
-  useEffect14(() => {
+  useEffect13(() => {
     const observer = new IntersectionObserver(
       ([entry]) => {
         if (entry.isIntersecting) {
@@ -3442,14 +3388,14 @@ var ManagedNewsletterSplitBlock = ({
 };
 
 // src/components/PortfolioHero.tsx
-import React34, { useEffect as useEffect15, useRef as useRef9 } from "react";
+import React34, { useEffect as useEffect14, useRef as useRef9 } from "react";
 import Link8 from "next/link";
 import Image8 from "next/image";
 import { HugeiconsIcon as HugeiconsIcon22 } from "@hugeicons/react";
 import { ArrowRight01Icon as ArrowRight01Icon7 } from "@hugeicons/core-free-icons";
 var useScrollAnimation = () => {
   const elementRef = useRef9(null);
-  useEffect15(() => {
+  useEffect14(() => {
     const el = elementRef.current;
     if (!el) return;
     const observer = new IntersectionObserver(
@@ -3577,7 +3523,7 @@ var GifFeatureCard = ({
 };
 
 // src/components/MedicalFeatureStatsBlock.tsx
-import React36, { useState as useState24, useEffect as useEffect16, useRef as useRef10 } from "react";
+import React36, { useState as useState24, useEffect as useEffect15, useRef as useRef10 } from "react";
 import Image10 from "next/image";
 var MedicalFeatureStatsBlock = ({
   bottomHeadline,
@@ -3588,7 +3534,7 @@ var MedicalFeatureStatsBlock = ({
 }) => {
   const [isAnimating, setIsAnimating] = useState24(false);
   const titleRef = useRef10(null);
-  useEffect16(() => {
+  useEffect15(() => {
     const observer = new IntersectionObserver(
       ([entry]) => {
         if (entry.isIntersecting) {
@@ -4293,7 +4239,7 @@ var UniversalCardActionPage = ({
 };
 
 // src/components/PinDialerBottomSheet.tsx
-import React44, { useState as useState30, useEffect as useEffect17 } from "react";
+import React44, { useState as useState30, useEffect as useEffect16 } from "react";
 import { HugeiconsIcon as HugeiconsIcon30 } from "@hugeicons/react";
 import { CancelCircleIcon as CancelCircleIcon8 } from "@hugeicons/core-free-icons";
 var PinDialerBottomSheet = ({
@@ -4304,7 +4250,7 @@ var PinDialerBottomSheet = ({
   onComplete
 }) => {
   const [pin, setPin] = useState30("");
-  useEffect17(() => {
+  useEffect16(() => {
     setPin("");
   }, [isOpen]);
   const handleSubmit = (e) => {

package/package.json

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