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

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

@@ -1 +1 @@
-{"version":3,"file":"ChainSelect.js","sourceRoot":"","sources":["../../../../src/components/ChainSelect/ChainSelect.tsx"],"names":[],"mappings":"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"}
+{"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":"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"}

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

@@ -1,67 +1,62 @@
-import { Avatar, Box, Typography } from '@mui/material';
-import { styled } from '@mui/material/styles';
-import { Card } from '../../components/Card/Card.js';
-import { maxChainsToShow } from '../../stores/chains/createChainOrderStore.js';
+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;
-// For mobile screens (xs, under 360px)
 const chainCardWidthPxMobile = 36;
 const chainCardHeightPxMobile = 36;
-// Chain grid layout settings:
-// These should remain consistent with `maxChainsToShow` to ensure
-// proper row/column distribution in the grid layout logic.
 const maxRows = 2;
-const maxChainsPerRow = Math.ceil(maxChainsToShow / maxRows);
-export const ChainCard = styled(Card)(({ theme }) => ({
-    display: 'grid',
-    placeItems: 'center',
-    minWidth: chainCardWidthPx,
-    height: chainCardHeightPx,
-    [theme.breakpoints.down(theme.breakpoints.values.xs)]: {
-        height: chainCardHeightPxMobile,
-        minWidth: chainCardWidthPxMobile,
-    },
+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
+	}
 }));
