@microcosmmoney/portal-react 3.11.0 → 3.12.0

package/dist/components/dashboard/assets-summary.d.ts

@@ -3,4 +3,4 @@ export interface MicrocosmAssetsSummaryProps {
     onNavigate?: (path: string) => void;
     accentColor?: string;
 }
-export declare function MicrocosmAssetsSummary({ basePath, onNavigate, accentColor }: MicrocosmAssetsSummaryProps): import("react/jsx-runtime").JSX.Element;
+export declare function MicrocosmAssetsSummary({ basePath, accentColor }: MicrocosmAssetsSummaryProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/dashboard/assets-summary.js

@@ -5,41 +5,44 @@ exports.MicrocosmAssetsSummary = MicrocosmAssetsSummary;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const auth_react_1 = require("@microcosmmoney/auth-react");
 const i18n_context_1 = require("../../i18n-context");
+const link_context_1 = require("../../link-context");
 const RANK_COLOR = {
     miner: 'text-cyan-300',
     commander: 'text-white', pioneer: 'text-cyan-400', warden: 'text-cyan-300', admiral: 'text-cyan-300',
 };
-function MicrocosmAssetsSummary({ basePath = '', onNavigate, accentColor }) {
+function MicrocosmAssetsSummary({ basePath = '', accentColor }) {
     const t = (0, i18n_context_1.useTranslations)('mccDashboard');
+    const Link = (0, link_context_1.useLinkComponent)();
     const { balance: mccData, loading: mccLoading } = (0, auth_react_1.useMCC)(120000);
-    const { balance: mcdData, loading: mcdLoading } = (0, auth_react_1.useMCD)(120000);
+    const { balance: mcdData } = (0, auth_react_1.useMCD)(120000);
     const { data: levelData } = (0, auth_react_1.useLevelProgress)();
     const { data: wallets } = (0, auth_react_1.useWallets)();
     const { data: locks } = (0, auth_react_1.useMCCLocks)();
     const { data: marketData } = (0, auth_react_1.useMarketData)();
     const resolvePath = (p) => basePath ? `${basePath.replace(/\/$/, '')}${p}` : p;
-    const mccBalance = mccData?.balance ?? 0;
-    const mccPrice = marketData?.price_usd ?? 0;
-    const mccUsdValue = mccPrice > 0 ? mccBalance * mccPrice : 0;
+    const mccDisplay = mccData?.balance ?? 0;
+    const mccPrice = marketData?.price ?? marketData?.price_usd ?? 0;
+    const mccUsdValue = mccPrice > 0 ? mccDisplay * mccPrice : 0;
     const mcdAmount = parseFloat(mcdData?.available_balance ?? '0');
-    const mcdReceived = parseFloat(mcdData?.total_balance ?? '0');
-    const mcdSpent = parseFloat(mcdData?.frozen_balance ?? '0');
+    const mcdTotalReceived = parseFloat(mcdData?.total_balance ?? '0');
+    const mcdTotalSpent = parseFloat(mcdData?.frozen_balance ?? '0');
     const walletCount = Array.isArray(wallets) ? wallets.length : 0;
     const activeLocks = Array.isArray(locks) ? locks.filter((l) => l.status === 'locked') : [];
     const lockedAmount = activeLocks.reduce((sum, l) => sum + (l.amount || 0), 0);
-    const rank = levelData?.level ?? null;
+    const userRank = levelData?.level ?? levelData?.current_level ?? null;
     const nextRank = levelData?.next_level ?? null;
-    const progress = levelData?.progress_percent ?? 0;
-    const fmt = (n, d = 2) => n.toLocaleString('en-US', { minimumFractionDigits: d, maximumFractionDigits: d });
-    const rankColor = accentColor
-        ? undefined
-        : RANK_COLOR[(rank ?? '').toLowerCase()] ?? 'text-neutral-500';
+    const progressPercent = levelData?.progress_percent ?? 0;
+    const nextLevelRequirement = levelData?.next_level_requirement ?? null;
+    const getRankColor = (rank) => {
+        if (!rank)
+            return 'text-neutral-500';
+        return RANK_COLOR[rank.toLowerCase()] || 'text-neutral-400';
+    };
+    const rankColor = accentColor ? undefined : getRankColor(userRank);
     const rankStyle = accentColor ? { color: accentColor } : undefined;
     const spinnerBorderColor = accentColor ? { borderColor: accentColor, borderTopColor: 'transparent' } : undefined;
     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';
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "grid grid-cols-2 lg:grid-cols-5 gap-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "backdrop-blur-md bg-white/5 border border-white/10 rounded-xl p-4 blockchain-card cursor-pointer h-full", onClick: () => onNavigate?.(resolvePath('/mcc/wallet')), role: "button", tabIndex: 0, onKeyDown: (e) => e.key === 'Enter' && onNavigate?.(resolvePath('/mcc/wallet')), children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1.5 mb-2", children: [(0, jsx_runtime_1.jsxs)("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: "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-2xl font-bold font-mono' : 'text-2xl font-bold font-mono text-cyan-400', style: accentColor ? { color: accentColor } : undefined, children: mccLoading
-                            ? (0, jsx_runtime_1.jsx)("span", { className: spinnerClass, style: spinnerBorderColor })
-                            : fmt(mccBalance, 3) }), mccUsdValue > 0 && ((0, jsx_runtime_1.jsxs)("div", { className: "text-xs text-neutral-500 font-mono mt-1", children: ["\u2248 $", fmt(mccUsdValue)] }))] }), (0, jsx_runtime_1.jsxs)("div", { className: "backdrop-blur-md bg-white/5 border border-white/10 rounded-xl p-4 blockchain-card cursor-pointer h-full", onClick: () => onNavigate?.(resolvePath('/mcc/mcd')), role: "button", tabIndex: 0, onKeyDown: (e) => e.key === 'Enter' && onNavigate?.(resolvePath('/mcc/mcd')), 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: "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-2xl font-bold font-mono text-white", children: mcdLoading
-                            ? (0, jsx_runtime_1.jsx)("span", { className: spinnerClass, style: spinnerBorderColor })
-                            : 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] })] }))] })] }));
+    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
+                                ? (0, jsx_runtime_1.jsx)("span", { className: spinnerClass, style: spinnerBorderColor })
+                                : 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] })] }))] })] }));
 }

package/dist/components/dashboard/dashboard-overview.js

@@ -61,5 +61,5 @@ function MicrocosmDashboardOverview({ basePath = '', onNavigate, showHeader = tr
     const rootStyle = accentColor
         ? { '--mc-accent': accentColor, '--mc-accent-rgb': hexToRgb(accentColor) }
         : undefined;
-    return ((0, jsx_runtime_1.jsxs)("div", { className: "max-w-7xl mx-auto font-mono p-6 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-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold tracking-tight' : '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-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-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-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-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-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-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" })] })] }));
+    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" })] })] }));
 }

package/dist/components/dashboard/lock-periods.d.ts

@@ -1,4 +1,4 @@
 export interface MicrocosmLockPeriodsProps {
     accentColor?: string;
 }
-export declare function MicrocosmLockPeriods({ accentColor }?: MicrocosmLockPeriodsProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function MicrocosmLockPeriods(_props?: MicrocosmLockPeriodsProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/components/dashboard/lock-periods.js

@@ -18,13 +18,13 @@ function daysRemaining(endTime) {
     const days = Math.ceil(diff / (1000 * 60 * 60 * 24));
     return `${days}d`;
 }
-function MicrocosmLockPeriods({ accentColor } = {}) {
+function MicrocosmLockPeriods(_props = {}) {
     const t = (0, i18n_context_1.useTranslations)('mccDashboard');
     const { data } = (0, auth_react_1.useMCCLocks)();
     const raw = data;
-    const locks = Array.isArray(raw) ? raw : raw?.locks ?? [];
-    const activeLocks = locks.filter((p) => p.status === 'locked');
+    const lockPeriods = Array.isArray(raw) ? raw : raw?.locks ?? [];
+    const activeLocks = lockPeriods.filter((p) => p.status === 'locked');
     if (activeLocks.length === 0)
         return null;
-    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: accentColor ? 'text-xl font-bold font-mono mt-1' : 'text-xl font-bold font-mono text-cyan-400 mt-1', style: accentColor ? { color: accentColor } : undefined, children: [(lock.amount ?? 0).toLocaleString(), " MCC"] })] }), (0, jsx_runtime_1.jsx)("span", { className: accentColor ? 'px-2 py-0.5 text-xs font-mono rounded' : 'px-2 py-0.5 bg-cyan-400/20 text-cyan-400 text-xs font-mono rounded', style: accentColor ? { backgroundColor: `${accentColor}33`, color: accentColor } : undefined, 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: accentColor ? '' : 'text-cyan-400', style: accentColor ? { color: accentColor } : undefined, children: daysRemaining(lock.lock_end) })] })] })] }, lock.lock_id))) }) }) }));
+    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))) }) }) }));
 }

package/dist/components/dashboard/market-overview-bar.js

@@ -4,41 +4,125 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.MicrocosmMarketBar = MicrocosmMarketBar;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const auth_react_1 = require("@microcosmmoney/auth-react");
-const i18n_context_1 = require("../../i18n-context");
-function formatCompact(value) {
-    if (value >= 1000000)
-        return `${(value / 1000000).toFixed(2)}M`;
-    if (value >= 1000)
-        return `${(value / 1000).toFixed(1)}K`;
-    return value.toFixed(2);
-}
 function MicrocosmMarketBar({ accentColor } = {}) {
-    const t = (0, i18n_context_1.useTranslations)('mccDashboard');
     const { data, loading } = (0, auth_react_1.useMarketData)();
-    const ac = accentColor || '#22d3ee';
+    const { data: mccPriceData } = (0, auth_react_1.useMCCPrice)();
+    const { data: ecosystemOps } = (0, auth_react_1.useEcosystemOperations)();
     if (loading || !data) {
-        return ((0, jsx_runtime_1.jsx)("div", { className: "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-3 mb-6", 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-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-6 bg-neutral-800 rounded w-24" })] }, i))) }));
+        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))) })] }));
     }
