enclave-wallet-sdk
Version:
A simple enclave wallet SDK for React applications
176 lines (175 loc) • 9.11 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 __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 lucide_react_1 = require("lucide-react");
var Spinner_1 = __importDefault(require("./Spinner"));
var styles = "\n .hide-scrollbar::-webkit-scrollbar {\n display: none;\n }\n";
var TokenSelector = function (_a) {
var title = _a.title, tokens = _a.tokens, onTokenSelect = _a.onTokenSelect, onBack = _a.onBack, _b = _a.isLoading, isLoading = _b === void 0 ? false : _b, tokenFilter = _a.tokenFilter, _c = _a.showActions, showActions = _c === void 0 ? true : _c;
var _d = (0, react_1.useState)(""), searchQuery = _d[0], setSearchQuery = _d[1];
// Filter tokens based on search query and optional token filter
var filteredTokens = (0, react_1.useMemo)(function () {
var filtered = tokens;
// Apply token filter if provided
if (tokenFilter && tokenFilter.length > 0) {
filtered = filtered.filter(function (token) {
return tokenFilter.includes(token.symbol);
});
}
// Apply search filter
if (searchQuery) {
var query_1 = searchQuery.toLowerCase();
filtered = filtered.filter(function (token) {
return token.name.toLowerCase().includes(query_1) ||
token.symbol.toLowerCase().includes(query_1) ||
(token.address && token.address.toLowerCase().includes(query_1));
});
}
return filtered;
}, [tokens, searchQuery, tokenFilter]);
return (react_1.default.createElement(react_1.default.Fragment, null,
react_1.default.createElement("style", null, styles),
react_1.default.createElement("div", { style: {
width: "100%",
minWidth: 430,
background: "#fff",
borderRadius: 20,
fontFamily: "Inter, sans-serif",
display: "flex",
flexDirection: "column",
height: "550px",
} },
react_1.default.createElement("div", { style: {
display: "flex",
alignItems: "center",
marginBottom: 18,
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",
} }, title)),
react_1.default.createElement("div", { style: { position: "relative", marginBottom: 18 } },
react_1.default.createElement(lucide_react_1.Search, { style: {
position: "absolute",
left: 14,
top: "50%",
transform: "translateY(-50%)",
width: 18,
height: 18,
color: "#717680",
} }),
react_1.default.createElement("input", { type: "text", placeholder: "Search name or paste address...", value: searchQuery, onChange: function (e) { return setSearchQuery(e.target.value); }, style: {
width: "100%",
padding: "10px 14px 10px 40px",
borderRadius: 10,
border: "1px solid #E0E0E0",
fontSize: 16,
color: "#717680",
outline: "none",
} })),
react_1.default.createElement("div", null,
react_1.default.createElement("div", { style: {
flex: 1,
overflowY: "auto",
maxHeight: "400px",
paddingRight: 8,
msOverflowStyle: "none" /* IE and Edge */,
scrollbarWidth: "none" /* Firefox */,
WebkitOverflowScrolling: "touch",
}, className: "hide-scrollbar" }, isLoading ? (react_1.default.createElement("div", { style: {
display: "flex",
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
height: "200px",
gap: "16px",
} },
react_1.default.createElement(Spinner_1.default, null),
react_1.default.createElement("span", { style: { color: "#717680", fontSize: 16 } }, "Loading Tokens..."))) : (filteredTokens.map(function (token, idx) { return (react_1.default.createElement("div", { key: "".concat(token.symbol, "-").concat(idx), style: {
display: "flex",
alignItems: "center",
padding: "14px 0",
borderBottom: idx !== filteredTokens.length - 1
? "1px solid #E9EAEB"
: "none",
cursor: "pointer",
transition: "background 0.1s",
}, onClick: function () { return onTokenSelect(token); } },
react_1.default.createElement("div", { style: {
width: 36,
height: 36,
borderRadius: 18,
background: "#eee",
display: "flex",
alignItems: "center",
justifyContent: "center",
fontSize: 18,
marginRight: 12,
overflow: "hidden",
} },
react_1.default.createElement("img", { src: token.logoURI || token.icon, alt: token.name, style: {
width: "100%",
height: "100%",
objectFit: "cover",
} })),
react_1.default.createElement("div", { style: { flexGrow: 1 } },
react_1.default.createElement("div", { style: { fontWeight: 600 } }, token.name),
react_1.default.createElement("div", { style: { color: "#666", fontSize: 12 } },
token.amount || "0",
" ",
token.symbol)),
showActions && (react_1.default.createElement("div", { style: { display: "flex", gap: 12 } },
react_1.default.createElement(lucide_react_1.QrCode, { style: {
width: 18,
height: 18,
color: "#888",
cursor: "pointer",
} }),
react_1.default.createElement(lucide_react_1.Copy, { style: {
width: 18,
height: 18,
color: "#888",
cursor: "pointer",
} }))))); })))))));
};
exports.default = TokenSelector;