@lifi/widget 0.0.0-preview-6cc63bac

package/dist/esm/components/Chains/ChainsExpanded.style.js

@@ -0,0 +1,19 @@
+import { Box, styled } from "@mui/material";
+//#region src/components/Chains/ChainsExpanded.style.tsx
+const chainExpansionWidth = "256px";
+const SelectChainExpansionContainer = styled(Box, { shouldForwardProp: (prop) => prop !== "expansionHeight" })(({ theme, expansionHeight }) => ({
+	...theme.container,
+	position: "relative",
+	boxSizing: "content-box",
+	width: chainExpansionWidth,
+	background: theme.vars.palette.background.default,
+	overflow: "hidden",
+	flex: 1,
+	zIndex: 0,
+	height: expansionHeight,
+	...theme.chainSidebarContainer
+}));
+//#endregion
+export { SelectChainExpansionContainer, chainExpansionWidth };
+
+//# sourceMappingURL=ChainsExpanded.style.js.map

package/dist/esm/components/Chains/ChainsExpanded.style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChainsExpanded.style.js","names":[],"sources":["../../../../src/components/Chains/ChainsExpanded.style.tsx"],"sourcesContent":["import { Box, styled } from '@mui/material'\nimport type React from 'react'\n\nexport const chainExpansionWidth = '256px'\n\ninterface SelectChainExpansionContainerProps {\n  expansionHeight: string | number\n}\n\nexport const SelectChainExpansionContainer: React.FC<\n  React.ComponentProps<typeof Box> & SelectChainExpansionContainerProps\n> = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'expansionHeight',\n})<SelectChainExpansionContainerProps>(({ theme, expansionHeight }) => ({\n  ...theme.container,\n  position: 'relative',\n  boxSizing: 'content-box',\n  width: chainExpansionWidth,\n  background: theme.vars.palette.background.default,\n  overflow: 'hidden',\n  flex: 1,\n  zIndex: 0,\n  height: expansionHeight,\n  ...theme.chainSidebarContainer,\n}))\n"],"mappings":";;AAGA,MAAa,sBAAsB;AAMnC,MAAa,gCAET,OAAO,KAAK,EACd,oBAAoB,SAAS,SAAS,kBACxC,CAAC,GAAuC,EAAE,OAAO,uBAAuB;CACtE,GAAG,MAAM;CACT,UAAU;CACV,WAAW;CACX,OAAO;CACP,YAAY,MAAM,KAAK,QAAQ,WAAW;CAC1C,UAAU;CACV,MAAM;CACN,QAAQ;CACR,QAAQ;CACR,GAAG,MAAM;AACX,EAAE"}

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