+    const displayPrice = mccPriceData?.price ?? data.price_usd ?? 0;
     const priceChange24h = data.price_change_24h ?? 0;
     const isPositive = priceChange24h >= 0;
+    const basePrice = mccPriceData?.base_price ?? mccPriceData?.price_usd ?? 0;
+    const miningPrice = basePrice > 0 ? basePrice * 4 : 0;
+    const epoch = ecosystemOps?.epoch;
+    const buyback = ecosystemOps?.buyback;
+    const epochYield = epoch?.epoch_yield ?? 0;
+    const epochMinted = epoch?.epoch_minted ?? 0;
+    const epochRemaining = epochYield > epochMinted ? epochYield - epochMinted : 0;
+    const miningVault = epoch?.mining_vault_mcc ?? 0;
+    const buybackPoolUsd = buyback?.pool_usd_balance ?? null;
     const buys = data.buys_24h ?? 0;
     const sells = data.sells_24h ?? 0;
-    const trades = buys + sells;
-    const stats = [
+    const marketStats = [
         {
-            label: t('mccPrice', 'MCC_PRICE'),
-            value: `$${(data.price_usd ?? 0).toFixed(4)}`,
+            label: 'MCC_PRICE',
+            value: `$${displayPrice.toFixed(4)}`,
             sub: `${isPositive ? '~+' : '~'}${priceChange24h.toFixed(2)}%`,
-            subColor: isPositive ? (accentColor ? '' : 'text-cyan-400') : 'text-red-400',
-            subStyle: isPositive && accentColor ? { color: accentColor } : undefined,
-            color: accentColor ? '' : 'text-cyan-400',
-            colorStyle: accentColor ? { color: accentColor } : undefined,
-        },
-        { label: t('volume24h', '24H_VOLUME'), value: `$${formatCompact(data.volume_24h ?? 0)}`, color: accentColor ? '' : 'text-cyan-300', colorStyle: accentColor ? { color: accentColor } : undefined },
-        { label: t('liquidity', 'LIQUIDITY'), value: (data.liquidity_usd ?? 0) > 0 ? `$${formatCompact(data.liquidity_usd)}` : '-', color: 'text-white' },
-        { label: t('fdv', 'FDV'), value: (data.fdv ?? 0) > 0 ? `$${formatCompact(data.fdv)}` : '-', color: 'text-white' },
-        { label: t('trades24h', '24H_TRADES'), value: `${trades}`, color: accentColor ? '' : 'text-cyan-400', colorStyle: accentColor ? { color: accentColor } : undefined },
-        { label: t('buySell', 'BUY/SELL'), value: `${buys}/${sells}`, color: 'text-white' },
+            subColor: isPositive ? 'text-cyan-400' : 'text-red-400',
+            color: 'text-cyan-400',
+        },
+        {
+            label: 'MINING_PRICE',
+            value: miningPrice > 0 ? `$${miningPrice.toFixed(4)}` : '--',
+            sub: basePrice > 0 ? `base: $${basePrice.toFixed(4)}` : '',
+            subColor: 'text-neutral-500',
+            color: 'text-cyan-300',
+        },
+        {
+            label: '24H_VOLUME',
+            value: `$${formatCompact(data.volume_24h ?? 0)}`,
+            color: 'text-white',
+        },
+        {
+            label: 'LIQUIDITY',
+            value: (data.liquidity_usd ?? 0) > 0 ? `$${formatCompact(data.liquidity_usd)}` : '-',
+            color: 'text-white',
+        },
+        {
+            label: 'FDV',
+            value: (data.fdv ?? 0) > 0 ? `$${formatCompact(data.fdv)}` : '-',
+            color: 'text-white',
+        },
+        {
+            label: 'BUY/SELL',
+            value: `${buys}/${sells}`,
+            sub: `${buys + sells} trades`,
+            subColor: 'text-neutral-500',
+            color: 'text-white',
+        },
+    ];
+    const protocolStats = [
+        {
+            label: 'EPOCH',
+            value: epoch ? `#${epoch.current_epoch}` : '--',
+            sub: '2140 Protocol',
+            subColor: 'text-neutral-500',
+            color: 'text-cyan-400',
+        },
+        {
+            label: 'EPOCH_YIELD',
+            value: epochYield > 0 ? formatMCC(epochYield) : '--',
+            sub: 'MCC / epoch',
+            subColor: 'text-neutral-500',
+            color: 'text-white',
+        },
+        {
+            label: 'EPOCH_MINTED',
+            value: epochMinted > 0 ? formatMCC(epochMinted) : '0',
+            sub: epochYield > 0 ? `${((epochMinted / epochYield) * 100).toFixed(1)}% used` : '',
+            subColor: 'text-neutral-500',
+            color: 'text-cyan-300',
+        },
+        {
+            label: 'REMAINING',
+            value: formatMCC(epochRemaining),
+            sub: 'this epoch',
+            subColor: 'text-neutral-500',
+            color: 'text-white',
+        },
+        {
+            label: 'MINING_VAULT',
+            value: miningVault > 0 ? formatCompact(miningVault) : '--',
+            sub: 'MCC reserve',
+            subColor: 'text-neutral-500',
+            color: 'text-white',
+        },
+        {
+            label: 'POOL_BALANCE',
+            value: buybackPoolUsd != null ? `$${formatCompact(buybackPoolUsd)}` : '--',
+            sub: 'USDC+USDT',
+            subColor: 'text-neutral-500',
+            color: 'text-white',
+        },
     ];
-    return ((0, jsx_runtime_1.jsx)("div", { className: "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-6 gap-3 mb-6", children: stats.map((stat) => ((0, jsx_runtime_1.jsxs)("div", { className: "backdrop-blur-md bg-white/5 border border-white/10 rounded-xl blockchain-card p-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-[#5EEAD4] text-[10px] font-mono mb-1 tracking-widest uppercase", children: stat.label }), (0, jsx_runtime_1.jsx)("div", { className: `text-xl font-bold font-mono ${stat.color}`, style: stat.colorStyle, children: stat.value }), stat.sub && ((0, jsx_runtime_1.jsx)("div", { className: `text-xs font-mono mt-0.5 ${stat.subColor || 'text-neutral-500'}`, style: stat.subStyle, children: stat.sub }))] }, stat.label))) }));
+    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))) })] }));
+}
+function StatCard({ label, value, sub, subColor, color }) {
+    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 }))] }));
+}
+function formatCompact(value) {
+    if (value >= 1000000)
+        return `${(value / 1000000).toFixed(2)}M`;
+    if (value >= 1000)
+        return `${(value / 1000).toFixed(1)}K`;
+    return value.toFixed(2);
+}
+function formatMCC(value) {
+    if (value >= 1000000)
+        return `${(value / 1000000).toFixed(2)}M`;
+    if (value >= 1000)
+        return `${(value / 1000).toFixed(2)}K`;
+    return value.toFixed(2);
 }

package/dist/components/dashboard/mcc-token-stats.d.ts

@@ -1,4 +1,4 @@
 export interface MicrocosmMCCTokenStatsProps {
     accentColor?: string;
 }
-export declare function MicrocosmMCCTokenStats({ accentColor }?: MicrocosmMCCTokenStatsProps): import("react/jsx-runtime").JSX.Element;
+export declare function MicrocosmMCCTokenStats(_props?: MicrocosmMCCTokenStatsProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/dashboard/mcc-token-stats.js

@@ -5,26 +5,40 @@ exports.MicrocosmMCCTokenStats = MicrocosmMCCTokenStats;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const auth_react_1 = require("@microcosmmoney/auth-react");
 const i18n_context_1 = require("../../i18n-context");
-/* Inline SVG icons (16x16, stroke-based) */
-const IconUsers = ({ 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" })] }));
-const IconCircle = ({ 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)("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" })] }));
-const IconPickaxe = ({ 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: "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" })] }));
-const IconDollarSign = ({ 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)("line", { x1: "12", x2: "12", y1: "2", y2: "22" }), (0, jsx_runtime_1.jsx)("path", { d: "M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6" })] }));
-const IconCoin = ({ 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)("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" })] }));
-function MicrocosmMCCTokenStats({ accentColor } = {}) {
+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" })] }));
+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" })] }));
+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" })] }));
+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" })] }));
+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" })] }));
+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" }) }));
+function MicrocosmMCCTokenStats(_props = {}) {
     const t = (0, i18n_context_1.useTranslations)('mccDashboard');
     const { data, loading } = (0, auth_react_1.useMCCStats)();
-    const ac = accentColor || '#22d3ee';
     const stats = [
-        { label: t('holders', 'holders'), value: data?.holders_count, format: (v) => v.toLocaleString(), icon: IconUsers },
-        { label: t('circulating', 'circulating'), value: data?.circulating_supply, format: (v) => `${(v / 1e6).toFixed(2)}M`, icon: IconCircle },
-        { label: t('totalMiningTx', 'total_mining_tx'), value: data?.total_mining_count, format: (v) => v.toLocaleString(), icon: IconPickaxe },
-        { label: t('totalMiningUsdc', 'total_mining_usdc'), value: data?.total_mining_usdc, format: (v) => `$${(v / 1e6).toFixed(2)}M`, icon: IconDollarSign },
+        {
+            label: t('holders', 'holders'),
+            value: data?.holders_count,
+            format: (v) => v.toLocaleString(),
+            icon: (0, jsx_runtime_1.jsx)(IconUsers, {}),
+        },
+        {
+            label: t('circulating', 'circulating'),
+            value: data?.circulating_supply,
+            format: (v) => `${(v / 1e6).toFixed(2)}M`,
+            icon: (0, jsx_runtime_1.jsx)(IconCoins, {}),
+        },
+        {
+            label: t('totalMiningTx', 'total_mining_tx'),
+            value: data?.total_mining_count,
+            format: (v) => v.toLocaleString(),
+            icon: (0, jsx_runtime_1.jsx)(IconPickaxe, {}),
+        },
+        {
+            label: t('totalMiningUsdc', 'total_mining_usdc'),
+            value: data?.total_mining_usdc,
+            format: (v) => `$${(v / 1e6).toFixed(2)}`,
+            icon: (0, jsx_runtime_1.jsx)(IconTrendingUp, {}),
+        },
     ];
-    const spinnerBorderColor = accentColor ? { borderColor: accentColor, borderTopColor: 'transparent' } : undefined;
-    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';
-    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) => {
-                        const Icon = s.icon;
-                        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));
-                    }) }))] }) }));
+    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))) }))] }) }));
 }

