@lifi/widget 4.0.0-alpha.4 → 4.0.0-alpha.5

package/dist/esm/components/Chains/SelectChainContent.js

@@ -1,60 +1,78 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, debounce, useTheme } from '@mui/material';
-import { memo, useCallback, useMemo, useRef, useState } from 'react';
-import { useDefaultElementId } from '../../hooks/useDefaultElementId.js';
-import { useScrollableContainer } from '../../hooks/useScrollableContainer.js';
-import { FormKeyHelper } from '../../stores/form/types.js';
-import { useFieldValues } from '../../stores/form/useFieldValues.js';
-import { getWidgetMaxHeight } from '../../utils/widgetSize.js';
-import { useChainSelect } from '../ChainSelect/useChainSelect.js';
-import { FullPageContainer } from '../FullPageContainer.js';
-import { ChainList } from './ChainList.js';
-import { ChainSearchInput } from './ChainSearchInput.js';
-const searchHeaderHeight = '80px';
-export const SelectChainContent = memo(function SelectChainContent({ formType, onSelect, inExpansion, }) {
-    const theme = useTheme();
-    const { chains, isLoading, setCurrentChain } = useChainSelect(formType);
-    const elementId = useDefaultElementId();
-    const scrollableContainer = useScrollableContainer(elementId);
-    const [selectedChainId] = useFieldValues(FormKeyHelper.getChainKey(formType));
-    const inputRef = useRef(null);
-    const listRef = useRef(null);
-    const [debouncedSearchValue, setDebouncedSearchValue] = useState('');
-    const filteredChains = useMemo(() => {
-        const value = debouncedSearchValue.toLowerCase();
-        return value
-            ? (chains?.filter((chain) => chain.name.toLowerCase().includes(value)) ??
-                [])
-            : (chains ?? []);
-    }, [chains, debouncedSearchValue]);
-    const scrollToTop = useCallback(() => {
-        // Scroll widget container to top
-        if (!inExpansion && scrollableContainer) {
-            scrollableContainer.scrollTop = 0;
-        }
-    }, [inExpansion, scrollableContainer]);
-    const debouncedFilterChains = useMemo(() => debounce((value) => {
-        setDebouncedSearchValue(value);
-        scrollToTop();
-    }, 250), [scrollToTop]);
-    const onSelectChainFallback = useCallback((chain) => {
-        setCurrentChain(chain.id);
-    }, [setCurrentChain]);
-    const onChange = useCallback(() => {
-        const value = inputRef.current?.value || '';
-        debouncedFilterChains(value);
-    }, [debouncedFilterChains]);
-    const onClear = useCallback(() => {
-        setDebouncedSearchValue('');
-        scrollToTop();
-    }, [scrollToTop]);
-    const listContainerHeight = useMemo(() => {
-        const fullContainerHeight = getWidgetMaxHeight(theme);
-        const heightValue = typeof fullContainerHeight === 'number'
-            ? `${fullContainerHeight}px`
-            : fullContainerHeight;
-        return `calc(${heightValue} - ${searchHeaderHeight})`;
-    }, [theme]);
-    return (_jsxs(FullPageContainer, { disableGutters: true, children: [_jsx(ChainSearchInput, { inputRef: inputRef, inExpansion: inExpansion, onChange: onChange, onClear: onClear, searchHeaderHeight: searchHeaderHeight }), _jsx(Box, { ref: listRef, sx: inExpansion ? { height: listContainerHeight, overflow: 'auto' } : {}, children: _jsx(ChainList, { parentRef: listRef, formType: formType, chains: filteredChains, isLoading: isLoading, onSelect: onSelect ?? onSelectChainFallback, selectedChainId: selectedChainId, hasSearchQuery: !!inputRef.current?.value, inExpansion: inExpansion }) })] }));
+import { getWidgetMaxHeight } from "../../utils/widgetSize.js";
+import { useDefaultElementId } from "../../hooks/useDefaultElementId.js";
+import { useScrollableContainer } from "../../hooks/useScrollableContainer.js";
+import { FormKeyHelper } from "../../stores/form/types.js";
+import { useFieldValues } from "../../stores/form/useFieldValues.js";
+import { useChainSelect } from "../ChainSelect/useChainSelect.js";
+import { FullPageContainer } from "../FullPageContainer.js";
+import { ChainList } from "./ChainList.js";
+import { ChainSearchInput } from "./ChainSearchInput.js";
+import { memo, useCallback, useMemo, useRef, useState } from "react";
+import { Box, debounce, useTheme } from "@mui/material";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Chains/SelectChainContent.tsx
+const searchHeaderHeight = "80px";
+const SelectChainContent = memo(function SelectChainContent({ formType, onSelect, inExpansion }) {
+	const theme = useTheme();
+	const { chains, isLoading, setCurrentChain } = useChainSelect(formType);
+	const scrollableContainer = useScrollableContainer(useDefaultElementId() ?? "");
+	const [selectedChainId] = useFieldValues(FormKeyHelper.getChainKey(formType));
+	const inputRef = useRef(null);
+	const listRef = useRef(null);
+	const [debouncedSearchValue, setDebouncedSearchValue] = useState("");
+	const filteredChains = useMemo(() => {
+		const value = debouncedSearchValue.toLowerCase();
+		return value ? chains?.filter((chain) => chain.name.toLowerCase().includes(value)) ?? [] : chains ?? [];
+	}, [chains, debouncedSearchValue]);
+	const scrollToTop = useCallback(() => {
+		if (!inExpansion && scrollableContainer) scrollableContainer.scrollTop = 0;
+	}, [inExpansion, scrollableContainer]);
+	const debouncedFilterChains = useMemo(() => debounce((value) => {
+		setDebouncedSearchValue(value);
+		scrollToTop();
+	}, 250), [scrollToTop]);
+	const onSelectChainFallback = useCallback((chain) => {
+		setCurrentChain(chain.id);
+	}, [setCurrentChain]);
+	const onChange = useCallback(() => {
+		debouncedFilterChains(inputRef.current?.value || "");
+	}, [debouncedFilterChains]);
+	const onClear = useCallback(() => {
+		setDebouncedSearchValue("");
+		scrollToTop();
+	}, [scrollToTop]);
+	const listContainerHeight = useMemo(() => {
+		const fullContainerHeight = getWidgetMaxHeight(theme);
+		return `calc(${typeof fullContainerHeight === "number" ? `${fullContainerHeight}px` : fullContainerHeight} - ${searchHeaderHeight})`;
+	}, [theme]);
+	return /* @__PURE__ */ jsxs(FullPageContainer, {
+		disableGutters: true,
+		children: [/* @__PURE__ */ jsx(ChainSearchInput, {
+			inputRef,
+			inExpansion,
+			onChange,
+			onClear,
+			searchHeaderHeight
+		}), /* @__PURE__ */ jsx(Box, {
+			ref: listRef,
+			sx: inExpansion ? {
+				height: listContainerHeight,
+				overflow: "auto"
+			} : {},
+			children: /* @__PURE__ */ jsx(ChainList, {
+				parentRef: listRef,
+				formType,
+				chains: filteredChains,
+				isLoading,
+				onSelect: onSelect ?? onSelectChainFallback,
+				selectedChainId,
+				hasSearchQuery: !!inputRef.current?.value,
+				inExpansion
+			})
+		})]
+	});
 });
+//#endregion
+export { SelectChainContent };
+
 //# sourceMappingURL=SelectChainContent.js.map

package/dist/esm/components/Chains/SelectChainContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectChainContent.js","sourceRoot":"","sources":["../../../../src/components/Chains/SelectChainContent.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"SelectChainContent.js","names":[],"sources":["../../../../src/components/Chains/SelectChainContent.tsx"],"sourcesContent":["import type { ExtendedChain } from '@lifi/sdk'\nimport { Box, debounce, useTheme } from '@mui/material'\nimport type React from 'react'\nimport { memo, useCallback, useMemo, useRef, useState } from 'react'\nimport { useDefaultElementId } from '../../hooks/useDefaultElementId.js'\nimport { useScrollableContainer } from '../../hooks/useScrollableContainer.js'\nimport { FormKeyHelper, type FormType } from '../../stores/form/types.js'\nimport { useFieldValues } from '../../stores/form/useFieldValues.js'\nimport { getWidgetMaxHeight } from '../../utils/widgetSize.js'\nimport { useChainSelect } from '../ChainSelect/useChainSelect.js'\nimport { FullPageContainer } from '../FullPageContainer.js'\nimport { ChainList } from './ChainList.js'\nimport { ChainSearchInput } from './ChainSearchInput.js'\n\ninterface SelectChainContentProps {\n  formType: FormType\n  onSelect?: (chain: ExtendedChain) => void\n  inExpansion: boolean\n}\n\nconst searchHeaderHeight = '80px'\n\nexport const SelectChainContent: React.NamedExoticComponent<SelectChainContentProps> =\n  memo(function SelectChainContent({\n    formType,\n    onSelect,\n    inExpansion,\n  }: SelectChainContentProps) {\n    const theme = useTheme()\n    const { chains, isLoading, setCurrentChain } = useChainSelect(formType)\n    const elementId = useDefaultElementId()\n    const scrollableContainer = useScrollableContainer(elementId ?? '')\n    const [selectedChainId] = useFieldValues(\n      FormKeyHelper.getChainKey(formType)\n    )\n    const inputRef = useRef<HTMLInputElement>(null)\n    const listRef = useRef<HTMLDivElement>(null)\n    const [debouncedSearchValue, setDebouncedSearchValue] = useState('')\n\n    const filteredChains = useMemo(() => {\n      const value = debouncedSearchValue.toLowerCase()\n      return value\n        ? (chains?.filter((chain) =>\n            chain.name.toLowerCase().includes(value)\n          ) ?? [])\n        : (chains ?? [])\n    }, [chains, debouncedSearchValue])\n\n    const scrollToTop = useCallback(() => {\n      // Scroll widget container to top\n      if (!inExpansion && scrollableContainer) {\n        scrollableContainer.scrollTop = 0\n      }\n    }, [inExpansion, scrollableContainer])\n\n    const debouncedFilterChains = useMemo(\n      () =>\n        debounce((value: string) => {\n          setDebouncedSearchValue(value)\n          scrollToTop()\n        }, 250),\n      [scrollToTop]\n    )\n\n    const onSelectChainFallback = useCallback(\n      (chain: ExtendedChain) => {\n        setCurrentChain(chain.id)\n      },\n      [setCurrentChain]\n    )\n\n    const onChange = useCallback(() => {\n      const value = inputRef.current?.value || ''\n      debouncedFilterChains(value)\n    }, [debouncedFilterChains])\n\n    const onClear = useCallback(() => {\n      setDebouncedSearchValue('')\n      scrollToTop()\n    }, [scrollToTop])\n\n    const listContainerHeight = useMemo(() => {\n      const fullContainerHeight = getWidgetMaxHeight(theme)\n      const heightValue =\n        typeof fullContainerHeight === 'number'\n          ? `${fullContainerHeight}px`\n          : fullContainerHeight\n      return `calc(${heightValue} - ${searchHeaderHeight})`\n    }, [theme])\n\n    return (\n      <FullPageContainer disableGutters>\n        <ChainSearchInput\n          inputRef={inputRef}\n          inExpansion={inExpansion}\n          onChange={onChange}\n          onClear={onClear}\n          searchHeaderHeight={searchHeaderHeight}\n        />\n        <Box\n          ref={listRef}\n          sx={\n            inExpansion ? { height: listContainerHeight, overflow: 'auto' } : {}\n          }\n        >\n          <ChainList\n            parentRef={listRef}\n            formType={formType}\n            chains={filteredChains}\n            isLoading={isLoading}\n            onSelect={onSelect ?? onSelectChainFallback}\n            selectedChainId={selectedChainId}\n            hasSearchQuery={!!inputRef.current?.value}\n            inExpansion={inExpansion}\n          />\n        </Box>\n      </FullPageContainer>\n    )\n  })\n"],"mappings":";;;;;;;;;;;;;AAoBA,MAAM,qBAAqB;AAE3B,MAAa,qBACX,KAAK,SAAS,mBAAmB,EAC/B,UACA,UACA,eAC0B;CAC1B,MAAM,QAAQ,UAAU;CACxB,MAAM,EAAE,QAAQ,WAAW,oBAAoB,eAAe,SAAS;CAEvE,MAAM,sBAAsB,uBADV,qBAAqB,IACyB,GAAG;CACnE,MAAM,CAAC,mBAAmB,eACxB,cAAc,YAAY,SAAS,CACpC;CACD,MAAM,WAAW,OAAyB,KAAK;CAC/C,MAAM,UAAU,OAAuB,KAAK;CAC5C,MAAM,CAAC,sBAAsB,2BAA2B,SAAS,GAAG;CAEpE,MAAM,iBAAiB,cAAc;EACnC,MAAM,QAAQ,qBAAqB,aAAa;AAChD,SAAO,QACF,QAAQ,QAAQ,UACf,MAAM,KAAK,aAAa,CAAC,SAAS,MAAM,CACzC,IAAI,EAAE,GACN,UAAU,EAAE;IAChB,CAAC,QAAQ,qBAAqB,CAAC;CAElC,MAAM,cAAc,kBAAkB;AAEpC,MAAI,CAAC,eAAe,oBAClB,qBAAoB,YAAY;IAEjC,CAAC,aAAa,oBAAoB,CAAC;CAEtC,MAAM,wBAAwB,cAE1B,UAAU,UAAkB;AAC1B,0BAAwB,MAAM;AAC9B,eAAa;IACZ,IAAI,EACT,CAAC,YAAY,CACd;CAED,MAAM,wBAAwB,aAC3B,UAAyB;AACxB,kBAAgB,MAAM,GAAG;IAE3B,CAAC,gBAAgB,CAClB;CAED,MAAM,WAAW,kBAAkB;AAEjC,wBADc,SAAS,SAAS,SAAS,GACb;IAC3B,CAAC,sBAAsB,CAAC;CAE3B,MAAM,UAAU,kBAAkB;AAChC,0BAAwB,GAAG;AAC3B,eAAa;IACZ,CAAC,YAAY,CAAC;CAEjB,MAAM,sBAAsB,cAAc;EACxC,MAAM,sBAAsB,mBAAmB,MAAM;AAKrD,SAAO,QAHL,OAAO,wBAAwB,WAC3B,GAAG,oBAAoB,MACvB,oBACqB,KAAK,mBAAmB;IAClD,CAAC,MAAM,CAAC;AAEX,QACE,qBAAC,mBAAD;EAAmB,gBAAA;YAAnB,CACE,oBAAC,kBAAD;GACY;GACG;GACH;GACD;GACW;GACpB,CAAA,EACF,oBAAC,KAAD;GACE,KAAK;GACL,IACE,cAAc;IAAE,QAAQ;IAAqB,UAAU;IAAQ,GAAG,EAAE;aAGtE,oBAAC,WAAD;IACE,WAAW;IACD;IACV,QAAQ;IACG;IACX,UAAU,YAAY;IACL;IACjB,gBAAgB,CAAC,CAAC,SAAS,SAAS;IACvB;IACb,CAAA;GACE,CAAA,CACY;;EAEtB"}

package/dist/esm/components/Chains/VirtualizedChainList.js

@@ -1,120 +1,143 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useVirtualizer } from '@tanstack/react-virtual';
-import { useCallback, useEffect, useMemo, useRef } from 'react';
-import { useTranslation } from 'react-i18next';
-import { useChainOrderStore } from '../../stores/chains/ChainOrderStore.js';
-import { FormKeyHelper } from '../../stores/form/types.js';
-import { useFieldActions } from '../../stores/form/useFieldActions.js';
-import { AllChainsAvatar } from './AllChainsAvatar.js';
-import { List, ListItem, ListItemAvatar, ListItemButton, ListItemText, } from './ChainList.style.js';
-import { ChainListItem } from './ChainListItem.js';
-export const VirtualizedChainList = ({ formType, chains, hasSearchQuery, onSelect, selectedChainId, itemsSize, scrollElementRef, withPinnedChains, }) => {
-    const { t } = useTranslation();
-    const selectedChainIdRef = useRef(selectedChainId); // Store the initial selected chain ID to scroll to it once chains are loaded
-    const hasScrolledRef = useRef(false);
-    const [pinnedChains, setPinnedChain, isAllNetworks, setIsAllNetworks, showAllNetworks,] = useChainOrderStore((state) => [
-        state.pinnedChains,
-        state.setPinnedChain,
-        state[`${formType}IsAllNetworks`],
-        state.setIsAllNetworks,
-        state[`${formType}ShowAllNetworks`],
-    ]);
-    const { setFieldValue } = useFieldActions();
-    const onPin = useCallback((chainId) => {
-        setPinnedChain(chainId);
-    }, [setPinnedChain]);
-    const sortedChains = useMemo(() => {
-        if (!pinnedChains.length) {
-            return chains;
-        }
-        // Pinning logic: move pinned chains to the top of the list
-        const pinned = pinnedChains
-            .map((id) => chains.find((c) => c.id === id))
-            .filter(Boolean);
-        const pinnedIds = new Set(pinned.map((c) => c.id));
-        const rest = chains.filter((c) => !pinnedIds.has(c.id));
-        return [...pinned, ...rest];
-    }, [chains, pinnedChains]);
-    const showAllNetworksOption = showAllNetworks && !hasSearchQuery;
-    const getItemKey = useCallback((index) => {
-        if (showAllNetworksOption && index === 0) {
-            return 'all-chains';
-        }
-        const chainIndex = index - (showAllNetworksOption ? 1 : 0);
-        return `${sortedChains[chainIndex].id}-${index}`;
-    }, [sortedChains, showAllNetworksOption]);
-    const onChainSelect = useCallback((chain) => {
-        setIsAllNetworks(false, formType);
-        onSelect(chain);
-    }, [onSelect, setIsAllNetworks, formType]);
-    const { getVirtualItems, getTotalSize, measure, range, getOffsetForIndex } = useVirtualizer({
-        count: sortedChains.length + (showAllNetworksOption ? 1 : 0), // +1 for the all networks item
-        overscan: 3,
-        paddingEnd: 0,
-        getScrollElement: () => scrollElementRef.current,
-        estimateSize: () => {
-            return itemsSize === 'small' ? 48 : 60;
-        },
-        getItemKey,
-    });
-    // Using mountOnEnter of the ExpansionTransition component
-    // leads to a short delay for setting up scrollElementRef,
-    // which in turn leads to getVirtualItems() returning an empty array.
-    // Workaround: Re-measure when scroll element becomes available
-    useEffect(() => {
-        if (scrollElementRef.current) {
-            measure();
-        }
-    }, [measure, scrollElementRef.current]);
-    const scrollToIndex = useCallback((index) => {
-        requestAnimationFrame(() => {
-            const offsetInfo = getOffsetForIndex(index, 'center');
-            if (!scrollElementRef.current || !offsetInfo) {
-                return;
-            }
-            scrollElementRef.current.scrollTo({
-                top: offsetInfo[0],
-                left: 0,
-                behavior: 'smooth',
-            });
-        });
-    }, [getOffsetForIndex, scrollElementRef.current]);
-    useEffect(() => {
-        // Mark as scrolled if "All Networks" is initially selected
-        if (isAllNetworks) {
-            hasScrolledRef.current = true;
-            return;
-        }
-        // Only scroll if sortedChains is not empty and we haven't scrolled yet
-        if (!hasScrolledRef.current && sortedChains.length > 0 && range) {
-            const selectedChainIndex = sortedChains.findIndex((chain) => chain.id === selectedChainIdRef.current);
-            if (selectedChainIndex !== -1) {
-                // Only scroll if the selected chain is not in the visible range
-                // +1 and -1 to account for partially visible items
-                if (range.startIndex + 1 > selectedChainIndex ||
-                    range.endIndex - 1 < selectedChainIndex) {
-                    scrollToIndex(selectedChainIndex);
-                }
-            }
-            hasScrolledRef.current = true; // Mark as scrolled (when needed)
-        }
-    }, [sortedChains, scrollToIndex, range, isAllNetworks]);
-    const selectAllNetworks = useCallback(() => {
-        setIsAllNetworks(true, formType);
-        // Reset the chain and token fields when selecting all networks
-        setFieldValue(FormKeyHelper.getChainKey(formType), '', { isTouched: true });
-        setFieldValue(FormKeyHelper.getTokenKey(formType), '', { isTouched: true });
-    }, [setIsAllNetworks, formType, setFieldValue]);
-    return (_jsx(List, { className: "long-list", style: { height: getTotalSize() }, disablePadding: true, children: getVirtualItems().map((item) => {
-            if (showAllNetworksOption && item.index === 0) {
-                return (_jsx(ListItem, { style: {
-                        height: `${itemsSize}px`,
-                        transform: `translateY(${item.start}px)`,
-                        padding: 0,
-                    }, children: _jsxs(ListItemButton, { onClick: selectAllNetworks, selected: isAllNetworks, size: itemsSize, children: [_jsx(ListItemAvatar, { size: itemsSize, children: _jsx(AllChainsAvatar, { chains: chains, size: itemsSize }) }), _jsx(ListItemText, { primary: t('main.allNetworks'), size: itemsSize })] }) }, item.key));
-            }
-            const chain = sortedChains[item.index - (showAllNetworksOption ? 1 : 0)];
-            return (_jsx(ChainListItem, { chain: chain, onSelect: onChainSelect, selected: !isAllNetworks && chain.id === selectedChainId, itemsSize: itemsSize, size: item.size, start: item.start, withPin: withPinnedChains, isPinned: pinnedChains.includes(chain.id), onPin: onPin }, item.key));
-        }) }));
+import { FormKeyHelper } from "../../stores/form/types.js";
+import { useFieldActions } from "../../stores/form/useFieldActions.js";
+import { useChainOrderStore } from "../../stores/chains/ChainOrderStore.js";
+import { List, ListItem, ListItemAvatar, ListItemButton, ListItemText } from "./ChainList.style.js";
+import { AllChainsAvatar } from "./AllChainsAvatar.js";
+import { ChainListItem } from "./ChainListItem.js";
+import { useCallback, useEffect, useMemo, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import { useVirtualizer } from "@tanstack/react-virtual";
+//#region src/components/Chains/VirtualizedChainList.tsx
+const VirtualizedChainList = ({ formType, chains, hasSearchQuery, onSelect, selectedChainId, itemsSize, scrollElementRef, withPinnedChains }) => {
+	const { t } = useTranslation();
+	const selectedChainIdRef = useRef(selectedChainId);
+	const hasScrolledRef = useRef(false);
+	const [pinnedChains, setPinnedChain, isAllNetworks, setIsAllNetworks, showAllNetworks] = useChainOrderStore((state) => [
+		state.pinnedChains,
+		state.setPinnedChain,
+		state[`${formType}IsAllNetworks`],
+		state.setIsAllNetworks,
+		state[`${formType}ShowAllNetworks`]
+	]);
+	const { setFieldValue } = useFieldActions();
+	const onPin = useCallback((chainId) => {
+		setPinnedChain(chainId);
+	}, [setPinnedChain]);
+	const sortedChains = useMemo(() => {
+		if (!pinnedChains.length) return chains;
+		const pinned = pinnedChains.map((id) => chains.find((c) => c.id === id)).filter(Boolean);
+		const pinnedIds = new Set(pinned.map((c) => c.id));
+		const rest = chains.filter((c) => !pinnedIds.has(c.id));
+		return [...pinned, ...rest];
+	}, [chains, pinnedChains]);
+	const showAllNetworksOption = showAllNetworks && !hasSearchQuery;
+	const getItemKey = useCallback((index) => {
+		if (showAllNetworksOption && index === 0) return "all-chains";
+		return `${sortedChains[index - (showAllNetworksOption ? 1 : 0)].id}-${index}`;
+	}, [sortedChains, showAllNetworksOption]);
+	const onChainSelect = useCallback((chain) => {
+		setIsAllNetworks(false, formType);
+		onSelect(chain);
+	}, [
+		onSelect,
+		setIsAllNetworks,
+		formType
+	]);
+	const { getVirtualItems, getTotalSize, measure, range, getOffsetForIndex } = useVirtualizer({
+		count: sortedChains.length + (showAllNetworksOption ? 1 : 0),
+		overscan: 3,
+		paddingEnd: 0,
+		getScrollElement: () => scrollElementRef.current,
+		estimateSize: () => {
+			return itemsSize === "small" ? 48 : 60;
+		},
+		getItemKey
+	});
+	useEffect(() => {
+		if (scrollElementRef.current) measure();
+	}, [measure, scrollElementRef.current]);
+	const scrollToIndex = useCallback((index) => {
+		requestAnimationFrame(() => {
+			const offsetInfo = getOffsetForIndex(index, "center");
+			if (!scrollElementRef.current || !offsetInfo) return;
+			scrollElementRef.current.scrollTo({
+				top: offsetInfo[0],
+				left: 0,
+				behavior: "smooth"
+			});
+		});
+	}, [getOffsetForIndex, scrollElementRef.current]);
+	useEffect(() => {
+		if (isAllNetworks) {
+			hasScrolledRef.current = true;
+			return;
+		}
+		if (!hasScrolledRef.current && sortedChains.length > 0 && range) {
+			const selectedChainIndex = sortedChains.findIndex((chain) => chain.id === selectedChainIdRef.current);
+			if (selectedChainIndex !== -1) {
+				if (range.startIndex + 1 > selectedChainIndex || range.endIndex - 1 < selectedChainIndex) scrollToIndex(selectedChainIndex);
+			}
+			hasScrolledRef.current = true;
+		}
+	}, [
+		sortedChains,
+		scrollToIndex,
+		range,
+		isAllNetworks
+	]);
+	const selectAllNetworks = useCallback(() => {
+		setIsAllNetworks(true, formType);
+		setFieldValue(FormKeyHelper.getChainKey(formType), "", { isTouched: true });
+		setFieldValue(FormKeyHelper.getTokenKey(formType), "", { isTouched: true });
+	}, [
+		setIsAllNetworks,
+		formType,
+		setFieldValue
+	]);
+	return /* @__PURE__ */ jsx(List, {
+		className: "long-list",
+		style: { height: getTotalSize() },
+		disablePadding: true,
+		children: getVirtualItems().map((item) => {
+			if (showAllNetworksOption && item.index === 0) return /* @__PURE__ */ jsx(ListItem, {
+				style: {
+					height: `${itemsSize}px`,
+					transform: `translateY(${item.start}px)`,
+					padding: 0
+				},
+				children: /* @__PURE__ */ jsxs(ListItemButton, {
+					onClick: selectAllNetworks,
+					selected: isAllNetworks,
+					size: itemsSize,
+					children: [/* @__PURE__ */ jsx(ListItemAvatar, {
+						size: itemsSize,
+						children: /* @__PURE__ */ jsx(AllChainsAvatar, {
+							chains,
+							size: itemsSize
+						})
+					}), /* @__PURE__ */ jsx(ListItemText, {
+						primary: t("main.allNetworks"),
+						size: itemsSize
+					})]
+				})
+			}, item.key);
+			const chain = sortedChains[item.index - (showAllNetworksOption ? 1 : 0)];
+			return /* @__PURE__ */ jsx(ChainListItem, {
+				chain,
+				onSelect: onChainSelect,
+				selected: !isAllNetworks && chain.id === selectedChainId,
+				itemsSize,
+				size: item.size,
+				start: item.start,
+				withPin: withPinnedChains,
+				isPinned: pinnedChains.includes(chain.id),
+				onPin
+			}, item.key);
+		})
+	});
 };
+//#endregion
+export { VirtualizedChainList };
+
 //# sourceMappingURL=VirtualizedChainList.js.map

package/dist/esm/components/Chains/VirtualizedChainList.js.map

@@ -1 +1 @@
-{"version":3,"file":"VirtualizedChainList.js","sourceRoot":"","sources":["../../../../src/components/Chains/VirtualizedChainList.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"VirtualizedChainList.js","names":[],"sources":["../../../../src/components/Chains/VirtualizedChainList.tsx"],"sourcesContent":["import type { ExtendedChain } from '@lifi/sdk'\nimport { useVirtualizer } from '@tanstack/react-virtual'\nimport type { JSX, RefObject } from 'react'\nimport { useCallback, useEffect, useMemo, useRef } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useChainOrderStore } from '../../stores/chains/ChainOrderStore.js'\nimport { FormKeyHelper, type FormType } from '../../stores/form/types.js'\nimport { useFieldActions } from '../../stores/form/useFieldActions.js'\nimport { AllChainsAvatar } from './AllChainsAvatar.js'\nimport {\n  List,\n  ListItem,\n  ListItemAvatar,\n  ListItemButton,\n  ListItemText,\n} from './ChainList.style.js'\nimport { ChainListItem } from './ChainListItem.js'\n\ninterface VirtualizedChainListProps {\n  scrollElementRef: RefObject<HTMLDivElement | null>\n  formType: FormType\n  chains: ExtendedChain[]\n  onSelect: (chain: ExtendedChain) => void\n  selectedChainId?: number\n  itemsSize: 'small' | 'medium'\n  hasSearchQuery: boolean\n  withPinnedChains: boolean\n}\n\nexport const VirtualizedChainList = ({\n  formType,\n  chains,\n  hasSearchQuery,\n  onSelect,\n  selectedChainId,\n  itemsSize,\n  scrollElementRef,\n  withPinnedChains,\n}: VirtualizedChainListProps): JSX.Element => {\n  const { t } = useTranslation()\n  const selectedChainIdRef = useRef(selectedChainId) // Store the initial selected chain ID to scroll to it once chains are loaded\n  const hasScrolledRef = useRef(false)\n  const [\n    pinnedChains,\n    setPinnedChain,\n    isAllNetworks,\n    setIsAllNetworks,\n    showAllNetworks,\n  ] = useChainOrderStore((state) => [\n    state.pinnedChains,\n    state.setPinnedChain,\n    state[`${formType}IsAllNetworks`],\n    state.setIsAllNetworks,\n    state[`${formType}ShowAllNetworks`],\n  ])\n  const { setFieldValue } = useFieldActions()\n  const onPin = useCallback(\n    (chainId: number) => {\n      setPinnedChain(chainId)\n    },\n    [setPinnedChain]\n  )\n\n  const sortedChains = useMemo(() => {\n    if (!pinnedChains.length) {\n      return chains\n    }\n    // Pinning logic: move pinned chains to the top of the list\n    const pinned = pinnedChains\n      .map((id) => chains.find((c) => c.id === id))\n      .filter(Boolean) as ExtendedChain[]\n    const pinnedIds = new Set(pinned.map((c) => c.id))\n    const rest = chains.filter((c) => !pinnedIds.has(c.id))\n    return [...pinned, ...rest]\n  }, [chains, pinnedChains])\n\n  const showAllNetworksOption = showAllNetworks && !hasSearchQuery\n\n  const getItemKey = useCallback(\n    (index: number) => {\n      if (showAllNetworksOption && index === 0) {\n        return 'all-chains'\n      }\n      const chainIndex = index - (showAllNetworksOption ? 1 : 0)\n      return `${sortedChains[chainIndex].id}-${index}`\n    },\n    [sortedChains, showAllNetworksOption]\n  )\n\n  const onChainSelect = useCallback(\n    (chain: ExtendedChain) => {\n      setIsAllNetworks(false, formType)\n      onSelect(chain)\n    },\n    [onSelect, setIsAllNetworks, formType]\n  )\n\n  const { getVirtualItems, getTotalSize, measure, range, getOffsetForIndex } =\n    useVirtualizer({\n      count: sortedChains.length + (showAllNetworksOption ? 1 : 0), // +1 for the all networks item\n      overscan: 3,\n      paddingEnd: 0,\n      getScrollElement: () => scrollElementRef.current,\n      estimateSize: () => {\n        return itemsSize === 'small' ? 48 : 60\n      },\n      getItemKey,\n    })\n\n  // Using mountOnEnter of the ExpansionTransition component\n  // leads to a short delay for setting up scrollElementRef,\n  // which in turn leads to getVirtualItems() returning an empty array.\n  // Workaround: Re-measure when scroll element becomes available\n  useEffect(() => {\n    if (scrollElementRef.current) {\n      measure()\n    }\n  }, [measure, scrollElementRef.current])\n\n  const scrollToIndex = useCallback(\n    (index: number) => {\n      requestAnimationFrame(() => {\n        const offsetInfo = getOffsetForIndex(index, 'center')\n        if (!scrollElementRef.current || !offsetInfo) {\n          return\n        }\n        scrollElementRef.current.scrollTo({\n          top: offsetInfo[0],\n          left: 0,\n          behavior: 'smooth',\n        })\n      })\n    },\n    [getOffsetForIndex, scrollElementRef.current]\n  )\n\n  useEffect(() => {\n    // Mark as scrolled if \"All Networks\" is initially selected\n    if (isAllNetworks) {\n      hasScrolledRef.current = true\n      return\n    }\n\n    // Only scroll if sortedChains is not empty and we haven't scrolled yet\n    if (!hasScrolledRef.current && sortedChains.length > 0 && range) {\n      const selectedChainIndex = sortedChains.findIndex(\n        (chain) => chain.id === selectedChainIdRef.current\n      )\n      if (selectedChainIndex !== -1) {\n        // Only scroll if the selected chain is not in the visible range\n        // +1 and -1 to account for partially visible items\n        if (\n          range.startIndex + 1 > selectedChainIndex ||\n          range.endIndex - 1 < selectedChainIndex\n        ) {\n          scrollToIndex(selectedChainIndex)\n        }\n      }\n      hasScrolledRef.current = true // Mark as scrolled (when needed)\n    }\n  }, [sortedChains, scrollToIndex, range, isAllNetworks])\n\n  const selectAllNetworks = useCallback(() => {\n    setIsAllNetworks(true, formType)\n    // Reset the chain and token fields when selecting all networks\n    setFieldValue(FormKeyHelper.getChainKey(formType), '', { isTouched: true })\n    setFieldValue(FormKeyHelper.getTokenKey(formType), '', { isTouched: true })\n  }, [setIsAllNetworks, formType, setFieldValue])\n\n  return (\n    <List\n      className=\"long-list\"\n      style={{ height: getTotalSize() }}\n      disablePadding\n    >\n      {getVirtualItems().map((item) => {\n        if (showAllNetworksOption && item.index === 0) {\n          return (\n            <ListItem\n              key={item.key}\n              style={{\n                height: `${itemsSize}px`,\n                transform: `translateY(${item.start}px)`,\n                padding: 0,\n              }}\n            >\n              <ListItemButton\n                onClick={selectAllNetworks}\n                selected={isAllNetworks}\n                size={itemsSize}\n              >\n                <ListItemAvatar size={itemsSize}>\n                  <AllChainsAvatar chains={chains} size={itemsSize} />\n                </ListItemAvatar>\n                <ListItemText\n                  primary={t('main.allNetworks')}\n                  size={itemsSize}\n                />\n              </ListItemButton>\n            </ListItem>\n          )\n        }\n\n        const chain = sortedChains[item.index - (showAllNetworksOption ? 1 : 0)]\n        return (\n          <ChainListItem\n            key={item.key}\n            chain={chain}\n            onSelect={onChainSelect}\n            selected={!isAllNetworks && chain.id === selectedChainId}\n            itemsSize={itemsSize}\n            size={item.size}\n            start={item.start}\n            withPin={withPinnedChains}\n            isPinned={pinnedChains.includes(chain.id)}\n            onPin={onPin}\n          />\n        )\n      })}\n    </List>\n  )\n}\n"],"mappings":"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"}

package/dist/esm/components/ContextMenu.js

@@ -0,0 +1,59 @@
+import { ContextMenuButton } from "./ContextMenu.style.js";
+import { Menu as Menu$1 } from "./Menu.js";
+import { useId, useState } from "react";
+import { MenuItem } from "@mui/material";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import MoreVertIcon from "@mui/icons-material/MoreVert";
+//#region src/components/ContextMenu.tsx
+const ContextMenu = ({ items, disabled, buttonSx }) => {
+	const { t } = useTranslation();
+	const menuId = useId();
+	const [anchorEl, setAnchorEl] = useState(null);
+	const open = Boolean(anchorEl);
+	const handleOpen = (e) => {
+		setAnchorEl(e.currentTarget);
+	};
+	const closeMenu = () => {
+		setAnchorEl(null);
+	};
+	const handleItemClick = (onClick) => () => {
+		onClick();
+		closeMenu();
+	};
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(ContextMenuButton, {
+		"aria-label": t("button.options"),
+		"aria-controls": open ? menuId : void 0,
+		"aria-haspopup": "true",
+		"aria-expanded": open ? "true" : void 0,
+		onClick: handleOpen,
+		sx: {
+			opacity: disabled ? .5 : 1,
+			...buttonSx
+		},
+		disableRipple: true,
+		children: /* @__PURE__ */ jsx(MoreVertIcon, { fontSize: "small" })
+	}), /* @__PURE__ */ jsx(Menu$1, {
+		id: menuId,
+		elevation: 0,
+		anchorOrigin: {
+			vertical: "bottom",
+			horizontal: "right"
+		},
+		transformOrigin: {
+			vertical: "top",
+			horizontal: "right"
+		},
+		anchorEl,
+		open,
+		onClose: closeMenu,
+		children: items.map((item) => /* @__PURE__ */ jsxs(MenuItem, {
+			onClick: handleItemClick(item.onClick),
+			children: [item.icon, item.label]
+		}, item.label))
+	})] });
+};
+//#endregion
+export { ContextMenu };
+
+//# sourceMappingURL=ContextMenu.js.map

package/dist/esm/components/ContextMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContextMenu.js","names":["Menu"],"sources":["../../../src/components/ContextMenu.tsx"],"sourcesContent":["import MoreVertIcon from '@mui/icons-material/MoreVert'\nimport type { SxProps, Theme } from '@mui/material'\nimport { MenuItem } from '@mui/material'\nimport { type JSX, useId, useState } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { ContextMenuButton } from './ContextMenu.style.js'\nimport { Menu } from './Menu.js'\n\nexport interface ContextMenuItemConfig {\n  icon: React.ReactNode\n  label: string\n  onClick: () => void\n}\n\ninterface ContextMenuProps {\n  items: ContextMenuItemConfig[]\n  disabled?: boolean\n  buttonSx?: SxProps<Theme>\n}\n\nexport const ContextMenu = ({\n  items,\n  disabled,\n  buttonSx,\n}: ContextMenuProps): JSX.Element => {\n  const { t } = useTranslation()\n  const menuId = useId()\n  const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null)\n  const open = Boolean(anchorEl)\n\n  const handleOpen = (e: React.MouseEvent<HTMLButtonElement>) => {\n    setAnchorEl(e.currentTarget)\n  }\n\n  const closeMenu = () => {\n    setAnchorEl(null)\n  }\n\n  const handleItemClick = (onClick: () => void) => () => {\n    onClick()\n    closeMenu()\n  }\n\n  return (\n    <>\n      <ContextMenuButton\n        aria-label={t('button.options')}\n        aria-controls={open ? menuId : undefined}\n        aria-haspopup=\"true\"\n        aria-expanded={open ? 'true' : undefined}\n        onClick={handleOpen}\n        sx={{ opacity: disabled ? 0.5 : 1, ...buttonSx }}\n        disableRipple\n      >\n        <MoreVertIcon fontSize=\"small\" />\n      </ContextMenuButton>\n      <Menu\n        id={menuId}\n        elevation={0}\n        anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}\n        transformOrigin={{ vertical: 'top', horizontal: 'right' }}\n        anchorEl={anchorEl}\n        open={open}\n        onClose={closeMenu}\n      >\n        {items.map((item) => (\n          <MenuItem key={item.label} onClick={handleItemClick(item.onClick)}>\n            {item.icon}\n            {item.label}\n          </MenuItem>\n        ))}\n      </Menu>\n    </>\n  )\n}\n"],"mappings":";;;;;;;;AAoBA,MAAa,eAAe,EAC1B,OACA,UACA,eACmC;CACnC,MAAM,EAAE,MAAM,gBAAgB;CAC9B,MAAM,SAAS,OAAO;CACtB,MAAM,CAAC,UAAU,eAAe,SAA6B,KAAK;CAClE,MAAM,OAAO,QAAQ,SAAS;CAE9B,MAAM,cAAc,MAA2C;AAC7D,cAAY,EAAE,cAAc;;CAG9B,MAAM,kBAAkB;AACtB,cAAY,KAAK;;CAGnB,MAAM,mBAAmB,kBAA8B;AACrD,WAAS;AACT,aAAW;;AAGb,QACE,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,mBAAD;EACE,cAAY,EAAE,iBAAiB;EAC/B,iBAAe,OAAO,SAAS,KAAA;EAC/B,iBAAc;EACd,iBAAe,OAAO,SAAS,KAAA;EAC/B,SAAS;EACT,IAAI;GAAE,SAAS,WAAW,KAAM;GAAG,GAAG;GAAU;EAChD,eAAA;YAEA,oBAAC,cAAD,EAAc,UAAS,SAAU,CAAA;EACf,CAAA,EACpB,oBAACA,QAAD;EACE,IAAI;EACJ,WAAW;EACX,cAAc;GAAE,UAAU;GAAU,YAAY;GAAS;EACzD,iBAAiB;GAAE,UAAU;GAAO,YAAY;GAAS;EAC/C;EACJ;EACN,SAAS;YAER,MAAM,KAAK,SACV,qBAAC,UAAD;GAA2B,SAAS,gBAAgB,KAAK,QAAQ;aAAjE,CACG,KAAK,MACL,KAAK,MACG;KAHI,KAAK,MAGT,CACX;EACG,CAAA,CACN,EAAA,CAAA"}