@@ -0,0 +1,43 @@
+import { IconButton } from "@mui/material";
+import { jsx } from "react/jsx-runtime";
+import PushPinIcon from "@mui/icons-material/PushPin";
+import PushPinOutlinedIcon from "@mui/icons-material/PushPinOutlined";
+//#region src/components/Chains/PinChainButton.tsx
+const pinButtonClassName = "pin-button";
+const animationDuration = 225;
+const PinChainButton = ({ isPinned, onPin }) => {
+	const PinIcon = isPinned ? PushPinIcon : PushPinOutlinedIcon;
+	return /* @__PURE__ */ jsx(IconButton, {
+		className: pinButtonClassName,
+		edge: "end",
+		"aria-label": "pin",
+		onClick: (e) => {
+			e.stopPropagation();
+			onPin();
+		},
+		sx: {
+			position: "absolute",
+			top: 0,
+			left: 0,
+			height: 28,
+			width: 28,
+			transition: `opacity ${animationDuration}ms cubic-bezier(0.4, 0, 0.2, 1), transform ${animationDuration}ms cubic-bezier(0.4, 0, 0.2, 1)`,
+			...isPinned ? {
+				opacity: 1,
+				transform: "translateY(0)"
+			} : {
+				opacity: 0,
+				transform: "translateY(-50%)"
+			}
+		},
+		children: /* @__PURE__ */ jsx(PinIcon, { sx: {
+			height: 20,
+			width: 20,
+			color: "text.secondary"
+		} })
+	});
+};
+//#endregion
+export { PinChainButton, pinButtonClassName };
+
+//# sourceMappingURL=PinChainButton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PinChainButton.js","names":[],"sources":["../../../../src/components/Chains/PinChainButton.tsx"],"sourcesContent":["import PushPinIcon from '@mui/icons-material/PushPin'\nimport PushPinOutlinedIcon from '@mui/icons-material/PushPinOutlined'\nimport { IconButton } from '@mui/material'\nimport type { JSX } from 'react'\n\ninterface PinChainButtonProps {\n  isPinned: boolean\n  onPin: () => void\n}\n\nexport const pinButtonClassName = 'pin-button'\nconst animationDuration = 225\n\nexport const PinChainButton = ({\n  isPinned,\n  onPin,\n}: PinChainButtonProps): JSX.Element => {\n  const PinIcon = isPinned ? PushPinIcon : PushPinOutlinedIcon\n  return (\n    <IconButton\n      className={pinButtonClassName}\n      edge=\"end\"\n      aria-label=\"pin\"\n      onClick={(e) => {\n        e.stopPropagation()\n        onPin()\n      }}\n      sx={{\n        position: 'absolute',\n        top: 0,\n        left: 0,\n        height: 28,\n        width: 28,\n        transition: `opacity ${animationDuration}ms cubic-bezier(0.4, 0, 0.2, 1), transform ${animationDuration}ms cubic-bezier(0.4, 0, 0.2, 1)`,\n        ...(isPinned\n          ? {\n              opacity: 1,\n              transform: 'translateY(0)',\n            }\n          : {\n              opacity: 0,\n              transform: 'translateY(-50%)',\n            }),\n      }}\n    >\n      <PinIcon\n        sx={{\n          height: 20,\n          width: 20,\n          color: 'text.secondary',\n        }}\n      />\n    </IconButton>\n  )\n}\n"],"mappings":";;;;;AAUA,MAAa,qBAAqB;AAClC,MAAM,oBAAoB;AAE1B,MAAa,kBAAkB,EAC7B,UACA,YACsC;CACtC,MAAM,UAAU,WAAW,cAAc;CACzC,OACE,oBAAC,YAAD;EACE,WAAW;EACX,MAAK;EACL,cAAW;EACX,UAAU,MAAM;GACd,EAAE,gBAAgB;GAClB,MAAM;EACR;EACA,IAAI;GACF,UAAU;GACV,KAAK;GACL,MAAM;GACN,QAAQ;GACR,OAAO;GACP,YAAY,WAAW,kBAAkB,6CAA6C,kBAAkB;GACxG,GAAI,WACA;IACE,SAAS;IACT,WAAW;GACb,IACA;IACE,SAAS;IACT,WAAW;GACb;EACN;YAEA,oBAAC,SAAD,EACE,IAAI;GACF,QAAQ;GACR,OAAO;GACP,OAAO;EACT,EACD,CAAA;CACS,CAAA;AAEhB"}

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