package/dist/components/dashboard/mcd-stats.d.ts

@@ -1,4 +1,4 @@
 export interface MicrocosmMCDStatsProps {
     accentColor?: string;
 }
-export declare function MicrocosmMCDStats({ accentColor }?: MicrocosmMCDStatsProps): import("react/jsx-runtime").JSX.Element;
+export declare function MicrocosmMCDStats(_props?: MicrocosmMCDStatsProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/dashboard/mcd-stats.js

@@ -5,26 +5,40 @@ exports.MicrocosmMCDStats = MicrocosmMCDStats;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const auth_react_1 = require("@microcosmmoney/auth-react");
 const i18n_context_1 = require("../../i18n-context");
-/* Inline SVG icons (16x16, stroke-based) */
-const IconUsers = ({ 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" })] }));
-const IconVault = ({ 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)("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2" }), (0, jsx_runtime_1.jsx)("circle", { cx: "12", cy: "12", r: "4" }), (0, jsx_runtime_1.jsx)("path", { d: "M12 8v1" }), (0, jsx_runtime_1.jsx)("path", { d: "M12 15v1" }), (0, jsx_runtime_1.jsx)("path", { d: "M8 12h1" }), (0, jsx_runtime_1.jsx)("path", { d: "M15 12h1" })] }));
-const IconArrowDown = ({ 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: "M12 5v14" }), (0, jsx_runtime_1.jsx)("path", { d: "m19 12-7 7-7-7" })] }));
-const IconWallet = ({ 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: "M21 12V7H5a2 2 0 0 1 0-4h14v4" }), (0, jsx_runtime_1.jsx)("path", { d: "M3 5v14a2 2 0 0 0 2 2h16v-5" }), (0, jsx_runtime_1.jsx)("path", { d: "M18 12a2 2 0 0 0 0 4h4v-4Z" })] }));
-const IconBanknote = ({ 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)("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" })] }));
-function MicrocosmMCDStats({ accentColor } = {}) {
+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" })] }));
+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" })] }));
+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" })] }));
+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" })] }));
+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" })] }));
+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" }) }));
+function MicrocosmMCDStats(_props = {}) {
     const t = (0, i18n_context_1.useTranslations)('mccDashboard');
     const { data, loading } = (0, auth_react_1.useMCDStats)();
-    const ac = accentColor || '#22d3ee';
     const stats = [
-        { label: t('holders', 'holders'), value: data?.holders_count ?? data?.holder_count, format: (v) => v.toLocaleString(), icon: IconUsers },
-        { label: t('activeVaults', 'active_vaults'), value: data?.total_vaults ?? data?.active_vaults, format: (v) => v.toLocaleString(), icon: IconVault },
-        { label: t('dailyDistribution', 'daily_distribution'), value: data?.daily_distribution, format: (v) => v > 0 ? v.toLocaleString('en-US', { maximumFractionDigits: 2 }) : '0', icon: IconArrowDown },
-        { label: t('totalVaultBalance', 'total_vault_balance'), value: data?.total_vault_balance, format: (v) => v > 0 ? `${(v / 1e6).toFixed(2)}M` : '0', icon: IconWallet },
+        {
+            label: t('holders', 'holders'),
+            value: data?.holders_count,
+            format: (v) => v.toLocaleString(),
+            icon: (0, jsx_runtime_1.jsx)(IconUsers, {}),
+        },
+        {
+            label: t('activeVaults', 'active_vaults'),
+            value: data?.active_vaults,
+            format: (v) => v.toLocaleString(),
+            icon: (0, jsx_runtime_1.jsx)(IconBuilding, {}),
+        },
+        {
+            label: t('dailyDistribution', 'daily_distribution'),
+            value: data?.daily_distribution,
+            format: (v) => v > 0 ? v.toLocaleString('en-US', { maximumFractionDigits: 2 }) : '0',
+            icon: (0, jsx_runtime_1.jsx)(IconClock, {}),
+        },
+        {
+            label: t('totalVaultBalance', 'total_vault_balance'),
+            value: data?.total_vault_balance,
+            format: (v) => v > 0 ? `${(v / 1e6).toFixed(2)}M` : '0',
+            icon: (0, jsx_runtime_1.jsx)(IconBanknote, {}),
+        },
     ];
-    const spinnerBorderColor = accentColor ? { borderColor: accentColor, borderTopColor: 'transparent' } : undefined;
-    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';
-    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) => {
-                        const Icon = s.icon;
-                        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));
-                    }) }))] }) }));
+    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))) }))] }) }));
 }

package/dist/components/dashboard/mining-weight.js

@@ -19,18 +19,17 @@ const RANK_COLORS = {
     Warden: 'text-cyan-300',
     Admiral: 'text-cyan-300',
 };
