keynesol-shared 1.0.3 → 1.0.4

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.
Files changed (28) hide show
  1. package/dist/components/Common/ErrorBoundary.js +49 -61
  2. package/dist/components/Common/ErrorMessage.js +13 -34
  3. package/dist/components/Common/Loading.js +15 -29
  4. package/dist/components/Common/LoadingIndicator.js +21 -72
  5. package/dist/components/Common/ProgramStatus.js +34 -15
  6. package/dist/components/Common/Skeleton.js +17 -53
  7. package/dist/components/Common/SkeletonScreen.js +27 -79
  8. package/dist/components/Wallet/TransactionStatus.js +22 -71
  9. package/dist/components/Wallet/WalletBalance.js +90 -61
  10. package/dist/components/Wallet/WalletButton.js +28 -41
  11. package/dist/components/Wallet/WalletConnectionModal.js +62 -135
  12. package/dist/components/Wallet/WalletProvider.js +35 -23
  13. package/dist/hooks/useCache.js +94 -40
  14. package/dist/hooks/usePolling.js +64 -25
  15. package/dist/hooks/useProgram.js +93 -37
  16. package/dist/hooks/useTokenBalance.js +121 -59
  17. package/dist/hooks/useVaults.js +125 -72
  18. package/dist/services/reconciliationService.js +274 -156
  19. package/dist/services/syncService.js +233 -148
  20. package/dist/utils/cacheManager.js +160 -71
  21. package/dist/utils/errorHandler.js +138 -80
  22. package/dist/utils/performanceMonitor.js +136 -60
  23. package/dist/utils/rpcRetry.js +93 -24
  24. package/dist/utils/supabase.js +8 -8
  25. package/dist/utils/toastService.js +30 -29
  26. package/dist/utils/tokenUtils.js +6 -6
  27. package/dist/utils/validation.js +8 -7
  28. package/package.json +1 -1
package/dist/components/Common/ErrorBoundary.js CHANGED
@@ -1,100 +1,88 @@
1
1
  "use strict";
2
+ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
3
+ if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
4
+ return cooked;
5
+ };
6
+ var __extends = (this && this.__extends) || (function () {
7
+ var extendStatics = function (d, b) {
8
+ extendStatics = Object.setPrototypeOf ||
9
+ ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
10
+ function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
11
+ return extendStatics(d, b);
12
+ };
13
+ return function (d, b) {
14
+ if (typeof b !== "function" && b !== null)
15
+ throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
16
+ extendStatics(d, b);
17
+ function __() { this.constructor = d; }
18
+ d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
19
+ };
20
+ })();
2
21
  var __importDefault = (this && this.__importDefault) || function (mod) {
3
22
  return (mod && mod.__esModule) ? mod : { "default": mod };
4
23
  };
5
24
  Object.defineProperty(exports, "__esModule", { value: true });
6
25
  exports.ErrorBoundary = void 0;
7
- const jsx_runtime_1 = require("react/jsx-runtime");
26
+ var jsx_runtime_1 = require("react/jsx-runtime");
8
27
  /**
9
28
  * ErrorBoundary Component
10
29
  * Requirements: 11.1 - Global error handling with React error boundaries
11
30
  */
