@retinalabsllc/zairusjs 4.1.0 → 5.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +22 -22
- package/dist/index.mjs +23 -23
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -2118,11 +2118,11 @@ var UniversalSidebar = ({
|
|
|
2118
2118
|
"div",
|
|
2119
2119
|
{
|
|
2120
2120
|
onClick: handleCopyWallet,
|
|
2121
|
-
className: "flex items-center gap-2 bg-white rounded-full p-1 pr-3
|
|
2121
|
+
className: "flex items-center gap-2 bg-white rounded-full p-1 pr-3 cursor-pointer hover:bg-neutral-50 transition-colors",
|
|
2122
2122
|
title: "Copy Address"
|
|
2123
2123
|
},
|
|
2124
2124
|
web3Avatar ? /* @__PURE__ */ import_react39.default.createElement("img", { src: web3Avatar, alt: "Avatar", className: "w-6 h-6 rounded-full bg-neutral-100 object-cover shrink-0" }) : /* @__PURE__ */ import_react39.default.createElement("div", { className: "w-6 h-6 rounded-full bg-neutral-100 flex items-center justify-center text-[9px] text-black shrink-0 " }, userInitials.substring(0, 2)),
|
|
2125
|
-
/* @__PURE__ */ import_react39.default.createElement("span", { className: "text-[11px] text-black
|
|
2125
|
+
/* @__PURE__ */ import_react39.default.createElement("span", { className: "text-[11px] text-black truncate max-w-20 sm:max-w-37.5" }, web3Address)
|
|
2126
2126
|
), notifications !== void 0 && /* @__PURE__ */ import_react39.default.createElement(
|
|
2127
2127
|
"button",
|
|
2128
2128
|
{
|
|
@@ -2130,15 +2130,15 @@ var UniversalSidebar = ({
|
|
|
2130
2130
|
setShowNotifDialog(true);
|
|
2131
2131
|
setSelectedNotif(null);
|
|
2132
2132
|
},
|
|
2133
|
-
className: "relative w-10 h-10 shrink-0 bg-white rounded-full flex items-center justify-center text-neutral-600 hover:text-black hover:bg-neutral-50 transition-all duration-300 outline-none
|
|
2133
|
+
className: "relative w-10 h-10 shrink-0 bg-white rounded-full flex items-center justify-center text-neutral-600 hover:text-black hover:bg-neutral-50 transition-all duration-300 outline-none"
|
|
2134
2134
|
},
|
|
2135
|
-
/* @__PURE__ */ import_react39.default.createElement(import_react40.HugeiconsIcon, { icon: import_core_free_icons9.
|
|
2135
|
+
/* @__PURE__ */ import_react39.default.createElement(import_react40.HugeiconsIcon, { icon: import_core_free_icons9.Notification01Icon, size: 18 }),
|
|
2136
2136
|
unreadNotificationsCount > 0 && /* @__PURE__ */ import_react39.default.createElement("span", { className: "absolute top-2 right-2.5 w-2 h-2 bg-blue-500 rounded-full border border-white" })
|
|
2137
2137
|
), showBackButton && /* @__PURE__ */ import_react39.default.createElement(
|
|
2138
2138
|
import_link9.default,
|
|
2139
2139
|
{
|
|
2140
2140
|
href: backUrl,
|
|
2141
|
-
className: "w-10 h-10 shrink-0 bg-white rounded-full flex items-center justify-center text-neutral-600 hover:text-black hover:bg-neutral-50 transition-all duration-300 outline-none
|
|
2141
|
+
className: "w-10 h-10 shrink-0 bg-white rounded-full flex items-center justify-center text-neutral-600 hover:text-black hover:bg-neutral-50 transition-all duration-300 outline-none",
|
|
2142
2142
|
"aria-label": "Go Back"
|
|
2143
2143
|
},
|
|
2144
2144
|
/* @__PURE__ */ import_react39.default.createElement(import_react40.HugeiconsIcon, { icon: import_core_free_icons9.ArrowLeft01Icon, size: 18 })
|
|
@@ -2167,7 +2167,7 @@ var UniversalSidebar = ({
|
|
|
2167
2167
|
${isCollapsed ? "md:w-16 w-64" : "w-64"}
|
|
2168
2168
|
`
|
|
2169
2169
|
},
|
|
2170
|
-
/* @__PURE__ */ import_react39.default.createElement("div", { className: `flex items-center shrink-0 p-5 ${isCollapsed && !isMobileOpen ? "justify-center min-h-18" : "justify-between"}` }, /* @__PURE__ */ import_react39.default.createElement("div", { className: `flex items-center gap-3 text-left ${!isCollapsed || isMobileOpen ? "w-full" : ""}` }, /* @__PURE__ */ import_react39.default.createElement("div", { className: "w-9 h-9 rounded-full flex items-center justify-center shrink-0
|
|
2170
|
+
/* @__PURE__ */ import_react39.default.createElement("div", { className: `flex items-center shrink-0 p-5 ${isCollapsed && !isMobileOpen ? "justify-center min-h-18" : "justify-between"}` }, /* @__PURE__ */ import_react39.default.createElement("div", { className: `flex items-center gap-3 text-left ${!isCollapsed || isMobileOpen ? "w-full" : ""}` }, /* @__PURE__ */ import_react39.default.createElement("div", { className: "w-9 h-9 bg-[#1f26d6] rounded-full flex items-center justify-center shrink-0" }, /* @__PURE__ */ import_react39.default.createElement("h3", { className: "text-[10px] text-white uppercase tracking-wider" }, userInitials.substring(0, 2))), (!isCollapsed || isMobileOpen) && /* @__PURE__ */ import_react39.default.createElement("div", { className: "flex flex-col justify-center min-w-0 pr-2 flex-1" }, /* @__PURE__ */ import_react39.default.createElement("span", { className: "text-[13px] text-black leading-none truncate tracking-wide mb-1" }, userName), userTag && /* @__PURE__ */ import_react39.default.createElement("span", { className: "text-[9px] text-[#1f26d6] truncate tracking-[0.2em] leading-none " }, userTag))), /* @__PURE__ */ import_react39.default.createElement("div", { className: "md:hidden flex shrink-0" }, /* @__PURE__ */ import_react39.default.createElement(
|
|
2171
2171
|
"button",
|
|
2172
2172
|
{
|
|
2173
2173
|
onClick: closeMobile,
|
|
@@ -2216,7 +2216,7 @@ var UniversalSidebar = ({
|
|
|
2216
2216
|
/* @__PURE__ */ import_react39.default.createElement(import_react40.HugeiconsIcon, { icon: import_core_free_icons9.SidebarLeft01Icon, size: 18, className: "shrink-0 text-neutral-400" }),
|
|
2217
2217
|
!isCollapsed && /* @__PURE__ */ import_react39.default.createElement("span", { className: "text-xs " }, "Collapse")
|
|
2218
2218
|
)))
|
|
2219
|
-
), showNotifDialog && /* @__PURE__ */ import_react39.default.createElement("div", { className: "fixed inset-0 z-120 flex items-center justify-center p-4 pointer-events-auto" }, /* @__PURE__ */ import_react39.default.createElement("div", { className: "absolute inset-0 bg-black/30", onClick: () => setShowNotifDialog(false) }), /* @__PURE__ */ import_react39.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-
|
|
2219
|
+
), showNotifDialog && /* @__PURE__ */ import_react39.default.createElement("div", { className: "fixed inset-0 z-120 flex items-center justify-center p-4 pointer-events-auto" }, /* @__PURE__ */ import_react39.default.createElement("div", { className: "absolute inset-0 bg-black/30", onClick: () => setShowNotifDialog(false) }), /* @__PURE__ */ import_react39.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-125-h-[80vh]" }, /* @__PURE__ */ import_react39.default.createElement("div", { className: "flex items-center justify-between p-5 shrink-0" }, selectedNotif ? /* @__PURE__ */ import_react39.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 uppercase" }, /* @__PURE__ */ import_react39.default.createElement(import_react40.HugeiconsIcon, { icon: import_core_free_icons9.ArrowLeft01Icon, size: 14 }), " Back") : /* @__PURE__ */ import_react39.default.createElement("h3", { className: "text-[15px] text-black tracking-tight " }, "Notifications"), /* @__PURE__ */ import_react39.default.createElement("button", { onClick: () => setShowNotifDialog(false), className: "text-neutral-400 hover:text-black transition-colors outline-none" }, /* @__PURE__ */ import_react39.default.createElement(import_react40.HugeiconsIcon, { icon: import_core_free_icons9.CancelCircleIcon, size: 18 }))), /* @__PURE__ */ import_react39.default.createElement("div", { className: "flex-1 overflow-y-auto custom-scrollbar p-2" }, selectedNotif ? /* @__PURE__ */ import_react39.default.createElement("div", { className: "p-4 text-left" }, /* @__PURE__ */ import_react39.default.createElement("h4", { className: "text-[14px] text-black mb-1" }, selectedNotif.title), /* @__PURE__ */ import_react39.default.createElement("span", { className: "text-[10px] text-neutral-400 tracking-widest uppercase mb-4 block" }, formatNotifDate(selectedNotif.createdAt)), /* @__PURE__ */ import_react39.default.createElement("p", { className: "text-[12px] text-neutral-600 leading-relaxed whitespace-pre-wrap" }, selectedNotif.message)) : /* @__PURE__ */ import_react39.default.createElement("div", { className: "flex flex-col divide-y divide-neutral-50/50" }, notifications?.length === 0 ? /* @__PURE__ */ import_react39.default.createElement("div", { className: "p-8 text-center text-xs text-neutral-400" }, "You have no notifications.") : notifications?.map((notif) => /* @__PURE__ */ import_react39.default.createElement(
|
|
2220
2220
|
"div",
|
|
2221
2221
|
{
|
|
2222
2222
|
key: notif.id,
|
|
@@ -2228,10 +2228,10 @@ var UniversalSidebar = ({
|
|
|
2228
2228
|
},
|
|
2229
2229
|
/* @__PURE__ */ import_react39.default.createElement("div", { className: "mt-1.5 shrink-0" }, !notif.isRead ? /* @__PURE__ */ import_react39.default.createElement("div", { className: "w-1.5 h-1.5 bg-blue-500 rounded-full" }) : /* @__PURE__ */ import_react39.default.createElement("div", { className: "w-1.5 h-1.5 bg-transparent" })),
|
|
2230
2230
|
/* @__PURE__ */ import_react39.default.createElement("div", { className: "flex-1 min-w-0 text-left" }, /* @__PURE__ */ import_react39.default.createElement("h5", { className: `text-[12px] truncate ${notif.isRead ? "text-neutral-500 " : "text-black "}` }, notif.title), /* @__PURE__ */ import_react39.default.createElement("p", { className: "text-[11px] text-neutral-400 truncate mt-0.5" }, notif.message), /* @__PURE__ */ import_react39.default.createElement("span", { className: "text-[9px] text-neutral-400 tracking-widest uppercase mt-2 block" }, formatNotifDate(notif.createdAt)))
|
|
2231
|
-
)))), !selectedNotif &&
|
|
2231
|
+
)))), !selectedNotif && /* @__PURE__ */ import_react39.default.createElement("div", { className: "p-4 flex items-center justify-between shrink-0 bg-neutral-50/50" }, /* @__PURE__ */ import_react39.default.createElement("span", { className: "text-[10px] text-neutral-400 tracking-widest uppercase" }, "Page ", notificationPage, " of ", notificationTotalPages === 0 ? 1 : notificationTotalPages), /* @__PURE__ */ import_react39.default.createElement("div", { className: "flex gap-1" }, /* @__PURE__ */ import_react39.default.createElement(
|
|
2232
2232
|
"button",
|
|
2233
2233
|
{
|
|
2234
|
-
disabled: notificationPage
|
|
2234
|
+
disabled: notificationPage <= 1,
|
|
2235
2235
|
onClick: () => onNotificationPageChange?.(notificationPage - 1),
|
|
2236
2236
|
className: "w-7 h-7 flex items-center justify-center rounded-full bg-white border border-neutral-200 text-neutral-600 disabled:opacity-30 outline-none hover:bg-neutral-50 transition-colors"
|
|
2237
2237
|
},
|
|
@@ -2239,7 +2239,7 @@ var UniversalSidebar = ({
|
|
|
2239
2239
|
), /* @__PURE__ */ import_react39.default.createElement(
|
|
2240
2240
|
"button",
|
|
2241
2241
|
{
|
|
2242
|
-
disabled: notificationPage ===
|
|
2242
|
+
disabled: notificationPage >= notificationTotalPages || notificationTotalPages === 0,
|
|
2243
2243
|
onClick: () => onNotificationPageChange?.(notificationPage + 1),
|
|
2244
2244
|
className: "w-7 h-7 flex items-center justify-center rounded-full bg-white border border-neutral-200 text-neutral-600 disabled:opacity-30 outline-none hover:bg-neutral-50 transition-colors"
|
|
2245
2245
|
},
|
|
@@ -3985,20 +3985,20 @@ var UniversalTransactionPage = ({
|
|
|
3985
3985
|
return tx.type === "CARD_TRANSACTION" ? "Card Transaction" : "Wallet Transaction";
|
|
3986
3986
|
};
|
|
3987
3987
|
const isListLoading = isLoading || isTyping;
|
|
3988
|
-
return /* @__PURE__ */ import_react72.default.createElement("div", { className: "flex flex-col gap-6 animate-in max-w-5xl fade-in duration-300" }, currentView === "list" && /* @__PURE__ */ import_react72.default.createElement("div", { className: "flex flex-col sm:flex-row items-center justify-between gap-4 w-full" }, /* @__PURE__ */ import_react72.default.createElement("div", { className: "relative w-full sm:w-96" }, /* @__PURE__ */ import_react72.default.createElement("div", { className: "absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none" }, /* @__PURE__ */ import_react72.default.createElement(import_react73.HugeiconsIcon, { icon: import_core_free_icons25.Search01Icon, size: 16, className: "text-neutral-400" })), /* @__PURE__ */ import_react72.default.createElement(
|
|
3988
|
+
return /* @__PURE__ */ import_react72.default.createElement("div", { className: "flex flex-col gap-6 animate-in max-w-5xl fade-in duration-300 " }, currentView === "list" && /* @__PURE__ */ import_react72.default.createElement("div", { className: "flex flex-col sm:flex-row items-center justify-between gap-4 w-full" }, /* @__PURE__ */ import_react72.default.createElement("div", { className: "relative w-full sm:w-96" }, /* @__PURE__ */ import_react72.default.createElement("div", { className: "absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none" }, /* @__PURE__ */ import_react72.default.createElement(import_react73.HugeiconsIcon, { icon: import_core_free_icons25.Search01Icon, size: 16, className: "text-neutral-400" })), /* @__PURE__ */ import_react72.default.createElement(
|
|
3989
3989
|
"input",
|
|
3990
3990
|
{
|
|
3991
3991
|
type: "text",
|
|
3992
3992
|
placeholder: "Search reference or amount...",
|
|
3993
3993
|
value: localSearchQuery,
|
|
3994
3994
|
onChange: (e) => setLocalSearchQuery(e.target.value),
|
|
3995
|
-
className: "w-full pl-10 pr-4 py-3 bg-white rounded-full text-[13px] text-black outline-none transition-colors"
|
|
3995
|
+
className: "w-full pl-10 pr-4 py-3 bg-white rounded-full text-[13px] text-black outline-none transition-colors "
|
|
3996
3996
|
}
|
|
3997
3997
|
)), /* @__PURE__ */ import_react72.default.createElement("div", { className: "flex items-center gap-3 w-full sm:w-auto overflow-x-auto pb-1 sm:pb-0" }, /* @__PURE__ */ import_react72.default.createElement(
|
|
3998
3998
|
"button",
|
|
3999
3999
|
{
|
|
4000
4000
|
onClick: () => setIsDirectionModalOpen(true),
|
|
4001
|
-
className: "flex items-center gap-2 whitespace-nowrap bg-white px-5 py-3 rounded-full text-[12px] text-neutral-600 hover:text-black hover:bg-neutral-50 transition-colors outline-none"
|
|
4001
|
+
className: "flex items-center gap-2 whitespace-nowrap bg-white px-5 py-3 rounded-full text-[12px] text-neutral-600 hover:text-black hover:bg-neutral-50 transition-colors outline-none "
|
|
4002
4002
|
},
|
|
4003
4003
|
/* @__PURE__ */ import_react72.default.createElement(import_react73.HugeiconsIcon, { icon: import_core_free_icons25.FilterIcon, size: 14 }),
|
|
4004
4004
|
activeDirectionFilter === "ALL" ? "Filter by Flow" : activeDirectionFilter
|
|
@@ -4006,11 +4006,11 @@ var UniversalTransactionPage = ({
|
|
|
4006
4006
|
"button",
|
|
4007
4007
|
{
|
|
4008
4008
|
onClick: () => setIsTypeModalOpen(true),
|
|
4009
|
-
className: "flex items-center gap-2 whitespace-nowrap bg-white px-5 py-3 rounded-full text-[12px] text-neutral-600 hover:text-black hover:bg-neutral-50 transition-colors outline-none"
|
|
4009
|
+
className: "flex items-center gap-2 whitespace-nowrap bg-white px-5 py-3 rounded-full text-[12px] text-neutral-600 hover:text-black hover:bg-neutral-50 transition-colors outline-none "
|
|
4010
4010
|
},
|
|
4011
4011
|
/* @__PURE__ */ import_react72.default.createElement(import_react73.HugeiconsIcon, { icon: import_core_free_icons25.FilterIcon, size: 14 }),
|
|
4012
4012
|
activeTypeFilter === "ALL" ? "Filter by Type" : activeTypeFilter.replace("_", " ")
|
|
4013
|
-
))), /* @__PURE__ */ import_react72.default.createElement("div", { className: "flex flex-col gap-8 p-6 rounded-2xl bg-white w-full" }, /* @__PURE__ */ import_react72.default.createElement("div", { className: "flex flex-col sm:flex-row sm:items-start justify-between gap-4" }, currentView === "list" ? /* @__PURE__ */ import_react72.default.createElement("div", null, /* @__PURE__ */ import_react72.default.createElement("h1", { className: "text-black text-xl mb-1 tracking-tight" }, headerTitle), /* @__PURE__ */ import_react72.default.createElement("p", { className: "text-xs text-neutral-500" }, headerDescription)) : /* @__PURE__ */ import_react72.default.createElement("div", { className: "flex flex-col items-start gap-3" }, /* @__PURE__ */ import_react72.default.createElement("button", { onClick: goBack, className: "text-[11px] text-neutral-400 hover:text-black tracking-[0.2em] flex items-center gap-1.5 transition-colors outline-none" }, /* @__PURE__ */ import_react72.default.createElement(import_react73.HugeiconsIcon, { icon: import_core_free_icons25.ArrowLeft01Icon, size: 12 }), " Back to Ledger"), /* @__PURE__ */ import_react72.default.createElement("h1", { className: "text-lg text-black tracking-tight" }, "Transaction Details"))), currentView === "list" && /* @__PURE__ */ import_react72.default.createElement("div", { className: "w-full overflow-hidden" }, isListLoading ? /* @__PURE__ */ import_react72.default.createElement(PageSpinner6, null) : /* @__PURE__ */ import_react72.default.createElement("div", { className: "flex flex-col min-w-0" }, /* @__PURE__ */ import_react72.default.createElement("div", { className: "divide-y divide-neutral-100" }, transactions.length === 0 ? /* @__PURE__ */ import_react72.default.createElement("p", { className: "text-xs text-neutral-500 py-6 text-center" }, "No transactions found") : transactions.map((tx) => /* @__PURE__ */ import_react72.default.createElement(
|
|
4013
|
+
))), /* @__PURE__ */ import_react72.default.createElement("div", { className: "flex flex-col gap-8 p-6 rounded-2xl bg-white w-full" }, /* @__PURE__ */ import_react72.default.createElement("div", { className: "flex flex-col sm:flex-row sm:items-start justify-between gap-4" }, currentView === "list" ? /* @__PURE__ */ import_react72.default.createElement("div", null, /* @__PURE__ */ import_react72.default.createElement("h1", { className: "text-black text-xl mb-1 tracking-tight " }, headerTitle), /* @__PURE__ */ import_react72.default.createElement("p", { className: "text-xs text-neutral-500 " }, headerDescription)) : /* @__PURE__ */ import_react72.default.createElement("div", { className: "flex flex-col items-start gap-3" }, /* @__PURE__ */ import_react72.default.createElement("button", { onClick: goBack, className: "text-[11px] text-neutral-400 hover:text-black tracking-[0.2em] flex items-center gap-1.5 transition-colors outline-none " }, /* @__PURE__ */ import_react72.default.createElement(import_react73.HugeiconsIcon, { icon: import_core_free_icons25.ArrowLeft01Icon, size: 12 }), " Back to Ledger"), /* @__PURE__ */ import_react72.default.createElement("h1", { className: "text-lg text-black tracking-tight " }, "Transaction Details"))), currentView === "list" && /* @__PURE__ */ import_react72.default.createElement("div", { className: "w-full overflow-hidden" }, isListLoading ? /* @__PURE__ */ import_react72.default.createElement(PageSpinner6, null) : /* @__PURE__ */ import_react72.default.createElement("div", { className: "flex flex-col min-w-0" }, /* @__PURE__ */ import_react72.default.createElement("div", { className: "divide-y divide-neutral-100" }, transactions.length === 0 ? /* @__PURE__ */ import_react72.default.createElement("p", { className: "text-xs text-neutral-500 py-6 text-center " }, "No transactions found") : transactions.map((tx) => /* @__PURE__ */ import_react72.default.createElement(
|
|
4014
4014
|
"div",
|
|
4015
4015
|
{
|
|
4016
4016
|
key: tx.id,
|
|
@@ -4020,13 +4020,13 @@ var UniversalTransactionPage = ({
|
|
|
4020
4020
|
},
|
|
4021
4021
|
className: "flex items-center justify-between py-4 hover:bg-neutral-50/50 transition-colors cursor-pointer group min-w-0 px-2 -mx-2 rounded-xl"
|
|
4022
4022
|
},
|
|
4023
|
-
/* @__PURE__ */ import_react72.default.createElement("div", { className: "flex items-center gap-4 min-w-0 flex-1" }, /* @__PURE__ */ import_react72.default.createElement("div", { className: `w-10 h-10 shrink-0 rounded-full flex items-center justify-center ${tx.direction === "CREDIT" ? "bg-green-50 text-green-600" : "bg-neutral-100 text-neutral-600"}` }, /* @__PURE__ */ import_react72.default.createElement(import_react73.HugeiconsIcon, { icon: tx.direction === "CREDIT" ? import_core_free_icons25.ArrowDown01Icon : import_core_free_icons25.ArrowUp01Icon, size: 18 })), /* @__PURE__ */ import_react72.default.createElement("div", { className: "min-w-0 flex-1 flex flex-col gap-1" }, /* @__PURE__ */ import_react72.default.createElement("p", { className: "text-[13px] text-black truncate" }, getDisplayName(tx)), /* @__PURE__ */ import_react72.default.createElement("p", { className: "text-[13px] text-neutral-500 truncate" }, tx.direction === "CREDIT" ? "+" : "-", tx.amount, " ", tx.currency))),
|
|
4024
|
-
/* @__PURE__ */ import_react72.default.createElement("div", { className: "shrink-0 flex flex-col items-end gap-1 text-right" }, /* @__PURE__ */ import_react72.default.createElement("span", { className: "text-[11px] text-neutral-500" }, formatDate3(tx.createdAt)), /* @__PURE__ */ import_react72.default.createElement("span", { className: "text-[11px] text-neutral-400 capitalize" }, tx.direction.toLowerCase()))
|
|
4025
|
-
))),
|
|
4023
|
+
/* @__PURE__ */ import_react72.default.createElement("div", { className: "flex items-center gap-4 min-w-0 flex-1" }, /* @__PURE__ */ import_react72.default.createElement("div", { className: `w-10 h-10 shrink-0 rounded-full flex items-center justify-center ${tx.direction === "CREDIT" ? "bg-green-50 text-green-600" : "bg-neutral-100 text-neutral-600"}` }, /* @__PURE__ */ import_react72.default.createElement(import_react73.HugeiconsIcon, { icon: tx.direction === "CREDIT" ? import_core_free_icons25.ArrowDown01Icon : import_core_free_icons25.ArrowUp01Icon, size: 18 })), /* @__PURE__ */ import_react72.default.createElement("div", { className: "min-w-0 flex-1 flex flex-col gap-1" }, /* @__PURE__ */ import_react72.default.createElement("p", { className: "text-[13px] text-black truncate " }, getDisplayName(tx)), /* @__PURE__ */ import_react72.default.createElement("p", { className: "text-[13px] text-neutral-500 truncate " }, tx.direction === "CREDIT" ? "+" : "-", tx.amount, " ", tx.currency))),
|
|
4024
|
+
/* @__PURE__ */ import_react72.default.createElement("div", { className: "shrink-0 flex flex-col items-end gap-1 text-right" }, /* @__PURE__ */ import_react72.default.createElement("span", { className: "text-[11px] text-neutral-500 " }, formatDate3(tx.createdAt)), /* @__PURE__ */ import_react72.default.createElement("span", { className: "text-[11px] text-neutral-400 capitalize " }, tx.direction.toLowerCase()))
|
|
4025
|
+
))), /* @__PURE__ */ import_react72.default.createElement("div", { className: "flex items-center justify-between pt-6 mt-2 " }, /* @__PURE__ */ import_react72.default.createElement("span", { className: "text-[11px] text-neutral-400 tracking-[0.2em] uppercase " }, "Page ", currentPage, " of ", totalPages === 0 ? 1 : totalPages), /* @__PURE__ */ import_react72.default.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ import_react72.default.createElement(
|
|
4026
4026
|
"button",
|
|
4027
4027
|
{
|
|
4028
4028
|
onClick: () => onPageChange(currentPage - 1),
|
|
4029
|
-
disabled: currentPage
|
|
4029
|
+
disabled: currentPage <= 1 || isListLoading,
|
|
4030
4030
|
className: "p-2 border border-neutral-100 rounded-full bg-white text-neutral-500 hover:text-black hover:border-black disabled:opacity-30 disabled:cursor-not-allowed transition-all outline-none"
|
|
4031
4031
|
},
|
|
4032
4032
|
/* @__PURE__ */ import_react72.default.createElement(import_react73.HugeiconsIcon, { icon: import_core_free_icons25.ArrowLeft01Icon, size: 14 })
|
|
@@ -4034,11 +4034,11 @@ var UniversalTransactionPage = ({
|
|
|
4034
4034
|
"button",
|
|
4035
4035
|
{
|
|
4036
4036
|
onClick: () => onPageChange(currentPage + 1),
|
|
4037
|
-
disabled: currentPage >= totalPages || isListLoading,
|
|
4037
|
+
disabled: currentPage >= totalPages || isListLoading || totalPages === 0,
|
|
4038
4038
|
className: "p-2 border border-neutral-100 rounded-full bg-white text-neutral-500 hover:text-black hover:border-black disabled:opacity-30 disabled:cursor-not-allowed transition-all outline-none"
|
|
4039
4039
|
},
|
|
4040
4040
|
/* @__PURE__ */ import_react72.default.createElement(import_react73.HugeiconsIcon, { icon: import_core_free_icons25.ArrowRight01Icon, size: 14 })
|
|
4041
|
-
))))), currentView === "details" && selectedTransaction && /* @__PURE__ */ import_react72.default.createElement("div", { className: "w-full text-left" }, /* @__PURE__ */ import_react72.default.createElement("div", { className: "flex flex-col items-center justify-center py-10 border-b border-neutral-100 mb-8" }, /* @__PURE__ */ import_react72.default.createElement("div", { className: `w-14 h-14 rounded-full flex items-center justify-center mb-4 ${selectedTransaction.direction === "CREDIT" ? "bg-green-50 text-green-600" : "bg-neutral-100 text-neutral-600"}` }, /* @__PURE__ */ import_react72.default.createElement(import_react73.HugeiconsIcon, { icon: selectedTransaction.direction === "CREDIT" ? import_core_free_icons25.ArrowDown01Icon : import_core_free_icons25.ArrowUp01Icon, size: 24 })), /* @__PURE__ */ import_react72.default.createElement("h2", { className: "text-3xl text-black mb-2" }, selectedTransaction.direction === "CREDIT" ? "+" : "-", selectedTransaction.amount, " ", selectedTransaction.currency), /* @__PURE__ */ import_react72.default.createElement("span", { className: "text-[11px] tracking-widest text-neutral-500 uppercase px-4 py-1.5 rounded-full bg-neutral-50" }, selectedTransaction.status)), /* @__PURE__ */ import_react72.default.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-y-8 gap-x-4
|
|
4041
|
+
))))), currentView === "details" && selectedTransaction && /* @__PURE__ */ import_react72.default.createElement("div", { className: "w-full text-left " }, /* @__PURE__ */ import_react72.default.createElement("div", { className: "flex flex-col items-center justify-center py-10 border-b border-neutral-100 mb-8" }, /* @__PURE__ */ import_react72.default.createElement("div", { className: `w-14 h-14 rounded-full flex items-center justify-center mb-4 ${selectedTransaction.direction === "CREDIT" ? "bg-green-50 text-green-600" : "bg-neutral-100 text-neutral-600"}` }, /* @__PURE__ */ import_react72.default.createElement(import_react73.HugeiconsIcon, { icon: selectedTransaction.direction === "CREDIT" ? import_core_free_icons25.ArrowDown01Icon : import_core_free_icons25.ArrowUp01Icon, size: 24 })), /* @__PURE__ */ import_react72.default.createElement("h2", { className: "text-3xl text-black mb-2" }, selectedTransaction.direction === "CREDIT" ? "+" : "-", selectedTransaction.amount, " ", selectedTransaction.currency), /* @__PURE__ */ import_react72.default.createElement("span", { className: "text-[11px] tracking-widest text-neutral-500 uppercase px-4 py-1.5 rounded-full bg-neutral-50 " }, selectedTransaction.status)), /* @__PURE__ */ import_react72.default.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-y-8 gap-x-4" }, /* @__PURE__ */ import_react72.default.createElement("div", null, /* @__PURE__ */ import_react72.default.createElement("span", { className: "text-[11px] tracking-[0.2em] text-neutral-400 block mb-2 uppercase " }, "Reference ID"), /* @__PURE__ */ import_react72.default.createElement("span", { className: "text-[13px] text-black break-all " }, selectedTransaction.reference)), /* @__PURE__ */ import_react72.default.createElement("div", null, /* @__PURE__ */ import_react72.default.createElement("span", { className: "text-[11px] tracking-[0.2em] text-neutral-400 block mb-2 uppercase " }, "Date & Time"), /* @__PURE__ */ import_react72.default.createElement("span", { className: "text-[13px] text-black " }, formatDate3(selectedTransaction.createdAt), " at ", formatTime(selectedTransaction.createdAt))), /* @__PURE__ */ import_react72.default.createElement("div", null, /* @__PURE__ */ import_react72.default.createElement("span", { className: "text-[11px] tracking-[0.2em] text-neutral-400 block mb-2 uppercase " }, "Transaction Type"), /* @__PURE__ */ import_react72.default.createElement("span", { className: "text-[13px] text-black capitalize " }, selectedTransaction.type.replace("_", " ").toLowerCase())), /* @__PURE__ */ import_react72.default.createElement("div", null, /* @__PURE__ */ import_react72.default.createElement("span", { className: "text-[11px] tracking-[0.2em] text-neutral-400 block mb-2 uppercase " }, "Flow Direction"), /* @__PURE__ */ import_react72.default.createElement("span", { className: "text-[13px] text-black capitalize " }, selectedTransaction.direction.toLowerCase()))))), isDirectionModalOpen && /* @__PURE__ */ import_react72.default.createElement("div", { className: "fixed inset-0 z-110 flex items-center justify-center p-4" }, /* @__PURE__ */ import_react72.default.createElement("div", { className: "absolute inset-0 bg-black/30", onClick: () => setIsDirectionModalOpen(false) }), /* @__PURE__ */ import_react72.default.createElement("div", { ref: directionDropdownRef, className: "relative w-72 bg-white shadow-2xl rounded-2xl flex flex-col items-center overflow-hidden animate-in zoom-in-95 duration-200" }, /* @__PURE__ */ import_react72.default.createElement("div", { className: "p-6 text-center w-full" }, /* @__PURE__ */ import_react72.default.createElement("p", { className: "text-[14px] text-black tracking-tight " }, "Filter by Flow")), /* @__PURE__ */ import_react72.default.createElement("div", { className: "w-full flex flex-col pl-2 pr-2" }, ["ALL", "CREDIT", "DEBIT"].map((option) => /* @__PURE__ */ import_react72.default.createElement(
|
|
4042
4042
|
"button",
|
|
4043
4043
|
{
|
|
4044
4044
|
key: option,
|
|
@@ -4056,7 +4056,7 @@ var UniversalTransactionPage = ({
|
|
|
4056
4056
|
className: "w-full py-3 text-[13px] text-neutral-600 hover:bg-neutral-50 transition-colors outline-none "
|
|
4057
4057
|
},
|
|
4058
4058
|
"Cancel"
|
|
4059
|
-
)))), isTypeModalOpen && /* @__PURE__ */ import_react72.default.createElement("div", { className: "fixed inset-0 z-110 flex items-center justify-center p-4" }, /* @__PURE__ */ import_react72.default.createElement("div", { className: "absolute inset-0 bg-black/30", onClick: () => setIsTypeModalOpen(false) }), /* @__PURE__ */ import_react72.default.createElement("div", { ref: typeDropdownRef, className: "relative w-72 bg-white shadow-2xl rounded-2xl flex flex-col items-center overflow-hidden animate-in zoom-in-95 duration-200" }, /* @__PURE__ */ import_react72.default.createElement("div", { className: "p-6 text-center w-full" }, /* @__PURE__ */ import_react72.default.createElement("
|
|
4059
|
+
)))), isTypeModalOpen && /* @__PURE__ */ import_react72.default.createElement("div", { className: "fixed inset-0 z-110 flex items-center justify-center p-4" }, /* @__PURE__ */ import_react72.default.createElement("div", { className: "absolute inset-0 bg-black/30", onClick: () => setIsTypeModalOpen(false) }), /* @__PURE__ */ import_react72.default.createElement("div", { ref: typeDropdownRef, className: "relative w-72 bg-white shadow-2xl rounded-2xl flex flex-col items-center overflow-hidden animate-in zoom-in-95 duration-200" }, /* @__PURE__ */ import_react72.default.createElement("div", { className: "p-6 text-center w-full" }, /* @__PURE__ */ import_react72.default.createElement("p", { className: "text-[14px] text-black tracking-tight " }, "Filter by Type")), /* @__PURE__ */ import_react72.default.createElement("div", { className: "w-full flex flex-col pl-2 pr-2" }, [
|
|
4060
4060
|
{ label: "All Transactions", value: "ALL" },
|
|
4061
4061
|
{ label: "Wallet Transactions", value: "WALLET_TRANSACTION" },
|
|
4062
4062
|
{ label: "Card Transactions", value: "CARD_TRANSACTION" }
|
package/dist/index.mjs
CHANGED
|
@@ -1965,7 +1965,7 @@ import {
|
|
|
1965
1965
|
LogoutCircle02Icon,
|
|
1966
1966
|
ArrowLeft01Icon as ArrowLeft01Icon2,
|
|
1967
1967
|
ArrowRight01Icon as ArrowRight01Icon3,
|
|
1968
|
-
|
|
1968
|
+
Notification01Icon
|
|
1969
1969
|
} from "@hugeicons/core-free-icons";
|
|
1970
1970
|
var ButtonSpinner = () => /* @__PURE__ */ React27.createElement("svg", { className: "animate-spin h-4 w-4 text-neutral-400", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24" }, /* @__PURE__ */ React27.createElement("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }), /* @__PURE__ */ React27.createElement("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" }));
|
|
1971
1971
|
var formatNotifDate = (d) => {
|
|
@@ -2033,11 +2033,11 @@ var UniversalSidebar = ({
|
|
|
2033
2033
|
"div",
|
|
2034
2034
|
{
|
|
2035
2035
|
onClick: handleCopyWallet,
|
|
2036
|
-
className: "flex items-center gap-2 bg-white rounded-full p-1 pr-3
|
|
2036
|
+
className: "flex items-center gap-2 bg-white rounded-full p-1 pr-3 cursor-pointer hover:bg-neutral-50 transition-colors",
|
|
2037
2037
|
title: "Copy Address"
|
|
2038
2038
|
},
|
|
2039
2039
|
web3Avatar ? /* @__PURE__ */ React27.createElement("img", { src: web3Avatar, alt: "Avatar", className: "w-6 h-6 rounded-full bg-neutral-100 object-cover shrink-0" }) : /* @__PURE__ */ React27.createElement("div", { className: "w-6 h-6 rounded-full bg-neutral-100 flex items-center justify-center text-[9px] text-black shrink-0 " }, userInitials.substring(0, 2)),
|
|
2040
|
-
/* @__PURE__ */ React27.createElement("span", { className: "text-[11px] text-black
|
|
2040
|
+
/* @__PURE__ */ React27.createElement("span", { className: "text-[11px] text-black truncate max-w-20 sm:max-w-37.5" }, web3Address)
|
|
2041
2041
|
), notifications !== void 0 && /* @__PURE__ */ React27.createElement(
|
|
2042
2042
|
"button",
|
|
2043
2043
|
{
|
|
@@ -2045,15 +2045,15 @@ var UniversalSidebar = ({
|
|
|
2045
2045
|
setShowNotifDialog(true);
|
|
2046
2046
|
setSelectedNotif(null);
|
|
2047
2047
|
},
|
|
2048
|
-
className: "relative w-10 h-10 shrink-0 bg-white rounded-full flex items-center justify-center text-neutral-600 hover:text-black hover:bg-neutral-50 transition-all duration-300 outline-none
|
|
2048
|
+
className: "relative w-10 h-10 shrink-0 bg-white rounded-full flex items-center justify-center text-neutral-600 hover:text-black hover:bg-neutral-50 transition-all duration-300 outline-none"
|
|
2049
2049
|
},
|
|
2050
|
-
/* @__PURE__ */ React27.createElement(HugeiconsIcon13, { icon:
|
|
2050
|
+
/* @__PURE__ */ React27.createElement(HugeiconsIcon13, { icon: Notification01Icon, size: 18 }),
|
|
2051
2051
|
unreadNotificationsCount > 0 && /* @__PURE__ */ React27.createElement("span", { className: "absolute top-2 right-2.5 w-2 h-2 bg-blue-500 rounded-full border border-white" })
|
|
2052
2052
|
), showBackButton && /* @__PURE__ */ React27.createElement(
|
|
2053
2053
|
Link9,
|
|
2054
2054
|
{
|
|
2055
2055
|
href: backUrl,
|
|
2056
|
-
className: "w-10 h-10 shrink-0 bg-white rounded-full flex items-center justify-center text-neutral-600 hover:text-black hover:bg-neutral-50 transition-all duration-300 outline-none
|
|
2056
|
+
className: "w-10 h-10 shrink-0 bg-white rounded-full flex items-center justify-center text-neutral-600 hover:text-black hover:bg-neutral-50 transition-all duration-300 outline-none",
|
|
2057
2057
|
"aria-label": "Go Back"
|
|
2058
2058
|
},
|
|
2059
2059
|
/* @__PURE__ */ React27.createElement(HugeiconsIcon13, { icon: ArrowLeft01Icon2, size: 18 })
|
|
@@ -2082,7 +2082,7 @@ var UniversalSidebar = ({
|
|
|
2082
2082
|
${isCollapsed ? "md:w-16 w-64" : "w-64"}
|
|
2083
2083
|
`
|
|
2084
2084
|
},
|
|
2085
|
-
/* @__PURE__ */ React27.createElement("div", { className: `flex items-center shrink-0 p-5 ${isCollapsed && !isMobileOpen ? "justify-center min-h-18" : "justify-between"}` }, /* @__PURE__ */ React27.createElement("div", { className: `flex items-center gap-3 text-left ${!isCollapsed || isMobileOpen ? "w-full" : ""}` }, /* @__PURE__ */ React27.createElement("div", { className: "w-9 h-9 rounded-full flex items-center justify-center shrink-0
|
|
2085
|
+
/* @__PURE__ */ React27.createElement("div", { className: `flex items-center shrink-0 p-5 ${isCollapsed && !isMobileOpen ? "justify-center min-h-18" : "justify-between"}` }, /* @__PURE__ */ React27.createElement("div", { className: `flex items-center gap-3 text-left ${!isCollapsed || isMobileOpen ? "w-full" : ""}` }, /* @__PURE__ */ React27.createElement("div", { className: "w-9 h-9 bg-[#1f26d6] rounded-full flex items-center justify-center shrink-0" }, /* @__PURE__ */ React27.createElement("h3", { className: "text-[10px] text-white uppercase tracking-wider" }, userInitials.substring(0, 2))), (!isCollapsed || isMobileOpen) && /* @__PURE__ */ React27.createElement("div", { className: "flex flex-col justify-center min-w-0 pr-2 flex-1" }, /* @__PURE__ */ React27.createElement("span", { className: "text-[13px] text-black leading-none truncate tracking-wide mb-1" }, userName), userTag && /* @__PURE__ */ React27.createElement("span", { className: "text-[9px] text-[#1f26d6] truncate tracking-[0.2em] leading-none " }, userTag))), /* @__PURE__ */ React27.createElement("div", { className: "md:hidden flex shrink-0" }, /* @__PURE__ */ React27.createElement(
|
|
2086
2086
|
"button",
|
|
2087
2087
|
{
|
|
2088
2088
|
onClick: closeMobile,
|
|
@@ -2131,7 +2131,7 @@ var UniversalSidebar = ({
|
|
|
2131
2131
|
/* @__PURE__ */ React27.createElement(HugeiconsIcon13, { icon: SidebarLeft01Icon, size: 18, className: "shrink-0 text-neutral-400" }),
|
|
2132
2132
|
!isCollapsed && /* @__PURE__ */ React27.createElement("span", { className: "text-xs " }, "Collapse")
|
|
2133
2133
|
)))
|
|
2134
|
-
), showNotifDialog && /* @__PURE__ */ React27.createElement("div", { className: "fixed inset-0 z-120 flex items-center justify-center p-4 pointer-events-auto" }, /* @__PURE__ */ React27.createElement("div", { className: "absolute inset-0 bg-black/30", onClick: () => setShowNotifDialog(false) }), /* @__PURE__ */ React27.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-
|
|
2134
|
+
), showNotifDialog && /* @__PURE__ */ React27.createElement("div", { className: "fixed inset-0 z-120 flex items-center justify-center p-4 pointer-events-auto" }, /* @__PURE__ */ React27.createElement("div", { className: "absolute inset-0 bg-black/30", onClick: () => setShowNotifDialog(false) }), /* @__PURE__ */ React27.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-125-h-[80vh]" }, /* @__PURE__ */ React27.createElement("div", { className: "flex items-center justify-between p-5 shrink-0" }, selectedNotif ? /* @__PURE__ */ React27.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 uppercase" }, /* @__PURE__ */ React27.createElement(HugeiconsIcon13, { icon: ArrowLeft01Icon2, size: 14 }), " Back") : /* @__PURE__ */ React27.createElement("h3", { className: "text-[15px] text-black tracking-tight " }, "Notifications"), /* @__PURE__ */ React27.createElement("button", { onClick: () => setShowNotifDialog(false), className: "text-neutral-400 hover:text-black transition-colors outline-none" }, /* @__PURE__ */ React27.createElement(HugeiconsIcon13, { icon: CancelCircleIcon, size: 18 }))), /* @__PURE__ */ React27.createElement("div", { className: "flex-1 overflow-y-auto custom-scrollbar p-2" }, selectedNotif ? /* @__PURE__ */ React27.createElement("div", { className: "p-4 text-left" }, /* @__PURE__ */ React27.createElement("h4", { className: "text-[14px] text-black mb-1" }, selectedNotif.title), /* @__PURE__ */ React27.createElement("span", { className: "text-[10px] text-neutral-400 tracking-widest uppercase mb-4 block" }, formatNotifDate(selectedNotif.createdAt)), /* @__PURE__ */ React27.createElement("p", { className: "text-[12px] text-neutral-600 leading-relaxed whitespace-pre-wrap" }, selectedNotif.message)) : /* @__PURE__ */ React27.createElement("div", { className: "flex flex-col divide-y divide-neutral-50/50" }, notifications?.length === 0 ? /* @__PURE__ */ React27.createElement("div", { className: "p-8 text-center text-xs text-neutral-400" }, "You have no notifications.") : notifications?.map((notif) => /* @__PURE__ */ React27.createElement(
|
|
2135
2135
|
"div",
|
|
2136
2136
|
{
|
|
2137
2137
|
key: notif.id,
|
|
@@ -2143,10 +2143,10 @@ var UniversalSidebar = ({
|
|
|
2143
2143
|
},
|
|
2144
2144
|
/* @__PURE__ */ React27.createElement("div", { className: "mt-1.5 shrink-0" }, !notif.isRead ? /* @__PURE__ */ React27.createElement("div", { className: "w-1.5 h-1.5 bg-blue-500 rounded-full" }) : /* @__PURE__ */ React27.createElement("div", { className: "w-1.5 h-1.5 bg-transparent" })),
|
|
2145
2145
|
/* @__PURE__ */ React27.createElement("div", { className: "flex-1 min-w-0 text-left" }, /* @__PURE__ */ React27.createElement("h5", { className: `text-[12px] truncate ${notif.isRead ? "text-neutral-500 " : "text-black "}` }, notif.title), /* @__PURE__ */ React27.createElement("p", { className: "text-[11px] text-neutral-400 truncate mt-0.5" }, notif.message), /* @__PURE__ */ React27.createElement("span", { className: "text-[9px] text-neutral-400 tracking-widest uppercase mt-2 block" }, formatNotifDate(notif.createdAt)))
|
|
2146
|
-
)))), !selectedNotif &&
|
|
2146
|
+
)))), !selectedNotif && /* @__PURE__ */ React27.createElement("div", { className: "p-4 flex items-center justify-between shrink-0 bg-neutral-50/50" }, /* @__PURE__ */ React27.createElement("span", { className: "text-[10px] text-neutral-400 tracking-widest uppercase" }, "Page ", notificationPage, " of ", notificationTotalPages === 0 ? 1 : notificationTotalPages), /* @__PURE__ */ React27.createElement("div", { className: "flex gap-1" }, /* @__PURE__ */ React27.createElement(
|
|
2147
2147
|
"button",
|
|
2148
2148
|
{
|
|
2149
|
-
disabled: notificationPage
|
|
2149
|
+
disabled: notificationPage <= 1,
|
|
2150
2150
|
onClick: () => onNotificationPageChange?.(notificationPage - 1),
|
|
2151
2151
|
className: "w-7 h-7 flex items-center justify-center rounded-full bg-white border border-neutral-200 text-neutral-600 disabled:opacity-30 outline-none hover:bg-neutral-50 transition-colors"
|
|
2152
2152
|
},
|
|
@@ -2154,7 +2154,7 @@ var UniversalSidebar = ({
|
|
|
2154
2154
|
), /* @__PURE__ */ React27.createElement(
|
|
2155
2155
|
"button",
|
|
2156
2156
|
{
|
|
2157
|
-
disabled: notificationPage ===
|
|
2157
|
+
disabled: notificationPage >= notificationTotalPages || notificationTotalPages === 0,
|
|
2158
2158
|
onClick: () => onNotificationPageChange?.(notificationPage + 1),
|
|
2159
2159
|
className: "w-7 h-7 flex items-center justify-center rounded-full bg-white border border-neutral-200 text-neutral-600 disabled:opacity-30 outline-none hover:bg-neutral-50 transition-colors"
|
|
2160
2160
|
},
|
|
@@ -3979,20 +3979,20 @@ var UniversalTransactionPage = ({
|
|
|
3979
3979
|
return tx.type === "CARD_TRANSACTION" ? "Card Transaction" : "Wallet Transaction";
|
|
3980
3980
|
};
|
|
3981
3981
|
const isListLoading = isLoading || isTyping;
|
|
3982
|
-
return /* @__PURE__ */ React44.createElement("div", { className: "flex flex-col gap-6 animate-in max-w-5xl fade-in duration-300" }, currentView === "list" && /* @__PURE__ */ React44.createElement("div", { className: "flex flex-col sm:flex-row items-center justify-between gap-4 w-full" }, /* @__PURE__ */ React44.createElement("div", { className: "relative w-full sm:w-96" }, /* @__PURE__ */ React44.createElement("div", { className: "absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none" }, /* @__PURE__ */ React44.createElement(HugeiconsIcon29, { icon: Search01Icon2, size: 16, className: "text-neutral-400" })), /* @__PURE__ */ React44.createElement(
|
|
3982
|
+
return /* @__PURE__ */ React44.createElement("div", { className: "flex flex-col gap-6 animate-in max-w-5xl fade-in duration-300 " }, currentView === "list" && /* @__PURE__ */ React44.createElement("div", { className: "flex flex-col sm:flex-row items-center justify-between gap-4 w-full" }, /* @__PURE__ */ React44.createElement("div", { className: "relative w-full sm:w-96" }, /* @__PURE__ */ React44.createElement("div", { className: "absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none" }, /* @__PURE__ */ React44.createElement(HugeiconsIcon29, { icon: Search01Icon2, size: 16, className: "text-neutral-400" })), /* @__PURE__ */ React44.createElement(
|
|
3983
3983
|
"input",
|
|
3984
3984
|
{
|
|
3985
3985
|
type: "text",
|
|
3986
3986
|
placeholder: "Search reference or amount...",
|
|
3987
3987
|
value: localSearchQuery,
|
|
3988
3988
|
onChange: (e) => setLocalSearchQuery(e.target.value),
|
|
3989
|
-
className: "w-full pl-10 pr-4 py-3 bg-white rounded-full text-[13px] text-black outline-none transition-colors"
|
|
3989
|
+
className: "w-full pl-10 pr-4 py-3 bg-white rounded-full text-[13px] text-black outline-none transition-colors "
|
|
3990
3990
|
}
|
|
3991
3991
|
)), /* @__PURE__ */ React44.createElement("div", { className: "flex items-center gap-3 w-full sm:w-auto overflow-x-auto pb-1 sm:pb-0" }, /* @__PURE__ */ React44.createElement(
|
|
3992
3992
|
"button",
|
|
3993
3993
|
{
|
|
3994
3994
|
onClick: () => setIsDirectionModalOpen(true),
|
|
3995
|
-
className: "flex items-center gap-2 whitespace-nowrap bg-white px-5 py-3 rounded-full text-[12px] text-neutral-600 hover:text-black hover:bg-neutral-50 transition-colors outline-none"
|
|
3995
|
+
className: "flex items-center gap-2 whitespace-nowrap bg-white px-5 py-3 rounded-full text-[12px] text-neutral-600 hover:text-black hover:bg-neutral-50 transition-colors outline-none "
|
|
3996
3996
|
},
|
|
3997
3997
|
/* @__PURE__ */ React44.createElement(HugeiconsIcon29, { icon: FilterIcon, size: 14 }),
|
|
3998
3998
|
activeDirectionFilter === "ALL" ? "Filter by Flow" : activeDirectionFilter
|
|
@@ -4000,11 +4000,11 @@ var UniversalTransactionPage = ({
|
|
|
4000
4000
|
"button",
|
|
4001
4001
|
{
|
|
4002
4002
|
onClick: () => setIsTypeModalOpen(true),
|
|
4003
|
-
className: "flex items-center gap-2 whitespace-nowrap bg-white px-5 py-3 rounded-full text-[12px] text-neutral-600 hover:text-black hover:bg-neutral-50 transition-colors outline-none"
|
|
4003
|
+
className: "flex items-center gap-2 whitespace-nowrap bg-white px-5 py-3 rounded-full text-[12px] text-neutral-600 hover:text-black hover:bg-neutral-50 transition-colors outline-none "
|
|
4004
4004
|
},
|
|
4005
4005
|
/* @__PURE__ */ React44.createElement(HugeiconsIcon29, { icon: FilterIcon, size: 14 }),
|
|
4006
4006
|
activeTypeFilter === "ALL" ? "Filter by Type" : activeTypeFilter.replace("_", " ")
|
|
4007
|
-
))), /* @__PURE__ */ React44.createElement("div", { className: "flex flex-col gap-8 p-6 rounded-2xl bg-white w-full" }, /* @__PURE__ */ React44.createElement("div", { className: "flex flex-col sm:flex-row sm:items-start justify-between gap-4" }, currentView === "list" ? /* @__PURE__ */ React44.createElement("div", null, /* @__PURE__ */ React44.createElement("h1", { className: "text-black text-xl mb-1 tracking-tight" }, headerTitle), /* @__PURE__ */ React44.createElement("p", { className: "text-xs text-neutral-500" }, headerDescription)) : /* @__PURE__ */ React44.createElement("div", { className: "flex flex-col items-start gap-3" }, /* @__PURE__ */ React44.createElement("button", { onClick: goBack, className: "text-[11px] text-neutral-400 hover:text-black tracking-[0.2em] flex items-center gap-1.5 transition-colors outline-none" }, /* @__PURE__ */ React44.createElement(HugeiconsIcon29, { icon: ArrowLeft01Icon10, size: 12 }), " Back to Ledger"), /* @__PURE__ */ React44.createElement("h1", { className: "text-lg text-black tracking-tight" }, "Transaction Details"))), currentView === "list" && /* @__PURE__ */ React44.createElement("div", { className: "w-full overflow-hidden" }, isListLoading ? /* @__PURE__ */ React44.createElement(PageSpinner6, null) : /* @__PURE__ */ React44.createElement("div", { className: "flex flex-col min-w-0" }, /* @__PURE__ */ React44.createElement("div", { className: "divide-y divide-neutral-100" }, transactions.length === 0 ? /* @__PURE__ */ React44.createElement("p", { className: "text-xs text-neutral-500 py-6 text-center" }, "No transactions found") : transactions.map((tx) => /* @__PURE__ */ React44.createElement(
|
|
4007
|
+
))), /* @__PURE__ */ React44.createElement("div", { className: "flex flex-col gap-8 p-6 rounded-2xl bg-white w-full" }, /* @__PURE__ */ React44.createElement("div", { className: "flex flex-col sm:flex-row sm:items-start justify-between gap-4" }, currentView === "list" ? /* @__PURE__ */ React44.createElement("div", null, /* @__PURE__ */ React44.createElement("h1", { className: "text-black text-xl mb-1 tracking-tight " }, headerTitle), /* @__PURE__ */ React44.createElement("p", { className: "text-xs text-neutral-500 " }, headerDescription)) : /* @__PURE__ */ React44.createElement("div", { className: "flex flex-col items-start gap-3" }, /* @__PURE__ */ React44.createElement("button", { onClick: goBack, className: "text-[11px] text-neutral-400 hover:text-black tracking-[0.2em] flex items-center gap-1.5 transition-colors outline-none " }, /* @__PURE__ */ React44.createElement(HugeiconsIcon29, { icon: ArrowLeft01Icon10, size: 12 }), " Back to Ledger"), /* @__PURE__ */ React44.createElement("h1", { className: "text-lg text-black tracking-tight " }, "Transaction Details"))), currentView === "list" && /* @__PURE__ */ React44.createElement("div", { className: "w-full overflow-hidden" }, isListLoading ? /* @__PURE__ */ React44.createElement(PageSpinner6, null) : /* @__PURE__ */ React44.createElement("div", { className: "flex flex-col min-w-0" }, /* @__PURE__ */ React44.createElement("div", { className: "divide-y divide-neutral-100" }, transactions.length === 0 ? /* @__PURE__ */ React44.createElement("p", { className: "text-xs text-neutral-500 py-6 text-center " }, "No transactions found") : transactions.map((tx) => /* @__PURE__ */ React44.createElement(
|
|
4008
4008
|
"div",
|
|
4009
4009
|
{
|
|
4010
4010
|
key: tx.id,
|
|
@@ -4014,13 +4014,13 @@ var UniversalTransactionPage = ({
|
|
|
4014
4014
|
},
|
|
4015
4015
|
className: "flex items-center justify-between py-4 hover:bg-neutral-50/50 transition-colors cursor-pointer group min-w-0 px-2 -mx-2 rounded-xl"
|
|
4016
4016
|
},
|
|
4017
|
-
/* @__PURE__ */ React44.createElement("div", { className: "flex items-center gap-4 min-w-0 flex-1" }, /* @__PURE__ */ React44.createElement("div", { className: `w-10 h-10 shrink-0 rounded-full flex items-center justify-center ${tx.direction === "CREDIT" ? "bg-green-50 text-green-600" : "bg-neutral-100 text-neutral-600"}` }, /* @__PURE__ */ React44.createElement(HugeiconsIcon29, { icon: tx.direction === "CREDIT" ? ArrowDown01Icon5 : ArrowUp01Icon, size: 18 })), /* @__PURE__ */ React44.createElement("div", { className: "min-w-0 flex-1 flex flex-col gap-1" }, /* @__PURE__ */ React44.createElement("p", { className: "text-[13px] text-black truncate" }, getDisplayName(tx)), /* @__PURE__ */ React44.createElement("p", { className: "text-[13px] text-neutral-500 truncate" }, tx.direction === "CREDIT" ? "+" : "-", tx.amount, " ", tx.currency))),
|
|
4018
|
-
/* @__PURE__ */ React44.createElement("div", { className: "shrink-0 flex flex-col items-end gap-1 text-right" }, /* @__PURE__ */ React44.createElement("span", { className: "text-[11px] text-neutral-500" }, formatDate3(tx.createdAt)), /* @__PURE__ */ React44.createElement("span", { className: "text-[11px] text-neutral-400 capitalize" }, tx.direction.toLowerCase()))
|
|
4019
|
-
))),
|
|
4017
|
+
/* @__PURE__ */ React44.createElement("div", { className: "flex items-center gap-4 min-w-0 flex-1" }, /* @__PURE__ */ React44.createElement("div", { className: `w-10 h-10 shrink-0 rounded-full flex items-center justify-center ${tx.direction === "CREDIT" ? "bg-green-50 text-green-600" : "bg-neutral-100 text-neutral-600"}` }, /* @__PURE__ */ React44.createElement(HugeiconsIcon29, { icon: tx.direction === "CREDIT" ? ArrowDown01Icon5 : ArrowUp01Icon, size: 18 })), /* @__PURE__ */ React44.createElement("div", { className: "min-w-0 flex-1 flex flex-col gap-1" }, /* @__PURE__ */ React44.createElement("p", { className: "text-[13px] text-black truncate " }, getDisplayName(tx)), /* @__PURE__ */ React44.createElement("p", { className: "text-[13px] text-neutral-500 truncate " }, tx.direction === "CREDIT" ? "+" : "-", tx.amount, " ", tx.currency))),
|
|
4018
|
+
/* @__PURE__ */ React44.createElement("div", { className: "shrink-0 flex flex-col items-end gap-1 text-right" }, /* @__PURE__ */ React44.createElement("span", { className: "text-[11px] text-neutral-500 " }, formatDate3(tx.createdAt)), /* @__PURE__ */ React44.createElement("span", { className: "text-[11px] text-neutral-400 capitalize " }, tx.direction.toLowerCase()))
|
|
4019
|
+
))), /* @__PURE__ */ React44.createElement("div", { className: "flex items-center justify-between pt-6 mt-2 " }, /* @__PURE__ */ React44.createElement("span", { className: "text-[11px] text-neutral-400 tracking-[0.2em] uppercase " }, "Page ", currentPage, " of ", totalPages === 0 ? 1 : totalPages), /* @__PURE__ */ React44.createElement("div", { className: "flex items-center gap-2" }, /* @__PURE__ */ React44.createElement(
|
|
4020
4020
|
"button",
|
|
4021
4021
|
{
|
|
4022
4022
|
onClick: () => onPageChange(currentPage - 1),
|
|
4023
|
-
disabled: currentPage
|
|
4023
|
+
disabled: currentPage <= 1 || isListLoading,
|
|
4024
4024
|
className: "p-2 border border-neutral-100 rounded-full bg-white text-neutral-500 hover:text-black hover:border-black disabled:opacity-30 disabled:cursor-not-allowed transition-all outline-none"
|
|
4025
4025
|
},
|
|
4026
4026
|
/* @__PURE__ */ React44.createElement(HugeiconsIcon29, { icon: ArrowLeft01Icon10, size: 14 })
|
|
@@ -4028,11 +4028,11 @@ var UniversalTransactionPage = ({
|
|
|
4028
4028
|
"button",
|
|
4029
4029
|
{
|
|
4030
4030
|
onClick: () => onPageChange(currentPage + 1),
|
|
4031
|
-
disabled: currentPage >= totalPages || isListLoading,
|
|
4031
|
+
disabled: currentPage >= totalPages || isListLoading || totalPages === 0,
|
|
4032
4032
|
className: "p-2 border border-neutral-100 rounded-full bg-white text-neutral-500 hover:text-black hover:border-black disabled:opacity-30 disabled:cursor-not-allowed transition-all outline-none"
|
|
4033
4033
|
},
|
|
4034
4034
|
/* @__PURE__ */ React44.createElement(HugeiconsIcon29, { icon: ArrowRight01Icon10, size: 14 })
|
|
4035
|
-
))))), currentView === "details" && selectedTransaction && /* @__PURE__ */ React44.createElement("div", { className: "w-full text-left" }, /* @__PURE__ */ React44.createElement("div", { className: "flex flex-col items-center justify-center py-10 border-b border-neutral-100 mb-8" }, /* @__PURE__ */ React44.createElement("div", { className: `w-14 h-14 rounded-full flex items-center justify-center mb-4 ${selectedTransaction.direction === "CREDIT" ? "bg-green-50 text-green-600" : "bg-neutral-100 text-neutral-600"}` }, /* @__PURE__ */ React44.createElement(HugeiconsIcon29, { icon: selectedTransaction.direction === "CREDIT" ? ArrowDown01Icon5 : ArrowUp01Icon, size: 24 })), /* @__PURE__ */ React44.createElement("h2", { className: "text-3xl text-black mb-2" }, selectedTransaction.direction === "CREDIT" ? "+" : "-", selectedTransaction.amount, " ", selectedTransaction.currency), /* @__PURE__ */ React44.createElement("span", { className: "text-[11px] tracking-widest text-neutral-500 uppercase px-4 py-1.5 rounded-full bg-neutral-50" }, selectedTransaction.status)), /* @__PURE__ */ React44.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-y-8 gap-x-4
|
|
4035
|
+
))))), currentView === "details" && selectedTransaction && /* @__PURE__ */ React44.createElement("div", { className: "w-full text-left " }, /* @__PURE__ */ React44.createElement("div", { className: "flex flex-col items-center justify-center py-10 border-b border-neutral-100 mb-8" }, /* @__PURE__ */ React44.createElement("div", { className: `w-14 h-14 rounded-full flex items-center justify-center mb-4 ${selectedTransaction.direction === "CREDIT" ? "bg-green-50 text-green-600" : "bg-neutral-100 text-neutral-600"}` }, /* @__PURE__ */ React44.createElement(HugeiconsIcon29, { icon: selectedTransaction.direction === "CREDIT" ? ArrowDown01Icon5 : ArrowUp01Icon, size: 24 })), /* @__PURE__ */ React44.createElement("h2", { className: "text-3xl text-black mb-2" }, selectedTransaction.direction === "CREDIT" ? "+" : "-", selectedTransaction.amount, " ", selectedTransaction.currency), /* @__PURE__ */ React44.createElement("span", { className: "text-[11px] tracking-widest text-neutral-500 uppercase px-4 py-1.5 rounded-full bg-neutral-50 " }, selectedTransaction.status)), /* @__PURE__ */ React44.createElement("div", { className: "grid grid-cols-1 sm:grid-cols-2 gap-y-8 gap-x-4" }, /* @__PURE__ */ React44.createElement("div", null, /* @__PURE__ */ React44.createElement("span", { className: "text-[11px] tracking-[0.2em] text-neutral-400 block mb-2 uppercase " }, "Reference ID"), /* @__PURE__ */ React44.createElement("span", { className: "text-[13px] text-black break-all " }, selectedTransaction.reference)), /* @__PURE__ */ React44.createElement("div", null, /* @__PURE__ */ React44.createElement("span", { className: "text-[11px] tracking-[0.2em] text-neutral-400 block mb-2 uppercase " }, "Date & Time"), /* @__PURE__ */ React44.createElement("span", { className: "text-[13px] text-black " }, formatDate3(selectedTransaction.createdAt), " at ", formatTime(selectedTransaction.createdAt))), /* @__PURE__ */ React44.createElement("div", null, /* @__PURE__ */ React44.createElement("span", { className: "text-[11px] tracking-[0.2em] text-neutral-400 block mb-2 uppercase " }, "Transaction Type"), /* @__PURE__ */ React44.createElement("span", { className: "text-[13px] text-black capitalize " }, selectedTransaction.type.replace("_", " ").toLowerCase())), /* @__PURE__ */ React44.createElement("div", null, /* @__PURE__ */ React44.createElement("span", { className: "text-[11px] tracking-[0.2em] text-neutral-400 block mb-2 uppercase " }, "Flow Direction"), /* @__PURE__ */ React44.createElement("span", { className: "text-[13px] text-black capitalize " }, selectedTransaction.direction.toLowerCase()))))), isDirectionModalOpen && /* @__PURE__ */ React44.createElement("div", { className: "fixed inset-0 z-110 flex items-center justify-center p-4" }, /* @__PURE__ */ React44.createElement("div", { className: "absolute inset-0 bg-black/30", onClick: () => setIsDirectionModalOpen(false) }), /* @__PURE__ */ React44.createElement("div", { ref: directionDropdownRef, className: "relative w-72 bg-white shadow-2xl rounded-2xl flex flex-col items-center overflow-hidden animate-in zoom-in-95 duration-200" }, /* @__PURE__ */ React44.createElement("div", { className: "p-6 text-center w-full" }, /* @__PURE__ */ React44.createElement("p", { className: "text-[14px] text-black tracking-tight " }, "Filter by Flow")), /* @__PURE__ */ React44.createElement("div", { className: "w-full flex flex-col pl-2 pr-2" }, ["ALL", "CREDIT", "DEBIT"].map((option) => /* @__PURE__ */ React44.createElement(
|
|
4036
4036
|
"button",
|
|
4037
4037
|
{
|
|
4038
4038
|
key: option,
|
|
@@ -4050,7 +4050,7 @@ var UniversalTransactionPage = ({
|
|
|
4050
4050
|
className: "w-full py-3 text-[13px] text-neutral-600 hover:bg-neutral-50 transition-colors outline-none "
|
|
4051
4051
|
},
|
|
4052
4052
|
"Cancel"
|
|
4053
|
-
)))), isTypeModalOpen && /* @__PURE__ */ React44.createElement("div", { className: "fixed inset-0 z-110 flex items-center justify-center p-4" }, /* @__PURE__ */ React44.createElement("div", { className: "absolute inset-0 bg-black/30", onClick: () => setIsTypeModalOpen(false) }), /* @__PURE__ */ React44.createElement("div", { ref: typeDropdownRef, className: "relative w-72 bg-white shadow-2xl rounded-2xl flex flex-col items-center overflow-hidden animate-in zoom-in-95 duration-200" }, /* @__PURE__ */ React44.createElement("div", { className: "p-6 text-center w-full" }, /* @__PURE__ */ React44.createElement("
|
|
4053
|
+
)))), isTypeModalOpen && /* @__PURE__ */ React44.createElement("div", { className: "fixed inset-0 z-110 flex items-center justify-center p-4" }, /* @__PURE__ */ React44.createElement("div", { className: "absolute inset-0 bg-black/30", onClick: () => setIsTypeModalOpen(false) }), /* @__PURE__ */ React44.createElement("div", { ref: typeDropdownRef, className: "relative w-72 bg-white shadow-2xl rounded-2xl flex flex-col items-center overflow-hidden animate-in zoom-in-95 duration-200" }, /* @__PURE__ */ React44.createElement("div", { className: "p-6 text-center w-full" }, /* @__PURE__ */ React44.createElement("p", { className: "text-[14px] text-black tracking-tight " }, "Filter by Type")), /* @__PURE__ */ React44.createElement("div", { className: "w-full flex flex-col pl-2 pr-2" }, [
|
|
4054
4054
|
{ label: "All Transactions", value: "ALL" },
|
|
4055
4055
|
{ label: "Wallet Transactions", value: "WALLET_TRANSACTION" },
|
|
4056
4056
|
{ label: "Card Transactions", value: "CARD_TRANSACTION" }
|