-/* Inline SVG icons (16x16, stroke-based) */
-const IconShield = ({ 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: "M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z" }) }));
-const IconTree = ({ 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: "M12 22v-7" }), (0, jsx_runtime_1.jsx)("path", { d: "M7 15h10" }), (0, jsx_runtime_1.jsx)("path", { d: "m12 2-5.5 9h11Z" }), (0, jsx_runtime_1.jsx)("path", { d: "m12 7-4 6h8Z" })] }));
-const IconCalendar = ({ 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: "M8 2v4" }), (0, jsx_runtime_1.jsx)("path", { d: "M16 2v4" }), (0, jsx_runtime_1.jsx)("rect", { width: "18", height: "18", x: "3", y: "4", rx: "2" }), (0, jsx_runtime_1.jsx)("path", { d: "M3 10h18" })] }));
-const IconPickaxe = ({ 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: "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" })] }));
+const IconPickaxe = ({ stroke = '#5EEAD4' }) => ((0, jsx_runtime_1.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: stroke, 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" })] }));
+const IconTree = ({ stroke = '#5EEAD4' }) => ((0, jsx_runtime_1.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: stroke, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [(0, jsx_runtime_1.jsx)("path", { d: "M12 22v-7" }), (0, jsx_runtime_1.jsx)("path", { d: "M7 15h10" }), (0, jsx_runtime_1.jsx)("path", { d: "m12 2-5.5 9h11Z" }), (0, jsx_runtime_1.jsx)("path", { d: "m12 7-4 6h8Z" })] }));
+const IconBuilding = ({ stroke = '#5EEAD4' }) => ((0, jsx_runtime_1.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: stroke, 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.01" }), (0, jsx_runtime_1.jsx)("path", { d: "M16 6h.01" }), (0, jsx_runtime_1.jsx)("path", { d: "M12 6h.01" }), (0, jsx_runtime_1.jsx)("path", { d: "M12 10h.01" }), (0, jsx_runtime_1.jsx)("path", { d: "M12 14h.01" }), (0, jsx_runtime_1.jsx)("path", { d: "M16 10h.01" }), (0, jsx_runtime_1.jsx)("path", { d: "M16 14h.01" }), (0, jsx_runtime_1.jsx)("path", { d: "M8 10h.01" }), (0, jsx_runtime_1.jsx)("path", { d: "M8 14h.01" })] }));
+const IconLoader = ({ stroke = '#5EEAD4' }) => ((0, jsx_runtime_1.jsx)("svg", { className: "animate-spin", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: stroke, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: (0, jsx_runtime_1.jsx)("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" }) }));
 function getCompanionYield(rank) {
     if (!rank)
         return [];
     return [
-        { label: '\u653f\u52a1\u5b98', share: '40%', type: 'MCC' },
-        { label: 'LP \u6d41\u52a8\u6027', share: '30%', type: 'MCC' },
-        { label: '\u9886\u5730\u91d1\u5e93', share: '30%', type: 'MCD' },
+        { label: '\u653f\u52a1\u5b98', share: '40%', type: 'MCC', icon: (0, jsx_runtime_1.jsx)(IconBuilding, { stroke: "#22d3ee" }) },
+        { label: 'LP', share: '30%', type: 'MCC', icon: (0, jsx_runtime_1.jsx)(IconTree, { stroke: "#67e8f9" }) },
+        { label: '\u9886\u5730\u91d1\u5e93', share: '30%', type: 'MCD', icon: (0, jsx_runtime_1.jsx)(IconBuilding, { stroke: "#67e8f9" }) },
     ];
 }
 function MicrocosmMiningWeight({ accentColor } = {}) {
@@ -39,14 +38,11 @@ function MicrocosmMiningWeight({ accentColor } = {}) {
     const { data: techBonus, loading: loadingTech } = (0, auth_react_1.useTechBonusDetail)();
     const { data: miningStats, loading: loadingMining } = (0, auth_react_1.useMiningStats)();
     const loading = loadingLevel || loadingTech || loadingMining;
-    const ac = accentColor || '#22d3ee';
-    const rank = data?.current_rank?.toLowerCase() ?? null;
+    const rank = data?.current_rank ?? null;
     const totalHoldings = data ? (data.holdings.station + data.holdings.matrix + data.holdings.sector + data.holdings.system) : 0;
     const miningDays = totalHoldings > 0 ? totalHoldings : (miningStats?.active_days_30d ?? 0);
     const companionYield = getCompanionYield(rank);
-    const bonusMultiplier = techBonus?.bonus_multiplier ?? 0;
-    const discountPct = bonusMultiplier > 0 ? `+${(bonusMultiplier * 100).toFixed(0)}%` : '0%';
-    const spinnerBorderColor = accentColor ? { borderColor: accentColor, borderTopColor: 'transparent' } : undefined;
-    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';
-    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)(IconPickaxe, { stroke: "#5EEAD4" }), (0, jsx_runtime_1.jsx)("span", { className: "text-[#5EEAD4] text-xs font-mono tracking-widest uppercase", children: t('miningWeight', 'MINING_WEIGHT') })] }), loading ? ((0, jsx_runtime_1.jsx)("div", { className: "flex items-center justify-center py-12", children: (0, jsx_runtime_1.jsx)("span", { className: spinnerClass, style: spinnerBorderColor }) })) : ((0, jsx_runtime_1.jsxs)("div", { className: "space-y-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "grid grid-cols-3 gap-3", children: [(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)(IconShield, { stroke: "#5EEAD4" }), (0, jsx_runtime_1.jsx)("span", { className: "text-[#5EEAD4] text-xs font-mono tracking-widest uppercase", children: t('level', 'level') })] }), (0, jsx_runtime_1.jsx)("div", { className: `text-sm font-bold font-mono ${accentColor ? '' : (RANK_COLORS[rank ?? ''] ?? 'text-neutral-500')}`, style: accentColor ? { color: accentColor } : undefined, children: rank ? RANK_LABELS[rank] ?? rank : t('na', 'N/A') })] }), (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)(IconTree, { stroke: "#5EEAD4" }), (0, jsx_runtime_1.jsx)("span", { className: "text-[#5EEAD4] text-xs font-mono tracking-widest uppercase", children: t('techBonus', 'tech_bonus') })] }), (0, jsx_runtime_1.jsx)("div", { className: "text-sm font-bold font-mono text-white", children: discountPct }), (0, jsx_runtime_1.jsx)("div", { className: "text-[10px] text-neutral-500 font-mono", children: t('outputBoost', 'output boost') })] }), (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)(IconCalendar, { stroke: "#5EEAD4" }), (0, jsx_runtime_1.jsx)("span", { className: "text-[#5EEAD4] text-xs font-mono tracking-widest uppercase", children: t('miningDays', 'mining_days') })] }), (0, jsx_runtime_1.jsx)("div", { className: "text-sm font-bold font-mono text-white", children: miningDays }), (0, jsx_runtime_1.jsx)("div", { className: "text-[10px] text-neutral-500 font-mono", children: t('cumulative', 'cumulative') })] })] }), (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.jsx)("div", { className: "text-[#5EEAD4] text-xs font-mono tracking-widest uppercase mb-3", children: t('companionYield', 'companion_yield') }), (0, jsx_runtime_1.jsx)("p", { className: "text-[10px] text-neutral-500 font-mono mb-3", children: t('companionYieldDesc', 'Each mining produces companion yield, auto-injected into territory ecosystem') }), (0, jsx_runtime_1.jsx)("div", { className: "space-y-2", children: companionYield.map((row) => ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between px-2 py-1.5 bg-neutral-900 rounded hover:bg-neutral-700 transition-colors", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-xs font-mono text-neutral-300", children: row.label }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-xs font-mono font-bold text-white", children: row.share }), (0, jsx_runtime_1.jsx)("span", { className: accentColor ? 'text-[10px] font-mono px-1.5 py-0.5 rounded' : 'text-[10px] font-mono px-1.5 py-0.5 rounded bg-cyan-400/20 text-cyan-400', style: accentColor ? { backgroundColor: `${accentColor}33`, color: accentColor } : undefined, children: row.type })] })] }, row.label))) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "text-[10px] text-neutral-500 font-mono space-y-1", children: [(0, jsx_runtime_1.jsxs)("div", { children: ['\u6316\u77ff\u4ef7\u683c', " = ", '\u57fa\u51c6\u4ef7\u683c', " x 4 (", '\u7528\u6237\u83b7\u5f97', " 100% MCC)"] }), (0, jsx_runtime_1.jsxs)("div", { children: ['\u4f34\u751f\u77ff\u4e0e\u7528\u6237\u6316\u77ff\u91cf', " 1:1 ", '\u540c\u6b65\u4ea7\u51fa'] })] })] }))] }) }));
+    const totalBonus = techBonus?.total_bonus ?? 0;
+    const techDiscount = totalBonus ? `${totalBonus > 0 ? '-' : ''}${Math.abs(totalBonus)}%` : '--';
+    return ((0, jsx_runtime_1.jsx)("div", { className: "backdrop-blur-md bg-white/5 border border-white/10 rounded-xl blockchain-card h-full hover:border-cyan-400/50 dash-card", children: (0, jsx_runtime_1.jsx)("div", { className: "p-3 sm:p-6", children: loading ? ((0, jsx_runtime_1.jsx)("div", { className: "flex items-center justify-center py-12", children: (0, jsx_runtime_1.jsx)(IconLoader, { stroke: "#22d3ee" }) })) : ((0, jsx_runtime_1.jsxs)("div", { className: "space-y-3 sm:space-y-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "grid grid-cols-3 gap-2 sm:gap-3", children: [(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 sm:gap-1.5 mb-1", children: [(0, jsx_runtime_1.jsx)(IconPickaxe, { stroke: "#5EEAD4" }), (0, jsx_runtime_1.jsx)("span", { className: "text-[#5EEAD4] text-[9px] sm:text-xs font-mono tracking-widest uppercase", children: t('level', 'level') })] }), (0, jsx_runtime_1.jsx)("div", { className: `text-xs sm:text-sm font-bold font-mono truncate ${rank ? (RANK_COLORS[rank] ?? 'text-neutral-500') : 'text-neutral-500'}`, children: rank ? (RANK_LABELS[rank] ?? rank) : 'N/A' })] }), (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 sm:gap-1.5 mb-1", children: [(0, jsx_runtime_1.jsx)(IconTree, { stroke: "#5EEAD4" }), (0, jsx_runtime_1.jsx)("span", { className: "text-[#5EEAD4] text-[9px] sm:text-xs font-mono tracking-widest uppercase", children: t('techBonus', 'tech_bonus') })] }), (0, jsx_runtime_1.jsx)("div", { className: "text-xs sm:text-sm font-bold font-mono text-white", children: techDiscount })] }), (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 sm:gap-1.5 mb-1", children: [(0, jsx_runtime_1.jsx)(IconPickaxe, { stroke: "#5EEAD4" }), (0, jsx_runtime_1.jsx)("span", { className: "text-[#5EEAD4] text-[9px] sm:text-xs font-mono tracking-widest uppercase", children: t('miningDays', 'mining_days') })] }), (0, jsx_runtime_1.jsx)("div", { className: "text-xs sm:text-sm font-bold font-mono text-white", children: miningDays })] })] }), (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.jsx)("div", { className: "text-[#5EEAD4] text-[10px] sm:text-xs font-mono tracking-widest uppercase mb-2 sm:mb-3", children: t('ecosystemDistribution', 'ecosystem_distribution (\u4f34\u751f\u77ff)') }), (0, jsx_runtime_1.jsx)("p", { className: "text-[10px] text-neutral-500 font-mono mb-2 sm:mb-3 hidden xs:block", children: t('companionYieldDesc', '\u6bcf\u6b21\u6316\u77ff\u540c\u6b65\u8fdb\u884c\u4f34\u751f\u77ff\uff0c\u81ea\u52a8\u6ce8\u5165\u9886\u5730\u751f\u6001') }), (0, jsx_runtime_1.jsx)("div", { className: "space-y-2", children: companionYield.map((row) => ((0, jsx_runtime_1.jsxs)("div", { className: "flex items-center justify-between px-2 py-1.5 bg-neutral-900 rounded hover:bg-neutral-700", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [row.icon, (0, jsx_runtime_1.jsx)("span", { className: "text-xs font-mono text-neutral-300", children: row.label })] }), (0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-xs font-mono font-bold text-white", children: row.share }), (0, jsx_runtime_1.jsx)("span", { className: "text-[10px] font-mono px-1.5 py-0.5 rounded bg-cyan-400/20 text-cyan-400", children: row.type })] })] }, row.label))) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "text-[10px] text-neutral-500 font-mono space-y-1", children: [(0, jsx_runtime_1.jsx)("div", { children: t('miningPriceFormula', '\u6316\u77ff\u4ef7\u683c = \u5e02\u573a\u4ef7 x \u6316\u77ff\u500d\u6570 (\u79d1\u6280\u52a0\u6210\u53ef\u63d0\u5347\u4ea7\u51fa)') }), (0, jsx_runtime_1.jsx)("div", { children: t('companionYieldSync', '\u4f34\u751f\u77ff\u4e0e\u7528\u6237\u6316\u77ff\u91cf\u540c\u6b65\u8fdb\u884c') })] })] })) }) }));
 }

package/dist/components/dashboard/minting-stats.js

@@ -5,24 +5,23 @@ exports.MicrocosmMintingStats = MicrocosmMintingStats;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const auth_react_1 = require("@microcosmmoney/auth-react");
 const i18n_context_1 = require("../../i18n-context");
+const IconZap = ({ stroke = '#5EEAD4' }) => ((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: "M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z" }) }));
+const IconLoader = ({ stroke = '#22d3ee' }) => ((0, jsx_runtime_1.jsx)("svg", { className: "animate-spin", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: stroke, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: (0, jsx_runtime_1.jsx)("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" }) }));
 function MicrocosmMintingStats({ accentColor } = {}) {
     const t = (0, i18n_context_1.useTranslations)('mccDashboard');
     const { data: mccStats, loading } = (0, auth_react_1.useMCCStats)();
     const { data: mccPriceData } = (0, auth_react_1.useMCCPrice)();
     const s = mccStats;
-    const totalMinted = s?.circulating_supply ?? 0;
+    const totalMinted = s?.circulating_supply ?? (s?.genesis_pool_balance ? 1000000000 - s.genesis_pool_balance : 0);
     const currentStage = s?.current_phase ?? 0;
-    const miningRate = s?.current_mining_rate ?? 0;
+    const difficultyRatio = 2 ** currentStage;
     const nextHalving = s?.next_halving_at ?? 100000000;
-    const basePrice = mccPriceData?.base_price ?? mccPriceData?.price_usd ?? mccPriceData?.price ?? 0;
-    const miningPrice = basePrice > 0 ? basePrice * 4 : 0;
-    const fmt = (n) => n.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
-    const spinnerBorderColor = accentColor ? { borderColor: accentColor, borderTopColor: 'transparent' } : undefined;
-    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';
-    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.jsx)("div", { className: "p-6", children: 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.jsxs)("div", { className: "space-y-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2 mb-2", children: [(0, jsx_runtime_1.jsx)("span", { className: accentColor ? '' : 'text-cyan-400', style: accentColor ? { color: accentColor } : undefined, children: "\u26A1" }), (0, jsx_runtime_1.jsx)("span", { className: "text-[#5EEAD4] text-xs font-mono tracking-widest uppercase", children: t('mintingStats', 'MINTING_STATS') })] }), (0, jsx_runtime_1.jsxs)("div", { className: "grid grid-cols-2 gap-4", children: [(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.jsx)("div", { className: "text-xs text-[#5EEAD4] font-mono tracking-widest uppercase mb-1", children: t('totalMinted', 'total_minted') }), (0, jsx_runtime_1.jsxs)("div", { className: "text-xl font-bold font-mono text-white", children: [totalMinted > 0 ? fmt(totalMinted) : '0', " MCC"] })] }), (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.jsx)("div", { className: "text-xs text-[#5EEAD4] font-mono tracking-widest uppercase mb-1", children: t('miningPrice', 'mining_price') }), (0, jsx_runtime_1.jsxs)("div", { className: accentColor ? 'text-xl font-bold font-mono' : 'text-xl font-bold font-mono text-cyan-400', style: accentColor ? { color: accentColor } : undefined, children: ["$", miningPrice > 0 ? miningPrice.toFixed(4) : '--'] }), (0, jsx_runtime_1.jsx)("div", { className: "text-[10px] text-neutral-500 font-mono", children: t('baseTimes4', 'base × 4') })] })] }), (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 justify-between items-center mb-2 text-sm font-mono", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-neutral-400", children: t('nextHalving', 'next_halving') }), (0, jsx_runtime_1.jsxs)("span", { className: "text-white", children: [nextHalving > totalMinted
+    const miningPrice = mccPriceData?.miningPrice ?? (mccPriceData?.base_price ? mccPriceData.base_price * 4 : 0);
+    return ((0, jsx_runtime_1.jsx)("div", { className: "backdrop-blur-md bg-white/5 border border-white/10 rounded-xl blockchain-card h-full hover:border-cyan-400/50 dash-card", children: (0, jsx_runtime_1.jsx)("div", { className: "p-3 sm:p-6", children: loading ? ((0, jsx_runtime_1.jsx)("div", { className: "flex items-center justify-center py-8", children: (0, jsx_runtime_1.jsx)(IconLoader, { stroke: "#22d3ee" }) })) : ((0, jsx_runtime_1.jsxs)("div", { className: "space-y-3 sm:space-y-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2 mb-1 sm:mb-2", children: [(0, jsx_runtime_1.jsx)(IconZap, { stroke: "#5EEAD4" }), (0, jsx_runtime_1.jsx)("span", { className: "text-[#5EEAD4] text-[10px] sm:text-xs font-mono tracking-widest uppercase", children: t('mintingStats', 'MINTING_STATS') })] }), (0, jsx_runtime_1.jsxs)("div", { className: "grid grid-cols-2 gap-2 sm:gap-4", children: [(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.jsx)("div", { className: "text-[10px] sm:text-xs text-[#5EEAD4] font-mono tracking-widest uppercase mb-1", children: t('totalMinted', 'total_minted') }), (0, jsx_runtime_1.jsxs)("div", { className: "text-sm sm:text-xl font-bold font-mono text-white truncate", children: [totalMinted > 0
+                                                ? totalMinted.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 })
+                                                : '0', " MCC"] })] }), (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.jsx)("div", { className: "text-[10px] sm:text-xs text-[#5EEAD4] font-mono tracking-widest uppercase mb-1", children: t('miningPrice', 'mining_price') }), (0, jsx_runtime_1.jsxs)("div", { className: "text-sm sm:text-xl font-bold font-mono text-cyan-400", children: ["$", miningPrice > 0 ? miningPrice.toFixed(4) : '--'] }), (0, jsx_runtime_1.jsx)("div", { className: "text-[10px] text-neutral-500 font-mono", children: t('oracleX4', 'oracle \u00d7 4') })] })] }), (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 justify-between items-center mb-2 text-xs sm:text-sm font-mono", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-neutral-400", children: t('nextHalving', 'next_halving') }), (0, jsx_runtime_1.jsxs)("span", { className: "text-white", children: [nextHalving > totalMinted
                                                 ? (nextHalving - totalMinted).toLocaleString('en-US', { maximumFractionDigits: 0 })
-                                                : t('na', 'N/A'), " MCC"] })] }), (0, jsx_runtime_1.jsx)("div", { className: "w-full bg-neutral-700 rounded-full h-2", children: (0, jsx_runtime_1.jsx)("div", { className: accentColor ? 'h-2 rounded-full transition-all' : 'bg-cyan-400 h-2 rounded-full transition-all', style: {
+                                                : 'N/A', " MCC"] })] }), (0, jsx_runtime_1.jsx)("div", { className: "w-full bg-neutral-700 rounded-full h-2", children: (0, jsx_runtime_1.jsx)("div", { className: "bg-cyan-400 h-2 rounded-full transition-all", style: {
                                         width: nextHalving > 0 ? `${Math.min((totalMinted % nextHalving) / nextHalving * 100, 100)}%` : '0%',
-                                        ...(accentColor ? { backgroundColor: accentColor } : {}),
-                                    } }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex justify-between items-center mt-2 text-xs text-neutral-500 font-mono", children: [(0, jsx_runtime_1.jsxs)("span", { children: [t('phase', 'phase'), ": ", currentStage, " | ", t('rate', 'rate'), ": ", miningRate > 0 ? `${miningRate}:1` : '--'] }), (0, jsx_runtime_1.jsxs)("span", { children: [t('threshold', 'threshold'), ": ", (nextHalving / 1e6).toFixed(0), "M"] })] })] })] })) }) }));
+                                    } }) }), (0, jsx_runtime_1.jsxs)("div", { className: "flex justify-between items-center mt-2 text-[10px] sm:text-xs text-neutral-500 font-mono", children: [(0, jsx_runtime_1.jsxs)("span", { children: [t('phase', 'phase'), ": ", currentStage, " | ", t('difficulty', 'difficulty'), ": ", difficultyRatio, ":1"] }), (0, jsx_runtime_1.jsxs)("span", { children: [t('threshold', 'threshold'), ": ", (nextHalving / 1e6).toFixed(0), "M"] })] })] })] })) }) }));
 }

