@enclavemoney/enclave-wallet-sdk
Version:
A simple enclave wallet SDK for React applications
252 lines (251 loc) • 14.2 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;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var react_1 = __importStar(require("react"));
var lucide_react_1 = require("lucide-react");
var Spinner_1 = __importDefault(require("../ui/Spinner"));
var utils_1 = require("../utils");
var utils_2 = require("../utils");
var WalletProvider_1 = require("../WalletProvider");
var theme_1 = require("../../types/theme");
function ReviewTransfer(_a) {
var _b, _c, _d, _e, _f, _g;
var selectedToken = _a.selectedToken, amount = _a.amount, recipient = _a.recipient, sendToUser = _a.sendToUser, addressToSend = _a.addressToSend, selectedFromNetworksPay = _a.selectedFromNetworksPay, selectedToNetworksPay = _a.selectedToNetworksPay, isTransferring = _a.isTransferring, transferError = _a.transferError, onBack = _a.onBack, onConfirm = _a.onConfirm, proActive = _a.proActive, _h = _a.theme, theme = _h === void 0 ? "light" : _h;
var _j = (0, react_1.useState)(false), showPreviewNetworks = _j[0], setShowPreviewNetworks = _j[1];
var _k = (0, WalletProvider_1.useWallet)(), walletCornerRadius = _k.walletCornerRadius, currentTheme = _k.currentTheme;
var currentRadius = theme_1.borderRadiusStyles[walletCornerRadius];
var NetworkAllocationDisplay = function (_a) {
var network = _a.network, amount = _a.amount, symbol = _a.symbol;
return (react_1.default.createElement("div", { style: {
display: "flex",
justifyContent: "space-between",
alignItems: "center",
width: "100%",
padding: "8px 0",
} },
react_1.default.createElement("div", { style: {
display: "flex",
alignItems: "center",
gap: "8px",
} },
react_1.default.createElement("img", { src: utils_2.NETWORK_LOGO_URLS[utils_1.NETWORK_NAME_TO_CHAIN_ID[network]], alt: network, style: { width: 24, height: 24, borderRadius: "50%" } }),
react_1.default.createElement("span", { style: { fontSize: 14, color: currentTheme.text, fontWeight: 500 } }, network)),
react_1.default.createElement("span", { style: { fontSize: 14, color: currentTheme.textSecondary } },
amount,
" ",
symbol)));
};
return (react_1.default.createElement("div", { style: {
width: "100%",
background: currentTheme.surface,
borderRadius: currentRadius.outerRadius,
paddingBottom: 24,
color: currentTheme.text,
} },
react_1.default.createElement("div", { style: {
display: "flex",
alignItems: "center",
marginBottom: 18,
position: "relative",
} },
react_1.default.createElement("button", { onClick: onBack, style: {
background: "none",
border: "none",
fontSize: 22,
color: currentTheme.text,
cursor: "pointer",
position: "absolute",
left: 0,
} },
react_1.default.createElement(lucide_react_1.ArrowLeft, { style: { width: 24, height: 24, color: currentTheme.textSecondary } })),
react_1.default.createElement("span", { style: {
fontWeight: 600,
fontSize: 20,
width: "100%",
textAlign: "center",
color: currentTheme.text,
} }, "Confirm transaction")),
react_1.default.createElement("div", { style: {
display: "flex",
flexDirection: "column",
alignItems: "center",
marginBottom: 24,
border: proActive ? "1px solid ".concat(currentTheme.primary) : "none",
borderRadius: currentRadius.innerRadius,
padding: 16,
background: proActive ? currentTheme.surfaceActive : "transparent",
} },
react_1.default.createElement("div", { style: {
background: currentTheme.surfaceActive,
borderRadius: currentRadius.outerRadius,
padding: 16,
marginBottom: 16,
} },
react_1.default.createElement(lucide_react_1.SendHorizontal, { size: 36, color: currentTheme.primary })),
react_1.default.createElement("div", { style: {
fontWeight: 700,
fontSize: 32,
marginBottom: 4,
color: currentTheme.text,
} },
(0, utils_1.formatAmount)(amount),
" ",
selectedToken.symbol),
react_1.default.createElement("div", { style: {
color: currentTheme.textSecondary,
fontSize: 18,
marginBottom: 16,
} },
"$",
(parseFloat(amount || "0") * (selectedToken.price || 0)).toFixed(2)),
proActive && (react_1.default.createElement("div", { style: {
borderRadius: "".concat(currentRadius.innerRadius, "px"),
overflow: "hidden",
background: currentTheme.surface,
width: "100%",
} },
react_1.default.createElement("button", { onClick: function () { return setShowPreviewNetworks(function (v) { return !v; }); }, style: {
width: "100%",
background: currentTheme.surface,
border: "none",
padding: "12px 16px",
display: "flex",
justifyContent: "space-between",
alignItems: "center",
cursor: "pointer",
textAlign: "left",
} },
react_1.default.createElement("span", { style: {
fontSize: 16,
color: currentTheme.text,
fontWeight: 400,
} },
selectedFromNetworksPay.length,
" Network"),
showPreviewNetworks ? (react_1.default.createElement(lucide_react_1.ChevronUp, { style: {
width: 16,
height: 16,
color: currentTheme.textSecondary,
} })) : (react_1.default.createElement(lucide_react_1.ChevronDown, { style: {
width: 16,
height: 16,
color: currentTheme.textSecondary,
} }))),
showPreviewNetworks && (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement("div", { style: { padding: "1px 16px" } }, selectedFromNetworksPay.map(function (network, index) { return (react_1.default.createElement("div", { key: network.name, style: {
borderTop: index === 0
? "1px solid ".concat(currentTheme.border)
: "none",
} },
react_1.default.createElement(NetworkAllocationDisplay, { network: network.name, amount: network.amount || "0", symbol: (selectedToken === null || selectedToken === void 0 ? void 0 : selectedToken.symbol) || "" }))); }))))))),
react_1.default.createElement("div", { style: {
background: currentTheme.surfaceActive,
borderRadius: "".concat(currentRadius.innerRadius, "px"),
padding: 16,
marginBottom: 24,
} },
react_1.default.createElement("div", { style: {
display: "flex",
justifyContent: "space-between",
marginBottom: 8,
} },
react_1.default.createElement("span", { style: { color: currentTheme.text, fontSize: 16, fontWeight: 500 } }, "Recipient"),
react_1.default.createElement("span", { style: { color: currentTheme.textSecondary, fontSize: 16 } },
(function () {
var displayName = sendToUser.username || recipient;
return displayName.length > 8
? displayName.slice(0, 8) + "..."
: displayName;
})(),
" ",
react_1.default.createElement("span", { style: { color: currentTheme.textSecondary, opacity: 0.7 } },
"(",
addressToSend
? selectedToNetworksPay[0].chainId ===
utils_1.NETWORK_NAME_TO_CHAIN_ID.Solana
? "".concat((_b = sendToUser.solanaWalletAddress) === null || _b === void 0 ? void 0 : _b.slice(0, 6), "...").concat((_c = sendToUser.solanaWalletAddress) === null || _c === void 0 ? void 0 : _c.slice(-4))
: selectedToNetworksPay[0].chainId ===
utils_1.NETWORK_NAME_TO_CHAIN_ID.Bitcoin
? "".concat((_d = sendToUser === null || sendToUser === void 0 ? void 0 : sendToUser.bitcoinWalletAddress) === null || _d === void 0 ? void 0 : _d.slice(0, 6), "...").concat((_e = sendToUser === null || sendToUser === void 0 ? void 0 : sendToUser.bitcoinWalletAddress) === null || _e === void 0 ? void 0 : _e.slice(-4))
: "".concat((_f = sendToUser.walletAddress) === null || _f === void 0 ? void 0 : _f.slice(0, 6), "...").concat((_g = sendToUser.walletAddress) === null || _g === void 0 ? void 0 : _g.slice(-4))
: "Unknown",
")"))),
react_1.default.createElement("div", { style: {
display: "flex",
justifyContent: "space-between",
marginBottom: 8,
} },
react_1.default.createElement("span", { style: { color: currentTheme.text, fontSize: 16, fontWeight: 500 } }, "Recipient Network"),
react_1.default.createElement("span", { style: { color: currentTheme.textSecondary, fontSize: 16 } }, selectedToNetworksPay[0].name || "None")),
react_1.default.createElement("div", { style: {
display: "flex",
justifyContent: "space-between",
} },
react_1.default.createElement("span", { style: { color: currentTheme.text, fontSize: 16, fontWeight: 500 } }, "Total"),
react_1.default.createElement("span", { style: { color: currentTheme.textSecondary, fontSize: 16 } },
(0, utils_1.formatAmount)(amount),
" ",
selectedToken.symbol))),
react_1.default.createElement("div", { style: { display: "flex", gap: 12 } },
react_1.default.createElement("button", { onClick: onBack, style: {
flex: 1,
border: "1px solid ".concat(currentTheme.border),
background: currentTheme.surface,
color: currentTheme.text,
fontWeight: 600,
fontSize: 16,
borderRadius: currentRadius.innerRadius,
padding: "10px 0",
cursor: "pointer",
}, disabled: isTransferring }, "Cancel"),
react_1.default.createElement("button", { onClick: onConfirm, style: {
flex: 1,
border: "none",
background: currentTheme.primary,
color: (0, utils_1.getContrastingTextColor)(currentTheme.primary),
fontWeight: 600,
fontSize: 16,
borderRadius: currentRadius.innerRadius,
padding: "10px 0",
cursor: isTransferring ? "not-allowed" : "pointer",
opacity: isTransferring ? 0.7 : 1,
display: "flex",
alignItems: "center",
justifyContent: "center",
gap: 8,
}, disabled: isTransferring }, isTransferring ? (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement(Spinner_1.default, null),
"Sending...")) : ("Confirm"))),
transferError && (react_1.default.createElement("div", { style: {
color: "#DC2626",
fontSize: 14,
marginTop: 12,
textAlign: "center",
} }, transferError))));
}
exports.default = ReviewTransfer;