enclave-wallet-sdk
Version:
A simple enclave wallet SDK for React applications
870 lines (869 loc) • 58.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 __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
var __generator = (this && this.__generator) || function (thisArg, body) {
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
function verb(n) { return function (v) { return step([n, v]); }; }
function step(op) {
if (f) throw new TypeError("Generator is already executing.");
while (g && (g = 0, op[0] && (_ = 0)), _) try {
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
if (y = 0, t) op = [op[0] & 2, t.value];
switch (op[0]) {
case 0: case 1: t = op; break;
case 4: _.label++; return { value: op[1], done: false };
case 5: _.label++; y = op[1]; op = [0]; continue;
case 7: op = _.ops.pop(); _.trys.pop(); continue;
default:
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
if (t[2]) _.ops.pop();
_.trys.pop(); continue;
}
op = body.call(thisArg, _);
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
}
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.SwapToken = void 0;
var react_1 = __importStar(require("react"));
var ReviewOrder_1 = __importDefault(require("./ReviewOrder"));
var lucide_react_1 = require("lucide-react");
var MessagePopup_1 = __importDefault(require("./MessagePopup"));
var TokenSelector_1 = __importDefault(require("./TokenSelector"));
var services_1 = require("../services/services");
var Spinner_1 = __importDefault(require("./Spinner"));
var SelectNetwork_1 = __importDefault(require("./SelectNetwork"));
var utils_1 = require("./utils");
var SelectSingleNetwork_1 = __importDefault(require("./SelectSingleNetwork"));
var tokenSelectorStyle = {
width: 100,
height: 44,
borderLeft: "1px solid #D5D7DA",
display: "flex",
alignItems: "center",
justifyContent: "center",
fontWeight: 600,
fontSize: 16,
fontFamily: "Inter, sans-serif",
cursor: "pointer",
paddingLeft: 14,
paddingRight: 14,
gap: 8,
transition: "background-color 0.2s ease",
};
var NetworkAllocationDisplay = function (_a) {
var network = _a.network, amount = _a.amount, symbol = _a.symbol;
return (react_1.default.createElement("div", { style: {
display: "flex",
justifyContent: "space-between",
alignItems: "center",
width: "100%",
padding: "8px 0",
} },
react_1.default.createElement("div", { style: {
display: "flex",
alignItems: "center",
gap: "8px",
} },
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, borderRadius: "50%" } }),
react_1.default.createElement("span", { style: { fontSize: 14, color: "#000000", fontWeight: 500 } }, network)),
react_1.default.createElement("span", { style: { fontSize: 14, color: "#535862" } },
amount,
" ",
symbol)));
};
// Add this helper function at the top level
var calculateTotalAmount = function (networks) {
return networks.reduce(function (total, network) {
return total + (parseFloat(network.amount) || 0);
}, 0);
};
var SwapToken = function (_a) {
var onBack = _a.onBack, walletSDKKey = _a.walletSDKKey, combinedBalance = _a.combinedBalance, initialFromToken = _a.initialFromToken, initialToToken = _a.initialToToken, _b = _a.initialAmount, initialAmount = _b === void 0 ? "" : _b;
var _c = (0, react_1.useState)(initialAmount), amount = _c[0], setAmount = _c[1];
var _d = (0, react_1.useState)(false), proActive = _d[0], setProActive = _d[1];
var _e = (0, react_1.useState)(false), showReviewOrder = _e[0], setShowReviewOrder = _e[1];
var _f = (0, react_1.useState)([]), selectedNetworksPay = _f[0], setSelectedNetworksPay = _f[1];
var _g = (0, react_1.useState)([]), selectedNetworksReceive = _g[0], setSelectedNetworksReceive = _g[1];
var _h = (0, react_1.useState)(""), quoteDetails = _h[0], setQuoteDetails = _h[1];
var _j = (0, react_1.useState)(false), isLoadingQuote = _j[0], setIsLoadingQuote = _j[1];
var _k = (0, react_1.useState)(""), quoteError = _k[0], setQuoteError = _k[1];
var _l = (0, react_1.useState)(false), isLoading = _l[0], setIsLoading = _l[1];
var _m = (0, react_1.useState)(false), showMessagePopup = _m[0], setShowMessagePopup = _m[1];
var _o = (0, react_1.useState)("success"), messageType = _o[0], setMessageType = _o[1];
var _p = (0, react_1.useState)(false), showFromTokenSelector = _p[0], setShowFromTokenSelector = _p[1];
var _q = (0, react_1.useState)(false), showToTokenSelector = _q[0], setShowToTokenSelector = _q[1];
var _r = (0, react_1.useState)([]), tokenOptions = _r[0], setTokenOptions = _r[1];
var _s = (0, react_1.useState)(false), showSelectFromNetworks = _s[0], setShowSelectFromNetworks = _s[1];
var _t = (0, react_1.useState)(false), showPreviewNetworks = _t[0], setShowPreviewNetworks = _t[1];
var _u = (0, react_1.useState)(false), showSelectToNetworks = _u[0], setShowSelectToNetworks = _u[1];
// Add polling interval ref
var pollingIntervalRef = (0, react_1.useRef)(null);
// Transform combinedBalance data into token options
// const tokenOptions = useMemo(() => {
// if (!combinedBalance?.data) return [];
// return combinedBalance.data.map((token: any) => ({
// symbol: token.symbol,
// name: token.name,
// icon: token.logoURI || token.icon,
// address: token.chainIds?.[0]?.address || token.address || "",
// chainId: token.chainIds?.[0]?.chainId || token.chainId || 0,
// chainIds: token.chainIds,
// decimals: token.decimals,
// balance: token.balance,
// amount: token.amount || 0,
// }));
// }, [combinedBalance]);
(0, react_1.useEffect)(function () {
if (combinedBalance === null || combinedBalance === void 0 ? void 0 : combinedBalance.data) {
setTokenOptions(combinedBalance.data.map(function (token) {
var _a, _b, _c, _d;
return ({
symbol: token.symbol,
name: token.name,
icon: token.logoURI || token.icon,
address: ((_b = (_a = token.chainIds) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.address) || token.address || "",
chainId: ((_d = (_c = token.chainIds) === null || _c === void 0 ? void 0 : _c[0]) === null || _d === void 0 ? void 0 : _d.chainId) || token.chainId || 0,
chainIds: token.chainIds,
decimals: token.decimals,
balance: token.balance,
amount: token.amount || 0,
priceUsd: token.priceUsd || 0,
});
}));
}
}, [combinedBalance]);
// Initialize fromToken and toToken with initial values or first two available tokens
var _v = (0, react_1.useState)(null), fromToken = _v[0], setFromToken = _v[1];
var _w = (0, react_1.useState)(null), toToken = _w[0], setToToken = _w[1];
(0, react_1.useEffect)(function () {
// Only set tokens if they haven't been set yet
if (!fromToken && !toToken && tokenOptions.length >= 2) {
if (initialFromToken) {
setFromToken(initialFromToken);
}
else {
setFromToken(tokenOptions[0]);
}
if (initialToToken) {
setToToken(initialToToken);
setSelectedNetworksReceive([
{
name: initialToToken.name,
chainId: initialToToken.chainId,
},
]);
}
else {
setToToken(tokenOptions[1]);
setSelectedNetworksReceive([
{
name: tokenOptions[1].name,
chainId: tokenOptions[1].chainId,
},
]);
}
}
}, [tokenOptions, initialFromToken, initialToToken]);
var getTokenBalance = function (symbol) {
if (!(combinedBalance === null || combinedBalance === void 0 ? void 0 : combinedBalance.data))
return 0;
var tokenData = combinedBalance.data.find(function (token) { return token.symbol === symbol; });
return (tokenData === null || tokenData === void 0 ? void 0 : tokenData.amount) || 0;
};
// Button state variables
var isButtonDisabled = isLoadingQuote ||
(typeof quoteDetails === "string" &&
quoteDetails.includes("Insufficient")) ||
!amount ||
parseFloat(amount) <= 0 ||
!fromToken ||
!toToken ||
fromToken.symbol === toToken.symbol ||
quoteError !== "" ||
(amount > getTokenBalance(fromToken.symbol) && fromToken.symbol !== "USDC");
var buttonBackground = isButtonDisabled ? "#E9EAEB" : "#4664E9";
var buttonTextColor = isButtonDisabled ? "#717680" : "#fff";
var buttonCursor = isButtonDisabled ? "not-allowed" : "pointer";
var getButtonText = function () {
if (!fromToken || !toToken) {
return "Loading tokens...";
}
if (fromToken.symbol === toToken.symbol) {
return "Select different tokens";
}
if (amount > getTokenBalance(fromToken.symbol) &&
fromToken.symbol !== "USDC") {
return "Insufficient funds";
}
if (isLoadingQuote) {
return (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement(Spinner_1.default, null),
react_1.default.createElement("span", null, "Calculating...")));
}
if (quoteError) {
return quoteError;
}
if (typeof quoteDetails === "string" &&
quoteDetails.includes("Insufficient")) {
return "Insufficient funds";
}
if (!amount || parseFloat(amount) <= 0) {
return "Enter an amount";
}
return "Review Order";
};
var API_BASE_URL = "https://hyperapp.in";
var userName = window.__walletSDKInstance.getUsername();
// Effect to fetch quote when amount changes
(0, react_1.useEffect)(function () {
var fetchQuote = function (isPolling) {
if (isPolling === void 0) { isPolling = false; }
return __awaiter(void 0, void 0, void 0, function () {
var quote, error_1;
var _a;
return __generator(this, function (_b) {
switch (_b.label) {
case 0:
if (!toToken || !fromToken) {
return [2 /*return*/];
}
// Don't fetch if amount is empty or zero or tokens are not set
if (!amount || parseFloat(amount) <= 0 || !fromToken || !toToken) {
return [2 /*return*/];
}
// Don't fetch quote if tokens are the same
if (fromToken.symbol === toToken.symbol) {
return [2 /*return*/];
}
// Only reset states and show loading on initial fetch, not during polling
if (!isPolling) {
setQuoteDetails("");
setQuoteError("");
setIsLoadingQuote(true);
}
_b.label = 1;
case 1:
_b.trys.push([1, 3, 4, 5]);
quote = void 0;
return [4 /*yield*/, (0, services_1.getMultiRelaySwapQuote)({
username: userName,
userBalance: proActive
? selectedNetworksPay.map(function (network) {
var _a, _b;
return ({
chainId: network.chainId,
address: (_b = (_a = fromToken.chainIds) === null || _a === void 0 ? void 0 : _a.find(function (chain) { return chain.chainId === network.chainId; })) === null || _b === void 0 ? void 0 : _b.address,
balance: (parseFloat(network.amount) *
Math.pow(10, fromToken.decimals)).toString(),
});
})
: fromToken.chainIds,
outputToken: toToken.address,
outputChainId: proActive
? selectedNetworksReceive[0].chainId
: toToken.chainId,
inputAmount: parseFloat(amount) * Math.pow(10, fromToken.decimals),
proMode: proActive,
}, walletSDKKey)];
case 2:
quote = _b.sent();
if (quote === null || quote === void 0 ? void 0 : quote.error) {
if ((_a = quote === null || quote === void 0 ? void 0 : quote.message) === null || _a === void 0 ? void 0 : _a.includes("Insufficient")) {
setQuoteError("Insufficient funds");
}
else {
setQuoteError("Unable to fetch quote");
}
}
else {
setQuoteDetails(quote);
}
return [3 /*break*/, 5];
case 3:
error_1 = _b.sent();
console.error("Error fetching quote:", error_1);
if (!isPolling) {
setQuoteError("Error fetching quote");
setQuoteDetails("");
}
return [3 /*break*/, 5];
case 4:
if (!isPolling) {
setIsLoadingQuote(false);
}
return [7 /*endfinally*/];
case 5: return [2 /*return*/];
}
});
});
};
// Initial fetch
fetchQuote(false);
// Set up polling interval
pollingIntervalRef.current = setInterval(function () { return fetchQuote(true); }, 20000); // Poll every 10 seconds
// Cleanup function to clear interval when component unmounts or dependencies change
return function () {
if (pollingIntervalRef.current) {
clearInterval(pollingIntervalRef.current);
pollingIntervalRef.current = null;
}
};
}, [
amount,
fromToken,
toToken,
userName,
walletSDKKey,
selectedNetworksReceive,
]);
// Update the output amount based on quote details
var outputAmount = typeof quoteDetails === "string" ? "" : (quoteDetails === null || quoteDetails === void 0 ? void 0 : quoteDetails.amountFormatted) || "";
var calculateRate = function () {
if (typeof quoteDetails === "string" || !(quoteDetails === null || quoteDetails === void 0 ? void 0 : quoteDetails.amountFormatted))
return "0";
return (parseFloat(amount) / parseFloat(quoteDetails.amountFormatted)).toFixed(6);
};
var handleReviewOrder = function () {
setShowReviewOrder(true);
};
var handleBack = function () {
if (showReviewOrder) {
setShowReviewOrder(false);
}
else if (showFromTokenSelector || showToTokenSelector) {
setShowFromTokenSelector(false);
setShowToTokenSelector(false);
}
else {
onBack();
}
};
var handleFromTokenSelect = function (token) {
setFromToken(token);
setSelectedNetworksPay([]);
setShowFromTokenSelector(false);
};
var handleToTokenSelect = function (token) {
setToToken(token);
setSelectedNetworksReceive([]);
setShowToTokenSelector(false);
};
var handleConfirm = function () { return __awaiter(void 0, void 0, void 0, function () {
var data, error_2;
var _a;
return __generator(this, function (_b) {
switch (_b.label) {
case 0:
if (!fromToken || !toToken) {
return [2 /*return*/];
}
_b.label = 1;
case 1:
_b.trys.push([1, 3, 4, 5]);
setIsLoading(true);
return [4 /*yield*/, (0, services_1.executeSwapFlow)({
username: userName,
userBalance: proActive
? selectedNetworksPay.map(function (network) {
var _a, _b;
return ({
chainId: network.chainId,
address: (_b = (_a = fromToken.chainIds) === null || _a === void 0 ? void 0 : _a.find(function (chain) { return chain.chainId === network.chainId; })) === null || _b === void 0 ? void 0 : _b.address,
balance: (parseFloat(network.amount) * Math.pow(10, fromToken.decimals)).toString(),
});
})
: fromToken.chainIds,
outputToken: toToken === null || toToken === void 0 ? void 0 : toToken.address,
outputChainId: proActive
? selectedNetworksReceive[0].chainId
: toToken === null || toToken === void 0 ? void 0 : toToken.chainId,
inputAmount: parseFloat(amount) * Math.pow(10, (fromToken === null || fromToken === void 0 ? void 0 : fromToken.decimals) || 0),
metadata: {
inputToken: {
tokenName: fromToken === null || fromToken === void 0 ? void 0 : fromToken.symbol,
tokenSymbol: fromToken === null || fromToken === void 0 ? void 0 : fromToken.symbol,
tokenAddress: fromToken === null || fromToken === void 0 ? void 0 : fromToken.address,
decimals: fromToken === null || fromToken === void 0 ? void 0 : fromToken.decimals,
logoURI: fromToken === null || fromToken === void 0 ? void 0 : fromToken.icon,
},
outputToken: {
tokenName: toToken === null || toToken === void 0 ? void 0 : toToken.symbol,
tokenSymbol: toToken === null || toToken === void 0 ? void 0 : toToken.symbol,
tokenAddress: toToken === null || toToken === void 0 ? void 0 : toToken.address,
decimals: toToken === null || toToken === void 0 ? void 0 : toToken.decimals,
logoURI: toToken === null || toToken === void 0 ? void 0 : toToken.icon,
},
},
proMode: proActive,
}, walletSDKKey)];
case 2:
data = _b.sent();
if (((_a = data === null || data === void 0 ? void 0 : data.relaySwap) === null || _a === void 0 ? void 0 : _a.success) === true) {
console.log("Transaction successful:", data);
setShowMessagePopup(true);
setMessageType("success");
}
else {
console.error("Transaction failed:", data);
setShowMessagePopup(true);
setMessageType("error");
}
return [3 /*break*/, 5];
case 3:
error_2 = _b.sent();
console.error("Error making transaction:", error_2);
setShowMessagePopup(true);
setMessageType("error");
return [3 /*break*/, 5];
case 4:
setIsLoading(false);
return [7 /*endfinally*/];
case 5: return [2 /*return*/];
}
});
}); };
var networks = [
{
name: "Solana",
icon: "https://firebasestorage.googleapis.com/v0/b/enclave-wallet.appspot.com/o/wallet-sdk%2FSolana.svg?alt=media&token=1185c7a8-3837-4aed-910a-6e7f8f92c45c",
},
{
name: "Arbitrum",
icon: "https://firebasestorage.googleapis.com/v0/b/enclave-wallet.appspot.com/o/wallet-sdk%2FArbitrum.svg?alt=media&token=1185c7a8-3837-4aed-910a-6e7f8f92c45c",
},
{
name: "Optimism",
icon: "https://firebasestorage.googleapis.com/v0/b/enclave-wallet.appspot.com/o/wallet-sdk%2FOptimism.svg?alt=media&token=1185c7a8-3837-4aed-910a-6e7f8f92c45c",
},
{
name: "Base",
icon: "https://firebasestorage.googleapis.com/v0/b/enclave-wallet.appspot.com/o/wallet-sdk%2FBase.svg?alt=media&token=1185c7a8-3837-4aed-910a-6e7f8f92c45c",
},
];
// Calculate total amount
var totalAmount = (0, react_1.useMemo)(function () {
return calculateTotalAmount(selectedNetworksPay);
}, [selectedNetworksPay]);
(0, react_1.useEffect)(function () {
setAmount(totalAmount.toString());
}, [totalAmount]);
console.log("selectedNetworksReceive", selectedNetworksReceive);
if (showMessagePopup) {
return (react_1.default.createElement("div", null,
react_1.default.createElement(MessagePopup_1.default, { handleDone: function () {
onBack();
setShowMessagePopup(false);
}, type: messageType, customContent: messageType === "success" ? (react_1.default.createElement("div", { style: {
display: "flex",
flexDirection: "column",
gap: 8,
alignItems: "center",
justifyContent: "center",
textAlign: "center",
} },
react_1.default.createElement("h1", { style: { fontSize: 18, fontWeight: 600, fontFamily: "Inter" } }, "Transaction successful"),
react_1.default.createElement("p", { style: {
fontSize: 15,
color: "#535862",
fontFamily: "Inter",
} }, "Please check your balance."))) : (react_1.default.createElement("div", null,
react_1.default.createElement("h1", { style: { fontSize: 18, fontWeight: 600, fontFamily: "Inter" } }, "Transaction failed"),
react_1.default.createElement("p", { style: {
fontSize: 15,
color: "#535862",
fontFamily: "Inter",
} }, "Please try again."))) })));
}
if (showSelectToNetworks) {
return (react_1.default.createElement(SelectSingleNetwork_1.default, { availableNetworks: networks, selectedToNetworksPay: selectedNetworksReceive, setSelectedToNetworksPay: setSelectedNetworksReceive, toToken: toToken, onBack: function () { return setShowSelectToNetworks(false); }, onDone: function () {
setShowSelectToNetworks(false);
} }));
}
if (showSelectFromNetworks) {
return (react_1.default.createElement(SelectNetwork_1.default, { availableNetworks: networks, selectedNetworksPay: selectedNetworksPay, setSelectedNetworksPay: setSelectedNetworksPay, fromToken: fromToken, onBack: function () { return setShowSelectFromNetworks(false); }, onDone: function (networks) {
setSelectedNetworksPay(networks);
setShowSelectFromNetworks(false);
} }));
}
// Show From Token Selector
if (showFromTokenSelector) {
return (react_1.default.createElement(TokenSelector_1.default, { title: "Select token to pay", tokens: tokenOptions, onTokenSelect: handleFromTokenSelect, onBack: function () { return setShowFromTokenSelector(false); }, isLoading: !(combinedBalance === null || combinedBalance === void 0 ? void 0 : combinedBalance.data), showActions: false }));
}
// Show To Token Selector
if (showToTokenSelector) {
return (react_1.default.createElement(TokenSelector_1.default, { title: "Select token to receive", tokens: tokenOptions, onTokenSelect: handleToTokenSelect, onBack: function () { return setShowToTokenSelector(false); }, isLoading: !(combinedBalance === null || combinedBalance === void 0 ? void 0 : combinedBalance.data), showActions: false }));
}
return (react_1.default.createElement("div", { style: {
background: "#fff",
borderRadius: 20,
width: "100%",
minWidth: 420,
margin: "0 auto",
position: "relative",
fontFamily: "Inter, sans-serif",
} },
react_1.default.createElement("div", { style: {
display: "flex",
alignItems: "center",
marginBottom: 28,
fontFamily: "Inter, sans-serif",
} },
react_1.default.createElement("button", { onClick: handleBack, style: {
background: "none",
border: "none",
fontSize: 22,
color: "#222",
cursor: "pointer",
marginRight: 8,
fontFamily: "Inter, sans-serif",
} },
react_1.default.createElement(lucide_react_1.ArrowLeft, { style: { width: 24, height: 24, color: "#717680" } })),
react_1.default.createElement("div", { style: {
flex: 1,
textAlign: "center",
fontWeight: 600,
fontSize: 22,
fontFamily: "Inter, sans-serif",
} }, showReviewOrder ? "Review Order" : "Swap tokens instantly"),
!showReviewOrder && (react_1.default.createElement("div", { style: { marginLeft: 8, fontFamily: "Inter, sans-serif" } },
react_1.default.createElement("button", { type: "button", "aria-pressed": proActive, onClick: function () { return setProActive(function (v) { return !v; }); }, style: {
width: 50,
height: 27,
background: proActive ? "#4664E9" : "#E9EAEB",
borderRadius: 28,
display: "flex",
alignItems: "center",
position: "relative",
boxShadow: proActive
? "0 2px 8px rgba(70,100,233,0.15)"
: "0 2px 8px rgba(0,0,0,0.06)",
border: "none",
cursor: "pointer",
transition: "background 0.2s cubic-bezier(.4,0,.2,1)",
padding: 0,
outline: proActive ? "2px solid #4664E9" : "none",
fontFamily: "Inter, sans-serif",
} },
react_1.default.createElement("span", { style: {
width: 24,
height: 24,
background: "#fff",
borderRadius: "50%",
display: "flex",
alignItems: "center",
justifyContent: "center",
position: "absolute",
left: proActive ? 24 : 0,
top: "50%",
transform: "translateY(-50%)",
boxShadow: "0 2px 8px rgba(70,100,233,0.15)",
transition: "left 0.2s cubic-bezier(.4,0,.2,1)",
zIndex: 3,
fontWeight: 700,
fontSize: 8,
color: proActive ? "#4664E9" : "#A0A4AB",
userSelect: "none",
fontFamily: "Inter, sans-serif",
} }, "PRO"))))),
showReviewOrder ? (react_1.default.createElement(ReviewOrder_1.default, { rate: parseFloat(calculateRate()), slippage: "1%", fromToken: fromToken, toToken: toToken, fromAmount: amount, toAmount: outputAmount, onBack: handleBack, onConfirm: handleConfirm, selectedNetworksPay: selectedNetworksPay, selectedNetworksReceive: selectedNetworksReceive, proActive: proActive, isLoading: isLoading })) : (react_1.default.createElement("div", null,
react_1.default.createElement("div", { style: {
border: "none",
borderRadius: 32,
padding: 0,
marginBottom: 16,
background: "none",
fontFamily: "Inter, sans-serif",
} },
react_1.default.createElement("div", { style: {
color: "#1E1E1E",
fontSize: 14,
marginBottom: 8,
fontWeight: 500,
fontFamily: "Inter, sans-serif",
} },
"You Pay",
react_1.default.createElement("span", { style: { float: "right", fontSize: 13, color: "#B4B4B6" } },
"Max: ",
fromToken ? getTokenBalance(fromToken.symbol) : 0,
" ",
(fromToken === null || fromToken === void 0 ? void 0 : fromToken.symbol) || "")),
react_1.default.createElement("div", { style: {
padding: proActive ? 12 : 0,
border: proActive ? "1px solid #3662E3" : "none",
background: proActive ? "#EBF0FF" : "none",
borderRadius: 12,
fontFamily: "Inter, sans-serif",
} },
!proActive && (react_1.default.createElement("div", { style: { display: "flex", alignItems: "center", gap: 0 } },
react_1.default.createElement("div", { style: {
flex: 1,
display: "flex",
alignItems: "center",
borderRadius: 8,
padding: "0 0 0 14px",
height: 56,
position: "relative",
border: "1px solid #D5D7DA",
background: "#fff",
fontFamily: "Inter, sans-serif",
} },
react_1.default.createElement("input", { type: "number", min: "0", value: amount, onChange: function (e) { return setAmount(e.target.value); }, placeholder: "0", style: {
background: "transparent",
border: "none",
color: "black",
fontSize: 20,
fontWeight: 400,
width: "100%",
outline: "none",
textAlign: "left",
paddingRight: 10,
fontFamily: "Inter, sans-serif",
} }),
react_1.default.createElement("div", { style: tokenSelectorStyle, onClick: function () { return setShowFromTokenSelector(true); } },
fromToken &&
(fromToken.icon ? (react_1.default.createElement("img", { src: fromToken.icon, alt: fromToken.symbol, style: {
width: 26,
height: 26,
borderRadius: "50%",
} })) : (react_1.default.createElement(lucide_react_1.CircleStop, { style: {
width: 26,
height: 26,
position: "absolute",
left: "10px",
top: "50%",
transform: "translateY(-50%)",
borderRadius: "50%",
} }))),
react_1.default.createElement("button", { style: {
outline: "none",
border: "none",
background: "transparent",
cursor: "pointer",
fontWeight: 600,
fontSize: 16,
fontFamily: "Inter, sans-serif",
} }, (fromToken === null || fromToken === void 0 ? void 0 : fromToken.symbol) || "Select"))))),
proActive && (react_1.default.createElement("div", { style: { marginTop: 10 } },
react_1.default.createElement("div", { style: {
padding: "12px 14px",
border: "1px solid #D5D7DA",
borderRadius: 8,
display: "flex",
alignItems: "center",
justifyContent: "space-between",
background: "white",
marginBottom: 8,
}, onClick: function () { return setShowFromTokenSelector(true); } },
react_1.default.createElement("div", { style: { display: "flex", alignItems: "center" } },
react_1.default.createElement("img", { src: fromToken === null || fromToken === void 0 ? void 0 : fromToken.icon, alt: fromToken === null || fromToken === void 0 ? void 0 : fromToken.symbol, style: { width: 44, height: 44, borderRadius: "50%" } }),
react_1.default.createElement("div", { style: {
marginLeft: 8,
display: "flex",
flexDirection: "column",
gap: 2,
} },
react_1.default.createElement("span", { style: {
fontSize: 16,
color: "#414651",
fontWeight: 600,
} }, fromToken === null || fromToken === void 0 ? void 0 : fromToken.symbol),
react_1.default.createElement("span", { style: { fontSize: 12, color: "#535862" } }, fromToken === null || fromToken === void 0 ? void 0 : fromToken.name))),
react_1.default.createElement(lucide_react_1.ChevronRight, { style: { width: 16, height: 16, color: "#717680" } })),
selectedNetworksPay.length > 0 ? (react_1.default.createElement("div", { style: {
borderRadius: 8,
overflow: "hidden",
background: "white",
} },
react_1.default.createElement("button", { onClick: function () { return setShowPreviewNetworks(function (v) { return !v; }); }, style: {
width: "100%",
background: "white",
border: "none",
padding: "12px 16px",
display: "flex",
justifyContent: "space-between",
alignItems: "center",
cursor: "pointer",
textAlign: "left",
} },
react_1.default.createElement("span", { style: {
fontSize: 16,
color: "#1E1E1E",
fontWeight: 400,
} },
selectedNetworksPay.length,
" Networks"),
showPreviewNetworks ? (react_1.default.createElement(lucide_react_1.ChevronUp, { style: { width: 16, height: 16, color: "#717680" } })) : (react_1.default.createElement(lucide_react_1.ChevronDown, { style: { width: 16, height: 16, color: "#717680" } }))),
showPreviewNetworks && (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement("div", { style: { padding: "1px 16px" } }, selectedNetworksPay.map(function (network, index) { return (react_1.default.createElement("div", { style: {
borderTop: index === 0 ? "1px solid #D5D7DA" : "none",
} },
react_1.default.createElement(NetworkAllocationDisplay, { key: network.name, network: network.name, amount: network.amount, symbol: (fromToken === null || fromToken === void 0 ? void 0 : fromToken.symbol) || "" }))); })),
react_1.default.createElement("div", { style: { padding: "8px 16px 16px" } },
react_1.default.createElement("button", { onClick: function () { return setShowSelectFromNetworks(true); }, style: {
width: "100%",
height: 44,
background: "white",
border: "1px solid #3662E3",
borderRadius: 8,
color: "#3662E3",
fontSize: 15,
fontWeight: 500,
cursor: "pointer",
} }, "Edit Allocation")))))) : (react_1.default.createElement("button", { onClick: function () { return setShowSelectFromNetworks(true); }, style: {
width: "100%",
height: 48,
fontSize: 16,
color: "#A0A4AB",
fontWeight: 500,
background: "#fff",
border: "1px solid #D5D7DA",
borderRadius: 8,
cursor: "pointer",
display: "flex",
alignItems: "center",
justifyContent: "space-between",
gap: 8,
padding: "0 16px",
} },
react_1.default.createElement("span", null, "Select Networks"),
react_1.default.createElement(lucide_react_1.ChevronRight, { style: { width: 20, height: 20, color: "#A0A4AB" } }))),
react_1.default.createElement("div", { style: {
marginTop: 16,
padding: "24px",
background: "#F6F8FC",
borderRadius: 8,
display: "flex",
flexDirection: "column",
alignItems: "center",
gap: 4,
} },
react_1.default.createElement("div", { style: {
display: "flex",
alignItems: "baseline",
gap: 8,
} },
react_1.default.createElement("span", { style: {
fontSize: 32,
fontWeight: 600,
color: "#1E1E1E",
fontFamily: "Inter",
} }, totalAmount),
react_1.default.createElement("span", { style: {
fontSize: 32,
fontWeight: 600,
color: "#1E1E1E",
fontFamily: "Inter",
} }, fromToken === null || fromToken === void 0 ? void 0 : fromToken.symbol)),
react_1.default.createElement("span", { style: {
fontSize: 15,
color: "#717680",
fontFamily: "Inter",
} },
"$",
Number(totalAmount) * Number((fromToken === null || fromToken === void 0 ? void 0 : fromToken.priceUsd) || 0))))))),
react_1.default.createElement("div", { style: {
display: "flex",
justifyContent: "center",
alignItems: "center",
margin: "40px 0 20px 0",
borderBottom: "1px solid #D5D7DA",
zIndex: 2,
} },
react_1.default.createElement("div", { style: {
border: "1px solid #D5D7DA",
background: "white",
position: "absolute",
borderRadius: 6,
width: 32,
height: 32,
display: "flex",
alignItems: "center",
justifyContent: "center",
outline: "10px solid #ffffff",
} },
react_1.default.createElement(lucide_react_1.ArrowDownUp, { style: { width: 20, height: 20, color: "black" } }))),
react_1.default.createElement("div", null,
react_1.default.createElement("div", { style: {
color: "#1E1E1E",
fontSize: 14,
marginBottom: 8,
fontWeight: 500,
fontFamily: "Inter, sans-serif",
} },
"You receive",
isLoadingQuote && (react_1.default.createElement("span", { style: { marginLeft: 8, color: "#4664E9" } }, "Loading..."))),
react_1.default.createElement("div", { style: {
padding: proActive ? 12 : 0,
border: proActive ? "1px solid #3662E3" : "none",
background: proActive ? "#EBF0FF" : "none",
borderRadius: 12,
fontFamily: "Inter, sans-serif",
} },
!proActive && (react_1.default.createElement("div", { style: { display: "flex", alignItems: "center", gap: 0 } },
react_1.default.createElement("div", { style: {
flex: 1,
display: "flex",
alignItems: "center",
borderRadius: 8,
padding: "0 0 0 14px",
height: 56,
position: "relative",
border: "1px solid #D5D7DA",
background: "#fff",
fontFamily: "Inter, sans-serif",
} },
react_1.default.createElement("input", { type: "text", value: outputAmount, readOnly: true, placeholder: "0", style: {
background: "transparent",
border: "none",
color: "black",
fontSize: 20,
fontWeight: 400,
width: "100%",
outline: "none",
textAlign: "left",
paddingRight: 60,
fontFamily: "Inter, sans-serif",
} }),
react_1.default.createElement("div", { style: tokenSelectorStyle, onClick: function () { return setShowToTokenSelector(true); } },
toToken &&
(toToken.icon ? (react_1.default.createElement("img", { src: toToken.icon, alt: toToken.symbol, style: {
width: 26,