@lifi/widget 4.0.0-beta.9 → 4.1.0

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

@@ -0,0 +1,60 @@
+import { useChainSearch } from "../../hooks/useChainSearch.js";
+import { PageContainer } from "../PageContainer.js";
+import { SearchInput } from "../Search/SearchInput.js";
+import { ChainList } from "./ChainList.js";
+import { useListHeight } from "../../hooks/useListHeight.js";
+import { useRef } from "react";
+import { Box } from "@mui/material";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+//#region src/components/Chains/SelectChainPageContent.tsx
+function SelectChainPageContent({ formType, onSelect }) {
+	const { t } = useTranslation();
+	const inputRef = useRef(null);
+	const headerRef = useRef(null);
+	const listRef = useRef(null);
+	const { filteredChains, isLoading, selectedChainId, onSelectChainFallback, onChange, onClear } = useChainSearch(formType, listRef, inputRef);
+	const { listHeight } = useListHeight({
+		listParentRef: listRef,
+		headerRef
+	});
+	return /* @__PURE__ */ jsxs(PageContainer, {
+		disableGutters: true,
+		children: [/* @__PURE__ */ jsx(Box, {
+			ref: headerRef,
+			sx: {
+				pb: 2,
+				px: 3,
+				pt: 1.5
+			},
+			children: /* @__PURE__ */ jsx(SearchInput, {
+				inputRef,
+				onChange,
+				placeholder: t("main.searchNetwork"),
+				size: "medium",
+				onClear,
+				autoFocus: true
+			})
+		}), /* @__PURE__ */ jsx(Box, {
+			ref: listRef,
+			style: {
+				height: listHeight,
+				overflow: "auto"
+			},
+			children: /* @__PURE__ */ jsx(ChainList, {
+				parentRef: listRef,
+				formType,
+				chains: filteredChains,
+				isLoading,
+				onSelect: onSelect ?? onSelectChainFallback,
+				selectedChainId,
+				hasSearchQuery: !!inputRef.current?.value,
+				inExpansion: false
+			})
+		})]
+	});
+}
+//#endregion
+export { SelectChainPageContent };
+
+//# sourceMappingURL=SelectChainPageContent.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SelectChainPageContent.js","names":[],"sources":["../../../../src/components/Chains/SelectChainPageContent.tsx"],"sourcesContent":["import type { ExtendedChain } from '@lifi/sdk'\nimport { Box } from '@mui/material'\nimport { type JSX, useRef } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useChainSearch } from '../../hooks/useChainSearch.js'\nimport { useListHeight } from '../../hooks/useListHeight.js'\nimport type { FormType } from '../../stores/form/types.js'\nimport { PageContainer } from '../PageContainer.js'\nimport { SearchInput } from '../Search/SearchInput.js'\nimport { ChainList } from './ChainList.js'\n\ninterface SelectChainPageContentProps {\n  formType: FormType\n  onSelect?: (chain: ExtendedChain) => void\n}\n\nexport function SelectChainPageContent({\n  formType,\n  onSelect,\n}: SelectChainPageContentProps): JSX.Element {\n  const { t } = useTranslation()\n  const inputRef = useRef<HTMLInputElement>(null)\n  const headerRef = useRef<HTMLElement>(null)\n  const listRef = useRef<HTMLDivElement>(null)\n\n  const {\n    filteredChains,\n    isLoading,\n    selectedChainId,\n    onSelectChainFallback,\n    onChange,\n    onClear,\n  } = useChainSearch(formType, listRef, inputRef)\n\n  const { listHeight } = useListHeight({\n    listParentRef: listRef,\n    headerRef,\n  })\n\n  return (\n    <PageContainer disableGutters>\n      <Box ref={headerRef} sx={{ pb: 2, px: 3, pt: 1.5 }}>\n        <SearchInput\n          inputRef={inputRef}\n          onChange={onChange}\n          placeholder={t('main.searchNetwork')}\n          size=\"medium\"\n          onClear={onClear}\n          autoFocus\n        />\n      </Box>\n      <Box ref={listRef} style={{ height: listHeight, overflow: 'auto' }}>\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={false}\n        />\n      </Box>\n    </PageContainer>\n  )\n}\n"],"mappings":";;;;;;;;;;AAgBA,SAAgB,uBAAuB,EACrC,UACA,YAC2C;CAC3C,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,WAAW,OAAyB,IAAI;CAC9C,MAAM,YAAY,OAAoB,IAAI;CAC1C,MAAM,UAAU,OAAuB,IAAI;CAE3C,MAAM,EACJ,gBACA,WACA,iBACA,uBACA,UACA,YACE,eAAe,UAAU,SAAS,QAAQ;CAE9C,MAAM,EAAE,eAAe,cAAc;EACnC,eAAe;EACf;CACF,CAAC;CAED,OACE,qBAAC,eAAD;EAAe,gBAAA;YAAf,CACE,oBAAC,KAAD;GAAK,KAAK;GAAW,IAAI;IAAE,IAAI;IAAG,IAAI;IAAG,IAAI;GAAI;aAC/C,oBAAC,aAAD;IACY;IACA;IACV,aAAa,EAAE,oBAAoB;IACnC,MAAK;IACI;IACT,WAAA;GACD,CAAA;EACE,CAAA,GACL,oBAAC,KAAD;GAAK,KAAK;GAAS,OAAO;IAAE,QAAQ;IAAY,UAAU;GAAO;aAC/D,oBAAC,WAAD;IACE,WAAW;IACD;IACV,QAAQ;IACG;IACX,UAAU,YAAY;IACL;IACjB,gBAAgB,CAAC,CAAC,SAAS,SAAS;IACpC,aAAa;GACd,CAAA;EACE,CAAA,CACQ;;AAEnB"}

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 { useFieldActions } from "../../stores/form/useFieldActions.js";
+import { useChainOrderStore } from "../../stores/chains/ChainOrderStore.js";
+import { FormKeyHelper } from "../../stores/form/types.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,eAAe;CAC7B,MAAM,SAAS,MAAM;CACrB,MAAM,CAAC,UAAU,eAAe,SAA6B,IAAI;CACjE,MAAM,OAAO,QAAQ,QAAQ;CAE7B,MAAM,cAAc,MAA2C;EAC7D,YAAY,EAAE,aAAa;CAC7B;CAEA,MAAM,kBAAkB;EACtB,YAAY,IAAI;CAClB;CAEA,MAAM,mBAAmB,kBAA8B;EACrD,QAAQ;EACR,UAAU;CACZ;CAEA,OACE,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,mBAAD;EACE,cAAY,EAAE,gBAAgB;EAC9B,iBAAe,OAAO,SAAS,KAAA;EAC/B,iBAAc;EACd,iBAAe,OAAO,SAAS,KAAA;EAC/B,SAAS;EACT,IAAI;GAAE,SAAS,WAAW,KAAM;GAAG,GAAG;EAAS;EAC/C,eAAA;YAEA,oBAAC,cAAD,EAAc,UAAS,QAAS,CAAA;CACf,CAAA,GACnB,oBAACA,QAAD;EACE,IAAI;EACJ,WAAW;EACX,cAAc;GAAE,UAAU;GAAU,YAAY;EAAQ;EACxD,iBAAiB;GAAE,UAAU;GAAO,YAAY;EAAQ;EAC9C;EACJ;EACN,SAAS;YAER,MAAM,KAAK,SACV,qBAAC,UAAD;GAA2B,SAAS,gBAAgB,KAAK,OAAO;aAAhE,CACG,KAAK,MACL,KAAK,KACE;KAHK,KAAK,KAGV,CACX;CACG,CAAA,CACN,EAAA,CAAA;AAEN"}

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,UAAU,CAAC,EAAE,EAAE,aAAa;CACrC,UAAU;CACV,KAAK,MAAM,QAAQ,IAAI;CACvB,OAAO,MAAM,QAAQ,CAAC;CACtB,WAAW,EACT,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa,mBAChF;AACF,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;CACJ,IAAI,CAAC,UACH,OAAO;CAGT,OAAO,oBAAC,MAAD;EAAM,GAAI;EAAQ;CAAe,CAAA;AAC1C"}

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"ItemPrice.d.ts","names":[],"sources":["../../../../src/components/ContractComponent/ItemPrice.tsx"],"mappings":";;;;UAMiB,cAAA;EACf,KAAA,EAAO,aAAA;EACP,aAAA,GAAgB,YAAA;AAAA;AAAA,cAGL,SAAA,EAAW,KAAA,CAAM,EAAA,CAAG,cAAA"}

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

