@lifi/widget 4.0.0-beta.9 → 4.1.0

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":"AAAA,OAAO,EAAE,MAAM,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AACvD,OAAO,EAAE,MAAM,EAAE,MAAM,sBAAsB,CAAA;AAC7C,OAAO,EAAE,IAAI,EAAE,MAAM,+BAA+B,CAAA;AACpD,OAAO,EAAE,eAAe,EAAE,MAAM,8CAA8C,CAAA;AAE9E,MAAM,gBAAgB,GAAG,EAAE,CAAA;AAC3B,MAAM,iBAAiB,GAAG,EAAE,CAAA;AAC5B,uCAAuC;AACvC,MAAM,sBAAsB,GAAG,EAAE,CAAA;AACjC,MAAM,uBAAuB,GAAG,EAAE,CAAA;AAElC,8BAA8B;AAC9B,kEAAkE;AAClE,2DAA2D;AAC3D,MAAM,OAAO,GAAG,CAAC,CAAA;AACjB,MAAM,eAAe,GAAG,IAAI,CAAC,IAAI,CAAC,eAAe,GAAG,OAAO,CAAC,CAAA;AAE5D,MAAM,CAAC,MAAM,SAAS,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;IACpD,OAAO,EAAE,MAAM;IACf,UAAU,EAAE,QAAQ;IACpB,QAAQ,EAAE,gBAAgB;IAC1B,MAAM,EAAE,iBAAiB;IACzB,CAAC,KAAK,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE;QACrD,MAAM,EAAE,uBAAuB;QAC/B,QAAQ,EAAE,sBAAsB;KACjC;CACF,CAAC,CAAC,CAAA;AAEH,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;IACxD,KAAK,EAAE,EAAE;IACT,MAAM,EAAE,EAAE;IACV,CAAC,KAAK,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE;QACrD,KAAK,EAAE,EAAE;QACT,MAAM,EAAE,EAAE;KACX;CACF,CAAC,CAAC,CAAA;AAEH,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;IACvD,KAAK,EAAE,EAAE;IACT,MAAM,EAAE,EAAE;IACV,OAAO,EAAE,MAAM;IACf,UAAU,EAAE,QAAQ;IACpB,CAAC,KAAK,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE;QACrD,KAAK,EAAE,EAAE;QACT,MAAM,EAAE,EAAE;KACX;CACF,CAAC,CAAC,CAAA;AAEH,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,CAAC;IAC/D,UAAU,EAAE,GAAG;IACf,CAAC,KAAK,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,EAAE;QAC9B,QAAQ,EAAE,QAAQ;KACnB;CACF,CAAC,CAAC,CAAA;AAEH,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,EAAE;IACxC,iBAAiB,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,KAAK,WAAW;CAClD,CAAC,CAAwB,CAAC,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,EAAE;IACjD,MAAM,QAAQ,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,GAAG,eAAe,CAAC,EAAE,OAAO,CAAC,CAAA;IAC1E,MAAM,aAAa,GAAG,IAAI,CAAC,IAAI,CAAC,SAAS,GAAG,QAAQ,CAAC,CAAA;IACrD,OAAO;QACL,OAAO,EAAE,MAAM;QACf,mBAAmB,EAAE,UAAU,QAAQ,GAAG,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,UAAU,YAAY,gBAAgB,WAAW;QAC/G,gBAAgB,EAAE,UAAU,QAAQ,KAAK,iBAAiB,KAAK;QAC/D,cAAc,EAAE,eAAe;QAC/B,GAAG,EAAE,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC;QACvB,CAAC,KAAK,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE;YACrD,mBAAmB,EAAE,UAAU,QAAQ,GAAG,CAAC,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,UAAU,YAAY,sBAAsB,WAAW;YACrH,gBAAgB,EAAE,UAAU,QAAQ,KAAK,uBAAuB,KAAK;YACrE,GAAG,EAAE,KAAK,CAAC,OAAO,CAAC,CAAC,CAAC;SACtB;KACF,CAAA;AACH,CAAC,CAAC,CAAA"}
+{"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,CAAC,EAAE,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,CAAC,EAAE,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,CAAC,EAAE,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,CAAC,EAAE,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,CAAC,EAA0B,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

@@ -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 { 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

@@ -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 { 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,CAAC,CAC9D,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

@@ -1,103 +1,106 @@
-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
+	},
+	{
+		name: "Tron",
+		chainType: ChainType.TVM,
+		icon: "https://lifinance.github.io/types/src/assets/icons/chains/tron.svg",
+		defaultChainId: ChainId.TRN
+	}
 ];
-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 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