@retinalabsllc/zairusjs 9.0.10 → 9.0.20
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.d.mts +1 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +71 -50
- package/dist/index.mjs +78 -57
- package/package.json +1 -1
package/dist/index.d.mts
CHANGED
package/dist/index.d.ts
CHANGED
package/dist/index.js
CHANGED
|
@@ -689,7 +689,7 @@ var MobileNav = ({ items }) => {
|
|
|
689
689
|
/* @__PURE__ */ import_react9.default.createElement(
|
|
690
690
|
"span",
|
|
691
691
|
{
|
|
692
|
-
className: `text-[9px] tracking-wide transition-colors duration-300
|
|
692
|
+
className: `text-[9px] tracking-wide transition-colors duration-300 ${isActive ? "text-black" : "text-neutral-400"}`
|
|
693
693
|
},
|
|
694
694
|
item.label
|
|
695
695
|
)
|
|
@@ -1242,11 +1242,11 @@ var UniversalErrorView = ({
|
|
|
1242
1242
|
title = "Access Restricted";
|
|
1243
1243
|
description = apiMessage || `You have insufficient permissions to view this ${envName}. Please contact your administrator.`;
|
|
1244
1244
|
}
|
|
1245
|
-
return /* @__PURE__ */ import_react21.default.createElement("div", { className: "flex flex-col items-center justify-center h-screen w-full px-4 animate-in fade-in duration-500" }, /* @__PURE__ */ import_react21.default.createElement("div", { className: "mb-4 flex justify-center" }, /* @__PURE__ */ import_react21.default.createElement(import_react22.HugeiconsIcon, { icon: IconComponent, size: 48, className: "text-neutral-300" })), /* @__PURE__ */ import_react21.default.createElement("h2", { className: "text-lg text-black tracking-tight
|
|
1245
|
+
return /* @__PURE__ */ import_react21.default.createElement("div", { className: "flex flex-col items-center justify-center h-screen w-full px-4 animate-in fade-in duration-500" }, /* @__PURE__ */ import_react21.default.createElement("div", { className: "mb-4 flex justify-center" }, /* @__PURE__ */ import_react21.default.createElement(import_react22.HugeiconsIcon, { icon: IconComponent, size: 48, className: "text-neutral-300" })), /* @__PURE__ */ import_react21.default.createElement("h2", { className: "text-lg text-black tracking-tight " }, title), /* @__PURE__ */ import_react21.default.createElement("p", { className: "text-xs mt-2 mb-8 text-neutral-500 max-w-sm text-center leading-relaxed" }, description), /* @__PURE__ */ import_react21.default.createElement("div", { className: "flex flex-col sm:flex-row items-center gap-3 w-full justify-center sm:w-auto" }, isNotFoundError || isPermissionError ? /* @__PURE__ */ import_react21.default.createElement(
|
|
1246
1246
|
"button",
|
|
1247
1247
|
{
|
|
1248
1248
|
onClick: () => window.location.href = returnUrl,
|
|
1249
|
-
className: "px-6 py-2 text-black border border-neutral-200 hover:bg-neutral-50 rounded-full text-[11px] tracking-widest transition-colors w-full sm:w-auto outline-none
|
|
1249
|
+
className: "px-6 py-2 text-black border border-neutral-200 hover:bg-neutral-50 rounded-full text-[11px] tracking-widest transition-colors w-full sm:w-auto outline-none "
|
|
1250
1250
|
},
|
|
1251
1251
|
returnLabel
|
|
1252
1252
|
) : (
|
|
@@ -1255,14 +1255,14 @@ var UniversalErrorView = ({
|
|
|
1255
1255
|
"button",
|
|
1256
1256
|
{
|
|
1257
1257
|
onClick: () => window.location.href = returnUrl,
|
|
1258
|
-
className: "px-6 py-2 bg-transparent border border-neutral-200 text-neutral-500 hover:text-black hover:bg-neutral-50 rounded-full text-[11px] tracking-widest transition-colors w-full sm:w-auto outline-none
|
|
1258
|
+
className: "px-6 py-2 bg-transparent border border-neutral-200 text-neutral-500 hover:text-black hover:bg-neutral-50 rounded-full text-[11px] tracking-widest transition-colors w-full sm:w-auto outline-none "
|
|
1259
1259
|
},
|
|
1260
1260
|
"Back Home"
|
|
1261
1261
|
), /* @__PURE__ */ import_react21.default.createElement(
|
|
1262
1262
|
"button",
|
|
1263
1263
|
{
|
|
1264
1264
|
onClick: onRetry,
|
|
1265
|
-
className: "px-6 py-2 bg-black text-white hover:bg-neutral-800 rounded-full text-[11px] tracking-widest transition-colors w-full sm:w-auto outline-none capitalize
|
|
1265
|
+
className: "px-6 py-2 bg-black text-white hover:bg-neutral-800 rounded-full text-[11px] tracking-widest transition-colors w-full sm:w-auto outline-none capitalize "
|
|
1266
1266
|
},
|
|
1267
1267
|
"Refresh ",
|
|
1268
1268
|
envName
|
|
@@ -1413,7 +1413,7 @@ var UniversalTransactionPage = ({
|
|
|
1413
1413
|
className: "p-2 bg-white border border-neutral-200 rounded-full text-black hover:bg-neutral-50 disabled:opacity-30 disabled:cursor-not-allowed transition-all outline-none"
|
|
1414
1414
|
},
|
|
1415
1415
|
/* @__PURE__ */ import_react23.default.createElement(import_react24.HugeiconsIcon, { icon: import_core_free_icons7.ArrowRight01Icon, size: 14 })
|
|
1416
|
-
)))))), selectedTransaction && /* @__PURE__ */ import_react23.default.createElement("div", { className: "fixed inset-0 z-120 flex items-center justify-center p-4 pointer-events-auto" }, /* @__PURE__ */ import_react23.default.createElement("div", { className: "absolute inset-0 bg-black/40 ", onClick: () => setSelectedTransaction(null) }), /* @__PURE__ */ import_react23.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 max-h-[90vh]" }, /* @__PURE__ */ import_react23.default.createElement("div", { className: "flex items-center justify-between p-5 shrink-0 " }, /* @__PURE__ */ import_react23.default.createElement("h3", { className: "text-[15px] text-black tracking-tight" }, "Details"), /* @__PURE__ */ import_react23.default.createElement("button", { onClick: () => setSelectedTransaction(null), className: "text-neutral-400 hover:text-black transition-colors outline-none" }, /* @__PURE__ */ import_react23.default.createElement(import_react24.HugeiconsIcon, { icon: import_core_free_icons7.CancelCircleIcon, size: 18 }))), /* @__PURE__ */ import_react23.default.createElement("div", { className: "flex-1 overflow-y-auto custom-scrollbar p-6" }, /* @__PURE__ */ import_react23.default.createElement("div", { className: "flex flex-col items-center justify-center mb-4" }, /* @__PURE__ */ import_react23.default.createElement("div", { className: `w-12 h-12 rounded-full flex items-center justify-center mb-4 bg-neutral-100 text-black` }, /* @__PURE__ */ import_react23.default.createElement(import_react24.HugeiconsIcon, { icon: selectedTransaction.direction === "CREDIT" ? import_core_free_icons7.ArrowDownRight01Icon : import_core_free_icons7.ArrowUpRight01Icon, size: 20 })), /* @__PURE__ */ import_react23.default.createElement("h2", { className: `text-2xl text-black mb-2 transition-all duration-300
|
|
1416
|
+
)))))), selectedTransaction && /* @__PURE__ */ import_react23.default.createElement("div", { className: "fixed inset-0 z-120 flex items-center justify-center p-4 pointer-events-auto" }, /* @__PURE__ */ import_react23.default.createElement("div", { className: "absolute inset-0 bg-black/40 ", onClick: () => setSelectedTransaction(null) }), /* @__PURE__ */ import_react23.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 max-h-[90vh]" }, /* @__PURE__ */ import_react23.default.createElement("div", { className: "flex items-center justify-between p-5 shrink-0 " }, /* @__PURE__ */ import_react23.default.createElement("h3", { className: "text-[15px] text-black tracking-tight" }, "Details"), /* @__PURE__ */ import_react23.default.createElement("button", { onClick: () => setSelectedTransaction(null), className: "text-neutral-400 hover:text-black transition-colors outline-none" }, /* @__PURE__ */ import_react23.default.createElement(import_react24.HugeiconsIcon, { icon: import_core_free_icons7.CancelCircleIcon, size: 18 }))), /* @__PURE__ */ import_react23.default.createElement("div", { className: "flex-1 overflow-y-auto custom-scrollbar p-6" }, /* @__PURE__ */ import_react23.default.createElement("div", { className: "flex flex-col items-center justify-center mb-4" }, /* @__PURE__ */ import_react23.default.createElement("div", { className: `w-12 h-12 rounded-full flex items-center justify-center mb-4 bg-neutral-100 text-black` }, /* @__PURE__ */ import_react23.default.createElement(import_react24.HugeiconsIcon, { icon: selectedTransaction.direction === "CREDIT" ? import_core_free_icons7.ArrowDownRight01Icon : import_core_free_icons7.ArrowUpRight01Icon, size: 20 })), /* @__PURE__ */ import_react23.default.createElement("h2", { className: `text-2xl text-black mb-2 transition-all duration-300 ${hideBalanceAmounts ? "blur-[6px] opacity-40 select-none" : ""}` }, selectedTransaction.direction === "CREDIT" ? "+" : "-", selectedTransaction.amount, " ", selectedTransaction.currency), /* @__PURE__ */ import_react23.default.createElement("span", { className: "text-[9px] tracking-widest text-neutral-500 px-4 py-1.5 rounded-full bg-neutral-50" }, selectedTransaction.status)), /* @__PURE__ */ import_react23.default.createElement("div", { className: "grid grid-cols-1 gap-y-8 gap-x-4 mb-10 mt-6" }, /* @__PURE__ */ import_react23.default.createElement("div", null, /* @__PURE__ */ import_react23.default.createElement("span", { className: "text-[11px] tracking-[0.2em] text-neutral-400 block mb-2" }, "Reference ID"), /* @__PURE__ */ import_react23.default.createElement("span", { className: "text-[13px] text-black break-all" }, selectedTransaction.reference)), /* @__PURE__ */ import_react23.default.createElement("div", null, /* @__PURE__ */ import_react23.default.createElement("span", { className: "text-[11px] tracking-[0.2em] text-neutral-400 block mb-2" }, "Date & Time"), /* @__PURE__ */ import_react23.default.createElement("span", { className: "text-[13px] text-black" }, formatDate(selectedTransaction.createdAt), " at ", formatTime(selectedTransaction.createdAt))), /* @__PURE__ */ import_react23.default.createElement("div", null, /* @__PURE__ */ import_react23.default.createElement("span", { className: "text-[11px] tracking-[0.2em] text-neutral-400 block mb-2" }, "Transaction Type"), /* @__PURE__ */ import_react23.default.createElement("span", { className: "text-[13px] text-black capitalize" }, selectedTransaction.type.replace("_", " ").toLowerCase())), /* @__PURE__ */ import_react23.default.createElement("div", null, /* @__PURE__ */ import_react23.default.createElement("span", { className: "text-[11px] tracking-[0.2em] text-neutral-400 block mb-2" }, "Flow Direction"), /* @__PURE__ */ import_react23.default.createElement("span", { className: "text-[13px] text-black capitalize" }, selectedTransaction.direction.toLowerCase())), selectedTransaction.metadata?.fromAddress && selectedTransaction.metadata?.toAddress && /* @__PURE__ */ import_react23.default.createElement("div", null, /* @__PURE__ */ import_react23.default.createElement("span", { className: "text-[11px] tracking-[0.2em] text-neutral-400 block mb-2" }, "Transfer Route"), /* @__PURE__ */ import_react23.default.createElement("div", { className: "flex items-center gap-2 text-[13px] text-black" }, /* @__PURE__ */ import_react23.default.createElement("span", { className: "truncate " }, truncateAddress(String(selectedTransaction.metadata.fromAddress))), /* @__PURE__ */ import_react23.default.createElement("span", { className: "text-neutral-400" }, "\u2192"), /* @__PURE__ */ import_react23.default.createElement("span", { className: "truncate " }, truncateAddress(String(selectedTransaction.metadata.toAddress))))), selectedTransaction.metadata && Object.entries(selectedTransaction.metadata).map(([key, value]) => {
|
|
1417
1417
|
if (key === "fromAddress" || key === "toAddress") return null;
|
|
1418
1418
|
if (value === null || value === void 0 || typeof value === "object") return null;
|
|
1419
1419
|
const formattedKey = key.replace(/([A-Z])/g, " $1").replace(/^./, (str) => str.toUpperCase());
|
|
@@ -1430,7 +1430,7 @@ var UniversalTransactionPage = ({
|
|
|
1430
1430
|
"button",
|
|
1431
1431
|
{
|
|
1432
1432
|
onClick: () => onReportTransaction && onReportTransaction(selectedTransaction),
|
|
1433
|
-
className: "w-full flex items-center
|
|
1433
|
+
className: "w-full flex items-center justify-center py-2.5 rounded-full border border-neutral-200 text-black hover:bg-neutral-50 transition-colors outline-none text-[13px] tracking-wide mt-2"
|
|
1434
1434
|
},
|
|
1435
1435
|
"Report Transaction"
|
|
1436
1436
|
), selectedTransaction.type === "WALLET_TRANSACTION" && /* @__PURE__ */ import_react23.default.createElement(
|
|
@@ -1439,7 +1439,7 @@ var UniversalTransactionPage = ({
|
|
|
1439
1439
|
href: `https://basescan.org/tx/${selectedTransaction.reference}`,
|
|
1440
1440
|
target: "_blank",
|
|
1441
1441
|
rel: "noopener noreferrer",
|
|
1442
|
-
className: "w-full flex items-center
|
|
1442
|
+
className: "w-full flex items-center justify-center py-2.5 rounded-full border border-neutral-200 text-black hover:bg-neutral-50 transition-colors outline-none text-[13px] tracking-wide mt-2"
|
|
1443
1443
|
},
|
|
1444
1444
|
"View in block explorer"
|
|
1445
1445
|
))))), isDirectionModalOpen && /* @__PURE__ */ import_react23.default.createElement("div", { className: "fixed inset-0 z-110 flex items-center justify-center p-4" }, /* @__PURE__ */ import_react23.default.createElement("div", { className: "absolute inset-0 bg-black/40 ", onClick: () => setIsDirectionModalOpen(false) }), /* @__PURE__ */ import_react23.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_react23.default.createElement("div", { className: "p-6 text-center w-full mb-2" }, /* @__PURE__ */ import_react23.default.createElement("h3", { className: "text-[14px] text-black tracking-tight" }, "Payment Type")), /* @__PURE__ */ import_react23.default.createElement("div", { className: "w-full flex flex-col pl-2 pr-2 gap-1" }, ["ALL", "CREDIT", "DEBIT"].map((option) => /* @__PURE__ */ import_react23.default.createElement(
|
|
@@ -1450,14 +1450,14 @@ var UniversalTransactionPage = ({
|
|
|
1450
1450
|
onDirectionFilterChange(option);
|
|
1451
1451
|
setIsDirectionModalOpen(false);
|
|
1452
1452
|
},
|
|
1453
|
-
className: `text-left px-4 py-3 text-[11px] tracking-wide transition-colors rounded-full flex items-center justify-between outline-none ${activeDirectionFilter === option ? "bg-neutral-100 text-black
|
|
1453
|
+
className: `text-left px-4 py-3 text-[11px] tracking-wide transition-colors rounded-full flex items-center justify-between outline-none ${activeDirectionFilter === option ? "bg-neutral-100 text-black " : "text-neutral-500 hover:bg-neutral-50 hover:text-black"}`
|
|
1454
1454
|
},
|
|
1455
1455
|
/* @__PURE__ */ import_react23.default.createElement("span", { className: "truncate pr-2" }, option.charAt(0).toUpperCase() + option.slice(1).toLowerCase())
|
|
1456
1456
|
))), /* @__PURE__ */ import_react23.default.createElement("div", { className: "w-full flex mt-2 " }, /* @__PURE__ */ import_react23.default.createElement(
|
|
1457
1457
|
"button",
|
|
1458
1458
|
{
|
|
1459
1459
|
onClick: () => setIsDirectionModalOpen(false),
|
|
1460
|
-
className: "w-full py-4 text-[13px] text-neutral-500 hover:text-black transition-colors outline-none
|
|
1460
|
+
className: "w-full py-4 text-[13px] text-neutral-500 hover:text-black transition-colors outline-none "
|
|
1461
1461
|
},
|
|
1462
1462
|
"Cancel"
|
|
1463
1463
|
)))), isTypeModalOpen && /* @__PURE__ */ import_react23.default.createElement("div", { className: "fixed inset-0 z-110 flex items-center justify-center p-4" }, /* @__PURE__ */ import_react23.default.createElement("div", { className: "absolute inset-0 bg-black/40 ", onClick: () => setIsTypeModalOpen(false) }), /* @__PURE__ */ import_react23.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_react23.default.createElement("div", { className: "p-6 text-center w-full mb-2" }, /* @__PURE__ */ import_react23.default.createElement("h3", { className: "text-[14px] text-black tracking-tight" }, "Transactions Type")), /* @__PURE__ */ import_react23.default.createElement("div", { className: "w-full flex flex-col pl-2 pr-2 gap-1" }, [
|
|
@@ -1472,14 +1472,14 @@ var UniversalTransactionPage = ({
|
|
|
1472
1472
|
onTypeFilterChange(option.value);
|
|
1473
1473
|
setIsTypeModalOpen(false);
|
|
1474
1474
|
},
|
|
1475
|
-
className: `text-left px-4 py-3 text-[11px] tracking-wide transition-colors rounded-full flex items-center justify-between outline-none ${activeTypeFilter === option.value ? "bg-neutral-100 text-black
|
|
1475
|
+
className: `text-left px-4 py-3 text-[11px] tracking-wide transition-colors rounded-full flex items-center justify-between outline-none ${activeTypeFilter === option.value ? "bg-neutral-100 text-black " : "text-neutral-500 hover:bg-neutral-50 hover:text-black"}`
|
|
1476
1476
|
},
|
|
1477
1477
|
/* @__PURE__ */ import_react23.default.createElement("span", { className: "truncate pr-2" }, option.label.charAt(0).toUpperCase() + option.label.slice(1).toLowerCase())
|
|
1478
1478
|
))), /* @__PURE__ */ import_react23.default.createElement("div", { className: "w-full flex mt-2 " }, /* @__PURE__ */ import_react23.default.createElement(
|
|
1479
1479
|
"button",
|
|
1480
1480
|
{
|
|
1481
1481
|
onClick: () => setIsTypeModalOpen(false),
|
|
1482
|
-
className: "w-full py-4 text-[13px] text-neutral-500 hover:text-black transition-colors outline-none
|
|
1482
|
+
className: "w-full py-4 text-[13px] text-neutral-500 hover:text-black transition-colors outline-none "
|
|
1483
1483
|
},
|
|
1484
1484
|
"Cancel"
|
|
1485
1485
|
)))));
|
|
@@ -1541,14 +1541,14 @@ var UniversalHomeView = ({
|
|
|
1541
1541
|
onClick: primaryAction.onClick,
|
|
1542
1542
|
className: "px-6 py-2.5 sm:px-8 sm:py-2.5"
|
|
1543
1543
|
},
|
|
1544
|
-
/* @__PURE__ */ import_react25.default.createElement("span", { className: "flex items-center gap-1.5 text-[13px] tracking-wide
|
|
1544
|
+
/* @__PURE__ */ import_react25.default.createElement("span", { className: "flex items-center gap-1.5 text-[13px] tracking-wide " }, primaryAction.label, primaryAction.icon && /* @__PURE__ */ import_react25.default.createElement(import_react26.HugeiconsIcon, { icon: primaryAction.icon, size: 16 }))
|
|
1545
1545
|
), secondaryAction && /* @__PURE__ */ import_react25.default.createElement(
|
|
1546
1546
|
"button",
|
|
1547
1547
|
{
|
|
1548
1548
|
onClick: secondaryAction.onClick,
|
|
1549
1549
|
className: "flex items-center gap-1.5 px-6 py-2.5 sm:px-8 sm:py-2.5 rounded-full border border-neutral-200 text-black hover:bg-neutral-50 transition-colors outline-none"
|
|
1550
1550
|
},
|
|
1551
|
-
/* @__PURE__ */ import_react25.default.createElement("span", { className: "text-[13px] tracking-wide
|
|
1551
|
+
/* @__PURE__ */ import_react25.default.createElement("span", { className: "text-[13px] tracking-wide " }, secondaryAction.label),
|
|
1552
1552
|
secondaryAction.icon && /* @__PURE__ */ import_react25.default.createElement(import_react26.HugeiconsIcon, { icon: secondaryAction.icon, size: 16 })
|
|
1553
1553
|
)))), /* @__PURE__ */ import_react25.default.createElement("div", { className: "w-full mt-2" }, /* @__PURE__ */ import_react25.default.createElement(
|
|
1554
1554
|
UniversalTransactionPage,
|
|
@@ -1621,9 +1621,9 @@ var UniversalWalletPage = ({
|
|
|
1621
1621
|
onClick: () => setSelectedWallet(wallet),
|
|
1622
1622
|
className: "flex items-center justify-between py-4 hover:bg-neutral-50 transition-colors cursor-pointer group min-w-0 px-3 -mx-3 rounded-xl"
|
|
1623
1623
|
},
|
|
1624
|
-
/* @__PURE__ */ import_react27.default.createElement("div", { className: "flex items-center gap-4 min-w-0 flex-1" }, /* @__PURE__ */ import_react27.default.createElement(WalletLogo, { src: wallet.logoSrc, alt: wallet.name }), /* @__PURE__ */ import_react27.default.createElement("div", { className: "min-w-0 flex-1 flex flex-col gap-1" }, /* @__PURE__ */ import_react27.default.createElement("p", { className: "text-[13px] text-black truncate
|
|
1624
|
+
/* @__PURE__ */ import_react27.default.createElement("div", { className: "flex items-center gap-4 min-w-0 flex-1" }, /* @__PURE__ */ import_react27.default.createElement(WalletLogo, { src: wallet.logoSrc, alt: wallet.name }), /* @__PURE__ */ import_react27.default.createElement("div", { className: "min-w-0 flex-1 flex flex-col gap-1" }, /* @__PURE__ */ import_react27.default.createElement("p", { className: "text-[13px] text-black truncate " }, wallet.name), /* @__PURE__ */ import_react27.default.createElement("p", { className: `text-[13px] text-neutral-500 truncate transition-all duration-300 ${hideBalanceAmounts ? "blur-sm opacity-40 select-none" : ""}` }, wallet.balance, " ", wallet.currency))),
|
|
1625
1625
|
/* @__PURE__ */ import_react27.default.createElement("div", { className: "shrink-0 flex flex-col items-end gap-1 text-right" }, /* @__PURE__ */ import_react27.default.createElement("span", { className: "text-[10px] tracking-wide text-neutral-600 bg-neutral-100 px-2.5 py-1 rounded-full " }, wallet.network))
|
|
1626
|
-
)))))), selectedWallet && /* @__PURE__ */ import_react27.default.createElement("div", { className: "fixed inset-0 z-120 flex items-center justify-center p-4 pointer-events-auto" }, /* @__PURE__ */ import_react27.default.createElement("div", { className: "absolute inset-0 bg-black/40 ", onClick: () => setSelectedWallet(null) }), /* @__PURE__ */ import_react27.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 max-h-[90vh]" }, /* @__PURE__ */ import_react27.default.createElement("div", { className: "flex items-center justify-between p-5 shrink-0 " }, /* @__PURE__ */ import_react27.default.createElement("h3", { className: "text-[15px] text-black tracking-tight" }, "Wallet Details"), /* @__PURE__ */ import_react27.default.createElement("button", { onClick: () => setSelectedWallet(null), className: "text-neutral-400 hover:text-black transition-colors outline-none" }, /* @__PURE__ */ import_react27.default.createElement(import_react28.HugeiconsIcon, { icon: import_core_free_icons9.CancelCircleIcon, size: 18 }))), /* @__PURE__ */ import_react27.default.createElement("div", { className: "flex-1 overflow-y-auto custom-scrollbar p-6 pt-6" }, /* @__PURE__ */ import_react27.default.createElement("div", { className: "flex flex-col items-center justify-center mb-6" }, /* @__PURE__ */ import_react27.default.createElement(WalletLogo, { src: selectedWallet.logoSrc, alt: selectedWallet.name, sizeClass: "w-14 h-14 mb-4" }), /* @__PURE__ */ import_react27.default.createElement("h2", { className: `text-2xl text-black mb-2 transition-all duration-300
|
|
1626
|
+
)))))), selectedWallet && /* @__PURE__ */ import_react27.default.createElement("div", { className: "fixed inset-0 z-120 flex items-center justify-center p-4 pointer-events-auto" }, /* @__PURE__ */ import_react27.default.createElement("div", { className: "absolute inset-0 bg-black/40 ", onClick: () => setSelectedWallet(null) }), /* @__PURE__ */ import_react27.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 max-h-[90vh]" }, /* @__PURE__ */ import_react27.default.createElement("div", { className: "flex items-center justify-between p-5 shrink-0 " }, /* @__PURE__ */ import_react27.default.createElement("h3", { className: "text-[15px] text-black tracking-tight" }, "Wallet Details"), /* @__PURE__ */ import_react27.default.createElement("button", { onClick: () => setSelectedWallet(null), className: "text-neutral-400 hover:text-black transition-colors outline-none" }, /* @__PURE__ */ import_react27.default.createElement(import_react28.HugeiconsIcon, { icon: import_core_free_icons9.CancelCircleIcon, size: 18 }))), /* @__PURE__ */ import_react27.default.createElement("div", { className: "flex-1 overflow-y-auto custom-scrollbar p-6 pt-6" }, /* @__PURE__ */ import_react27.default.createElement("div", { className: "flex flex-col items-center justify-center mb-6" }, /* @__PURE__ */ import_react27.default.createElement(WalletLogo, { src: selectedWallet.logoSrc, alt: selectedWallet.name, sizeClass: "w-14 h-14 mb-4" }), /* @__PURE__ */ import_react27.default.createElement("h2", { className: `text-2xl text-black mb-2 transition-all duration-300 ${hideBalanceAmounts ? "blur-[6px] opacity-40 select-none" : ""}` }, selectedWallet.balance, " ", selectedWallet.currency), /* @__PURE__ */ import_react27.default.createElement("span", { className: "text-[9px] tracking-widest text-neutral-500 px-4 py-1.5 rounded-full border border-neutral-200 uppercase mt-1 " }, selectedWallet.network, " NETWORK")), renderQrCode && /* @__PURE__ */ import_react27.default.createElement("div", { className: "w-full flex justify-center mb-6 mix-blend-multiply" }, renderQrCode(selectedWallet)), /* @__PURE__ */ import_react27.default.createElement("div", { className: "grid grid-cols-1 gap-y-6 gap-x-4 mb-10" }, /* @__PURE__ */ import_react27.default.createElement("div", null, /* @__PURE__ */ import_react27.default.createElement("span", { className: "text-[11px] tracking-[0.2em] text-neutral-400 block mb-2" }, "Wallet Address"), /* @__PURE__ */ import_react27.default.createElement("span", { className: "text-[13px] text-black break-all " }, selectedWallet.address)), /* @__PURE__ */ import_react27.default.createElement("div", null, /* @__PURE__ */ import_react27.default.createElement("span", { className: "text-[11px] tracking-[0.2em] text-neutral-400 block mb-2" }, "Wallet Name"), /* @__PURE__ */ import_react27.default.createElement("span", { className: "text-[13px] text-black" }, selectedWallet.name))), /* @__PURE__ */ import_react27.default.createElement("div", { className: "flex flex-col gap-3" }, /* @__PURE__ */ import_react27.default.createElement(
|
|
1627
1627
|
ThreeDActionButton,
|
|
1628
1628
|
{
|
|
1629
1629
|
onClick: () => onDownloadPayId && onDownloadPayId(selectedWallet),
|
|
@@ -1635,7 +1635,7 @@ var UniversalWalletPage = ({
|
|
|
1635
1635
|
"button",
|
|
1636
1636
|
{
|
|
1637
1637
|
onClick: () => handleCopy(selectedWallet),
|
|
1638
|
-
className: "w-full flex
|
|
1638
|
+
className: "w-full flex items-center justify-center py-2.5 rounded-full border border-neutral-200 text-black hover:bg-neutral-50 outline-none text-[13px] tracking-wide transition-colors"
|
|
1639
1639
|
},
|
|
1640
1640
|
"Copy Wallet Address"
|
|
1641
1641
|
))))));
|
|
@@ -1668,12 +1668,12 @@ var ConfirmationDialog = ({
|
|
|
1668
1668
|
className: "absolute inset-0 bg-black/40 ",
|
|
1669
1669
|
onClick: () => !isProcessing && onClose()
|
|
1670
1670
|
}
|
|
1671
|
-
), /* @__PURE__ */ import_react29.default.createElement("div", { className: "relative w-72 bg-white rounded-2xl flex flex-col items-center overflow-hidden shadow-2xl animate-in zoom-in-95 duration-200" }, /* @__PURE__ */ import_react29.default.createElement("div", { className: "p-6 pb-4 text-center w-full" }, /* @__PURE__ */ import_react29.default.createElement("h3", { className: "text-[17px] text-black
|
|
1671
|
+
), /* @__PURE__ */ import_react29.default.createElement("div", { className: "relative w-72 bg-white rounded-2xl flex flex-col items-center overflow-hidden shadow-2xl animate-in zoom-in-95 duration-200" }, /* @__PURE__ */ import_react29.default.createElement("div", { className: "p-6 pb-4 text-center w-full" }, /* @__PURE__ */ import_react29.default.createElement("h3", { className: "text-[17px] text-black tracking-tight mb-2" }, title), /* @__PURE__ */ import_react29.default.createElement("p", { className: "text-[12px] text-neutral-500 leading-relaxed px-2" }, message)), /* @__PURE__ */ import_react29.default.createElement("div", { className: "w-full flex" }, /* @__PURE__ */ import_react29.default.createElement(
|
|
1672
1672
|
"button",
|
|
1673
1673
|
{
|
|
1674
1674
|
onClick: onClose,
|
|
1675
1675
|
disabled: isProcessing,
|
|
1676
|
-
className: "flex-1 py-4 text-[14px] text-neutral-500 hover:bg-neutral-50 transition-colors disabled:opacity-50 outline-none
|
|
1676
|
+
className: "flex-1 py-4 text-[14px] text-neutral-500 hover:bg-neutral-50 transition-colors disabled:opacity-50 outline-none "
|
|
1677
1677
|
},
|
|
1678
1678
|
cancelText
|
|
1679
1679
|
), /* @__PURE__ */ import_react29.default.createElement(
|
|
@@ -1681,7 +1681,7 @@ var ConfirmationDialog = ({
|
|
|
1681
1681
|
{
|
|
1682
1682
|
onClick: onConfirm,
|
|
1683
1683
|
disabled: isProcessing,
|
|
1684
|
-
className: `flex-1 py-4 text-[
|
|
1684
|
+
className: `flex-1 py-4 text-[13px] transition-colors disabled:opacity-50 flex justify-center items-center outline-none ${isDestructive ? "text-red-500 hover:bg-red-50" : "text-black hover:bg-neutral-50"}`
|
|
1685
1685
|
},
|
|
1686
1686
|
isProcessing ? /* @__PURE__ */ import_react29.default.createElement(import_react30.HugeiconsIcon, { icon: import_core_free_icons10.Loading03Icon, className: "animate-spin", size: 18 }) : confirmText
|
|
1687
1687
|
))));
|
|
@@ -1693,7 +1693,7 @@ var import_react32 = require("@hugeicons/react");
|
|
|
1693
1693
|
var import_core_free_icons11 = require("@hugeicons/core-free-icons");
|
|
1694
1694
|
var PinDialerBottomSheet = ({
|
|
1695
1695
|
isOpen,
|
|
1696
|
-
title = "
|
|
1696
|
+
title = "Action Required",
|
|
1697
1697
|
isVerifying = false,
|
|
1698
1698
|
onClose,
|
|
1699
1699
|
onComplete
|
|
@@ -1717,43 +1717,52 @@ var PinDialerBottomSheet = ({
|
|
|
1717
1717
|
}
|
|
1718
1718
|
};
|
|
1719
1719
|
if (!isOpen) return null;
|
|
1720
|
-
return /* @__PURE__ */ import_react31.default.createElement("div", { className: "fixed inset-0 z-150 flex
|
|
1720
|
+
return /* @__PURE__ */ import_react31.default.createElement("div", { className: "fixed inset-0 z-150 flex items-center justify-center p-4 pointer-events-auto" }, /* @__PURE__ */ import_react31.default.createElement(
|
|
1721
1721
|
"div",
|
|
1722
1722
|
{
|
|
1723
|
-
className: "absolute inset-0 bg-black/40 animate-in fade-in duration-
|
|
1723
|
+
className: "absolute inset-0 bg-black/40 animate-in fade-in duration-200",
|
|
1724
1724
|
onClick: () => {
|
|
1725
1725
|
if (!isVerifying) onClose();
|
|
1726
1726
|
}
|
|
1727
1727
|
}
|
|
1728
|
-
), /* @__PURE__ */ import_react31.default.createElement("div", { className: "relative w-full max-w-
|
|
1728
|
+
), /* @__PURE__ */ import_react31.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" }, /* @__PURE__ */ import_react31.default.createElement("div", { className: "flex items-center justify-between p-5 shrink-0" }, /* @__PURE__ */ import_react31.default.createElement("h3", { className: "text-[16px] text-black font-medium tracking-tight" }, title), /* @__PURE__ */ import_react31.default.createElement(
|
|
1729
|
+
"button",
|
|
1730
|
+
{
|
|
1731
|
+
onClick: () => {
|
|
1732
|
+
if (!isVerifying) onClose();
|
|
1733
|
+
},
|
|
1734
|
+
className: "text-neutral-400 hover:text-black transition-colors outline-none"
|
|
1735
|
+
},
|
|
1736
|
+
/* @__PURE__ */ import_react31.default.createElement(import_react32.HugeiconsIcon, { icon: import_core_free_icons11.CancelCircleIcon, size: 20 })
|
|
1737
|
+
)), /* @__PURE__ */ import_react31.default.createElement("div", { className: "flex flex-col px-6 pb-8 pt-2 relative" }, /* @__PURE__ */ import_react31.default.createElement("p", { className: "text-center text-[13px] text-neutral-500 mb-6 tracking-wide" }, "Confirm your account pin to continue"), /* @__PURE__ */ import_react31.default.createElement("div", { className: "flex justify-center gap-4 mb-8" }, [0, 1, 2, 3].map((i) => /* @__PURE__ */ import_react31.default.createElement(
|
|
1729
1738
|
"div",
|
|
1730
1739
|
{
|
|
1731
1740
|
key: i,
|
|
1732
|
-
className: `w-3
|
|
1741
|
+
className: `w-3 h-3 rounded-full transition-colors duration-200 ${pin.length > i ? "bg-black" : "bg-neutral-200"}`
|
|
1733
1742
|
}
|
|
1734
|
-
))), isVerifying && /* @__PURE__ */ import_react31.default.createElement("div", { className: "absolute inset-0 bg-white/80 backdrop-blur-sm z-10 flex
|
|
1743
|
+
))), isVerifying && /* @__PURE__ */ import_react31.default.createElement("div", { className: "absolute inset-0 bg-white/80 backdrop-blur-sm z-10 flex items-center justify-center rounded-b-2xl" }, /* @__PURE__ */ import_react31.default.createElement(import_react32.HugeiconsIcon, { icon: import_core_free_icons11.Loading03Icon, size: 28, className: "animate-spin text-black" })), /* @__PURE__ */ import_react31.default.createElement("div", { className: "grid grid-cols-3 gap-y-4 gap-x-6 max-w-60 mx-auto" }, [1, 2, 3, 4, 5, 6, 7, 8, 9].map((num) => /* @__PURE__ */ import_react31.default.createElement(
|
|
1735
1744
|
"button",
|
|
1736
1745
|
{
|
|
1737
1746
|
key: num,
|
|
1738
1747
|
onClick: () => handlePinPress(num),
|
|
1739
|
-
className: "w-
|
|
1748
|
+
className: "w-14 h-14 rounded-full flex items-center justify-center text-lg text-black hover:bg-neutral-50 transition-colors mx-auto outline-none active:scale-95"
|
|
1740
1749
|
},
|
|
1741
1750
|
num
|
|
1742
1751
|
)), /* @__PURE__ */ import_react31.default.createElement("div", null), " ", /* @__PURE__ */ import_react31.default.createElement(
|
|
1743
1752
|
"button",
|
|
1744
1753
|
{
|
|
1745
1754
|
onClick: () => handlePinPress(0),
|
|
1746
|
-
className: "w-
|
|
1755
|
+
className: "w-14 h-14 rounded-full flex items-center justify-center text-lg text-black hover:bg-neutral-50 transition-colors mx-auto outline-none active:scale-95"
|
|
1747
1756
|
},
|
|
1748
1757
|
"0"
|
|
1749
1758
|
), /* @__PURE__ */ import_react31.default.createElement(
|
|
1750
1759
|
"button",
|
|
1751
1760
|
{
|
|
1752
1761
|
onClick: () => handlePinPress("del"),
|
|
1753
|
-
className: "w-
|
|
1762
|
+
className: "w-14 h-14 rounded-full flex items-center justify-center text-neutral-400 hover:text-black hover:bg-neutral-50 transition-colors mx-auto outline-none active:scale-95"
|
|
1754
1763
|
},
|
|
1755
|
-
/* @__PURE__ */ import_react31.default.createElement(import_react32.HugeiconsIcon, { icon: import_core_free_icons11.
|
|
1756
|
-
))));
|
|
1764
|
+
/* @__PURE__ */ import_react31.default.createElement(import_react32.HugeiconsIcon, { icon: import_core_free_icons11.CancelCircleIcon, size: 20 })
|
|
1765
|
+
)))));
|
|
1757
1766
|
};
|
|
1758
1767
|
|
|
1759
1768
|
// src/components/UniversalCardPage.tsx
|
|
@@ -1763,6 +1772,7 @@ var UniversalCardPage = ({
|
|
|
1763
1772
|
expiry,
|
|
1764
1773
|
cvv,
|
|
1765
1774
|
cardBgSrc,
|
|
1775
|
+
backgroundOverlay,
|
|
1766
1776
|
companyLogoSrc,
|
|
1767
1777
|
networkLogoSrc,
|
|
1768
1778
|
onReveal,
|
|
@@ -1829,7 +1839,7 @@ var UniversalCardPage = ({
|
|
|
1829
1839
|
const displayCardNumber = isRevealed ? cardNumber : `\u2022\u2022\u2022\u2022 \u2022\u2022\u2022\u2022 \u2022\u2022\u2022\u2022 ${cardNumber.slice(-4)}`;
|
|
1830
1840
|
const displayExpiry = isRevealed ? expiry : "\u2022\u2022/\u2022\u2022";
|
|
1831
1841
|
const displayCvv = isRevealed ? cvv : "\u2022\u2022\u2022";
|
|
1832
|
-
return /* @__PURE__ */ import_react33.default.createElement("div", { className: "w-full flex flex-col items-center animate-in fade-in duration-300 pb-12" }, /* @__PURE__ */ import_react33.default.createElement("
|
|
1842
|
+
return /* @__PURE__ */ import_react33.default.createElement("div", { className: "w-full flex flex-col items-center animate-in fade-in duration-300 pb-12" }, /* @__PURE__ */ import_react33.default.createElement("div", { className: "w-full pt-6 pb-2 flex justify-center", style: { perspective: "1000px" } }, /* @__PURE__ */ import_react33.default.createElement(
|
|
1833
1843
|
"div",
|
|
1834
1844
|
{
|
|
1835
1845
|
onClick: () => {
|
|
@@ -1837,12 +1847,12 @@ var UniversalCardPage = ({
|
|
|
1837
1847
|
},
|
|
1838
1848
|
className: `relative w-full max-w-85 transition-transform duration-700 ${!isBgLoaded ? "cursor-wait" : "cursor-pointer"}`,
|
|
1839
1849
|
style: {
|
|
1840
|
-
height:
|
|
1850
|
+
height: 185,
|
|
1841
1851
|
transformStyle: "preserve-3d",
|
|
1842
1852
|
transform: isFlipped ? "rotateY(180deg)" : "rotateY(0deg)"
|
|
1843
1853
|
}
|
|
1844
1854
|
},
|
|
1845
|
-
!isBgLoaded && /* @__PURE__ */ import_react33.default.createElement("div", { className: "absolute inset-0 w-full h-full bg-white rounded-2xl flex items-center justify-center z-50
|
|
1855
|
+
!isBgLoaded && /* @__PURE__ */ import_react33.default.createElement("div", { className: "absolute inset-0 w-full h-full bg-white rounded-2xl flex items-center justify-center z-50 " }, /* @__PURE__ */ import_react33.default.createElement(import_react34.HugeiconsIcon, { icon: import_core_free_icons12.Loading03Icon, size: 28, className: "animate-spin text-black" })),
|
|
1846
1856
|
/* @__PURE__ */ import_react33.default.createElement(
|
|
1847
1857
|
"div",
|
|
1848
1858
|
{
|
|
@@ -1856,7 +1866,14 @@ var UniversalCardPage = ({
|
|
|
1856
1866
|
style: { backgroundImage: `url(${cardBgSrc}), linear-gradient(to bottom right, #111, #333)` }
|
|
1857
1867
|
}
|
|
1858
1868
|
),
|
|
1859
|
-
|
|
1869
|
+
backgroundOverlay && /* @__PURE__ */ import_react33.default.createElement(
|
|
1870
|
+
"div",
|
|
1871
|
+
{
|
|
1872
|
+
className: "absolute inset-0 bg-cover bg-center pointer-events-none",
|
|
1873
|
+
style: { backgroundImage: `url(${backgroundOverlay})` }
|
|
1874
|
+
}
|
|
1875
|
+
),
|
|
1876
|
+
/* @__PURE__ */ import_react33.default.createElement("div", { className: "relative z-10 w-full h-full p-5 flex flex-col justify-between" }, /* @__PURE__ */ import_react33.default.createElement("div", { className: "flex justify-between items-start w-full" }, /* @__PURE__ */ import_react33.default.createElement("div", null, /* @__PURE__ */ import_react33.default.createElement("span", { className: "text-[12px] text-white/70 " }, "Prepaid Card")), companyLogoSrc && /* @__PURE__ */ import_react33.default.createElement("img", { src: companyLogoSrc, alt: "Company Logo", className: "h-10 w-auto max-w-30 object-contain opacity-90" })), /* @__PURE__ */ import_react33.default.createElement("div", { className: "flex justify-between items-end w-full" }, /* @__PURE__ */ import_react33.default.createElement("div", { className: "flex flex-col gap-1" }, /* @__PURE__ */ import_react33.default.createElement("span", { className: "text-[10px] text-white/60 tracking-widest uppercase" }, "Card Number"), /* @__PURE__ */ import_react33.default.createElement("span", { className: "text-[14px] text-white tracking-widest font-light" }, displayCardNumber)), networkLogoSrc && /* @__PURE__ */ import_react33.default.createElement("img", { src: networkLogoSrc, alt: "Network Logo", className: "h-10 w-auto max-w-20 object-contain opacity-90" })))
|
|
1860
1877
|
),
|
|
1861
1878
|
/* @__PURE__ */ import_react33.default.createElement(
|
|
1862
1879
|
"div",
|
|
@@ -1874,8 +1891,14 @@ var UniversalCardPage = ({
|
|
|
1874
1891
|
style: { backgroundImage: `url(${cardBgSrc}), linear-gradient(to bottom right, #111, #333)` }
|
|
1875
1892
|
}
|
|
1876
1893
|
),
|
|
1877
|
-
/* @__PURE__ */ import_react33.default.createElement(
|
|
1878
|
-
|
|
1894
|
+
backgroundOverlay && /* @__PURE__ */ import_react33.default.createElement(
|
|
1895
|
+
"div",
|
|
1896
|
+
{
|
|
1897
|
+
className: "absolute inset-0 bg-cover bg-center pointer-events-none",
|
|
1898
|
+
style: { backgroundImage: `url(${backgroundOverlay})` }
|
|
1899
|
+
}
|
|
1900
|
+
),
|
|
1901
|
+
/* @__PURE__ */ import_react33.default.createElement("div", { className: "relative z-10 w-full h-full p-5 flex flex-col justify-end" }, /* @__PURE__ */ import_react33.default.createElement("div", { className: "w-full text-center mb-6" }, /* @__PURE__ */ import_react33.default.createElement("span", { className: "text-white text-3xl italic tracking-wide opacity-90", style: { fontFamily: "'Whisper', cursive" } }, cardHolderName)), /* @__PURE__ */ import_react33.default.createElement("div", { className: "flex justify-between w-full max-w-[80%]" }, /* @__PURE__ */ import_react33.default.createElement("div", { className: "flex flex-col" }, /* @__PURE__ */ import_react33.default.createElement("span", { className: "text-[9px] text-white/60 tracking-widest uppercase" }, "Expiry"), /* @__PURE__ */ import_react33.default.createElement("span", { className: "text-[14px] text-white font-light" }, displayExpiry)), /* @__PURE__ */ import_react33.default.createElement("div", { className: "flex flex-col" }, /* @__PURE__ */ import_react33.default.createElement("span", { className: "text-[9px] text-white/60 tracking-widest uppercase" }, "CVV"), /* @__PURE__ */ import_react33.default.createElement("span", { className: "text-[14px] text-white font-light" }, displayCvv))))
|
|
1879
1902
|
)
|
|
1880
1903
|
)), /* @__PURE__ */ import_react33.default.createElement("p", { className: "text-xs text-neutral-400 mb-6" }, "Tap to flip card"), /* @__PURE__ */ import_react33.default.createElement("div", { className: "w-full flex flex-col gap-4" }, /* @__PURE__ */ import_react33.default.createElement("div", { className: "w-full bg-white rounded-2xl overflow-hidden" }, /* @__PURE__ */ import_react33.default.createElement(
|
|
1881
1904
|
MenuRow,
|
|
@@ -1915,8 +1938,6 @@ var UniversalCardPage = ({
|
|
|
1915
1938
|
title: "Delete card",
|
|
1916
1939
|
subtitle: "Permanently delete card",
|
|
1917
1940
|
onClick: () => setShowDeleteDialog(true),
|
|
1918
|
-
iconColor: "text-red-500",
|
|
1919
|
-
titleColor: "text-red-500",
|
|
1920
1941
|
isLast: true
|
|
1921
1942
|
}
|
|
1922
1943
|
))), /* @__PURE__ */ import_react33.default.createElement(
|
|
@@ -1935,7 +1956,7 @@ var UniversalCardPage = ({
|
|
|
1935
1956
|
PinDialerBottomSheet,
|
|
1936
1957
|
{
|
|
1937
1958
|
isOpen: showPinDialer,
|
|
1938
|
-
title: "
|
|
1959
|
+
title: "Authorization Required",
|
|
1939
1960
|
isVerifying: isRevealing,
|
|
1940
1961
|
onClose: () => setShowPinDialer(false),
|
|
1941
1962
|
onComplete: handlePinComplete
|
|
@@ -1960,7 +1981,7 @@ var MenuRow = ({
|
|
|
1960
1981
|
className: `flex items-center p-3 cursor-pointer hover:bg-neutral-50 transition-colors ${!isLast ? "" : ""}`
|
|
1961
1982
|
},
|
|
1962
1983
|
/* @__PURE__ */ import_react33.default.createElement("div", { className: "w-9 h-9 rounded-full border border-neutral-200 flex items-center justify-center shrink-0 mr-4" }, /* @__PURE__ */ import_react33.default.createElement(import_react34.HugeiconsIcon, { icon, size: 16, className: iconColor })),
|
|
1963
|
-
/* @__PURE__ */ import_react33.default.createElement("div", { className: "flex-1 min-w-0" }, /* @__PURE__ */ import_react33.default.createElement("p", { className: `text-[13px]
|
|
1984
|
+
/* @__PURE__ */ import_react33.default.createElement("div", { className: "flex-1 min-w-0" }, /* @__PURE__ */ import_react33.default.createElement("p", { className: `text-[13px] truncate ${titleColor}` }, title), /* @__PURE__ */ import_react33.default.createElement("p", { className: "text-[11px] text-neutral-500 truncate" }, subtitle)),
|
|
1964
1985
|
isToggle ? /* @__PURE__ */ import_react33.default.createElement("div", { className: `relative w-11 h-6 rounded-full transition-colors duration-300 ml-2 shrink-0 ${toggleState ? "bg-black" : "bg-neutral-200"}` }, /* @__PURE__ */ import_react33.default.createElement("div", { className: `absolute top-1 left-1 w-4 h-4 rounded-full bg-white shadow-sm transition-transform duration-300 flex items-center justify-center ${toggleState ? "translate-x-5" : "translate-x-0"}` }, toggleLoading && /* @__PURE__ */ import_react33.default.createElement(import_react34.HugeiconsIcon, { icon: import_core_free_icons12.Loading03Icon, size: 10, className: "animate-spin text-black" }))) : /* @__PURE__ */ import_react33.default.createElement(import_react34.HugeiconsIcon, { icon: import_core_free_icons12.ArrowRight01Icon, size: 18, className: "text-neutral-400 shrink-0 ml-2" })
|
|
1965
1986
|
);
|
|
1966
1987
|
|
|
@@ -2003,7 +2024,7 @@ var UniversalProfilePage = ({
|
|
|
2003
2024
|
onLoad: () => setIsAvatarLoaded(true),
|
|
2004
2025
|
className: `w-full h-full object-cover transition-opacity duration-300 ${isAvatarLoaded ? "opacity-100" : "opacity-0"}`
|
|
2005
2026
|
}
|
|
2006
|
-
)) : /* @__PURE__ */ import_react35.default.createElement(import_react36.HugeiconsIcon, { icon: import_core_free_icons13.UserIcon, size: 40, className: "text-neutral-300" }))), /* @__PURE__ */ import_react35.default.createElement("div", { className: "bg-white rounded-full px-4 py-2 flex items-center justify-center gap-2 mb-3" }, /* @__PURE__ */ import_react35.default.createElement("span", { className: "text-[12px]
|
|
2027
|
+
)) : /* @__PURE__ */ import_react35.default.createElement(import_react36.HugeiconsIcon, { icon: import_core_free_icons13.UserIcon, size: 40, className: "text-neutral-300" }))), /* @__PURE__ */ import_react35.default.createElement("div", { className: "bg-white rounded-full px-4 py-2 flex items-center justify-center gap-2 mb-3" }, /* @__PURE__ */ import_react35.default.createElement("span", { className: "text-[12px] text-black" }, roleName), /* @__PURE__ */ import_react35.default.createElement(import_react36.HugeiconsIcon, { icon: import_core_free_icons13.ArrowRight01Icon, size: 14, className: "text-neutral-400" })), /* @__PURE__ */ import_react35.default.createElement("span", { className: "text-[12px] text-neutral-500" }, memberSince)), /* @__PURE__ */ import_react35.default.createElement("div", { className: "w-full flex flex-col gap-4 mt-2" }, /* @__PURE__ */ import_react35.default.createElement("div", { className: "w-full bg-white rounded-2xl overflow-hidden" }, /* @__PURE__ */ import_react35.default.createElement(
|
|
2007
2028
|
MenuRow2,
|
|
2008
2029
|
{
|
|
2009
2030
|
icon: import_core_free_icons13.UserIcon,
|
|
@@ -2022,7 +2043,7 @@ var UniversalProfilePage = ({
|
|
|
2022
2043
|
), /* @__PURE__ */ import_react35.default.createElement(
|
|
2023
2044
|
MenuRow2,
|
|
2024
2045
|
{
|
|
2025
|
-
icon: import_core_free_icons13.
|
|
2046
|
+
icon: import_core_free_icons13.Notification01Icon,
|
|
2026
2047
|
title: "Notifications",
|
|
2027
2048
|
subtitle: "Manage notifications",
|
|
2028
2049
|
onClick: onNotificationsTap
|
|
@@ -2030,7 +2051,7 @@ var UniversalProfilePage = ({
|
|
|
2030
2051
|
), /* @__PURE__ */ import_react35.default.createElement(
|
|
2031
2052
|
MenuRow2,
|
|
2032
2053
|
{
|
|
2033
|
-
icon: import_core_free_icons13.
|
|
2054
|
+
icon: import_core_free_icons13.MessageQuestionIcon,
|
|
2034
2055
|
title: "Get Help",
|
|
2035
2056
|
subtitle: "24/7 Support",
|
|
2036
2057
|
onClick: onHelpTap,
|
|
@@ -2039,7 +2060,7 @@ var UniversalProfilePage = ({
|
|
|
2039
2060
|
)), /* @__PURE__ */ import_react35.default.createElement("div", { className: "w-full bg-white rounded-2xl overflow-hidden" }, /* @__PURE__ */ import_react35.default.createElement(
|
|
2040
2061
|
MenuRow2,
|
|
2041
2062
|
{
|
|
2042
|
-
icon: import_core_free_icons13.
|
|
2063
|
+
icon: import_core_free_icons13.UserIdVerificationIcon,
|
|
2043
2064
|
title: "Verifications",
|
|
2044
2065
|
subtitle: "Account Verifications",
|
|
2045
2066
|
onClick: onVerificationsTap
|
|
@@ -2047,7 +2068,7 @@ var UniversalProfilePage = ({
|
|
|
2047
2068
|
), /* @__PURE__ */ import_react35.default.createElement(
|
|
2048
2069
|
MenuRow2,
|
|
2049
2070
|
{
|
|
2050
|
-
icon: import_core_free_icons13.
|
|
2071
|
+
icon: import_core_free_icons13.FileDownloadIcon,
|
|
2051
2072
|
title: "Export Account",
|
|
2052
2073
|
subtitle: "Transfer your account",
|
|
2053
2074
|
onClick: onExportTap
|
|
@@ -2055,7 +2076,7 @@ var UniversalProfilePage = ({
|
|
|
2055
2076
|
), /* @__PURE__ */ import_react35.default.createElement(
|
|
2056
2077
|
MenuRow2,
|
|
2057
2078
|
{
|
|
2058
|
-
icon: import_core_free_icons13.
|
|
2079
|
+
icon: import_core_free_icons13.LogoutCircle02Icon,
|
|
2059
2080
|
title: "LogOut",
|
|
2060
2081
|
subtitle: "End your session",
|
|
2061
2082
|
onClick: () => setShowLogoutDialog(true),
|
|
@@ -2064,7 +2085,7 @@ var UniversalProfilePage = ({
|
|
|
2064
2085
|
)), /* @__PURE__ */ import_react35.default.createElement("div", { className: "w-full bg-white rounded-2xl overflow-hidden mb-4" }, /* @__PURE__ */ import_react35.default.createElement(
|
|
2065
2086
|
MenuRow2,
|
|
2066
2087
|
{
|
|
2067
|
-
icon: import_core_free_icons13.
|
|
2088
|
+
icon: import_core_free_icons13.UserRemove01Icon,
|
|
2068
2089
|
title: "Delete Account",
|
|
2069
2090
|
subtitle: "Remove account",
|
|
2070
2091
|
onClick: onDeleteTap,
|
|
@@ -2090,8 +2111,8 @@ var MenuRow2 = ({ icon, title, subtitle, onClick, iconColor = "text-black", titl
|
|
|
2090
2111
|
onClick,
|
|
2091
2112
|
className: `flex items-center p-4 cursor-pointer hover:bg-neutral-50 transition-colors ${!isLast ? "" : ""}`
|
|
2092
2113
|
},
|
|
2093
|
-
/* @__PURE__ */ import_react35.default.createElement("div", { className: "w-9 h-9 rounded-full flex items-center justify-center shrink-0 mr-4" }, /* @__PURE__ */ import_react35.default.createElement(import_react36.HugeiconsIcon, { icon, size: 16, className: iconColor })),
|
|
2094
|
-
/* @__PURE__ */ import_react35.default.createElement("div", { className: "flex-1 min-w-0" }, /* @__PURE__ */ import_react35.default.createElement("p", { className: `text-[13px]
|
|
2114
|
+
/* @__PURE__ */ import_react35.default.createElement("div", { className: "w-9 h-9 rounded-full border border-neutral-200 flex items-center justify-center shrink-0 mr-4" }, /* @__PURE__ */ import_react35.default.createElement(import_react36.HugeiconsIcon, { icon, size: 16, className: iconColor })),
|
|
2115
|
+
/* @__PURE__ */ import_react35.default.createElement("div", { className: "flex-1 min-w-0" }, /* @__PURE__ */ import_react35.default.createElement("p", { className: `text-[13px] truncate ${titleColor}` }, title), /* @__PURE__ */ import_react35.default.createElement("p", { className: "text-[11px] text-neutral-500 truncate" }, subtitle)),
|
|
2095
2116
|
/* @__PURE__ */ import_react35.default.createElement(import_react36.HugeiconsIcon, { icon: import_core_free_icons13.ArrowRight01Icon, size: 18, className: "text-neutral-400 shrink-0 ml-2" })
|
|
2096
2117
|
);
|
|
2097
2118
|
|
package/dist/index.mjs
CHANGED
|
@@ -619,7 +619,7 @@ var MobileNav = ({ items }) => {
|
|
|
619
619
|
/* @__PURE__ */ React7.createElement(
|
|
620
620
|
"span",
|
|
621
621
|
{
|
|
622
|
-
className: `text-[9px] tracking-wide transition-colors duration-300
|
|
622
|
+
className: `text-[9px] tracking-wide transition-colors duration-300 ${isActive ? "text-black" : "text-neutral-400"}`
|
|
623
623
|
},
|
|
624
624
|
item.label
|
|
625
625
|
)
|
|
@@ -1184,11 +1184,11 @@ var UniversalErrorView = ({
|
|
|
1184
1184
|
title = "Access Restricted";
|
|
1185
1185
|
description = apiMessage || `You have insufficient permissions to view this ${envName}. Please contact your administrator.`;
|
|
1186
1186
|
}
|
|
1187
|
-
return /* @__PURE__ */ React14.createElement("div", { className: "flex flex-col items-center justify-center h-screen w-full px-4 animate-in fade-in duration-500" }, /* @__PURE__ */ React14.createElement("div", { className: "mb-4 flex justify-center" }, /* @__PURE__ */ React14.createElement(HugeiconsIcon8, { icon: IconComponent, size: 48, className: "text-neutral-300" })), /* @__PURE__ */ React14.createElement("h2", { className: "text-lg text-black tracking-tight
|
|
1187
|
+
return /* @__PURE__ */ React14.createElement("div", { className: "flex flex-col items-center justify-center h-screen w-full px-4 animate-in fade-in duration-500" }, /* @__PURE__ */ React14.createElement("div", { className: "mb-4 flex justify-center" }, /* @__PURE__ */ React14.createElement(HugeiconsIcon8, { icon: IconComponent, size: 48, className: "text-neutral-300" })), /* @__PURE__ */ React14.createElement("h2", { className: "text-lg text-black tracking-tight " }, title), /* @__PURE__ */ React14.createElement("p", { className: "text-xs mt-2 mb-8 text-neutral-500 max-w-sm text-center leading-relaxed" }, description), /* @__PURE__ */ React14.createElement("div", { className: "flex flex-col sm:flex-row items-center gap-3 w-full justify-center sm:w-auto" }, isNotFoundError || isPermissionError ? /* @__PURE__ */ React14.createElement(
|
|
1188
1188
|
"button",
|
|
1189
1189
|
{
|
|
1190
1190
|
onClick: () => window.location.href = returnUrl,
|
|
1191
|
-
className: "px-6 py-2 text-black border border-neutral-200 hover:bg-neutral-50 rounded-full text-[11px] tracking-widest transition-colors w-full sm:w-auto outline-none
|
|
1191
|
+
className: "px-6 py-2 text-black border border-neutral-200 hover:bg-neutral-50 rounded-full text-[11px] tracking-widest transition-colors w-full sm:w-auto outline-none "
|
|
1192
1192
|
},
|
|
1193
1193
|
returnLabel
|
|
1194
1194
|
) : (
|
|
@@ -1197,14 +1197,14 @@ var UniversalErrorView = ({
|
|
|
1197
1197
|
"button",
|
|
1198
1198
|
{
|
|
1199
1199
|
onClick: () => window.location.href = returnUrl,
|
|
1200
|
-
className: "px-6 py-2 bg-transparent border border-neutral-200 text-neutral-500 hover:text-black hover:bg-neutral-50 rounded-full text-[11px] tracking-widest transition-colors w-full sm:w-auto outline-none
|
|
1200
|
+
className: "px-6 py-2 bg-transparent border border-neutral-200 text-neutral-500 hover:text-black hover:bg-neutral-50 rounded-full text-[11px] tracking-widest transition-colors w-full sm:w-auto outline-none "
|
|
1201
1201
|
},
|
|
1202
1202
|
"Back Home"
|
|
1203
1203
|
), /* @__PURE__ */ React14.createElement(
|
|
1204
1204
|
"button",
|
|
1205
1205
|
{
|
|
1206
1206
|
onClick: onRetry,
|
|
1207
|
-
className: "px-6 py-2 bg-black text-white hover:bg-neutral-800 rounded-full text-[11px] tracking-widest transition-colors w-full sm:w-auto outline-none capitalize
|
|
1207
|
+
className: "px-6 py-2 bg-black text-white hover:bg-neutral-800 rounded-full text-[11px] tracking-widest transition-colors w-full sm:w-auto outline-none capitalize "
|
|
1208
1208
|
},
|
|
1209
1209
|
"Refresh ",
|
|
1210
1210
|
envName
|
|
@@ -1365,7 +1365,7 @@ var UniversalTransactionPage = ({
|
|
|
1365
1365
|
className: "p-2 bg-white border border-neutral-200 rounded-full text-black hover:bg-neutral-50 disabled:opacity-30 disabled:cursor-not-allowed transition-all outline-none"
|
|
1366
1366
|
},
|
|
1367
1367
|
/* @__PURE__ */ React15.createElement(HugeiconsIcon9, { icon: ArrowRight01Icon, size: 14 })
|
|
1368
|
-
)))))), selectedTransaction && /* @__PURE__ */ React15.createElement("div", { className: "fixed inset-0 z-120 flex items-center justify-center p-4 pointer-events-auto" }, /* @__PURE__ */ React15.createElement("div", { className: "absolute inset-0 bg-black/40 ", onClick: () => setSelectedTransaction(null) }), /* @__PURE__ */ React15.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 max-h-[90vh]" }, /* @__PURE__ */ React15.createElement("div", { className: "flex items-center justify-between p-5 shrink-0 " }, /* @__PURE__ */ React15.createElement("h3", { className: "text-[15px] text-black tracking-tight" }, "Details"), /* @__PURE__ */ React15.createElement("button", { onClick: () => setSelectedTransaction(null), className: "text-neutral-400 hover:text-black transition-colors outline-none" }, /* @__PURE__ */ React15.createElement(HugeiconsIcon9, { icon: CancelCircleIcon2, size: 18 }))), /* @__PURE__ */ React15.createElement("div", { className: "flex-1 overflow-y-auto custom-scrollbar p-6" }, /* @__PURE__ */ React15.createElement("div", { className: "flex flex-col items-center justify-center mb-4" }, /* @__PURE__ */ React15.createElement("div", { className: `w-12 h-12 rounded-full flex items-center justify-center mb-4 bg-neutral-100 text-black` }, /* @__PURE__ */ React15.createElement(HugeiconsIcon9, { icon: selectedTransaction.direction === "CREDIT" ? ArrowDownRight01Icon : ArrowUpRight01Icon, size: 20 })), /* @__PURE__ */ React15.createElement("h2", { className: `text-2xl text-black mb-2 transition-all duration-300
|
|
1368
|
+
)))))), selectedTransaction && /* @__PURE__ */ React15.createElement("div", { className: "fixed inset-0 z-120 flex items-center justify-center p-4 pointer-events-auto" }, /* @__PURE__ */ React15.createElement("div", { className: "absolute inset-0 bg-black/40 ", onClick: () => setSelectedTransaction(null) }), /* @__PURE__ */ React15.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 max-h-[90vh]" }, /* @__PURE__ */ React15.createElement("div", { className: "flex items-center justify-between p-5 shrink-0 " }, /* @__PURE__ */ React15.createElement("h3", { className: "text-[15px] text-black tracking-tight" }, "Details"), /* @__PURE__ */ React15.createElement("button", { onClick: () => setSelectedTransaction(null), className: "text-neutral-400 hover:text-black transition-colors outline-none" }, /* @__PURE__ */ React15.createElement(HugeiconsIcon9, { icon: CancelCircleIcon2, size: 18 }))), /* @__PURE__ */ React15.createElement("div", { className: "flex-1 overflow-y-auto custom-scrollbar p-6" }, /* @__PURE__ */ React15.createElement("div", { className: "flex flex-col items-center justify-center mb-4" }, /* @__PURE__ */ React15.createElement("div", { className: `w-12 h-12 rounded-full flex items-center justify-center mb-4 bg-neutral-100 text-black` }, /* @__PURE__ */ React15.createElement(HugeiconsIcon9, { icon: selectedTransaction.direction === "CREDIT" ? ArrowDownRight01Icon : ArrowUpRight01Icon, size: 20 })), /* @__PURE__ */ React15.createElement("h2", { className: `text-2xl text-black mb-2 transition-all duration-300 ${hideBalanceAmounts ? "blur-[6px] opacity-40 select-none" : ""}` }, selectedTransaction.direction === "CREDIT" ? "+" : "-", selectedTransaction.amount, " ", selectedTransaction.currency), /* @__PURE__ */ React15.createElement("span", { className: "text-[9px] tracking-widest text-neutral-500 px-4 py-1.5 rounded-full bg-neutral-50" }, selectedTransaction.status)), /* @__PURE__ */ React15.createElement("div", { className: "grid grid-cols-1 gap-y-8 gap-x-4 mb-10 mt-6" }, /* @__PURE__ */ React15.createElement("div", null, /* @__PURE__ */ React15.createElement("span", { className: "text-[11px] tracking-[0.2em] text-neutral-400 block mb-2" }, "Reference ID"), /* @__PURE__ */ React15.createElement("span", { className: "text-[13px] text-black break-all" }, selectedTransaction.reference)), /* @__PURE__ */ React15.createElement("div", null, /* @__PURE__ */ React15.createElement("span", { className: "text-[11px] tracking-[0.2em] text-neutral-400 block mb-2" }, "Date & Time"), /* @__PURE__ */ React15.createElement("span", { className: "text-[13px] text-black" }, formatDate(selectedTransaction.createdAt), " at ", formatTime(selectedTransaction.createdAt))), /* @__PURE__ */ React15.createElement("div", null, /* @__PURE__ */ React15.createElement("span", { className: "text-[11px] tracking-[0.2em] text-neutral-400 block mb-2" }, "Transaction Type"), /* @__PURE__ */ React15.createElement("span", { className: "text-[13px] text-black capitalize" }, selectedTransaction.type.replace("_", " ").toLowerCase())), /* @__PURE__ */ React15.createElement("div", null, /* @__PURE__ */ React15.createElement("span", { className: "text-[11px] tracking-[0.2em] text-neutral-400 block mb-2" }, "Flow Direction"), /* @__PURE__ */ React15.createElement("span", { className: "text-[13px] text-black capitalize" }, selectedTransaction.direction.toLowerCase())), selectedTransaction.metadata?.fromAddress && selectedTransaction.metadata?.toAddress && /* @__PURE__ */ React15.createElement("div", null, /* @__PURE__ */ React15.createElement("span", { className: "text-[11px] tracking-[0.2em] text-neutral-400 block mb-2" }, "Transfer Route"), /* @__PURE__ */ React15.createElement("div", { className: "flex items-center gap-2 text-[13px] text-black" }, /* @__PURE__ */ React15.createElement("span", { className: "truncate " }, truncateAddress(String(selectedTransaction.metadata.fromAddress))), /* @__PURE__ */ React15.createElement("span", { className: "text-neutral-400" }, "\u2192"), /* @__PURE__ */ React15.createElement("span", { className: "truncate " }, truncateAddress(String(selectedTransaction.metadata.toAddress))))), selectedTransaction.metadata && Object.entries(selectedTransaction.metadata).map(([key, value]) => {
|
|
1369
1369
|
if (key === "fromAddress" || key === "toAddress") return null;
|
|
1370
1370
|
if (value === null || value === void 0 || typeof value === "object") return null;
|
|
1371
1371
|
const formattedKey = key.replace(/([A-Z])/g, " $1").replace(/^./, (str) => str.toUpperCase());
|
|
@@ -1382,7 +1382,7 @@ var UniversalTransactionPage = ({
|
|
|
1382
1382
|
"button",
|
|
1383
1383
|
{
|
|
1384
1384
|
onClick: () => onReportTransaction && onReportTransaction(selectedTransaction),
|
|
1385
|
-
className: "w-full flex items-center
|
|
1385
|
+
className: "w-full flex items-center justify-center py-2.5 rounded-full border border-neutral-200 text-black hover:bg-neutral-50 transition-colors outline-none text-[13px] tracking-wide mt-2"
|
|
1386
1386
|
},
|
|
1387
1387
|
"Report Transaction"
|
|
1388
1388
|
), selectedTransaction.type === "WALLET_TRANSACTION" && /* @__PURE__ */ React15.createElement(
|
|
@@ -1391,7 +1391,7 @@ var UniversalTransactionPage = ({
|
|
|
1391
1391
|
href: `https://basescan.org/tx/${selectedTransaction.reference}`,
|
|
1392
1392
|
target: "_blank",
|
|
1393
1393
|
rel: "noopener noreferrer",
|
|
1394
|
-
className: "w-full flex items-center
|
|
1394
|
+
className: "w-full flex items-center justify-center py-2.5 rounded-full border border-neutral-200 text-black hover:bg-neutral-50 transition-colors outline-none text-[13px] tracking-wide mt-2"
|
|
1395
1395
|
},
|
|
1396
1396
|
"View in block explorer"
|
|
1397
1397
|
))))), isDirectionModalOpen && /* @__PURE__ */ React15.createElement("div", { className: "fixed inset-0 z-110 flex items-center justify-center p-4" }, /* @__PURE__ */ React15.createElement("div", { className: "absolute inset-0 bg-black/40 ", onClick: () => setIsDirectionModalOpen(false) }), /* @__PURE__ */ React15.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__ */ React15.createElement("div", { className: "p-6 text-center w-full mb-2" }, /* @__PURE__ */ React15.createElement("h3", { className: "text-[14px] text-black tracking-tight" }, "Payment Type")), /* @__PURE__ */ React15.createElement("div", { className: "w-full flex flex-col pl-2 pr-2 gap-1" }, ["ALL", "CREDIT", "DEBIT"].map((option) => /* @__PURE__ */ React15.createElement(
|
|
@@ -1402,14 +1402,14 @@ var UniversalTransactionPage = ({
|
|
|
1402
1402
|
onDirectionFilterChange(option);
|
|
1403
1403
|
setIsDirectionModalOpen(false);
|
|
1404
1404
|
},
|
|
1405
|
-
className: `text-left px-4 py-3 text-[11px] tracking-wide transition-colors rounded-full flex items-center justify-between outline-none ${activeDirectionFilter === option ? "bg-neutral-100 text-black
|
|
1405
|
+
className: `text-left px-4 py-3 text-[11px] tracking-wide transition-colors rounded-full flex items-center justify-between outline-none ${activeDirectionFilter === option ? "bg-neutral-100 text-black " : "text-neutral-500 hover:bg-neutral-50 hover:text-black"}`
|
|
1406
1406
|
},
|
|
1407
1407
|
/* @__PURE__ */ React15.createElement("span", { className: "truncate pr-2" }, option.charAt(0).toUpperCase() + option.slice(1).toLowerCase())
|
|
1408
1408
|
))), /* @__PURE__ */ React15.createElement("div", { className: "w-full flex mt-2 " }, /* @__PURE__ */ React15.createElement(
|
|
1409
1409
|
"button",
|
|
1410
1410
|
{
|
|
1411
1411
|
onClick: () => setIsDirectionModalOpen(false),
|
|
1412
|
-
className: "w-full py-4 text-[13px] text-neutral-500 hover:text-black transition-colors outline-none
|
|
1412
|
+
className: "w-full py-4 text-[13px] text-neutral-500 hover:text-black transition-colors outline-none "
|
|
1413
1413
|
},
|
|
1414
1414
|
"Cancel"
|
|
1415
1415
|
)))), isTypeModalOpen && /* @__PURE__ */ React15.createElement("div", { className: "fixed inset-0 z-110 flex items-center justify-center p-4" }, /* @__PURE__ */ React15.createElement("div", { className: "absolute inset-0 bg-black/40 ", onClick: () => setIsTypeModalOpen(false) }), /* @__PURE__ */ React15.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__ */ React15.createElement("div", { className: "p-6 text-center w-full mb-2" }, /* @__PURE__ */ React15.createElement("h3", { className: "text-[14px] text-black tracking-tight" }, "Transactions Type")), /* @__PURE__ */ React15.createElement("div", { className: "w-full flex flex-col pl-2 pr-2 gap-1" }, [
|
|
@@ -1424,14 +1424,14 @@ var UniversalTransactionPage = ({
|
|
|
1424
1424
|
onTypeFilterChange(option.value);
|
|
1425
1425
|
setIsTypeModalOpen(false);
|
|
1426
1426
|
},
|
|
1427
|
-
className: `text-left px-4 py-3 text-[11px] tracking-wide transition-colors rounded-full flex items-center justify-between outline-none ${activeTypeFilter === option.value ? "bg-neutral-100 text-black
|
|
1427
|
+
className: `text-left px-4 py-3 text-[11px] tracking-wide transition-colors rounded-full flex items-center justify-between outline-none ${activeTypeFilter === option.value ? "bg-neutral-100 text-black " : "text-neutral-500 hover:bg-neutral-50 hover:text-black"}`
|
|
1428
1428
|
},
|
|
1429
1429
|
/* @__PURE__ */ React15.createElement("span", { className: "truncate pr-2" }, option.label.charAt(0).toUpperCase() + option.label.slice(1).toLowerCase())
|
|
1430
1430
|
))), /* @__PURE__ */ React15.createElement("div", { className: "w-full flex mt-2 " }, /* @__PURE__ */ React15.createElement(
|
|
1431
1431
|
"button",
|
|
1432
1432
|
{
|
|
1433
1433
|
onClick: () => setIsTypeModalOpen(false),
|
|
1434
|
-
className: "w-full py-4 text-[13px] text-neutral-500 hover:text-black transition-colors outline-none
|
|
1434
|
+
className: "w-full py-4 text-[13px] text-neutral-500 hover:text-black transition-colors outline-none "
|
|
1435
1435
|
},
|
|
1436
1436
|
"Cancel"
|
|
1437
1437
|
)))));
|
|
@@ -1493,14 +1493,14 @@ var UniversalHomeView = ({
|
|
|
1493
1493
|
onClick: primaryAction.onClick,
|
|
1494
1494
|
className: "px-6 py-2.5 sm:px-8 sm:py-2.5"
|
|
1495
1495
|
},
|
|
1496
|
-
/* @__PURE__ */ React16.createElement("span", { className: "flex items-center gap-1.5 text-[13px] tracking-wide
|
|
1496
|
+
/* @__PURE__ */ React16.createElement("span", { className: "flex items-center gap-1.5 text-[13px] tracking-wide " }, primaryAction.label, primaryAction.icon && /* @__PURE__ */ React16.createElement(HugeiconsIcon10, { icon: primaryAction.icon, size: 16 }))
|
|
1497
1497
|
), secondaryAction && /* @__PURE__ */ React16.createElement(
|
|
1498
1498
|
"button",
|
|
1499
1499
|
{
|
|
1500
1500
|
onClick: secondaryAction.onClick,
|
|
1501
1501
|
className: "flex items-center gap-1.5 px-6 py-2.5 sm:px-8 sm:py-2.5 rounded-full border border-neutral-200 text-black hover:bg-neutral-50 transition-colors outline-none"
|
|
1502
1502
|
},
|
|
1503
|
-
/* @__PURE__ */ React16.createElement("span", { className: "text-[13px] tracking-wide
|
|
1503
|
+
/* @__PURE__ */ React16.createElement("span", { className: "text-[13px] tracking-wide " }, secondaryAction.label),
|
|
1504
1504
|
secondaryAction.icon && /* @__PURE__ */ React16.createElement(HugeiconsIcon10, { icon: secondaryAction.icon, size: 16 })
|
|
1505
1505
|
)))), /* @__PURE__ */ React16.createElement("div", { className: "w-full mt-2" }, /* @__PURE__ */ React16.createElement(
|
|
1506
1506
|
UniversalTransactionPage,
|
|
@@ -1577,9 +1577,9 @@ var UniversalWalletPage = ({
|
|
|
1577
1577
|
onClick: () => setSelectedWallet(wallet),
|
|
1578
1578
|
className: "flex items-center justify-between py-4 hover:bg-neutral-50 transition-colors cursor-pointer group min-w-0 px-3 -mx-3 rounded-xl"
|
|
1579
1579
|
},
|
|
1580
|
-
/* @__PURE__ */ React17.createElement("div", { className: "flex items-center gap-4 min-w-0 flex-1" }, /* @__PURE__ */ React17.createElement(WalletLogo, { src: wallet.logoSrc, alt: wallet.name }), /* @__PURE__ */ React17.createElement("div", { className: "min-w-0 flex-1 flex flex-col gap-1" }, /* @__PURE__ */ React17.createElement("p", { className: "text-[13px] text-black truncate
|
|
1580
|
+
/* @__PURE__ */ React17.createElement("div", { className: "flex items-center gap-4 min-w-0 flex-1" }, /* @__PURE__ */ React17.createElement(WalletLogo, { src: wallet.logoSrc, alt: wallet.name }), /* @__PURE__ */ React17.createElement("div", { className: "min-w-0 flex-1 flex flex-col gap-1" }, /* @__PURE__ */ React17.createElement("p", { className: "text-[13px] text-black truncate " }, wallet.name), /* @__PURE__ */ React17.createElement("p", { className: `text-[13px] text-neutral-500 truncate transition-all duration-300 ${hideBalanceAmounts ? "blur-sm opacity-40 select-none" : ""}` }, wallet.balance, " ", wallet.currency))),
|
|
1581
1581
|
/* @__PURE__ */ React17.createElement("div", { className: "shrink-0 flex flex-col items-end gap-1 text-right" }, /* @__PURE__ */ React17.createElement("span", { className: "text-[10px] tracking-wide text-neutral-600 bg-neutral-100 px-2.5 py-1 rounded-full " }, wallet.network))
|
|
1582
|
-
)))))), selectedWallet && /* @__PURE__ */ React17.createElement("div", { className: "fixed inset-0 z-120 flex items-center justify-center p-4 pointer-events-auto" }, /* @__PURE__ */ React17.createElement("div", { className: "absolute inset-0 bg-black/40 ", onClick: () => setSelectedWallet(null) }), /* @__PURE__ */ React17.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 max-h-[90vh]" }, /* @__PURE__ */ React17.createElement("div", { className: "flex items-center justify-between p-5 shrink-0 " }, /* @__PURE__ */ React17.createElement("h3", { className: "text-[15px] text-black tracking-tight" }, "Wallet Details"), /* @__PURE__ */ React17.createElement("button", { onClick: () => setSelectedWallet(null), className: "text-neutral-400 hover:text-black transition-colors outline-none" }, /* @__PURE__ */ React17.createElement(HugeiconsIcon11, { icon: CancelCircleIcon3, size: 18 }))), /* @__PURE__ */ React17.createElement("div", { className: "flex-1 overflow-y-auto custom-scrollbar p-6 pt-6" }, /* @__PURE__ */ React17.createElement("div", { className: "flex flex-col items-center justify-center mb-6" }, /* @__PURE__ */ React17.createElement(WalletLogo, { src: selectedWallet.logoSrc, alt: selectedWallet.name, sizeClass: "w-14 h-14 mb-4" }), /* @__PURE__ */ React17.createElement("h2", { className: `text-2xl text-black mb-2 transition-all duration-300
|
|
1582
|
+
)))))), selectedWallet && /* @__PURE__ */ React17.createElement("div", { className: "fixed inset-0 z-120 flex items-center justify-center p-4 pointer-events-auto" }, /* @__PURE__ */ React17.createElement("div", { className: "absolute inset-0 bg-black/40 ", onClick: () => setSelectedWallet(null) }), /* @__PURE__ */ React17.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 max-h-[90vh]" }, /* @__PURE__ */ React17.createElement("div", { className: "flex items-center justify-between p-5 shrink-0 " }, /* @__PURE__ */ React17.createElement("h3", { className: "text-[15px] text-black tracking-tight" }, "Wallet Details"), /* @__PURE__ */ React17.createElement("button", { onClick: () => setSelectedWallet(null), className: "text-neutral-400 hover:text-black transition-colors outline-none" }, /* @__PURE__ */ React17.createElement(HugeiconsIcon11, { icon: CancelCircleIcon3, size: 18 }))), /* @__PURE__ */ React17.createElement("div", { className: "flex-1 overflow-y-auto custom-scrollbar p-6 pt-6" }, /* @__PURE__ */ React17.createElement("div", { className: "flex flex-col items-center justify-center mb-6" }, /* @__PURE__ */ React17.createElement(WalletLogo, { src: selectedWallet.logoSrc, alt: selectedWallet.name, sizeClass: "w-14 h-14 mb-4" }), /* @__PURE__ */ React17.createElement("h2", { className: `text-2xl text-black mb-2 transition-all duration-300 ${hideBalanceAmounts ? "blur-[6px] opacity-40 select-none" : ""}` }, selectedWallet.balance, " ", selectedWallet.currency), /* @__PURE__ */ React17.createElement("span", { className: "text-[9px] tracking-widest text-neutral-500 px-4 py-1.5 rounded-full border border-neutral-200 uppercase mt-1 " }, selectedWallet.network, " NETWORK")), renderQrCode && /* @__PURE__ */ React17.createElement("div", { className: "w-full flex justify-center mb-6 mix-blend-multiply" }, renderQrCode(selectedWallet)), /* @__PURE__ */ React17.createElement("div", { className: "grid grid-cols-1 gap-y-6 gap-x-4 mb-10" }, /* @__PURE__ */ React17.createElement("div", null, /* @__PURE__ */ React17.createElement("span", { className: "text-[11px] tracking-[0.2em] text-neutral-400 block mb-2" }, "Wallet Address"), /* @__PURE__ */ React17.createElement("span", { className: "text-[13px] text-black break-all " }, selectedWallet.address)), /* @__PURE__ */ React17.createElement("div", null, /* @__PURE__ */ React17.createElement("span", { className: "text-[11px] tracking-[0.2em] text-neutral-400 block mb-2" }, "Wallet Name"), /* @__PURE__ */ React17.createElement("span", { className: "text-[13px] text-black" }, selectedWallet.name))), /* @__PURE__ */ React17.createElement("div", { className: "flex flex-col gap-3" }, /* @__PURE__ */ React17.createElement(
|
|
1583
1583
|
ThreeDActionButton,
|
|
1584
1584
|
{
|
|
1585
1585
|
onClick: () => onDownloadPayId && onDownloadPayId(selectedWallet),
|
|
@@ -1591,7 +1591,7 @@ var UniversalWalletPage = ({
|
|
|
1591
1591
|
"button",
|
|
1592
1592
|
{
|
|
1593
1593
|
onClick: () => handleCopy(selectedWallet),
|
|
1594
|
-
className: "w-full flex
|
|
1594
|
+
className: "w-full flex items-center justify-center py-2.5 rounded-full border border-neutral-200 text-black hover:bg-neutral-50 outline-none text-[13px] tracking-wide transition-colors"
|
|
1595
1595
|
},
|
|
1596
1596
|
"Copy Wallet Address"
|
|
1597
1597
|
))))));
|
|
@@ -1631,12 +1631,12 @@ var ConfirmationDialog = ({
|
|
|
1631
1631
|
className: "absolute inset-0 bg-black/40 ",
|
|
1632
1632
|
onClick: () => !isProcessing && onClose()
|
|
1633
1633
|
}
|
|
1634
|
-
), /* @__PURE__ */ React18.createElement("div", { className: "relative w-72 bg-white rounded-2xl flex flex-col items-center overflow-hidden shadow-2xl animate-in zoom-in-95 duration-200" }, /* @__PURE__ */ React18.createElement("div", { className: "p-6 pb-4 text-center w-full" }, /* @__PURE__ */ React18.createElement("h3", { className: "text-[17px] text-black
|
|
1634
|
+
), /* @__PURE__ */ React18.createElement("div", { className: "relative w-72 bg-white rounded-2xl flex flex-col items-center overflow-hidden shadow-2xl animate-in zoom-in-95 duration-200" }, /* @__PURE__ */ React18.createElement("div", { className: "p-6 pb-4 text-center w-full" }, /* @__PURE__ */ React18.createElement("h3", { className: "text-[17px] text-black tracking-tight mb-2" }, title), /* @__PURE__ */ React18.createElement("p", { className: "text-[12px] text-neutral-500 leading-relaxed px-2" }, message)), /* @__PURE__ */ React18.createElement("div", { className: "w-full flex" }, /* @__PURE__ */ React18.createElement(
|
|
1635
1635
|
"button",
|
|
1636
1636
|
{
|
|
1637
1637
|
onClick: onClose,
|
|
1638
1638
|
disabled: isProcessing,
|
|
1639
|
-
className: "flex-1 py-4 text-[14px] text-neutral-500 hover:bg-neutral-50 transition-colors disabled:opacity-50 outline-none
|
|
1639
|
+
className: "flex-1 py-4 text-[14px] text-neutral-500 hover:bg-neutral-50 transition-colors disabled:opacity-50 outline-none "
|
|
1640
1640
|
},
|
|
1641
1641
|
cancelText
|
|
1642
1642
|
), /* @__PURE__ */ React18.createElement(
|
|
@@ -1644,7 +1644,7 @@ var ConfirmationDialog = ({
|
|
|
1644
1644
|
{
|
|
1645
1645
|
onClick: onConfirm,
|
|
1646
1646
|
disabled: isProcessing,
|
|
1647
|
-
className: `flex-1 py-4 text-[
|
|
1647
|
+
className: `flex-1 py-4 text-[13px] transition-colors disabled:opacity-50 flex justify-center items-center outline-none ${isDestructive ? "text-red-500 hover:bg-red-50" : "text-black hover:bg-neutral-50"}`
|
|
1648
1648
|
},
|
|
1649
1649
|
isProcessing ? /* @__PURE__ */ React18.createElement(HugeiconsIcon12, { icon: Loading03Icon6, className: "animate-spin", size: 18 }) : confirmText
|
|
1650
1650
|
))));
|
|
@@ -1653,10 +1653,10 @@ var ConfirmationDialog = ({
|
|
|
1653
1653
|
// src/components/PinDialerBottomSheet.tsx
|
|
1654
1654
|
import React19, { useState as useState11, useEffect as useEffect8 } from "react";
|
|
1655
1655
|
import { HugeiconsIcon as HugeiconsIcon13 } from "@hugeicons/react";
|
|
1656
|
-
import { Loading03Icon as Loading03Icon7,
|
|
1656
|
+
import { Loading03Icon as Loading03Icon7, CancelCircleIcon as CancelCircleIcon4 } from "@hugeicons/core-free-icons";
|
|
1657
1657
|
var PinDialerBottomSheet = ({
|
|
1658
1658
|
isOpen,
|
|
1659
|
-
title = "
|
|
1659
|
+
title = "Action Required",
|
|
1660
1660
|
isVerifying = false,
|
|
1661
1661
|
onClose,
|
|
1662
1662
|
onComplete
|
|
@@ -1680,43 +1680,52 @@ var PinDialerBottomSheet = ({
|
|
|
1680
1680
|
}
|
|
1681
1681
|
};
|
|
1682
1682
|
if (!isOpen) return null;
|
|
1683
|
-
return /* @__PURE__ */ React19.createElement("div", { className: "fixed inset-0 z-150 flex
|
|
1683
|
+
return /* @__PURE__ */ React19.createElement("div", { className: "fixed inset-0 z-150 flex items-center justify-center p-4 pointer-events-auto" }, /* @__PURE__ */ React19.createElement(
|
|
1684
1684
|
"div",
|
|
1685
1685
|
{
|
|
1686
|
-
className: "absolute inset-0 bg-black/40 animate-in fade-in duration-
|
|
1686
|
+
className: "absolute inset-0 bg-black/40 animate-in fade-in duration-200",
|
|
1687
1687
|
onClick: () => {
|
|
1688
1688
|
if (!isVerifying) onClose();
|
|
1689
1689
|
}
|
|
1690
1690
|
}
|
|
1691
|
-
), /* @__PURE__ */ React19.createElement("div", { className: "relative w-full max-w-
|
|
1691
|
+
), /* @__PURE__ */ React19.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" }, /* @__PURE__ */ React19.createElement("div", { className: "flex items-center justify-between p-5 shrink-0" }, /* @__PURE__ */ React19.createElement("h3", { className: "text-[16px] text-black font-medium tracking-tight" }, title), /* @__PURE__ */ React19.createElement(
|
|
1692
|
+
"button",
|
|
1693
|
+
{
|
|
1694
|
+
onClick: () => {
|
|
1695
|
+
if (!isVerifying) onClose();
|
|
1696
|
+
},
|
|
1697
|
+
className: "text-neutral-400 hover:text-black transition-colors outline-none"
|
|
1698
|
+
},
|
|
1699
|
+
/* @__PURE__ */ React19.createElement(HugeiconsIcon13, { icon: CancelCircleIcon4, size: 20 })
|
|
1700
|
+
)), /* @__PURE__ */ React19.createElement("div", { className: "flex flex-col px-6 pb-8 pt-2 relative" }, /* @__PURE__ */ React19.createElement("p", { className: "text-center text-[13px] text-neutral-500 mb-6 tracking-wide" }, "Confirm your account pin to continue"), /* @__PURE__ */ React19.createElement("div", { className: "flex justify-center gap-4 mb-8" }, [0, 1, 2, 3].map((i) => /* @__PURE__ */ React19.createElement(
|
|
1692
1701
|
"div",
|
|
1693
1702
|
{
|
|
1694
1703
|
key: i,
|
|
1695
|
-
className: `w-3
|
|
1704
|
+
className: `w-3 h-3 rounded-full transition-colors duration-200 ${pin.length > i ? "bg-black" : "bg-neutral-200"}`
|
|
1696
1705
|
}
|
|
1697
|
-
))), isVerifying && /* @__PURE__ */ React19.createElement("div", { className: "absolute inset-0 bg-white/80 backdrop-blur-sm z-10 flex
|
|
1706
|
+
))), isVerifying && /* @__PURE__ */ React19.createElement("div", { className: "absolute inset-0 bg-white/80 backdrop-blur-sm z-10 flex items-center justify-center rounded-b-2xl" }, /* @__PURE__ */ React19.createElement(HugeiconsIcon13, { icon: Loading03Icon7, size: 28, className: "animate-spin text-black" })), /* @__PURE__ */ React19.createElement("div", { className: "grid grid-cols-3 gap-y-4 gap-x-6 max-w-60 mx-auto" }, [1, 2, 3, 4, 5, 6, 7, 8, 9].map((num) => /* @__PURE__ */ React19.createElement(
|
|
1698
1707
|
"button",
|
|
1699
1708
|
{
|
|
1700
1709
|
key: num,
|
|
1701
1710
|
onClick: () => handlePinPress(num),
|
|
1702
|
-
className: "w-
|
|
1711
|
+
className: "w-14 h-14 rounded-full flex items-center justify-center text-lg text-black hover:bg-neutral-50 transition-colors mx-auto outline-none active:scale-95"
|
|
1703
1712
|
},
|
|
1704
1713
|
num
|
|
1705
1714
|
)), /* @__PURE__ */ React19.createElement("div", null), " ", /* @__PURE__ */ React19.createElement(
|
|
1706
1715
|
"button",
|
|
1707
1716
|
{
|
|
1708
1717
|
onClick: () => handlePinPress(0),
|
|
1709
|
-
className: "w-
|
|
1718
|
+
className: "w-14 h-14 rounded-full flex items-center justify-center text-lg text-black hover:bg-neutral-50 transition-colors mx-auto outline-none active:scale-95"
|
|
1710
1719
|
},
|
|
1711
1720
|
"0"
|
|
1712
1721
|
), /* @__PURE__ */ React19.createElement(
|
|
1713
1722
|
"button",
|
|
1714
1723
|
{
|
|
1715
1724
|
onClick: () => handlePinPress("del"),
|
|
1716
|
-
className: "w-
|
|
1725
|
+
className: "w-14 h-14 rounded-full flex items-center justify-center text-neutral-400 hover:text-black hover:bg-neutral-50 transition-colors mx-auto outline-none active:scale-95"
|
|
1717
1726
|
},
|
|
1718
|
-
/* @__PURE__ */ React19.createElement(HugeiconsIcon13, { icon:
|
|
1719
|
-
))));
|
|
1727
|
+
/* @__PURE__ */ React19.createElement(HugeiconsIcon13, { icon: CancelCircleIcon4, size: 20 })
|
|
1728
|
+
)))));
|
|
1720
1729
|
};
|
|
1721
1730
|
|
|
1722
1731
|
// src/components/UniversalCardPage.tsx
|
|
@@ -1726,6 +1735,7 @@ var UniversalCardPage = ({
|
|
|
1726
1735
|
expiry,
|
|
1727
1736
|
cvv,
|
|
1728
1737
|
cardBgSrc,
|
|
1738
|
+
backgroundOverlay,
|
|
1729
1739
|
companyLogoSrc,
|
|
1730
1740
|
networkLogoSrc,
|
|
1731
1741
|
onReveal,
|
|
@@ -1792,7 +1802,7 @@ var UniversalCardPage = ({
|
|
|
1792
1802
|
const displayCardNumber = isRevealed ? cardNumber : `\u2022\u2022\u2022\u2022 \u2022\u2022\u2022\u2022 \u2022\u2022\u2022\u2022 ${cardNumber.slice(-4)}`;
|
|
1793
1803
|
const displayExpiry = isRevealed ? expiry : "\u2022\u2022/\u2022\u2022";
|
|
1794
1804
|
const displayCvv = isRevealed ? cvv : "\u2022\u2022\u2022";
|
|
1795
|
-
return /* @__PURE__ */ React20.createElement("div", { className: "w-full flex flex-col items-center animate-in fade-in duration-300 pb-12" }, /* @__PURE__ */ React20.createElement("
|
|
1805
|
+
return /* @__PURE__ */ React20.createElement("div", { className: "w-full flex flex-col items-center animate-in fade-in duration-300 pb-12" }, /* @__PURE__ */ React20.createElement("div", { className: "w-full pt-6 pb-2 flex justify-center", style: { perspective: "1000px" } }, /* @__PURE__ */ React20.createElement(
|
|
1796
1806
|
"div",
|
|
1797
1807
|
{
|
|
1798
1808
|
onClick: () => {
|
|
@@ -1800,12 +1810,12 @@ var UniversalCardPage = ({
|
|
|
1800
1810
|
},
|
|
1801
1811
|
className: `relative w-full max-w-85 transition-transform duration-700 ${!isBgLoaded ? "cursor-wait" : "cursor-pointer"}`,
|
|
1802
1812
|
style: {
|
|
1803
|
-
height:
|
|
1813
|
+
height: 185,
|
|
1804
1814
|
transformStyle: "preserve-3d",
|
|
1805
1815
|
transform: isFlipped ? "rotateY(180deg)" : "rotateY(0deg)"
|
|
1806
1816
|
}
|
|
1807
1817
|
},
|
|
1808
|
-
!isBgLoaded && /* @__PURE__ */ React20.createElement("div", { className: "absolute inset-0 w-full h-full bg-white rounded-2xl flex items-center justify-center z-50
|
|
1818
|
+
!isBgLoaded && /* @__PURE__ */ React20.createElement("div", { className: "absolute inset-0 w-full h-full bg-white rounded-2xl flex items-center justify-center z-50 " }, /* @__PURE__ */ React20.createElement(HugeiconsIcon14, { icon: Loading03Icon8, size: 28, className: "animate-spin text-black" })),
|
|
1809
1819
|
/* @__PURE__ */ React20.createElement(
|
|
1810
1820
|
"div",
|
|
1811
1821
|
{
|
|
@@ -1819,7 +1829,14 @@ var UniversalCardPage = ({
|
|
|
1819
1829
|
style: { backgroundImage: `url(${cardBgSrc}), linear-gradient(to bottom right, #111, #333)` }
|
|
1820
1830
|
}
|
|
1821
1831
|
),
|
|
1822
|
-
|
|
1832
|
+
backgroundOverlay && /* @__PURE__ */ React20.createElement(
|
|
1833
|
+
"div",
|
|
1834
|
+
{
|
|
1835
|
+
className: "absolute inset-0 bg-cover bg-center pointer-events-none",
|
|
1836
|
+
style: { backgroundImage: `url(${backgroundOverlay})` }
|
|
1837
|
+
}
|
|
1838
|
+
),
|
|
1839
|
+
/* @__PURE__ */ React20.createElement("div", { className: "relative z-10 w-full h-full p-5 flex flex-col justify-between" }, /* @__PURE__ */ React20.createElement("div", { className: "flex justify-between items-start w-full" }, /* @__PURE__ */ React20.createElement("div", null, /* @__PURE__ */ React20.createElement("span", { className: "text-[12px] text-white/70 " }, "Prepaid Card")), companyLogoSrc && /* @__PURE__ */ React20.createElement("img", { src: companyLogoSrc, alt: "Company Logo", className: "h-10 w-auto max-w-30 object-contain opacity-90" })), /* @__PURE__ */ React20.createElement("div", { className: "flex justify-between items-end w-full" }, /* @__PURE__ */ React20.createElement("div", { className: "flex flex-col gap-1" }, /* @__PURE__ */ React20.createElement("span", { className: "text-[10px] text-white/60 tracking-widest uppercase" }, "Card Number"), /* @__PURE__ */ React20.createElement("span", { className: "text-[14px] text-white tracking-widest font-light" }, displayCardNumber)), networkLogoSrc && /* @__PURE__ */ React20.createElement("img", { src: networkLogoSrc, alt: "Network Logo", className: "h-10 w-auto max-w-20 object-contain opacity-90" })))
|
|
1823
1840
|
),
|
|
1824
1841
|
/* @__PURE__ */ React20.createElement(
|
|
1825
1842
|
"div",
|
|
@@ -1837,8 +1854,14 @@ var UniversalCardPage = ({
|
|
|
1837
1854
|
style: { backgroundImage: `url(${cardBgSrc}), linear-gradient(to bottom right, #111, #333)` }
|
|
1838
1855
|
}
|
|
1839
1856
|
),
|
|
1840
|
-
/* @__PURE__ */ React20.createElement(
|
|
1841
|
-
|
|
1857
|
+
backgroundOverlay && /* @__PURE__ */ React20.createElement(
|
|
1858
|
+
"div",
|
|
1859
|
+
{
|
|
1860
|
+
className: "absolute inset-0 bg-cover bg-center pointer-events-none",
|
|
1861
|
+
style: { backgroundImage: `url(${backgroundOverlay})` }
|
|
1862
|
+
}
|
|
1863
|
+
),
|
|
1864
|
+
/* @__PURE__ */ React20.createElement("div", { className: "relative z-10 w-full h-full p-5 flex flex-col justify-end" }, /* @__PURE__ */ React20.createElement("div", { className: "w-full text-center mb-6" }, /* @__PURE__ */ React20.createElement("span", { className: "text-white text-3xl italic tracking-wide opacity-90", style: { fontFamily: "'Whisper', cursive" } }, cardHolderName)), /* @__PURE__ */ React20.createElement("div", { className: "flex justify-between w-full max-w-[80%]" }, /* @__PURE__ */ React20.createElement("div", { className: "flex flex-col" }, /* @__PURE__ */ React20.createElement("span", { className: "text-[9px] text-white/60 tracking-widest uppercase" }, "Expiry"), /* @__PURE__ */ React20.createElement("span", { className: "text-[14px] text-white font-light" }, displayExpiry)), /* @__PURE__ */ React20.createElement("div", { className: "flex flex-col" }, /* @__PURE__ */ React20.createElement("span", { className: "text-[9px] text-white/60 tracking-widest uppercase" }, "CVV"), /* @__PURE__ */ React20.createElement("span", { className: "text-[14px] text-white font-light" }, displayCvv))))
|
|
1842
1865
|
)
|
|
1843
1866
|
)), /* @__PURE__ */ React20.createElement("p", { className: "text-xs text-neutral-400 mb-6" }, "Tap to flip card"), /* @__PURE__ */ React20.createElement("div", { className: "w-full flex flex-col gap-4" }, /* @__PURE__ */ React20.createElement("div", { className: "w-full bg-white rounded-2xl overflow-hidden" }, /* @__PURE__ */ React20.createElement(
|
|
1844
1867
|
MenuRow,
|
|
@@ -1878,8 +1901,6 @@ var UniversalCardPage = ({
|
|
|
1878
1901
|
title: "Delete card",
|
|
1879
1902
|
subtitle: "Permanently delete card",
|
|
1880
1903
|
onClick: () => setShowDeleteDialog(true),
|
|
1881
|
-
iconColor: "text-red-500",
|
|
1882
|
-
titleColor: "text-red-500",
|
|
1883
1904
|
isLast: true
|
|
1884
1905
|
}
|
|
1885
1906
|
))), /* @__PURE__ */ React20.createElement(
|
|
@@ -1898,7 +1919,7 @@ var UniversalCardPage = ({
|
|
|
1898
1919
|
PinDialerBottomSheet,
|
|
1899
1920
|
{
|
|
1900
1921
|
isOpen: showPinDialer,
|
|
1901
|
-
title: "
|
|
1922
|
+
title: "Authorization Required",
|
|
1902
1923
|
isVerifying: isRevealing,
|
|
1903
1924
|
onClose: () => setShowPinDialer(false),
|
|
1904
1925
|
onComplete: handlePinComplete
|
|
@@ -1923,7 +1944,7 @@ var MenuRow = ({
|
|
|
1923
1944
|
className: `flex items-center p-3 cursor-pointer hover:bg-neutral-50 transition-colors ${!isLast ? "" : ""}`
|
|
1924
1945
|
},
|
|
1925
1946
|
/* @__PURE__ */ React20.createElement("div", { className: "w-9 h-9 rounded-full border border-neutral-200 flex items-center justify-center shrink-0 mr-4" }, /* @__PURE__ */ React20.createElement(HugeiconsIcon14, { icon, size: 16, className: iconColor })),
|
|
1926
|
-
/* @__PURE__ */ React20.createElement("div", { className: "flex-1 min-w-0" }, /* @__PURE__ */ React20.createElement("p", { className: `text-[13px]
|
|
1947
|
+
/* @__PURE__ */ React20.createElement("div", { className: "flex-1 min-w-0" }, /* @__PURE__ */ React20.createElement("p", { className: `text-[13px] truncate ${titleColor}` }, title), /* @__PURE__ */ React20.createElement("p", { className: "text-[11px] text-neutral-500 truncate" }, subtitle)),
|
|
1927
1948
|
isToggle ? /* @__PURE__ */ React20.createElement("div", { className: `relative w-11 h-6 rounded-full transition-colors duration-300 ml-2 shrink-0 ${toggleState ? "bg-black" : "bg-neutral-200"}` }, /* @__PURE__ */ React20.createElement("div", { className: `absolute top-1 left-1 w-4 h-4 rounded-full bg-white shadow-sm transition-transform duration-300 flex items-center justify-center ${toggleState ? "translate-x-5" : "translate-x-0"}` }, toggleLoading && /* @__PURE__ */ React20.createElement(HugeiconsIcon14, { icon: Loading03Icon8, size: 10, className: "animate-spin text-black" }))) : /* @__PURE__ */ React20.createElement(HugeiconsIcon14, { icon: ArrowRight01Icon2, size: 18, className: "text-neutral-400 shrink-0 ml-2" })
|
|
1928
1949
|
);
|
|
1929
1950
|
|
|
@@ -1933,12 +1954,12 @@ import { HugeiconsIcon as HugeiconsIcon15 } from "@hugeicons/react";
|
|
|
1933
1954
|
import {
|
|
1934
1955
|
UserIcon,
|
|
1935
1956
|
LockKeyIcon as LockKeyIcon2,
|
|
1936
|
-
|
|
1937
|
-
|
|
1938
|
-
|
|
1939
|
-
|
|
1940
|
-
|
|
1941
|
-
|
|
1957
|
+
Notification01Icon,
|
|
1958
|
+
MessageQuestionIcon,
|
|
1959
|
+
UserIdVerificationIcon,
|
|
1960
|
+
FileDownloadIcon,
|
|
1961
|
+
LogoutCircle02Icon,
|
|
1962
|
+
UserRemove01Icon,
|
|
1942
1963
|
ArrowRight01Icon as ArrowRight01Icon3,
|
|
1943
1964
|
Loading03Icon as Loading03Icon9
|
|
1944
1965
|
} from "@hugeicons/core-free-icons";
|
|
@@ -1977,7 +1998,7 @@ var UniversalProfilePage = ({
|
|
|
1977
1998
|
onLoad: () => setIsAvatarLoaded(true),
|
|
1978
1999
|
className: `w-full h-full object-cover transition-opacity duration-300 ${isAvatarLoaded ? "opacity-100" : "opacity-0"}`
|
|
1979
2000
|
}
|
|
1980
|
-
)) : /* @__PURE__ */ React21.createElement(HugeiconsIcon15, { icon: UserIcon, size: 40, className: "text-neutral-300" }))), /* @__PURE__ */ React21.createElement("div", { className: "bg-white rounded-full px-4 py-2 flex items-center justify-center gap-2 mb-3" }, /* @__PURE__ */ React21.createElement("span", { className: "text-[12px]
|
|
2001
|
+
)) : /* @__PURE__ */ React21.createElement(HugeiconsIcon15, { icon: UserIcon, size: 40, className: "text-neutral-300" }))), /* @__PURE__ */ React21.createElement("div", { className: "bg-white rounded-full px-4 py-2 flex items-center justify-center gap-2 mb-3" }, /* @__PURE__ */ React21.createElement("span", { className: "text-[12px] text-black" }, roleName), /* @__PURE__ */ React21.createElement(HugeiconsIcon15, { icon: ArrowRight01Icon3, size: 14, className: "text-neutral-400" })), /* @__PURE__ */ React21.createElement("span", { className: "text-[12px] text-neutral-500" }, memberSince)), /* @__PURE__ */ React21.createElement("div", { className: "w-full flex flex-col gap-4 mt-2" }, /* @__PURE__ */ React21.createElement("div", { className: "w-full bg-white rounded-2xl overflow-hidden" }, /* @__PURE__ */ React21.createElement(
|
|
1981
2002
|
MenuRow2,
|
|
1982
2003
|
{
|
|
1983
2004
|
icon: UserIcon,
|
|
@@ -1996,7 +2017,7 @@ var UniversalProfilePage = ({
|
|
|
1996
2017
|
), /* @__PURE__ */ React21.createElement(
|
|
1997
2018
|
MenuRow2,
|
|
1998
2019
|
{
|
|
1999
|
-
icon:
|
|
2020
|
+
icon: Notification01Icon,
|
|
2000
2021
|
title: "Notifications",
|
|
2001
2022
|
subtitle: "Manage notifications",
|
|
2002
2023
|
onClick: onNotificationsTap
|
|
@@ -2004,7 +2025,7 @@ var UniversalProfilePage = ({
|
|
|
2004
2025
|
), /* @__PURE__ */ React21.createElement(
|
|
2005
2026
|
MenuRow2,
|
|
2006
2027
|
{
|
|
2007
|
-
icon:
|
|
2028
|
+
icon: MessageQuestionIcon,
|
|
2008
2029
|
title: "Get Help",
|
|
2009
2030
|
subtitle: "24/7 Support",
|
|
2010
2031
|
onClick: onHelpTap,
|
|
@@ -2013,7 +2034,7 @@ var UniversalProfilePage = ({
|
|
|
2013
2034
|
)), /* @__PURE__ */ React21.createElement("div", { className: "w-full bg-white rounded-2xl overflow-hidden" }, /* @__PURE__ */ React21.createElement(
|
|
2014
2035
|
MenuRow2,
|
|
2015
2036
|
{
|
|
2016
|
-
icon:
|
|
2037
|
+
icon: UserIdVerificationIcon,
|
|
2017
2038
|
title: "Verifications",
|
|
2018
2039
|
subtitle: "Account Verifications",
|
|
2019
2040
|
onClick: onVerificationsTap
|
|
@@ -2021,7 +2042,7 @@ var UniversalProfilePage = ({
|
|
|
2021
2042
|
), /* @__PURE__ */ React21.createElement(
|
|
2022
2043
|
MenuRow2,
|
|
2023
2044
|
{
|
|
2024
|
-
icon:
|
|
2045
|
+
icon: FileDownloadIcon,
|
|
2025
2046
|
title: "Export Account",
|
|
2026
2047
|
subtitle: "Transfer your account",
|
|
2027
2048
|
onClick: onExportTap
|
|
@@ -2029,7 +2050,7 @@ var UniversalProfilePage = ({
|
|
|
2029
2050
|
), /* @__PURE__ */ React21.createElement(
|
|
2030
2051
|
MenuRow2,
|
|
2031
2052
|
{
|
|
2032
|
-
icon:
|
|
2053
|
+
icon: LogoutCircle02Icon,
|
|
2033
2054
|
title: "LogOut",
|
|
2034
2055
|
subtitle: "End your session",
|
|
2035
2056
|
onClick: () => setShowLogoutDialog(true),
|
|
@@ -2038,7 +2059,7 @@ var UniversalProfilePage = ({
|
|
|
2038
2059
|
)), /* @__PURE__ */ React21.createElement("div", { className: "w-full bg-white rounded-2xl overflow-hidden mb-4" }, /* @__PURE__ */ React21.createElement(
|
|
2039
2060
|
MenuRow2,
|
|
2040
2061
|
{
|
|
2041
|
-
icon:
|
|
2062
|
+
icon: UserRemove01Icon,
|
|
2042
2063
|
title: "Delete Account",
|
|
2043
2064
|
subtitle: "Remove account",
|
|
2044
2065
|
onClick: onDeleteTap,
|
|
@@ -2064,8 +2085,8 @@ var MenuRow2 = ({ icon, title, subtitle, onClick, iconColor = "text-black", titl
|
|
|
2064
2085
|
onClick,
|
|
2065
2086
|
className: `flex items-center p-4 cursor-pointer hover:bg-neutral-50 transition-colors ${!isLast ? "" : ""}`
|
|
2066
2087
|
},
|
|
2067
|
-
/* @__PURE__ */ React21.createElement("div", { className: "w-9 h-9 rounded-full flex items-center justify-center shrink-0 mr-4" }, /* @__PURE__ */ React21.createElement(HugeiconsIcon15, { icon, size: 16, className: iconColor })),
|
|
2068
|
-
/* @__PURE__ */ React21.createElement("div", { className: "flex-1 min-w-0" }, /* @__PURE__ */ React21.createElement("p", { className: `text-[13px]
|
|
2088
|
+
/* @__PURE__ */ React21.createElement("div", { className: "w-9 h-9 rounded-full border border-neutral-200 flex items-center justify-center shrink-0 mr-4" }, /* @__PURE__ */ React21.createElement(HugeiconsIcon15, { icon, size: 16, className: iconColor })),
|
|
2089
|
+
/* @__PURE__ */ React21.createElement("div", { className: "flex-1 min-w-0" }, /* @__PURE__ */ React21.createElement("p", { className: `text-[13px] truncate ${titleColor}` }, title), /* @__PURE__ */ React21.createElement("p", { className: "text-[11px] text-neutral-500 truncate" }, subtitle)),
|
|
2069
2090
|
/* @__PURE__ */ React21.createElement(HugeiconsIcon15, { icon: ArrowRight01Icon3, size: 18, className: "text-neutral-400 shrink-0 ml-2" })
|
|
2070
2091
|
);
|
|
2071
2092
|
|