@@ -1,24 +1,29 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { formatUnits } from '@lifi/sdk';
-import { useEffect } from 'react';
-import { useFieldActions } from '../../stores/form/useFieldActions.js';
-import { Token } from '../Token/Token.js';
-export const ItemPrice = ({ token, contractCalls, }) => {
-    const { setFieldValue } = useFieldActions();
-    useEffect(() => {
-        if (token) {
-            setFieldValue('toChain', token.chainId, { isTouched: true });
-            setFieldValue('toToken', token.address, { isTouched: true });
-            setFieldValue('toAmount', token.amount ? formatUnits(token.amount, token.decimals) : '', {
-                isTouched: true,
-            });
-        }
-        if (contractCalls) {
-            setFieldValue('contractCalls', contractCalls, {
-                isTouched: true,
-            });
-        }
-    }, [contractCalls, setFieldValue, token]);
-    return _jsx(Token, { token: token, p: 2 });
+import { useFieldActions } from "../../stores/form/useFieldActions.js";
+import { Token as Token$1 } from "../Token/Token.js";
+import { formatUnits } from "@lifi/sdk";
+import { useEffect } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/ContractComponent/ItemPrice.tsx
+const ItemPrice = ({ token, contractCalls }) => {
+	const { setFieldValue } = useFieldActions();
+	useEffect(() => {
+		if (token) {
+			setFieldValue("toChain", token.chainId, { isTouched: true });
+			setFieldValue("toToken", token.address, { isTouched: true });
+			setFieldValue("toAmount", token.amount ? formatUnits(token.amount, token.decimals) : "", { isTouched: true });
+		}
+		if (contractCalls) setFieldValue("contractCalls", contractCalls, { isTouched: true });
+	}, [
+		contractCalls,
+		setFieldValue,
+		token
+	]);
+	return /* @__PURE__ */ jsx(Token$1, {
+		token,
+		sx: { p: 2 }
+	});
 };
+//#endregion
+export { ItemPrice };
+
 //# sourceMappingURL=ItemPrice.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ItemPrice.js","sourceRoot":"","sources":["../../../../src/components/ContractComponent/ItemPrice.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAqB,WAAW,EAAE,MAAM,WAAW,CAAA;AAC1D,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACjC,OAAO,EAAE,eAAe,EAAE,MAAM,sCAAsC,CAAA;AAEtE,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAOzC,MAAM,CAAC,MAAM,SAAS,GAA6B,CAAC,EAClD,KAAK,EACL,aAAa,GACd,EAAE,EAAE;IACH,MAAM,EAAE,aAAa,EAAE,GAAG,eAAe,EAAE,CAAA;IAE3C,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,KAAK,EAAE,CAAC;YACV,aAAa,CAAC,SAAS,EAAE,KAAK,CAAC,OAAO,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAA;YAC5D,aAAa,CAAC,SAAS,EAAE,KAAK,CAAC,OAAO,EAAE,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAA;YAC5D,aAAa,CACX,UAAU,EACV,KAAK,CAAC,MAAM,CAAC,CAAC,CAAC,WAAW,CAAC,KAAK,CAAC,MAAM,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,EAAE,EAC7D;gBACE,SAAS,EAAE,IAAI;aAChB,CACF,CAAA;QACH,CAAC;QACD,IAAI,aAAa,EAAE,CAAC;YAClB,aAAa,CAAC,eAAe,EAAE,aAAa,EAAE;gBAC5C,SAAS,EAAE,IAAI;aAChB,CAAC,CAAA;QACJ,CAAC;IACH,CAAC,EAAE,CAAC,aAAa,EAAE,aAAa,EAAE,KAAK,CAAC,CAAC,CAAA;IACzC,OAAO,KAAC,KAAK,IAAC,KAAK,EAAE,KAAK,EAAE,CAAC,EAAE,CAAC,GAAI,CAAA;AACtC,CAAC,CAAA"}
+{"version":3,"file":"ItemPrice.js","names":["Token"],"sources":["../../../../src/components/ContractComponent/ItemPrice.tsx"],"sourcesContent":["import { type ContractCall, formatUnits } from '@lifi/sdk'\nimport { useEffect } from 'react'\nimport { useFieldActions } from '../../stores/form/useFieldActions.js'\nimport type { TokenAmount } from '../../types/token.js'\nimport { Token } from '../Token/Token.js'\n\nexport interface ItemPriceProps {\n  token: TokenAmount\n  contractCalls?: ContractCall[]\n}\n\nexport const ItemPrice: React.FC<ItemPriceProps> = ({\n  token,\n  contractCalls,\n}) => {\n  const { setFieldValue } = useFieldActions()\n\n  useEffect(() => {\n    if (token) {\n      setFieldValue('toChain', token.chainId, { isTouched: true })\n      setFieldValue('toToken', token.address, { isTouched: true })\n      setFieldValue(\n        'toAmount',\n        token.amount ? formatUnits(token.amount, token.decimals) : '',\n        {\n          isTouched: true,\n        }\n      )\n    }\n    if (contractCalls) {\n      setFieldValue('contractCalls', contractCalls, {\n        isTouched: true,\n      })\n    }\n  }, [contractCalls, setFieldValue, token])\n  return <Token token={token} sx={{ p: 2 }} />\n}\n"],"mappings":";;;;;;AAWA,MAAa,aAAuC,EAClD,OACA,oBACI;CACJ,MAAM,EAAE,kBAAkB,gBAAgB;CAE1C,gBAAgB;EACd,IAAI,OAAO;GACT,cAAc,WAAW,MAAM,SAAS,EAAE,WAAW,KAAK,CAAC;GAC3D,cAAc,WAAW,MAAM,SAAS,EAAE,WAAW,KAAK,CAAC;GAC3D,cACE,YACA,MAAM,SAAS,YAAY,MAAM,QAAQ,MAAM,QAAQ,IAAI,IAC3D,EACE,WAAW,KACb,CACF;EACF;EACA,IAAI,eACF,cAAc,iBAAiB,eAAe,EAC5C,WAAW,KACb,CAAC;CAEL,GAAG;EAAC;EAAe;EAAe;CAAK,CAAC;CACxC,OAAO,oBAACA,SAAD;EAAc;EAAO,IAAI,EAAE,GAAG,EAAE;CAAI,CAAA;AAC7C"}

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

@@ -1,2 +1,7 @@
-import type { NFTProps } from './types.js';
-export declare const NFT: React.FC<NFTProps>;
+import { NFTProps } from "./types.js";
+
+//#region src/components/ContractComponent/NFT/NFT.d.ts
+declare const NFT: React.FC<NFTProps>;
+//#endregion
+export { NFT };
+//# sourceMappingURL=NFT.d.ts.map

package/dist/esm/components/ContractComponent/NFT/NFT.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NFT.d.ts","names":[],"sources":["../../../../../src/components/ContractComponent/NFT/NFT.tsx"],"mappings":";;;cAMa,GAAA,EAAK,KAAA,CAAM,EAAA,CAAG,QAAA"}