@microcosmmoney/portal-react 2.3.4 → 3.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/auction/auction-page.js +118 -25
- package/dist/components/dashboard/assets-summary.d.ts +2 -1
- package/dist/components/dashboard/assets-summary.js +11 -6
- package/dist/components/dashboard/dashboard-overview.d.ts +2 -1
- package/dist/components/dashboard/dashboard-overview.js +11 -2
- package/dist/components/dashboard/ecosystem-stats.d.ts +4 -1
- package/dist/components/dashboard/ecosystem-stats.js +12 -9
- package/dist/components/dashboard/lock-periods.d.ts +4 -1
- package/dist/components/dashboard/lock-periods.js +2 -2
- package/dist/components/dashboard/market-overview-bar.d.ts +4 -1
- package/dist/components/dashboard/market-overview-bar.js +9 -6
- package/dist/components/dashboard/mcc-token-stats.d.ts +4 -1
- package/dist/components/dashboard/mcc-token-stats.js +12 -9
- package/dist/components/dashboard/mcd-stats.d.ts +4 -1
- package/dist/components/dashboard/mcd-stats.js +14 -11
- package/dist/components/dashboard/mining-weight.d.ts +4 -1
- package/dist/components/dashboard/mining-weight.js +10 -7
- package/dist/components/dashboard/minting-stats.d.ts +4 -1
- package/dist/components/dashboard/minting-stats.js +6 -3
- package/dist/components/dashboard/my-mining.d.ts +2 -1
- package/dist/components/dashboard/my-mining.js +4 -2
- package/dist/components/dashboard/price-chart.d.ts +4 -1
- package/dist/components/dashboard/price-chart.js +6 -4
- package/dist/components/dashboard/quick-actions.d.ts +2 -1
- package/dist/components/dashboard/quick-actions.js +52 -37
- package/dist/components/fragment/fragment-page.js +53 -9
- package/dist/components/lending/lending-page.js +124 -22
- package/dist/components/mcd/mcd-page.js +139 -18
- package/dist/components/mining/mining-page.js +46 -15
- package/dist/components/organization/organization-page.js +90 -22
- package/dist/components/territory/territory-page.js +126 -29
- package/dist/components/voting/voting-page.js +10 -10
- package/dist/components/wallet/wallet-page.js +186 -23
- package/dist/index.d.ts +8 -0
- package/package.json +4 -4
|
@@ -5,22 +5,25 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
5
5
|
exports.MicrocosmMCCTokenStats = MicrocosmMCCTokenStats;
|
|
6
6
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
7
7
|
const auth_react_1 = require("@microcosmmoney/auth-react");
|
|
8
|
-
/* Inline SVG icons (16x16,
|
|
9
|
-
const IconUsers = () => ((0, jsx_runtime_1.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke:
|
|
10
|
-
const IconCircle = () => ((0, jsx_runtime_1.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke:
|
|
11
|
-
const IconPickaxe = () => ((0, jsx_runtime_1.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke:
|
|
12
|
-
const IconDollarSign = () => ((0, jsx_runtime_1.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke:
|
|
13
|
-
const IconCoin = () => ((0, jsx_runtime_1.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke:
|
|
14
|
-
function MicrocosmMCCTokenStats() {
|
|
8
|
+
/* Inline SVG icons (16x16, stroke-based) */
|
|
9
|
+
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" })] }));
|
|
10
|
+
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" })] }));
|
|
11
|
+
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" })] }));
|
|
12
|
+
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" })] }));
|
|
13
|
+
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" })] }));
|
|
14
|
+
function MicrocosmMCCTokenStats({ accentColor } = {}) {
|
|
15
15
|
const { data, loading } = (0, auth_react_1.useMCCStats)();
|
|
16
|
+
const ac = accentColor || '#22d3ee';
|
|
16
17
|
const stats = [
|
|
17
18
|
{ label: 'holders', value: data?.holders_count, format: (v) => v.toLocaleString(), icon: IconUsers },
|
|
18
19
|
{ label: 'circulating', value: data?.circulating_supply, format: (v) => `${(v / 1e6).toFixed(2)}M`, icon: IconCircle },
|
|
19
20
|
{ label: 'total_mining_tx', value: data?.total_mining_count, format: (v) => v.toLocaleString(), icon: IconPickaxe },
|
|
20
21
|
{ label: 'total_mining_usdc', value: data?.total_mining_usdc, format: (v) => `$${(v / 1e6).toFixed(2)}M`, icon: IconDollarSign },
|
|
21
22
|
];
|
|
22
|
-
|
|
23
|
+
const spinnerBorderColor = accentColor ? { borderColor: accentColor, borderTopColor: 'transparent' } : undefined;
|
|
24
|
+
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';
|
|
25
|
+
return ((0, jsx_runtime_1.jsx)("div", { className: "bg-neutral-900 border border-neutral-700 rounded-lg h-full hover:border-cyan-400/50 transition-colors", 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-neutral-400 text-xs font-mono tracking-wider", children: "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) => {
|
|
23
26
|
const Icon = s.icon;
|
|
24
|
-
return ((0, jsx_runtime_1.jsxs)("div", { className: "bg-neutral-800 rounded p-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1.5 mb-1", children: [(0, jsx_runtime_1.jsx)(Icon, {}), (0, jsx_runtime_1.jsx)("span", { className: "text-[10px] text-neutral-400 font-mono tracking-wider", 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));
|
|
27
|
+
return ((0, jsx_runtime_1.jsxs)("div", { className: "bg-neutral-800 rounded p-3", 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-neutral-400 font-mono tracking-wider", 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));
|
|
25
28
|
}) }))] }) }));
|
|
26
29
|
}
|
|
@@ -1 +1,4 @@
|
|
|
1
|
-
export
|
|
1
|
+
export interface MicrocosmMCDStatsProps {
|
|
2
|
+
accentColor?: string;
|
|
3
|
+
}
|
|
4
|
+
export declare function MicrocosmMCDStats({ accentColor }?: MicrocosmMCDStatsProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -5,22 +5,25 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
5
5
|
exports.MicrocosmMCDStats = MicrocosmMCDStats;
|
|
6
6
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
7
7
|
const auth_react_1 = require("@microcosmmoney/auth-react");
|
|
8
|
-
/* Inline SVG icons (16x16,
|
|
9
|
-
const IconUsers = () => ((0, jsx_runtime_1.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke:
|
|
10
|
-
const IconVault = () => ((0, jsx_runtime_1.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke:
|
|
11
|
-
const IconArrowDown = () => ((0, jsx_runtime_1.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke:
|
|
12
|
-
const IconWallet = () => ((0, jsx_runtime_1.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke:
|
|
13
|
-
const IconBanknote = () => ((0, jsx_runtime_1.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke:
|
|
14
|
-
function MicrocosmMCDStats() {
|
|
8
|
+
/* Inline SVG icons (16x16, stroke-based) */
|
|
9
|
+
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" })] }));
|
|
10
|
+
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" })] }));
|
|
11
|
+
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" })] }));
|
|
12
|
+
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" })] }));
|
|
13
|
+
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" })] }));
|
|
14
|
+
function MicrocosmMCDStats({ accentColor } = {}) {
|
|
15
15
|
const { data, loading } = (0, auth_react_1.useMCDStats)();
|
|
16
|
+
const ac = accentColor || '#22d3ee';
|
|
16
17
|
const stats = [
|
|
17
|
-
{ label: 'holders', value: data?.holders_count, format: (v) => v.toLocaleString(), icon: IconUsers },
|
|
18
|
-
{ label: 'active_vaults', value: data?.active_vaults, format: (v) => v.toLocaleString(), icon: IconVault },
|
|
18
|
+
{ label: 'holders', value: data?.holders_count ?? data?.holder_count, format: (v) => v.toLocaleString(), icon: IconUsers },
|
|
19
|
+
{ label: 'active_vaults', value: data?.total_vaults ?? data?.active_vaults, format: (v) => v.toLocaleString(), icon: IconVault },
|
|
19
20
|
{ label: 'daily_distribution', value: data?.daily_distribution, format: (v) => v > 0 ? v.toLocaleString('en-US', { maximumFractionDigits: 2 }) : '0', icon: IconArrowDown },
|
|
20
21
|
{ label: 'total_vault_balance', value: data?.total_vault_balance, format: (v) => v > 0 ? `${(v / 1e6).toFixed(2)}M` : '0', icon: IconWallet },
|
|
21
22
|
];
|
|
22
|
-
|
|
23
|
+
const spinnerBorderColor = accentColor ? { borderColor: accentColor, borderTopColor: 'transparent' } : undefined;
|
|
24
|
+
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';
|
|
25
|
+
return ((0, jsx_runtime_1.jsx)("div", { className: "bg-neutral-900 border border-neutral-700 rounded-lg h-full hover:border-cyan-400/50 transition-colors", 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: ac }), (0, jsx_runtime_1.jsx)("span", { className: "text-neutral-400 text-xs font-mono tracking-wider", children: "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) => {
|
|
23
26
|
const Icon = s.icon;
|
|
24
|
-
return ((0, jsx_runtime_1.jsxs)("div", { className: "bg-neutral-800 rounded p-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1.5 mb-1", children: [(0, jsx_runtime_1.jsx)(Icon, {}), (0, jsx_runtime_1.jsx)("span", { className: "text-[10px] text-neutral-400 font-mono tracking-wider", 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));
|
|
27
|
+
return ((0, jsx_runtime_1.jsxs)("div", { className: "bg-neutral-800 rounded p-3", 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-neutral-400 font-mono tracking-wider", 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));
|
|
25
28
|
}) }))] }) }));
|
|
26
29
|
}
|
|
@@ -1 +1,4 @@
|
|
|
1
|
-
export
|
|
1
|
+
export interface MicrocosmMiningWeightProps {
|
|
2
|
+
accentColor?: string;
|
|
3
|
+
}
|
|
4
|
+
export declare function MicrocosmMiningWeight({ accentColor }?: MicrocosmMiningWeightProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -24,11 +24,11 @@ const RANK_COLORS = {
|
|
|
24
24
|
Warden: 'text-cyan-300',
|
|
25
25
|
Admiral: 'text-cyan-300',
|
|
26
26
|
};
|
|
27
|
-
/* Inline SVG icons (16x16,
|
|
28
|
-
const IconShield = () => ((0, jsx_runtime_1.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke:
|
|
29
|
-
const IconTree = () => ((0, jsx_runtime_1.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke:
|
|
30
|
-
const IconCalendar = () => ((0, jsx_runtime_1.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke:
|
|
31
|
-
const IconPickaxe = () => ((0, jsx_runtime_1.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke:
|
|
27
|
+
/* Inline SVG icons (16x16, stroke-based) */
|
|
28
|
+
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" }) }));
|
|
29
|
+
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" })] }));
|
|
30
|
+
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" })] }));
|
|
31
|
+
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" })] }));
|
|
32
32
|
function getCompanionYield(rank) {
|
|
33
33
|
if (!rank)
|
|
34
34
|
return [];
|
|
@@ -43,16 +43,19 @@ function getCompanionYield(rank) {
|
|
|
43
43
|
{ label: '\u9886\u5730\u91d1\u5e93', share: '30%', type: 'MCD' },
|
|
44
44
|
];
|
|
45
45
|
}
|
|
46
|
-
function MicrocosmMiningWeight() {
|
|
46
|
+
function MicrocosmMiningWeight({ accentColor } = {}) {
|
|
47
47
|
const { data, loading: loadingLevel } = (0, auth_react_1.useUserLevel)();
|
|
48
48
|
const { data: techBonus, loading: loadingTech } = (0, auth_react_1.useTechTreeBonus)();
|
|
49
49
|
const { data: miningStats, loading: loadingMining } = (0, auth_react_1.useMiningStats)();
|
|
50
50
|
const loading = loadingLevel || loadingTech || loadingMining;
|
|
51
|
+
const ac = accentColor || '#22d3ee';
|
|
51
52
|
const rank = data?.level ?? null;
|
|
52
53
|
const miningDays = data?.upgrade_progress?.current_days ?? miningStats?.active_days_30d ?? 0;
|
|
53
54
|
const companionYield = getCompanionYield(rank);
|
|
54
55
|
// Tech tree discount
|
|
55
56
|
const bonusMultiplier = techBonus?.bonus_multiplier ?? 0;
|
|
56
57
|
const discountPct = bonusMultiplier > 0 ? `-${(bonusMultiplier * 100).toFixed(0)}%` : '0%';
|
|
57
|
-
|
|
58
|
+
const spinnerBorderColor = accentColor ? { borderColor: accentColor, borderTopColor: 'transparent' } : undefined;
|
|
59
|
+
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';
|
|
60
|
+
return ((0, jsx_runtime_1.jsx)("div", { className: "bg-neutral-900 border border-neutral-700 rounded-lg h-full hover:border-cyan-400/50 transition-colors", 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: ac }), (0, jsx_runtime_1.jsx)("span", { className: "text-neutral-400 text-xs font-mono tracking-wider", children: "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-neutral-800 rounded p-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1.5 mb-1", children: [(0, jsx_runtime_1.jsx)(IconShield, { stroke: ac }), (0, jsx_runtime_1.jsx)("span", { className: "text-neutral-400 text-xs font-mono tracking-wider", children: "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 : 'N/A' })] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-neutral-800 rounded p-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1.5 mb-1", children: [(0, jsx_runtime_1.jsx)(IconTree, { stroke: ac }), (0, jsx_runtime_1.jsx)("span", { className: "text-neutral-400 text-xs font-mono tracking-wider", children: "tech_tree" })] }), (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: "mining discount" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-neutral-800 rounded p-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex items-center gap-1.5 mb-1", children: [(0, jsx_runtime_1.jsx)(IconCalendar, { stroke: ac }), (0, jsx_runtime_1.jsx)("span", { className: "text-neutral-400 text-xs font-mono tracking-wider", children: "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: "cumulative" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-neutral-800 rounded p-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-neutral-400 text-xs font-mono tracking-wider mb-3", children: "companion_yield" }), (0, jsx_runtime_1.jsx)("p", { className: "text-[10px] text-neutral-500 font-mono mb-3", children: "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))) }), rank && (rank === auth_core_1.UserRank.RECRUIT || rank === auth_core_1.UserRank.PROSPECT) && ((0, jsx_runtime_1.jsx)("div", { className: "mt-3 text-[10px] text-neutral-500 font-mono border-t border-neutral-700 pt-2", children: "Upgrade to Miner to unlock Magistrate + Station Vault distribution" }))] }), (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: ['\u94f8\u9020\u4ef7\u683c', " = ", '\u5e02\u573a\u4ef7', " x 2 (", '\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'] })] })] }))] }) }));
|
|
58
61
|
}
|
|
@@ -1 +1,4 @@
|
|
|
1
|
-
export
|
|
1
|
+
export interface MicrocosmMintingStatsProps {
|
|
2
|
+
accentColor?: string;
|
|
3
|
+
}
|
|
4
|
+
export declare function MicrocosmMintingStats({ accentColor }?: MicrocosmMintingStatsProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
5
5
|
exports.MicrocosmMintingStats = MicrocosmMintingStats;
|
|
6
6
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
7
7
|
const auth_react_1 = require("@microcosmmoney/auth-react");
|
|
8
|
-
function MicrocosmMintingStats() {
|
|
8
|
+
function MicrocosmMintingStats({ accentColor } = {}) {
|
|
9
9
|
const { data: mccStats, loading } = (0, auth_react_1.useMCCStats)();
|
|
10
10
|
const { data: marketData } = (0, auth_react_1.useMarketData)();
|
|
11
11
|
const s = mccStats;
|
|
@@ -15,9 +15,12 @@ function MicrocosmMintingStats() {
|
|
|
15
15
|
const nextHalving = s?.next_halving_at ?? 100000000;
|
|
16
16
|
const price = marketData?.price_usd ?? 0;
|
|
17
17
|
const fmt = (n) => n.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
|
|
18
|
-
|
|
18
|
+
const spinnerBorderColor = accentColor ? { borderColor: accentColor, borderTopColor: 'transparent' } : undefined;
|
|
19
|
+
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';
|
|
20
|
+
return ((0, jsx_runtime_1.jsx)("div", { className: "bg-neutral-900 border border-neutral-700 rounded-lg h-full hover:border-cyan-400/50 transition-colors", 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-neutral-400 text-xs font-mono tracking-wider", children: "MINTING_STATS" })] }), (0, jsx_runtime_1.jsxs)("div", { className: "grid grid-cols-2 gap-4", children: [(0, jsx_runtime_1.jsxs)("div", { className: "bg-neutral-800 rounded p-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-xs text-neutral-400 font-mono tracking-wider mb-1", children: "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-neutral-800 rounded p-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "text-xs text-neutral-400 font-mono tracking-wider mb-1", children: "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: ["$", price > 0 ? (price * 2).toFixed(4) : '--'] }), (0, jsx_runtime_1.jsx)("div", { className: "text-[10px] text-neutral-500 font-mono", children: "market \u00D7 2" })] })] }), (0, jsx_runtime_1.jsxs)("div", { className: "bg-neutral-800 rounded p-3", 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: "next_halving" }), (0, jsx_runtime_1.jsxs)("span", { className: "text-white", children: [nextHalving > totalMinted
|
|
19
21
|
? (nextHalving - totalMinted).toLocaleString('en-US', { maximumFractionDigits: 0 })
|
|
20
|
-
: '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:
|
|
22
|
+
: '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: {
|
|
21
23
|
width: nextHalving > 0 ? `${Math.min((totalMinted % nextHalving) / nextHalving * 100, 100)}%` : '0%',
|
|
24
|
+
...(accentColor ? { backgroundColor: accentColor } : {}),
|
|
22
25
|
} }) }), (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: ["phase: ", currentStage, " | rate: ", miningRate > 0 ? `${miningRate}:1` : '--'] }), (0, jsx_runtime_1.jsxs)("span", { children: ["threshold: ", (nextHalving / 1e6).toFixed(0), "M"] })] })] })] })) }) }));
|
|
23
26
|
}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
export interface MicrocosmMyMiningProps {
|
|
2
2
|
detailsPath?: string;
|
|
3
3
|
onNavigate?: (path: string) => void;
|
|
4
|
+
accentColor?: string;
|
|
4
5
|
}
|
|
5
|
-
export declare function MicrocosmMyMining({ detailsPath, onNavigate }: MicrocosmMyMiningProps): import("react/jsx-runtime").JSX.Element;
|
|
6
|
+
export declare function MicrocosmMyMining({ detailsPath, onNavigate, accentColor }: MicrocosmMyMiningProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
5
5
|
exports.MicrocosmMyMining = MicrocosmMyMining;
|
|
6
6
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
7
7
|
const auth_react_1 = require("@microcosmmoney/auth-react");
|
|
8
|
-
function MicrocosmMyMining({ detailsPath, onNavigate }) {
|
|
8
|
+
function MicrocosmMyMining({ detailsPath, onNavigate, accentColor }) {
|
|
9
9
|
const { data, loading } = (0, auth_react_1.useMiningStats)();
|
|
10
10
|
const fmt = (v) => v.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
|
|
11
11
|
const formatDateTime = (iso) => {
|
|
@@ -26,5 +26,7 @@ function MicrocosmMyMining({ detailsPath, onNavigate }) {
|
|
|
26
26
|
if (onNavigate && detailsPath)
|
|
27
27
|
onNavigate(detailsPath);
|
|
28
28
|
};
|
|
29
|
-
|
|
29
|
+
const spinnerBorderColor = accentColor ? { borderColor: accentColor, borderTopColor: 'transparent' } : undefined;
|
|
30
|
+
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';
|
|
31
|
+
return ((0, jsx_runtime_1.jsx)("div", { className: "bg-neutral-900 border border-neutral-700 rounded-lg h-full hover:border-cyan-400/50 transition-colors", 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-neutral-400 text-xs font-mono tracking-wider", children: "MY_MINING" }), detailsPath && ((0, jsx_runtime_1.jsx)("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: "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: "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-neutral-800 rounded p-3", children: [(0, jsx_runtime_1.jsx)("span", { className: "text-[10px] text-neutral-400 font-mono tracking-wider", children: s.label }), (0, jsx_runtime_1.jsx)("div", { className: "text-xl font-bold font-mono text-white", children: s.value })] }, s.label))) }))] }) }));
|
|
30
32
|
}
|
|
@@ -1 +1,4 @@
|
|
|
1
|
-
export
|
|
1
|
+
export interface MicrocosmPriceChartProps {
|
|
2
|
+
accentColor?: string;
|
|
3
|
+
}
|
|
4
|
+
export declare function MicrocosmPriceChart({ accentColor }?: MicrocosmPriceChartProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -12,9 +12,11 @@ const timeRanges = [
|
|
|
12
12
|
{ label: '7D', value: '7D' },
|
|
13
13
|
{ label: '30D', value: '30D' },
|
|
14
14
|
];
|
|
15
|
-
function MicrocosmPriceChart() {
|
|
15
|
+
function MicrocosmPriceChart({ accentColor } = {}) {
|
|
16
16
|
const [range, setRange] = (0, react_1.useState)('7D');
|
|
17
17
|
const { data, loading } = (0, auth_react_1.usePriceHistory)(range);
|
|
18
|
+
const gradientId = (0, react_1.useId)().replace(/:/g, '_') + '_mcPriceGradient';
|
|
19
|
+
const ac = accentColor || '#22d3ee';
|
|
18
20
|
const raw = data;
|
|
19
21
|
const items = Array.isArray(raw) ? raw : raw?.records ?? [];
|
|
20
22
|
const chartData = items.map((item) => ({
|
|
@@ -33,12 +35,12 @@ function MicrocosmPriceChart() {
|
|
|
33
35
|
return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
|
|
34
36
|
};
|
|
35
37
|
return ((0, jsx_runtime_1.jsx)("div", { className: "bg-neutral-900 border border-neutral-700 rounded-lg overflow-hidden hover:border-cyan-400/50 transition-colors", 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
|
|
36
|
-
? 'bg-cyan-700 text-white'
|
|
37
|
-
: 'text-neutral-500 hover:text-neutral-300'}`, 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: "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:
|
|
38
|
+
? (accentColor ? 'text-white' : 'bg-cyan-700 text-white')
|
|
39
|
+
: '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: "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: {
|
|
38
40
|
backgroundColor: '#171717',
|
|
39
41
|
border: '1px solid #404040',
|
|
40
42
|
borderRadius: '6px',
|
|
41
43
|
fontFamily: 'monospace',
|
|
42
44
|
fontSize: '11px',
|
|
43
|
-
}, labelFormatter: (ts) => new Date(ts).toLocaleString(), formatter: (value) => [`$${Number(value).toFixed(4)}`, 'Price'] }), (0, jsx_runtime_1.jsx)(recharts_1.Area, { type: "monotone", dataKey: "price", stroke:
|
|
45
|
+
}, labelFormatter: (ts) => new Date(ts).toLocaleString(), formatter: (value) => [`$${Number(value).toFixed(4)}`, 'Price'] }), (0, jsx_runtime_1.jsx)(recharts_1.Area, { type: "monotone", dataKey: "price", stroke: ac, strokeWidth: 2, fill: `url(#${gradientId})` })] }) })) })] }) }));
|
|
44
46
|
}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
export interface MicrocosmQuickActionsProps {
|
|
2
2
|
basePath?: string;
|
|
3
3
|
onNavigate?: (path: string) => void;
|
|
4
|
+
accentColor?: string;
|
|
4
5
|
}
|
|
5
|
-
export declare function MicrocosmQuickActions({ basePath, onNavigate }: MicrocosmQuickActionsProps): import("react/jsx-runtime").JSX.Element;
|
|
6
|
+
export declare function MicrocosmQuickActions({ basePath, onNavigate, accentColor }: MicrocosmQuickActionsProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -8,46 +8,61 @@ const MCC_MINT = 'MCCn6eqiTGzaiPKECg3viPmkdkS9YmkguqKvRcTxCsb';
|
|
|
8
8
|
const USDC_MINT = 'EPjFWdd5AufqSSqeM2qN1xzybapC8G4wEGGkZwyTDt1v';
|
|
9
9
|
const POOL_ID = '4AiaTd9bAWf3u8ScZWhXadJF1roc8bJKEKvaDudKacZd';
|
|
10
10
|
/* Inline SVG icons matching lucide-react style (20x20, stroke-based) */
|
|
11
|
-
const IconDroplets = () => ((0, jsx_runtime_1.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke:
|
|
11
|
+
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" })] }));
|
|
12
12
|
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" })] }));
|
|
13
|
-
const IconEye = () => ((0, jsx_runtime_1.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke:
|
|
13
|
+
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" })] }));
|
|
14
14
|
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" })] }));
|
|
15
|
-
const IconLineChart = () => ((0, jsx_runtime_1.jsxs)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke:
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
15
|
+
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" })] }));
|
|
16
|
+
function buildExchanges(accentColor) {
|
|
17
|
+
const accentClass = accentColor ? 'border-neutral-700 hover:bg-neutral-800' : 'text-cyan-300 border-cyan-400/30 hover:bg-cyan-950/30';
|
|
18
|
+
return [
|
|
19
|
+
{
|
|
20
|
+
label: 'Raydium',
|
|
21
|
+
href: `https://raydium.io/swap/?inputMint=${MCC_MINT}&outputMint=${USDC_MINT}`,
|
|
22
|
+
color: accentClass,
|
|
23
|
+
colorStyle: accentColor ? { color: accentColor } : undefined,
|
|
24
|
+
icon: IconDroplets,
|
|
25
|
+
iconAccent: true,
|
|
26
|
+
},
|
|
27
|
+
{
|
|
28
|
+
label: 'Jupiter',
|
|
29
|
+
href: `https://jup.ag/swap/USDT-${MCC_MINT}`,
|
|
30
|
+
color: 'text-white border-neutral-700 hover:bg-neutral-800',
|
|
31
|
+
colorStyle: undefined,
|
|
32
|
+
icon: IconRepeat,
|
|
33
|
+
iconAccent: false,
|
|
34
|
+
},
|
|
35
|
+
{
|
|
36
|
+
label: 'BirdEye',
|
|
37
|
+
href: `https://birdeye.so/token/${MCC_MINT}?chain=solana`,
|
|
38
|
+
color: accentClass,
|
|
39
|
+
colorStyle: accentColor ? { color: accentColor } : undefined,
|
|
40
|
+
icon: IconEye,
|
|
41
|
+
iconAccent: true,
|
|
42
|
+
},
|
|
43
|
+
{
|
|
44
|
+
label: 'GMGN',
|
|
45
|
+
href: `https://gmgn.ai/sol/token/${MCC_MINT}`,
|
|
46
|
+
color: 'text-white border-neutral-700 hover:bg-neutral-800',
|
|
47
|
+
colorStyle: undefined,
|
|
48
|
+
icon: IconBarChart3,
|
|
49
|
+
iconAccent: false,
|
|
50
|
+
},
|
|
51
|
+
{
|
|
52
|
+
label: 'DexScreener',
|
|
53
|
+
href: `https://dexscreener.com/solana/${POOL_ID}`,
|
|
54
|
+
color: accentClass,
|
|
55
|
+
colorStyle: accentColor ? { color: accentColor } : undefined,
|
|
56
|
+
icon: IconLineChart,
|
|
57
|
+
iconAccent: true,
|
|
58
|
+
},
|
|
59
|
+
];
|
|
60
|
+
}
|
|
61
|
+
function MicrocosmQuickActions({ basePath = '', onNavigate, accentColor }) {
|
|
62
|
+
const exchanges = buildExchanges(accentColor);
|
|
49
63
|
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) => {
|
|
50
64
|
const Icon = ex.icon;
|
|
51
|
-
|
|
65
|
+
const iconStroke = ex.iconAccent && accentColor ? accentColor : undefined;
|
|
66
|
+
return ((0, jsx_runtime_1.jsx)("a", { href: ex.href, target: "_blank", rel: "noopener noreferrer", children: (0, jsx_runtime_1.jsxs)("div", { className: `bg-neutral-900 border ${ex.color} rounded-lg p-4 flex items-center gap-3 cursor-pointer active:scale-[0.98] transition-colors`, 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));
|
|
52
67
|
}) }) }));
|
|
53
68
|
}
|