@@ -0,0 +1,65 @@
+import { getWidgetMaxHeight } from "../../utils/widgetSize.js";
+import { useChainSearch } from "../../hooks/useChainSearch.js";
+import { PageContainer } from "../PageContainer.js";
+import { SearchInput } from "../Search/SearchInput.js";
+import { ChainList } from "./ChainList.js";
+import { useLayoutEffect, useMemo, useRef, useState } from "react";
+import { Box, useTheme } from "@mui/material";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+//#region src/components/Chains/SelectChainExpansionContent.tsx
+function SelectChainExpansionContent({ formType, onSelect }) {
+	const { t } = useTranslation();
+	const theme = useTheme();
+	const inputRef = useRef(null);
+	const headerRef = useRef(null);
+	const listRef = useRef(null);
+	const { filteredChains, isLoading, selectedChainId, onSelectChainFallback, onChange, onClear } = useChainSearch(formType, listRef, inputRef);
+	const [headerHeight, setHeaderHeight] = useState(0);
+	useLayoutEffect(() => {
+		if (headerRef.current) setHeaderHeight(headerRef.current.offsetHeight);
+	}, []);
+	const listContainerHeight = useMemo(() => {
+		if (!headerHeight) return;
+		const fullContainerHeight = getWidgetMaxHeight(theme);
+		return `calc(${typeof fullContainerHeight === "number" ? `${fullContainerHeight}px` : fullContainerHeight} - ${headerHeight}px)`;
+	}, [theme, headerHeight]);
+	return /* @__PURE__ */ jsxs(PageContainer, {
+		disableGutters: true,
+		children: [/* @__PURE__ */ jsx(Box, {
+			ref: headerRef,
+			sx: {
+				pb: 2,
+				px: 2.5,
+				pt: 3
+			},
+			children: /* @__PURE__ */ jsx(SearchInput, {
+				inputRef,
+				onChange,
+				placeholder: t("main.searchNetwork"),
+				size: "small",
+				onClear
+			})
+		}), /* @__PURE__ */ jsx(Box, {
+			ref: listRef,
+			style: {
+				height: listContainerHeight,
+				overflow: "auto"
+			},
+			children: /* @__PURE__ */ jsx(ChainList, {
+				parentRef: listRef,
+				formType,
+				chains: filteredChains,
+				isLoading,
+				onSelect: onSelect ?? onSelectChainFallback,
+				selectedChainId,
+				hasSearchQuery: !!inputRef.current?.value,
+				inExpansion: true
+			})
+		})]
+	});
+}
+//#endregion
+export { SelectChainExpansionContent };
+
+//# sourceMappingURL=SelectChainExpansionContent.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SelectChainExpansionContent.js","names":[],"sources":["../../../../src/components/Chains/SelectChainExpansionContent.tsx"],"sourcesContent":["import type { ExtendedChain } from '@lifi/sdk'\nimport { Box, useTheme } from '@mui/material'\nimport { type JSX, useLayoutEffect, useMemo, useRef, useState } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useChainSearch } from '../../hooks/useChainSearch.js'\nimport type { FormType } from '../../stores/form/types.js'\nimport { getWidgetMaxHeight } from '../../utils/widgetSize.js'\nimport { PageContainer } from '../PageContainer.js'\nimport { SearchInput } from '../Search/SearchInput.js'\nimport { ChainList } from './ChainList.js'\n\ninterface SelectChainExpansionContentProps {\n  formType: FormType\n  onSelect?: (chain: ExtendedChain) => void\n}\n\nexport function SelectChainExpansionContent({\n  formType,\n  onSelect,\n}: SelectChainExpansionContentProps): JSX.Element {\n  const { t } = useTranslation()\n  const theme = useTheme()\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 [headerHeight, setHeaderHeight] = useState(0)\n\n  useLayoutEffect(() => {\n    if (headerRef.current) {\n      setHeaderHeight(headerRef.current.offsetHeight)\n    }\n  }, [])\n\n  const listContainerHeight = useMemo(() => {\n    if (!headerHeight) {\n      return undefined\n    }\n    const fullContainerHeight = getWidgetMaxHeight(theme)\n    const value =\n      typeof fullContainerHeight === 'number'\n        ? `${fullContainerHeight}px`\n        : fullContainerHeight\n    return `calc(${value} - ${headerHeight}px)`\n  }, [theme, headerHeight])\n\n  return (\n    <PageContainer disableGutters>\n      <Box ref={headerRef} sx={{ pb: 2, px: 2.5, pt: 3 }}>\n        <SearchInput\n          inputRef={inputRef}\n          onChange={onChange}\n          placeholder={t('main.searchNetwork')}\n          size=\"small\"\n          onClear={onClear}\n        />\n      </Box>\n      <Box\n        ref={listRef}\n        style={{ height: listContainerHeight, overflow: 'auto' }}\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\n        />\n      </Box>\n    </PageContainer>\n  )\n}\n"],"mappings":";;;;;;;;;;AAgBA,SAAgB,4BAA4B,EAC1C,UACA,YACgD;CAChD,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,QAAQ,SAAS;CACvB,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,CAAC,cAAc,mBAAmB,SAAS,CAAC;CAElD,sBAAsB;EACpB,IAAI,UAAU,SACZ,gBAAgB,UAAU,QAAQ,YAAY;CAElD,GAAG,CAAC,CAAC;CAEL,MAAM,sBAAsB,cAAc;EACxC,IAAI,CAAC,cACH;EAEF,MAAM,sBAAsB,mBAAmB,KAAK;EAKpD,OAAO,QAHL,OAAO,wBAAwB,WAC3B,GAAG,oBAAoB,MACvB,oBACe,KAAK,aAAa;CACzC,GAAG,CAAC,OAAO,YAAY,CAAC;CAExB,OACE,qBAAC,eAAD;EAAe,gBAAA;YAAf,CACE,oBAAC,KAAD;GAAK,KAAK;GAAW,IAAI;IAAE,IAAI;IAAG,IAAI;IAAK,IAAI;GAAE;aAC/C,oBAAC,aAAD;IACY;IACA;IACV,aAAa,EAAE,oBAAoB;IACnC,MAAK;IACI;GACV,CAAA;EACE,CAAA,GACL,oBAAC,KAAD;GACE,KAAK;GACL,OAAO;IAAE,QAAQ;IAAqB,UAAU;GAAO;aAEvD,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/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

