@lifi/widget/dist/esm/components/Chains/ChainList.js

LI.FI Widget for cross-chain bridging and swapping. It will drive your multi-chain strategy and attract new users from everywhere.

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Skeleton } from '@mui/material';
import { useTranslation } from 'react-i18next';
import { SearchNotFound } from '../Search/SearchNotFound';
import { List, ListItemAvatar, ListItemButton, ListItemText, } from './ChainList.style';
import { VirtualizedChainList } from './VirtualizedChainList';
export const ChainList = ({ parentRef, chains, onSelect, selectedChainId, isLoading, inExpansion, }) => {
    const { t } = useTranslation();
    const itemsSize = inExpansion ? 'small' : 'medium';
    if (isLoading) {
        return (_jsx(List, { disablePadding: true, sx: { cursor: 'default' }, children: Array.from({ length: 3 }).map((_, index) => (_jsxs(ListItemButton, { size: itemsSize, sx: { pointerEvents: 'none' }, children: [_jsx(ListItemAvatar, { size: itemsSize, children: _jsx(Skeleton, { variant: "circular", width: itemsSize === 'small' ? 32 : 40, height: itemsSize === 'small' ? 32 : 40, sx: { marginRight: 2 } }) }), _jsx(ListItemText, { primary: _jsx(Skeleton, { variant: "text", width: '100%', height: itemsSize === 'small' ? 18 : 24 }), size: itemsSize })] }, index))) }));
    }
    if (!chains.length) {
        return (_jsx(SearchNotFound, { message: t('info.message.emptyChainList'), adjustForStickySearchInput: !inExpansion }));
    }
    return (_jsx(VirtualizedChainList, { scrollElementRef: parentRef, chains: chains, onSelect: onSelect, selectedChainId: selectedChainId, itemsSize: itemsSize, withPinnedChains: inExpansion }));
};
//# sourceMappingURL=ChainList.js.map