package/dist/components/dashboard/my-mining.d.ts

@@ -1,6 +1,7 @@
 export interface MicrocosmMyMiningProps {
+    basePath?: string;
     detailsPath?: string;
     onNavigate?: (path: string) => void;
     accentColor?: string;
 }
-export declare function MicrocosmMyMining({ detailsPath, onNavigate, accentColor }: MicrocosmMyMiningProps): import("react/jsx-runtime").JSX.Element;
+export declare function MicrocosmMyMining({ basePath, detailsPath, accentColor }: MicrocosmMyMiningProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/dashboard/my-mining.js

@@ -5,9 +5,12 @@ exports.MicrocosmMyMining = MicrocosmMyMining;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const auth_react_1 = require("@microcosmmoney/auth-react");
 const i18n_context_1 = require("../../i18n-context");
-function MicrocosmMyMining({ detailsPath, onNavigate, accentColor }) {
+const link_context_1 = require("../../link-context");
+function MicrocosmMyMining({ basePath = '', detailsPath, accentColor }) {
     const t = (0, i18n_context_1.useTranslations)('mccDashboard');
-    const { data, loading } = (0, auth_react_1.useMiningStats)();
+    const Link = (0, link_context_1.useLinkComponent)();
+    const { data: stats, loading } = (0, auth_react_1.useMiningStats)();
+    const resolvedDetails = detailsPath ?? (basePath ? `${basePath.replace(/\/$/, '')}/mcc/mining` : '/mcc/mining');
     const fmt = (v) => v.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
     const formatDateTime = (iso) => {
         if (!iso)
@@ -15,19 +18,24 @@ function MicrocosmMyMining({ detailsPath, onNavigate, accentColor }) {
         const d = new Date(iso);
         return d.toLocaleString('zh-CN', { timeZone: 'Asia/Shanghai' });
     };
-    const items = data ? [
-        { label: t('totalMined', 'total_mined'), value: fmt(data.total_mined ?? 0) },
-        { label: t('totalPaid', 'total_paid'), value: fmt(data.total_paid ?? 0) },
-        { label: t('miningCount', 'mining_count'), value: `${data.mining_count ?? 0}` },
-        { label: t('last30d', 'last_30d'), value: fmt(data.last_30d_mined ?? 0) },
-        { label: t('activeDays', 'active_days'), value: `${data.active_days_30d ?? 0}` },
-        { label: t('lastMined', 'last_mined'), value: formatDateTime(data.last_mined_at) },
+    const iconCls = 'w-3.5 h-3.5 text-cyan-400';
+    const coinsIcon = ((0, jsx_runtime_1.jsxs)("svg", { className: iconCls, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: [(0, jsx_runtime_1.jsx)("circle", { cx: "12", cy: "12", r: "8", strokeWidth: 2 }), (0, jsx_runtime_1.jsx)("path", { strokeWidth: 2, strokeLinecap: "round", d: "M12 8v8M9 11h6M9 14h6" })] }));
+    const dollarIcon = ((0, jsx_runtime_1.jsx)("svg", { className: iconCls, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 8c-2 0-3 1-3 2s1 2 3 2 3 1 3 2-1 2-3 2m0-8V6m0 12v-2M4 12a8 8 0 1016 0 8 8 0 00-16 0z" }) }));
+    const hashIcon = ((0, jsx_runtime_1.jsx)("svg", { className: iconCls, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 9h16M4 15h16M10 3L8 21M16 3l-2 18" }) }));
+    const calendarIcon = ((0, jsx_runtime_1.jsx)("svg", { className: iconCls, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" }) }));
+    const timerIcon = ((0, jsx_runtime_1.jsxs)("svg", { className: iconCls, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: [(0, jsx_runtime_1.jsx)("circle", { cx: "12", cy: "13", r: "8", strokeWidth: 2 }), (0, jsx_runtime_1.jsx)("path", { strokeWidth: 2, strokeLinecap: "round", d: "M12 9v4l2 2M9 3h6" })] }));
+    const clockIcon = ((0, jsx_runtime_1.jsxs)("svg", { className: iconCls, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: [(0, jsx_runtime_1.jsx)("circle", { cx: "12", cy: "12", r: "9", strokeWidth: 2 }), (0, jsx_runtime_1.jsx)("path", { strokeWidth: 2, strokeLinecap: "round", d: "M12 7v5l3 2" })] }));
+    const pickaxeIcon = ((0, jsx_runtime_1.jsx)("svg", { className: "w-4 h-4 text-cyan-400", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M14 6l6 6-3 3-6-6 3-3zM10 10l-6 10 10-6" }) }));
+    const chevronRight = ((0, jsx_runtime_1.jsx)("svg", { className: "w-3 h-3 inline", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: (0, jsx_runtime_1.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5l7 7-7 7" }) }));
+    const items = stats ? [
+        { label: 'total_mined', value: fmt(stats.total_mined ?? 0), icon: coinsIcon },
+        { label: 'total_paid', value: fmt(stats.total_paid ?? 0), icon: dollarIcon },
+        { label: 'mining_count', value: `${stats.mining_count ?? 0}`, icon: hashIcon },
+        { label: 'last_30d', value: fmt(stats.last_30d_mined ?? 0), icon: calendarIcon },
+        { label: 'active_days', value: `${stats.active_days_30d ?? 0}`, icon: timerIcon },
+        { label: 'last_mined', value: formatDateTime(stats.last_mined_at), icon: clockIcon },
     ] : [];
-    const handleDetailsClick = () => {
-        if (onNavigate && detailsPath)
-            onNavigate(detailsPath);
-    };
     const spinnerBorderColor = accentColor ? { borderColor: accentColor, borderTopColor: 'transparent' } : undefined;
     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';
-    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 justify-between mb-4", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-[#5EEAD4] text-xs font-mono tracking-widest uppercase", children: t('myMining', 'MY_MINING') }), detailsPath && ((0, jsx_runtime_1.jsxs)("button", { onClick: handleDetailsClick, className: accentColor ? 'text-xs text-neutral-500 font-mono' : 'text-xs text-neutral-500 hover:text-cyan-400 font-mono', style: accentColor ? { '--hover-color': accentColor } : undefined, children: [t('details', 'details'), " >"] }))] }), 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 }) })) : !data || (data.mining_count ?? 0) === 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "text-center py-8 text-neutral-500 font-mono text-sm", children: t('noMiningRecords', 'no mining records') })) : ((0, jsx_runtime_1.jsx)("div", { className: "grid grid-cols-2 gap-3", children: items.map((s) => ((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.jsx)("span", { className: "text-[10px] text-[#5EEAD4] font-mono tracking-widest uppercase", children: s.label }), (0, jsx_runtime_1.jsx)("div", { className: "text-xl font-bold font-mono text-white", children: s.value })] }, s.label))) }))] }) }));
+    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 justify-between mb-3 sm:mb-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-2", children: [pickaxeIcon, (0, jsx_runtime_1.jsx)("span", { className: "text-[#5EEAD4] text-[10px] sm:text-xs font-mono tracking-widest uppercase", children: t('myMining', 'MY_MINING') })] }), (0, jsx_runtime_1.jsxs)(Link, { href: resolvedDetails, className: "flex items-center gap-1 text-xs text-neutral-500 hover:text-cyan-400 font-mono", children: [t('details', 'details'), " ", chevronRight] })] }), 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 }) })) : !stats || (stats.mining_count ?? 0) === 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "text-center py-8 text-neutral-500 font-mono text-sm", children: t('noMiningRecords', 'no mining records') })) : ((0, jsx_runtime_1.jsx)("div", { className: "grid grid-cols-2 gap-2 sm:gap-3", children: items.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-xl font-bold font-mono text-white truncate", children: s.value })] }, s.label))) }))] }) }));
 }