@@ -0,0 +1,143 @@
+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

@@ -0,0 +1 @@
+{"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,GAAG,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

@@ -0,0 +1,14 @@
+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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,12 @@
+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[];
+}
+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

@@ -0,0 +1,29 @@
+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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,7 @@
+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"}

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

@@ -0,0 +1,33 @@
+import { useFieldActions } from "../../../stores/form/useFieldActions.js";
+import { NFTBase } from "./NFTBase.js";
+import { formatUnits } from "@lifi/sdk";
+import { useEffect } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/ContractComponent/NFT/NFT.tsx
+const NFT = ({ imageUrl, isLoading, collectionName, assetName, owner, token, contractCall }) => {
+	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 (contractCall) setFieldValue("contractCalls", [contractCall], { isTouched: true });
+	}, [
+		contractCall,
+		setFieldValue,
+		token
+	]);
+	return /* @__PURE__ */ jsx(NFTBase, {
+		isLoading,
+		imageUrl,
+		collectionName,
+		assetName,
+		owner,
+		token
+	});
+};
+//#endregion
+export { NFT };
+
+//# sourceMappingURL=NFT.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NFT.js","names":[],"sources":["../../../../../src/components/ContractComponent/NFT/NFT.tsx"],"sourcesContent":["import { formatUnits } from '@lifi/sdk'\nimport { useEffect } from 'react'\nimport { useFieldActions } from '../../../stores/form/useFieldActions.js'\nimport { NFTBase } from './NFTBase.js'\nimport type { NFTProps } from './types.js'\n\nexport const NFT: React.FC<NFTProps> = ({\n  imageUrl,\n  isLoading,\n  collectionName,\n  assetName,\n  owner,\n  token,\n  contractCall,\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 (contractCall) {\n      setFieldValue('contractCalls', [contractCall], {\n        isTouched: true,\n      })\n    }\n  }, [contractCall, setFieldValue, token])\n  return (\n    <NFTBase\n      isLoading={isLoading}\n      imageUrl={imageUrl}\n      collectionName={collectionName}\n      assetName={assetName}\n      owner={owner}\n      token={token}\n    />\n  )\n}\n"],"mappings":";;;;;;AAMA,MAAa,OAA2B,EACtC,UACA,WACA,gBACA,WACA,OACA,OACA,mBACI;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,cACF,cAAc,iBAAiB,CAAC,YAAY,GAAG,EAC7C,WAAW,KACb,CAAC;CAEL,GAAG;EAAC;EAAc;EAAe;CAAK,CAAC;CACvC,OACE,oBAAC,SAAD;EACa;EACD;EACM;EACL;EACJ;EACA;CACR,CAAA;AAEL"}

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

@@ -0,0 +1,12 @@
+import { Avatar, styled } from "@mui/material";
+//#region src/components/ContractComponent/NFT/NFT.style.ts
+const PreviewAvatar = styled(Avatar)(({ theme }) => ({
+	background: theme.vars.palette.background.paper,
+	width: 96,
+	height: 96,
+	borderRadius: theme.vars.shape.borderRadius
+}));
+//#endregion
+export { PreviewAvatar };
+
+//# sourceMappingURL=NFT.style.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NFT.style.js","names":[],"sources":["../../../../../src/components/ContractComponent/NFT/NFT.style.ts"],"sourcesContent":["import { Avatar, styled } from '@mui/material'\nimport type React from 'react'\n\nexport const PreviewAvatar: React.FC<React.ComponentProps<typeof Avatar>> =\n  styled(Avatar)(({ theme }) => ({\n    background: theme.vars.palette.background.paper,\n    width: 96,\n    height: 96,\n    borderRadius: theme.vars.shape.borderRadius,\n  }))\n"],"mappings":";;AAGA,MAAa,gBACX,OAAO,MAAM,GAAG,EAAE,aAAa;CAC7B,YAAY,MAAM,KAAK,QAAQ,WAAW;CAC1C,OAAO;CACP,QAAQ;CACR,cAAc,MAAM,KAAK,MAAM;AACjC,EAAE"}

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

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

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

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