@microcosmmoney/portal-react 2.2.0 → 2.2.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,6 +1,39 @@
1
1
  "use strict";
2
2
  // AI-generated · AI-managed · AI-maintained
3
3
  'use client';
4
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
5
+ if (k2 === undefined) k2 = k;
6
+ var desc = Object.getOwnPropertyDescriptor(m, k);
7
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
8
+ desc = { enumerable: true, get: function() { return m[k]; } };
9
+ }
10
+ Object.defineProperty(o, k2, desc);
11
+ }) : (function(o, m, k, k2) {
12
+ if (k2 === undefined) k2 = k;
13
+ o[k2] = m[k];
14
+ }));
15
+ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
16
+ Object.defineProperty(o, "default", { enumerable: true, value: v });
17
+ }) : function(o, v) {
18
+ o["default"] = v;
19
+ });
20
+ var __importStar = (this && this.__importStar) || (function () {
21
+ var ownKeys = function(o) {
22
+ ownKeys = Object.getOwnPropertyNames || function (o) {
23
+ var ar = [];
24
+ for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
25
+ return ar;
26
+ };
27
+ return ownKeys(o);
28
+ };
29
+ return function (mod) {
30
+ if (mod && mod.__esModule) return mod;
31
+ var result = {};
32
+ if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
33
+ __setModuleDefault(result, mod);
34
+ return result;
35
+ };
36
+ })();
4
37
  Object.defineProperty(exports, "__esModule", { value: true });
5
38
  exports.MicrocosmDashboardOverview = MicrocosmDashboardOverview;
6
39
  const jsx_runtime_1 = require("react/jsx-runtime");
@@ -8,14 +41,15 @@ const react_1 = require("react");
8
41
  const market_overview_bar_1 = require("./market-overview-bar");
9
42
  const quick_actions_1 = require("./quick-actions");
10
43
  const assets_summary_1 = require("./assets-summary");
