@lifi/widget 0.0.0-preview-6cc63bac

package/dist/esm/components/ChainSelect/ChainSelect.js

@@ -0,0 +1,124 @@
+import { navigationRoutes } from "../../utils/navigationRoutes.js";
+import { useFieldActions } from "../../stores/form/useFieldActions.js";
+import { useChainOrderStore } from "../../stores/chains/ChainOrderStore.js";
+import { FormKeyHelper } from "../../stores/form/types.js";
+import { useChainSelect } from "./useChainSelect.js";
+import { useFieldValues } from "../../stores/form/useFieldValues.js";
+import { AllChainsAvatar } from "../Chains/AllChainsAvatar.js";
+import { ChainAvatar, ChainCard, ChainContainer, MoreChainsBox, MoreChainsText } from "./ChainSelect.style.js";
+import { memo, useCallback, useEffect, useMemo } from "react";
+import { useNavigate } from "@tanstack/react-router";
+import { Skeleton, Tooltip, useMediaQuery } from "@mui/material";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+//#region src/components/ChainSelect/ChainSelect.tsx
+const ChainSelect = memo(({ formType }) => {
+	const { t } = useTranslation();
+	const navigate = useNavigate();
+	const isMobile = useMediaQuery((theme) => theme.breakpoints.down(theme.breakpoints.values.xs));
+	const { setFieldValue } = useFieldActions();
+	const { chainOrder, chains, isLoading, getSelectedChains, setChainOrder, setCurrentChain } = useChainSelect(formType);
+	const [showAllNetworks, isAllNetworks, setIsAllNetworks] = useChainOrderStore((state) => [
+		state[`${formType}ShowAllNetworks`],
+		state[`${formType}IsAllNetworks`],
+		state.setIsAllNetworks
+	]);
+	const [chainId] = useFieldValues(FormKeyHelper.getChainKey(formType));
+	useEffect(() => {
+		if (chainId) {
+			if (!chainOrder.includes(chainId)) setChainOrder(chainId, formType);
+		}
+	}, [
+		chainId,
+		chainOrder,
+		formType,
+		setChainOrder
+	]);
+	const onChainSelect = useCallback((selectedChainId) => {
+		setIsAllNetworks(false, formType);
+		setCurrentChain(selectedChainId);
+	}, [
+		setIsAllNetworks,
+		setCurrentChain,
+		formType
+	]);
+	const showAllChains = useCallback(() => {
+		navigate({ to: navigationRoutes[`${formType}Chain`] });
+	}, [navigate, formType]);
+	const selectAllNetworks = useCallback(() => {
+		setIsAllNetworks(true, formType);
+		setFieldValue(FormKeyHelper.getChainKey(formType), "", { isTouched: true });
+		setFieldValue(FormKeyHelper.getTokenKey(formType), "", { isTouched: true });
+	}, [
+		setIsAllNetworks,
+		formType,
+		setFieldValue
+	]);
+	const chainsToHide = chains?.length === 9 ? 0 : (chains?.length ?? 0) - 8;
+	const chainsToShow = useMemo(() => (chainsToHide > 0 ? getSelectedChains() : chains) ?? [], [
+		chainsToHide,
+		getSelectedChains,
+		chains
+	]);
+	const tilesCount = chainsToShow.length + (showAllNetworks ? 1 : 0) + (chainsToHide > 0 ? 1 : 0);
+	if (isLoading) return /* @__PURE__ */ jsx(ChainContainer, {
+		itemCount: tilesCount,
+		children: Array.from({ length: 10 }).map((_, index) => /* @__PURE__ */ jsx(Skeleton, {
+			variant: "rectangular",
+			width: 56,
+			height: isMobile ? 36 : 56,
+			sx: { borderRadius: 1 }
+		}, index))
+	});
+	return /* @__PURE__ */ jsxs(ChainContainer, {
+		itemCount: tilesCount,
+		children: [
+			showAllNetworks && /* @__PURE__ */ jsx(Tooltip, {
+				title: t("main.allNetworks"),
+				enterNextDelay: 100,
+				children: /* @__PURE__ */ jsx(ChainCard, {
+					component: "button",
+					onClick: selectAllNetworks,
+					type: isAllNetworks ? "selected" : "default",
+					selectionColor: "secondary",
+					children: /* @__PURE__ */ jsx(AllChainsAvatar, {
+						chains: chains ?? [],
+						size: isMobile ? "small" : "medium"
+					})
+				})
+			}),
+			chainsToShow.map((chain) => /* @__PURE__ */ jsx(ChainItem, {
+				chain,
+				isSelected: chainId === chain.id,
+				isAllNetworks,
+				onSelect: onChainSelect
+			}, chain.id)),
+			chainsToHide > 0 && /* @__PURE__ */ jsx(ChainCard, {
+				component: "button",
+				onClick: showAllChains,
+				children: /* @__PURE__ */ jsx(MoreChainsBox, { children: /* @__PURE__ */ jsxs(MoreChainsText, { children: ["+", chainsToHide] }) })
+			})
+		]
+	});
+});
+const ChainItem = memo(({ chain, isSelected, isAllNetworks, onSelect }) => {
+	return /* @__PURE__ */ jsx(Tooltip, {
+		title: chain.name,
+		enterNextDelay: 100,
+		children: /* @__PURE__ */ jsx(ChainCard, {
+			component: "button",
+			onClick: () => onSelect(chain.id),
+			type: !isAllNetworks && isSelected ? "selected" : "default",
+			selectionColor: "secondary",
+			children: /* @__PURE__ */ jsx(ChainAvatar, {
+				src: chain.logoURI,
+				alt: chain.key,
+				children: chain.name[0]
+			})
+		})
+	});
+});
+//#endregion
+export { ChainSelect };
+
+//# sourceMappingURL=ChainSelect.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChainSelect.js","names":[],"sources":["../../../../src/components/ChainSelect/ChainSelect.tsx"],"sourcesContent":["import type { EVMChain } from '@lifi/sdk'\nimport { Skeleton, type Theme, Tooltip, useMediaQuery } from '@mui/material'\nimport { useNavigate } from '@tanstack/react-router'\nimport type React from 'react'\nimport { type JSX, memo, useCallback, useEffect, useMemo } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useChainOrderStore } from '../../stores/chains/ChainOrderStore.js'\nimport {\n  maxChainsToOrder,\n  maxChainsToShow,\n  maxGridItemsToShow,\n} from '../../stores/chains/createChainOrderStore.js'\nimport type { FormTypeProps } from '../../stores/form/types.js'\nimport { FormKeyHelper } from '../../stores/form/types.js'\nimport { useFieldActions } from '../../stores/form/useFieldActions.js'\nimport { useFieldValues } from '../../stores/form/useFieldValues.js'\nimport { navigationRoutes } from '../../utils/navigationRoutes.js'\nimport { AllChainsAvatar } from '../Chains/AllChainsAvatar.js'\nimport {\n  ChainAvatar,\n  ChainCard,\n  ChainContainer,\n  MoreChainsBox,\n  MoreChainsText,\n} from './ChainSelect.style.js'\nimport { useChainSelect } from './useChainSelect.js'\n\nexport const ChainSelect: React.NamedExoticComponent<FormTypeProps> = memo(\n  ({ formType }: FormTypeProps): JSX.Element => {\n    const { t } = useTranslation()\n    const navigate = useNavigate()\n    const isMobile = useMediaQuery((theme: Theme) =>\n      theme.breakpoints.down(theme.breakpoints.values.xs)\n    )\n    const { setFieldValue } = useFieldActions()\n    const {\n      chainOrder,\n      chains,\n      isLoading,\n      getSelectedChains,\n      setChainOrder,\n      setCurrentChain,\n    } = useChainSelect(formType)\n\n    const [showAllNetworks, isAllNetworks, setIsAllNetworks] =\n      useChainOrderStore((state) => [\n        state[`${formType}ShowAllNetworks`],\n        state[`${formType}IsAllNetworks`],\n        state.setIsAllNetworks,\n      ])\n\n    const [chainId] = useFieldValues(FormKeyHelper.getChainKey(formType))\n\n    useEffect(() => {\n      if (chainId) {\n        const hasChainInOrderedList = chainOrder.includes(chainId)\n        // If we don't have a chain in the ordered chain list we should add it.\n        if (!hasChainInOrderedList) {\n          setChainOrder(chainId, formType)\n        }\n      }\n    }, [chainId, chainOrder, formType, setChainOrder])\n\n    const onChainSelect = useCallback(\n      (selectedChainId: number) => {\n        setIsAllNetworks(false, formType)\n        setCurrentChain(selectedChainId)\n      },\n      [setIsAllNetworks, setCurrentChain, formType]\n    )\n\n    const showAllChains = useCallback(() => {\n      navigate({ to: navigationRoutes[`${formType}Chain`] })\n    }, [navigate, formType])\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), '', {\n        isTouched: true,\n      })\n      setFieldValue(FormKeyHelper.getTokenKey(formType), '', {\n        isTouched: true,\n      })\n    }, [setIsAllNetworks, formType, setFieldValue])\n\n    const chainsToHide =\n      chains?.length === maxChainsToShow\n        ? 0\n        : (chains?.length ?? 0) - maxChainsToOrder\n\n    const chainsToShow = useMemo(\n      () => (chainsToHide > 0 ? getSelectedChains() : chains) ?? [],\n      [chainsToHide, getSelectedChains, chains]\n    )\n\n    const tilesCount =\n      chainsToShow.length +\n      (showAllNetworks ? 1 : 0) +\n      (chainsToHide > 0 ? 1 : 0)\n\n    if (isLoading) {\n      return (\n        <ChainContainer itemCount={tilesCount}>\n          {Array.from({ length: maxGridItemsToShow }).map((_, index) => (\n            <Skeleton\n              key={index}\n              variant=\"rectangular\"\n              width={56}\n              height={isMobile ? 36 : 56}\n              sx={{ borderRadius: 1 }}\n            />\n          ))}\n        </ChainContainer>\n      )\n    }\n\n    return (\n      <ChainContainer itemCount={tilesCount}>\n        {showAllNetworks && (\n          <Tooltip title={t('main.allNetworks')} enterNextDelay={100}>\n            <ChainCard\n              component=\"button\"\n              onClick={selectAllNetworks}\n              type={isAllNetworks ? 'selected' : 'default'}\n              selectionColor=\"secondary\"\n            >\n              <AllChainsAvatar\n                chains={chains ?? []}\n                size={isMobile ? 'small' : 'medium'}\n              />\n            </ChainCard>\n          </Tooltip>\n        )}\n        {chainsToShow.map((chain: EVMChain) => (\n          <ChainItem\n            key={chain.id}\n            chain={chain}\n            isSelected={chainId === chain.id}\n            isAllNetworks={isAllNetworks}\n            onSelect={onChainSelect}\n          />\n        ))}\n        {chainsToHide > 0 && (\n          <ChainCard component=\"button\" onClick={showAllChains}>\n            <MoreChainsBox>\n              <MoreChainsText>+{chainsToHide}</MoreChainsText>\n            </MoreChainsBox>\n          </ChainCard>\n        )}\n      </ChainContainer>\n    )\n  }\n)\n\nconst ChainItem = memo(\n  ({\n    chain,\n    isSelected,\n    isAllNetworks,\n    onSelect,\n  }: {\n    chain: EVMChain\n    isSelected: boolean\n    isAllNetworks: boolean\n    onSelect: (id: number) => void\n  }) => {\n    return (\n      <Tooltip title={chain.name} enterNextDelay={100}>\n        <ChainCard\n          component=\"button\"\n          onClick={() => onSelect(chain.id)}\n          type={!isAllNetworks && isSelected ? 'selected' : 'default'}\n          selectionColor=\"secondary\"\n        >\n          <ChainAvatar src={chain.logoURI} alt={chain.key}>\n            {chain.name[0]}\n          </ChainAvatar>\n        </ChainCard>\n      </Tooltip>\n    )\n  }\n)\n"],"mappings":";;;;;;;;;;;;;;AA2BA,MAAa,cAAyD,MACnE,EAAE,eAA2C;CAC5C,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,WAAW,YAAY;CAC7B,MAAM,WAAW,eAAe,UAC9B,MAAM,YAAY,KAAK,MAAM,YAAY,OAAO,EAAE,CACpD;CACA,MAAM,EAAE,kBAAkB,gBAAgB;CAC1C,MAAM,EACJ,YACA,QACA,WACA,mBACA,eACA,oBACE,eAAe,QAAQ;CAE3B,MAAM,CAAC,iBAAiB,eAAe,oBACrC,oBAAoB,UAAU;EAC5B,MAAM,GAAG,SAAS;EAClB,MAAM,GAAG,SAAS;EAClB,MAAM;CACR,CAAC;CAEH,MAAM,CAAC,WAAW,eAAe,cAAc,YAAY,QAAQ,CAAC;CAEpE,gBAAgB;EACd,IAAI;OAGE,CAF0B,WAAW,SAAS,OAEzB,GACvB,cAAc,SAAS,QAAQ;EAAA;CAGrC,GAAG;EAAC;EAAS;EAAY;EAAU;CAAa,CAAC;CAEjD,MAAM,gBAAgB,aACnB,oBAA4B;EAC3B,iBAAiB,OAAO,QAAQ;EAChC,gBAAgB,eAAe;CACjC,GACA;EAAC;EAAkB;EAAiB;CAAQ,CAC9C;CAEA,MAAM,gBAAgB,kBAAkB;EACtC,SAAS,EAAE,IAAI,iBAAiB,GAAG,SAAS,QAAQ,CAAC;CACvD,GAAG,CAAC,UAAU,QAAQ,CAAC;CAEvB,MAAM,oBAAoB,kBAAkB;EAC1C,iBAAiB,MAAM,QAAQ;EAE/B,cAAc,cAAc,YAAY,QAAQ,GAAG,IAAI,EACrD,WAAW,KACb,CAAC;EACD,cAAc,cAAc,YAAY,QAAQ,GAAG,IAAI,EACrD,WAAW,KACb,CAAC;CACH,GAAG;EAAC;EAAkB;EAAU;CAAa,CAAC;CAE9C,MAAM,eACJ,QAAQ,WAAA,IACJ,KACC,QAAQ,UAAU,KAAA;CAEzB,MAAM,eAAe,eACZ,eAAe,IAAI,kBAAkB,IAAI,WAAW,CAAC,GAC5D;EAAC;EAAc;EAAmB;CAAM,CAC1C;CAEA,MAAM,aACJ,aAAa,UACZ,kBAAkB,IAAI,MACtB,eAAe,IAAI,IAAI;CAE1B,IAAI,WACF,OACE,oBAAC,gBAAD;EAAgB,WAAW;YACxB,MAAM,KAAK,EAAE,QAAA,GAA2B,CAAC,EAAE,KAAK,GAAG,UAClD,oBAAC,UAAD;GAEE,SAAQ;GACR,OAAO;GACP,QAAQ,WAAW,KAAK;GACxB,IAAI,EAAE,cAAc,EAAE;EACvB,GALM,KAKN,CACF;CACa,CAAA;CAIpB,OACE,qBAAC,gBAAD;EAAgB,WAAW;YAA3B;GACG,mBACC,oBAAC,SAAD;IAAS,OAAO,EAAE,kBAAkB;IAAG,gBAAgB;cACrD,oBAAC,WAAD;KACE,WAAU;KACV,SAAS;KACT,MAAM,gBAAgB,aAAa;KACnC,gBAAe;eAEf,oBAAC,iBAAD;MACE,QAAQ,UAAU,CAAC;MACnB,MAAM,WAAW,UAAU;KAC5B,CAAA;IACQ,CAAA;GACJ,CAAA;GAEV,aAAa,KAAK,UACjB,oBAAC,WAAD;IAES;IACP,YAAY,YAAY,MAAM;IACf;IACf,UAAU;GACX,GALM,MAAM,EAKZ,CACF;GACA,eAAe,KACd,oBAAC,WAAD;IAAW,WAAU;IAAS,SAAS;cACrC,oBAAC,eAAD,EAAA,UACE,qBAAC,gBAAD,EAAA,UAAA,CAAgB,KAAE,YAA6B,EAAA,CAAA,EAClC,CAAA;GACN,CAAA;EAEC;;AAEpB,CACF;AAEA,MAAM,YAAY,MACf,EACC,OACA,YACA,eACA,eAMI;CACJ,OACE,oBAAC,SAAD;EAAS,OAAO,MAAM;EAAM,gBAAgB;YAC1C,oBAAC,WAAD;GACE,WAAU;GACV,eAAe,SAAS,MAAM,EAAE;GAChC,MAAM,CAAC,iBAAiB,aAAa,aAAa;GAClD,gBAAe;aAEf,oBAAC,aAAD;IAAa,KAAK,MAAM;IAAS,KAAK,MAAM;cACzC,MAAM,KAAK;GACD,CAAA;EACJ,CAAA;CACJ,CAAA;AAEb,CACF"}

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

