@enclavemoney/enclave-wallet-sdk
Version:
A simple enclave wallet SDK for React applications
239 lines (238 loc) • 12.5 kB
JavaScript
"use strict";
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
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;
};
Object.defineProperty(exports, "__esModule", { value: true });
var react_1 = __importStar(require("react"));
var lucide_react_1 = require("lucide-react");
var ethers_1 = require("ethers");
var utils_1 = require("./utils");
var utils_2 = require("./utils");
var TokenAllocation = function (_a) {
var selectedNetworks = _a.selectedNetworks, fromToken = _a.fromToken, onBack = _a.onBack, onDone = _a.onDone, _b = _a.initialAllocations, initialAllocations = _b === void 0 ? [] : _b;
var _c = (0, react_1.useState)(function () {
var initial = selectedNetworks.reduce(function (acc, network) {
var _a;
var existingAllocation = initialAllocations.find(function (a) { return a.name === network; });
return __assign(__assign({}, acc), (_a = {}, _a[network] = (existingAllocation === null || existingAllocation === void 0 ? void 0 : existingAllocation.amount) || "", _a));
}, {});
return initial;
}), allocations = _c[0], setAllocations = _c[1];
var _d = (0, react_1.useState)({}), errors = _d[0], setErrors = _d[1];
var getNetworkBalance = function (networkName) {
var _a, _b;
var chainId = utils_1.NETWORK_NAME_TO_CHAIN_ID[networkName];
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 (0, ethers_1.formatUnits)(chainBalance, (fromToken === null || fromToken === void 0 ? void 0 : fromToken.decimals) || 6);
};
var handleInputChange = function (network, value) {
// Validate and sanitize the input first
var sanitizedValue = (0, utils_2.validateNumericInput)(value, fromToken === null || fromToken === void 0 ? void 0 : fromToken.decimals);
var balance = getNetworkBalance(network);
// Compare using parseUnits for both values
var numValueWei = sanitizedValue
? (0, ethers_1.parseUnits)(sanitizedValue, (fromToken === null || fromToken === void 0 ? void 0 : fromToken.decimals) || 6)
: BigInt(0);
var balanceWei = (0, ethers_1.parseUnits)(balance, (fromToken === null || fromToken === void 0 ? void 0 : fromToken.decimals) || 6);
setAllocations(function (prev) {
var _a;
return (__assign(__assign({}, prev), (_a = {}, _a[network] = sanitizedValue, _a)));
});
// Update error state
setErrors(function (prev) {
var _a;
return (__assign(__assign({}, prev), (_a = {}, _a[network] = numValueWei > balanceWei ? "Insufficient balance" : "", _a)));
});
};
var isValid = (0, react_1.useMemo)(function () {
return (Object.values(errors).every(function (error) { return !error; }) && // No errors
Object.values(allocations).some(function (amount) {
if (!amount)
return false;
try {
var amountWei = (0, ethers_1.parseUnits)(amount, (fromToken === null || fromToken === void 0 ? void 0 : fromToken.decimals) || 6);
return amountWei > BigInt(0);
}
catch (_a) {
return false;
}
}) // At least one amount > 0
);
}, [errors, allocations, fromToken === null || fromToken === void 0 ? void 0 : fromToken.decimals]);
var handleDone = function () {
var networkAllocations = selectedNetworks.map(function (network) { return ({
name: network,
chainId: utils_1.NETWORK_NAME_TO_CHAIN_ID[network],
amount: allocations[network],
}); });
onDone(networkAllocations);
};
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",
} }, "Enter Token Allocation")),
react_1.default.createElement("div", { style: {
marginBottom: 16,
width: "100%",
display: "flex",
justifyContent: "center",
} },
react_1.default.createElement("p", { style: {
color: "#717680",
fontSize: 14,
margin: "0 0 6px 0",
textAlign: "center",
width: "300px",
} },
"Specify how much ", fromToken === null || fromToken === void 0 ? void 0 :
fromToken.symbol,
" you want to send out of each network")),
react_1.default.createElement("div", { style: { marginBottom: 24 } }, selectedNetworks.map(function (network) {
var balance = getNetworkBalance(network);
var hasError = errors[network];
return (react_1.default.createElement("div", { key: network, style: {
padding: "16px 0px",
display: "flex",
flexDirection: "column",
gap: 8,
} },
react_1.default.createElement("div", { style: { display: "flex", justifyContent: "space-between" } },
react_1.default.createElement("div", { style: {
display: "flex",
alignItems: "center",
gap: 8,
marginBottom: 8,
} },
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 } }),
react_1.default.createElement("span", { style: { fontWeight: 500, fontSize: 16 } }, network)),
react_1.default.createElement("div", { style: {
display: "flex",
fontSize: 14,
color: "#717680",
alignItems: "center",
gap: 8,
} },
react_1.default.createElement("span", null,
"Bal: ",
parseFloat(balance).toFixed(6),
" ", fromToken === null || fromToken === void 0 ? void 0 :
fromToken.symbol),
react_1.default.createElement("button", { onClick: function () {
return handleInputChange(network, balance.toString());
}, style: {
background: "none",
border: "none",
color: "#4664E9",
cursor: "pointer",
padding: 0,
borderLeft: "1px solid #D5D7DA",
paddingLeft: 8,
} }, "Max"))),
react_1.default.createElement("div", { style: {
display: "flex",
flexDirection: "column",
gap: 4,
} },
react_1.default.createElement("div", { style: { flex: 1, position: "relative" } },
react_1.default.createElement("input", { type: "text", value: allocations[network], onChange: function (e) { return handleInputChange(network, e.target.value); }, onKeyDown: function (e) {
return (0, utils_2.handleNumericKeyDown)(e, allocations[network], fromToken === null || fromToken === void 0 ? void 0 : fromToken.decimals);
}, placeholder: "0.00", style: {
width: "100%",
padding: "12px 70px 12px 12px",
border: "1px solid ".concat(hasError ? "#FF4D4F" : "#D5D7DA"),
borderRadius: 8,
backgroundColor: "white",
fontSize: 16,
outline: "none",
} }),
react_1.default.createElement("span", { style: {
position: "absolute",
right: 12,
top: "50%",
transform: "translateY(-50%)",
color: "#717680",
} }, fromToken === null || fromToken === void 0 ? void 0 : fromToken.symbol)),
hasError && (react_1.default.createElement("span", { style: { color: "#FF4D4F", fontSize: 12 } }, errors[network])))));
})),
react_1.default.createElement("div", { style: { display: "flex", gap: 12, padding: "0 16px" } },
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",
} }, "Go back"),
react_1.default.createElement("button", { onClick: handleDone, disabled: !isValid, style: {
flex: 1,
border: "none",
background: isValid ? "#4664E9" : "#D5D7DA",
color: "#fff",
fontWeight: 600,
fontSize: 16,
borderRadius: 8,
cursor: isValid ? "pointer" : "not-allowed",
} }, "Done"))));
};
exports.default = TokenAllocation;