11
- const price_chart_1 = require("./price-chart");
12
- const minting_stats_1 = require("./minting-stats");
13
- const mining_weight_1 = require("./mining-weight");
14
- const my_mining_1 = require("./my-mining");
15
- const ecosystem_stats_1 = require("./ecosystem-stats");
16
- const mcc_token_stats_1 = require("./mcc-token-stats");
17
- const mcd_stats_1 = require("./mcd-stats");
18
- const lock_periods_1 = require("./lock-periods");
44
+ // Lazy load below-fold components — they won't execute until rendered
45
+ const MicrocosmPriceChart = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./price-chart'))).then(m => ({ default: m.MicrocosmPriceChart })));
46
+ const MicrocosmMyMining = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./my-mining'))).then(m => ({ default: m.MicrocosmMyMining })));
47
+ const MicrocosmMiningWeight = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./mining-weight'))).then(m => ({ default: m.MicrocosmMiningWeight })));
48
+ const MicrocosmMintingStats = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./minting-stats'))).then(m => ({ default: m.MicrocosmMintingStats })));
49
+ const MicrocosmEcosystemStats = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./ecosystem-stats'))).then(m => ({ default: m.MicrocosmEcosystemStats })));
50
+ const MicrocosmMCCTokenStats = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./mcc-token-stats'))).then(m => ({ default: m.MicrocosmMCCTokenStats })));
51
+ const MicrocosmMCDStats = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./mcd-stats'))).then(m => ({ default: m.MicrocosmMCDStats })));
52
+ const MicrocosmLockPeriods = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./lock-periods'))).then(m => ({ default: m.MicrocosmLockPeriods })));
19
53
  class SafeRender extends react_1.Component {
20
54
  constructor() {
21
55
  super(...arguments);
@@ -24,6 +58,38 @@ class SafeRender extends react_1.Component {
24
58
  static getDerivedStateFromError() { return { hasError: true }; }
25
59
  render() { return this.state.hasError ? null : this.props.children; }
26
60
  }
61
+ /** Skeleton placeholder matching card dimensions */
62
+ function CardSkeleton({ height = 'h-48' }) {
63
+ return ((0, jsx_runtime_1.jsx)("div", { className: `bg-neutral-900 border border-neutral-700 rounded-lg ${height} animate-pulse`, children: (0, jsx_runtime_1.jsxs)("div", { className: "p-6 space-y-3", children: [(0, jsx_runtime_1.jsx)("div", { className: "h-3 bg-neutral-800 rounded w-24" }), (0, jsx_runtime_1.jsx)("div", { className: "h-6 bg-neutral-800 rounded w-40" }), (0, jsx_runtime_1.jsx)("div", { className: "h-4 bg-neutral-800 rounded w-32" })] }) }));
64
+ }
65
+ function ChartSkeleton() {
66
+ return ((0, jsx_runtime_1.jsx)("div", { className: "bg-neutral-900 border border-neutral-700 rounded-lg h-[420px] animate-pulse", children: (0, jsx_runtime_1.jsxs)("div", { className: "p-6 space-y-3", children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex gap-1", children: [(0, jsx_runtime_1.jsx)("div", { className: "h-6 bg-neutral-800 rounded w-8" }), (0, jsx_runtime_1.jsx)("div", { className: "h-6 bg-neutral-800 rounded w-8" }), (0, jsx_runtime_1.jsx)("div", { className: "h-6 bg-neutral-800 rounded w-10" })] }), (0, jsx_runtime_1.jsx)("div", { className: "h-[340px] bg-neutral-800 rounded" })] }) }));
67
+ }
68
+ /** Renders children only when the container enters the viewport */
69
+ function LazySection({ children, fallback }) {
70
+ const [visible, setVisible] = (0, react_1.useState)(false);
71
+ const ref = (0, react_1.useRef)(null);
72
+ (0, react_1.useEffect)(() => {
73
+ const el = ref.current;
74
+ if (!el)
75
+ return;
76
+ // If IntersectionObserver not supported, render immediately
77
+ if (typeof IntersectionObserver === 'undefined') {
78
+ setVisible(true);
79
+ return;
80
+ }
81
+ const observer = new IntersectionObserver(([entry]) => {
82
+ if (entry.isIntersecting) {
83
+ setVisible(true);
84
+ observer.disconnect();
85
+ }
86
+ }, { rootMargin: '200px' } // Start loading 200px before entering viewport
87
+ );
88
+ observer.observe(el);
89
+ return () => observer.disconnect();
90
+ }, []);
91
+ return ((0, jsx_runtime_1.jsx)("div", { ref: ref, children: visible ? children : fallback }));
92
+ }
27
93
  function MicrocosmDashboardOverview({ basePath = '', onNavigate, showHeader = true, headerText = 'SHARED NETWORK · SHARED FUTURE', }) {
28
- return ((0, jsx_runtime_1.jsxs)("div", { className: "max-w-7xl mx-auto font-mono p-6 space-y-6", children: [showHeader && ((0, jsx_runtime_1.jsx)("div", { className: "text-center", children: (0, jsx_runtime_1.jsx)("h1", { className: "text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold tracking-tight text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-cyan-200", children: headerText }) })), (0, jsx_runtime_1.jsx)(SafeRender, { children: (0, jsx_runtime_1.jsx)(market_overview_bar_1.MicrocosmMarketBar, {}) }), (0, jsx_runtime_1.jsx)(SafeRender, { children: (0, jsx_runtime_1.jsx)(quick_actions_1.MicrocosmQuickActions, { basePath: basePath, onNavigate: onNavigate }) }), (0, jsx_runtime_1.jsx)(SafeRender, { children: (0, jsx_runtime_1.jsx)(assets_summary_1.MicrocosmAssetsSummary, { basePath: basePath, onNavigate: onNavigate }) }), (0, jsx_runtime_1.jsx)(SafeRender, { children: (0, jsx_runtime_1.jsx)(price_chart_1.MicrocosmPriceChart, {}) }), (0, jsx_runtime_1.jsxs)("div", { className: "grid lg:grid-cols-2 gap-6", children: [(0, jsx_runtime_1.jsx)(SafeRender, { children: (0, jsx_runtime_1.jsx)(my_mining_1.MicrocosmMyMining, { detailsPath: `${basePath}/mcc/mining`, onNavigate: onNavigate }) }), (0, jsx_runtime_1.jsx)(SafeRender, { children: (0, jsx_runtime_1.jsx)(mining_weight_1.MicrocosmMiningWeight, {}) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "grid lg:grid-cols-2 gap-6", children: [(0, jsx_runtime_1.jsx)(SafeRender, { children: (0, jsx_runtime_1.jsx)(minting_stats_1.MicrocosmMintingStats, {}) }), (0, jsx_runtime_1.jsx)(SafeRender, { children: (0, jsx_runtime_1.jsx)(ecosystem_stats_1.MicrocosmEcosystemStats, {}) })] }), (0, jsx_runtime_1.jsxs)("div", { className: "grid lg:grid-cols-2 gap-6", children: [(0, jsx_runtime_1.jsx)(SafeRender, { children: (0, jsx_runtime_1.jsx)(mcc_token_stats_1.MicrocosmMCCTokenStats, {}) }), (0, jsx_runtime_1.jsx)(SafeRender, { children: (0, jsx_runtime_1.jsx)(mcd_stats_1.MicrocosmMCDStats, {}) })] }), (0, jsx_runtime_1.jsx)(SafeRender, { children: (0, jsx_runtime_1.jsx)(lock_periods_1.MicrocosmLockPeriods, {}) })] }));
94
+ return ((0, jsx_runtime_1.jsxs)("div", { className: "max-w-7xl mx-auto font-mono p-6 space-y-6", children: [showHeader && ((0, jsx_runtime_1.jsx)("div", { className: "text-center", children: (0, jsx_runtime_1.jsx)("h1", { className: "text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-bold tracking-tight text-transparent bg-clip-text bg-gradient-to-r from-cyan-400 to-cyan-200", children: headerText }) })), (0, jsx_runtime_1.jsx)(SafeRender, { children: (0, jsx_runtime_1.jsx)(market_overview_bar_1.MicrocosmMarketBar, {}) }), (0, jsx_runtime_1.jsx)(SafeRender, { children: (0, jsx_runtime_1.jsx)(quick_actions_1.MicrocosmQuickActions, { basePath: basePath, onNavigate: onNavigate }) }), (0, jsx_runtime_1.jsx)(SafeRender, { children: (0, jsx_runtime_1.jsx)(assets_summary_1.MicrocosmAssetsSummary, { basePath: basePath, onNavigate: onNavigate }) }), (0, jsx_runtime_1.jsx)(SafeRender, { children: (0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: (0, jsx_runtime_1.jsx)(ChartSkeleton, {}), children: (0, jsx_runtime_1.jsx)(MicrocosmPriceChart, {}) }) }), (0, jsx_runtime_1.jsx)(LazySection, { fallback: (0, jsx_runtime_1.jsxs)("div", { className: "grid lg:grid-cols-2 gap-6", children: [(0, jsx_runtime_1.jsx)(CardSkeleton, { height: "h-56" }), (0, jsx_runtime_1.jsx)(CardSkeleton, { height: "h-56" })] }), children: (0, jsx_runtime_1.jsxs)("div", { className: "grid lg:grid-cols-2 gap-6", children: [(0, jsx_runtime_1.jsx)(SafeRender, { children: (0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: (0, jsx_runtime_1.jsx)(CardSkeleton, { height: "h-56" }), children: (0, jsx_runtime_1.jsx)(MicrocosmMyMining, { detailsPath: `${basePath}/mcc/mining`, onNavigate: onNavigate }) }) }), (0, jsx_runtime_1.jsx)(SafeRender, { children: (0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: (0, jsx_runtime_1.jsx)(CardSkeleton, { height: "h-56" }), children: (0, jsx_runtime_1.jsx)(MicrocosmMiningWeight, {}) }) })] }) }), (0, jsx_runtime_1.jsx)(LazySection, { fallback: (0, jsx_runtime_1.jsxs)("div", { className: "grid lg:grid-cols-2 gap-6", children: [(0, jsx_runtime_1.jsx)(CardSkeleton, { height: "h-56" }), (0, jsx_runtime_1.jsx)(CardSkeleton, { height: "h-56" })] }), children: (0, jsx_runtime_1.jsxs)("div", { className: "grid lg:grid-cols-2 gap-6", children: [(0, jsx_runtime_1.jsx)(SafeRender, { children: (0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: (0, jsx_runtime_1.jsx)(CardSkeleton, { height: "h-56" }), children: (0, jsx_runtime_1.jsx)(MicrocosmMintingStats, {}) }) }), (0, jsx_runtime_1.jsx)(SafeRender, { children: (0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: (0, jsx_runtime_1.jsx)(CardSkeleton, { height: "h-56" }), children: (0, jsx_runtime_1.jsx)(MicrocosmEcosystemStats, {}) }) })] }) }), (0, jsx_runtime_1.jsx)(LazySection, { fallback: (0, jsx_runtime_1.jsxs)("div", { className: "grid lg:grid-cols-2 gap-6", children: [(0, jsx_runtime_1.jsx)(CardSkeleton, {}), (0, jsx_runtime_1.jsx)(CardSkeleton, {})] }), children: (0, jsx_runtime_1.jsxs)("div", { className: "grid lg:grid-cols-2 gap-6", children: [(0, jsx_runtime_1.jsx)(SafeRender, { children: (0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: (0, jsx_runtime_1.jsx)(CardSkeleton, {}), children: (0, jsx_runtime_1.jsx)(MicrocosmMCCTokenStats, {}) }) }), (0, jsx_runtime_1.jsx)(SafeRender, { children: (0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: (0, jsx_runtime_1.jsx)(CardSkeleton, {}), children: (0, jsx_runtime_1.jsx)(MicrocosmMCDStats, {}) }) })] }) }), (0, jsx_runtime_1.jsx)(LazySection, { fallback: (0, jsx_runtime_1.jsx)(CardSkeleton, {}), children: (0, jsx_runtime_1.jsx)(SafeRender, { children: (0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: (0, jsx_runtime_1.jsx)(CardSkeleton, {}), children: (0, jsx_runtime_1.jsx)(MicrocosmLockPeriods, {}) }) }) })] }));
29
95
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@microcosmmoney/portal-react",
3
- "version": "2.2.0",
3
+ "version": "2.2.1",
4
4
  "description": "Microcosm Portal UI components for React/Next.js",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",