enclave-wallet-sdk
Version:
A simple enclave wallet SDK for React applications
105 lines (104 loc) • 5.16 kB
JavaScript
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var lucide_react_1 = require("lucide-react");
var react_1 = __importDefault(require("react"));
function MessagePopup(_a) {
var handleDone = _a.handleDone, type = _a.type, onTryAgain = _a.onTryAgain, onClose = _a.onClose, customContent = _a.customContent, transactionLink = _a.transactionLink;
// Placeholder values for demo
var recipient = "Akshay";
var address = "0xAb...eC9B";
var txLink = transactionLink || "#";
var handleClose = function () {
if (onClose) {
onClose();
}
else {
handleDone();
}
};
return (react_1.default.createElement("div", { style: {
position: "relative",
display: "flex",
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
maxWidth: 400,
gap: 24,
} },
type === "error" && (react_1.default.createElement("button", { onClick: handleClose, style: {
position: "absolute",
top: 18,
right: 18,
background: "none",
border: "none",
fontSize: 22,
cursor: "pointer",
color: "#888",
}, "aria-label": "Close" },
react_1.default.createElement(lucide_react_1.X, { size: 24 }))),
react_1.default.createElement("div", { style: {
background: type === "success" ? "#ECFDF3" : "#FEF7F7",
borderRadius: 100,
padding: 12,
} },
react_1.default.createElement("div", { style: {
background: type === "success" ? "#D1FADF" : "#FBDEDE",
borderRadius: 100,
padding: 12,
} }, type === "success" ? (react_1.default.createElement(lucide_react_1.CircleCheck, { size: 36, color: "#0BBA68" })) : (react_1.default.createElement(lucide_react_1.CircleX, { size: 36, color: "#FF394A" })))),
customContent ? (customContent) : (react_1.default.createElement("div", { style: { display: "flex", flexDirection: "column", gap: 8 } },
react_1.default.createElement("h1", { style: { fontSize: 22, fontWeight: 700, textAlign: "center" } }, type === "success" ? "Sent!" : "Something went wrong"),
type === "success" ? (react_1.default.createElement("p", { style: { textAlign: "center", color: "#535862", fontSize: 15 } },
"Your tokens were successfully sent to ",
recipient,
react_1.default.createElement("br", null),
"(",
react_1.default.createElement("span", { style: { fontFamily: "monospace" } }, address),
")")) : (react_1.default.createElement("p", { style: { textAlign: "center", color: "#535862", fontSize: 15 } },
"We couldn't complete your transaction at the moment.",
react_1.default.createElement("br", null),
"This might be due to network issues, insufficient liquidity, or a failed quote. Please try again shortly.")))),
type === "success" ? (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement("a", { href: txLink, target: "_blank", rel: "noopener noreferrer", style: {
color: "#4664E9",
fontWeight: 600,
fontSize: 15,
textAlign: "center",
marginBottom: 8,
} }, "View Transaction"),
react_1.default.createElement("button", { onClick: handleDone, style: {
width: "100%",
border: "none",
background: "#4664E9",
color: "#fff",
fontWeight: 600,
fontSize: 16,
borderRadius: 8,
padding: "10px 0",
cursor: "pointer",
marginBottom: 24,
} }, "Done"))) : (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement("button", { onClick: onTryAgain || handleDone, style: {
width: "100%",
border: "1.5px solid #4664E9",
background: "#fff",
color: "#4664E9",
fontWeight: 600,
fontSize: 16,
borderRadius: 8,
padding: "10px 0",
cursor: "pointer",
marginBottom: 8,
} }, "Try Again"),
react_1.default.createElement("a", { href: "#", style: {
color: "#4664E9",
fontWeight: 600,
fontSize: 15,
textAlign: "center",
marginBottom: 8,
} }, "Need help?")))));
}
exports.default = MessagePopup;