@microcosmmoney/portal-react 3.11.0 → 3.12.1

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/dist/components/mcd/mcd-page.js

@@ -6,7 +6,6 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const auth_react_1 = require("@microcosmmoney/auth-react");
 const i18n_context_1 = require("../../i18n-context");
-/* ── Inline SVG Icons (lucide style, 24x24 default) ── */
 const IconCoins = ({ className = '' }) => ((0, jsx_runtime_1.jsxs)("svg", { className: className, 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)("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" }), (0, jsx_runtime_1.jsx)("path", { d: "m16.71 13.88.7.71-2.82 2.82" })] }));
 const IconWallet = ({ className = '' }) => ((0, jsx_runtime_1.jsxs)("svg", { className: className, width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", 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 IconGift = ({ className = '' }) => ((0, jsx_runtime_1.jsxs)("svg", { className: className, 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)("rect", { x: "3", y: "8", width: "18", height: "4", rx: "1" }), (0, jsx_runtime_1.jsx)("path", { d: "M12 8v13" }), (0, jsx_runtime_1.jsx)("path", { d: "M19 12v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-7" }), (0, jsx_runtime_1.jsx)("path", { d: "M7.5 8a2.5 2.5 0 0 1 0-5A4.8 8 0 0 1 12 8a4.8 8 0 0 1 4.5-5 2.5 2.5 0 0 1 0 5" })] }));
@@ -23,7 +22,6 @@ const IconEye = ({ className = '' }) => ((0, jsx_runtime_1.jsxs)("svg", { classN
 const IconShield = ({ className = '' }) => ((0, jsx_runtime_1.jsx)("svg", { className: className, 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: "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 IconExternalLink = ({ className = '' }) => ((0, jsx_runtime_1.jsxs)("svg", { className: className, width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [(0, jsx_runtime_1.jsx)("path", { d: "M15 3h6v6" }), (0, jsx_runtime_1.jsx)("path", { d: "M10 14 21 3" }), (0, jsx_runtime_1.jsx)("path", { d: "M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" })] }));
 const IconAlertTriangle = ({ className = '' }) => ((0, jsx_runtime_1.jsxs)("svg", { className: className, width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [(0, jsx_runtime_1.jsx)("path", { d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z" }), (0, jsx_runtime_1.jsx)("path", { d: "M12 9v4" }), (0, jsx_runtime_1.jsx)("path", { d: "M12 17h.01" })] }));
-/* ── Helpers ── */
 const fmt = (n, d = 2) => n.toLocaleString('en-US', { minimumFractionDigits: d, maximumFractionDigits: d });
 function formatDate(dateStr) {
     if (!dateStr)
@@ -61,7 +59,6 @@ const TX_TYPE_NAMES = {
     transfer: 'Transfer',
     refund: 'Refund',
 };
-/* ── Ecosystem services ── */
 const ECOSYSTEM_SERVICES = [
     {
         name: 'Double Helix',
@@ -133,7 +130,6 @@ function MicrocosmMCDPage({ basePath = '', onNavigate }) {
     const handleNav = (path) => {
         onNavigate?.(resolvePath(path));
     };
-    /* ── Not logged in ── */
     if (!mcdData && !mcdLoading) {
         return ((0, jsx_runtime_1.jsx)("div", { className: "flex items-center justify-center h-[60vh]", children: (0, jsx_runtime_1.jsxs)("div", { className: "bg-neutral-900 border border-neutral-700 rounded-lg p-8 text-center", children: [(0, jsx_runtime_1.jsx)(IconWallet, { className: "w-12 h-12 mx-auto mb-4 text-neutral-500" }), (0, jsx_runtime_1.jsx)("p", { className: "text-neutral-400", children: t('loginRequired', 'Please log in to view your MCD balance') })] }) }));
     }