package/dist/components/dashboard/price-chart.js

@@ -7,41 +7,78 @@ const react_1 = require("react");
 const auth_react_1 = require("@microcosmmoney/auth-react");
 const i18n_context_1 = require("../../i18n-context");
 const recharts_1 = require("recharts");
-const timeRanges = [
+const TIME_RANGES = [
     { label: '1D', value: '1D' },
     { label: '7D', value: '7D' },
     { label: '30D', value: '30D' },
+    { label: '1Y', value: '1Y' },
 ];
+function computeChange(data) {
+    if (!data || data.length < 2)
+        return null;
+    const prices = data
+        .map((d) => d.market_price ?? d.close ?? d.price ?? 0)
+        .filter((p) => p > 0);
+    if (prices.length < 2)
+        return null;
+    const first = prices[0];
+    const last = prices[prices.length - 1];
+    if (first <= 0)
+        return null;
+    return ((last - first) / first) * 100;
+}
 function MicrocosmPriceChart({ accentColor } = {}) {
     const t = (0, i18n_context_1.useTranslations)('mccDashboard');
+    const api = (0, auth_react_1.useMicrocosmApi)();
     const [range, setRange] = (0, react_1.useState)('7D');
     const { data, loading } = (0, auth_react_1.usePriceHistory)(range);
     const gradientId = (0, react_1.useId)().replace(/:/g, '_') + '_mcPriceGradient';
     const ac = accentColor || '#22d3ee';
+    const [rangeChanges, setRangeChanges] = (0, react_1.useState)({});
+    (0, react_1.useEffect)(() => {
+        const ranges = ['1D', '7D', '30D', '1Y'];
+        ranges.forEach(async (r) => {
+            try {
+                const json = await api.get(`/stats/price-history?range=${r}`);
+                const payload = json?.data ?? json;
+                if (Array.isArray(payload)) {
+                    setRangeChanges(prev => ({ ...prev, [r]: computeChange(payload) }));
+                }
+                else if (payload?.records) {
+                    setRangeChanges(prev => ({ ...prev, [r]: computeChange(payload.records) }));
+                }
+            }
+            catch { }
+        });
+    }, [api]);
     const raw = data;
     const items = Array.isArray(raw) ? raw : raw?.records ?? [];
     const chartData = items.map((item) => ({
         time: typeof item.timestamp === 'number'
             ? (item.timestamp < 1e12 ? item.timestamp * 1000 : item.timestamp)
             : new Date(item.timestamp).getTime(),
-        price: item.price ?? item.close ?? 0,
-    }));
+        price: item.market_price ?? item.close ?? item.price ?? 0,
+    })).filter((d) => d.price > 0);
     const prices = chartData.map((d) => d.price);
     const minPrice = prices.length > 0 ? Math.min(...prices) * 0.995 : 0;
     const maxPrice = prices.length > 0 ? Math.max(...prices) * 1.005 : 1;
+    const currentPrice = prices.length > 0 ? prices[prices.length - 1] : null;
     const formatTime = (ts) => {
         const d = new Date(ts);
         if (range === '1D')
             return d.toLocaleTimeString('en-US', { hour: '2-digit', minute: '2-digit', hour12: false });
         return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
     };
