@enclavemoney/enclave-wallet-sdk
Version:
A simple enclave wallet SDK for React applications
260 lines (259 loc) • 14.8 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 Spinner_1 = __importDefault(require("../ui/Spinner"));
var utils_1 = require("../utils");
var lucide_react_1 = require("lucide-react");
var lucide_react_2 = require("lucide-react");
var WalletProvider_1 = require("../WalletProvider");
var theme_1 = require("../../types/theme");
function ReviewOrder(_a) {
var fromToken = _a.fromToken, toToken = _a.toToken, rate = _a.rate, slippage = _a.slippage, fromAmount = _a.fromAmount, toAmount = _a.toAmount, onBack = _a.onBack, onConfirm = _a.onConfirm, selectedNetworksPay = _a.selectedNetworksPay, selectedNetworksReceive = _a.selectedNetworksReceive, proActive = _a.proActive, isLoading = _a.isLoading, _b = _a.theme, theme = _b === void 0 ? "light" : _b;
if (!fromToken || !toToken) {
return null;
}
var _c = (0, react_1.useState)(false), showPreviewNetworks = _c[0], setShowPreviewNetworks = _c[1];
var _d = (0, WalletProvider_1.useWallet)(), walletCornerRadius = _d.walletCornerRadius, currentTheme = _d.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_1.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,
color: currentTheme.text,
} },
react_1.default.createElement("div", { style: {
display: "flex",
justifyContent: "space-between",
marginBottom: 8,
padding: 16,
border: proActive
? "1px solid ".concat(currentTheme.primary)
: "1px solid ".concat(currentTheme.border),
borderRadius: currentRadius.innerRadius,
flexDirection: "column",
background: proActive ? currentTheme.surfaceActive : "transparent",
gap: 20,
} },
react_1.default.createElement("div", { style: { display: "flex", flexDirection: "column", gap: 4 } },
react_1.default.createElement("span", { style: {
color: currentTheme.textSecondary,
fontSize: 14,
fontWeight: 500,
} }, "You pay"),
react_1.default.createElement("div", null,
react_1.default.createElement("span", { style: {
fontSize: 24,
fontWeight: 600,
color: currentTheme.text,
} },
fromAmount,
" ",
fromToken.symbol),
proActive &&
selectedNetworksPay &&
selectedNetworksPay.length > 0 && (react_1.default.createElement("div", { style: {
borderRadius: currentRadius.innerRadius,
overflow: "hidden",
background: currentTheme.surface,
marginTop: 8,
} },
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,
} },
selectedNetworksPay.length,
" Networks"),
showPreviewNetworks ? (react_1.default.createElement(lucide_react_2.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" } }, selectedNetworksPay.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 || "", symbol: (fromToken === null || fromToken === void 0 ? void 0 : fromToken.symbol) || "" }))); })))))))),
react_1.default.createElement("div", { style: { width: "100%", height: 1, background: currentTheme.border } }),
react_1.default.createElement("div", { style: { display: "flex", flexDirection: "column", gap: 4 } },
react_1.default.createElement("span", { style: {
color: currentTheme.textSecondary,
fontSize: 14,
fontWeight: 500,
} }, "You receive"),
react_1.default.createElement("div", null,
react_1.default.createElement("span", { style: {
fontSize: 24,
fontWeight: 600,
color: currentTheme.text,
} },
toAmount,
" ",
toToken.symbol),
proActive &&
selectedNetworksReceive &&
selectedNetworksReceive.length > 0 && (react_1.default.createElement("div", { style: {
borderRadius: currentRadius.level3Radius,
overflow: "hidden",
background: currentTheme.surface,
marginTop: 8,
} },
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,
} },
selectedNetworksReceive.length,
" Networks"),
showPreviewNetworks ? (react_1.default.createElement(lucide_react_2.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" } }, selectedNetworksReceive.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 || "", symbol: (toToken === null || toToken === void 0 ? void 0 : toToken.symbol) || "" }))); }))))))))),
react_1.default.createElement("div", { style: {
display: "flex",
flexDirection: "column",
gap: 12,
padding: 16,
border: "1px solid ".concat(currentTheme.border),
borderRadius: currentRadius.innerRadius,
background: currentTheme.surfaceActive,
marginBottom: 8,
} },
react_1.default.createElement("div", { style: {
display: "flex",
justifyContent: "space-between",
alignItems: "center",
} },
react_1.default.createElement("span", { style: { fontSize: 14, color: currentTheme.textSecondary } }, "Rate"),
react_1.default.createElement("span", { style: { fontSize: 14, color: currentTheme.text, fontWeight: 500 } },
"1 ",
fromToken.symbol,
" = ",
rate,
" ",
toToken.symbol)),
react_1.default.createElement("div", { style: {
display: "flex",
justifyContent: "space-between",
alignItems: "center",
} },
react_1.default.createElement("span", { style: { fontSize: 14, color: currentTheme.textSecondary } }, "Slippage"),
react_1.default.createElement("span", { style: { fontSize: 14, color: currentTheme.text, fontWeight: 500 } }, slippage))),
react_1.default.createElement("div", { style: { display: "flex", gap: 12, marginTop: 24 } },
react_1.default.createElement("button", { onClick: onBack, style: {
flex: 1,
padding: "16px",
borderRadius: currentRadius.innerRadius,
border: "1px solid ".concat(currentTheme.border),
background: "transparent",
color: currentTheme.text,
fontSize: 16,
fontWeight: 500,
cursor: "pointer",
} }, "Back"),
react_1.default.createElement("button", { onClick: onConfirm, disabled: isLoading, style: {
flex: 1,
padding: "16px",
borderRadius: currentRadius.innerRadius,
border: "none",
background: currentTheme.primary,
color: (0, utils_1.getContrastingTextColor)(currentTheme.primary),
fontSize: 16,
fontWeight: 500,
cursor: isLoading ? "not-allowed" : "pointer",
display: "flex",
alignItems: "center",
justifyContent: "center",
gap: 8,
opacity: isLoading ? 0.5 : 1,
} },
isLoading && react_1.default.createElement(Spinner_1.default, null),
isLoading ? "Processing..." : "Confirm Swap"))));
}
exports.default = ReviewOrder;