@enclavemoney/enclave-wallet-sdk
Version:
A simple enclave wallet SDK for React applications
271 lines (270 loc) • 14.2 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"));
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;
var _d = (0, react_1.useState)(false), showAllocation = _d[0], setShowAllocation = _d[1];
// Initialize tempSelectedNetworks with existing selections if any
var _e = (0, react_1.useState)(selectedNetworksPay.map(function (network) { return network.name; })), tempSelectedNetworks = _e[0], setTempSelectedNetworks = _e[1];
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 }));
}
// Show message if no networks with balance
if (filteredNetworks.length === 0) {
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: {
display: "flex",
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
padding: "40px 20px",
color: "#717680",
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 #D5D7DA",
background: "#fff",
color: "#414651",
fontWeight: 600,
fontSize: 16,
borderRadius: 8,
padding: "12px 0",
cursor: "pointer",
} }, "Back"))));
}
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: function () {
onBack();
// Reset temp selection when going back
setTempSelectedNetworks([]);
}, 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 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 #3662E3" : "1px solid #D5D7DA",
borderRadius: 12,
cursor: "pointer",
marginBottom: 8,
transition: "all 0.2s ease",
background: isSelected ? "#F6F8FE" : "#fff",
}, 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 ? "#4664E9" : "#E9EAEB",
borderRadius: "4px",
display: "flex",
alignItems: "center",
justifyContent: "center",
background: isSelected ? "#4664E9" : "transparent",
} }, isSelected && (react_1.default.createElement("div", { style: {
width: "10px",
height: "6px",
borderLeft: "2px solid white",
borderBottom: "2px solid white",
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: "#414651",
} }, network.name))),
react_1.default.createElement("div", { style: { display: "flex", alignItems: "center", gap: 8 } },
react_1.default.createElement("span", { style: {
color: "#000",
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 #D5D7DA",
background: "#fff",
color: "#414651",
fontWeight: 600,
fontSize: 16,
borderRadius: 8,
padding: "12px 0",
cursor: "pointer",
} }, "Cancel"),
react_1.default.createElement("button", { onClick: function () { return setShowAllocation(true); }, style: {
flex: 1,
border: "none",
background: tempSelectedNetworks.length > 0 ? "#4664E9" : "#D5D7DA",
color: "#fff",
fontWeight: 600,
fontSize: 16,
borderRadius: 8,
padding: "12px 0",
cursor: tempSelectedNetworks.length > 0 ? "pointer" : "not-allowed",
}, disabled: tempSelectedNetworks.length === 0 }, "Next"))));
}
exports.default = SelectNetwork;