@lifi/widget
Version:
LI.FI Widget for cross-chain bridging and swapping. It will drive your multi-chain strategy and attract new users from everywhere.
32 lines • 1.77 kB
JavaScript
import { jsx as _jsx } from "react/jsx-runtime";
import { useMemo, useRef } from 'react';
import { useTranslation } from 'react-i18next';
import { useSettingsStore } from '../../stores/settings/SettingsStore.js';
import { useSettingsActions } from '../../stores/settings/useSettingsActions.js';
import { SearchList } from '../Search/SearchInput.style.js';
import { SearchNotFound } from '../Search/SearchNotFound.js';
import { ToolItem } from './ToolItem.js';
export const Tools = ({ filteredTools, type }) => {
const { t } = useTranslation();
const typeKey = type.toLowerCase();
const enabledTools = useSettingsStore((state) => state[`_enabled${type}`]);
const { setToolValue } = useSettingsActions();
// Use ref to access current enabledTools without causing re-renders
const enabledToolsRef = useRef(enabledTools);
enabledToolsRef.current = enabledTools;
const toggleCallbacks = useMemo(() => {
const callbacks = {};
filteredTools.forEach((tool) => {
callbacks[tool.key] = () => {
// Access current state via ref to avoid dependency on enabledTools
setToolValue(type, tool.key, !enabledToolsRef.current[tool.key]);
};
});
return callbacks;
}, [filteredTools, setToolValue, type]);
if (!filteredTools.length) {
return (_jsx(SearchNotFound, { message: t(`info.message.empty${type}List`), adjustForStickySearchInput: true }));
}
return (_jsx(SearchList, { className: "long-list", "data-testid": `${typeKey}-list`, children: filteredTools.map((tool) => (_jsx(ToolItem, { tool: tool, typeKey: typeKey, isEnabled: enabledTools[tool.key], onToggle: toggleCallbacks[tool.key] }, tool.key))) }));
};
//# sourceMappingURL=Tools.js.map