@enclavemoney/enclave-wallet-sdk
Version:
A simple enclave wallet SDK for React applications
147 lines (146 loc) • 8.18 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");
var WalletProvider_1 = require("./WalletProvider");
var theme_1 = require("../types/theme");
function SelectSingleNetwork(_a) {
var _b;
var availableNetworks = _a.availableNetworks, selectedToNetworksPay = _a.selectedToNetworksPay, setSelectedToNetworksPay = _a.setSelectedToNetworksPay, toToken = _a.toToken, onBack = _a.onBack, onDone = _a.onDone, theme = _a.theme;
var _c = (0, WalletProvider_1.useWallet)(), walletCornerRadius = _c.walletCornerRadius, currentTheme = _c.currentTheme;
var currentRadius = theme_1.borderRadiusStyles[walletCornerRadius];
// 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: currentTheme.surface,
borderRadius: currentRadius.outerRadius,
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: 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",
} }, "Select networks")),
react_1.default.createElement("div", { style: { marginBottom: 16 } },
react_1.default.createElement("p", { style: {
color: currentTheme.textSecondary,
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 ".concat(currentTheme.primary)
: "1px solid ".concat(currentTheme.border),
borderRadius: currentRadius.innerRadius,
cursor: "pointer",
marginBottom: 8,
transition: "all 0.2s ease",
background: isSelected
? currentTheme.surface
: currentTheme.surface,
}, 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
? currentTheme.primary
: currentTheme.border,
borderRadius: "50%",
display: "flex",
alignItems: "center",
justifyContent: "center",
background: isSelected
? currentTheme.primary
: "transparent",
} }, isSelected && (react_1.default.createElement("div", { style: {
width: "8px",
height: "8px",
backgroundColor: currentTheme.surface,
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
? currentTheme.primary
: currentTheme.text,
} }, 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 ".concat(currentTheme.border),
background: currentTheme.surface,
color: currentTheme.text,
fontWeight: 600,
fontSize: 16,
borderRadius: currentRadius.innerRadius,
padding: "16px 0",
cursor: "pointer",
} }, "Cancel"),
react_1.default.createElement("button", { onClick: onDone, style: {
flex: 1,
border: "none",
background: currentTheme.primary,
color: (0, utils_1.getContrastingTextColor)(currentTheme.primary),
fontWeight: 600,
fontSize: 16,
borderRadius: currentRadius.innerRadius,
padding: "16px 0",
cursor: selectedToNetworksPay.length > 0 ? "pointer" : "not-allowed",
opacity: selectedToNetworksPay.length === 0 ? 0.5 : 1,
}, disabled: selectedToNetworksPay.length === 0 }, "Done"))));
}
exports.default = SelectSingleNetwork;