@microcosmmoney/portal-react 3.11.0 → 3.12.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/auction/auction-page.js +0 -2
- package/dist/components/dashboard/assets-summary.d.ts +1 -1
- package/dist/components/dashboard/assets-summary.js +21 -18
- package/dist/components/dashboard/dashboard-overview.js +1 -4
- package/dist/components/dashboard/ecosystem-stats.js +0 -1
- package/dist/components/dashboard/lock-periods.d.ts +1 -1
- package/dist/components/dashboard/lock-periods.js +4 -4
- package/dist/components/dashboard/market-overview-bar.js +110 -26
- package/dist/components/dashboard/mcc-token-stats.d.ts +1 -1
- package/dist/components/dashboard/mcc-token-stats.js +32 -18
- package/dist/components/dashboard/mcd-stats.d.ts +1 -1
- package/dist/components/dashboard/mcd-stats.js +32 -18
- package/dist/components/dashboard/mining-weight.js +11 -15
- package/dist/components/dashboard/minting-stats.js +10 -11
- package/dist/components/dashboard/my-mining.d.ts +2 -1
- package/dist/components/dashboard/my-mining.js +22 -14
- package/dist/components/dashboard/price-chart.js +44 -7
- package/dist/components/dashboard/quick-actions.js +35 -21
- package/dist/components/mcd/mcd-page.js +0 -4
- package/dist/components/mining/mining-page.js +1 -7
- package/dist/components/organization/organization-page.js +0 -7
- package/dist/components/queue/queue-status-page.d.ts +1 -2
- package/dist/components/queue/queue-status-page.js +3 -43
- package/dist/components/stations/station-list-page.d.ts +1 -2
- package/dist/components/stations/station-list-page.js +2 -14
- package/dist/components/territory/territory-page.js +0 -39
- package/dist/components/voting/voting-page.js +0 -1
- package/dist/components/wallet/wallet-page.js +1 -9
- package/dist/menu-config.d.ts +0 -2
- package/dist/menu-config.js +0 -2
- package/package.json +3 -3
|
@@ -6,7 +6,6 @@ const jsx_runtime_1 = require("react/jsx-runtime");
|
|
|
6
6
|
const react_1 = require("react");
|
|
7
7
|
const i18n_context_1 = require("../../i18n-context");
|
|
8
8
|
const auth_react_1 = require("@microcosmmoney/auth-react");
|
|
9
|
-
/* ─── Inline SVG Icons (lucide style, 24x24) ─── */
|
|
10
9
|
const IconGavel = ({ className = 'w-4 h-4' }) => ((0, jsx_runtime_1.jsxs)("svg", { className: className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [(0, jsx_runtime_1.jsx)("path", { d: "m14 13-7.5 7.5c-.83.83-2.17.83-3 0 0 0 0 0 0 0a2.12 2.12 0 0 1 0-3L11 10" }), (0, jsx_runtime_1.jsx)("path", { d: "m16 16 6-6" }), (0, jsx_runtime_1.jsx)("path", { d: "m8 8 6-6" }), (0, jsx_runtime_1.jsx)("path", { d: "m9 7 8 8" }), (0, jsx_runtime_1.jsx)("path", { d: "m21 11-8-8" })] }));
|
|
11
10
|
const IconFlame = ({ className = 'w-4 h-4' }) => ((0, jsx_runtime_1.jsx)("svg", { className: className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: (0, jsx_runtime_1.jsx)("path", { d: "M8.5 14.5A2.5 2.5 0 0 0 11 12c0-1.38-.5-2-1-3-1.072-2.143-.224-4.054 2-6 .5 2.5 2 4.9 4 6.5 2 1.6 3 3.5 3 5.5a7 7 0 1 1-14 0c0-1.153.433-2.294 1-3a2.5 2.5 0 0 0 2.5 2.5z" }) }));
|
|
12
11
|
const IconCrown = ({ className = 'w-4 h-4' }) => ((0, jsx_runtime_1.jsxs)("svg", { className: className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [(0, jsx_runtime_1.jsx)("path", { d: "M11.562 3.266a.5.5 0 0 1 .876 0L15.39 8.87a1 1 0 0 0 1.516.294L21.183 5.5a.5.5 0 0 1 .798.519l-2.834 10.246a1 1 0 0 1-.956.734H5.81a1 1 0 0 1-.957-.734L2.02 6.02a.5.5 0 0 1 .798-.519l4.276 3.664a1 1 0 0 0 1.516-.294z" }), (0, jsx_runtime_1.jsx)("path", { d: "M5 21h14" })] }));
|
|
@@ -26,7 +25,6 @@ const IconBuilding = ({ className = 'w-4 h-4' }) => ((0, jsx_runtime_1.jsxs)("sv
|
|
|
26
25
|
const IconGrid = ({ className = 'w-4 h-4' }) => ((0, jsx_runtime_1.jsxs)("svg", { className: className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [(0, jsx_runtime_1.jsx)("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2" }), (0, jsx_runtime_1.jsx)("path", { d: "M3 9h18" }), (0, jsx_runtime_1.jsx)("path", { d: "M3 15h18" }), (0, jsx_runtime_1.jsx)("path", { d: "M9 3v18" }), (0, jsx_runtime_1.jsx)("path", { d: "M15 3v18" })] }));
|
|
27
26
|
const IconMap = ({ className = 'w-4 h-4' }) => ((0, jsx_runtime_1.jsxs)("svg", { className: className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [(0, jsx_runtime_1.jsx)("path", { d: "M14.106 5.553a2 2 0 0 0 1.788 0l3.659-1.83A1 1 0 0 1 21 4.619v12.764a1 1 0 0 1-.553.894l-4.553 2.277a2 2 0 0 1-1.788 0l-4.212-2.106a2 2 0 0 0-1.788 0l-3.659 1.83A1 1 0 0 1 3 19.381V6.618a1 1 0 0 1 .553-.894l4.553-2.277a2 2 0 0 1 1.788 0z" }), (0, jsx_runtime_1.jsx)("path", { d: "M15 5.764v15" }), (0, jsx_runtime_1.jsx)("path", { d: "M9 3.236v15" })] }));
|
|
28
27
|
const IconGlobe = ({ className = 'w-4 h-4' }) => ((0, jsx_runtime_1.jsxs)("svg", { className: className, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [(0, jsx_runtime_1.jsx)("circle", { cx: "12", cy: "12", r: "10" }), (0, jsx_runtime_1.jsx)("path", { d: "M12 2a14.5 14.5 0 0 0 0 20 14.5 14.5 0 0 0 0-20" }), (0, jsx_runtime_1.jsx)("path", { d: "M2 12h20" })] }));
|
|
29
|
-
/* ─── Helpers ─── */
|
|
30
28
|
const UNIT_ICONS = {
|
|
31
29
|
station: (0, jsx_runtime_1.jsx)(IconBuilding, { className: "w-4 h-4" }),
|
|
32
30
|
matrix: (0, jsx_runtime_1.jsx)(IconGrid, { className: "w-4 h-4" }),
|
|
@@ -3,4 +3,4 @@ export interface MicrocosmAssetsSummaryProps {
|
|
|
3
3
|
onNavigate?: (path: string) => void;
|
|
4
4
|
accentColor?: string;
|
|
5
5
|
}
|
|
6
|
-
export declare function MicrocosmAssetsSummary({ basePath,
|
|
6
|
+
export declare function MicrocosmAssetsSummary({ basePath, accentColor }: MicrocosmAssetsSummaryProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -5,41 +5,44 @@ exports.MicrocosmAssetsSummary = MicrocosmAssetsSummary;
|
|
|
5
5
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
6
6
|
const auth_react_1 = require("@microcosmmoney/auth-react");
|
|
7
7
|
const i18n_context_1 = require("../../i18n-context");
|
|
8
|
+
const link_context_1 = require("../../link-context");
|
|
8
9
|
const RANK_COLOR = {
|
|
9
10
|
miner: 'text-cyan-300',
|
|
10
11
|
commander: 'text-white', pioneer: 'text-cyan-400', warden: 'text-cyan-300', admiral: 'text-cyan-300',
|
|
11
12
|
};
|
|
12
|
-
function MicrocosmAssetsSummary({ basePath = '',
|
|
13
|
+
function MicrocosmAssetsSummary({ basePath = '', accentColor }) {
|
|
13
14
|
const t = (0, i18n_context_1.useTranslations)('mccDashboard');
|
|
15
|
+
const Link = (0, link_context_1.useLinkComponent)();
|
|
14
16
|
const { balance: mccData, loading: mccLoading } = (0, auth_react_1.useMCC)(120000);
|
|
15
|
-
const { balance: mcdData
|
|
17
|
+
const { balance: mcdData } = (0, auth_react_1.useMCD)(120000);
|
|
16
18
|
const { data: levelData } = (0, auth_react_1.useLevelProgress)();
|
|
17
19
|
const { data: wallets } = (0, auth_react_1.useWallets)();
|
|
18
20
|
const { data: locks } = (0, auth_react_1.useMCCLocks)();
|
|
19
21
|
const { data: marketData } = (0, auth_react_1.useMarketData)();
|
|
20
22
|
const resolvePath = (p) => basePath ? `${basePath.replace(/\/$/, '')}${p}` : p;
|
|
21
|
-
const
|
|
22
|
-
const mccPrice = marketData?.price_usd ?? 0;
|
|
23
|
-
const mccUsdValue = mccPrice > 0 ?
|
|
23
|
+
const mccDisplay = mccData?.balance ?? 0;
|
|
24
|
+
const mccPrice = marketData?.price ?? marketData?.price_usd ?? 0;
|
|
25
|
+
const mccUsdValue = mccPrice > 0 ? mccDisplay * mccPrice : 0;
|
|
24
26
|
const mcdAmount = parseFloat(mcdData?.available_balance ?? '0');
|
|
25
|
-
const
|
|
26
|
-
const
|
|
27
|
+
const mcdTotalReceived = parseFloat(mcdData?.total_balance ?? '0');
|
|
28
|
+
const mcdTotalSpent = parseFloat(mcdData?.frozen_balance ?? '0');
|
|
27
29
|
const walletCount = Array.isArray(wallets) ? wallets.length : 0;
|
|
28
30
|
const activeLocks = Array.isArray(locks) ? locks.filter((l) => l.status === 'locked') : [];
|
|
29
31
|
const lockedAmount = activeLocks.reduce((sum, l) => sum + (l.amount || 0), 0);
|
|
30
|
-
const
|
|
32
|
+
const userRank = levelData?.level ?? levelData?.current_level ?? null;
|
|
31
33
|
const nextRank = levelData?.next_level ?? null;
|
|
32
|
-
const
|
|
33
|
-
const
|
|
34
|
-
const
|
|
35
|
-
|
|
36
|
-
|
|
34
|
+
const progressPercent = levelData?.progress_percent ?? 0;
|
|
35
|
+
const nextLevelRequirement = levelData?.next_level_requirement ?? null;
|
|
36
|
+
const getRankColor = (rank) => {
|
|
37
|
+
if (!rank)
|
|
38
|
+
return 'text-neutral-500';
|
|
39
|
+
return RANK_COLOR[rank.toLowerCase()] || 'text-neutral-400';
|
|
40
|
+
};
|
|
41
|
+
const rankColor = accentColor ? undefined : getRankColor(userRank);
|
|
37
42
|
const rankStyle = accentColor ? { color: accentColor } : undefined;
|
|
38
43
|
const spinnerBorderColor = accentColor ? { borderColor: accentColor, borderTopColor: 'transparent' } : undefined;
|
|
39
44
|
const spinnerClass = accentColor ? 'inline-block w-5 h-5 border-2 rounded-full animate-spin' : 'inline-block w-5 h-5 border-2 border-cyan-400 border-t-transparent rounded-full animate-spin';
|
|
40
|
-
return ((0, jsx_runtime_1.jsxs)("div", { className: "grid grid-cols-2
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
? (0, jsx_runtime_1.jsx)("span", { className: spinnerClass, style: spinnerBorderColor })
|
|
44
|
-
: fmt(mcdAmount) }), (0, jsx_runtime_1.jsxs)("div", { className: "text-[10px] text-neutral-500 font-mono mt-1", children: [t('in', 'in'), ": ", fmt(mcdReceived, 0), " ", t('out', 'out'), ": ", fmt(mcdSpent, 0)] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "backdrop-blur-md bg-white/5 border border-white/10 rounded-xl p-4 blockchain-card", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1.5 mb-2", children: [(0, jsx_runtime_1.jsx)("svg", { className: "blockchain-icon w-3.5 h-3.5 text-[#5EEAD4]", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" }) }), (0, jsx_runtime_1.jsx)("span", { className: "text-[#5EEAD4] text-[10px] font-mono tracking-widest uppercase", children: t('locked', 'LOCKED') })] }), (0, jsx_runtime_1.jsx)("div", { className: "text-2xl font-bold font-mono text-white", children: fmt(lockedAmount, 0) }), (0, jsx_runtime_1.jsxs)("div", { className: "text-[10px] text-neutral-500 font-mono mt-1", children: [activeLocks.length, " ", t('lockPeriods', 'lock period(s)')] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "backdrop-blur-md bg-white/5 border border-white/10 rounded-xl p-4 blockchain-card", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1.5 mb-2", children: [(0, jsx_runtime_1.jsx)("svg", { className: "blockchain-icon w-3.5 h-3.5 text-[#5EEAD4]", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" }) }), (0, jsx_runtime_1.jsx)("span", { className: "text-[#5EEAD4] text-[10px] font-mono tracking-widest uppercase", children: t('wallets', 'WALLETS') })] }), (0, jsx_runtime_1.jsx)("div", { className: "text-2xl font-bold font-mono text-white", children: walletCount })] }), (0, jsx_runtime_1.jsxs)("div", { className: "backdrop-blur-md bg-white/5 border border-white/10 rounded-xl p-4 blockchain-card", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-[#5EEAD4] text-[10px] font-mono tracking-widest uppercase mb-2", children: t('rank', 'RANK') }), (0, jsx_runtime_1.jsx)("div", { className: `text-lg font-bold font-mono ${rankColor ?? ''}`, style: rankStyle, children: rank || t('na', 'N/A') }), nextRank && ((0, jsx_runtime_1.jsxs)("div", { className: "mt-2", children: [(0, jsx_runtime_1.jsx)("div", { className: "w-full bg-neutral-800 rounded-full h-1.5", children: (0, jsx_runtime_1.jsx)("div", { className: accentColor ? 'h-1.5 rounded-full transition-all' : 'bg-cyan-400 h-1.5 rounded-full transition-all', style: { width: `${Math.min(progress, 100)}%`, ...(accentColor ? { backgroundColor: accentColor } : {}) } }) }), (0, jsx_runtime_1.jsxs)("div", { className: "text-[10px] text-neutral-500 font-mono mt-1", children: [progress.toFixed(0), "% \u2192 ", nextRank] })] }))] })] }));
|
|
45
|
+
return ((0, jsx_runtime_1.jsxs)("div", { className: "grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-2 sm:gap-3", children: [(0, jsx_runtime_1.jsx)(Link, { href: resolvePath('/mcc/wallet'), className: "block group", children: (0, jsx_runtime_1.jsxs)("div", { className: "backdrop-blur-md bg-white/5 border border-white/10 rounded-xl p-2.5 sm:p-4 blockchain-card h-full", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1.5 mb-2", children: [(0, jsx_runtime_1.jsxs)("svg", { className: "w-3.5 h-3.5 text-[#5EEAD4]", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: [(0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 12a3 3 0 11-6 0 3 3 0 016 0z" }), (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" })] }), (0, jsx_runtime_1.jsx)("span", { className: "text-[#5EEAD4] text-[10px] font-mono tracking-widest uppercase", children: t('mccBalance', 'MCC_BALANCE') })] }), (0, jsx_runtime_1.jsx)("div", { className: accentColor ? 'text-base sm:text-2xl font-bold font-mono' : 'text-base sm:text-2xl font-bold font-mono text-cyan-400', style: accentColor ? { color: accentColor } : undefined, children: mccLoading
|
|
46
|
+
? (0, jsx_runtime_1.jsx)("span", { className: spinnerClass, style: spinnerBorderColor })
|
|
47
|
+
: mccDisplay.toLocaleString('en-US', { minimumFractionDigits: 3, maximumFractionDigits: 3 }) }), mccUsdValue > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: "text-xs text-neutral-500 font-mono mt-1", children: ["\u2248 $", mccUsdValue.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })] }))] }) }), (0, jsx_runtime_1.jsx)(Link, { href: resolvePath('/mcc/mcd'), className: "block group", children: (0, jsx_runtime_1.jsxs)("div", { className: "backdrop-blur-md bg-white/5 border border-white/10 rounded-xl p-2.5 sm:p-4 blockchain-card h-full", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1.5 mb-2", children: [(0, jsx_runtime_1.jsx)("svg", { className: "w-3.5 h-3.5 text-[#5EEAD4]", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M13 7h8m0 0v8m0-8l-8 8-4-4-6 6" }) }), (0, jsx_runtime_1.jsx)("span", { className: "text-[#5EEAD4] text-[10px] font-mono tracking-widest uppercase", children: t('mcdBalance', 'MCD_BALANCE') })] }), (0, jsx_runtime_1.jsx)("div", { className: "text-base sm:text-2xl font-bold font-mono text-white", children: mcdAmount.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 }) }), (0, jsx_runtime_1.jsxs)("div", { className: "text-[10px] text-neutral-500 font-mono mt-1", children: [t('in', 'in'), ": ", mcdTotalReceived.toLocaleString('en-US', { maximumFractionDigits: 0 }), " ", t('out', 'out'), ": ", mcdTotalSpent.toLocaleString('en-US', { maximumFractionDigits: 0 })] })] }) }), (0, jsx_runtime_1.jsxs)("div", { className: "backdrop-blur-md bg-white/5 border border-white/10 rounded-xl p-2.5 sm:p-4 blockchain-card", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1.5 mb-2", children: [(0, jsx_runtime_1.jsx)("svg", { className: "w-3.5 h-3.5 text-[#5EEAD4]", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" }) }), (0, jsx_runtime_1.jsx)("span", { className: "text-[#5EEAD4] text-[10px] font-mono tracking-widest uppercase", children: t('locked', 'LOCKED') })] }), (0, jsx_runtime_1.jsx)("div", { className: "text-base sm:text-2xl font-bold font-mono text-white", children: lockedAmount.toLocaleString('en-US', { maximumFractionDigits: 0 }) }), (0, jsx_runtime_1.jsxs)("div", { className: "text-[10px] text-neutral-500 font-mono mt-1", children: [activeLocks.length, " ", t('lockPeriods', 'lock period'), activeLocks.length !== 1 ? 's' : ''] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "backdrop-blur-md bg-white/5 border border-white/10 rounded-xl p-2.5 sm:p-4 blockchain-card", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1.5 mb-2", children: [(0, jsx_runtime_1.jsx)("svg", { className: "w-3.5 h-3.5 text-[#5EEAD4]", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M3 10h18M7 15h1m4 0h1m-7 4h12a3 3 0 003-3V8a3 3 0 00-3-3H6a3 3 0 00-3 3v8a3 3 0 003 3z" }) }), (0, jsx_runtime_1.jsx)("span", { className: "text-[#5EEAD4] text-[10px] font-mono tracking-widest uppercase", children: t('wallets', 'WALLETS') })] }), (0, jsx_runtime_1.jsx)("div", { className: "text-base sm:text-2xl font-bold font-mono text-white", children: walletCount })] }), (0, jsx_runtime_1.jsxs)("div", { className: "backdrop-blur-md bg-white/5 border border-white/10 rounded-xl p-2.5 sm:p-4 blockchain-card", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-[#5EEAD4] text-[10px] font-mono tracking-widest uppercase mb-2", children: t('rank', 'RANK') }), (0, jsx_runtime_1.jsx)("div", { className: `text-lg font-bold font-mono ${rankColor ?? ''}`, style: rankStyle, children: userRank || t('na', 'N/A') }), nextRank && ((0, jsx_runtime_1.jsxs)("div", { className: "mt-2", children: [(0, jsx_runtime_1.jsx)("div", { className: "w-full bg-neutral-800 rounded-full h-1.5", children: (0, jsx_runtime_1.jsx)("div", { className: accentColor ? 'h-1.5 rounded-full transition-all' : 'bg-cyan-400 h-1.5 rounded-full transition-all', style: { width: `${Math.min(progressPercent, 100)}%`, ...(accentColor ? { backgroundColor: accentColor } : {}) } }) }), (0, jsx_runtime_1.jsxs)("div", { className: "text-[10px] text-neutral-500 font-mono mt-1", children: [nextLevelRequirement ? `${nextLevelRequirement.have}/${nextLevelRequirement.need} ${nextLevelRequirement.tier}` : `${progressPercent.toFixed(0)}%`, " \u2192 ", nextRank] })] }))] })] }));
|
|
45
48
|
}
|
|
@@ -24,11 +24,9 @@ class SafeRender extends react_1.Component {
|
|
|
24
24
|
static getDerivedStateFromError() { return { hasError: true }; }
|
|
25
25
|
render() { return this.state.hasError ? null : this.props.children; }
|
|
26
26
|
}
|
|
27
|
-
/** Skeleton placeholder matching card dimensions */
|
|
28
27
|
function CardSkeleton({ height = 'h-48' }) {
|
|
29
28
|
return ((0, jsx_runtime_1.jsx)("div", { className: `backdrop-blur-md bg-white/5 border border-white/10 rounded-xl ${height} animate-pulse blockchain-card`, children: (0, jsx_runtime_1.jsxs)("div", { className: "p-6 space-y-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "h-3 bg-neutral-800 rounded w-24" }), (0, jsx_runtime_1.jsx)("div", { className: "h-6 bg-neutral-800 rounded w-40" }), (0, jsx_runtime_1.jsx)("div", { className: "h-4 bg-neutral-800 rounded w-32" })] }) }));
|
|
30
29
|
}
|
|
31
|
-
/** Renders children only when the container enters the viewport */
|
|
32
30
|
function LazySection({ children, fallback }) {
|
|
33
31
|
const [visible, setVisible] = (0, react_1.useState)(false);
|
|
34
32
|
const ref = (0, react_1.useRef)(null);
|
|
@@ -49,7 +47,6 @@ function LazySection({ children, fallback }) {
|
|
|
49
47
|
}, []);
|
|
50
48
|
return (0, jsx_runtime_1.jsx)("div", { ref: ref, children: visible ? children : fallback });
|
|
51
49
|
}
|
|
52
|
-
/** Convert hex color "#d4a846" to RGB string "212,168,70" */
|
|
53
50
|
function hexToRgb(hex) {
|
|
54
51
|
const h = hex.replace('#', '');
|
|
55
52
|
const n = parseInt(h.length === 3 ? h.split('').map(c => c + c).join('') : h, 16);
|
|
@@ -61,5 +58,5 @@ function MicrocosmDashboardOverview({ basePath = '', onNavigate, showHeader = tr
|
|
|
61
58
|
const rootStyle = accentColor
|
|
62
59
|
? { '--mc-accent': accentColor, '--mc-accent-rgb': hexToRgb(accentColor) }
|
|
63
60
|
: undefined;
|
|
64
|
-
return ((0, jsx_runtime_1.jsxs)("div", { className: "max-w-7xl mx-auto font-mono
|
|
61
|
+
return ((0, jsx_runtime_1.jsxs)("div", { className: "max-w-7xl mx-auto font-mono px-3 py-4 space-y-3 xs:px-4 xs:space-y-4 sm:px-6 sm:py-6 sm:space-y-6", style: rootStyle, children: [showHeader && ((0, jsx_runtime_1.jsx)("div", { className: "text-center", children: (0, jsx_runtime_1.jsx)("h1", { className: accentColor ? 'text-lg 2xs:text-xl xs:text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold tracking-tight' : 'text-lg 2xs:text-xl xs:text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold tracking-tight text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-cyan-200', style: accentColor ? { backgroundImage: `linear-gradient(to right, ${accentColor}, ${accentColor}cc)`, WebkitBackgroundClip: 'text', backgroundClip: 'text', color: 'transparent' } : undefined, children: resolvedHeader }) })), (0, jsx_runtime_1.jsx)(SafeRender, { children: (0, jsx_runtime_1.jsx)(market_overview_bar_1.MicrocosmMarketBar, { accentColor: accentColor }) }), (0, jsx_runtime_1.jsx)(SafeRender, { children: (0, jsx_runtime_1.jsx)(quick_actions_1.MicrocosmQuickActions, { basePath: basePath, onNavigate: onNavigate, accentColor: accentColor }) }), (0, jsx_runtime_1.jsx)(SafeRender, { children: (0, jsx_runtime_1.jsx)(assets_summary_1.MicrocosmAssetsSummary, { basePath: basePath, onNavigate: onNavigate, accentColor: accentColor }) }), (0, jsx_runtime_1.jsx)(SafeRender, { children: (0, jsx_runtime_1.jsx)(price_chart_1.MicrocosmPriceChart, { accentColor: accentColor }) }), (0, jsx_runtime_1.jsx)(LazySection, { fallback: (0, jsx_runtime_1.jsxs)("div", { className: "grid lg:grid-cols-2 gap-3 sm:gap-6", children: [(0, jsx_runtime_1.jsx)(CardSkeleton, { height: "h-56" }), (0, jsx_runtime_1.jsx)(CardSkeleton, { height: "h-56" })] }), children: (0, jsx_runtime_1.jsxs)("div", { className: "grid lg:grid-cols-2 gap-3 sm:gap-6", children: [(0, jsx_runtime_1.jsx)(SafeRender, { children: (0, jsx_runtime_1.jsx)(my_mining_1.MicrocosmMyMining, { detailsPath: `${basePath}/mcc/mining`, onNavigate: onNavigate, accentColor: accentColor }) }), (0, jsx_runtime_1.jsx)(SafeRender, { children: (0, jsx_runtime_1.jsx)(mining_weight_1.MicrocosmMiningWeight, { accentColor: accentColor }) })] }) }), (0, jsx_runtime_1.jsx)(LazySection, { fallback: (0, jsx_runtime_1.jsxs)("div", { className: "grid lg:grid-cols-2 gap-3 sm:gap-6", children: [(0, jsx_runtime_1.jsx)(CardSkeleton, { height: "h-56" }), (0, jsx_runtime_1.jsx)(CardSkeleton, { height: "h-56" })] }), children: (0, jsx_runtime_1.jsxs)("div", { className: "grid lg:grid-cols-2 gap-3 sm:gap-6", children: [(0, jsx_runtime_1.jsx)(SafeRender, { children: (0, jsx_runtime_1.jsx)(minting_stats_1.MicrocosmMintingStats, { accentColor: accentColor }) }), (0, jsx_runtime_1.jsx)(SafeRender, { children: (0, jsx_runtime_1.jsx)(ecosystem_stats_1.MicrocosmEcosystemStats, { accentColor: accentColor }) })] }) }), (0, jsx_runtime_1.jsx)(LazySection, { fallback: (0, jsx_runtime_1.jsxs)("div", { className: "grid lg:grid-cols-2 gap-3 sm:gap-6", children: [(0, jsx_runtime_1.jsx)(CardSkeleton, {}), (0, jsx_runtime_1.jsx)(CardSkeleton, {})] }), children: (0, jsx_runtime_1.jsxs)("div", { className: "grid lg:grid-cols-2 gap-3 sm:gap-6", children: [(0, jsx_runtime_1.jsx)(SafeRender, { children: (0, jsx_runtime_1.jsx)(mcc_token_stats_1.MicrocosmMCCTokenStats, { accentColor: accentColor }) }), (0, jsx_runtime_1.jsx)(SafeRender, { children: (0, jsx_runtime_1.jsx)(mcd_stats_1.MicrocosmMCDStats, { accentColor: accentColor }) })] }) }), (0, jsx_runtime_1.jsx)(LazySection, { fallback: (0, jsx_runtime_1.jsx)(CardSkeleton, {}), children: (0, jsx_runtime_1.jsx)(SafeRender, { children: (0, jsx_runtime_1.jsx)(lock_periods_1.MicrocosmLockPeriods, { accentColor: accentColor }) }) }), (0, jsx_runtime_1.jsxs)("div", { className: "text-center py-4 space-y-1", children: [(0, jsx_runtime_1.jsx)("div", { className: accentColor ? 'text-xs font-mono' : 'text-xs text-cyan-400/60 font-mono', style: accentColor ? { color: `rgba(${hexToRgb(accentColor)},0.6)` } : undefined, children: "Data refreshes every 4 hours \u00B7 For real-time data, please check on-chain directly" }), (0, jsx_runtime_1.jsx)("div", { className: accentColor ? 'text-xs font-mono' : 'text-xs text-cyan-400/60 font-mono', style: accentColor ? { color: `rgba(${hexToRgb(accentColor)},0.6)` } : undefined, children: "\u6570\u636E\u6BCF 4 \u5C0F\u65F6\u66F4\u65B0 \u00B7 \u5373\u65F6\u6570\u636E\u8BF7\u76F4\u63A5\u67E5\u8BE2\u94FE\u4E0A" }), (0, jsx_runtime_1.jsx)("div", { className: accentColor ? 'text-xs font-mono' : 'text-xs text-cyan-400/60 font-mono', style: accentColor ? { color: `rgba(${hexToRgb(accentColor)},0.6)` } : undefined, children: "\u30C7\u30FC\u30BF\u306F4\u6642\u9593\u3054\u3068\u306B\u66F4\u65B0 \u00B7 \u30EA\u30A2\u30EB\u30BF\u30A4\u30E0\u30C7\u30FC\u30BF\u306F\u30AA\u30F3\u30C1\u30A7\u30FC\u30F3\u3067\u78BA\u8A8D" }), (0, jsx_runtime_1.jsx)("div", { className: accentColor ? 'text-xs font-mono' : 'text-xs text-cyan-400/60 font-mono', style: accentColor ? { color: `rgba(${hexToRgb(accentColor)},0.6)` } : undefined, children: "\uB370\uC774\uD130\uB294 4\uC2DC\uAC04\uB9C8\uB2E4 \uAC31\uC2E0 \u00B7 \uC2E4\uC2DC\uAC04 \uB370\uC774\uD130\uB294 \uC628\uCCB4\uC778\uC5D0\uC11C \uD655\uC778" })] })] }));
|
|
65
62
|
}
|
|
@@ -5,7 +5,6 @@ exports.MicrocosmEcosystemStats = MicrocosmEcosystemStats;
|
|
|
5
5
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
6
6
|
const auth_react_1 = require("@microcosmmoney/auth-react");
|
|
7
7
|
const i18n_context_1 = require("../../i18n-context");
|
|
8
|
-
/* Inline SVG icons (16x16, stroke-based) */
|
|
9
8
|
const IconUsersTotal = ({ stroke = '#22d3ee' }) => ((0, jsx_runtime_1.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: stroke, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [(0, jsx_runtime_1.jsx)("path", { d: "M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" }), (0, jsx_runtime_1.jsx)("circle", { cx: "9", cy: "7", r: "4" }), (0, jsx_runtime_1.jsx)("path", { d: "M22 21v-2a4 4 0 0 0-3-3.87" }), (0, jsx_runtime_1.jsx)("path", { d: "M16 3.13a4 4 0 0 1 0 7.75" })] }));
|
|
10
9
|
const IconActivity = ({ stroke = '#22d3ee' }) => ((0, jsx_runtime_1.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: stroke, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: (0, jsx_runtime_1.jsx)("path", { d: "M22 12h-4l-3 9L9 3l-3 9H2" }) }));
|
|
11
10
|
const IconHardHat = ({ stroke = '#22d3ee' }) => ((0, jsx_runtime_1.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: stroke, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [(0, jsx_runtime_1.jsx)("path", { d: "M2 18a1 1 0 0 0 1 1h18a1 1 0 0 0 1-1v-2a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v2z" }), (0, jsx_runtime_1.jsx)("path", { d: "M10 15V6.5a3.5 3.5 0 0 1 7 0V15" }), (0, jsx_runtime_1.jsx)("path", { d: "M4 15v-5a8 8 0 0 1 16 0v5" })] }));
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
export interface MicrocosmLockPeriodsProps {
|
|
2
2
|
accentColor?: string;
|
|
3
3
|
}
|
|
4
|
-
export declare function MicrocosmLockPeriods(
|
|
4
|
+
export declare function MicrocosmLockPeriods(_props?: MicrocosmLockPeriodsProps): import("react/jsx-runtime").JSX.Element | null;
|
|
@@ -18,13 +18,13 @@ function daysRemaining(endTime) {
|
|
|
18
18
|
const days = Math.ceil(diff / (1000 * 60 * 60 * 24));
|
|
19
19
|
return `${days}d`;
|
|
20
20
|
}
|
|
21
|
-
function MicrocosmLockPeriods(
|
|
21
|
+
function MicrocosmLockPeriods(_props = {}) {
|
|
22
22
|
const t = (0, i18n_context_1.useTranslations)('mccDashboard');
|
|
23
23
|
const { data } = (0, auth_react_1.useMCCLocks)();
|
|
24
24
|
const raw = data;
|
|
25
|
-
const
|
|
26
|
-
const activeLocks =
|
|
25
|
+
const lockPeriods = Array.isArray(raw) ? raw : raw?.locks ?? [];
|
|
26
|
+
const activeLocks = lockPeriods.filter((p) => p.status === 'locked');
|
|
27
27
|
if (activeLocks.length === 0)
|
|
28
28
|
return null;
|
|
29
|
-
return ((0, jsx_runtime_1.jsx)("div", { className: "backdrop-blur-md bg-white/5 border border-white/10 rounded-xl blockchain-card", children: (0, jsx_runtime_1.jsx)("div", { className: "p-6", children: (0, jsx_runtime_1.jsx)("div", { className: "space-y-3", children: activeLocks.map((lock) => ((0, jsx_runtime_1.jsxs)("div", { className: "bg-white/5 border border-white/10 rounded-lg p-4 blockchain-sub-card", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex justify-between items-start mb-2", children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { className: "text-[#5EEAD4] text-xs font-mono tracking-widest uppercase", children: lock.reason }), (0, jsx_runtime_1.jsxs)("div", { className:
|
|
29
|
+
return ((0, jsx_runtime_1.jsx)("div", { className: "backdrop-blur-md bg-white/5 border border-white/10 rounded-xl blockchain-card", children: (0, jsx_runtime_1.jsx)("div", { className: "p-3 sm:p-6", children: (0, jsx_runtime_1.jsx)("div", { className: "space-y-2 sm:space-y-3", children: activeLocks.map((lock) => ((0, jsx_runtime_1.jsxs)("div", { className: "bg-white/5 border border-white/10 rounded-lg p-2.5 sm:p-4 blockchain-sub-card", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex justify-between items-start mb-2", children: [(0, jsx_runtime_1.jsxs)("div", { className: "min-w-0 flex-1", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-[#5EEAD4] text-[10px] sm:text-xs font-mono tracking-widest uppercase truncate", children: lock.reason }), (0, jsx_runtime_1.jsxs)("div", { className: "text-base sm:text-xl font-bold font-mono text-cyan-400 mt-1", children: [(lock.amount ?? 0).toLocaleString(), " MCC"] })] }), (0, jsx_runtime_1.jsx)("span", { className: "px-2 py-0.5 bg-cyan-400/20 text-cyan-400 text-xs font-mono rounded", children: t('lockedStatus', 'LOCKED') })] }), (0, jsx_runtime_1.jsxs)("div", { className: "text-xs text-neutral-500 space-y-1 font-mono", children: [(0, jsx_runtime_1.jsxs)("div", { children: [t('unlockAt', 'unlock_at'), ": ", formatDateTime(lock.lock_end)] }), (0, jsx_runtime_1.jsxs)("div", { children: [t('remaining', 'remaining'), ":", ' ', (0, jsx_runtime_1.jsx)("span", { className: "text-cyan-400", children: daysRemaining(lock.lock_end) })] })] })] }, lock.lock_id))) }) }) }));
|
|
30
30
|
}
|
|
@@ -4,41 +4,125 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
4
4
|
exports.MicrocosmMarketBar = MicrocosmMarketBar;
|
|
5
5
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
6
6
|
const auth_react_1 = require("@microcosmmoney/auth-react");
|
|
7
|
-
const i18n_context_1 = require("../../i18n-context");
|
|
8
|
-
function formatCompact(value) {
|
|
9
|
-
if (value >= 1000000)
|
|
10
|
-
return `${(value / 1000000).toFixed(2)}M`;
|
|
11
|
-
if (value >= 1000)
|
|
12
|
-
return `${(value / 1000).toFixed(1)}K`;
|
|
13
|
-
return value.toFixed(2);
|
|
14
|
-
}
|
|
15
7
|
function MicrocosmMarketBar({ accentColor } = {}) {
|
|
16
|
-
const t = (0, i18n_context_1.useTranslations)('mccDashboard');
|
|
17
8
|
const { data, loading } = (0, auth_react_1.useMarketData)();
|
|
18
|
-
const
|
|
9
|
+
const { data: mccPriceData } = (0, auth_react_1.useMCCPrice)();
|
|
10
|
+
const { data: ecosystemOps } = (0, auth_react_1.useEcosystemOperations)();
|
|
19
11
|
if (loading || !data) {
|
|
20
|
-
return ((0, jsx_runtime_1.jsx)("div", { className: "grid grid-cols-2
|
|
12
|
+
return ((0, jsx_runtime_1.jsxs)("div", { className: "space-y-3 mb-6", children: [(0, jsx_runtime_1.jsx)("div", { className: "grid grid-cols-2 xs:grid-cols-3 lg:grid-cols-6 gap-2 sm:gap-3", children: Array.from({ length: 6 }).map((_, i) => ((0, jsx_runtime_1.jsxs)("div", { className: "backdrop-blur-md bg-white/5 border border-white/10 rounded-xl blockchain-card p-2.5 sm:p-4 animate-pulse", children: [(0, jsx_runtime_1.jsx)("div", { className: "h-3 bg-neutral-800 rounded w-16 mb-2" }), (0, jsx_runtime_1.jsx)("div", { className: "h-5 sm:h-6 bg-neutral-800 rounded w-20 sm:w-24" })] }, i))) }), (0, jsx_runtime_1.jsx)("div", { className: "grid grid-cols-2 xs:grid-cols-3 lg:grid-cols-6 gap-2 sm:gap-3", children: Array.from({ length: 6 }).map((_, i) => ((0, jsx_runtime_1.jsxs)("div", { className: "backdrop-blur-md bg-white/5 border border-white/10 rounded-xl blockchain-card p-2.5 sm:p-4 animate-pulse", children: [(0, jsx_runtime_1.jsx)("div", { className: "h-3 bg-neutral-800 rounded w-16 mb-2" }), (0, jsx_runtime_1.jsx)("div", { className: "h-5 sm:h-6 bg-neutral-800 rounded w-20 sm:w-24" })] }, i))) })] }));
|
|
21
13
|
}
|
|
14
|
+
const displayPrice = mccPriceData?.price ?? data.price_usd ?? 0;
|
|
22
15
|
const priceChange24h = data.price_change_24h ?? 0;
|
|
23
16
|
const isPositive = priceChange24h >= 0;
|
|
17
|
+
const basePrice = mccPriceData?.base_price ?? mccPriceData?.price_usd ?? 0;
|
|
18
|
+
const miningPrice = basePrice > 0 ? basePrice * 4 : 0;
|
|
19
|
+
const epoch = ecosystemOps?.epoch;
|
|
20
|
+
const buyback = ecosystemOps?.buyback;
|
|
21
|
+
const epochYield = epoch?.epoch_yield ?? 0;
|
|
22
|
+
const epochMinted = epoch?.epoch_minted ?? 0;
|
|
23
|
+
const epochRemaining = epochYield > epochMinted ? epochYield - epochMinted : 0;
|
|
24
|
+
const miningVault = epoch?.mining_vault_mcc ?? 0;
|
|
25
|
+
const buybackPoolUsd = buyback?.pool_usd_balance ?? null;
|
|
24
26
|
const buys = data.buys_24h ?? 0;
|
|
25
27
|
const sells = data.sells_24h ?? 0;
|
|
26
|
-
const
|
|
27
|
-
const stats = [
|
|
28
|
+
const marketStats = [
|
|
28
29
|
{
|
|
29
|
-
label:
|
|
30
|
-
value: `$${
|
|
30
|
+
label: 'MCC_PRICE',
|
|
31
|
+
value: `$${displayPrice.toFixed(4)}`,
|
|
31
32
|
sub: `${isPositive ? '~+' : '~'}${priceChange24h.toFixed(2)}%`,
|
|
32
|
-
subColor: isPositive ?
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
33
|
+
subColor: isPositive ? 'text-cyan-400' : 'text-red-400',
|
|
34
|
+
color: 'text-cyan-400',
|
|
35
|
+
},
|
|
36
|
+
{
|
|
37
|
+
label: 'MINING_PRICE',
|
|
38
|
+
value: miningPrice > 0 ? `$${miningPrice.toFixed(4)}` : '--',
|
|
39
|
+
sub: basePrice > 0 ? `base: $${basePrice.toFixed(4)}` : '',
|
|
40
|
+
subColor: 'text-neutral-500',
|
|
41
|
+
color: 'text-cyan-300',
|
|
42
|
+
},
|
|
43
|
+
{
|
|
44
|
+
label: '24H_VOLUME',
|
|
45
|
+
value: `$${formatCompact(data.volume_24h ?? 0)}`,
|
|
46
|
+
color: 'text-white',
|
|
47
|
+
},
|
|
48
|
+
{
|
|
49
|
+
label: 'LIQUIDITY',
|
|
50
|
+
value: (data.liquidity_usd ?? 0) > 0 ? `$${formatCompact(data.liquidity_usd)}` : '-',
|
|
51
|
+
color: 'text-white',
|
|
52
|
+
},
|
|
53
|
+
{
|
|
54
|
+
label: 'FDV',
|
|
55
|
+
value: (data.fdv ?? 0) > 0 ? `$${formatCompact(data.fdv)}` : '-',
|
|
56
|
+
color: 'text-white',
|
|
57
|
+
},
|
|
58
|
+
{
|
|
59
|
+
label: 'BUY/SELL',
|
|
60
|
+
value: `${buys}/${sells}`,
|
|
61
|
+
sub: `${buys + sells} trades`,
|
|
62
|
+
subColor: 'text-neutral-500',
|
|
63
|
+
color: 'text-white',
|
|
64
|
+
},
|
|
65
|
+
];
|
|
66
|
+
const protocolStats = [
|
|
67
|
+
{
|
|
68
|
+
label: 'EPOCH',
|
|
69
|
+
value: epoch ? `#${epoch.current_epoch}` : '--',
|
|
70
|
+
sub: '2140 Protocol',
|
|
71
|
+
subColor: 'text-neutral-500',
|
|
72
|
+
color: 'text-cyan-400',
|
|
73
|
+
},
|
|
74
|
+
{
|
|
75
|
+
label: 'EPOCH_YIELD',
|
|
76
|
+
value: epochYield > 0 ? formatMCC(epochYield) : '--',
|
|
77
|
+
sub: 'MCC / epoch',
|
|
78
|
+
subColor: 'text-neutral-500',
|
|
79
|
+
color: 'text-white',
|
|
80
|
+
},
|
|
81
|
+
{
|
|
82
|
+
label: 'EPOCH_MINTED',
|
|
83
|
+
value: epochMinted > 0 ? formatMCC(epochMinted) : '0',
|
|
84
|
+
sub: epochYield > 0 ? `${((epochMinted / epochYield) * 100).toFixed(1)}% used` : '',
|
|
85
|
+
subColor: 'text-neutral-500',
|
|
86
|
+
color: 'text-cyan-300',
|
|
87
|
+
},
|
|
88
|
+
{
|
|
89
|
+
label: 'REMAINING',
|
|
90
|
+
value: formatMCC(epochRemaining),
|
|
91
|
+
sub: 'this epoch',
|
|
92
|
+
subColor: 'text-neutral-500',
|
|
93
|
+
color: 'text-white',
|
|
94
|
+
},
|
|
95
|
+
{
|
|
96
|
+
label: 'MINING_VAULT',
|
|
97
|
+
value: miningVault > 0 ? formatCompact(miningVault) : '--',
|
|
98
|
+
sub: 'MCC reserve',
|
|
99
|
+
subColor: 'text-neutral-500',
|
|
100
|
+
color: 'text-white',
|
|
101
|
+
},
|
|
102
|
+
{
|
|
103
|
+
label: 'POOL_BALANCE',
|
|
104
|
+
value: buybackPoolUsd != null ? `$${formatCompact(buybackPoolUsd)}` : '--',
|
|
105
|
+
sub: 'USDC+USDT',
|
|
106
|
+
subColor: 'text-neutral-500',
|
|
107
|
+
color: 'text-white',
|
|
108
|
+
},
|
|
42
109
|
];
|
|
43
|
-
return ((0, jsx_runtime_1.
|
|
110
|
+
return ((0, jsx_runtime_1.jsxs)("div", { className: "space-y-2 sm:space-y-3 mb-4 sm:mb-6", children: [(0, jsx_runtime_1.jsx)("div", { className: "grid grid-cols-2 xs:grid-cols-3 lg:grid-cols-6 gap-2 sm:gap-3", children: marketStats.map((stat) => ((0, jsx_runtime_1.jsx)(StatCard, { ...stat }, stat.label))) }), (0, jsx_runtime_1.jsx)("div", { className: "grid grid-cols-2 xs:grid-cols-3 lg:grid-cols-6 gap-2 sm:gap-3", children: protocolStats.map((stat) => ((0, jsx_runtime_1.jsx)(StatCard, { ...stat }, stat.label))) })] }));
|
|
111
|
+
}
|
|
112
|
+
function StatCard({ label, value, sub, subColor, color }) {
|
|
113
|
+
return ((0, jsx_runtime_1.jsxs)("div", { className: "backdrop-blur-md bg-white/5 border border-white/10 rounded-xl blockchain-card p-2.5 sm:p-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-[#5EEAD4] text-[9px] sm:text-[10px] font-mono mb-0.5 sm:mb-1 tracking-widest uppercase", children: label }), (0, jsx_runtime_1.jsx)("div", { className: `text-sm xs:text-base sm:text-xl font-bold font-mono truncate ${color}`, children: value }), sub && ((0, jsx_runtime_1.jsx)("div", { className: `text-[10px] sm:text-xs font-mono mt-0.5 truncate ${subColor || 'text-neutral-500'}`, children: sub }))] }));
|
|
114
|
+
}
|
|
115
|
+
function formatCompact(value) {
|
|
116
|
+
if (value >= 1000000)
|
|
117
|
+
return `${(value / 1000000).toFixed(2)}M`;
|
|
118
|
+
if (value >= 1000)
|
|
119
|
+
return `${(value / 1000).toFixed(1)}K`;
|
|
120
|
+
return value.toFixed(2);
|
|
121
|
+
}
|
|
122
|
+
function formatMCC(value) {
|
|
123
|
+
if (value >= 1000000)
|
|
124
|
+
return `${(value / 1000000).toFixed(2)}M`;
|
|
125
|
+
if (value >= 1000)
|
|
126
|
+
return `${(value / 1000).toFixed(2)}K`;
|
|
127
|
+
return value.toFixed(2);
|
|
44
128
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
export interface MicrocosmMCCTokenStatsProps {
|
|
2
2
|
accentColor?: string;
|
|
3
3
|
}
|
|
4
|
-
export declare function MicrocosmMCCTokenStats(
|
|
4
|
+
export declare function MicrocosmMCCTokenStats(_props?: MicrocosmMCCTokenStatsProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -5,26 +5,40 @@ exports.MicrocosmMCCTokenStats = MicrocosmMCCTokenStats;
|
|
|
5
5
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
6
6
|
const auth_react_1 = require("@microcosmmoney/auth-react");
|
|
7
7
|
const i18n_context_1 = require("../../i18n-context");
|
|
8
|
-
|
|
9
|
-
const
|
|
10
|
-
const
|
|
11
|
-
const
|
|
12
|
-
const
|
|
13
|
-
const
|
|
14
|
-
function MicrocosmMCCTokenStats(
|
|
8
|
+
const IconUsers = () => ((0, jsx_runtime_1.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "#5EEAD4", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [(0, jsx_runtime_1.jsx)("path", { d: "M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" }), (0, jsx_runtime_1.jsx)("circle", { cx: "9", cy: "7", r: "4" }), (0, jsx_runtime_1.jsx)("path", { d: "M22 21v-2a4 4 0 0 0-3-3.87" }), (0, jsx_runtime_1.jsx)("path", { d: "M16 3.13a4 4 0 0 1 0 7.75" })] }));
|
|
9
|
+
const IconCoins = () => ((0, jsx_runtime_1.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "#5EEAD4", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [(0, jsx_runtime_1.jsx)("circle", { cx: "8", cy: "8", r: "6" }), (0, jsx_runtime_1.jsx)("path", { d: "M18.09 10.37A6 6 0 1 1 10.34 18" }), (0, jsx_runtime_1.jsx)("path", { d: "M7 6h1v4" })] }));
|
|
10
|
+
const IconPickaxe = () => ((0, jsx_runtime_1.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "#5EEAD4", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [(0, jsx_runtime_1.jsx)("path", { d: "M14.531 12.469 6.619 20.38a1 1 0 1 1-3-3l7.912-7.912" }), (0, jsx_runtime_1.jsx)("path", { d: "M15.686 4.314A12.5 12.5 0 0 0 5.461 2.958l-.834 2.22a5.25 5.25 0 0 0 4.626 7.065l.172-.003a5.25 5.25 0 0 0 5.022-3.89l.39-1.507a12.5 12.5 0 0 0 .849-2.53Z" })] }));
|
|
11
|
+
const IconTrendingUp = () => ((0, jsx_runtime_1.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "#5EEAD4", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [(0, jsx_runtime_1.jsx)("polyline", { points: "22 7 13.5 15.5 8.5 10.5 2 17" }), (0, jsx_runtime_1.jsx)("polyline", { points: "16 7 22 7 22 13" })] }));
|
|
12
|
+
const IconCoinHeader = () => ((0, jsx_runtime_1.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "#5EEAD4", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [(0, jsx_runtime_1.jsx)("circle", { cx: "8", cy: "8", r: "6" }), (0, jsx_runtime_1.jsx)("path", { d: "M18.09 10.37A6 6 0 1 1 10.34 18" }), (0, jsx_runtime_1.jsx)("path", { d: "M7 6h1v4" })] }));
|
|
13
|
+
const IconSpinner = () => ((0, jsx_runtime_1.jsx)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "#5EEAD4", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "animate-spin", children: (0, jsx_runtime_1.jsx)("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" }) }));
|
|
14
|
+
function MicrocosmMCCTokenStats(_props = {}) {
|
|
15
15
|
const t = (0, i18n_context_1.useTranslations)('mccDashboard');
|
|
16
16
|
const { data, loading } = (0, auth_react_1.useMCCStats)();
|
|
17
|
-
const ac = accentColor || '#22d3ee';
|
|
18
17
|
const stats = [
|
|
19
|
-
{
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
18
|
+
{
|
|
19
|
+
label: t('holders', 'holders'),
|
|
20
|
+
value: data?.holders_count,
|
|
21
|
+
format: (v) => v.toLocaleString(),
|
|
22
|
+
icon: (0, jsx_runtime_1.jsx)(IconUsers, {}),
|
|
23
|
+
},
|
|
24
|
+
{
|
|
25
|
+
label: t('circulating', 'circulating'),
|
|
26
|
+
value: data?.circulating_supply,
|
|
27
|
+
format: (v) => `${(v / 1e6).toFixed(2)}M`,
|
|
28
|
+
icon: (0, jsx_runtime_1.jsx)(IconCoins, {}),
|
|
29
|
+
},
|
|
30
|
+
{
|
|
31
|
+
label: t('totalMiningTx', 'total_mining_tx'),
|
|
32
|
+
value: data?.total_mining_count,
|
|
33
|
+
format: (v) => v.toLocaleString(),
|
|
34
|
+
icon: (0, jsx_runtime_1.jsx)(IconPickaxe, {}),
|
|
35
|
+
},
|
|
36
|
+
{
|
|
37
|
+
label: t('totalMiningUsdc', 'total_mining_usdc'),
|
|
38
|
+
value: data?.total_mining_usdc,
|
|
39
|
+
format: (v) => `$${(v / 1e6).toFixed(2)}`,
|
|
40
|
+
icon: (0, jsx_runtime_1.jsx)(IconTrendingUp, {}),
|
|
41
|
+
},
|
|
23
42
|
];
|
|
24
|
-
|
|
25
|
-
const spinnerClass = accentColor ? 'inline-block w-5 h-5 border-2 rounded-full animate-spin' : 'inline-block w-5 h-5 border-2 border-cyan-400 border-t-transparent rounded-full animate-spin';
|
|
26
|
-
return ((0, jsx_runtime_1.jsx)("div", { className: "backdrop-blur-md bg-white/5 border border-white/10 rounded-xl blockchain-card h-full", children: (0, jsx_runtime_1.jsxs)("div", { className: "p-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2 mb-4", children: [(0, jsx_runtime_1.jsx)(IconCoin, { stroke: ac }), (0, jsx_runtime_1.jsx)("span", { className: "text-[#5EEAD4] text-xs font-mono tracking-widest uppercase", children: t('mccStats', 'MCC_STATS') })] }), loading ? ((0, jsx_runtime_1.jsx)("div", { className: "flex items-center justify-center py-8", children: (0, jsx_runtime_1.jsx)("span", { className: spinnerClass, style: spinnerBorderColor }) })) : ((0, jsx_runtime_1.jsx)("div", { className: "grid grid-cols-2 gap-3", children: stats.map((s) => {
|
|
27
|
-
const Icon = s.icon;
|
|
28
|
-
return ((0, jsx_runtime_1.jsxs)("div", { className: "bg-white/5 border border-white/10 rounded-lg p-3 blockchain-sub-card", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1.5 mb-1", children: [(0, jsx_runtime_1.jsx)(Icon, { stroke: ac }), (0, jsx_runtime_1.jsx)("span", { className: "text-[10px] text-[#5EEAD4] font-mono tracking-widest uppercase", children: s.label })] }), (0, jsx_runtime_1.jsx)("div", { className: "text-lg font-bold font-mono text-white", children: s.value != null ? s.format(s.value) : '--' })] }, s.label));
|
|
29
|
-
}) }))] }) }));
|
|
43
|
+
return ((0, jsx_runtime_1.jsx)("div", { className: "backdrop-blur-md bg-white/5 border border-white/10 rounded-xl blockchain-card h-full", children: (0, jsx_runtime_1.jsxs)("div", { className: "p-3 sm:p-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2 mb-3 sm:mb-4", children: [(0, jsx_runtime_1.jsx)(IconCoinHeader, {}), (0, jsx_runtime_1.jsx)("span", { className: "text-[#5EEAD4] text-[10px] sm:text-xs font-mono tracking-widest uppercase", children: t('mccStats', 'MCC_STATS') })] }), loading ? ((0, jsx_runtime_1.jsx)("div", { className: "flex items-center justify-center py-8", children: (0, jsx_runtime_1.jsx)(IconSpinner, {}) })) : ((0, jsx_runtime_1.jsx)("div", { className: "grid grid-cols-2 gap-2 sm:gap-3", children: stats.map((s) => ((0, jsx_runtime_1.jsxs)("div", { className: "bg-white/5 border border-white/10 rounded-lg p-2 sm:p-3 blockchain-sub-card", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1.5 mb-1", children: [s.icon, (0, jsx_runtime_1.jsx)("span", { className: "text-[9px] sm:text-[10px] text-[#5EEAD4] font-mono tracking-widest uppercase", children: s.label })] }), (0, jsx_runtime_1.jsx)("div", { className: "text-sm sm:text-lg font-bold font-mono text-white truncate", children: s.value != null ? s.format(s.value) : '--' })] }, s.label))) }))] }) }));
|
|
30
44
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
export interface MicrocosmMCDStatsProps {
|
|
2
2
|
accentColor?: string;
|
|
3
3
|
}
|
|
4
|
-
export declare function MicrocosmMCDStats(
|
|
4
|
+
export declare function MicrocosmMCDStats(_props?: MicrocosmMCDStatsProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -5,26 +5,40 @@ exports.MicrocosmMCDStats = MicrocosmMCDStats;
|
|
|
5
5
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
6
6
|
const auth_react_1 = require("@microcosmmoney/auth-react");
|
|
7
7
|
const i18n_context_1 = require("../../i18n-context");
|
|
8
|
-
|
|
9
|
-
const
|
|
10
|
-
const
|
|
11
|
-
const
|
|
12
|
-
const
|
|
13
|
-
const
|
|
14
|
-
function MicrocosmMCDStats(
|
|
8
|
+
const IconUsers = () => ((0, jsx_runtime_1.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "#5EEAD4", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [(0, jsx_runtime_1.jsx)("path", { d: "M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2" }), (0, jsx_runtime_1.jsx)("circle", { cx: "9", cy: "7", r: "4" }), (0, jsx_runtime_1.jsx)("path", { d: "M22 21v-2a4 4 0 0 0-3-3.87" }), (0, jsx_runtime_1.jsx)("path", { d: "M16 3.13a4 4 0 0 1 0 7.75" })] }));
|
|
9
|
+
const IconBuilding = () => ((0, jsx_runtime_1.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "#5EEAD4", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [(0, jsx_runtime_1.jsx)("rect", { width: "16", height: "20", x: "4", y: "2", rx: "2" }), (0, jsx_runtime_1.jsx)("path", { d: "M9 22v-4h6v4" }), (0, jsx_runtime_1.jsx)("path", { d: "M8 6h.01M16 6h.01M12 6h.01M12 10h.01M12 14h.01M16 10h.01M16 14h.01M8 10h.01M8 14h.01" })] }));
|
|
10
|
+
const IconClock = () => ((0, jsx_runtime_1.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "#5EEAD4", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [(0, jsx_runtime_1.jsx)("circle", { cx: "12", cy: "12", r: "10" }), (0, jsx_runtime_1.jsx)("polyline", { points: "12 6 12 12 16 14" })] }));
|
|
11
|
+
const IconBanknote = () => ((0, jsx_runtime_1.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "#5EEAD4", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [(0, jsx_runtime_1.jsx)("rect", { width: "20", height: "12", x: "2", y: "6", rx: "2" }), (0, jsx_runtime_1.jsx)("circle", { cx: "12", cy: "12", r: "2" }), (0, jsx_runtime_1.jsx)("path", { d: "M6 12h.01M18 12h.01" })] }));
|
|
12
|
+
const IconBanknoteHeader = () => ((0, jsx_runtime_1.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "#5EEAD4", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [(0, jsx_runtime_1.jsx)("rect", { width: "20", height: "12", x: "2", y: "6", rx: "2" }), (0, jsx_runtime_1.jsx)("circle", { cx: "12", cy: "12", r: "2" }), (0, jsx_runtime_1.jsx)("path", { d: "M6 12h.01M18 12h.01" })] }));
|
|
13
|
+
const IconSpinner = () => ((0, jsx_runtime_1.jsx)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "#5EEAD4", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "animate-spin", children: (0, jsx_runtime_1.jsx)("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" }) }));
|
|
14
|
+
function MicrocosmMCDStats(_props = {}) {
|
|
15
15
|
const t = (0, i18n_context_1.useTranslations)('mccDashboard');
|
|
16
16
|
const { data, loading } = (0, auth_react_1.useMCDStats)();
|
|
17
|
-
const ac = accentColor || '#22d3ee';
|
|
18
17
|
const stats = [
|
|
19
|
-
{
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
18
|
+
{
|
|
19
|
+
label: t('holders', 'holders'),
|
|
20
|
+
value: data?.holders_count,
|
|
21
|
+
format: (v) => v.toLocaleString(),
|
|
22
|
+
icon: (0, jsx_runtime_1.jsx)(IconUsers, {}),
|
|
23
|
+
},
|
|
24
|
+
{
|
|
25
|
+
label: t('activeVaults', 'active_vaults'),
|
|
26
|
+
value: data?.active_vaults,
|
|
27
|
+
format: (v) => v.toLocaleString(),
|
|
28
|
+
icon: (0, jsx_runtime_1.jsx)(IconBuilding, {}),
|
|
29
|
+
},
|
|
30
|
+
{
|
|
31
|
+
label: t('dailyDistribution', 'daily_distribution'),
|
|
32
|
+
value: data?.daily_distribution,
|
|
33
|
+
format: (v) => v > 0 ? v.toLocaleString('en-US', { maximumFractionDigits: 2 }) : '0',
|
|
34
|
+
icon: (0, jsx_runtime_1.jsx)(IconClock, {}),
|
|
35
|
+
},
|
|
36
|
+
{
|
|
37
|
+
label: t('totalVaultBalance', 'total_vault_balance'),
|
|
38
|
+
value: data?.total_vault_balance,
|
|
39
|
+
format: (v) => v > 0 ? `${(v / 1e6).toFixed(2)}M` : '0',
|
|
40
|
+
icon: (0, jsx_runtime_1.jsx)(IconBanknote, {}),
|
|
41
|
+
},
|
|
23
42
|
];
|
|
24
|
-
|
|
25
|
-
const spinnerClass = accentColor ? 'inline-block w-5 h-5 border-2 rounded-full animate-spin' : 'inline-block w-5 h-5 border-2 border-cyan-400 border-t-transparent rounded-full animate-spin';
|
|
26
|
-
return ((0, jsx_runtime_1.jsx)("div", { className: "backdrop-blur-md bg-white/5 border border-white/10 rounded-xl blockchain-card h-full", children: (0, jsx_runtime_1.jsxs)("div", { className: "p-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2 mb-4", children: [(0, jsx_runtime_1.jsx)(IconBanknote, { stroke: "#5EEAD4" }), (0, jsx_runtime_1.jsx)("span", { className: "text-[#5EEAD4] text-xs font-mono tracking-widest uppercase", children: t('mcdStats', 'MCD_STATS') })] }), loading ? ((0, jsx_runtime_1.jsx)("div", { className: "flex items-center justify-center py-8", children: (0, jsx_runtime_1.jsx)("span", { className: spinnerClass, style: spinnerBorderColor }) })) : ((0, jsx_runtime_1.jsx)("div", { className: "grid grid-cols-2 gap-3", children: stats.map((s) => {
|
|
27
|
-
const Icon = s.icon;
|
|
28
|
-
return ((0, jsx_runtime_1.jsxs)("div", { className: "bg-white/5 border border-white/10 rounded-lg p-3 blockchain-sub-card", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1.5 mb-1", children: [(0, jsx_runtime_1.jsx)(Icon, { stroke: "#5EEAD4" }), (0, jsx_runtime_1.jsx)("span", { className: "text-[10px] text-[#5EEAD4] font-mono tracking-widest uppercase", children: s.label })] }), (0, jsx_runtime_1.jsx)("div", { className: "text-lg font-bold font-mono text-white", children: s.value != null ? s.format(s.value) : '--' })] }, s.label));
|
|
29
|
-
}) }))] }) }));
|
|
43
|
+
return ((0, jsx_runtime_1.jsx)("div", { className: "backdrop-blur-md bg-white/5 border border-white/10 rounded-xl blockchain-card h-full", children: (0, jsx_runtime_1.jsxs)("div", { className: "p-3 sm:p-6", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2 mb-3 sm:mb-4", children: [(0, jsx_runtime_1.jsx)(IconBanknoteHeader, {}), (0, jsx_runtime_1.jsx)("span", { className: "text-[#5EEAD4] text-[10px] sm:text-xs font-mono tracking-widest uppercase", children: t('mcdStats', 'MCD_STATS') })] }), loading ? ((0, jsx_runtime_1.jsx)("div", { className: "flex items-center justify-center py-8", children: (0, jsx_runtime_1.jsx)(IconSpinner, {}) })) : ((0, jsx_runtime_1.jsx)("div", { className: "grid grid-cols-2 gap-2 sm:gap-3", children: stats.map((s) => ((0, jsx_runtime_1.jsxs)("div", { className: "bg-white/5 border border-white/10 rounded-lg p-2 sm:p-3 blockchain-sub-card", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1.5 mb-1", children: [s.icon, (0, jsx_runtime_1.jsx)("span", { className: "text-[9px] sm:text-[10px] text-[#5EEAD4] font-mono tracking-widest uppercase", children: s.label })] }), (0, jsx_runtime_1.jsx)("div", { className: "text-sm sm:text-lg font-bold font-mono text-white truncate", children: s.value != null ? s.format(s.value) : '--' })] }, s.label))) }))] }) }));
|
|
30
44
|
}
|