@lifi/widget 4.0.0-beta.9 → 4.1.0

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

@@ -1 +1 @@
-{"version":3,"file":"AllChainsAvatar.js","sourceRoot":"","sources":["../../../../src/components/Chains/AllChainsAvatar.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"AllChainsAvatar.js","names":[],"sources":["../../../../src/components/Chains/AllChainsAvatar.tsx"],"sourcesContent":["import {\n  ChainId,\n  ChainType,\n  type EVMChain,\n  type ExtendedChain,\n} from '@lifi/sdk'\nimport { Avatar, Box } from '@mui/material'\nimport type React from 'react'\nimport { type JSX, memo, useMemo } from 'react'\n\ninterface AllChainsAvatarProps {\n  chains: ExtendedChain[] | EVMChain[]\n  size: 'small' | 'medium'\n}\n\nconst chainTypeIcons = [\n  {\n    name: 'Ethereum',\n    chainType: ChainType.EVM,\n    icon: 'https://lifinance.github.io/types/src/assets/icons/chains/ethereum.svg',\n    defaultChainId: ChainId.ETH,\n  },\n  {\n    name: 'Solana',\n    chainType: ChainType.SVM,\n    icon: 'https://lifinance.github.io/types/src/assets/icons/chains/solana.svg',\n    defaultChainId: ChainId.SOL,\n  },\n  {\n    name: 'Bitcoin',\n    chainType: ChainType.UTXO,\n    icon: 'https://lifinance.github.io/types/src/assets/icons/chains/bitcoin.svg',\n    defaultChainId: ChainId.BTC,\n  },\n  {\n    name: 'Sui',\n    chainType: ChainType.MVM,\n    icon: 'https://lifinance.github.io/types/src/assets/icons/chains/sui.svg',\n    defaultChainId: ChainId.SUI,\n  },\n  {\n    name: 'Tron',\n    chainType: ChainType.TVM,\n    icon: 'https://lifinance.github.io/types/src/assets/icons/chains/tron.svg',\n    defaultChainId: ChainId.TRN,\n  },\n]\n\nconst maxChainAvatarsCount = 4\n\nexport const AllChainsAvatar: React.NamedExoticComponent<AllChainsAvatarProps> =\n  memo(({ chains, size }: AllChainsAvatarProps): JSX.Element => {\n    const icons = useMemo(() => {\n      // Create maps for efficient lookups\n      const chainsPerChainType = new Map<ChainType, number>()\n      const chainsByChainType = new Map<\n        ChainType,\n        (ExtendedChain | EVMChain)[]\n      >()\n\n      chains.forEach((chain) => {\n        chainsPerChainType.set(\n          chain.chainType,\n          (chainsPerChainType.get(chain.chainType) || 0) + 1\n        )\n        const chainsOfType = chainsByChainType.get(chain.chainType) || []\n        chainsOfType.push(chain)\n        chainsByChainType.set(chain.chainType, chainsOfType)\n      })\n\n      // Get existing ecosystem icons\n      const existingChainTypeIcons = chainTypeIcons.filter(\n        (predefinedChain) => {\n          const numberOfChains =\n            chainsPerChainType.get(predefinedChain.chainType) ?? 0\n\n          // If there's only one chain of this type, check if it's not the default\n          if (numberOfChains === 1) {\n            const chainsOfType = chainsByChainType.get(\n              predefinedChain.chainType\n            )\n            const singleChain = chainsOfType?.[0]\n            // Exclude the predefined icon if the single chain is not the default\n            if (\n              singleChain &&\n              singleChain.id !== predefinedChain.defaultChainId\n            ) {\n              return false\n            }\n          }\n\n          return numberOfChains > 0\n        }\n      )\n\n      if (existingChainTypeIcons.length === maxChainAvatarsCount) {\n        return existingChainTypeIcons\n      }\n\n      const remainingSlots =\n        maxChainAvatarsCount - existingChainTypeIcons.length\n\n      // Create a Set for O(1) lookup of predefined icon names\n      const predefinedIconNames = new Set(\n        existingChainTypeIcons.map((icon) => icon.name)\n      )\n\n      const chainsWithLogos = chains.filter((chain) => {\n        // Filter out chain icons matching ecosystem icons\n        return !predefinedIconNames.has(chain.name) && Boolean(chain.logoURI)\n      })\n\n      const additionalIcons = chainsWithLogos\n        .slice(0, remainingSlots)\n        .map((chain) => ({\n          name: chain.name,\n          chainType: chain.chainType,\n          icon: chain.logoURI!,\n        }))\n\n      return [...existingChainTypeIcons, ...additionalIcons]\n    }, [chains])\n\n    const wrapperSize = size === 'small' ? '32px' : '40px'\n    const avatarSize = size === 'small' ? '12px' : '16px'\n    const avatarsCount = Math.min(icons.length, maxChainAvatarsCount)\n    const gridRows = avatarsCount > 2 ? 2 : 1\n    const gridColumns = avatarsCount > 1 ? 2 : 1\n\n    return (\n      <Box\n        sx={{\n          width: wrapperSize,\n          height: wrapperSize,\n          display: 'grid',\n          gridTemplateRows: `repeat(${gridRows}, 1fr)`,\n          gridTemplateColumns: `repeat(${gridColumns}, 1fr)`,\n          placeItems: 'center',\n        }}\n      >\n        {icons.slice(0, avatarsCount).map((chain, idx) => {\n          const isThirdAvatarInThreeAvatarLayout =\n            avatarsCount === 3 && idx === 2\n\n          return (\n            <Avatar\n              key={`${chain.chainType}-${idx}`}\n              src={chain.icon}\n              alt={chain.name}\n              sx={{\n                width: avatarSize,\n                height: avatarSize,\n                margin: 'auto',\n                ...(isThirdAvatarInThreeAvatarLayout && {\n                  gridColumn: '1 / span 2',\n                  gridRow: '2',\n                  justifySelf: 'center',\n                }),\n              }}\n            >\n              {chain.chainType[0]}\n            </Avatar>\n          )\n        })}\n      </Box>\n    )\n  })\n"],"mappings":";;;;;AAeA,MAAM,iBAAiB;CACrB;EACE,MAAM;EACN,WAAW,UAAU;EACrB,MAAM;EACN,gBAAgB,QAAQ;CAC1B;CACA;EACE,MAAM;EACN,WAAW,UAAU;EACrB,MAAM;EACN,gBAAgB,QAAQ;CAC1B;CACA;EACE,MAAM;EACN,WAAW,UAAU;EACrB,MAAM;EACN,gBAAgB,QAAQ;CAC1B;CACA;EACE,MAAM;EACN,WAAW,UAAU;EACrB,MAAM;EACN,gBAAgB,QAAQ;CAC1B;CACA;EACE,MAAM;EACN,WAAW,UAAU;EACrB,MAAM;EACN,gBAAgB,QAAQ;CAC1B;AACF;AAEA,MAAM,uBAAuB;AAE7B,MAAa,kBACX,MAAM,EAAE,QAAQ,WAA8C;CAC5D,MAAM,QAAQ,cAAc;EAE1B,MAAM,qCAAqB,IAAI,IAAuB;EACtD,MAAM,oCAAoB,IAAI,IAG5B;EAEF,OAAO,SAAS,UAAU;GACxB,mBAAmB,IACjB,MAAM,YACL,mBAAmB,IAAI,MAAM,SAAS,KAAK,KAAK,CACnD;GACA,MAAM,eAAe,kBAAkB,IAAI,MAAM,SAAS,KAAK,CAAC;GAChE,aAAa,KAAK,KAAK;GACvB,kBAAkB,IAAI,MAAM,WAAW,YAAY;EACrD,CAAC;EAGD,MAAM,yBAAyB,eAAe,QAC3C,oBAAoB;GACnB,MAAM,iBACJ,mBAAmB,IAAI,gBAAgB,SAAS,KAAK;GAGvD,IAAI,mBAAmB,GAAG;IAIxB,MAAM,cAHe,kBAAkB,IACrC,gBAAgB,SAEa,CAAC,GAAG;IAEnC,IACE,eACA,YAAY,OAAO,gBAAgB,gBAEnC,OAAO;GAEX;GAEA,OAAO,iBAAiB;EAC1B,CACF;EAEA,IAAI,uBAAuB,WAAW,sBACpC,OAAO;EAGT,MAAM,iBACJ,uBAAuB,uBAAuB;EAGhD,MAAM,sBAAsB,IAAI,IAC9B,uBAAuB,KAAK,SAAS,KAAK,IAAI,CAChD;EAOA,MAAM,kBALkB,OAAO,QAAQ,UAAU;GAE/C,OAAO,CAAC,oBAAoB,IAAI,MAAM,IAAI,KAAK,QAAQ,MAAM,OAAO;EACtE,CAEsC,CAAC,CACpC,MAAM,GAAG,cAAc,CAAC,CACxB,KAAK,WAAW;GACf,MAAM,MAAM;GACZ,WAAW,MAAM;GACjB,MAAM,MAAM;EACd,EAAE;EAEJ,OAAO,CAAC,GAAG,wBAAwB,GAAG,eAAe;CACvD,GAAG,CAAC,MAAM,CAAC;CAEX,MAAM,cAAc,SAAS,UAAU,SAAS;CAChD,MAAM,aAAa,SAAS,UAAU,SAAS;CAC/C,MAAM,eAAe,KAAK,IAAI,MAAM,QAAQ,oBAAoB;CAChE,MAAM,WAAW,eAAe,IAAI,IAAI;CACxC,MAAM,cAAc,eAAe,IAAI,IAAI;CAE3C,OACE,oBAAC,KAAD;EACE,IAAI;GACF,OAAO;GACP,QAAQ;GACR,SAAS;GACT,kBAAkB,UAAU,SAAS;GACrC,qBAAqB,UAAU,YAAY;GAC3C,YAAY;EACd;YAEC,MAAM,MAAM,GAAG,YAAY,CAAC,CAAC,KAAK,OAAO,QAAQ;GAChD,MAAM,mCACJ,iBAAiB,KAAK,QAAQ;GAEhC,OACE,oBAAC,QAAD;IAEE,KAAK,MAAM;IACX,KAAK,MAAM;IACX,IAAI;KACF,OAAO;KACP,QAAQ;KACR,QAAQ;KACR,GAAI,oCAAoC;MACtC,YAAY;MACZ,SAAS;MACT,aAAa;KACf;IACF;cAEC,MAAM,UAAU;GACX,GAfD,GAAG,MAAM,UAAU,GAAG,KAerB;EAEZ,CAAC;CACE,CAAA;AAET,CAAC"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"ChainList.js","sourceRoot":"","sources":["../../../../src/components/Chains/ChainList.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAExC,OAAO,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAE9C,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAA;AAC5D,OAAO,EACL,IAAI,EACJ,cAAc,EACd,cAAc,EACd,YAAY,GACb,MAAM,sBAAsB,CAAA;AAC7B,OAAO,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAA;AAahE,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,EACxB,SAAS,EACT,QAAQ,EACR,MAAM,EACN,cAAc,EACd,QAAQ,EACR,eAAe,EACf,SAAS,EACT,WAAW,GACI,EAAE,EAAE;IACnB,MAAM,EAAE,CAAC,EAAE,GAAG,cAAc,EAAE,CAAA;IAE9B,MAAM,SAAS,GAAG,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAA;IAElD,IAAI,SAAS,EAAE,CAAC;QACd,OAAO,CACL,KAAC,IAAI,IAAC,cAAc,QAAC,EAAE,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,YAC3C,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,CAC3C,MAAC,cAAc,IAEb,IAAI,EAAE,SAAS,EACf,EAAE,EAAE,EAAE,aAAa,EAAE,MAAM,EAAE,aAE7B,KAAC,cAAc,IAAC,IAAI,EAAE,SAAS,YAC7B,KAAC,QAAQ,IACP,OAAO,EAAC,UAAU,EAClB,KAAK,EAAE,SAAS,KAAK,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,EACtC,MAAM,EAAE,SAAS,KAAK,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,EACvC,EAAE,EAAE,EAAE,WAAW,EAAE,CAAC,EAAE,GACtB,GACa,EACjB,KAAC,YAAY,IACX,OAAO,EACL,KAAC,QAAQ,IACP,OAAO,EAAC,MAAM,EACd,KAAK,EAAE,MAAM,EACb,MAAM,EAAE,SAAS,KAAK,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,GACvC,EAEJ,IAAI,EAAE,SAAS,GACf,KArBG,KAAK,CAsBK,CAClB,CAAC,GACG,CACR,CAAA;IACH,CAAC;IAED,IAAI,CAAC,MAAM,CAAC,MAAM,EAAE,CAAC;QACnB,OAAO,CACL,KAAC,cAAc,IACb,OAAO,EAAE,CAAC,CAAC,6BAA6B,CAAC,EACzC,0BAA0B,EAAE,CAAC,WAAW,GACxC,CACH,CAAA;IACH,CAAC;IAED,OAAO,CACL,KAAC,oBAAoB,IACnB,gBAAgB,EAAE,SAAS,EAC3B,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,cAAc,EAAE,cAAc,EAC9B,QAAQ,EAAE,QAAQ,EAClB,eAAe,EAAE,eAAe,EAChC,SAAS,EAAE,SAAS,EACpB,gBAAgB,EAAE,WAAW,GAC7B,CACH,CAAA;AACH,CAAC,CAAA"}
+{"version":3,"file":"ChainList.js","names":["List","ListItemButton","ListItemAvatar","ListItemText"],"sources":["../../../../src/components/Chains/ChainList.tsx"],"sourcesContent":["import type { ExtendedChain } from '@lifi/sdk'\nimport { Skeleton } from '@mui/material'\nimport type { JSX, RefObject } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport type { FormType } from '../../stores/form/types.js'\nimport { SearchNotFound } from '../Search/SearchNotFound.js'\nimport {\n  List,\n  ListItemAvatar,\n  ListItemButton,\n  ListItemText,\n} from './ChainList.style.js'\nimport { VirtualizedChainList } from './VirtualizedChainList.js'\n\ninterface ChainListProps {\n  parentRef: RefObject<HTMLDivElement | null>\n  formType: FormType\n  chains: ExtendedChain[]\n  onSelect: (chain: ExtendedChain) => void\n  selectedChainId?: number\n  isLoading: boolean\n  hasSearchQuery: boolean\n  inExpansion: boolean\n}\n\nexport const ChainList = ({\n  parentRef,\n  formType,\n  chains,\n  hasSearchQuery,\n  onSelect,\n  selectedChainId,\n  isLoading,\n  inExpansion,\n}: ChainListProps): JSX.Element => {\n  const { t } = useTranslation()\n\n  const itemsSize = inExpansion ? 'small' : 'medium'\n\n  if (isLoading) {\n    return (\n      <List disablePadding sx={{ cursor: 'default' }}>\n        {Array.from({ length: 3 }).map((_, index) => (\n          <ListItemButton\n            key={index}\n            size={itemsSize}\n            sx={{ pointerEvents: 'none' }}\n          >\n            <ListItemAvatar size={itemsSize}>\n              <Skeleton\n                variant=\"circular\"\n                width={itemsSize === 'small' ? 32 : 40}\n                height={itemsSize === 'small' ? 32 : 40}\n                sx={{ marginRight: 2 }}\n              />\n            </ListItemAvatar>\n            <ListItemText\n              primary={\n                <Skeleton\n                  variant=\"text\"\n                  width={'100%'}\n                  height={itemsSize === 'small' ? 18 : 24}\n                />\n              }\n              size={itemsSize}\n            />\n          </ListItemButton>\n        ))}\n      </List>\n    )\n  }\n\n  if (!chains.length) {\n    return <SearchNotFound message={t('info.message.emptyChainList')} />\n  }\n\n  return (\n    <VirtualizedChainList\n      scrollElementRef={parentRef}\n      formType={formType}\n      chains={chains}\n      hasSearchQuery={hasSearchQuery}\n      onSelect={onSelect}\n      selectedChainId={selectedChainId}\n      itemsSize={itemsSize}\n      withPinnedChains={inExpansion}\n    />\n  )\n}\n"],"mappings":";;;;;;;AAyBA,MAAa,aAAa,EACxB,WACA,UACA,QACA,gBACA,UACA,iBACA,WACA,kBACiC;CACjC,MAAM,EAAE,MAAM,eAAe;CAE7B,MAAM,YAAY,cAAc,UAAU;CAE1C,IAAI,WACF,OACE,oBAACA,QAAD;EAAM,gBAAA;EAAe,IAAI,EAAE,QAAQ,UAAU;YAC1C,MAAM,KAAK,EAAE,QAAQ,EAAE,CAAC,CAAC,CAAC,KAAK,GAAG,UACjC,qBAACC,kBAAD;GAEE,MAAM;GACN,IAAI,EAAE,eAAe,OAAO;aAH9B,CAKE,oBAACC,kBAAD;IAAgB,MAAM;cACpB,oBAAC,UAAD;KACE,SAAQ;KACR,OAAO,cAAc,UAAU,KAAK;KACpC,QAAQ,cAAc,UAAU,KAAK;KACrC,IAAI,EAAE,aAAa,EAAE;IACtB,CAAA;GACa,CAAA,GAChB,oBAACC,gBAAD;IACE,SACE,oBAAC,UAAD;KACE,SAAQ;KACR,OAAO;KACP,QAAQ,cAAc,UAAU,KAAK;IACtC,CAAA;IAEH,MAAM;GACP,CAAA,CACa;KAtBT,KAsBS,CACjB;CACG,CAAA;CAIV,IAAI,CAAC,OAAO,QACV,OAAO,oBAAC,gBAAD,EAAgB,SAAS,EAAE,6BAA6B,EAAI,CAAA;CAGrE,OACE,oBAAC,sBAAD;EACE,kBAAkB;EACR;EACF;EACQ;EACN;EACO;EACN;EACX,kBAAkB;CACnB,CAAA;AAEL"}

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

@@ -1,45 +1,43 @@
-import { ListItem as ListItemBase, listItemButtonClasses, listItemTextClasses, Avatar as MuiAvatar, List as MuiList, ListItemAvatar as MuiListItemAvatar, ListItemText as MuiListItemText, styled, } from '@mui/material';
-import { ListItemButton as ListItemButtonBase } from '../ListItemButton.js';
-export const Avatar = styled(MuiAvatar)(({ size = 'medium' }) => ({
-    width: size === 'small' ? 32 : 40,
-    height: size === 'small' ? 32 : 40,
+import { ListItemButton as ListItemButton$2 } from "../ListItemButton.js";
+import { Avatar, List, ListItem, ListItemAvatar, ListItemText, listItemButtonClasses, listItemTextClasses, styled } from "@mui/material";
+//#region src/components/Chains/ChainList.style.tsx
+const Avatar$1 = styled(Avatar)(({ size = "medium" }) => ({
+	width: size === "small" ? 32 : 40,
+	height: size === "small" ? 32 : 40
 }));
-export const ListItemAvatar = styled(MuiListItemAvatar)(({ size = 'medium' }) => ({
-    minWidth: size === 'small' ? 44 : 56,
-}));
-export const ListItemText = styled(MuiListItemText)(({ size = 'medium' }) => ({
-    [`.${listItemTextClasses.primary}`]: {
-        fontWeight: 500,
-        fontSize: size === 'small' ? '1rem' : '1.125rem',
-        textOverflow: 'ellipsis',
-        overflow: 'hidden',
-        whiteSpace: 'nowrap',
-    },
-}));
-export const ListItemButton = styled(ListItemButtonBase)(({ size = 'medium', theme }) => {
-    return {
-        borderRadius: theme.vars.shape.borderRadius,
-        paddingLeft: size === 'small' ? theme.spacing(1) : theme.spacing(1.5),
-        height: size === 'small' ? 44 : 56,
-        width: '100%',
-    };
+const ListItemAvatar$1 = styled(ListItemAvatar)(({ size = "medium" }) => ({ minWidth: size === "small" ? 44 : 56 }));
+const ListItemText$1 = styled(ListItemText)(({ size = "medium" }) => ({ [`.${listItemTextClasses.primary}`]: {
+	fontWeight: 500,
+	fontSize: size === "small" ? "1rem" : "1.125rem",
+	textOverflow: "ellipsis",
+	overflow: "hidden",
+	whiteSpace: "nowrap"
+} }));
+const ListItemButton$1 = styled(ListItemButton$2)(({ size = "medium", theme }) => {
+	return {
+		borderRadius: theme.vars.shape.borderRadius,
+		paddingLeft: size === "small" ? theme.spacing(1) : theme.spacing(1.5),
+		height: size === "small" ? 44 : 56,
+		width: "100%"
+	};
 });
-export const List = styled(MuiList)(({ theme }) => ({
-    display: 'flex',
-    flexDirection: 'column',
-    gap: theme.spacing(0.5),
-    padding: 0,
-    marginLeft: theme.spacing(1.5),
-    marginRight: theme.spacing(1.5),
-    marginBottom: theme.spacing(1.5),
-    cursor: 'pointer',
+const List$1 = styled(List)(({ theme }) => ({
+	display: "flex",
+	flexDirection: "column",
+	gap: theme.spacing(.5),
+	padding: 0,
+	marginLeft: theme.spacing(1.5),
+	marginRight: theme.spacing(1.5),
+	marginBottom: theme.spacing(1.5),
+	cursor: "pointer"
 }));
-export const ListItem = styled(ListItemBase)(({ theme }) => ({
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    [`& .${listItemButtonClasses.root}`]: {
-        paddingRight: theme.spacing(1),
-    },
+const ListItem$1 = styled(ListItem)(({ theme }) => ({
+	position: "absolute",
+	top: 0,
+	left: 0,
+	[`& .${listItemButtonClasses.root}`]: { paddingRight: theme.spacing(1) }
 }));
+//#endregion
+export { Avatar$1 as Avatar, List$1 as List, ListItem$1 as ListItem, ListItemAvatar$1 as ListItemAvatar, ListItemButton$1 as ListItemButton, ListItemText$1 as ListItemText };
+
 //# sourceMappingURL=ChainList.style.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ChainList.style.js","sourceRoot":"","sources":["../../../../src/components/Chains/ChainList.style.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"ChainList.style.js","names":["Avatar","MuiAvatar","ListItemAvatar","MuiListItemAvatar","ListItemText","MuiListItemText","ListItemButton","ListItemButtonBase","List","MuiList","ListItem","ListItemBase"],"sources":["../../../../src/components/Chains/ChainList.style.tsx"],"sourcesContent":["import {\n  ListItem as ListItemBase,\n  listItemButtonClasses,\n  listItemTextClasses,\n  Avatar as MuiAvatar,\n  List as MuiList,\n  ListItemAvatar as MuiListItemAvatar,\n  ListItemText as MuiListItemText,\n  styled,\n} from '@mui/material'\nimport type React from 'react'\nimport { ListItemButton as ListItemButtonBase } from '../ListItemButton.js'\n\nexport const Avatar: React.FC<\n  React.ComponentProps<typeof MuiAvatar> &\n    Partial<{\n      size?: 'small' | 'medium'\n    }>\n> = styled(MuiAvatar)<{\n  size?: 'small' | 'medium'\n}>(({ size = 'medium' }) => ({\n  width: size === 'small' ? 32 : 40,\n  height: size === 'small' ? 32 : 40,\n}))\n\nexport const ListItemAvatar: React.FC<\n  React.ComponentProps<typeof MuiListItemAvatar> &\n    Partial<{\n      size?: 'small' | 'medium'\n    }>\n> = styled(MuiListItemAvatar)<{\n  size?: 'small' | 'medium'\n}>(({ size = 'medium' }) => ({\n  minWidth: size === 'small' ? 44 : 56,\n}))\n\nexport const ListItemText: React.FC<\n  React.ComponentProps<typeof MuiListItemText> &\n    Partial<{\n      size?: 'small' | 'medium'\n    }>\n> = styled(MuiListItemText)<{\n  size?: 'small' | 'medium'\n}>(({ size = 'medium' }) => ({\n  [`.${listItemTextClasses.primary}`]: {\n    fontWeight: 500,\n    fontSize: size === 'small' ? '1rem' : '1.125rem',\n    textOverflow: 'ellipsis',\n    overflow: 'hidden',\n    whiteSpace: 'nowrap',\n  },\n}))\n\nexport const ListItemButton: React.FC<\n  React.ComponentProps<typeof ListItemButtonBase> &\n    Partial<{\n      size?: 'small' | 'medium'\n    }>\n> = styled(ListItemButtonBase)<{\n  size?: 'small' | 'medium'\n}>(({ size = 'medium', theme }) => {\n  return {\n    borderRadius: theme.vars.shape.borderRadius,\n    paddingLeft: size === 'small' ? theme.spacing(1) : theme.spacing(1.5),\n    height: size === 'small' ? 44 : 56,\n    width: '100%',\n  }\n})\n\nexport const List: React.FC<React.ComponentProps<typeof MuiList>> = styled(\n  MuiList\n)(({ theme }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: theme.spacing(0.5),\n  padding: 0,\n  marginLeft: theme.spacing(1.5),\n  marginRight: theme.spacing(1.5),\n  marginBottom: theme.spacing(1.5),\n  cursor: 'pointer',\n}))\n\nexport const ListItem: React.FC<React.ComponentProps<typeof ListItemBase>> =\n  styled(ListItemBase)(({ theme }) => ({\n    position: 'absolute',\n    top: 0,\n    left: 0,\n    [`& .${listItemButtonClasses.root}`]: {\n      paddingRight: theme.spacing(1),\n    },\n  }))\n"],"mappings":";;;AAaA,MAAaA,WAKT,OAAOC,MAAS,CAAC,EAEjB,EAAE,OAAO,gBAAgB;CAC3B,OAAO,SAAS,UAAU,KAAK;CAC/B,QAAQ,SAAS,UAAU,KAAK;AAClC,EAAE;AAEF,MAAaC,mBAKT,OAAOC,cAAiB,CAAC,EAEzB,EAAE,OAAO,gBAAgB,EAC3B,UAAU,SAAS,UAAU,KAAK,GACpC,EAAE;AAEF,MAAaC,iBAKT,OAAOC,YAAe,CAAC,EAEvB,EAAE,OAAO,gBAAgB,GAC1B,IAAI,oBAAoB,YAAY;CACnC,YAAY;CACZ,UAAU,SAAS,UAAU,SAAS;CACtC,cAAc;CACd,UAAU;CACV,YAAY;AACd,EACF,EAAE;AAEF,MAAaC,mBAKT,OAAOC,gBAAkB,CAAC,EAE1B,EAAE,OAAO,UAAU,YAAY;CACjC,OAAO;EACL,cAAc,MAAM,KAAK,MAAM;EAC/B,aAAa,SAAS,UAAU,MAAM,QAAQ,CAAC,IAAI,MAAM,QAAQ,GAAG;EACpE,QAAQ,SAAS,UAAU,KAAK;EAChC,OAAO;CACT;AACF,CAAC;AAED,MAAaC,SAAuD,OAClEC,IACF,CAAC,EAAE,EAAE,aAAa;CAChB,SAAS;CACT,eAAe;CACf,KAAK,MAAM,QAAQ,EAAG;CACtB,SAAS;CACT,YAAY,MAAM,QAAQ,GAAG;CAC7B,aAAa,MAAM,QAAQ,GAAG;CAC9B,cAAc,MAAM,QAAQ,GAAG;CAC/B,QAAQ;AACV,EAAE;AAEF,MAAaC,aACX,OAAOC,QAAY,CAAC,EAAE,EAAE,aAAa;CACnC,UAAU;CACV,KAAK;CACL,MAAM;EACL,MAAM,sBAAsB,SAAS,EACpC,cAAc,MAAM,QAAQ,CAAC,EAC/B;AACF,EAAE"}

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

@@ -1,23 +1,55 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box } from '@mui/material';
-import { memo } from 'react';
-import { Avatar, ListItem, ListItemAvatar, ListItemButton, ListItemText, } from './ChainList.style.js';
-import { PinChainButton, pinButtonClassName } from './PinChainButton.js';
-export const ChainListItem = memo(({ chain, onSelect, selected, itemsSize, size, start, isPinned, onPin, withPin, }) => {
-    return (_jsx(ListItem, { style: {
-            height: `${size}px`,
-            transform: `translateY(${start}px)`,
-            padding: 0,
-            overflow: 'hidden',
-        }, sx: {
-            [`&:hover .${pinButtonClassName}`]: {
-                opacity: 1,
-                transform: 'translateY(0)',
-            },
-        }, children: _jsxs(ListItemButton, { onClick: () => onSelect(chain), selected: selected, size: itemsSize, children: [_jsx(ListItemAvatar, { size: itemsSize, children: _jsx(Avatar, { src: chain.logoURI, alt: chain.name, size: itemsSize, children: chain.name[0] }) }), _jsx(ListItemText, { primary: chain.name, size: itemsSize }), withPin && (_jsx(Box, { style: {
-                        position: 'relative',
-                        height: 28,
-                        width: 28,
-                    }, children: _jsx(PinChainButton, { isPinned: isPinned, onPin: () => onPin(chain.id) }) }))] }) }));
+import { Avatar as Avatar$1, ListItem as ListItem$1, ListItemAvatar as ListItemAvatar$1, ListItemButton as ListItemButton$1, ListItemText as ListItemText$1 } from "./ChainList.style.js";
+import { PinChainButton, pinButtonClassName } from "./PinChainButton.js";
+import { memo } from "react";
+import { Box } from "@mui/material";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/Chains/ChainListItem.tsx
+const ChainListItem = memo(({ chain, onSelect, selected, itemsSize, size, start, isPinned, onPin, withPin }) => {
+	return /* @__PURE__ */ jsx(ListItem$1, {
+		style: {
+			height: `${size}px`,
+			transform: `translateY(${start}px)`,
+			padding: 0,
+			overflow: "hidden"
+		},
+		sx: { [`&:hover .${pinButtonClassName}`]: {
+			opacity: 1,
+			transform: "translateY(0)"
+		} },
+		children: /* @__PURE__ */ jsxs(ListItemButton$1, {
+			onClick: () => onSelect(chain),
+			selected,
+			size: itemsSize,
+			children: [
+				/* @__PURE__ */ jsx(ListItemAvatar$1, {
+					size: itemsSize,
+					children: /* @__PURE__ */ jsx(Avatar$1, {
+						src: chain.logoURI,
+						alt: chain.name,
+						size: itemsSize,
+						children: chain.name[0]
+					})
+				}),
+				/* @__PURE__ */ jsx(ListItemText$1, {
+					primary: chain.name,
+					size: itemsSize
+				}),
+				withPin && /* @__PURE__ */ jsx(Box, {
+					style: {
+						position: "relative",
+						height: 28,
+						width: 28
+					},
+					children: /* @__PURE__ */ jsx(PinChainButton, {
+						isPinned,
+						onPin: () => onPin(chain.id)
+					})
+				})
+			]
+		})
+	});
 });
+//#endregion
+export { ChainListItem };
+
 //# sourceMappingURL=ChainListItem.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ChainListItem.js","sourceRoot":"","sources":["../../../../src/components/Chains/ChainListItem.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,GAAG,EAAE,MAAM,eAAe,CAAA;AACnC,OAAO,EAAE,IAAI,EAAE,MAAM,OAAO,CAAA;AAC5B,OAAO,EACL,MAAM,EACN,QAAQ,EACR,cAAc,EACd,cAAc,EACd,YAAY,GACb,MAAM,sBAAsB,CAAA;AAC7B,OAAO,EAAE,cAAc,EAAE,kBAAkB,EAAE,MAAM,qBAAqB,CAAA;AAcxE,MAAM,CAAC,MAAM,aAAa,GAAG,IAAI,CAC/B,CAAC,EACC,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,KAAK,EACL,OAAO,GACY,EAAE,EAAE;IACvB,OAAO,CACL,KAAC,QAAQ,IACP,KAAK,EAAE;YACL,MAAM,EAAE,GAAG,IAAI,IAAI;YACnB,SAAS,EAAE,cAAc,KAAK,KAAK;YACnC,OAAO,EAAE,CAAC;YACV,QAAQ,EAAE,QAAQ;SACnB,EACD,EAAE,EAAE;YACF,CAAC,YAAY,kBAAkB,EAAE,CAAC,EAAE;gBAClC,OAAO,EAAE,CAAC;gBACV,SAAS,EAAE,eAAe;aAC3B;SACF,YAED,MAAC,cAAc,IACb,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,EAC9B,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,SAAS,aAEf,KAAC,cAAc,IAAC,IAAI,EAAE,SAAS,YAC7B,KAAC,MAAM,IAAC,GAAG,EAAE,KAAK,CAAC,OAAO,EAAE,GAAG,EAAE,KAAK,CAAC,IAAI,EAAE,IAAI,EAAE,SAAS,YACzD,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,GACP,GACM,EACjB,KAAC,YAAY,IAAC,OAAO,EAAE,KAAK,CAAC,IAAI,EAAE,IAAI,EAAE,SAAS,GAAI,EACrD,OAAO,IAAI,CACV,KAAC,GAAG,IACF,KAAK,EAAE;wBACL,QAAQ,EAAE,UAAU;wBACpB,MAAM,EAAE,EAAE;wBACV,KAAK,EAAE,EAAE;qBACV,YAED,KAAC,cAAc,IACb,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC,GAC5B,GACE,CACP,IACc,GACR,CACZ,CAAA;AACH,CAAC,CACF,CAAA"}
+{"version":3,"file":"ChainListItem.js","names":["ListItem","ListItemButton","ListItemAvatar","Avatar","ListItemText"],"sources":["../../../../src/components/Chains/ChainListItem.tsx"],"sourcesContent":["import type { ExtendedChain } from '@lifi/sdk'\nimport { Box } from '@mui/material'\nimport type React from 'react'\nimport { type JSX, memo } from 'react'\nimport {\n  Avatar,\n  ListItem,\n  ListItemAvatar,\n  ListItemButton,\n  ListItemText,\n} from './ChainList.style.js'\nimport { PinChainButton, pinButtonClassName } from './PinChainButton.js'\n\ninterface ChainListItemProps {\n  chain: ExtendedChain\n  onSelect: (chain: ExtendedChain) => void\n  selected?: boolean\n  itemsSize: 'small' | 'medium'\n  size: number\n  start: number\n  isPinned: boolean\n  onPin: (chainId: number) => void\n  withPin: boolean\n}\n\nexport const ChainListItem: React.NamedExoticComponent<ChainListItemProps> =\n  memo(\n    ({\n      chain,\n      onSelect,\n      selected,\n      itemsSize,\n      size,\n      start,\n      isPinned,\n      onPin,\n      withPin,\n    }: ChainListItemProps): JSX.Element => {\n      return (\n        <ListItem\n          style={{\n            height: `${size}px`,\n            transform: `translateY(${start}px)`,\n            padding: 0,\n            overflow: 'hidden',\n          }}\n          sx={{\n            [`&:hover .${pinButtonClassName}`]: {\n              opacity: 1,\n              transform: 'translateY(0)',\n            },\n          }}\n        >\n          <ListItemButton\n            onClick={() => onSelect(chain)}\n            selected={selected}\n            size={itemsSize}\n          >\n            <ListItemAvatar size={itemsSize}>\n              <Avatar src={chain.logoURI} alt={chain.name} size={itemsSize}>\n                {chain.name[0]}\n              </Avatar>\n            </ListItemAvatar>\n            <ListItemText primary={chain.name} size={itemsSize} />\n            {withPin && (\n              <Box\n                style={{\n                  position: 'relative',\n                  height: 28,\n                  width: 28,\n                }}\n              >\n                <PinChainButton\n                  isPinned={isPinned}\n                  onPin={() => onPin(chain.id)}\n                />\n              </Box>\n            )}\n          </ListItemButton>\n        </ListItem>\n      )\n    }\n  )\n"],"mappings":";;;;;;AAyBA,MAAa,gBACX,MACG,EACC,OACA,UACA,UACA,WACA,MACA,OACA,UACA,OACA,cACqC;CACrC,OACE,oBAACA,YAAD;EACE,OAAO;GACL,QAAQ,GAAG,KAAK;GAChB,WAAW,cAAc,MAAM;GAC/B,SAAS;GACT,UAAU;EACZ;EACA,IAAI,GACD,YAAY,uBAAuB;GAClC,SAAS;GACT,WAAW;EACb,EACF;YAEA,qBAACC,kBAAD;GACE,eAAe,SAAS,KAAK;GACnB;GACV,MAAM;aAHR;IAKE,oBAACC,kBAAD;KAAgB,MAAM;eACpB,oBAACC,UAAD;MAAQ,KAAK,MAAM;MAAS,KAAK,MAAM;MAAM,MAAM;gBAChD,MAAM,KAAK;KACN,CAAA;IACM,CAAA;IAChB,oBAACC,gBAAD;KAAc,SAAS,MAAM;KAAM,MAAM;IAAY,CAAA;IACpD,WACC,oBAAC,KAAD;KACE,OAAO;MACL,UAAU;MACV,QAAQ;MACR,OAAO;KACT;eAEA,oBAAC,gBAAD;MACY;MACV,aAAa,MAAM,MAAM,EAAE;KAC5B,CAAA;IACE,CAAA;GAEO;;CACR,CAAA;AAEd,CACF"}

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

@@ -1,12 +1,23 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { memo } from 'react';
-import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
-import { getWidgetMaxHeight } from '../../utils/widgetSize.js';
-import { ExpansionTransition } from '../Expansion/ExpansionTransition.js';
-import { chainExpansionWidth, SelectChainExpansionContainer, } from './ChainsExpanded.style.js';
-import { SelectChainContent } from './SelectChainContent.js';
-export const ChainsExpanded = memo(function ChainsExpanded({ formType, open, }) {
-    const { theme } = useWidgetConfig();
-    return (_jsx(ExpansionTransition, { in: open, width: chainExpansionWidth, children: _jsx(SelectChainExpansionContainer, { expansionHeight: getWidgetMaxHeight(theme), children: _jsx(SelectChainContent, { inExpansion: true, formType: formType }) }) }));
+import { useWidgetConfig } from "../../providers/WidgetProvider/WidgetProvider.js";
+import { getWidgetMaxHeight } from "../../utils/widgetSize.js";
+import { ExpansionTransition } from "../Expansion/ExpansionTransition.js";
+import { SelectChainExpansionContainer, chainExpansionWidth } from "./ChainsExpanded.style.js";
+import { SelectChainExpansionContent } from "./SelectChainExpansionContent.js";
+import { memo } from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Chains/ChainsExpanded.tsx
+const ChainsExpanded = memo(function ChainsExpanded({ formType, open }) {
+	const { theme } = useWidgetConfig();
+	return /* @__PURE__ */ jsx(ExpansionTransition, {
+		in: open,
+		width: chainExpansionWidth,
+		children: /* @__PURE__ */ jsx(SelectChainExpansionContainer, {
+			expansionHeight: getWidgetMaxHeight(theme),
+			children: /* @__PURE__ */ jsx(SelectChainExpansionContent, { formType })
+		})
+	});
 });
+//#endregion
+export { ChainsExpanded };
+
 //# sourceMappingURL=ChainsExpanded.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"ChainsExpanded.js","sourceRoot":"","sources":["../../../../src/components/Chains/ChainsExpanded.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,OAAO,CAAA;AAC5B,OAAO,EAAE,eAAe,EAAE,MAAM,kDAAkD,CAAA;AAElF,OAAO,EAAE,kBAAkB,EAAE,MAAM,2BAA2B,CAAA;AAC9D,OAAO,EAAE,mBAAmB,EAAE,MAAM,qCAAqC,CAAA;AACzE,OAAO,EACL,mBAAmB,EACnB,6BAA6B,GAC9B,MAAM,2BAA2B,CAAA;AAClC,OAAO,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAA;AAO5D,MAAM,CAAC,MAAM,cAAc,GAAG,IAAI,CAAC,SAAS,cAAc,CAAC,EACzD,QAAQ,EACR,IAAI,GACgB;IACpB,MAAM,EAAE,KAAK,EAAE,GAAG,eAAe,EAAE,CAAA;IAEnC,OAAO,CACL,KAAC,mBAAmB,IAAC,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,mBAAmB,YACvD,KAAC,6BAA6B,IAC5B,eAAe,EAAE,kBAAkB,CAAC,KAAK,CAAC,YAE1C,KAAC,kBAAkB,IAAC,WAAW,QAAC,QAAQ,EAAE,QAAQ,GAAI,GACxB,GACZ,CACvB,CAAA;AACH,CAAC,CAAC,CAAA"}
+{"version":3,"file":"ChainsExpanded.js","names":[],"sources":["../../../../src/components/Chains/ChainsExpanded.tsx"],"sourcesContent":["import type React from 'react'\nimport { memo } from 'react'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport type { FormType } from '../../stores/form/types.js'\nimport { getWidgetMaxHeight } from '../../utils/widgetSize.js'\nimport { ExpansionTransition } from '../Expansion/ExpansionTransition.js'\nimport {\n  chainExpansionWidth,\n  SelectChainExpansionContainer,\n} from './ChainsExpanded.style.js'\nimport { SelectChainExpansionContent } from './SelectChainExpansionContent.js'\n\ninterface ChainsExpandedProps {\n  formType: FormType\n  open: boolean\n}\n\nexport const ChainsExpanded: React.NamedExoticComponent<ChainsExpandedProps> =\n  memo(function ChainsExpanded({ formType, open }: ChainsExpandedProps) {\n    const { theme } = useWidgetConfig()\n\n    return (\n      <ExpansionTransition in={open} width={chainExpansionWidth}>\n        <SelectChainExpansionContainer\n          expansionHeight={getWidgetMaxHeight(theme)}\n        >\n          <SelectChainExpansionContent formType={formType} />\n        </SelectChainExpansionContainer>\n      </ExpansionTransition>\n    )\n  })\n"],"mappings":";;;;;;;;AAiBA,MAAa,iBACX,KAAK,SAAS,eAAe,EAAE,UAAU,QAA6B;CACpE,MAAM,EAAE,UAAU,gBAAgB;CAElC,OACE,oBAAC,qBAAD;EAAqB,IAAI;EAAM,OAAO;YACpC,oBAAC,+BAAD;GACE,iBAAiB,mBAAmB,KAAK;aAEzC,oBAAC,6BAAD,EAAuC,SAAW,CAAA;EACrB,CAAA;CACZ,CAAA;AAEzB,CAAC"}

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

@@ -1,17 +1,19 @@
-import { Box, styled } from '@mui/material';
-export const chainExpansionWidth = '256px';
-export 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,
+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

@@ -1 +1 @@
-{"version":3,"file":"ChainsExpanded.style.js","sourceRoot":"","sources":["../../../../src/components/Chains/ChainsExpanded.style.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,eAAe,CAAA;AAE3C,MAAM,CAAC,MAAM,mBAAmB,GAAG,OAAO,CAAA;AAM1C,MAAM,CAAC,MAAM,6BAA6B,GAAG,MAAM,CAAC,GAAG,EAAE;IACvD,iBAAiB,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,KAAK,iBAAiB;CACxD,CAAC,CAAqC,CAAC,EAAE,KAAK,EAAE,eAAe,EAAE,EAAE,EAAE,CAAC,CAAC;IACtE,GAAG,KAAK,CAAC,SAAS;IAClB,QAAQ,EAAE,UAAU;IACpB,SAAS,EAAE,aAAa;IACxB,KAAK,EAAE,mBAAmB;IAC1B,UAAU,EAAE,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,UAAU,CAAC,OAAO;IACjD,QAAQ,EAAE,QAAQ;IAClB,IAAI,EAAE,CAAC;IACP,MAAM,EAAE,CAAC;IACT,MAAM,EAAE,eAAe;IACvB,GAAG,KAAK,CAAC,qBAAqB;CAC/B,CAAC,CAAC,CAAA"}
+{"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,CAAC,EAAsC,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

@@ -1,34 +1,43 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import PushPinIcon from '@mui/icons-material/PushPin';
-import PushPinOutlinedIcon from '@mui/icons-material/PushPinOutlined';
-import { IconButton } from '@mui/material';
-export const pinButtonClassName = 'pin-button';
+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;
-export const PinChainButton = ({ isPinned, onPin }) => {
-    const PinIcon = isPinned ? PushPinIcon : PushPinOutlinedIcon;
-    return (_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: _jsx(PinIcon, { sx: {
-                height: 20,
-                width: 20,
-                color: 'text.secondary',
-            } }) }));
+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

@@ -1 +1 @@
-{"version":3,"file":"PinChainButton.js","sourceRoot":"","sources":["../../../../src/components/Chains/PinChainButton.tsx"],"names":[],"mappings":";AAAA,OAAO,WAAW,MAAM,6BAA6B,CAAA;AACrD,OAAO,mBAAmB,MAAM,qCAAqC,CAAA;AACrE,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAO1C,MAAM,CAAC,MAAM,kBAAkB,GAAG,YAAY,CAAA;AAC9C,MAAM,iBAAiB,GAAG,GAAG,CAAA;AAE7B,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAuB,EAAE,EAAE;IACzE,MAAM,OAAO,GAAG,QAAQ,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,mBAAmB,CAAA;IAC5D,OAAO,CACL,KAAC,UAAU,IACT,SAAS,EAAE,kBAAkB,EAC7B,IAAI,EAAC,KAAK,gBACC,KAAK,EAChB,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;YACb,CAAC,CAAC,eAAe,EAAE,CAAA;YACnB,KAAK,EAAE,CAAA;QACT,CAAC,EACD,EAAE,EAAE;YACF,QAAQ,EAAE,UAAU;YACpB,GAAG,EAAE,CAAC;YACN,IAAI,EAAE,CAAC;YACP,MAAM,EAAE,EAAE;YACV,KAAK,EAAE,EAAE;YACT,UAAU,EAAE,WAAW,iBAAiB,8CAA8C,iBAAiB,iCAAiC;YACxI,GAAG,CAAC,QAAQ;gBACV,CAAC,CAAC;oBACE,OAAO,EAAE,CAAC;oBACV,SAAS,EAAE,eAAe;iBAC3B;gBACH,CAAC,CAAC;oBACE,OAAO,EAAE,CAAC;oBACV,SAAS,EAAE,kBAAkB;iBAC9B,CAAC;SACP,YAED,KAAC,OAAO,IACN,EAAE,EAAE;gBACF,MAAM,EAAE,EAAE;gBACV,KAAK,EAAE,EAAE;gBACT,KAAK,EAAE,gBAAgB;aACxB,GACD,GACS,CACd,CAAA;AACH,CAAC,CAAA"}
+{"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"}