@@ -0,0 +1,62 @@
+import { Card as Card$1 } from "../Card/Card.js";
+import { Avatar, Box, Typography } from "@mui/material";
+import { styled as styled$1 } from "@mui/material/styles";
+//#region src/components/ChainSelect/ChainSelect.style.tsx
+const chainCardWidthPx = 52;
+const chainCardHeightPx = 56;
+const chainCardWidthPxMobile = 36;
+const chainCardHeightPxMobile = 36;
+const maxRows = 2;
+const maxChainsPerRow = Math.ceil(9 / maxRows);
+const ChainCard = styled$1(Card$1)(({ theme }) => ({
+	display: "grid",
+	placeItems: "center",
+	minWidth: chainCardWidthPx,
+	height: chainCardHeightPx,
+	[theme.breakpoints.down(theme.breakpoints.values.xs)]: {
+		height: chainCardHeightPxMobile,
+		minWidth: chainCardWidthPxMobile
+	}
+}));
+const ChainAvatar = styled$1(Avatar)(({ theme }) => ({
+	width: 40,
+	height: 40,
+	[theme.breakpoints.down(theme.breakpoints.values.xs)]: {
+		width: 28,
+		height: 28
+	}
+}));
+const MoreChainsBox = styled$1(Box)(({ theme }) => ({
+	width: 40,
+	height: 40,
+	display: "grid",
+	placeItems: "center",
+	[theme.breakpoints.down(theme.breakpoints.values.xs)]: {
+		width: 28,
+		height: 28
+	}
+}));
+const MoreChainsText = styled$1(Typography)(({ theme }) => ({
+	fontWeight: 500,
+	[theme.breakpoints.down("xs")]: { fontSize: ".85rem" }
+}));
+const ChainContainer = styled$1(Box, { shouldForwardProp: (prop) => prop !== "itemCount" })(({ theme, itemCount = 0 }) => {
+	const rowCount = Math.min(Math.ceil(itemCount / maxChainsPerRow), maxRows);
+	const columnsPerRow = Math.ceil(itemCount / rowCount);
+	return {
+		display: "grid",
+		gridTemplateColumns: `repeat(${rowCount > 1 ? columnsPerRow : "auto-fit"}, minmax(${chainCardWidthPx}px, 1fr))`,
+		gridTemplateRows: `repeat(${rowCount}, ${chainCardHeightPx}px)`,
+		justifyContent: "space-between",
+		gap: theme.spacing(1.5),
+		[theme.breakpoints.down(theme.breakpoints.values.xs)]: {
+			gridTemplateColumns: `repeat(${rowCount > 1 ? columnsPerRow : "auto-fit"}, minmax(${chainCardWidthPxMobile}px, 1fr))`,
+			gridTemplateRows: `repeat(${rowCount}, ${chainCardHeightPxMobile}px)`,
+			gap: theme.spacing(1)
+		}
+	};
+});
+//#endregion
+export { ChainAvatar, ChainCard, ChainContainer, MoreChainsBox, MoreChainsText };
+
+//# sourceMappingURL=ChainSelect.style.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChainSelect.style.js","names":["styled","Card"],"sources":["../../../../src/components/ChainSelect/ChainSelect.style.tsx"],"sourcesContent":["import { Avatar, Box, Typography } from '@mui/material'\nimport { styled } from '@mui/material/styles'\nimport type React from 'react'\nimport { Card } from '../../components/Card/Card.js'\nimport { maxChainsToShow } from '../../stores/chains/createChainOrderStore.js'\n\nconst chainCardWidthPx = 52\nconst chainCardHeightPx = 56\n// For mobile screens (xs, under 360px)\nconst chainCardWidthPxMobile = 36\nconst chainCardHeightPxMobile = 36\n\n// Chain grid layout settings:\n// These should remain consistent with `maxChainsToShow` to ensure\n// proper row/column distribution in the grid layout logic.\nconst maxRows = 2\nconst maxChainsPerRow = Math.ceil(maxChainsToShow / maxRows)\n\nexport const ChainCard: React.FC<\n  React.ComponentProps<typeof Card> & { itemCount?: number }\n> = styled(Card)(({ theme }) => ({\n  display: 'grid',\n  placeItems: 'center',\n  minWidth: chainCardWidthPx,\n  height: chainCardHeightPx,\n  [theme.breakpoints.down(theme.breakpoints.values.xs)]: {\n    height: chainCardHeightPxMobile,\n    minWidth: chainCardWidthPxMobile,\n  },\n}))\n\nexport const ChainAvatar: React.FC<\n  React.ComponentProps<typeof Avatar> & { itemCount?: number }\n> = styled(Avatar)(({ theme }) => ({\n  width: 40,\n  height: 40,\n  [theme.breakpoints.down(theme.breakpoints.values.xs)]: {\n    width: 28,\n    height: 28,\n  },\n}))\n\nexport const MoreChainsBox: React.FC<\n  React.ComponentProps<typeof Box> & { itemCount?: number }\n> = styled(Box)(({ theme }) => ({\n  width: 40,\n  height: 40,\n  display: 'grid',\n  placeItems: 'center',\n  [theme.breakpoints.down(theme.breakpoints.values.xs)]: {\n    width: 28,\n    height: 28,\n  },\n}))\n\nexport const MoreChainsText: React.FC<\n  React.ComponentProps<typeof Typography> & { itemCount?: number }\n> = styled(Typography)(({ theme }) => ({\n  fontWeight: 500,\n  [theme.breakpoints.down('xs')]: {\n    fontSize: '.85rem',\n  },\n}))\n\nexport const ChainContainer: React.FC<\n  React.ComponentProps<typeof Box> & { itemCount?: number }\n> = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'itemCount',\n})<{ itemCount?: number }>(({ theme, itemCount = 0 }) => {\n  const rowCount = Math.min(Math.ceil(itemCount / maxChainsPerRow), maxRows)\n  const columnsPerRow = Math.ceil(itemCount / rowCount)\n  return {\n    display: 'grid',\n    gridTemplateColumns: `repeat(${rowCount > 1 ? columnsPerRow : 'auto-fit'}, minmax(${chainCardWidthPx}px, 1fr))`,\n    gridTemplateRows: `repeat(${rowCount}, ${chainCardHeightPx}px)`,\n    justifyContent: 'space-between',\n    gap: theme.spacing(1.5),\n    [theme.breakpoints.down(theme.breakpoints.values.xs)]: {\n      gridTemplateColumns: `repeat(${rowCount > 1 ? columnsPerRow : 'auto-fit'}, minmax(${chainCardWidthPxMobile}px, 1fr))`,\n      gridTemplateRows: `repeat(${rowCount}, ${chainCardHeightPxMobile}px)`,\n      gap: theme.spacing(1),\n    },\n  }\n})\n"],"mappings":";;;;AAMA,MAAM,mBAAmB;AACzB,MAAM,oBAAoB;AAE1B,MAAM,yBAAyB;AAC/B,MAAM,0BAA0B;AAKhC,MAAM,UAAU;AAChB,MAAM,kBAAkB,KAAK,KAAA,IAAuB,OAAO;AAE3D,MAAa,YAETA,SAAOC,MAAI,GAAG,EAAE,aAAa;CAC/B,SAAS;CACT,YAAY;CACZ,UAAU;CACV,QAAQ;EACP,MAAM,YAAY,KAAK,MAAM,YAAY,OAAO,EAAE,IAAI;EACrD,QAAQ;EACR,UAAU;CACZ;AACF,EAAE;AAEF,MAAa,cAETD,SAAO,MAAM,GAAG,EAAE,aAAa;CACjC,OAAO;CACP,QAAQ;EACP,MAAM,YAAY,KAAK,MAAM,YAAY,OAAO,EAAE,IAAI;EACrD,OAAO;EACP,QAAQ;CACV;AACF,EAAE;AAEF,MAAa,gBAETA,SAAO,GAAG,GAAG,EAAE,aAAa;CAC9B,OAAO;CACP,QAAQ;CACR,SAAS;CACT,YAAY;EACX,MAAM,YAAY,KAAK,MAAM,YAAY,OAAO,EAAE,IAAI;EACrD,OAAO;EACP,QAAQ;CACV;AACF,EAAE;AAEF,MAAa,iBAETA,SAAO,UAAU,GAAG,EAAE,aAAa;CACrC,YAAY;EACX,MAAM,YAAY,KAAK,IAAI,IAAI,EAC9B,UAAU,SACZ;AACF,EAAE;AAEF,MAAa,iBAETA,SAAO,KAAK,EACd,oBAAoB,SAAS,SAAS,YACxC,CAAC,GAA2B,EAAE,OAAO,YAAY,QAAQ;CACvD,MAAM,WAAW,KAAK,IAAI,KAAK,KAAK,YAAY,eAAe,GAAG,OAAO;CACzE,MAAM,gBAAgB,KAAK,KAAK,YAAY,QAAQ;CACpD,OAAO;EACL,SAAS;EACT,qBAAqB,UAAU,WAAW,IAAI,gBAAgB,WAAW,WAAW,iBAAiB;EACrG,kBAAkB,UAAU,SAAS,IAAI,kBAAkB;EAC3D,gBAAgB;EAChB,KAAK,MAAM,QAAQ,GAAG;GACrB,MAAM,YAAY,KAAK,MAAM,YAAY,OAAO,EAAE,IAAI;GACrD,qBAAqB,UAAU,WAAW,IAAI,gBAAgB,WAAW,WAAW,uBAAuB;GAC3G,kBAAkB,UAAU,SAAS,IAAI,wBAAwB;GACjE,KAAK,MAAM,QAAQ,CAAC;EACtB;CACF;AACF,CAAC"}

