@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.
57 lines • 4.28 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Skeleton, Tooltip, useMediaQuery } from '@mui/material';
import { memo, useCallback, useEffect, useMemo } from 'react';
import { useTranslation } from 'react-i18next';
import { useNavigate } from 'react-router-dom';
import { useChainOrderStore } from '../../stores/chains/ChainOrderStore.js';
import { maxChainsToOrder, maxChainsToShow, maxGridItemsToShow, } from '../../stores/chains/createChainOrderStore.js';
import { FormKeyHelper } from '../../stores/form/types.js';
import { useFieldValues } from '../../stores/form/useFieldValues.js';
import { navigationRoutes } from '../../utils/navigationRoutes.js';
import { AllChainsAvatar } from '../Chains/AllChainsAvatar.js';
import { ChainAvatar, ChainCard, ChainContainer, MoreChainsBox, MoreChainsText, } from './ChainSelect.style.js';
import { useChainSelect } from './useChainSelect.js';
export const ChainSelect = memo(({ formType }) => {
const { t } = useTranslation();
const navigate = useNavigate();
const isMobile = useMediaQuery((theme) => theme.breakpoints.down(theme.breakpoints.values.xs));
const { chainOrder, chains, isLoading, getSelectedChains, setChainOrder, setCurrentChain, } = useChainSelect(formType);
const [showAllNetworks, isAllNetworks, setIsAllNetworks] = useChainOrderStore((state) => [
state[`${formType}ShowAllNetworks`],
state[`${formType}IsAllNetworks`],
state.setIsAllNetworks,
]);
const [chainId] = useFieldValues(FormKeyHelper.getChainKey(formType));
useEffect(() => {
if (chainId) {
const hasChainInOrderedList = chainOrder.includes(chainId);
// If we don't have a chain in the ordered chain list we should add it.
if (!hasChainInOrderedList) {
setChainOrder(chainId, formType);
}
}
}, [chainId, chainOrder, formType, setChainOrder]);
const onChainSelect = useCallback((selectedChainId) => {
setIsAllNetworks(false, formType);
setCurrentChain(selectedChainId);
}, [setIsAllNetworks, setCurrentChain, formType]);
const showAllChains = useCallback(() => {
navigate(navigationRoutes[`${formType}Chain`]);
}, [navigate, formType]);
const selectAllNetworks = useCallback(() => {
setIsAllNetworks(true, formType);
}, [setIsAllNetworks, formType]);
const chainsToHide = chains?.length === maxChainsToShow
? 0
: (chains?.length ?? 0) - maxChainsToOrder;
const chainsToShow = useMemo(() => (chainsToHide > 0 ? getSelectedChains() : chains) ?? [], [chainsToHide, getSelectedChains, chains]);
const tilesCount = chainsToShow.length + (showAllNetworks ? 1 : 0) + (chainsToHide > 0 ? 1 : 0);
if (isLoading) {
return (_jsx(ChainContainer, { itemCount: tilesCount, children: Array.from({ length: maxGridItemsToShow }).map((_, index) => (_jsx(Skeleton, { variant: "rectangular", width: 56, height: isMobile ? 36 : 56, sx: { borderRadius: 1 } }, index))) }));
}
return (_jsxs(ChainContainer, { itemCount: tilesCount, children: [showAllNetworks && (_jsx(Tooltip, { title: t('main.allNetworks'), enterNextDelay: 100, children: _jsx(ChainCard, { component: "button", onClick: selectAllNetworks, type: isAllNetworks ? 'selected' : 'default', selectionColor: "secondary", children: _jsx(AllChainsAvatar, { chains: chains ?? [], size: isMobile ? 'small' : 'medium' }) }) })), chainsToShow.map((chain) => (_jsx(ChainItem, { chain: chain, isSelected: chainId === chain.id, isAllNetworks: isAllNetworks, onSelect: onChainSelect }, chain.id))), chainsToHide > 0 && (_jsx(ChainCard, { component: "button", onClick: showAllChains, children: _jsx(MoreChainsBox, { children: _jsxs(MoreChainsText, { children: ["+", chainsToHide] }) }) }))] }));
});
const ChainItem = memo(({ chain, isSelected, isAllNetworks, onSelect, }) => {
return (_jsx(Tooltip, { title: chain.name, enterNextDelay: 100, children: _jsx(ChainCard, { component: "button", onClick: () => onSelect(chain.id), type: !isAllNetworks && isSelected ? 'selected' : 'default', selectionColor: "secondary", children: _jsx(ChainAvatar, { src: chain.logoURI, alt: chain.key, children: chain.name[0] }) }) }));
});
//# sourceMappingURL=ChainSelect.js.map