@enclavemoney/enclave-wallet-sdk
Version:
A simple enclave wallet SDK for React applications
134 lines (133 loc) • 7.25 kB
JavaScript
"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var lucide_react_1 = require("lucide-react");
var react_1 = __importDefault(require("react"));
var utils_1 = require("./utils");
function SelectSingleNetwork(_a) {
var _b;
var availableNetworks = _a.availableNetworks, selectedToNetworksPay = _a.selectedToNetworksPay, setSelectedToNetworksPay = _a.setSelectedToNetworksPay, toToken = _a.toToken, onBack = _a.onBack, onDone = _a.onDone;
// Filter networks based on toToken's chainIds
var availableChainIds = ((_b = toToken === null || toToken === void 0 ? void 0 : toToken.chainIds) === null || _b === void 0 ? void 0 : _b.map(function (chain) { return chain.chainId; })) || [];
var filteredNetworks = availableNetworks.filter(function (network) {
var chainId = utils_1.NETWORK_NAME_TO_CHAIN_ID[network.name];
return availableChainIds.includes(chainId);
});
var isNetworkSelected = function (networkName) {
return selectedToNetworksPay.some(function (network) { return network.name === networkName; });
};
return (react_1.default.createElement("div", { style: {
width: "100%",
background: "#fff",
borderRadius: 20,
fontFamily: "Inter, sans-serif",
paddingBottom: 24,
} },
react_1.default.createElement("div", { style: {
display: "flex",
alignItems: "center",
marginBottom: 8,
position: "relative",
} },
react_1.default.createElement("button", { onClick: onBack, style: {
background: "none",
border: "none",
fontSize: 22,
color: "#222",
cursor: "pointer",
position: "absolute",
left: 0,
fontFamily: "Inter, sans-serif",
} },
react_1.default.createElement(lucide_react_1.ArrowLeft, { style: { width: 24, height: 24, color: "#717680" } })),
react_1.default.createElement("span", { style: {
fontWeight: 600,
fontSize: 20,
width: "100%",
textAlign: "center",
} }, "Select networks")),
react_1.default.createElement("div", { style: { marginBottom: 16 } },
react_1.default.createElement("p", { style: {
color: "#717680",
fontSize: 14,
margin: "0 0 24px 0",
textAlign: "center",
} }, "Select a reciever network")),
react_1.default.createElement("div", { style: { marginBottom: 24 } }, filteredNetworks.map(function (network) {
var _a, _b;
var chainId = utils_1.NETWORK_NAME_TO_CHAIN_ID[network.name];
var tokenChainInfo = (_a = toToken === null || toToken === void 0 ? void 0 : toToken.chainIds) === null || _a === void 0 ? void 0 : _a.find(function (chain) { return chain.chainId === chainId; });
var chainBalance = (_b = tokenChainInfo === null || tokenChainInfo === void 0 ? void 0 : tokenChainInfo.balance) !== null && _b !== void 0 ? _b : "0";
var formattedBalance = parseFloat(chainBalance) / Math.pow(10, (toToken === null || toToken === void 0 ? void 0 : toToken.decimals) || 6);
var isSelected = isNetworkSelected(network.name);
return (react_1.default.createElement("div", { key: network.name, style: {
display: "flex",
alignItems: "center",
justifyContent: "space-between",
padding: "16px",
border: isSelected ? "1px solid #3662E3" : "1px solid #D5D7DA",
borderRadius: 12,
cursor: "pointer",
marginBottom: 8,
transition: "all 0.2s ease",
background: isSelected ? "#F6F8FE" : "#fff",
}, onClick: function () {
setSelectedToNetworksPay([
{
name: network.name,
chainId: utils_1.NETWORK_NAME_TO_CHAIN_ID[network.name],
},
]);
} },
react_1.default.createElement("div", { style: { display: "flex", alignItems: "center", gap: 12 } },
react_1.default.createElement("div", { style: {
width: 20,
height: 20,
border: "2px solid",
borderColor: isSelected ? "#4664E9" : "#E9EAEB",
borderRadius: "50%",
display: "flex",
alignItems: "center",
justifyContent: "center",
background: isSelected ? "#4664E9" : "transparent",
} }, isSelected && (react_1.default.createElement("div", { style: {
width: "8px",
height: "8px",
backgroundColor: "#fff",
borderRadius: "50%",
} }))),
react_1.default.createElement("div", { style: { display: "flex", alignItems: "center", gap: 8 } },
react_1.default.createElement("img", { src: utils_1.NETWORK_LOGO_URLS[chainId], alt: network.name, style: { width: 24, height: 24 } }),
react_1.default.createElement("span", { style: {
fontWeight: 500,
fontSize: 16,
color: isSelected ? "#4664E9" : "#181D27",
} }, network.name)))));
})),
react_1.default.createElement("div", { style: { display: "flex", gap: 12, marginTop: "auto" } },
react_1.default.createElement("button", { onClick: onBack, style: {
flex: 1,
border: "1px solid #D5D7DA",
background: "#fff",
color: "#414651",
fontWeight: 600,
fontSize: 16,
borderRadius: 8,
padding: "12px 0",
cursor: "pointer",
} }, "Cancel"),
react_1.default.createElement("button", { onClick: onDone, style: {
flex: 1,
border: "none",
background: selectedToNetworksPay.length > 0 ? "#4664E9" : "#D5D7DA",
color: "#fff",
fontWeight: 600,
fontSize: 16,
borderRadius: 8,
padding: "12px 0",
cursor: selectedToNetworksPay.length > 0 ? "pointer" : "not-allowed",
}, disabled: selectedToNetworksPay.length === 0 }, "Done"))));
}
exports.default = SelectSingleNetwork;