@enclavemoney/enclave-wallet-sdk
Version:
A simple enclave wallet SDK for React applications
288 lines (287 loc) • 15.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 __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
if (ar || !(i in from)) {
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
ar[i] = from[i];
}
}
return to.concat(ar || Array.prototype.slice.call(from));
};
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 utils_1 = require("./utils");
var lucide_react_1 = require("lucide-react");
var TokenAllocation_1 = __importDefault(require("./TokenAllocation"));
var WalletProvider_1 = require("./WalletProvider");
var theme_1 = require("../types/theme");
function SelectNetwork(_a) {
var _b;
var availableNetworks = _a.availableNetworks, selectedNetworksPay = _a.selectedNetworksPay, setSelectedNetworksPay = _a.setSelectedNetworksPay, fromToken = _a.fromToken, onBack = _a.onBack, onDone = _a.onDone, _c = _a.type, type = _c === void 0 ? "SWAP" : _c, _d = _a.theme, theme = _d === void 0 ? "light" : _d;
var _e = (0, react_1.useState)(false), showAllocation = _e[0], setShowAllocation = _e[1];
// Initialize tempSelectedNetworks with existing selections if any
var _f = (0, react_1.useState)(selectedNetworksPay.map(function (network) { return network.name; })), tempSelectedNetworks = _f[0], setTempSelectedNetworks = _f[1];
var _g = (0, WalletProvider_1.useWallet)(), walletCornerRadius = _g.walletCornerRadius, currentTheme = _g.currentTheme;
var currentRadius = theme_1.borderRadiusStyles[walletCornerRadius];
var handleNetworkSelect = function (networkName) {
setTempSelectedNetworks(function (prev) {
if (prev.includes(networkName)) {
return prev.filter(function (net) { return net !== networkName; });
}
else {
return __spreadArray(__spreadArray([], prev, true), [networkName], false);
}
});
};
var isNetworkSelected = function (networkName) {
return tempSelectedNetworks.includes(networkName);
};
// Filter networks based on fromToken's chainIds and non-zero balances
var availableChainIds = ((_b = fromToken === null || fromToken === void 0 ? void 0 : fromToken.chainIds) === null || _b === void 0 ? void 0 : _b.map(function (chain) { return chain.chainId; })) || [];
var filteredNetworks = availableNetworks.filter(function (network) {
var _a, _b;
var chainId = utils_1.NETWORK_NAME_TO_CHAIN_ID[network.name];
var tokenChainInfo = (_a = fromToken === null || fromToken === void 0 ? void 0 : fromToken.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";
return availableChainIds.includes(chainId) && parseFloat(chainBalance) > 0;
});
console.log(type);
if (showAllocation) {
return (react_1.default.createElement(TokenAllocation_1.default, { selectedNetworks: tempSelectedNetworks, fromToken: fromToken, onBack: function () {
setShowAllocation(false);
// When editing, don't reset the temp selections
if (selectedNetworksPay.length === 0) {
setTempSelectedNetworks([]);
}
}, onDone: function (allocations) {
setSelectedNetworksPay(allocations);
onDone(allocations);
},
// Pass existing allocations when editing
initialAllocations: selectedNetworksPay, theme: theme }));
}
// Show message if no networks with balance
if (filteredNetworks.length === 0) {
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: 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",
color: currentTheme.text,
} }, "Select networks")),
react_1.default.createElement("div", { style: {
display: "flex",
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
padding: "40px 20px",
color: currentTheme.textSecondary,
textAlign: "center",
} },
react_1.default.createElement("p", { style: { fontSize: 15, margin: 0 } },
"No networks available with ", fromToken === null || fromToken === void 0 ? void 0 :
fromToken.symbol,
" balance")),
react_1.default.createElement("div", { style: { display: "flex", gap: 12, marginTop: "auto" } },
react_1.default.createElement("button", { onClick: onBack, style: {
width: "100%",
border: "1px solid ".concat(currentTheme.border),
background: currentTheme.surface,
color: currentTheme.text,
fontWeight: 600,
fontSize: 16,
borderRadius: currentRadius.innerRadius,
padding: "16px 0",
cursor: "pointer",
} }, "Back"))));
}
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: 8,
position: "relative",
} },
react_1.default.createElement("button", { onClick: function () {
onBack();
// Reset temp selection when going back
setTempSelectedNetworks([]);
}, 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,
} }, "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 one or more networks for your",
" ",
type === "SWAP" ? "swap" : "transfer")),
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 = fromToken === null || fromToken === void 0 ? void 0 : fromToken.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, (fromToken === null || fromToken === void 0 ? void 0 : fromToken.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.surfaceActive
: currentTheme.surface,
}, onClick: function () { return handleNetworkSelect(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: currentRadius.innerRadius,
display: "flex",
alignItems: "center",
justifyContent: "center",
background: isSelected
? currentTheme.primary
: "transparent",
} }, isSelected && (react_1.default.createElement("div", { style: {
width: "10px",
height: "6px",
borderLeft: "2px solid ".concat((0, utils_1.getContrastingTextColor)(currentTheme.primary)),
borderBottom: "2px solid ".concat((0, utils_1.getContrastingTextColor)(currentTheme.primary)),
transform: "rotate(-45deg)",
marginTop: "-2px",
} }))),
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: currentTheme.text,
} }, network.name))),
react_1.default.createElement("div", { style: { display: "flex", alignItems: "center", gap: 8 } },
react_1.default.createElement("span", { style: {
color: currentTheme.text,
fontSize: 14,
fontWeight: 600,
} },
formattedBalance.toFixed(6),
" ", fromToken === null || fromToken === void 0 ? void 0 :
fromToken.symbol))));
})),
react_1.default.createElement("div", { style: { display: "flex", gap: 12, marginTop: "auto" } },
react_1.default.createElement("button", { onClick: function () {
onBack();
// Reset temp selection when going back
setTempSelectedNetworks([]);
}, style: {
flex: 1,
border: "1px solid ".concat(currentTheme.border),
background: currentTheme.surface,
color: currentTheme.text,
fontWeight: 600,
fontSize: 16,
borderRadius: currentRadius.innerRadius,
padding: "12px 0",
cursor: "pointer",
} }, "Cancel"),
react_1.default.createElement("button", { onClick: function () { return setShowAllocation(true); }, 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: tempSelectedNetworks.length > 0 ? "pointer" : "not-allowed",
opacity: tempSelectedNetworks.length === 0 ? 0.5 : 1,
}, disabled: tempSelectedNetworks.length === 0 }, "Next"))));
}
exports.default = SelectNetwork;