package/dist/esm/components/ChainSelect/useChainSelect.js

@@ -0,0 +1,59 @@
+import { useWidgetConfig } from "../../providers/WidgetProvider/WidgetProvider.js";
+import { useSwapOnly } from "../../hooks/useSwapOnly.js";
+import { useChains } from "../../hooks/useChains.js";
+import { useFieldActions } from "../../stores/form/useFieldActions.js";
+import { useToAddressReset } from "../../hooks/useToAddressReset.js";
+import { useExternalWalletProvider } from "../../providers/WalletProvider/useExternalWalletProvider.js";
+import { useChainOrder } from "../../stores/chains/useChainOrder.js";
+import { FormKeyHelper } from "../../stores/form/types.js";
+import { useCallback } from "react";
+//#region src/components/ChainSelect/useChainSelect.ts
+const useChainSelect = (formType) => {
+	const { disabledUI } = useWidgetConfig();
+	const chainKey = FormKeyHelper.getChainKey(formType);
+	const { setFieldValue, getFieldValues } = useFieldActions();
+	const { useExternalWalletProvidersOnly, externalChainTypes } = useExternalWalletProvider();
+	const { chains, isLoading, getChainById } = useChains(formType, formType === "from" && useExternalWalletProvidersOnly ? externalChainTypes : void 0);
+	const [chainOrder, setChainOrder] = useChainOrder(formType);
+	const swapOnly = useSwapOnly();
+	const { tryResetToAddress } = useToAddressReset();
+	return {
+		chainOrder,
+		chains,
+		getSelectedChains: useCallback(() => {
+			if (!chains) return [];
+			return chainOrder.map((chainId) => chains.find((chain) => chain.id === chainId)).filter(Boolean);
+		}, [chains, chainOrder]),
+		isLoading,
+		setChainOrder,
+		setCurrentChain: useCallback((chainId) => {
+			setFieldValue(chainKey, chainId, {
+				isDirty: true,
+				isTouched: true
+			});
+			if (swapOnly) setFieldValue(FormKeyHelper.getChainKey("to"), chainId, { isTouched: true });
+			const tokenKey = FormKeyHelper.getTokenKey(formType);
+			if (!disabledUI?.[tokenKey]) setFieldValue(tokenKey, "");
+			const amountKey = FormKeyHelper.getAmountKey(formType);
+			if (!disabledUI?.[amountKey]) setFieldValue(amountKey, "");
+			const [toChainId] = getFieldValues("toChain");
+			const toChain = getChainById(toChainId);
+			if (toChain) tryResetToAddress(toChain);
+			setChainOrder(chainId, formType);
+		}, [
+			chainKey,
+			swapOnly,
+			setFieldValue,
+			disabledUI,
+			formType,
+			getChainById,
+			tryResetToAddress,
+			setChainOrder,
+			getFieldValues
+		])
+	};
+};
+//#endregion
+export { useChainSelect };
+
+//# sourceMappingURL=useChainSelect.js.map