-    return ((0, jsx_runtime_1.jsx)("div", { className: "backdrop-blur-md bg-white/5 border border-white/10 rounded-xl overflow-hidden blockchain-card", children: (0, jsx_runtime_1.jsxs)("div", { className: "p-6", children: [(0, jsx_runtime_1.jsx)("div", { className: "flex items-center justify-between mb-4", children: (0, jsx_runtime_1.jsx)("div", { className: "flex gap-1 bg-black p-0.5 rounded", children: timeRanges.map((tr) => ((0, jsx_runtime_1.jsx)("button", { onClick: () => setRange(tr.value), className: `px-2.5 py-1 text-[10px] font-mono font-bold rounded transition-colors ${range === tr.value
-                                ? (accentColor ? 'text-white' : 'bg-cyan-700 text-white')
-                                : 'text-neutral-500 hover:text-neutral-300'}`, style: range === tr.value && accentColor ? { backgroundColor: accentColor, opacity: 0.8 } : undefined, children: tr.label }, tr.value))) }) }), (0, jsx_runtime_1.jsx)("div", { className: "h-[360px]", children: loading ? ((0, jsx_runtime_1.jsx)("div", { className: "h-full bg-neutral-800 rounded animate-pulse" })) : chartData.length === 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "h-full flex items-center justify-center text-neutral-500 font-mono text-sm", children: t('noPriceData', 'No price data available') })) : ((0, jsx_runtime_1.jsx)(recharts_1.ResponsiveContainer, { width: "100%", height: "100%", children: (0, jsx_runtime_1.jsxs)(recharts_1.AreaChart, { data: chartData, margin: { top: 5, right: 5, left: -15, bottom: 0 }, children: [(0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.jsxs)("linearGradient", { id: gradientId, x1: "0", y1: "0", x2: "0", y2: "1", children: [(0, jsx_runtime_1.jsx)("stop", { offset: "5%", stopColor: ac, stopOpacity: 0.3 }), (0, jsx_runtime_1.jsx)("stop", { offset: "95%", stopColor: ac, stopOpacity: 0 })] }) }), (0, jsx_runtime_1.jsx)(recharts_1.CartesianGrid, { vertical: false, strokeDasharray: "3 3", stroke: "#404040" }), (0, jsx_runtime_1.jsx)(recharts_1.XAxis, { dataKey: "time", tick: { fill: '#737373', fontSize: 10, fontFamily: 'monospace' }, tickLine: false, axisLine: false, tickFormatter: formatTime }), (0, jsx_runtime_1.jsx)(recharts_1.YAxis, { tick: { fill: '#737373', fontSize: 10, fontFamily: 'monospace' }, tickLine: false, axisLine: false, tickFormatter: (v) => `$${v.toFixed(3)}`, domain: [minPrice, maxPrice] }), (0, jsx_runtime_1.jsx)(recharts_1.Tooltip, { contentStyle: {
+    return ((0, jsx_runtime_1.jsxs)("div", { className: "backdrop-blur-md bg-white/5 border border-white/10 rounded-xl overflow-hidden blockchain-card", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col sm:flex-row items-stretch border-b border-white/10", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-1 flex-col justify-center gap-1 px-3 py-2 sm:px-6 sm:py-4", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-white font-mono font-bold text-sm sm:text-base", children: t('mccPriceTrend', 'MCC Price Trend') }), (0, jsx_runtime_1.jsxs)("div", { className: "text-neutral-500 font-mono text-xs", children: [currentPrice ? `$${currentPrice.toFixed(4)}` : '--', rangeChanges[range] != null && ((0, jsx_runtime_1.jsxs)("span", { className: `ml-2 ${rangeChanges[range] >= 0 ? 'text-cyan-400' : 'text-red-400'}`, children: [rangeChanges[range] >= 0 ? '+' : '', rangeChanges[range].toFixed(2), "%"] }))] })] }), (0, jsx_runtime_1.jsx)("div", { className: "flex", children: TIME_RANGES.map((tr) => {
+                            const isActive = range === tr.value;
+                            const change = rangeChanges[tr.value];
+                            const isPositive = change != null && change >= 0;
+                            return ((0, jsx_runtime_1.jsxs)("button", { "data-active": isActive, className: `relative z-10 flex flex-1 flex-col justify-center gap-1 border-t border-white/10 px-4 py-3 text-left even:border-l even:border-white/10 sm:border-t-0 sm:border-l sm:border-white/10 sm:px-5 sm:py-4 transition-colors ${isActive ? 'bg-white/10' : 'hover:bg-white/5'}`, onClick: () => setRange(tr.value), children: [(0, jsx_runtime_1.jsx)("span", { className: "text-[10px] text-neutral-500 font-mono tracking-wider", children: tr.label }), change == null ? ((0, jsx_runtime_1.jsx)("span", { className: "text-lg font-bold leading-none text-neutral-600 font-mono sm:text-xl", children: "..." })) : ((0, jsx_runtime_1.jsxs)("span", { className: `text-lg font-bold leading-none font-mono sm:text-xl tabular-nums ${isPositive ? 'text-cyan-400' : 'text-red-400'}`, children: [isPositive ? '+' : '', change.toFixed(2), "%"] }))] }, tr.value));
+                        }) })] }), (0, jsx_runtime_1.jsx)("div", { className: "p-3 sm:p-6", children: (0, jsx_runtime_1.jsx)("div", { className: "h-[220px] xs:h-[280px] sm:h-[360px]", children: loading ? ((0, jsx_runtime_1.jsx)("div", { className: "h-full bg-neutral-800 rounded animate-pulse" })) : chartData.length === 0 ? ((0, jsx_runtime_1.jsx)("div", { className: "h-full flex items-center justify-center text-neutral-500 font-mono text-sm", children: t('noPriceData', 'No price data available') })) : ((0, jsx_runtime_1.jsx)(recharts_1.ResponsiveContainer, { width: "100%", height: "100%", children: (0, jsx_runtime_1.jsxs)(recharts_1.AreaChart, { data: chartData, margin: { top: 5, right: 5, left: -15, bottom: 0 }, children: [(0, jsx_runtime_1.jsx)("defs", { children: (0, jsx_runtime_1.jsxs)("linearGradient", { id: gradientId, x1: "0", y1: "0", x2: "0", y2: "1", children: [(0, jsx_runtime_1.jsx)("stop", { offset: "5%", stopColor: ac, stopOpacity: 0.3 }), (0, jsx_runtime_1.jsx)("stop", { offset: "95%", stopColor: ac, stopOpacity: 0 })] }) }), (0, jsx_runtime_1.jsx)(recharts_1.CartesianGrid, { vertical: false, strokeDasharray: "3 3", stroke: "#404040" }), (0, jsx_runtime_1.jsx)(recharts_1.XAxis, { dataKey: "time", tick: { fill: '#737373', fontSize: 10, fontFamily: 'monospace' }, tickLine: false, axisLine: false, tickFormatter: formatTime }), (0, jsx_runtime_1.jsx)(recharts_1.YAxis, { tick: { fill: '#737373', fontSize: 10, fontFamily: 'monospace' }, tickLine: false, axisLine: false, tickFormatter: (v) => `$${v.toFixed(3)}`, domain: [minPrice, maxPrice] }), (0, jsx_runtime_1.jsx)(recharts_1.Tooltip, { contentStyle: {
                                         backgroundColor: '#171717',
                                         border: '1px solid #404040',
                                         borderRadius: '6px',
                                         fontFamily: 'monospace',
                                         fontSize: '11px',
-                                    }, labelFormatter: (ts) => new Date(ts).toLocaleString(), formatter: (value) => [`$${Number(value).toFixed(4)}`, t('price', 'Price')] }), (0, jsx_runtime_1.jsx)(recharts_1.Area, { type: "monotone", dataKey: "price", stroke: ac, strokeWidth: 2, fill: `url(#${gradientId})` })] }) })) })] }) }));
+                                    }, labelFormatter: (ts) => new Date(ts).toLocaleString(), formatter: (value) => [`$${Number(value).toFixed(4)}`, t('price', 'Price')] }), (0, jsx_runtime_1.jsx)(recharts_1.Area, { type: "monotone", dataKey: "price", stroke: ac, strokeWidth: 2, fill: `url(#${gradientId})` })] }) })) }) })] }));
 }

package/dist/components/dashboard/quick-actions.js

@@ -6,62 +6,76 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const MCC_MINT = 'MCCn6eqiTGzaiPKECg3viPmkdkS9YmkguqKvRcTxCsb';
 const USDC_MINT = 'EPjFWdd5AufqSSqeM2qN1xzybapC8G4wEGGkZwyTDt1v';
 const POOL_ID = '4AiaTd9bAWf3u8ScZWhXadJF1roc8bJKEKvaDudKacZd';
