@enclavemoney/enclave-wallet-sdk
Version:
A simple enclave wallet SDK for React applications
321 lines (320 loc) • 17 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 theme_1 = require("../../types/theme");
var WalletProvider_1 = require("../WalletProvider");
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, _b = _a.theme, theme = _b === void 0 ? "dark" : _b;
var currentTheme = (0, WalletProvider_1.useWallet)().currentTheme;
var networks = [
{
name: "EVM",
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://storage.googleapis.com/enclave_assets/bitcoin.webp",
address: bitcoinWalletAddress,
},
];
var _c = (0, react_1.useState)(null), qrNetwork = _c[0], setQrNetwork = _c[1];
var _d = (0, react_1.useState)(null), copiedAddress = _d[0], setCopiedAddress = _d[1];
var _e = (0, react_1.useState)(false), showNetworkTooltip = _e[0], setShowNetworkTooltip = _e[1];
var walletCornerRadius = (0, WalletProvider_1.useWallet)().walletCornerRadius;
var currentRadius = theme_1.borderRadiusStyles[walletCornerRadius];
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%",
background: currentTheme.surface,
color: currentTheme.text,
} },
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: currentTheme.text })),
react_1.default.createElement("span", { style: {
fontWeight: 600,
fontSize: 20,
flex: 1,
textAlign: "center",
color: currentTheme.text,
} },
"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: currentTheme.textSecondary }))),
react_1.default.createElement("div", { style: {
display: "flex",
flexDirection: "column",
alignItems: "center",
margin: "24px 0 0 0",
} },
react_1.default.createElement("div", { style: {
background: "white",
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 ".concat(currentTheme.border),
marginBottom: 12,
position: "relative",
textAlign: "center",
} },
react_1.default.createElement("span", { style: {
position: "relative",
top: -12,
background: currentTheme.surface,
padding: "0 12px",
color: currentTheme.textSecondary,
fontSize: 14,
} }, "or")),
react_1.default.createElement("div", { style: {
fontWeight: 500,
fontSize: 15,
marginBottom: 6,
color: currentTheme.text,
} }, "Wallet Address"),
react_1.default.createElement("div", { style: {
display: "flex",
alignItems: "center",
background: currentTheme.surface,
borderRadius: "".concat(currentRadius.innerRadius, "px"),
padding: "12px",
marginBottom: 8,
border: "1px solid ".concat(currentTheme.border),
} },
react_1.default.createElement("span", { style: {
fontWeight: 500,
fontSize: 15,
color: currentTheme.text,
flex: 1,
} }, truncateAddress(qrNetwork.address || "")),
react_1.default.createElement("button", { onClick: function () { return handleCopy(qrNetwork.address || ""); }, style: {
background: copiedAddress === qrNetwork.address
? currentTheme.primary
: currentTheme.surfaceActive,
color: copiedAddress === qrNetwork.address
? (0, utils_1.getContrastingTextColor)(currentTheme.primary)
: currentTheme.primary,
border: "none",
borderRadius: "".concat(currentRadius.innerRadius, "px"),
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: currentTheme.textSecondary,
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: currentTheme.surface,
color: currentTheme.primary,
fontWeight: 600,
fontSize: 16,
border: "1.5px solid ".concat(currentTheme.primary),
borderRadius: "".concat(currentRadius.innerRadius, "px"),
padding: "16px 0",
cursor: "pointer",
boxShadow: "none",
} }, "Go Back")));
}
return (react_1.default.createElement("div", { style: {
height: "500px",
background: currentTheme.surface,
color: currentTheme.text,
} },
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",
padding: 0,
display: "flex",
alignItems: "center",
} },
react_1.default.createElement(lucide_react_1.ArrowLeft, { size: 24, color: currentTheme.text })),
react_1.default.createElement("span", { style: {
fontWeight: 600,
fontSize: 20,
flex: 1,
textAlign: "center",
color: currentTheme.text,
} }, "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 ".concat(currentTheme.border)
: "none",
gap: 16,
} },
react_1.default.createElement("img", { src: network.icon, alt: network.name, style: {
width: 40,
height: 40,
borderRadius: 12,
background: currentTheme.surface,
} }),
react_1.default.createElement("div", { style: { flex: 1, color: currentTheme.text } },
react_1.default.createElement("div", { style: { fontWeight: 600, fontSize: 16 } }, network.name),
react_1.default.createElement("div", { style: { fontSize: 13, color: currentTheme.textSecondary } }, truncateAddress(network.address || ""))),
react_1.default.createElement("div", { style: { display: "flex", gap: 12, position: "relative" } },
network.name === "EVM" && (react_1.default.createElement("div", { style: { position: "relative", display: "inline-block" }, onMouseEnter: function () { return setShowNetworkTooltip(true); }, onMouseLeave: function () { return setShowNetworkTooltip(false); } },
react_1.default.createElement("button", { style: {
background: "none",
border: "none",
cursor: "pointer",
padding: 0,
display: "flex",
alignItems: "center",
}, title: "Available Networks" },
react_1.default.createElement(lucide_react_1.Info, { size: 20, color: currentTheme.textSecondary })),
showNetworkTooltip && (react_1.default.createElement("div", { style: {
position: "absolute",
top: "100%",
right: 0,
marginTop: 8,
background: currentTheme.surface,
border: "1px solid ".concat(currentTheme.border),
borderRadius: 12,
padding: 16,
boxShadow: "0 4px 20px rgba(0, 0, 0, 0.1)",
zIndex: 1000,
width: 320,
} },
react_1.default.createElement("div", { style: {
fontWeight: 600,
fontSize: 16,
marginBottom: 16,
color: currentTheme.text,
} }, "Supported EVM Networks"),
react_1.default.createElement("div", { style: {
display: "grid",
gridTemplateColumns: "1fr 1fr",
gap: 12,
marginBottom: 16,
} }, utils_1.availableNetworks
.filter(function (network) { return network.name !== "Solana"; })
.map(function (availableNetwork) { return (react_1.default.createElement("div", { key: availableNetwork.name, style: {
display: "flex",
alignItems: "center",
gap: 8,
padding: "8px 12px",
background: currentTheme.surfaceActive,
borderRadius: 8,
} },
react_1.default.createElement("img", { src: availableNetwork.icon, alt: availableNetwork.name, style: {
width: 20,
height: 20,
borderRadius: 4,
} }),
react_1.default.createElement("span", { style: {
fontSize: 13,
fontWeight: 500,
color: currentTheme.text,
} }, availableNetwork.name))); })),
react_1.default.createElement("div", { style: {
fontSize: 12,
color: currentTheme.textSecondary,
textAlign: "center",
lineHeight: 1.4,
} }, "Your Ethereum address works on all these networks"))))),
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: currentTheme.textSecondary })),
react_1.default.createElement("button", { style: {
background: "none",
border: "none",
cursor: "pointer",
padding: 0,
display: "flex",
alignItems: "center",
borderRadius: "".concat(currentRadius.innerRadius, "px"),
}, title: "Copy address", onClick: function () { return handleCopy(network.address || ""); } }, copiedAddress === network.address ? (react_1.default.createElement(lucide_react_1.Check, { size: 20, color: currentTheme.successText })) : (react_1.default.createElement(lucide_react_1.Copy, { size: 20, color: currentTheme.textSecondary })))))); }))));
};
exports.QRNetworks = QRNetworks;