package/dist/esm/components/ChainSelect/useChainSelect.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useChainSelect.js","names":[],"sources":["../../../../src/components/ChainSelect/useChainSelect.ts"],"sourcesContent":["import type { EVMChain, ExtendedChain } from '@lifi/sdk'\nimport { useCallback } from 'react'\nimport { useChains } from '../../hooks/useChains.js'\nimport { useSwapOnly } from '../../hooks/useSwapOnly.js'\nimport { useToAddressReset } from '../../hooks/useToAddressReset.js'\nimport { useExternalWalletProvider } from '../../providers/WalletProvider/useExternalWalletProvider.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { useChainOrder } from '../../stores/chains/useChainOrder.js'\nimport type { FormType } from '../../stores/form/types.js'\nimport { FormKeyHelper } from '../../stores/form/types.js'\nimport { useFieldActions } from '../../stores/form/useFieldActions.js'\nimport type { DisabledUIConfig } from '../../types/widget.js'\n\nexport const useChainSelect = (\n  formType: FormType\n): {\n  chainOrder: number[]\n  chains: ExtendedChain[] | undefined\n  getSelectedChains: () => EVMChain[]\n  isLoading: boolean\n  setChainOrder: (chainId: number, type: FormType) => void\n  setCurrentChain: (chainId: number) => void\n} => {\n  const { disabledUI } = useWidgetConfig()\n  const chainKey = FormKeyHelper.getChainKey(formType)\n  const { setFieldValue, getFieldValues } = useFieldActions()\n  const { useExternalWalletProvidersOnly, externalChainTypes } =\n    useExternalWalletProvider()\n  const { chains, isLoading, getChainById } = useChains(\n    formType,\n    // If the integrator uses external wallet management and has not opted in for partial wallet management,\n    // restrict the displayed chains to those compatible with external wallet management.\n    // This ensures users only see chains for which they can sign transactions.\n    formType === 'from' && useExternalWalletProvidersOnly\n      ? externalChainTypes\n      : undefined\n  )\n\n  const [chainOrder, setChainOrder] = useChainOrder(formType)\n  const swapOnly = useSwapOnly()\n  const { tryResetToAddress } = useToAddressReset()\n\n  const getSelectedChains = useCallback((): EVMChain[] => {\n    if (!chains) {\n      return []\n    }\n    const selectedChains = chainOrder\n      .map((chainId) => chains.find((chain) => chain.id === chainId))\n      .filter(Boolean) as EVMChain[]\n    return selectedChains\n  }, [chains, chainOrder])\n\n  const setCurrentChain = useCallback(\n    (chainId: number): void => {\n      setFieldValue(chainKey, chainId, { isDirty: true, isTouched: true })\n      if (swapOnly) {\n        setFieldValue(FormKeyHelper.getChainKey('to'), chainId, {\n          isTouched: true,\n        })\n      }\n      const tokenKey = FormKeyHelper.getTokenKey(formType)\n      if (!disabledUI?.[tokenKey as keyof DisabledUIConfig]) {\n        setFieldValue(tokenKey, '')\n      }\n      const amountKey = FormKeyHelper.getAmountKey(formType)\n      if (!disabledUI?.[amountKey as keyof DisabledUIConfig]) {\n        setFieldValue(amountKey, '')\n      }\n\n      const [toChainId] = getFieldValues('toChain')\n      const toChain = getChainById(toChainId)\n      if (toChain) {\n        tryResetToAddress(toChain)\n      }\n      setChainOrder(chainId, formType)\n    },\n    [\n      chainKey,\n      swapOnly,\n      setFieldValue,\n      disabledUI,\n      formType,\n      getChainById,\n      tryResetToAddress,\n      setChainOrder,\n      getFieldValues,\n    ]\n  )\n\n  return {\n    chainOrder: chainOrder,\n    chains: chains,\n    getSelectedChains: getSelectedChains,\n    isLoading: isLoading,\n    setChainOrder: setChainOrder,\n    setCurrentChain: setCurrentChain,\n  }\n}\n"],"mappings":";;;;;;;;;;AAaA,MAAa,kBACX,aAQG;CACH,MAAM,EAAE,eAAe,gBAAgB;CACvC,MAAM,WAAW,cAAc,YAAY,QAAQ;CACnD,MAAM,EAAE,eAAe,mBAAmB,gBAAgB;CAC1D,MAAM,EAAE,gCAAgC,uBACtC,0BAA0B;CAC5B,MAAM,EAAE,QAAQ,WAAW,iBAAiB,UAC1C,UAIA,aAAa,UAAU,iCACnB,qBACA,KAAA,CACN;CAEA,MAAM,CAAC,YAAY,iBAAiB,cAAc,QAAQ;CAC1D,MAAM,WAAW,YAAY;CAC7B,MAAM,EAAE,sBAAsB,kBAAkB;CAiDhD,OAAO;EACO;EACJ;EACR,mBAlDwB,kBAA8B;GACtD,IAAI,CAAC,QACH,OAAO,CAAC;GAKV,OAHuB,WACpB,KAAK,YAAY,OAAO,MAAM,UAAU,MAAM,OAAO,OAAO,CAAC,EAC7D,OAAO,OACU;EACtB,GAAG,CAAC,QAAQ,UAAU,CA0Ce;EACxB;EACI;EACf,iBA3CsB,aACrB,YAA0B;GACzB,cAAc,UAAU,SAAS;IAAE,SAAS;IAAM,WAAW;GAAK,CAAC;GACnE,IAAI,UACF,cAAc,cAAc,YAAY,IAAI,GAAG,SAAS,EACtD,WAAW,KACb,CAAC;GAEH,MAAM,WAAW,cAAc,YAAY,QAAQ;GACnD,IAAI,CAAC,aAAa,WAChB,cAAc,UAAU,EAAE;GAE5B,MAAM,YAAY,cAAc,aAAa,QAAQ;GACrD,IAAI,CAAC,aAAa,YAChB,cAAc,WAAW,EAAE;GAG7B,MAAM,CAAC,aAAa,eAAe,SAAS;GAC5C,MAAM,UAAU,aAAa,SAAS;GACtC,IAAI,SACF,kBAAkB,OAAO;GAE3B,cAAc,SAAS,QAAQ;EACjC,GACA;GACE;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;EACF,CAS+B;CACjC;AACF"}

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