-/* Inline SVG icons matching lucide-react style (20x20, stroke-based) */
-const IconDroplets = ({ stroke = 'currentColor' }) => ((0, jsx_runtime_1.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: stroke, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [(0, jsx_runtime_1.jsx)("path", { d: "M7 16.3c2.2 0 4-1.83 4-4.05 0-1.16-.57-2.26-1.71-3.19S7.29 6.75 7 5.3c-.29 1.45-1.14 2.84-2.29 3.76S3 11.1 3 12.25c0 2.22 1.8 4.05 4 4.05z" }), (0, jsx_runtime_1.jsx)("path", { d: "M12.56 6.6A10.97 10.97 0 0 0 14 3.02c.5 2.5 2 4.9 4 6.5s3 3.5 3 5.5a6.98 6.98 0 0 1-11.91 4.97" })] }));
-const IconRepeat = () => ((0, jsx_runtime_1.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [(0, jsx_runtime_1.jsx)("path", { d: "m17 1 4 4-4 4" }), (0, jsx_runtime_1.jsx)("path", { d: "M3 11V9a4 4 0 0 1 4-4h14" }), (0, jsx_runtime_1.jsx)("path", { d: "m7 23-4-4 4-4" }), (0, jsx_runtime_1.jsx)("path", { d: "M21 13v2a4 4 0 0 1-4 4H3" })] }));
-const IconEye = ({ stroke = 'currentColor' }) => ((0, jsx_runtime_1.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: stroke, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [(0, jsx_runtime_1.jsx)("path", { d: "M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z" }), (0, jsx_runtime_1.jsx)("circle", { cx: "12", cy: "12", r: "3" })] }));
-const IconBarChart3 = () => ((0, jsx_runtime_1.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [(0, jsx_runtime_1.jsx)("path", { d: "M3 3v18h18" }), (0, jsx_runtime_1.jsx)("path", { d: "M18 17V9" }), (0, jsx_runtime_1.jsx)("path", { d: "M13 17V5" }), (0, jsx_runtime_1.jsx)("path", { d: "M8 17v-3" })] }));
-const IconLineChart = ({ stroke = 'currentColor' }) => ((0, jsx_runtime_1.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: stroke, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [(0, jsx_runtime_1.jsx)("path", { d: "M3 3v18h18" }), (0, jsx_runtime_1.jsx)("path", { d: "m19 9-5 5-4-4-3 3" })] }));
+const RAYDIUM_POOL_URL = `https://raydium.io/swap/?inputMint=${MCC_MINT}&outputMint=${USDC_MINT}`;
+const JUPITER_TRADE_URL = `https://jup.ag/swap/USDT-${MCC_MINT}`;
+const BIRDEYE_TOKEN_URL = `https://birdeye.so/token/${MCC_MINT}?chain=solana`;
+const GMGN_TOKEN_URL = `https://gmgn.ai/sol/token/${MCC_MINT}`;
+const OKX_DEX_URL = `https://www.okx.com/web3/dex-swap#inputChain=501&inputCurrency=${USDC_MINT}&outputChain=501&outputCurrency=${MCC_MINT}`;
+const DEXSCREENER_URL = `https://dexscreener.com/solana/${POOL_ID}`;
+const IconDroplets = ({ stroke = 'currentColor' }) => ((0, jsx_runtime_1.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: stroke, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "shrink-0 sm:w-5 sm:h-5", children: [(0, jsx_runtime_1.jsx)("path", { d: "M7 16.3c2.2 0 4-1.83 4-4.05 0-1.16-.57-2.26-1.71-3.19S7.29 6.75 7 5.3c-.29 1.45-1.14 2.84-2.29 3.76S3 11.1 3 12.25c0 2.22 1.8 4.05 4 4.05z" }), (0, jsx_runtime_1.jsx)("path", { d: "M12.56 6.6A10.97 10.97 0 0 0 14 3.02c.5 2.5 2 4.9 4 6.5s3 3.5 3 5.5a6.98 6.98 0 0 1-11.91 4.97" })] }));
+const IconRepeat = ({ stroke = 'currentColor' }) => ((0, jsx_runtime_1.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: stroke, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "shrink-0 sm:w-5 sm:h-5", children: [(0, jsx_runtime_1.jsx)("path", { d: "m17 1 4 4-4 4" }), (0, jsx_runtime_1.jsx)("path", { d: "M3 11V9a4 4 0 0 1 4-4h14" }), (0, jsx_runtime_1.jsx)("path", { d: "m7 23-4-4 4-4" }), (0, jsx_runtime_1.jsx)("path", { d: "M21 13v2a4 4 0 0 1-4 4H3" })] }));
+const IconEye = ({ stroke = 'currentColor' }) => ((0, jsx_runtime_1.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: stroke, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "shrink-0 sm:w-5 sm:h-5", children: [(0, jsx_runtime_1.jsx)("path", { d: "M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z" }), (0, jsx_runtime_1.jsx)("circle", { cx: "12", cy: "12", r: "3" })] }));
+const IconBarChart3 = ({ stroke = 'currentColor' }) => ((0, jsx_runtime_1.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: stroke, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "shrink-0 sm:w-5 sm:h-5", children: [(0, jsx_runtime_1.jsx)("path", { d: "M3 3v18h18" }), (0, jsx_runtime_1.jsx)("path", { d: "M18 17V9" }), (0, jsx_runtime_1.jsx)("path", { d: "M13 17V5" }), (0, jsx_runtime_1.jsx)("path", { d: "M8 17v-3" })] }));
+const IconLineChart = ({ stroke = 'currentColor' }) => ((0, jsx_runtime_1.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: stroke, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "shrink-0 sm:w-5 sm:h-5", children: [(0, jsx_runtime_1.jsx)("path", { d: "M3 3v18h18" }), (0, jsx_runtime_1.jsx)("path", { d: "m19 9-5 5-4-4-3 3" })] }));
 function buildExchanges(accentColor) {
     const accentClass = accentColor ? 'border-neutral-700 hover:bg-neutral-800' : 'text-cyan-300 border-cyan-400/30 hover:bg-cyan-950/30';
+    const accentStyle = accentColor ? { color: accentColor } : undefined;
     return [
         {
-            label: 'Raydium',
-            href: `https://raydium.io/swap/?inputMint=${MCC_MINT}&outputMint=${USDC_MINT}`,
+            label: 'OKX DEX',
+            href: OKX_DEX_URL,
+            icon: IconRepeat,
             color: accentClass,
-            colorStyle: accentColor ? { color: accentColor } : undefined,
+            colorStyle: accentStyle,
+            iconAccent: true,
+        },
+        {
+            label: 'Raydium',
+            href: RAYDIUM_POOL_URL,
             icon: IconDroplets,
+            color: accentClass,
+            colorStyle: accentStyle,
             iconAccent: true,
         },
         {
             label: 'Jupiter',
-            href: `https://jup.ag/swap/USDT-${MCC_MINT}`,
+            href: JUPITER_TRADE_URL,
+            icon: IconRepeat,
             color: 'text-white border-neutral-700 hover:bg-neutral-800',
             colorStyle: undefined,
-            icon: IconRepeat,
             iconAccent: false,
         },
         {
             label: 'BirdEye',
-            href: `https://birdeye.so/token/${MCC_MINT}?chain=solana`,
-            color: accentClass,
-            colorStyle: accentColor ? { color: accentColor } : undefined,
+            href: BIRDEYE_TOKEN_URL,
             icon: IconEye,
+            color: accentClass,
+            colorStyle: accentStyle,
             iconAccent: true,
         },
         {
             label: 'GMGN',
-            href: `https://gmgn.ai/sol/token/${MCC_MINT}`,
+            href: GMGN_TOKEN_URL,
+            icon: IconBarChart3,
             color: 'text-white border-neutral-700 hover:bg-neutral-800',
             colorStyle: undefined,
-            icon: IconBarChart3,
             iconAccent: false,
         },
         {
             label: 'DexScreener',
-            href: `https://dexscreener.com/solana/${POOL_ID}`,
-            color: accentClass,
-            colorStyle: accentColor ? { color: accentColor } : undefined,
+            href: DEXSCREENER_URL,
             icon: IconLineChart,
+            color: accentClass,
+            colorStyle: accentStyle,
             iconAccent: true,
         },
     ];
 }
 function MicrocosmQuickActions({ basePath = '', onNavigate, accentColor }) {
     const exchanges = buildExchanges(accentColor);
-    return ((0, jsx_runtime_1.jsx)("div", { className: "mb-6", children: (0, jsx_runtime_1.jsx)("div", { className: "grid grid-cols-2 lg:grid-cols-5 gap-3", children: exchanges.map((ex) => {
+    return ((0, jsx_runtime_1.jsx)("div", { className: "mb-3 sm:mb-6", children: (0, jsx_runtime_1.jsx)("div", { className: "grid grid-cols-3 xs:grid-cols-3 sm:grid-cols-4 lg:grid-cols-6 gap-2 sm:gap-3", children: exchanges.map((ex) => {
                 const Icon = ex.icon;
                 const iconStroke = ex.iconAccent && accentColor ? accentColor : undefined;
-                return ((0, jsx_runtime_1.jsx)("a", { href: ex.href, target: "_blank", rel: "noopener noreferrer", children: (0, jsx_runtime_1.jsxs)("div", { className: `backdrop-blur-md bg-white/5 border ${ex.color} rounded-xl p-4 flex items-center gap-3 cursor-pointer active:scale-[0.98] blockchain-card`, style: ex.colorStyle, children: [(0, jsx_runtime_1.jsx)(Icon, { stroke: iconStroke }), (0, jsx_runtime_1.jsx)("span", { className: "font-mono text-sm font-bold tracking-wider", children: ex.label })] }) }, ex.label));
+                return ((0, jsx_runtime_1.jsx)("a", { href: ex.href, target: "_blank", rel: "noopener noreferrer", children: (0, jsx_runtime_1.jsxs)("div", { className: `backdrop-blur-md bg-white/5 border ${ex.color} rounded-xl p-2.5 sm:p-4 flex items-center gap-2 sm:gap-3 cursor-pointer active:scale-[0.98] blockchain-card`, style: ex.colorStyle, children: [(0, jsx_runtime_1.jsx)(Icon, { stroke: iconStroke }), (0, jsx_runtime_1.jsx)("span", { className: "font-mono text-xs sm:text-sm font-bold tracking-wider truncate", children: ex.label })] }) }, ex.label));
             }) }) }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@microcosmmoney/portal-react",
-  "version": "3.11.0",
+  "version": "3.12.0",
   "description": "Microcosm Portal UI components for React/Next.js",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",