12
- const react_1 = require("react");
13
- const styled_components_1 = __importDefault(require("styled-components"));
14
- const ErrorMessage_1 = require("./ErrorMessage");
15
- const Container = styled_components_1.default.div `
16
- padding: var(--spacing-xl, 1.5rem);
17
- display: flex;
18
- flex-direction: column;
19
- align-items: center;
20
- justify-content: center;
21
- min-height: 400px;
22
- `;
23
- const ErrorTitle = styled_components_1.default.h2 `
24
- font-size: 1.5rem;
25
- font-weight: 700;
26
- color: var(--color-error, #dc3545);
27
- margin-bottom: var(--spacing-md, 1rem);
28
- `;
29
- const ErrorDetails = styled_components_1.default.details `
30
- margin-top: var(--spacing-lg, 1.5rem);
31
- width: 100%;
32
- max-width: 800px;
33
- `;
34
- const ErrorSummary = styled_components_1.default.summary `
35
- cursor: pointer;
36
- color: var(--color-text-secondary, #6b7280);
37
- font-size: 0.875rem;
38
- margin-bottom: var(--spacing-md, 1rem);
39
-
40
- &:hover {
41
- color: var(--color-text, #1a1a1a);
42
- }
43
- `;
44
- const ErrorCode = styled_components_1.default.pre `
45
- background: var(--color-background, #ffffff);
46
- border: 1px solid var(--color-border, #e5e7eb);
47
- border-radius: var(--border-radius-md, 0.375rem);
48
- padding: var(--spacing-md, 1rem);
49
- overflow-x: auto;
50
- font-size: 0.75rem;
51
- color: var(--color-text-secondary, #6b7280);
52
- max-height: 300px;
53
- overflow-y: auto;
54
- `;
55
- class ErrorBoundary extends react_1.Component {
56
- constructor(props) {
57
- super(props);
58
- this.handleReset = () => {
59
- this.setState({
31
+ var react_1 = require("react");
32
+ var styled_components_1 = __importDefault(require("styled-components"));
33
+ var ErrorMessage_1 = require("./ErrorMessage");
34
+ var Container = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n padding: var(--spacing-xl, 1.5rem);\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n min-height: 400px;\n"], ["\n padding: var(--spacing-xl, 1.5rem);\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n min-height: 400px;\n"])));
35
+ var ErrorTitle = styled_components_1.default.h2(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n font-size: 1.5rem;\n font-weight: 700;\n color: var(--color-error, #dc3545);\n margin-bottom: var(--spacing-md, 1rem);\n"], ["\n font-size: 1.5rem;\n font-weight: 700;\n color: var(--color-error, #dc3545);\n margin-bottom: var(--spacing-md, 1rem);\n"])));
36
+ var ErrorDetails = styled_components_1.default.details(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n margin-top: var(--spacing-lg, 1.5rem);\n width: 100%;\n max-width: 800px;\n"], ["\n margin-top: var(--spacing-lg, 1.5rem);\n width: 100%;\n max-width: 800px;\n"])));
37
+ var ErrorSummary = styled_components_1.default.summary(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n cursor: pointer;\n color: var(--color-text-secondary, #6b7280);\n font-size: 0.875rem;\n margin-bottom: var(--spacing-md, 1rem);\n \n &:hover {\n color: var(--color-text, #1a1a1a);\n }\n"], ["\n cursor: pointer;\n color: var(--color-text-secondary, #6b7280);\n font-size: 0.875rem;\n margin-bottom: var(--spacing-md, 1rem);\n \n &:hover {\n color: var(--color-text, #1a1a1a);\n }\n"])));
38
+ var ErrorCode = styled_components_1.default.pre(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n background: var(--color-background, #ffffff);\n border: 1px solid var(--color-border, #e5e7eb);\n border-radius: var(--border-radius-md, 0.375rem);\n padding: var(--spacing-md, 1rem);\n overflow-x: auto;\n font-size: 0.75rem;\n color: var(--color-text-secondary, #6b7280);\n max-height: 300px;\n overflow-y: auto;\n"], ["\n background: var(--color-background, #ffffff);\n border: 1px solid var(--color-border, #e5e7eb);\n border-radius: var(--border-radius-md, 0.375rem);\n padding: var(--spacing-md, 1rem);\n overflow-x: auto;\n font-size: 0.75rem;\n color: var(--color-text-secondary, #6b7280);\n max-height: 300px;\n overflow-y: auto;\n"])));
39
+ var ErrorBoundary = /** @class */ (function (_super) {
40
+ __extends(ErrorBoundary, _super);
41
+ function ErrorBoundary(props) {
42
+ var _this = _super.call(this, props) || this;
43
+ _this.handleReset = function () {
44
+ _this.setState({
60
45
  hasError: false,
61
46
  error: null,
62
47
  errorInfo: null,
63
48
  });
64
49
  };
65
- this.state = {
50
+ _this.state = {
66
51
  hasError: false,
67
52
  error: null,
68
53
  errorInfo: null,
69
54
  };
55
+ return _this;
70
56
  }
71
- static getDerivedStateFromError(error) {
57
+ ErrorBoundary.getDerivedStateFromError = function (error) {
72
58
  return {
73
59
  hasError: true,
74
- error,
60
+ error: error,
75
61
  errorInfo: null,
76
62
  };
77
- }
78
- componentDidCatch(error, errorInfo) {
63
+ };
64
+ ErrorBoundary.prototype.componentDidCatch = function (error, errorInfo) {
79
65
  // Log error to console and monitoring service
80
66
  console.error('ErrorBoundary caught an error:', error, errorInfo);
81
67
  // TODO: Send to error monitoring service (e.g., Sentry)
82
68
  // logErrorToService(error, errorInfo);
83
69
  this.setState({
84
- error,
85
- errorInfo,
70
+ error: error,
71
+ errorInfo: errorInfo,
86
72
  });
87
- }
88
- render() {
73
+ };
74
+ ErrorBoundary.prototype.render = function () {
89
75
  var _a, _b, _c;
90
76
  if (this.state.hasError) {
91
77
  if (this.props.fallback) {
92
78
  return this.props.fallback;
93
79
  }
94
- const isDevelopment = typeof process !== 'undefined' && ((_a = process.env) === null || _a === void 0 ? void 0 : _a.NODE_ENV) === 'development';
80
+ var isDevelopment = typeof process !== 'undefined' && ((_a = process.env) === null || _a === void 0 ? void 0 : _a.NODE_ENV) === 'development';
95
81
  return ((0, jsx_runtime_1.jsxs)(Container, { children: [(0, jsx_runtime_1.jsx)(ErrorTitle, { children: "Something went wrong" }), (0, jsx_runtime_1.jsx)(ErrorMessage_1.ErrorMessage, { message: ((_b = this.state.error) === null || _b === void 0 ? void 0 : _b.message) || 'An unexpected error occurred', onRetry: this.handleReset }), isDevelopment && this.state.errorInfo && ((0, jsx_runtime_1.jsxs)(ErrorDetails, { children: [(0, jsx_runtime_1.jsx)(ErrorSummary, { children: "Error Details (Development Only)" }), (0, jsx_runtime_1.jsxs)(ErrorCode, { children: [(_c = this.state.error) === null || _c === void 0 ? void 0 : _c.toString(), this.state.errorInfo.componentStack] })] }))] }));
96
82
  }
97
83
  return this.props.children;
98
- }
99
- }
84
+ };
85
+ return ErrorBoundary;
86
+ }(react_1.Component));
100
87
  exports.ErrorBoundary = ErrorBoundary;
88
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;
package/dist/components/Common/ErrorMessage.js CHANGED
@@ -1,43 +1,22 @@
1
1
  "use strict";
2
+ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
3
+ if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
4
+ return cooked;
5
+ };
2
6
  var __importDefault = (this && this.__importDefault) || function (mod) {
3
7
  return (mod && mod.__esModule) ? mod : { "default": mod };
4
8
  };
5
9
  Object.defineProperty(exports, "__esModule", { value: true });
6
10
  exports.ErrorMessage = void 0;
7
- const jsx_runtime_1 = require("react/jsx-runtime");
8
- const styled_components_1 = __importDefault(require("styled-components"));
9
- const ErrorMessage = ({ message, onRetry }) => {
11
+ var jsx_runtime_1 = require("react/jsx-runtime");
12
+ var styled_components_1 = __importDefault(require("styled-components"));
13
+ var ErrorMessage = function (_a) {
14
+ var message = _a.message, onRetry = _a.onRetry;
10
15
  return ((0, jsx_runtime_1.jsxs)(Container, { children: [(0, jsx_runtime_1.jsx)(Icon, { children: "\u26A0\uFE0F" }), (0, jsx_runtime_1.jsx)(Message, { children: message }), onRetry && (0, jsx_runtime_1.jsx)(RetryButton, { onClick: onRetry, children: "Try Again" })] }));
11
16
  };
12
17
  exports.ErrorMessage = ErrorMessage;
13
- const Container = styled_components_1.default.div `
14
- background-color: rgba(239, 68, 68, 0.1);
15
- border: 1px solid var(--color-error, #dc3545);
16
- border-radius: var(--border-radius-lg, 0.5rem);
17
- padding: var(--spacing-xl, 1.5rem);
18
- text-align: center;
19
- `;
20
- const Icon = styled_components_1.default.div `
21
- font-size: 3rem;
22
- margin-bottom: var(--spacing-md, 1rem);
23
- `;
24
- const Message = styled_components_1.default.p `
25
- color: var(--color-error, #dc3545);
26
- font-size: 1rem;
27
- margin-bottom: var(--spacing-md, 1rem);
28
- `;
29
- const RetryButton = styled_components_1.default.button `
30
- background-color: var(--color-error, #dc3545);
31
- color: white;
32
- padding: var(--spacing-sm, 0.5rem) var(--spacing-lg, 1.5rem);
33
- border-radius: var(--border-radius-md, 0.375rem);
34
- font-weight: 600;
35
- transition: all 0.3s ease;
36
- border: none;
37
- cursor: pointer;
38
-
39
- &:hover {
40
- transform: translateY(-2px);
41
- box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
42
- }
43
- `;
18
+ var Container = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n background-color: rgba(239, 68, 68, 0.1);\n border: 1px solid var(--color-error, #dc3545);\n border-radius: var(--border-radius-lg, 0.5rem);\n padding: var(--spacing-xl, 1.5rem);\n text-align: center;\n"], ["\n background-color: rgba(239, 68, 68, 0.1);\n border: 1px solid var(--color-error, #dc3545);\n border-radius: var(--border-radius-lg, 0.5rem);\n padding: var(--spacing-xl, 1.5rem);\n text-align: center;\n"])));
19
+ var Icon = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n font-size: 3rem;\n margin-bottom: var(--spacing-md, 1rem);\n"], ["\n font-size: 3rem;\n margin-bottom: var(--spacing-md, 1rem);\n"])));
20
+ var Message = styled_components_1.default.p(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n color: var(--color-error, #dc3545);\n font-size: 1rem;\n margin-bottom: var(--spacing-md, 1rem);\n"], ["\n color: var(--color-error, #dc3545);\n font-size: 1rem;\n margin-bottom: var(--spacing-md, 1rem);\n"])));
21
+ var RetryButton = styled_components_1.default.button(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n background-color: var(--color-error, #dc3545);\n color: white;\n padding: var(--spacing-sm, 0.5rem) var(--spacing-lg, 1.5rem);\n border-radius: var(--border-radius-md, 0.375rem);\n font-weight: 600;\n transition: all 0.3s ease;\n border: none;\n cursor: pointer;\n\n &:hover {\n transform: translateY(-2px);\n box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);\n }\n"], ["\n background-color: var(--color-error, #dc3545);\n color: white;\n padding: var(--spacing-sm, 0.5rem) var(--spacing-lg, 1.5rem);\n border-radius: var(--border-radius-md, 0.375rem);\n font-weight: 600;\n transition: all 0.3s ease;\n border: none;\n cursor: pointer;\n\n &:hover {\n transform: translateY(-2px);\n box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);\n }\n"])));
22
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
package/dist/components/Common/Loading.js CHANGED
@@ -1,4 +1,8 @@
1
1
  "use strict";
2
+ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
3
+ if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
4
+ return cooked;
5
+ };
2
6
  var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
7
  if (k2 === undefined) k2 = k;
4
8
  var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -34,45 +38,27 @@ var __importStar = (this && this.__importStar) || (function () {
34
38
  })();
35
39
  Object.defineProperty(exports, "__esModule", { value: true });
36
40
  exports.Loading = void 0;
37
- const jsx_runtime_1 = require("react/jsx-runtime");
38
- const styled_components_1 = __importStar(require("styled-components"));
39
- const Loading = ({ size = 'medium', text }) => {
41
+ var jsx_runtime_1 = require("react/jsx-runtime");
42
+ var styled_components_1 = __importStar(require("styled-components"));
43
+ var Loading = function (_a) {
44
+ var _b = _a.size, size = _b === void 0 ? 'medium' : _b, text = _a.text;
40
45
  return ((0, jsx_runtime_1.jsxs)(Container, { children: [(0, jsx_runtime_1.jsx)(Spinner, { size: size }), text && (0, jsx_runtime_1.jsx)(LoadingText, { children: text })] }));
41
46
  };
42
47
  exports.Loading = Loading;
43
- const spin = (0, styled_components_1.keyframes) `
44
- to { transform: rotate(360deg); }
45
- `;
46
- const Container = styled_components_1.default.div `
47
- display: flex;
48
- flex-direction: column;
49
- align-items: center;
50
- justify-content: center;
51
- gap: var(--spacing-md, 1rem);
52
- padding: var(--spacing-xl, 1.5rem);
53
- `;
54
- const Spinner = styled_components_1.default.div `
55
- width: ${props => {
48
+ var spin = (0, styled_components_1.keyframes)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n to { transform: rotate(360deg); }\n"], ["\n to { transform: rotate(360deg); }\n"])));
49
+ var Container = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: var(--spacing-md, 1rem);\n padding: var(--spacing-xl, 1.5rem);\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: var(--spacing-md, 1rem);\n padding: var(--spacing-xl, 1.5rem);\n"])));
50
+ var Spinner = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n border: 4px solid var(--color-border, #e5e7eb);\n border-top-color: var(--color-primary, #6a8102);\n border-radius: 50%;\n animation: ", " 1s linear infinite;\n"], ["\n width: ", ";\n height: ", ";\n border: 4px solid var(--color-border, #e5e7eb);\n border-top-color: var(--color-primary, #6a8102);\n border-radius: 50%;\n animation: ", " 1s linear infinite;\n"])), function (props) {
56
51
  switch (props.size) {
57
52
  case 'small': return '24px';
58
53
  case 'large': return '64px';
59
54
  default: return '48px';
60
55
  }
61
- }};
62
- height: ${props => {
56
+ }, function (props) {
63
57
  switch (props.size) {
64
58
  case 'small': return '24px';
65
59
  case 'large': return '64px';
66
60
  default: return '48px';
67
61
  }
68
- }};
69
- border: 4px solid var(--color-border, #e5e7eb);
70
- border-top-color: var(--color-primary, #6a8102);
71
- border-radius: 50%;
72
- animation: ${spin} 1s linear infinite;
73
- `;
74
- const LoadingText = styled_components_1.default.p `
75
- color: var(--color-text-secondary, #6b7280);
76
- font-size: 1rem;
77
- margin: 0;
78
- `;
62
+ }, spin);
63
+ var LoadingText = styled_components_1.default.p(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n color: var(--color-text-secondary, #6b7280);\n font-size: 1rem;\n margin: 0;\n"], ["\n color: var(--color-text-secondary, #6b7280);\n font-size: 1rem;\n margin: 0;\n"])));
64
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
package/dist/components/Common/LoadingIndicator.js CHANGED
@@ -1,4 +1,8 @@
1
1
  "use strict";
2
+ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
3
+ if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
4
+ return cooked;
5
+ };
2
6
  var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
7
  if (k2 === undefined) k2 = k;
4
8
  var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -34,88 +38,32 @@ var __importStar = (this && this.__importStar) || (function () {
34
38
  })();
35
39
  Object.defineProperty(exports, "__esModule", { value: true });
36
40
  exports.LoadingIndicator = void 0;
37
- const jsx_runtime_1 = require("react/jsx-runtime");
38
- const styled_components_1 = __importStar(require("styled-components"));
39
- const spin = (0, styled_components_1.keyframes) `
40
- to { transform: rotate(360deg); }
41
- `;
42
- const dots = (0, styled_components_1.keyframes) `
43
- 0%, 20% {
44
- content: '.';
45
- }
46
- 40% {
47
- content: '..';
48
- }
49
- 60%, 100% {
50
- content: '...';
51
- }
52
- `;
53
- const Container = styled_components_1.default.div `
54
- display: flex;
55
- flex-direction: column;
56
- align-items: center;
57
- justify-content: center;
58
- gap: var(--spacing-md, 1rem);
59
- padding: var(--spacing-lg, 1.5rem);
60
- `;
61
- const Spinner = styled_components_1.default.div `
62
- width: ${props => {
41
+ var jsx_runtime_1 = require("react/jsx-runtime");
42
+ var styled_components_1 = __importStar(require("styled-components"));
43
+ var spin = (0, styled_components_1.keyframes)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n to { transform: rotate(360deg); }\n"], ["\n to { transform: rotate(360deg); }\n"])));
44
+ var dots = (0, styled_components_1.keyframes)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n 0%, 20% {\n content: '.';\n }\n 40% {\n content: '..';\n }\n 60%, 100% {\n content: '...';\n }\n"], ["\n 0%, 20% {\n content: '.';\n }\n 40% {\n content: '..';\n }\n 60%, 100% {\n content: '...';\n }\n"])));
45
+ var Container = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: var(--spacing-md, 1rem);\n padding: var(--spacing-lg, 1.5rem);\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: var(--spacing-md, 1rem);\n padding: var(--spacing-lg, 1.5rem);\n"])));
46
+ var Spinner = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n border: 4px solid var(--color-border, #e5e7eb);\n border-top-color: var(--color-primary, #6a8102);\n border-radius: 50%;\n animation: ", " 1s linear infinite;\n"], ["\n width: ", ";\n height: ", ";\n border: 4px solid var(--color-border, #e5e7eb);\n border-top-color: var(--color-primary, #6a8102);\n border-radius: 50%;\n animation: ", " 1s linear infinite;\n"])), function (props) {
63
47
  switch (props.size) {
64
48
  case 'small': return '24px';
65
49
  case 'large': return '64px';
66
50
  default: return '48px';
67
51
  }
68
- }};
69
- height: ${props => {
52
+ }, function (props) {
70
53
  switch (props.size) {
71
54
  case 'small': return '24px';
72
55
  case 'large': return '64px';
73
56
  default: return '48px';
74
57
  }
75
- }};
76
- border: 4px solid var(--color-border, #e5e7eb);
77
- border-top-color: var(--color-primary, #6a8102);
78
- border-radius: 50%;
79
- animation: ${spin} 1s linear infinite;
80
- `;
81
- const ProgressBarContainer = styled_components_1.default.div `
82
- width: 100%;
83
- max-width: 300px;
84
- height: 8px;
85
- background: var(--color-border, #e5e7eb);
86
- border-radius: var(--border-radius-md, 0.375rem);
87
- overflow: hidden;
88
- `;
89
- const ProgressBar = styled_components_1.default.div `
90
- height: 100%;
91
- width: ${props => props.progress}%;
92
- background: linear-gradient(90deg, var(--color-primary, #6a8102), var(--color-secondary, #ffc107));
93
- border-radius: var(--border-radius-md, 0.375rem);
94
- transition: width 0.3s ease;
95
- `;
96
- const Dots = styled_components_1.default.div `
97
- font-size: 1.5rem;
98
- color: var(--color-primary, #6a8102);
99
-
100
- &::after {
101
- content: '.';
102
- animation: ${dots} 1.5s steps(4, end) infinite;
103
- }
104
- `;
105
- const Message = styled_components_1.default.p `
106
- color: var(--color-text-secondary, #6b7280);
107
- font-size: 0.875rem;
108
- margin: 0;
109
- text-align: center;
110
- `;
111
- const ProgressText = styled_components_1.default.span `
112
- color: var(--color-text-secondary, #6b7280);
113
- font-size: 0.75rem;
114
- font-weight: 600;
115
- margin-top: var(--spacing-xs, 0.25rem);
116
- `;
117
- const LoadingIndicator = ({ type, size = 'medium', message, progress, }) => {
118
- const renderIndicator = () => {
58
+ }, spin);
59
+ var ProgressBarContainer = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n width: 100%;\n max-width: 300px;\n height: 8px;\n background: var(--color-border, #e5e7eb);\n border-radius: var(--border-radius-md, 0.375rem);\n overflow: hidden;\n"], ["\n width: 100%;\n max-width: 300px;\n height: 8px;\n background: var(--color-border, #e5e7eb);\n border-radius: var(--border-radius-md, 0.375rem);\n overflow: hidden;\n"])));
60
+ var ProgressBar = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n height: 100%;\n width: ", "%;\n background: linear-gradient(90deg, var(--color-primary, #6a8102), var(--color-secondary, #ffc107));\n border-radius: var(--border-radius-md, 0.375rem);\n transition: width 0.3s ease;\n"], ["\n height: 100%;\n width: ", "%;\n background: linear-gradient(90deg, var(--color-primary, #6a8102), var(--color-secondary, #ffc107));\n border-radius: var(--border-radius-md, 0.375rem);\n transition: width 0.3s ease;\n"])), function (props) { return props.progress; });
61
+ var Dots = styled_components_1.default.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n font-size: 1.5rem;\n color: var(--color-primary, #6a8102);\n \n &::after {\n content: '.';\n animation: ", " 1.5s steps(4, end) infinite;\n }\n"], ["\n font-size: 1.5rem;\n color: var(--color-primary, #6a8102);\n \n &::after {\n content: '.';\n animation: ", " 1.5s steps(4, end) infinite;\n }\n"])), dots);
62
+ var Message = styled_components_1.default.p(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n color: var(--color-text-secondary, #6b7280);\n font-size: 0.875rem;\n margin: 0;\n text-align: center;\n"], ["\n color: var(--color-text-secondary, #6b7280);\n font-size: 0.875rem;\n margin: 0;\n text-align: center;\n"])));
63
+ var ProgressText = styled_components_1.default.span(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n color: var(--color-text-secondary, #6b7280);\n font-size: 0.75rem;\n font-weight: 600;\n margin-top: var(--spacing-xs, 0.25rem);\n"], ["\n color: var(--color-text-secondary, #6b7280);\n font-size: 0.75rem;\n font-weight: 600;\n margin-top: var(--spacing-xs, 0.25rem);\n"])));
64
+ var LoadingIndicator = function (_a) {
65
+ var type = _a.type, _b = _a.size, size = _b === void 0 ? 'medium' : _b, message = _a.message, progress = _a.progress;
66
+ var renderIndicator = function () {
119
67
  switch (type) {
120
68
  case 'spinner':
121
69
  return (0, jsx_runtime_1.jsx)(Spinner, { size: size });
@@ -130,3 +78,4 @@ const LoadingIndicator = ({ type, size = 'medium', message, progress, }) => {
130
78
  return ((0, jsx_runtime_1.jsxs)(Container, { children: [renderIndicator(), message && (0, jsx_runtime_1.jsx)(Message, { children: message })] }));
131
79
  };
132
80
  exports.LoadingIndicator = LoadingIndicator;
81
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;
package/dist/components/Common/ProgramStatus.js CHANGED
@@ -1,4 +1,8 @@
1
1
  "use strict";
2
+ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
3
+ if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
4
+ return cooked;
5
+ };
2
6
  var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
7
  if (k2 === undefined) k2 = k;
4
8
  var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -32,24 +36,40 @@ var __importStar = (this && this.__importStar) || (function () {
32
36
  return result;
33
37
  };
34
38
  })();
39
+ var __read = (this && this.__read) || function (o, n) {
40
+ var m = typeof Symbol === "function" && o[Symbol.iterator];
41
+ if (!m) return o;
42
+ var i = m.call(o), r, ar = [], e;
43
+ try {
44
+ while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
45
+ }
46
+ catch (error) { e = { error: error }; }
47
+ finally {
48
+ try {
49
+ if (r && !r.done && (m = i["return"])) m.call(i);
50
+ }
51
+ finally { if (e) throw e.error; }
52
+ }
53
+ return ar;
54
+ };
35
55
  var __importDefault = (this && this.__importDefault) || function (mod) {
36
56
  return (mod && mod.__esModule) ? mod : { "default": mod };
37
57
  };
38
58
  Object.defineProperty(exports, "__esModule", { value: true });
39
59
  exports.ProgramStatus = void 0;
40
- const jsx_runtime_1 = require("react/jsx-runtime");
41
- const react_1 = __importStar(require("react"));
42
- const styled_components_1 = __importDefault(require("styled-components"));
43
- const useProgram_1 = require("../../hooks/useProgram");
44
- const ErrorMessage_1 = require("./ErrorMessage");
45
- const react_hot_toast_1 = __importDefault(require("react-hot-toast"));
46
- const ProgramStatus = () => {
47
- const { program, idl, idlError, programId } = (0, useProgram_1.useProgram)();
48
- const [showError, setShowError] = react_1.default.useState(false);
49
- (0, react_1.useEffect)(() => {
60
+ var jsx_runtime_1 = require("react/jsx-runtime");
61
+ var react_1 = __importStar(require("react"));
62
+ var styled_components_1 = __importDefault(require("styled-components"));
63
+ var useProgram_1 = require("../../hooks/useProgram");
64
+ var ErrorMessage_1 = require("./ErrorMessage");
65
+ var react_hot_toast_1 = __importDefault(require("react-hot-toast"));
66
+ var ProgramStatus = function () {
67
+ var _a = (0, useProgram_1.useProgram)(), program = _a.program, idl = _a.idl, idlError = _a.idlError, programId = _a.programId;
68
+ var _b = __read(react_1.default.useState(false), 2), showError = _b[0], setShowError = _b[1];
69
+ (0, react_1.useEffect)(function () {
50
70
  if (idlError) {
51
71
  setShowError(true);
52
- react_hot_toast_1.default.error(`Failed to load program: ${idlError}`, {
72
+ react_hot_toast_1.default.error("Failed to load program: ".concat(idlError), {
53
73
  duration: 5000,
54
74
  });
55
75
  }
@@ -58,9 +78,8 @@ const ProgramStatus = () => {
58
78
  if (!idlError) {
59
79
  return null;
60
80
  }
61
- return ((0, jsx_runtime_1.jsx)(Container, { children: (0, jsx_runtime_1.jsx)(ErrorMessage_1.ErrorMessage, { message: `Failed to load program contract. Please refresh the page. Error: ${idlError}`, onRetry: () => window.location.reload() }) }));
81
+ return ((0, jsx_runtime_1.jsx)(Container, { children: (0, jsx_runtime_1.jsx)(ErrorMessage_1.ErrorMessage, { message: "Failed to load program contract. Please refresh the page. Error: ".concat(idlError), onRetry: function () { return window.location.reload(); } }) }));
62
82
  };
63
83
  exports.ProgramStatus = ProgramStatus;
64
- const Container = styled_components_1.default.div `
65
- margin: var(--spacing-md, 1rem) 0;
66
- `;
84
+ var Container = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n margin: var(--spacing-md, 1rem) 0;\n"], ["\n margin: var(--spacing-md, 1rem) 0;\n"])));
85
+ var templateObject_1;
package/dist/components/Common/Skeleton.js CHANGED
@@ -1,4 +1,8 @@
1
1
  "use strict";
2
+ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
3
+ if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
4
+ return cooked;
5
+ };
2
6
  var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
7
  if (k2 === undefined) k2 = k;
4
8
  var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -34,59 +38,19 @@ var __importStar = (this && this.__importStar) || (function () {
34
38
  })();
35
39
  Object.defineProperty(exports, "__esModule", { value: true });
36
40
  exports.ProfileSkeleton = exports.StatsSkeleton = exports.VaultCardSkeleton = exports.SkeletonAvatar = exports.SkeletonButton = exports.SkeletonTitle = exports.SkeletonText = exports.SkeletonCard = void 0;
37
- const jsx_runtime_1 = require("react/jsx-runtime");
38
- const styled_components_1 = __importStar(require("styled-components"));
39
- const shimmer = (0, styled_components_1.keyframes) `
40
- 0% {
41
- background-position: -1000px 0;
42
- }
43
- 100% {
44
- background-position: 1000px 0;
45
- }
46
- `;
47
- const SkeletonBase = styled_components_1.default.div `
48
- background: linear-gradient(
49
- 90deg,
50
- var(--color-surface, #f9fafb) 0%,
51
- var(--color-border, #e5e7eb) 50%,
52
- var(--color-surface, #f9fafb) 100%
53
- );
54
- background-size: 1000px 100%;
55
- animation: ${shimmer} 2s infinite;
56
- border-radius: var(--border-radius-md, 0.375rem);
57
- width: ${props => props.width || '100%'};
58
- height: ${props => props.height || '20px'};
59
- `;
60
- exports.SkeletonCard = (0, styled_components_1.default)(SkeletonBase) `
61
- height: 200px;
62
- margin-bottom: var(--spacing-md, 1rem);
63
- `;
64
- exports.SkeletonText = (0, styled_components_1.default)(SkeletonBase) `
65
- height: 16px;
66
- margin-bottom: var(--spacing-xs, 0.25rem);
67
-
68
- &:last-child {
69
- margin-bottom: 0;
70
- }
71
- `;
72
- exports.SkeletonTitle = (0, styled_components_1.default)(SkeletonBase) `
73
- height: 24px;
74
- width: 60%;
75
- margin-bottom: var(--spacing-md, 1rem);
76
- `;
77
- exports.SkeletonButton = (0, styled_components_1.default)(SkeletonBase) `
78
- height: 40px;
79
- width: 120px;
80
- border-radius: var(--border-radius-md, 0.375rem);
81
- `;
82
- exports.SkeletonAvatar = (0, styled_components_1.default)(SkeletonBase) `
83
- width: 64px;
84
- height: 64px;
85
- border-radius: 50%;
86
- `;
87
- const VaultCardSkeleton = () => ((0, jsx_runtime_1.jsx)(exports.SkeletonCard, {}));
41
+ var jsx_runtime_1 = require("react/jsx-runtime");
42
+ var styled_components_1 = __importStar(require("styled-components"));
43
+ var shimmer = (0, styled_components_1.keyframes)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n 0% {\n background-position: -1000px 0;\n }\n 100% {\n background-position: 1000px 0;\n }\n"], ["\n 0% {\n background-position: -1000px 0;\n }\n 100% {\n background-position: 1000px 0;\n }\n"])));
44
+ var SkeletonBase = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n background: linear-gradient(\n 90deg,\n var(--color-surface, #f9fafb) 0%,\n var(--color-border, #e5e7eb) 50%,\n var(--color-surface, #f9fafb) 100%\n );\n background-size: 1000px 100%;\n animation: ", " 2s infinite;\n border-radius: var(--border-radius-md, 0.375rem);\n width: ", ";\n height: ", ";\n"], ["\n background: linear-gradient(\n 90deg,\n var(--color-surface, #f9fafb) 0%,\n var(--color-border, #e5e7eb) 50%,\n var(--color-surface, #f9fafb) 100%\n );\n background-size: 1000px 100%;\n animation: ", " 2s infinite;\n border-radius: var(--border-radius-md, 0.375rem);\n width: ", ";\n height: ", ";\n"])), shimmer, function (props) { return props.width || '100%'; }, function (props) { return props.height || '20px'; });
45
+ exports.SkeletonCard = (0, styled_components_1.default)(SkeletonBase)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n height: 200px;\n margin-bottom: var(--spacing-md, 1rem);\n"], ["\n height: 200px;\n margin-bottom: var(--spacing-md, 1rem);\n"])));
46
+ exports.SkeletonText = (0, styled_components_1.default)(SkeletonBase)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n height: 16px;\n margin-bottom: var(--spacing-xs, 0.25rem);\n \n &:last-child {\n margin-bottom: 0;\n }\n"], ["\n height: 16px;\n margin-bottom: var(--spacing-xs, 0.25rem);\n \n &:last-child {\n margin-bottom: 0;\n }\n"])));
47
+ exports.SkeletonTitle = (0, styled_components_1.default)(SkeletonBase)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n height: 24px;\n width: 60%;\n margin-bottom: var(--spacing-md, 1rem);\n"], ["\n height: 24px;\n width: 60%;\n margin-bottom: var(--spacing-md, 1rem);\n"])));
48
+ exports.SkeletonButton = (0, styled_components_1.default)(SkeletonBase)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n height: 40px;\n width: 120px;\n border-radius: var(--border-radius-md, 0.375rem);\n"], ["\n height: 40px;\n width: 120px;\n border-radius: var(--border-radius-md, 0.375rem);\n"])));
49
+ exports.SkeletonAvatar = (0, styled_components_1.default)(SkeletonBase)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n width: 64px;\n height: 64px;\n border-radius: 50%;\n"], ["\n width: 64px;\n height: 64px;\n border-radius: 50%;\n"])));
50
+ var VaultCardSkeleton = function () { return ((0, jsx_runtime_1.jsx)(exports.SkeletonCard, {})); };
88
51
  exports.VaultCardSkeleton = VaultCardSkeleton;
89
- const StatsSkeleton = () => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(exports.SkeletonTitle, {}), (0, jsx_runtime_1.jsx)(exports.SkeletonText, { width: "100%" }), (0, jsx_runtime_1.jsx)(exports.SkeletonText, { width: "80%" }), (0, jsx_runtime_1.jsx)(exports.SkeletonText, { width: "90%" })] }));
52
+ var StatsSkeleton = function () { return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(exports.SkeletonTitle, {}), (0, jsx_runtime_1.jsx)(exports.SkeletonText, { width: "100%" }), (0, jsx_runtime_1.jsx)(exports.SkeletonText, { width: "80%" }), (0, jsx_runtime_1.jsx)(exports.SkeletonText, { width: "90%" })] })); };
90
53
  exports.StatsSkeleton = StatsSkeleton;
91
- const ProfileSkeleton = () => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(exports.SkeletonAvatar, { width: "80px", height: "80px" }), (0, jsx_runtime_1.jsx)(exports.SkeletonTitle, { width: "40%" }), (0, jsx_runtime_1.jsx)(exports.SkeletonText, { width: "60%" }), (0, jsx_runtime_1.jsx)(exports.SkeletonText, { width: "50%" })] }));
54
+ var ProfileSkeleton = function () { return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(exports.SkeletonAvatar, { width: "80px", height: "80px" }), (0, jsx_runtime_1.jsx)(exports.SkeletonTitle, { width: "40%" }), (0, jsx_runtime_1.jsx)(exports.SkeletonText, { width: "60%" }), (0, jsx_runtime_1.jsx)(exports.SkeletonText, { width: "50%" })] })); };
92
55
  exports.ProfileSkeleton = ProfileSkeleton;
56
+ var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;