wgm-swap-components
Version:
A React component library for token swap interfaces
91 lines (90 loc) • 6.98 kB
JavaScript
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));
};
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState, useEffect } from 'react';
import { createPortal } from 'react-dom';
import { useTokens } from './hooks/useTokens';
export var TokenSelectModal = function (_a) {
var isOpen = _a.isOpen, onClose = _a.onClose, onSelectToken = _a.onSelectToken, selectedToken = _a.selectedToken, excludeToken = _a.excludeToken;
var _b = useState(''), searchQuery = _b[0], setSearchQuery = _b[1];
var _c = useState(''), searchValue = _c[0], setSearchValue = _c[1];
var _d = useState(null), portalElement = _d[0], setPortalElement = _d[1];
var _e = useState([]), favoriteTokens = _e[0], setFavoriteTokens = _e[1];
var _f = useState([]), historyTokens = _f[0], setHistoryTokens = _f[1];
var _g = useTokens(searchQuery), allTokens = _g.tokens, isLoading = _g.isLoading;
useEffect(function () {
try {
var savedFavorites = localStorage.getItem('wgm-favorite-tokens');
var savedHistory = localStorage.getItem('wgm-history-tokens');
if (savedFavorites)
setFavoriteTokens(JSON.parse(savedFavorites));
if (savedHistory)
setHistoryTokens(JSON.parse(savedHistory));
}
catch (error) {
console.error('Error loading tokens from localStorage:', error);
}
}, []);
useEffect(function () {
localStorage.setItem('wgm-favorite-tokens', JSON.stringify(favoriteTokens));
}, [favoriteTokens]);
useEffect(function () {
localStorage.setItem('wgm-history-tokens', JSON.stringify(historyTokens));
}, [historyTokens]);
useEffect(function () {
var element = document.getElementById('wgm-modal-root');
if (!element) {
element = document.createElement('div');
element.id = 'wgm-modal-root';
document.body.appendChild(element);
}
setPortalElement(element);
if (isOpen) {
setSearchQuery('');
setSearchValue('');
}
}, [isOpen]);
var handleTokenSelect = function (token) {
onSelectToken(token);
setHistoryTokens(function (prev) { return __spreadArray([token], prev.filter(function (t) { return t.address !== token.address; }), true).slice(0, 10); });
onClose();
};
var toggleFavorite = function (token, e) {
e.stopPropagation();
var isFavorite = favoriteTokens.some(function (fav) { return fav.address === token.address; });
if (isFavorite) {
setFavoriteTokens(favoriteTokens.filter(function (fav) { return fav.address !== token.address; }));
}
else {
setFavoriteTokens(__spreadArray(__spreadArray([], favoriteTokens, true), [token], false));
}
};
var handleBackdropClick = function (e) {
if (e.target === e.currentTarget)
onClose();
};
if (!isOpen || !portalElement)
return null;
var filteredTokens = allTokens.filter(function (token) { return token.address !== (excludeToken === null || excludeToken === void 0 ? void 0 : excludeToken.address); });
var modalContent = (_jsx("div", { className: "wgm-modal-backdrop", onClick: handleBackdropClick, children: _jsxs("div", { className: "wgm-modal-content", children: [_jsxs("div", { className: "wgm-modal-header", children: [_jsx("h3", { className: "text-xl font-semibold", children: "Select a token" }), _jsx("button", { onClick: onClose, className: "p-1", children: "\u00D7" })] }), _jsx("div", { className: "wgm-modal-search-container", children: _jsx("div", { className: "relative", children: _jsx("input", { type: "text", placeholder: "Search by name or address", value: searchValue, onChange: function (e) {
setSearchValue(e.target.value);
setSearchQuery(e.target.value.toLowerCase());
}, className: "wgm-modal-search-input" }) }) }), historyTokens.length > 0 && (_jsx("div", { className: "wgm-modal-history-container", children: historyTokens.map(function (token) {
var _a;
return (_jsxs("div", { onClick: function () { return handleTokenSelect(token); }, className: "wgm-modal-history-token", children: [token.logoUrl ? (_jsx("img", { src: token.logoUrl, alt: token.symbol, className: "w-5 h-5 rounded-full" })) : (_jsx("div", { className: "w-5 h-5 wgm-token-avatar-placeholder text-xs", children: (_a = token.symbol) === null || _a === void 0 ? void 0 : _a.charAt(0) })), _jsx("span", { className: "font-medium", children: token.symbol })] }, token.address));
}) })), isLoading ? (_jsxs("div", { className: "flex items-center justify-center p-4", children: [_jsx("div", { className: "wgm-modal-loading-spinner" }), _jsx("span", { className: "ml-2", children: "Loading..." })] })) : (_jsx("div", { className: "wgm-modal-token-list", children: filteredTokens.length === 0 ? (_jsx("div", { className: "text-center p-8 text-gray-500", children: "No tokens found" })) : (filteredTokens.map(function (token) {
var _a;
var isSelected = (selectedToken === null || selectedToken === void 0 ? void 0 : selectedToken.address) === token.address;
var isFavorite = favoriteTokens.some(function (fav) { return fav.address === token.address; });
return (_jsxs("button", { onClick: function () { return handleTokenSelect(token); }, className: "wgm-modal-token-button", disabled: isSelected, children: [_jsxs("div", { className: "flex items-center gap-4", children: [token.logoUrl ? (_jsx("img", { src: token.logoUrl, alt: token.symbol, className: "w-8 h-8 rounded-full" })) : (_jsx("div", { className: "w-8 h-8 wgm-token-avatar-placeholder", children: (_a = token.symbol) === null || _a === void 0 ? void 0 : _a.charAt(0) })), _jsxs("div", { className: "flex flex-col items-start", children: [_jsx("span", { className: "font-semibold", children: token.symbol }), _jsx("span", { className: "text-sm text-gray-500", children: token.name })] })] }), _jsxs("div", { className: "flex items-center gap-4", children: [isSelected && _jsx("span", { className: "text-sm font-semibold text-blue-600", children: "Selected" }), _jsx("button", { onClick: function (e) { return toggleFavorite(token, e); }, className: "p-1 text-xl", children: isFavorite ? '★' : '☆' })] })] }, token.address));
})) }))] }) }));
return createPortal(modalContent, portalElement);
};
export default TokenSelectModal;