@enclavemoney/enclave-wallet-sdk
Version:
A simple enclave wallet SDK for React applications
60 lines (59 loc) • 4.38 kB
JavaScript
"use strict";
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.toastStyles = exports.customToast = void 0;
var react_1 = __importDefault(require("react"));
var sonner_1 = require("sonner");
var lucide_react_1 = require("lucide-react");
var Spinner_1 = __importDefault(require("../Spinner"));
var ProcessingToastContent = function (_a) {
var title = _a.title;
return (react_1.default.createElement("div", { className: "toast-content processing" },
react_1.default.createElement(Spinner_1.default, null),
react_1.default.createElement("div", { className: "toast-text" },
react_1.default.createElement("div", { className: "toast-title" }, title))));
};
var SuccessToastContent = function (_a) {
var title = _a.title, action = _a.action;
return (react_1.default.createElement("div", { className: "toast-content success" },
react_1.default.createElement(lucide_react_1.CheckCircle, { size: 20, color: "#10B981", fill: "#10B981", stroke: "white", strokeWidth: 2 }),
react_1.default.createElement("div", { className: "toast-text" },
react_1.default.createElement("div", { className: "toast-title" }, title)),
action && (react_1.default.createElement("button", { className: "toast-action", onClick: action.onClick }, action.label))));
};
var ErrorToastContent = function (_a) {
var title = _a.title;
return (react_1.default.createElement("div", { className: "toast-content error" },
react_1.default.createElement(lucide_react_1.XCircle, { size: 20, color: "#EF4444", fill: "#EF4444", stroke: "white", strokeWidth: 2 }),
react_1.default.createElement("div", { className: "toast-text" },
react_1.default.createElement("div", { className: "toast-title" }, title))));
};
exports.customToast = {
processing: function (title, options) {
return sonner_1.toast.custom(function () { return react_1.default.createElement(ProcessingToastContent, { title: title }); }, __assign({ duration: Infinity }, options));
},
success: function (title, options) {
return sonner_1.toast.custom(function () { return react_1.default.createElement(SuccessToastContent, { title: title, action: options === null || options === void 0 ? void 0 : options.action }); }, __assign({ duration: 6000 }, options));
},
error: function (title, options) {
return sonner_1.toast.custom(function () { return react_1.default.createElement(ErrorToastContent, { title: title }); }, __assign({ duration: 5000 }, options));
},
dismiss: function (toastId) {
return sonner_1.toast.dismiss(toastId);
},
};
// CSS Styles (to be included in the component that uses these toasts)
exports.toastStyles = "\n .toast-content {\n display: flex;\n align-items: center;\n gap: 12px;\n padding: 12px 20px;\n border-radius: 50px;\n background: white;\n box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12), 0 4px 10px rgba(0, 0, 0, 0.08);\n border: 1px solid rgba(0, 0, 0, 0.08);\n min-height: 48px;\n width: fit-content;\n max-width: 420px;\n font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;\n }\n\n .toast-text {\n flex: 1;\n min-width: 0;\n }\n\n .toast-title {\n font-size: 15px;\n font-weight: 500;\n color: #1f2937;\n line-height: 1.4;\n }\n\n .toast-action {\n background: #3b82f6;\n color: white;\n border: none;\n border-radius: 20px;\n padding: 8px 16px;\n font-size: 13px;\n font-weight: 500;\n cursor: pointer;\n transition: background 0.2s ease;\n flex-shrink: 0;\n }\n\n .toast-action:hover {\n background: #2563eb;\n }\n\n /* Dark theme support */\n .dark .toast-content {\n background: #1f2937;\n border-color: rgba(255, 255, 255, 0.1);\n }\n\n .dark .toast-title {\n color: #f9fafb;\n }\n";