-export const ChainAvatar = styled(Avatar)(({ theme }) => ({
-    width: 40,
-    height: 40,
-    [theme.breakpoints.down(theme.breakpoints.values.xs)]: {
-        width: 28,
-        height: 28,
-    },
+const ChainAvatar = styled$1(Avatar)(({ theme }) => ({
+	width: 40,
+	height: 40,
+	[theme.breakpoints.down(theme.breakpoints.values.xs)]: {
+		width: 28,
+		height: 28
+	}
 }));
-export const MoreChainsBox = styled(Box)(({ theme }) => ({
-    width: 40,
-    height: 40,
-    display: 'grid',
-    placeItems: 'center',
-    [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
+	}
 }));
-export const MoreChainsText = styled(Typography)(({ theme }) => ({
-    fontWeight: 500,
-    [theme.breakpoints.down('xs')]: {
-        fontSize: '.85rem',
-    },
+const MoreChainsText = styled$1(Typography)(({ theme }) => ({
+	fontWeight: 500,
+	[theme.breakpoints.down("xs")]: { fontSize: ".85rem" }
 }));
-export const ChainContainer = styled(Box, {
-    shouldForwardProp: (prop) => prop !== 'itemCount',
-})(({ theme, itemCount }) => {
-    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),
-        },
-    };
+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

@@ -1 +1 @@
-{"version":3,"file":"ChainSelect.style.js","sourceRoot":"","sources":["../../../../src/components/ChainSelect/ChainSelect.style.tsx"],"names":[],"mappings":"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"}
+{"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,QAAQ;AAE5D,MAAa,YAETA,SAAOC,OAAK,EAAE,EAAE,aAAa;CAC/B,SAAS;CACT,YAAY;CACZ,UAAU;CACV,QAAQ;EACP,MAAM,YAAY,KAAK,MAAM,YAAY,OAAO,GAAG,GAAG;EACrD,QAAQ;EACR,UAAU;EACX;CACF,EAAE;AAEH,MAAa,cAETD,SAAO,OAAO,EAAE,EAAE,aAAa;CACjC,OAAO;CACP,QAAQ;EACP,MAAM,YAAY,KAAK,MAAM,YAAY,OAAO,GAAG,GAAG;EACrD,OAAO;EACP,QAAQ;EACT;CACF,EAAE;AAEH,MAAa,gBAETA,SAAO,IAAI,EAAE,EAAE,aAAa;CAC9B,OAAO;CACP,QAAQ;CACR,SAAS;CACT,YAAY;EACX,MAAM,YAAY,KAAK,MAAM,YAAY,OAAO,GAAG,GAAG;EACrD,OAAO;EACP,QAAQ;EACT;CACF,EAAE;AAEH,MAAa,iBAETA,SAAO,WAAW,EAAE,EAAE,aAAa;CACrC,YAAY;EACX,MAAM,YAAY,KAAK,KAAK,GAAG,EAC9B,UAAU,UACX;CACF,EAAE;AAEH,MAAa,iBAETA,SAAO,KAAK,EACd,oBAAoB,SAAS,SAAS,aACvC,CAAC,EAA0B,EAAE,OAAO,YAAY,QAAQ;CACvD,MAAM,WAAW,KAAK,IAAI,KAAK,KAAK,YAAY,gBAAgB,EAAE,QAAQ;CAC1E,MAAM,gBAAgB,KAAK,KAAK,YAAY,SAAS;AACrD,QAAO;EACL,SAAS;EACT,qBAAqB,UAAU,WAAW,IAAI,gBAAgB,WAAW,WAAW,iBAAiB;EACrG,kBAAkB,UAAU,SAAS,IAAI,kBAAkB;EAC3D,gBAAgB;EAChB,KAAK,MAAM,QAAQ,IAAI;GACtB,MAAM,YAAY,KAAK,MAAM,YAAY,OAAO,GAAG,GAAG;GACrD,qBAAqB,UAAU,WAAW,IAAI,gBAAgB,WAAW,WAAW,uBAAuB;GAC3G,kBAAkB,UAAU,SAAS,IAAI,wBAAwB;GACjE,KAAK,MAAM,QAAQ,EAAE;GACtB;EACF;EACD"}

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

@@ -1,75 +1,59 @@
-import { useCallback } from 'react';
-import { useChains } from '../../hooks/useChains.js';
-import { useSwapOnly } from '../../hooks/useSwapOnly.js';
-import { useToAddressReset } from '../../hooks/useToAddressReset.js';
-import { useExternalWalletProvider } from '../../providers/WalletProvider/useExternalWalletProvider.js';
-import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
-import { useChainOrder } from '../../stores/chains/useChainOrder.js';
-import { FormKeyHelper } from '../../stores/form/types.js';
-import { useFieldActions } from '../../stores/form/useFieldActions.js';
-export 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, 
-    // If the integrator uses external wallet management and has not opted in for partial wallet management,
-    // restrict the displayed chains to those compatible with external wallet management.
-    // This ensures users only see chains for which they can sign transactions.
-    formType === 'from' && useExternalWalletProvidersOnly
-        ? externalChainTypes
-        : undefined);
-    const [chainOrder, setChainOrder] = useChainOrder(formType);
-    const swapOnly = useSwapOnly();
-    const { tryResetToAddress } = useToAddressReset();
-    const getSelectedChains = useCallback(() => {
-        if (!chains) {
-            return [];
-        }
-        const selectedChains = chainOrder
-            .map((chainId) => chains.find((chain) => chain.id === chainId))
-            .filter(Boolean);
-        return selectedChains;
-    }, [chains, chainOrder]);
-    const 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?.includes(tokenKey)) {
-            setFieldValue(tokenKey, '');
-        }
-        const amountKey = FormKeyHelper.getAmountKey(formType);
-        if (!disabledUI?.includes(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,
-    ]);
-    return {
-        chainOrder,
-        chains,
-        getSelectedChains,
-        isLoading,
-        setChainOrder,
-        setCurrentChain,
-    };
+import { useWidgetConfig } from "../../providers/WidgetProvider/WidgetProvider.js";
+import { useSwapOnly } from "../../hooks/useSwapOnly.js";
+import { FormKeyHelper } from "../../stores/form/types.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 { 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?.includes(tokenKey)) setFieldValue(tokenKey, "");
+			const amountKey = FormKeyHelper.getAmountKey(formType);
+			if (!disabledUI?.includes(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

@@ -1 +1 @@
-{"version":3,"file":"useChainSelect.js","sourceRoot":"","sources":["../../../../src/components/ChainSelect/useChainSelect.ts"],"names":[],"mappings":"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"}
+{"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 { DisabledUI } 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?.includes(tokenKey as DisabledUI)) {\n        setFieldValue(tokenKey, '')\n      }\n      const amountKey = FormKeyHelper.getAmountKey(formType)\n      if (!disabledUI?.includes(amountKey as DisabledUI)) {\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,iBAAiB;CACxC,MAAM,WAAW,cAAc,YAAY,SAAS;CACpD,MAAM,EAAE,eAAe,mBAAmB,iBAAiB;CAC3D,MAAM,EAAE,gCAAgC,uBACtC,2BAA2B;CAC7B,MAAM,EAAE,QAAQ,WAAW,iBAAiB,UAC1C,UAIA,aAAa,UAAU,iCACnB,qBACA,KAAA,EACL;CAED,MAAM,CAAC,YAAY,iBAAiB,cAAc,SAAS;CAC3D,MAAM,WAAW,aAAa;CAC9B,MAAM,EAAE,sBAAsB,mBAAmB;AAiDjD,QAAO;EACO;EACJ;EACR,mBAlDwB,kBAA8B;AACtD,OAAI,CAAC,OACH,QAAO,EAAE;AAKX,UAHuB,WACpB,KAAK,YAAY,OAAO,MAAM,UAAU,MAAM,OAAO,QAAQ,CAAC,CAC9D,OAAO,QAAQ;KAEjB,CAAC,QAAQ,WAAW,CAAC;EA2CX;EACI;EACf,iBA3CsB,aACrB,YAA0B;AACzB,iBAAc,UAAU,SAAS;IAAE,SAAS;IAAM,WAAW;IAAM,CAAC;AACpE,OAAI,SACF,eAAc,cAAc,YAAY,KAAK,EAAE,SAAS,EACtD,WAAW,MACZ,CAAC;GAEJ,MAAM,WAAW,cAAc,YAAY,SAAS;AACpD,OAAI,CAAC,YAAY,SAAS,SAAuB,CAC/C,eAAc,UAAU,GAAG;GAE7B,MAAM,YAAY,cAAc,aAAa,SAAS;AACtD,OAAI,CAAC,YAAY,SAAS,UAAwB,CAChD,eAAc,WAAW,GAAG;GAG9B,MAAM,CAAC,aAAa,eAAe,UAAU;GAC7C,MAAM,UAAU,aAAa,UAAU;AACvC,OAAI,QACF,mBAAkB,QAAQ;AAE5B,iBAAc,SAAS,SAAS;KAElC;GACE;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD,CACF;EASA"}

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

@@ -1,103 +1,100 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { ChainId, ChainType, } from '@lifi/sdk';
-import { Avatar, Box } from '@mui/material';
-import { memo, useMemo } from 'react';
+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: "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
+	}
 ];
 const maxChainAvatarsCount = chainTypeIcons.length;
-export const AllChainsAvatar = memo(({ chains, size }) => {
-    const icons = useMemo(() => {
-        // Create maps for efficient lookups
-        const chainsPerChainType = new Map();
-        const chainsByChainType = 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);
-        });
-        // Get existing ecosystem icons
-        const existingChainTypeIcons = chainTypeIcons.filter((predefinedChain) => {
-            const numberOfChains = chainsPerChainType.get(predefinedChain.chainType) ?? 0;
-            // If there's only one chain of this type, check if it's not the default
-            if (numberOfChains === 1) {
-                const chainsOfType = chainsByChainType.get(predefinedChain.chainType);
-                const singleChain = chainsOfType?.[0];
-                // Exclude the predefined icon if the single chain is not the default
-                if (singleChain &&
-                    singleChain.id !== predefinedChain.defaultChainId) {
-                    return false;
-                }
-            }
-            return numberOfChains > 0;
-        });
-        if (existingChainTypeIcons.length === maxChainAvatarsCount) {
-            return existingChainTypeIcons;
-        }
-        const remainingSlots = maxChainAvatarsCount - existingChainTypeIcons.length;
-        // Create a Set for O(1) lookup of predefined icon names
-        const predefinedIconNames = new Set(existingChainTypeIcons.map((icon) => icon.name));
-        const chainsWithLogos = chains.filter((chain) => {
-            // Filter out chain icons matching ecosystem icons
-            return !predefinedIconNames.has(chain.name) && Boolean(chain.logoURI);
-        });
-        const additionalIcons = chainsWithLogos
-            .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 (_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 (_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}`));
-        }) }));
+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

@@ -1 +1 @@
-{"version":3,"file":"AllChainsAvatar.js","sourceRoot":"","sources":["../../../../src/components/Chains/AllChainsAvatar.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,OAAO,EACP,SAAS,GAGV,MAAM,WAAW,CAAA;AAClB,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,eAAe,CAAA;AAC3C,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AAOrC,MAAM,cAAc,GAAG;IACrB;QACE,IAAI,EAAE,UAAU;QAChB,SAAS,EAAE,SAAS,CAAC,GAAG;QACxB,IAAI,EAAE,wEAAwE;QAC9E,cAAc,EAAE,OAAO,CAAC,GAAG;KAC5B;IACD;QACE,IAAI,EAAE,QAAQ;QACd,SAAS,EAAE,SAAS,CAAC,GAAG;QACxB,IAAI,EAAE,sEAAsE;QAC5E,cAAc,EAAE,OAAO,CAAC,GAAG;KAC5B;IACD;QACE,IAAI,EAAE,SAAS;QACf,SAAS,EAAE,SAAS,CAAC,IAAI;QACzB,IAAI,EAAE,uEAAuE;QAC7E,cAAc,EAAE,OAAO,CAAC,GAAG;KAC5B;IACD;QACE,IAAI,EAAE,KAAK;QACX,SAAS,EAAE,SAAS,CAAC,GAAG;QACxB,IAAI,EAAE,mEAAmE;QACzE,cAAc,EAAE,OAAO,CAAC,GAAG;KAC5B;CACF,CAAA;AAED,MAAM,oBAAoB,GAAG,cAAc,CAAC,MAAM,CAAA;AAElD,MAAM,CAAC,MAAM,eAAe,GAAG,IAAI,CACjC,CAAC,EAAE,MAAM,EAAE,IAAI,EAAwB,EAAE,EAAE;IACzC,MAAM,KAAK,GAAG,OAAO,CAAC,GAAG,EAAE;QACzB,oCAAoC;QACpC,MAAM,kBAAkB,GAAG,IAAI,GAAG,EAAqB,CAAA;QACvD,MAAM,iBAAiB,GAAG,IAAI,GAAG,EAG9B,CAAA;QAEH,MAAM,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE;YACvB,kBAAkB,CAAC,GAAG,CACpB,KAAK,CAAC,SAAS,EACf,CAAC,kBAAkB,CAAC,GAAG,CAAC,KAAK,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,GAAG,CAAC,CACnD,CAAA;YACD,MAAM,YAAY,GAAG,iBAAiB,CAAC,GAAG,CAAC,KAAK,CAAC,SAAS,CAAC,IAAI,EAAE,CAAA;YACjE,YAAY,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;YACxB,iBAAiB,CAAC,GAAG,CAAC,KAAK,CAAC,SAAS,EAAE,YAAY,CAAC,CAAA;QACtD,CAAC,CAAC,CAAA;QAEF,+BAA+B;QAC/B,MAAM,sBAAsB,GAAG,cAAc,CAAC,MAAM,CAClD,CAAC,eAAe,EAAE,EAAE;YAClB,MAAM,cAAc,GAClB,kBAAkB,CAAC,GAAG,CAAC,eAAe,CAAC,SAAS,CAAC,IAAI,CAAC,CAAA;YAExD,wEAAwE;YACxE,IAAI,cAAc,KAAK,CAAC,EAAE,CAAC;gBACzB,MAAM,YAAY,GAAG,iBAAiB,CAAC,GAAG,CACxC,eAAe,CAAC,SAAS,CAC1B,CAAA;gBACD,MAAM,WAAW,GAAG,YAAY,EAAE,CAAC,CAAC,CAAC,CAAA;gBACrC,qEAAqE;gBACrE,IACE,WAAW;oBACX,WAAW,CAAC,EAAE,KAAK,eAAe,CAAC,cAAc,EACjD,CAAC;oBACD,OAAO,KAAK,CAAA;gBACd,CAAC;YACH,CAAC;YAED,OAAO,cAAc,GAAG,CAAC,CAAA;QAC3B,CAAC,CACF,CAAA;QAED,IAAI,sBAAsB,CAAC,MAAM,KAAK,oBAAoB,EAAE,CAAC;YAC3D,OAAO,sBAAsB,CAAA;QAC/B,CAAC;QAED,MAAM,cAAc,GAClB,oBAAoB,GAAG,sBAAsB,CAAC,MAAM,CAAA;QAEtD,wDAAwD;QACxD,MAAM,mBAAmB,GAAG,IAAI,GAAG,CACjC,sBAAsB,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,CAChD,CAAA;QAED,MAAM,eAAe,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,KAAK,EAAE,EAAE;YAC9C,kDAAkD;YAClD,OAAO,CAAC,mBAAmB,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC,CAAA;QACvE,CAAC,CAAC,CAAA;QAEF,MAAM,eAAe,GAAG,eAAe;aACpC,KAAK,CAAC,CAAC,EAAE,cAAc,CAAC;aACxB,GAAG,CAAC,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC;YACf,IAAI,EAAE,KAAK,CAAC,IAAI;YAChB,SAAS,EAAE,KAAK,CAAC,SAAS;YAC1B,IAAI,EAAE,KAAK,CAAC,OAAQ;SACrB,CAAC,CAAC,CAAA;QAEL,OAAO,CAAC,GAAG,sBAAsB,EAAE,GAAG,eAAe,CAAC,CAAA;IACxD,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAA;IAEZ,MAAM,WAAW,GAAG,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAA;IACtD,MAAM,UAAU,GAAG,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAA;IACrD,MAAM,YAAY,GAAG,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,MAAM,EAAE,oBAAoB,CAAC,CAAA;IACjE,MAAM,QAAQ,GAAG,YAAY,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;IACzC,MAAM,WAAW,GAAG,YAAY,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;IAE5C,OAAO,CACL,KAAC,GAAG,IACF,EAAE,EAAE;YACF,KAAK,EAAE,WAAW;YAClB,MAAM,EAAE,WAAW;YACnB,OAAO,EAAE,MAAM;YACf,gBAAgB,EAAE,UAAU,QAAQ,QAAQ;YAC5C,mBAAmB,EAAE,UAAU,WAAW,QAAQ;YAClD,UAAU,EAAE,QAAQ;SACrB,YAEA,KAAK,CAAC,KAAK,CAAC,CAAC,EAAE,YAAY,CAAC,CAAC,GAAG,CAAC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE;YAC/C,MAAM,gCAAgC,GACpC,YAAY,KAAK,CAAC,IAAI,GAAG,KAAK,CAAC,CAAA;YAEjC,OAAO,CACL,KAAC,MAAM,IAEL,GAAG,EAAE,KAAK,CAAC,IAAI,EACf,GAAG,EAAE,KAAK,CAAC,IAAI,EACf,EAAE,EAAE;oBACF,KAAK,EAAE,UAAU;oBACjB,MAAM,EAAE,UAAU;oBAClB,MAAM,EAAE,MAAM;oBACd,GAAG,CAAC,gCAAgC,IAAI;wBACtC,UAAU,EAAE,YAAY;wBACxB,OAAO,EAAE,GAAG;wBACZ,WAAW,EAAE,QAAQ;qBACtB,CAAC;iBACH,YAEA,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,IAdd,GAAG,KAAK,CAAC,SAAS,IAAI,GAAG,EAAE,CAezB,CACV,CAAA;QACH,CAAC,CAAC,GACE,CACP,CAAA;AACH,CAAC,CACF,CAAA"}
+{"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\nconst maxChainAvatarsCount = chainTypeIcons.length\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;EACzB;CACD;EACE,MAAM;EACN,WAAW,UAAU;EACrB,MAAM;EACN,gBAAgB,QAAQ;EACzB;CACD;EACE,MAAM;EACN,WAAW,UAAU;EACrB,MAAM;EACN,gBAAgB,QAAQ;EACzB;CACD;EACE,MAAM;EACN,WAAW,UAAU;EACrB,MAAM;EACN,gBAAgB,QAAQ;EACzB;CACF;AAED,MAAM,uBAAuB,eAAe;AAE5C,MAAa,kBACX,MAAM,EAAE,QAAQ,WAA8C;CAC5D,MAAM,QAAQ,cAAc;EAE1B,MAAM,qCAAqB,IAAI,KAAwB;EACvD,MAAM,oCAAoB,IAAI,KAG3B;AAEH,SAAO,SAAS,UAAU;AACxB,sBAAmB,IACjB,MAAM,YACL,mBAAmB,IAAI,MAAM,UAAU,IAAI,KAAK,EAClD;GACD,MAAM,eAAe,kBAAkB,IAAI,MAAM,UAAU,IAAI,EAAE;AACjE,gBAAa,KAAK,MAAM;AACxB,qBAAkB,IAAI,MAAM,WAAW,aAAa;IACpD;EAGF,MAAM,yBAAyB,eAAe,QAC3C,oBAAoB;GACnB,MAAM,iBACJ,mBAAmB,IAAI,gBAAgB,UAAU,IAAI;AAGvD,OAAI,mBAAmB,GAAG;IAIxB,MAAM,cAHe,kBAAkB,IACrC,gBAAgB,UACjB,GACkC;AAEnC,QACE,eACA,YAAY,OAAO,gBAAgB,eAEnC,QAAO;;AAIX,UAAO,iBAAiB;IAE3B;AAED,MAAI,uBAAuB,WAAW,qBACpC,QAAO;EAGT,MAAM,iBACJ,uBAAuB,uBAAuB;EAGhD,MAAM,sBAAsB,IAAI,IAC9B,uBAAuB,KAAK,SAAS,KAAK,KAAK,CAChD;EAOD,MAAM,kBALkB,OAAO,QAAQ,UAAU;AAE/C,UAAO,CAAC,oBAAoB,IAAI,MAAM,KAAK,IAAI,QAAQ,MAAM,QAAQ;IACrE,CAGC,MAAM,GAAG,eAAe,CACxB,KAAK,WAAW;GACf,MAAM,MAAM;GACZ,WAAW,MAAM;GACjB,MAAM,MAAM;GACb,EAAE;AAEL,SAAO,CAAC,GAAG,wBAAwB,GAAG,gBAAgB;IACrD,CAAC,OAAO,CAAC;CAEZ,MAAM,cAAc,SAAS,UAAU,SAAS;CAChD,MAAM,aAAa,SAAS,UAAU,SAAS;CAC/C,MAAM,eAAe,KAAK,IAAI,MAAM,QAAQ,qBAAqB;CACjE,MAAM,WAAW,eAAe,IAAI,IAAI;CACxC,MAAM,cAAc,eAAe,IAAI,IAAI;AAE3C,QACE,oBAAC,KAAD;EACE,IAAI;GACF,OAAO;GACP,QAAQ;GACR,SAAS;GACT,kBAAkB,UAAU,SAAS;GACrC,qBAAqB,UAAU,YAAY;GAC3C,YAAY;GACb;YAEA,MAAM,MAAM,GAAG,aAAa,CAAC,KAAK,OAAO,QAAQ;GAChD,MAAM,mCACJ,iBAAiB,KAAK,QAAQ;AAEhC,UACE,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;MACd;KACF;cAEA,MAAM,UAAU;IACV,EAfF,GAAG,MAAM,UAAU,GAAG,MAepB;IAEX;EACE,CAAA;EAER"}