@microcosmmoney/portal-react 3.0.0 → 3.2.0

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

@@ -12,9 +12,11 @@ const timeRanges = [
     { label: '7D', value: '7D' },
     { label: '30D', value: '30D' },
 ];
-function MicrocosmPriceChart() {
+function MicrocosmPriceChart({ accentColor } = {}) {
     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 raw = data;
     const items = Array.isArray(raw) ? raw : raw?.records ?? [];
     const chartData = items.map((item) => ({
@@ -33,12 +35,12 @@ function MicrocosmPriceChart() {
         return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
     };
     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
-                                ? 'bg-cyan-700 text-white'
-                                : '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: "mcPriceGradient", x1: "0", y1: "0", x2: "0", y2: "1", children: [(0, jsx_runtime_1.jsx)("stop", { offset: "5%", stopColor: "#22d3ee", stopOpacity: 0.3 }), (0, jsx_runtime_1.jsx)("stop", { offset: "95%", stopColor: "#22d3ee", 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: {
+                                ? (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: "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)}`, 'Price'] }), (0, jsx_runtime_1.jsx)(recharts_1.Area, { type: "monotone", dataKey: "price", stroke: "#22d3ee", strokeWidth: 2, fill: "url(#mcPriceGradient)" })] }) })) })] }) }));
+                                    }, 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})` })] }) })) })] }) }));
 }

package/dist/components/dashboard/quick-actions.d.ts

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

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

@@ -8,46 +8,61 @@ const MCC_MINT = 'MCCn6eqiTGzaiPKECg3viPmkdkS9YmkguqKvRcTxCsb';
 const USDC_MINT = 'EPjFWdd5AufqSSqeM2qN1xzybapC8G4wEGGkZwyTDt1v';
 const POOL_ID = '4AiaTd9bAWf3u8ScZWhXadJF1roc8bJKEKvaDudKacZd';
 /* Inline SVG icons matching lucide-react style (20x20, stroke-based) */
-const IconDroplets = () => ((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: "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 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 = () => ((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: "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 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 = () => ((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: "m19 9-5 5-4-4-3 3" })] }));
-const exchanges = [
-    {
-        label: 'Raydium',
-        href: `https://raydium.io/swap/?inputMint=${MCC_MINT}&outputMint=${USDC_MINT}`,
-        color: 'text-cyan-300 border-cyan-400/30 hover:bg-cyan-950/30',
-        icon: IconDroplets,
-    },
-    {
-        label: 'Jupiter',
-        href: `https://jup.ag/swap/USDT-${MCC_MINT}`,
-        color: 'text-white border-neutral-700 hover:bg-neutral-800',
-        icon: IconRepeat,
-    },
-    {
-        label: 'BirdEye',
-        href: `https://birdeye.so/token/${MCC_MINT}?chain=solana`,
-        color: 'text-cyan-300 border-cyan-400/30 hover:bg-cyan-950/30',
-        icon: IconEye,
-    },
-    {
-        label: 'GMGN',
-        href: `https://gmgn.ai/sol/token/${MCC_MINT}`,
-        color: 'text-white border-neutral-700 hover:bg-neutral-800',
-        icon: IconBarChart3,
-    },
-    {
-        label: 'DexScreener',
-        href: `https://dexscreener.com/solana/${POOL_ID}`,
-        color: 'text-cyan-300 border-cyan-400/30 hover:bg-cyan-950/30',
-        icon: IconLineChart,
-    },
-];
-function MicrocosmQuickActions({ basePath = '', onNavigate }) {
+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" })] }));
+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';
+    return [
+        {
+            label: 'Raydium',
+            href: `https://raydium.io/swap/?inputMint=${MCC_MINT}&outputMint=${USDC_MINT}`,
+            color: accentClass,
+            colorStyle: accentColor ? { color: accentColor } : undefined,
+            icon: IconDroplets,
+            iconAccent: true,
+        },
+        {
+            label: 'Jupiter',
+            href: `https://jup.ag/swap/USDT-${MCC_MINT}`,
+            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,
+            icon: IconEye,
+            iconAccent: true,
+        },
+        {
+            label: 'GMGN',
+            href: `https://gmgn.ai/sol/token/${MCC_MINT}`,
+            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,
+            icon: IconLineChart,
+            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) => {
                 const Icon = ex.icon;
-                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`, children: [(0, jsx_runtime_1.jsx)(Icon, {}), (0, jsx_runtime_1.jsx)("span", { className: "font-mono text-sm font-bold tracking-wider", children: ex.label })] }) }, ex.label));
+                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: `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));
             }) }) }));
 }