@enclavemoney/enclave-wallet-sdk
Version:
A simple enclave wallet SDK for React applications
205 lines (204 loc) • 11.6 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");
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;
if (!fromToken || !toToken) {
return null;
}
var _b = (0, react_1.useState)(false), showPreviewNetworks = _b[0], setShowPreviewNetworks = _b[1];
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: "#000000", fontWeight: 500 } }, network)),
react_1.default.createElement("span", { style: { fontSize: 14, color: "#535862" } },
amount,
" ",
symbol)));
};
return (react_1.default.createElement("div", { style: {
width: "100%",
fontFamily: "Inter, sans-serif",
} },
react_1.default.createElement("div", { style: {
display: "flex",
justifyContent: "space-between",
marginBottom: 8,
padding: 16,
border: proActive ? "1px solid #4664E9" : "1px solid #D5D7DA",
borderRadius: 12,
flexDirection: "column",
background: proActive ? "#EBF0FF" : "transparent",
gap: 20,
} },
react_1.default.createElement("div", { style: { display: "flex", flexDirection: "column", gap: 4 } },
react_1.default.createElement("span", { style: { color: "#535862", fontSize: 14, fontWeight: 500 } }, "You pay"),
react_1.default.createElement("div", null,
react_1.default.createElement("span", { style: { fontSize: 24, fontWeight: 600 } },
fromAmount,
" ",
fromToken.symbol),
proActive &&
selectedNetworksPay &&
selectedNetworksPay.length > 0 && (react_1.default.createElement("div", { style: {
borderRadius: 8,
overflow: "hidden",
background: "white",
marginTop: 8,
} },
react_1.default.createElement("button", { onClick: function () { return setShowPreviewNetworks(function (v) { return !v; }); }, style: {
width: "100%",
background: "white",
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: "#1E1E1E",
fontWeight: 400,
} },
selectedNetworksPay.length,
" Networks"),
showPreviewNetworks ? (react_1.default.createElement(lucide_react_2.ChevronUp, { style: { width: 16, height: 16, color: "#717680" } })) : (react_1.default.createElement(lucide_react_1.ChevronDown, { style: { width: 16, height: 16, color: "#717680" } }))),
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", { style: {
borderTop: index === 0 ? "1px solid #D5D7DA" : "none",
} },
react_1.default.createElement(NetworkAllocationDisplay, { key: network.name, 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: "#D5D7DA" } }),
react_1.default.createElement("div", { style: { display: "flex", flexDirection: "column", gap: 4 } },
react_1.default.createElement("span", { style: { color: "#535862", fontSize: 14, fontWeight: 500 } }, "You receive"),
react_1.default.createElement("div", null,
react_1.default.createElement("span", { style: { fontSize: 24, fontWeight: 600 } },
toAmount,
" ",
toToken.symbol),
proActive &&
selectedNetworksReceive &&
selectedNetworksReceive.length > 0 && (react_1.default.createElement("div", { style: {
marginTop: 8,
display: "flex",
gap: 8,
justifyContent: "space-between",
background: "white",
padding: "8px 10px",
borderRadius: 8,
} },
react_1.default.createElement("div", { style: { display: "flex", gap: 8 } }, selectedNetworksReceive.map(function (network) { return (react_1.default.createElement("div", { key: network.chainId, style: {
display: "flex",
alignItems: "center",
gap: 6,
borderRadius: 8,
padding: "4px 10px",
fontSize: 14,
fontWeight: 500,
} },
react_1.default.createElement("img", { src: utils_1.NETWORK_LOGO_URLS[network.chainId], alt: network.name, style: { width: 16, height: 16 } }),
react_1.default.createElement("span", null, network.name))); }))))))),
react_1.default.createElement("div", { style: {
background: "#f6f8fc",
borderRadius: 14,
padding: "18px 18px 10px 18px",
marginTop: 24,
marginBottom: 8,
fontSize: 16,
} },
react_1.default.createElement("div", { style: {
display: "flex",
justifyContent: "space-between",
marginBottom: 8,
} },
react_1.default.createElement("span", { style: { fontSize: 16, fontWeight: 500 } }, "Rate"),
react_1.default.createElement("span", { style: { fontSize: 16, fontWeight: 500, color: "#535862" } },
"1 ",
toToken.symbol,
" \u2248 ",
rate,
" ",
fromToken.symbol)),
react_1.default.createElement("div", { style: {
display: "flex",
justifyContent: "space-between",
marginBottom: 8,
} },
react_1.default.createElement("span", { style: { fontSize: 16, fontWeight: 500 } }, "Slippage"),
react_1.default.createElement("span", { style: { fontSize: 16, fontWeight: 500, color: "#535862" } }, slippage))),
react_1.default.createElement("div", { style: { display: "flex", gap: 12, marginTop: 32, marginBottom: 24 } },
react_1.default.createElement("button", { onClick: onBack, style: {
flex: 1,
border: "1px solid #4664E9",
background: "#fff",
color: "#4664E9",
fontWeight: 600,
fontSize: 16,
borderRadius: 8,
padding: "10px 0",
cursor: "pointer",
} }, "Back"),
react_1.default.createElement("button", { onClick: onConfirm, style: {
flex: 1,
border: "none",
background: "#4664E9",
color: "#fff",
fontWeight: 600,
fontSize: 16,
borderRadius: 8,
padding: "10px 0",
cursor: "pointer",
opacity: isLoading ? 0.5 : 1,
display: "flex",
alignItems: "center",
justifyContent: "center",
gap: "8px",
}, disabled: isLoading }, isLoading ? (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement(Spinner_1.default, null),
react_1.default.createElement("span", null, "Confirming..."))) : ("Confirm Swap")))));
}
exports.default = ReviewOrder;