@@ -0,0 +1,106 @@
+import { ChainId, ChainType } from "@lifi/sdk";
+import { memo, useMemo } from "react";
+import { Avatar, Box } from "@mui/material";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Chains/AllChainsAvatar.tsx
+const chainTypeIcons = [
+	{
+		name: "Ethereum",
+		chainType: ChainType.EVM,
+		icon: "https://lifinance.github.io/types/src/assets/icons/chains/ethereum.svg",
+		defaultChainId: ChainId.ETH
+	},
+	{
+		name: "Solana",
+		chainType: ChainType.SVM,
+		icon: "https://lifinance.github.io/types/src/assets/icons/chains/solana.svg",
+		defaultChainId: ChainId.SOL
+	},
+	{
+		name: "Bitcoin",
+		chainType: ChainType.UTXO,
+		icon: "https://lifinance.github.io/types/src/assets/icons/chains/bitcoin.svg",
+		defaultChainId: ChainId.BTC
+	},
+	{
+		name: "Sui",
+		chainType: ChainType.MVM,
+		icon: "https://lifinance.github.io/types/src/assets/icons/chains/sui.svg",
+		defaultChainId: ChainId.SUI
+	},
+	{
+		name: "Tron",
+		chainType: ChainType.TVM,
+		icon: "https://lifinance.github.io/types/src/assets/icons/chains/tron.svg",
+		defaultChainId: ChainId.TRN
+	}
+];
+const maxChainAvatarsCount = 4;
+const AllChainsAvatar = memo(({ chains, size }) => {
+	const icons = useMemo(() => {
+		const chainsPerChainType = /* @__PURE__ */ new Map();
+		const chainsByChainType = /* @__PURE__ */ new Map();
+		chains.forEach((chain) => {
+			chainsPerChainType.set(chain.chainType, (chainsPerChainType.get(chain.chainType) || 0) + 1);
+			const chainsOfType = chainsByChainType.get(chain.chainType) || [];
+			chainsOfType.push(chain);
+			chainsByChainType.set(chain.chainType, chainsOfType);
+		});
+		const existingChainTypeIcons = chainTypeIcons.filter((predefinedChain) => {
+			const numberOfChains = chainsPerChainType.get(predefinedChain.chainType) ?? 0;
+			if (numberOfChains === 1) {
+				const singleChain = chainsByChainType.get(predefinedChain.chainType)?.[0];
+				if (singleChain && singleChain.id !== predefinedChain.defaultChainId) return false;
+			}
+			return numberOfChains > 0;
+		});
+		if (existingChainTypeIcons.length === maxChainAvatarsCount) return existingChainTypeIcons;
+		const remainingSlots = maxChainAvatarsCount - existingChainTypeIcons.length;
+		const predefinedIconNames = new Set(existingChainTypeIcons.map((icon) => icon.name));
+		const additionalIcons = chains.filter((chain) => {
+			return !predefinedIconNames.has(chain.name) && Boolean(chain.logoURI);
+		}).slice(0, remainingSlots).map((chain) => ({
+			name: chain.name,
+			chainType: chain.chainType,
+			icon: chain.logoURI
+		}));
+		return [...existingChainTypeIcons, ...additionalIcons];
+	}, [chains]);
+	const wrapperSize = size === "small" ? "32px" : "40px";
+	const avatarSize = size === "small" ? "12px" : "16px";
+	const avatarsCount = Math.min(icons.length, maxChainAvatarsCount);
+	const gridRows = avatarsCount > 2 ? 2 : 1;
+	const gridColumns = avatarsCount > 1 ? 2 : 1;
+	return /* @__PURE__ */ jsx(Box, {
+		sx: {
+			width: wrapperSize,
+			height: wrapperSize,
+			display: "grid",
+			gridTemplateRows: `repeat(${gridRows}, 1fr)`,
+			gridTemplateColumns: `repeat(${gridColumns}, 1fr)`,
+			placeItems: "center"
+		},
+		children: icons.slice(0, avatarsCount).map((chain, idx) => {
+			const isThirdAvatarInThreeAvatarLayout = avatarsCount === 3 && idx === 2;
+			return /* @__PURE__ */ jsx(Avatar, {
+				src: chain.icon,
+				alt: chain.name,
+				sx: {
+					width: avatarSize,
+					height: avatarSize,
+					margin: "auto",
+					...isThirdAvatarInThreeAvatarLayout && {
+						gridColumn: "1 / span 2",
+						gridRow: "2",
+						justifySelf: "center"
+					}
+				},
+				children: chain.chainType[0]
+			}, `${chain.chainType}-${idx}`);
+		})
+	});
+});
+//#endregion
+export { AllChainsAvatar };
+
+//# sourceMappingURL=AllChainsAvatar.js.map

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

@@ -0,0 +1 @@
+{"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,IAAI;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,EACnC,MAAM,GAAG,cAAc,EACvB,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,EAAE,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

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

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

@@ -0,0 +1,43 @@
+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
+}));
+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%"
+	};
+});
+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"
+}));
+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

@@ -0,0 +1 @@
+{"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,GAEhB,EAAE,OAAO,gBAAgB;CAC3B,OAAO,SAAS,UAAU,KAAK;CAC/B,QAAQ,SAAS,UAAU,KAAK;AAClC,EAAE;AAEF,MAAaC,mBAKT,OAAOC,cAAiB,GAExB,EAAE,OAAO,gBAAgB,EAC3B,UAAU,SAAS,UAAU,KAAK,GACpC,EAAE;AAEF,MAAaC,iBAKT,OAAOC,YAAe,GAEtB,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,GAEzB,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,GAAG,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,GAAG,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

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

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

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

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