@enclavemoney/enclave-wallet-sdk
Version:
A simple enclave wallet SDK for React applications
227 lines (226 loc) • 11.4 kB
JavaScript
"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.QRNetworks = void 0;
var react_1 = __importStar(require("react"));
var lucide_react_1 = require("lucide-react");
var qrcode_react_1 = require("qrcode.react");
var utils_1 = require("./utils");
var truncateAddress = function (address) {
if (!address)
return "";
return address.slice(0, 14) + "..." + address.slice(-4);
};
var QRNetworks = function (_a) {
var walletAddress = _a.walletAddress, solanaAddress = _a.solanaAddress, bitcoinWalletAddress = _a.bitcoinWalletAddress, onBack = _a.onBack;
var networks = [
{
name: "Ethereum",
symbol: "ETH",
icon: "https://media.socket.tech/tokens/all/ETH",
address: walletAddress,
},
{
name: "Solana",
symbol: "SOL",
icon: utils_1.NETWORK_LOGO_URLS["792703809"],
address: solanaAddress,
},
{
name: "Bitcoin",
symbol: "BTC",
icon: "https://assets.coingecko.com/coins/images/1/standard/bitcoin.png?1747033579",
address: bitcoinWalletAddress,
},
];
var _b = (0, react_1.useState)(null), qrNetwork = _b[0], setQrNetwork = _b[1];
var _c = (0, react_1.useState)(null), copiedAddress = _c[0], setCopiedAddress = _c[1];
var handleCopy = function (address) {
navigator.clipboard.writeText(address);
setCopiedAddress(address);
setTimeout(function () { return setCopiedAddress(null); }, 1200);
};
if (qrNetwork) {
return (react_1.default.createElement("div", { style: {
width: "100%",
fontFamily: "Inter, sans-serif",
} },
react_1.default.createElement("div", { style: {
display: "flex",
alignItems: "center",
} },
react_1.default.createElement("button", { onClick: function () { return setQrNetwork(null); }, style: {
background: "none",
border: "none",
cursor: "pointer",
marginRight: 12,
padding: 0,
display: "flex",
alignItems: "center",
} },
react_1.default.createElement(lucide_react_1.ArrowLeft, { size: 24, color: "#222" })),
react_1.default.createElement("span", { style: {
fontWeight: 600,
fontSize: 20,
flex: 1,
textAlign: "center",
} },
"Deposit ",
qrNetwork.symbol),
react_1.default.createElement("button", { onClick: onBack, style: {
background: "none",
border: "none",
cursor: "pointer",
marginLeft: 12,
padding: 0,
display: "flex",
alignItems: "center",
} },
react_1.default.createElement(lucide_react_1.X, { size: 22, color: "#888" }))),
react_1.default.createElement("div", { style: {
display: "flex",
flexDirection: "column",
alignItems: "center",
margin: "24px 0 0 0",
} },
react_1.default.createElement("div", { style: { background: "#F6F7F9", borderRadius: 16, padding: 16 } },
react_1.default.createElement(qrcode_react_1.QRCodeSVG, { value: qrNetwork.address || "", size: 160 }))),
react_1.default.createElement("div", { style: { margin: "24px 0 0 0", padding: "0" } },
react_1.default.createElement("div", { style: {
borderTop: "1px solid #E9E9EC",
marginBottom: 12,
position: "relative",
textAlign: "center",
} },
react_1.default.createElement("span", { style: {
position: "relative",
top: -12,
background: "#fff",
padding: "0 12px",
color: "#B4B4B6",
fontSize: 14,
} }, "or")),
react_1.default.createElement("div", { style: { fontWeight: 500, fontSize: 15, marginBottom: 6 } }, "Wallet Address"),
react_1.default.createElement("div", { style: {
display: "flex",
alignItems: "center",
background: "#F6F7F9",
borderRadius: 10,
padding: "10px 12px",
marginBottom: 8,
} },
react_1.default.createElement("span", { style: { fontWeight: 500, fontSize: 15, color: "#222", flex: 1 } }, truncateAddress(qrNetwork.address || "")),
react_1.default.createElement("button", { onClick: function () { return handleCopy(qrNetwork.address || ""); }, style: {
background: copiedAddress === qrNetwork.address ? "#3662E3" : "#E9EAFD",
color: copiedAddress === qrNetwork.address ? "#fff" : "#3662E3",
border: "none",
borderRadius: 8,
fontWeight: 600,
fontSize: 15,
padding: "6px 18px",
cursor: "pointer",
transition: "all 0.2s",
} }, copiedAddress === qrNetwork.address ? "Copied" : "Copy")),
react_1.default.createElement("div", { style: {
color: "#717680",
fontSize: 13,
display: "flex",
alignItems: "center",
gap: 6,
} },
react_1.default.createElement("span", { style: { fontSize: 16 } }, "\u24D8"),
" This address can only be used to receive compatible tokens.")),
react_1.default.createElement("button", { onClick: function () { return setQrNetwork(null); }, style: {
margin: "32px 0px 24px 0px",
width: "100%",
background: "#fff",
color: "#4664E9",
fontWeight: 600,
fontSize: 16,
border: "1.5px solid #3662E3",
borderRadius: 10,
padding: "12px 0",
cursor: "pointer",
boxShadow: "none",
} }, "Go Back")));
}
return (react_1.default.createElement("div", { style: { fontFamily: "Inter, sans-serif", height: "500px" } },
react_1.default.createElement("div", { style: {
display: "flex",
alignItems: "center",
padding: "0px 0px 16px 0px",
} },
react_1.default.createElement("button", { onClick: onBack, style: {
background: "none",
border: "none",
cursor: "pointer",
marginRight: 12,
padding: 0,
display: "flex",
alignItems: "center",
} },
react_1.default.createElement(lucide_react_1.ArrowLeft, { size: 24, color: "#222" })),
react_1.default.createElement("span", { style: {
fontWeight: 600,
fontSize: 20,
flex: 1,
textAlign: "center",
} }, "Networks")),
react_1.default.createElement("div", { style: { padding: "0 0 8px 0" } }, networks.map(function (network, idx) { return (react_1.default.createElement("div", { key: network.symbol, style: {
display: "flex",
alignItems: "center",
padding: "18px 0px",
borderBottom: idx !== networks.length - 1 ? "1px solid #F1F1F3" : "none",
gap: 16,
} },
react_1.default.createElement("img", { src: network.icon, alt: network.name, style: {
width: 40,
height: 40,
borderRadius: 12,
background: "#F6F7F9",
} }),
react_1.default.createElement("div", { style: { flex: 1, color: "#414651" } },
react_1.default.createElement("div", { style: { fontWeight: 600, fontSize: 16 } }, network.name),
react_1.default.createElement("div", { style: { fontSize: 13 } }, truncateAddress(network.address || ""))),
react_1.default.createElement("div", { style: { display: "flex", gap: 12 } },
react_1.default.createElement("button", { style: {
background: "none",
border: "none",
cursor: "pointer",
padding: 0,
display: "flex",
alignItems: "center",
}, title: "Show QR", onClick: function () { return setQrNetwork(network); } },
react_1.default.createElement(lucide_react_1.QrCode, { size: 20, color: "#717680" })),
react_1.default.createElement("button", { style: {
background: "none",
border: "none",
cursor: "pointer",
padding: 0,
display: "flex",
alignItems: "center",
}, title: "Copy address", onClick: function () { return handleCopy(network.address || ""); } }, copiedAddress === network.address ? (react_1.default.createElement(lucide_react_1.Check, { size: 20, color: "#4BB543" })) : (react_1.default.createElement(lucide_react_1.Copy, { size: 20, color: "#717680" })))))); }))));
};
exports.QRNetworks = QRNetworks;