@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.
33 lines • 2.42 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Box } from '@mui/material';
import { memo, useEffect } from 'react';
import { useDebouncedWatch } from '../../hooks/useDebouncedWatch.js';
import { useTokenBalances } from '../../hooks/useTokenBalances.js';
import { useWidgetEvents } from '../../hooks/useWidgetEvents.js';
import { useChainOrderStore } from '../../stores/chains/ChainOrderStore.js';
import { FormKeyHelper } from '../../stores/form/types.js';
import { useFieldValues } from '../../stores/form/useFieldValues.js';
import { WidgetEvent } from '../../types/events.js';
import { TokenNotFound } from './TokenNotFound.js';
import { useTokenSelect } from './useTokenSelect.js';
import { VirtualizedTokenList } from './VirtualizedTokenList.js';
export const TokenList = memo(({ formType, parentRef, height, onClick }) => {
const emitter = useWidgetEvents();
const [selectedChainId, selectedTokenAddress] = useFieldValues(FormKeyHelper.getChainKey(formType), FormKeyHelper.getTokenKey(formType));
const isAllNetworks = useChainOrderStore((state) => state[`${formType}IsAllNetworks`]);
const [tokenSearchFilter] = useDebouncedWatch(320, 'tokenSearchFilter');
const { tokens, withCategories, isTokensLoading, isBalanceLoading, isSearchLoading, } = useTokenBalances(selectedChainId, formType, isAllNetworks, tokenSearchFilter);
const handleTokenClick = useTokenSelect(formType, onClick);
const showCategories = withCategories && !tokenSearchFilter && !isAllNetworks;
useEffect(() => {
const normalizedSearchFilter = tokenSearchFilter?.replaceAll('$', '');
if (normalizedSearchFilter) {
emitter.emit(WidgetEvent.TokenSearch, {
value: normalizedSearchFilter,
tokens,
});
}
}, [tokenSearchFilter, tokens, emitter]);
return (_jsxs(Box, { ref: parentRef, style: { height, overflow: 'auto' }, children: [!tokens.length && !isTokensLoading && !isSearchLoading ? (_jsx(TokenNotFound, { formType: formType })) : null, _jsx(VirtualizedTokenList, { tokens: tokens, scrollElementRef: parentRef, chainId: selectedChainId, isLoading: isTokensLoading || isSearchLoading, isBalanceLoading: isBalanceLoading, showCategories: showCategories, onClick: handleTokenClick, selectedTokenAddress: selectedTokenAddress, isAllNetworks: isAllNetworks })] }));
});
//# sourceMappingURL=TokenList.js.map