package/dist/esm/components/ContextMenu.style.js

@@ -0,0 +1,12 @@
+import { IconButton, styled } from "@mui/material";
+//#region src/components/ContextMenu.style.tsx
+const ContextMenuButton = styled(IconButton)(({ theme }) => ({
+	position: "absolute",
+	top: theme.spacing(1.75),
+	right: theme.spacing(2),
+	"&:hover": { backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)` }
+}));
+//#endregion
+export { ContextMenuButton };
+
+//# sourceMappingURL=ContextMenu.style.js.map

package/dist/esm/components/ContextMenu.style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContextMenu.style.js","names":[],"sources":["../../../src/components/ContextMenu.style.tsx"],"sourcesContent":["import { IconButton, styled } from '@mui/material'\nimport type React from 'react'\n\nexport const ContextMenuButton: React.FC<\n  React.ComponentProps<typeof IconButton>\n> = styled(IconButton)(({ theme }) => ({\n  position: 'absolute',\n  top: theme.spacing(1.75),\n  right: theme.spacing(2),\n  '&:hover': {\n    backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,\n  },\n}))\n"],"mappings":";;AAGA,MAAa,oBAET,OAAO,WAAW,EAAE,EAAE,aAAa;CACrC,UAAU;CACV,KAAK,MAAM,QAAQ,KAAK;CACxB,OAAO,MAAM,QAAQ,EAAE;CACvB,WAAW,EACT,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa,oBAC/E;CACF,EAAE"}

package/dist/esm/components/ContractComponent/ContractComponent.js

@@ -1,9 +1,14 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Card } from '../Card/Card.js';
-export const ContractComponent = ({ children, ...props }) => {
-    if (!children) {
-        return null;
-    }
-    return _jsx(Card, { ...props, children: children });
+import { Card } from "../Card/Card.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/ContractComponent/ContractComponent.tsx
+const ContractComponent = ({ children, ...props }) => {
+	if (!children) return null;
+	return /* @__PURE__ */ jsx(Card, {
+		...props,
+		children
+	});
 };
+//#endregion
+export { ContractComponent };
+
 //# sourceMappingURL=ContractComponent.js.map

package/dist/esm/components/ContractComponent/ContractComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContractComponent.js","sourceRoot":"","sources":["../../../../src/components/ContractComponent/ContractComponent.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,IAAI,EAAE,MAAM,iBAAiB,CAAA;AAEtC,MAAM,CAAC,MAAM,iBAAiB,GAA2C,CAAC,EACxE,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,EAAE;IACH,IAAI,CAAC,QAAQ,EAAE,CAAC;QACd,OAAO,IAAI,CAAA;IACb,CAAC;IAED,OAAO,KAAC,IAAI,OAAK,KAAK,YAAG,QAAQ,GAAQ,CAAA;AAC3C,CAAC,CAAA"}
+{"version":3,"file":"ContractComponent.js","names":[],"sources":["../../../../src/components/ContractComponent/ContractComponent.tsx"],"sourcesContent":["import type { CardProps } from '@mui/material'\nimport type { PropsWithChildren } from 'react'\nimport { Card } from '../Card/Card.js'\n\nexport const ContractComponent: React.FC<PropsWithChildren<CardProps>> = ({\n  children,\n  ...props\n}) => {\n  if (!children) {\n    return null\n  }\n\n  return <Card {...props}>{children}</Card>\n}\n"],"mappings":";;;AAIA,MAAa,qBAA6D,EACxE,UACA,GAAG,YACC;AACJ,KAAI,CAAC,SACH,QAAO;AAGT,QAAO,oBAAC,MAAD;EAAM,GAAI;EAAQ;EAAgB,CAAA"}

package/dist/esm/components/ContractComponent/ItemPrice.d.ts

@@ -1,7 +1,12 @@
-import { type ContractCall } from '@lifi/sdk';
-import type { TokenAmount } from '../../types/token.js';
-export interface ItemPriceProps {
-    token: TokenAmount;
-    contractCalls?: ContractCall[];
+import { TokenAmount as TokenAmount$1 } from "../../types/token.js";
+import { ContractCall } from "@lifi/sdk";
+
+//#region src/components/ContractComponent/ItemPrice.d.ts
+interface ItemPriceProps {
+  token: TokenAmount$1;
+  contractCalls?: ContractCall[];
 }
-export declare const ItemPrice: React.FC<ItemPriceProps>;
+declare const ItemPrice: React.FC<ItemPriceProps>;
+//#endregion
+export { ItemPrice, ItemPriceProps };
+//# sourceMappingURL=ItemPrice.d.ts.map