@enclavemoney/enclave-wallet-sdk
Version:
A simple enclave wallet SDK for React applications
78 lines (77 loc) • 4.64 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 react_1 = __importDefault(require("react"));
var WalletProvider_1 = require("./WalletProvider");
var PopupLoginExample = function () {
var _a = (0, WalletProvider_1.useWallet)(), openLoginPopup = _a.openLoginPopup, isPopupAuthenticated = _a.isPopupAuthenticated, popupLoginData = _a.popupLoginData, username = _a.username, evmWalletAddress = _a.evmWalletAddress, bitcoinWalletAddress = _a.bitcoinWalletAddress, isLoggedIn = _a.isLoggedIn;
return (react_1.default.createElement("div", { style: { padding: "20px", fontFamily: "Inter, sans-serif" } },
react_1.default.createElement("h2", null, "Popup Login Example"),
react_1.default.createElement("button", { onClick: openLoginPopup, style: {
padding: "12px 24px",
backgroundColor: "#007bff",
color: "white",
border: "none",
borderRadius: "8px",
cursor: "pointer",
fontSize: "16px",
marginBottom: "20px",
} }, "Login with Popup"),
isLoggedIn && (react_1.default.createElement("div", { style: {
backgroundColor: "#f8f9fa",
padding: "20px",
borderRadius: "8px",
marginTop: "20px",
} },
react_1.default.createElement("h3", null, "User Information"),
react_1.default.createElement("p", null,
react_1.default.createElement("strong", null, "Username:"),
" ",
username),
react_1.default.createElement("p", null,
react_1.default.createElement("strong", null, "EVM Address:"),
" ",
evmWalletAddress),
react_1.default.createElement("p", null,
react_1.default.createElement("strong", null, "Bitcoin Address:"),
" ",
bitcoinWalletAddress),
react_1.default.createElement("p", null,
react_1.default.createElement("strong", null, "Popup Authenticated:"),
" ",
isPopupAuthenticated ? "Yes" : "No"),
popupLoginData && (react_1.default.createElement("details", { style: { marginTop: "15px" } },
react_1.default.createElement("summary", { style: { cursor: "pointer", fontWeight: "bold" } }, "View Raw Popup Login Data"),
react_1.default.createElement("pre", { style: {
backgroundColor: "#e9ecef",
padding: "15px",
borderRadius: "4px",
overflow: "auto",
fontSize: "12px",
marginTop: "10px",
} }, JSON.stringify(popupLoginData, null, 2)))))),
react_1.default.createElement("div", { style: {
backgroundColor: "#fff3cd",
padding: "15px",
borderRadius: "8px",
marginTop: "20px",
border: "1px solid #ffeaa7",
} },
react_1.default.createElement("h4", null, "How to use:"),
react_1.default.createElement("ol", null,
react_1.default.createElement("li", null, "Click the \"Login with Popup\" button above"),
react_1.default.createElement("li", null, "A popup window will open to http://localhost:3000"),
react_1.default.createElement("li", null, "Complete the login process in the popup"),
react_1.default.createElement("li", null, "The popup should send a message with the user data"),
react_1.default.createElement("li", null, "User information will be displayed above once login is successful")),
react_1.default.createElement("h4", null, "Expected message format from popup:"),
react_1.default.createElement("pre", { style: {
backgroundColor: "#f8f9fa",
padding: "10px",
borderRadius: "4px",
fontSize: "12px",
} }, "window.parent.postMessage({\n type: \"LOGIN_SUCCESS\",\n data: {\n username: \"...\",\n wallet: {\n scw_address: \"...\",\n bitcoin_wallet: {\n native_segwit_address: \"...\"\n },\n solana_program_wallet: \"...\"\n },\n // ... rest of user data\n }\n}, \"*\");"))));
};
exports.default = PopupLoginExample;