@lifi/widget 4.0.0-beta.9 → 4.1.0

package/dist/esm/components/TokenList/VirtualizedTokenList.js

@@ -1,142 +1,123 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { Typography } from '@mui/material';
-import { useVirtualizer } from '@tanstack/react-virtual';
-import { useCallback, useEffect, useMemo, useRef } from 'react';
-import { useTranslation } from 'react-i18next';
-import { useAvailableChains } from '../../hooks/useAvailableChains.js';
-import { TokenDetailsSheet } from './TokenDetailsSheet.js';
-import { List } from './TokenList.style.js';
-import { TokenListItem, TokenListItemSkeleton } from './TokenListItem.js';
-const tokenItemHeight = 64; // 60 + 4px margin-bottom
-export const VirtualizedTokenList = ({ tokens, scrollElementRef, chainId, selectedTokenAddress, isLoading, isBalanceLoading, showCategories, showPinnedTokens, onClick, isAllNetworks, }) => {
-    const { t } = useTranslation();
-    const { chains } = useAvailableChains();
-    // Create Set for O(1) chain lookup instead of O(n) find
-    const chainsSet = useMemo(() => {
-        if (!chains) {
-            return undefined;
-        }
-        return new Map(chains.map((chain) => [chain.id, chain]));
-    }, [chains]);
-    const tokenDetailsSheetRef = useRef(null);
-    const onShowTokenDetails = useCallback((tokenAddress, noContractAddress, chainId) => {
-        tokenDetailsSheetRef.current?.open(tokenAddress, noContractAddress, chainId);
-    }, []);
-    const getItemKey = useCallback((index) => {
-        const token = tokens[index];
-        return `${token.chainId}-${token.address}-${index}`;
-    }, [tokens]);
-    const estimateSize = useCallback((index) => {
-        const currentToken = tokens[index];
-        const previousToken = tokens[index - 1];
-        let size = tokenItemHeight;
-        // Pinned tokens (always shown, even in all networks mode)
-        if (currentToken.pinned && index === 0) {
-            size += 24;
-        }
-        if (previousToken?.pinned && !currentToken.pinned) {
-            size += 32;
-        }
-        if (!showCategories) {
-            return size;
-        }
-        if (currentToken.featured && !currentToken.pinned && index === 0) {
-            size += 24;
-        }
-        // Category transition (excluding pinned tokens)
-        const isNotPinned = !currentToken.pinned && !previousToken?.pinned;
-        if (isNotPinned &&
-            ((previousToken?.amount && !currentToken.amount) ||
-                (previousToken?.featured && !currentToken.featured) ||
-                (previousToken?.popular && !currentToken.popular))) {
-            size += 32;
-        }
-        return size;
-    }, [tokens, showCategories]);
-    const virtualizerConfig = useMemo(() => ({
-        count: tokens.length,
-        overscan: 5,
-        getScrollElement: () => scrollElementRef.current,
-        estimateSize,
-        getItemKey,
-    }), [tokens.length, estimateSize, getItemKey, scrollElementRef]);
-    const { getVirtualItems, getTotalSize, scrollToIndex, measure } = useVirtualizer(virtualizerConfig);
-    // Address the issue of disappearing tokens on rerender
-    useEffect(() => {
-        if (scrollElementRef.current) {
-            measure();
-        }
-    }, [measure, scrollElementRef.current]);
-    // biome-ignore lint/correctness/useExhaustiveDependencies: run only when chainId changes
-    useEffect(() => {
-        // Scroll to the top of the list when switching the chains
-        if (getVirtualItems().length) {
-            scrollToIndex(0, { align: 'start' });
-        }
-        // Close the token details sheet when switching the chains
-        tokenDetailsSheetRef.current?.close();
-    }, [scrollToIndex, isAllNetworks, chainId, getVirtualItems]);
-    return (_jsxs(_Fragment, { children: [_jsx(List, { className: "long-list", style: { height: getTotalSize() }, disablePadding: true, children: getVirtualItems().map((item) => {
-                    const currentToken = tokens[item.index];
-                    const previousToken = tokens[item.index - 1];
-                    const chain = chainsSet?.get(currentToken.chainId);
-                    const isNotPinned = !currentToken.pinned;
-                    const isFirstPinnedToken = currentToken.pinned && item.index === 0;
-                    const isTransitionFromPinned = previousToken?.pinned && isNotPinned;
-                    // Category transitions (excluding pinned)
-                    const isTransitionFromFeatured = previousToken?.featured && !currentToken.featured && isNotPinned;
-                    const isTransitionFromMyTokens = previousToken?.amount && !currentToken.amount && isNotPinned;
-                    const isTransitionFromPopular = previousToken?.popular && !currentToken.popular && isNotPinned;
-                    // Determine which category label to show
-                    const startAdornmentLabel = (() => {
-                        if (showPinnedTokens && isFirstPinnedToken) {
-                            return t('main.pinnedTokens');
-                        }
-                        if (showPinnedTokens && !showCategories && isTransitionFromPinned) {
-                            return t('main.allTokens');
-                        }
-                        if (!showCategories) {
-                            return null;
-                        }
-                        if ((isTransitionFromPinned && currentToken.featured) ||
-                            (currentToken.featured && isNotPinned && item.index === 0)) {
-                            return t('main.featuredTokens');
-                        }
-                        if ((isTransitionFromFeatured || isTransitionFromPinned) &&
-                            currentToken.amount &&
-                            isNotPinned) {
-                            return t('main.myTokens');
-                        }
-                        if ((isTransitionFromFeatured ||
-                            isTransitionFromMyTokens ||
-                            isTransitionFromPinned) &&
-                            currentToken.popular &&
-                            isNotPinned) {
-                            return t('main.popularTokens');
-                        }
-                        if (isTransitionFromMyTokens ||
-                            isTransitionFromFeatured ||
-                            isTransitionFromPinned ||
-                            isTransitionFromPopular) {
-                            return t('main.allTokens');
-                        }
-                        return null;
-                    })();
-                    const isSelected = selectedTokenAddress === currentToken.address &&
-                        chainId === currentToken.chainId;
-                    return (_jsx(TokenListItem, { onClick: onClick, size: item.size, start: item.start, token: currentToken, chain: isAllNetworks ? chain : undefined, selected: isSelected, onShowTokenDetails: onShowTokenDetails, isBalanceLoading: isBalanceLoading, startAdornment: startAdornmentLabel ? (_jsx(Typography, { sx: {
-                                fontSize: 14,
-                                fontWeight: 600,
-                                lineHeight: '16px',
-                                px: 1.5,
-                                pt: isFirstPinnedToken ||
-                                    (currentToken.featured &&
-                                        isNotPinned &&
-                                        item.index === 0)
-                                    ? 0
-                                    : 1,
-                                pb: 1,
-                            }, children: startAdornmentLabel })) : null }, item.key));
-                }) }), _jsx(TokenDetailsSheet, { ref: tokenDetailsSheetRef }), isLoading && (_jsx(List, { disablePadding: true, sx: { cursor: 'default' }, children: Array.from({ length: 3 }).map((_, index) => (_jsx(TokenListItemSkeleton, {}, index))) }))] }));
+import { useAvailableChains } from "../../hooks/useAvailableChains.js";
+import { TokenDetailsSheet } from "./TokenDetailsSheet.js";
+import { List as List$1 } from "./TokenList.style.js";
+import { TokenListItem, TokenListItemSkeleton } from "./TokenListItem.js";
+import { useCallback, useEffect, useMemo, useRef } from "react";
+import { Typography } from "@mui/material";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import { useVirtualizer } from "@tanstack/react-virtual";
+//#region src/components/TokenList/VirtualizedTokenList.tsx
+const tokenItemHeight = 64;
+const VirtualizedTokenList = ({ tokens, scrollElementRef, chainId, selectedTokenAddress, isLoading, isBalanceLoading, showCategories, showPinnedTokens, onClick, isAllNetworks }) => {
+	const { t } = useTranslation();
+	const { chains } = useAvailableChains();
+	const chainsSet = useMemo(() => {
+		if (!chains) return;
+		return new Map(chains.map((chain) => [chain.id, chain]));
+	}, [chains]);
+	const tokenDetailsSheetRef = useRef(null);
+	const onShowTokenDetails = useCallback((tokenAddress, noContractAddress, chainId) => {
+		tokenDetailsSheetRef.current?.open(tokenAddress, noContractAddress, chainId);
+	}, []);
+	const getItemKey = useCallback((index) => {
+		const token = tokens[index];
+		return `${token.chainId}-${token.address}-${index}`;
+	}, [tokens]);
+	const estimateSize = useCallback((index) => {
+		const currentToken = tokens[index];
+		const previousToken = tokens[index - 1];
+		let size = tokenItemHeight;
+		if (currentToken.pinned && index === 0) size += 24;
+		if (previousToken?.pinned && !currentToken.pinned) size += 32;
+		if (!showCategories) return size;
+		if (currentToken.featured && !currentToken.pinned && index === 0) size += 24;
+		if (!currentToken.pinned && !previousToken?.pinned && (previousToken?.amount && !currentToken.amount || previousToken?.featured && !currentToken.featured || previousToken?.popular && !currentToken.popular)) size += 32;
+		return size;
+	}, [tokens, showCategories]);
+	const { getVirtualItems, getTotalSize, scrollToIndex, measure } = useVirtualizer(useMemo(() => ({
+		count: tokens.length,
+		overscan: 5,
+		getScrollElement: () => scrollElementRef.current,
+		estimateSize,
+		getItemKey,
+		paddingEnd: 8
+	}), [
+		tokens.length,
+		estimateSize,
+		getItemKey,
+		scrollElementRef
+	]));
+	useEffect(() => {
+		if (scrollElementRef.current) measure();
+	}, [measure, scrollElementRef.current]);
+	useEffect(() => {
+		if (getVirtualItems().length) scrollToIndex(0, { align: "start" });
+		tokenDetailsSheetRef.current?.close();
+	}, [
+		scrollToIndex,
+		isAllNetworks,
+		chainId,
+		getVirtualItems
+	]);
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+		/* @__PURE__ */ jsx(List$1, {
+			className: "long-list",
+			style: { height: getTotalSize() },
+			disablePadding: true,
+			children: getVirtualItems().map((item) => {
+				const currentToken = tokens[item.index];
+				const previousToken = tokens[item.index - 1];
+				const chain = chainsSet?.get(currentToken.chainId);
+				const isNotPinned = !currentToken.pinned;
+				const isFirstPinnedToken = currentToken.pinned && item.index === 0;
+				const isTransitionFromPinned = previousToken?.pinned && isNotPinned;
+				const isTransitionFromFeatured = previousToken?.featured && !currentToken.featured && isNotPinned;
+				const isTransitionFromMyTokens = previousToken?.amount && !currentToken.amount && isNotPinned;
+				const isTransitionFromPopular = previousToken?.popular && !currentToken.popular && isNotPinned;
+				const startAdornmentLabel = (() => {
+					if (showPinnedTokens && isFirstPinnedToken) return t("main.pinnedTokens");
+					if (showPinnedTokens && !showCategories && isTransitionFromPinned) return t("main.allTokens");
+					if (!showCategories) return null;
+					if (isTransitionFromPinned && currentToken.featured || currentToken.featured && isNotPinned && item.index === 0) return t("main.featuredTokens");
+					if ((isTransitionFromFeatured || isTransitionFromPinned) && currentToken.amount && isNotPinned) return t("main.myTokens");
+					if ((isTransitionFromFeatured || isTransitionFromMyTokens || isTransitionFromPinned) && currentToken.popular && isNotPinned) return t("main.popularTokens");
+					if (isTransitionFromMyTokens || isTransitionFromFeatured || isTransitionFromPinned || isTransitionFromPopular) return t("main.allTokens");
+					return null;
+				})();
+				const isSelected = selectedTokenAddress === currentToken.address && chainId === currentToken.chainId;
+				return /* @__PURE__ */ jsx(TokenListItem, {
+					onClick,
+					size: item.size,
+					start: item.start,
+					token: currentToken,
+					chain: isAllNetworks ? chain : void 0,
+					selected: isSelected,
+					onShowTokenDetails,
+					isBalanceLoading,
+					startAdornment: startAdornmentLabel ? /* @__PURE__ */ jsx(Typography, {
+						sx: {
+							fontSize: 14,
+							fontWeight: 600,
+							lineHeight: "16px",
+							px: 1.5,
+							pt: isFirstPinnedToken || currentToken.featured && isNotPinned && item.index === 0 ? 0 : 1,
+							pb: 1
+						},
+						children: startAdornmentLabel
+					}) : null
+				}, item.key);
+			})
+		}),
+		/* @__PURE__ */ jsx(TokenDetailsSheet, { ref: tokenDetailsSheetRef }),
+		isLoading && /* @__PURE__ */ jsx(List$1, {
+			disablePadding: true,
+			sx: { cursor: "default" },
+			children: Array.from({ length: 3 }).map((_, index) => /* @__PURE__ */ jsx(TokenListItemSkeleton, {}, index))
+		})
+	] });
 };
+//#endregion
+export { VirtualizedTokenList };
+
 //# sourceMappingURL=VirtualizedTokenList.js.map

package/dist/esm/components/TokenList/VirtualizedTokenList.js.map

@@ -1 +1 @@
-{"version":3,"file":"VirtualizedTokenList.js","sourceRoot":"","sources":["../../../../src/components/TokenList/VirtualizedTokenList.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"VirtualizedTokenList.js","names":["List"],"sources":["../../../../src/components/TokenList/VirtualizedTokenList.tsx"],"sourcesContent":["import { Typography } from '@mui/material'\nimport { useVirtualizer } from '@tanstack/react-virtual'\nimport type { FC } from 'react'\nimport { useCallback, useEffect, useMemo, useRef } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useAvailableChains } from '../../hooks/useAvailableChains.js'\nimport type { TokenAmount } from '../../types/token.js'\nimport { TokenDetailsSheet } from './TokenDetailsSheet.js'\nimport { List } from './TokenList.style.js'\nimport { TokenListItem, TokenListItemSkeleton } from './TokenListItem.js'\nimport type {\n  TokenDetailsSheetBase,\n  VirtualizedTokenListProps,\n} from './types.js'\n\nconst tokenItemHeight = 64 // 60 + 4px margin-bottom\n\nexport const VirtualizedTokenList: FC<VirtualizedTokenListProps> = ({\n  tokens,\n  scrollElementRef,\n  chainId,\n  selectedTokenAddress,\n  isLoading,\n  isBalanceLoading,\n  showCategories,\n  showPinnedTokens,\n  onClick,\n  isAllNetworks,\n}) => {\n  const { t } = useTranslation()\n\n  const { chains } = useAvailableChains()\n\n  // Create Set for O(1) chain lookup instead of O(n) find\n  const chainsSet = useMemo(() => {\n    if (!chains) {\n      return undefined\n    }\n    return new Map(chains.map((chain) => [chain.id, chain]))\n  }, [chains])\n\n  const tokenDetailsSheetRef = useRef<TokenDetailsSheetBase>(null)\n\n  const onShowTokenDetails = useCallback(\n    (tokenAddress: string, noContractAddress: boolean, chainId: number) => {\n      tokenDetailsSheetRef.current?.open(\n        tokenAddress,\n        noContractAddress,\n        chainId\n      )\n    },\n    []\n  )\n\n  const getItemKey = useCallback(\n    (index: number) => {\n      const token = tokens[index]\n      return `${token.chainId}-${token.address}-${index}`\n    },\n    [tokens]\n  )\n\n  const estimateSize = useCallback(\n    (index: number) => {\n      const currentToken = tokens[index]\n      const previousToken = tokens[index - 1]\n      let size = tokenItemHeight\n\n      // Pinned tokens (always shown, even in all networks mode)\n      if (currentToken.pinned && index === 0) {\n        size += 24\n      }\n      if (previousToken?.pinned && !currentToken.pinned) {\n        size += 32\n      }\n\n      if (!showCategories) {\n        return size\n      }\n\n      if (currentToken.featured && !currentToken.pinned && index === 0) {\n        size += 24\n      }\n\n      // Category transition (excluding pinned tokens)\n      const isNotPinned = !currentToken.pinned && !previousToken?.pinned\n      if (\n        isNotPinned &&\n        ((previousToken?.amount && !currentToken.amount) ||\n          (previousToken?.featured && !currentToken.featured) ||\n          (previousToken?.popular && !currentToken.popular))\n      ) {\n        size += 32\n      }\n\n      return size\n    },\n    [tokens, showCategories]\n  )\n\n  const virtualizerConfig = useMemo(\n    () => ({\n      count: tokens.length,\n      overscan: 5,\n      getScrollElement: () => scrollElementRef.current,\n      estimateSize,\n      getItemKey,\n      paddingEnd: 8,\n    }),\n    [tokens.length, estimateSize, getItemKey, scrollElementRef]\n  )\n\n  const { getVirtualItems, getTotalSize, scrollToIndex, measure } =\n    useVirtualizer(virtualizerConfig)\n\n  // Address the issue of disappearing tokens on rerender\n  useEffect(() => {\n    if (scrollElementRef.current) {\n      measure()\n    }\n  }, [measure, scrollElementRef.current])\n\n  // biome-ignore lint/correctness/useExhaustiveDependencies: run only when chainId changes\n  useEffect(() => {\n    // Scroll to the top of the list when switching the chains\n    if (getVirtualItems().length) {\n      scrollToIndex(0, { align: 'start' })\n    }\n    // Close the token details sheet when switching the chains\n    tokenDetailsSheetRef.current?.close()\n  }, [scrollToIndex, isAllNetworks, chainId, getVirtualItems])\n\n  return (\n    <>\n      <List\n        className=\"long-list\"\n        style={{ height: getTotalSize() }}\n        disablePadding\n      >\n        {getVirtualItems().map((item) => {\n          const currentToken = tokens[item.index]\n          const previousToken: TokenAmount | undefined = tokens[item.index - 1]\n          const chain = chainsSet?.get(currentToken.chainId)\n\n          const isNotPinned = !currentToken.pinned\n          const isFirstPinnedToken = currentToken.pinned && item.index === 0\n          const isTransitionFromPinned = previousToken?.pinned && isNotPinned\n\n          // Category transitions (excluding pinned)\n          const isTransitionFromFeatured =\n            previousToken?.featured && !currentToken.featured && isNotPinned\n          const isTransitionFromMyTokens =\n            previousToken?.amount && !currentToken.amount && isNotPinned\n          const isTransitionFromPopular =\n            previousToken?.popular && !currentToken.popular && isNotPinned\n\n          // Determine which category label to show\n          const startAdornmentLabel = (() => {\n            if (showPinnedTokens && isFirstPinnedToken) {\n              return t('main.pinnedTokens')\n            }\n            if (showPinnedTokens && !showCategories && isTransitionFromPinned) {\n              return t('main.allTokens')\n            }\n            if (!showCategories) {\n              return null\n            }\n\n            if (\n              (isTransitionFromPinned && currentToken.featured) ||\n              (currentToken.featured && isNotPinned && item.index === 0)\n            ) {\n              return t('main.featuredTokens')\n            }\n            if (\n              (isTransitionFromFeatured || isTransitionFromPinned) &&\n              currentToken.amount &&\n              isNotPinned\n            ) {\n              return t('main.myTokens')\n            }\n            if (\n              (isTransitionFromFeatured ||\n                isTransitionFromMyTokens ||\n                isTransitionFromPinned) &&\n              currentToken.popular &&\n              isNotPinned\n            ) {\n              return t('main.popularTokens')\n            }\n            if (\n              isTransitionFromMyTokens ||\n              isTransitionFromFeatured ||\n              isTransitionFromPinned ||\n              isTransitionFromPopular\n            ) {\n              return t('main.allTokens')\n            }\n            return null\n          })()\n\n          const isSelected =\n            selectedTokenAddress === currentToken.address &&\n            chainId === currentToken.chainId\n\n          return (\n            <TokenListItem\n              key={item.key}\n              onClick={onClick}\n              size={item.size}\n              start={item.start}\n              token={currentToken}\n              chain={isAllNetworks ? chain : undefined}\n              selected={isSelected}\n              onShowTokenDetails={onShowTokenDetails}\n              isBalanceLoading={isBalanceLoading}\n              startAdornment={\n                startAdornmentLabel ? (\n                  <Typography\n                    sx={{\n                      fontSize: 14,\n                      fontWeight: 600,\n                      lineHeight: '16px',\n                      px: 1.5,\n                      pt:\n                        isFirstPinnedToken ||\n                        (currentToken.featured &&\n                          isNotPinned &&\n                          item.index === 0)\n                          ? 0\n                          : 1,\n                      pb: 1,\n                    }}\n                  >\n                    {startAdornmentLabel}\n                  </Typography>\n                ) : null\n              }\n            />\n          )\n        })}\n      </List>\n      <TokenDetailsSheet ref={tokenDetailsSheetRef} />\n      {isLoading && (\n        <List disablePadding sx={{ cursor: 'default' }}>\n          {Array.from({ length: 3 }).map((_, index) => (\n            <TokenListItemSkeleton key={index} />\n          ))}\n        </List>\n      )}\n    </>\n  )\n}\n"],"mappings":"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"}

package/dist/esm/components/TokenList/useTokenSelect.js

@@ -1,100 +1,78 @@
-import { useCallback } from 'react';
-import { useToAddressAutoPopulate } from '../../hooks/useToAddressAutoPopulate.js';
-import { useWidgetEvents } from '../../hooks/useWidgetEvents.js';
-import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
-import { useChainOrderStore } from '../../stores/chains/ChainOrderStore.js';
-import { FormKeyHelper } from '../../stores/form/types.js';
-import { useFieldActions } from '../../stores/form/useFieldActions.js';
-import { useSplitSubvariantStore } from '../../stores/settings/useSplitSubvariantStore.js';
-import { WidgetEvent } from '../../types/events.js';
-import { isItemAllowed } from '../../utils/item.js';
-export const useTokenSelect = (formType, onClick) => {
-    const { subvariant, disabledUI, chains: chainsConfig } = useWidgetConfig();
-    const splitSubvariant = useSplitSubvariantStore((store) => store.state);
-    const emitter = useWidgetEvents();
-    const { setFieldValue, getFieldValues } = useFieldActions();
-    const autoPopulateToAddress = useToAddressAutoPopulate();
-    const [setChain, setIsAllNetworks] = useChainOrderStore((state) => [
-        state.setChain,
-        state.setIsAllNetworks,
-    ]);
-    const tokenKey = FormKeyHelper.getTokenKey(formType);
-    return useCallback((tokenAddress, chainId) => {
-        setFieldValue(tokenKey, tokenAddress, { isDirty: true, isTouched: true });
-        const selectedChainId = chainId ?? getFieldValues(FormKeyHelper.getChainKey(formType))[0];
-        // Set chain again to trigger URL builder update
-        setFieldValue(FormKeyHelper.getChainKey(formType), selectedChainId, {
-            isDirty: true,
-            isTouched: true,
-        });
-        const amountKey = FormKeyHelper.getAmountKey(formType);
-        if (!disabledUI?.includes(amountKey)) {
-            setFieldValue(amountKey, '');
-        }
-        const oppositeFormType = formType === 'from' ? 'to' : 'from';
-        const [selectedOppositeTokenAddress, selectedOppositeChainId, selectedToAddress,] = getFieldValues(FormKeyHelper.getTokenKey(oppositeFormType), FormKeyHelper.getChainKey(oppositeFormType), 'toAddress');
-        // TODO: remove when we enable same chain/token transfers
-        const isSameTokenTransfer = selectedOppositeTokenAddress === tokenAddress &&
-            selectedOppositeChainId === selectedChainId;
-        const isBridgeToSameChain = subvariant === 'split' &&
-            splitSubvariant === 'bridge' &&
-            selectedOppositeChainId === selectedChainId;
-        if ((isSameTokenTransfer || isBridgeToSameChain) &&
-            subvariant !== 'custom') {
-            setFieldValue(FormKeyHelper.getTokenKey(oppositeFormType), '', {
-                isDirty: true,
-                isTouched: true,
-            });
-        }
-        // If no opposite token is selected, synchronize the opposite chain
-        // to match the currently selected chain (if allowed).
-        // In default exchange mode, also collapse "All Networks" on the opposite
-        // side - same-chain swap is the most common action.
-        if (!selectedOppositeTokenAddress &&
-            selectedChainId &&
-            isItemAllowed(selectedChainId, chainsConfig?.[oppositeFormType])) {
-            const isDefaultExchange = !subvariant || subvariant === 'default';
-            if (isDefaultExchange) {
-                setIsAllNetworks(false, oppositeFormType);
-            }
-            setFieldValue(FormKeyHelper.getChainKey(oppositeFormType), selectedChainId, {
-                isDirty: true,
-                isTouched: true,
-            });
-            setChain(selectedChainId, oppositeFormType);
-        }
-        // Automatically populate toAddress field if bridging across ecosystems and compatible wallet is connected
-        autoPopulateToAddress({
-            formType,
-            selectedToAddress,
-            selectedChainId,
-            selectedOppositeChainId,
-            selectedOppositeTokenAddress,
-        });
-        const eventToEmit = formType === 'from'
-            ? WidgetEvent.SourceChainTokenSelected
-            : WidgetEvent.DestinationChainTokenSelected;
-        if (selectedChainId) {
-            emitter.emit(eventToEmit, {
-                chainId: selectedChainId,
-                tokenAddress,
-            });
-        }
-        onClick?.();
-    }, [
-        autoPopulateToAddress,
-        disabledUI,
-        emitter,
-        formType,
-        getFieldValues,
-        onClick,
-        setChain,
-        setIsAllNetworks,
-        setFieldValue,
-        subvariant,
-        splitSubvariant,
-        tokenKey,
-        chainsConfig,
-    ]);
+import { useWidgetEvents } from "../../hooks/useWidgetEvents.js";
+import "../../types/events.js";
+import { isItemAllowed } from "../../utils/item.js";
+import { useWidgetConfig } from "../../providers/WidgetProvider/WidgetProvider.js";
+import { useSplitMode } from "../../stores/navigationTabs/useNavigationTabsStore.js";
+import { useFieldActions } from "../../stores/form/useFieldActions.js";
+import { useChainOrderStore } from "../../stores/chains/ChainOrderStore.js";
+import { FormKeyHelper } from "../../stores/form/types.js";
+import { useToAddressAutoPopulate } from "../../hooks/useToAddressAutoPopulate.js";
+import { useCallback } from "react";
+//#region src/components/TokenList/useTokenSelect.ts
+const useTokenSelect = (formType, onClick) => {
+	const { mode, disabledUI, chains: chainsConfig } = useWidgetConfig();
+	const splitMode = useSplitMode();
+	const emitter = useWidgetEvents();
+	const { setFieldValue, getFieldValues } = useFieldActions();
+	const autoPopulateToAddress = useToAddressAutoPopulate();
+	const [setChain, setIsAllNetworks] = useChainOrderStore((state) => [state.setChain, state.setIsAllNetworks]);
+	const tokenKey = FormKeyHelper.getTokenKey(formType);
+	return useCallback((tokenAddress, chainId) => {
+		setFieldValue(tokenKey, tokenAddress, {
+			isDirty: true,
+			isTouched: true
+		});
+		const selectedChainId = chainId ?? getFieldValues(FormKeyHelper.getChainKey(formType))[0];
+		setFieldValue(FormKeyHelper.getChainKey(formType), selectedChainId, {
+			isDirty: true,
+			isTouched: true
+		});
+		const amountKey = FormKeyHelper.getAmountKey(formType);
+		if (!disabledUI?.[amountKey]) setFieldValue(amountKey, "");
+		const oppositeFormType = formType === "from" ? "to" : "from";
+		const [selectedOppositeTokenAddress, selectedOppositeChainId, selectedToAddress] = getFieldValues(FormKeyHelper.getTokenKey(oppositeFormType), FormKeyHelper.getChainKey(oppositeFormType), "toAddress");
+		if ((selectedOppositeTokenAddress === tokenAddress && selectedOppositeChainId === selectedChainId || mode === "split" && splitMode === "bridge" && selectedOppositeChainId === selectedChainId) && mode !== "custom") setFieldValue(FormKeyHelper.getTokenKey(oppositeFormType), "", {
+			isDirty: true,
+			isTouched: true
+		});
+		if (!selectedOppositeTokenAddress && selectedChainId && isItemAllowed(selectedChainId, chainsConfig?.[oppositeFormType])) {
+			if (!mode || mode === "default") setIsAllNetworks(false, oppositeFormType);
+			setFieldValue(FormKeyHelper.getChainKey(oppositeFormType), selectedChainId, {
+				isDirty: true,
+				isTouched: true
+			});
+			setChain(selectedChainId, oppositeFormType);
+		}
+		autoPopulateToAddress({
+			formType,
+			selectedToAddress,
+			selectedChainId,
+			selectedOppositeChainId,
+			selectedOppositeTokenAddress
+		});
+		const eventToEmit = formType === "from" ? "sourceChainTokenSelected" : "destinationChainTokenSelected";
+		if (selectedChainId) emitter.emit(eventToEmit, {
+			chainId: selectedChainId,
+			tokenAddress
+		});
+		onClick?.();
+	}, [
+		autoPopulateToAddress,
+		disabledUI,
+		emitter,
+		formType,
+		getFieldValues,
+		onClick,
+		setChain,
+		setIsAllNetworks,
+		setFieldValue,
+		mode,
+		splitMode,
+		tokenKey,
+		chainsConfig
+	]);
 };
+//#endregion
+export { useTokenSelect };
+
 //# sourceMappingURL=useTokenSelect.js.map

package/dist/esm/components/TokenList/useTokenSelect.js.map

@@ -1 +1 @@
-{"version":3,"file":"useTokenSelect.js","sourceRoot":"","sources":["../../../../src/components/TokenList/useTokenSelect.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"useTokenSelect.js","names":[],"sources":["../../../../src/components/TokenList/useTokenSelect.ts"],"sourcesContent":["import { useCallback } from 'react'\nimport { useToAddressAutoPopulate } from '../../hooks/useToAddressAutoPopulate.js'\nimport { useWidgetEvents } from '../../hooks/useWidgetEvents.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { useChainOrderStore } from '../../stores/chains/ChainOrderStore.js'\nimport type { FormType } from '../../stores/form/types.js'\nimport { FormKeyHelper } from '../../stores/form/types.js'\nimport { useFieldActions } from '../../stores/form/useFieldActions.js'\nimport { useSplitMode } from '../../stores/navigationTabs/useNavigationTabsStore.js'\nimport { WidgetEvent } from '../../types/events.js'\nimport type { DisabledUIConfig } from '../../types/widget.js'\nimport { isItemAllowed } from '../../utils/item.js'\n\nexport const useTokenSelect = (\n  formType: FormType,\n  onClick?: () => void\n): ((tokenAddress: string, chainId?: number) => void) => {\n  const { mode, disabledUI, chains: chainsConfig } = useWidgetConfig()\n  const splitMode = useSplitMode()\n  const emitter = useWidgetEvents()\n  const { setFieldValue, getFieldValues } = useFieldActions()\n  const autoPopulateToAddress = useToAddressAutoPopulate()\n  const [setChain, setIsAllNetworks] = useChainOrderStore((state) => [\n    state.setChain,\n    state.setIsAllNetworks,\n  ])\n\n  const tokenKey = FormKeyHelper.getTokenKey(formType)\n\n  return useCallback(\n    (tokenAddress: string, chainId?: number) => {\n      setFieldValue(tokenKey, tokenAddress, { isDirty: true, isTouched: true })\n      const selectedChainId =\n        chainId ?? getFieldValues(FormKeyHelper.getChainKey(formType))[0]\n      // Set chain again to trigger URL builder update\n      setFieldValue(FormKeyHelper.getChainKey(formType), selectedChainId, {\n        isDirty: true,\n        isTouched: true,\n      })\n      const amountKey = FormKeyHelper.getAmountKey(formType)\n      if (!disabledUI?.[amountKey as keyof DisabledUIConfig]) {\n        setFieldValue(amountKey, '')\n      }\n      const oppositeFormType = formType === 'from' ? 'to' : 'from'\n      const [\n        selectedOppositeTokenAddress,\n        selectedOppositeChainId,\n        selectedToAddress,\n      ] = getFieldValues(\n        FormKeyHelper.getTokenKey(oppositeFormType),\n        FormKeyHelper.getChainKey(oppositeFormType),\n        'toAddress'\n      )\n\n      // TODO: remove when we enable same chain/token transfers\n      const isSameTokenTransfer =\n        selectedOppositeTokenAddress === tokenAddress &&\n        selectedOppositeChainId === selectedChainId\n\n      const isBridgeToSameChain =\n        mode === 'split' &&\n        splitMode === 'bridge' &&\n        selectedOppositeChainId === selectedChainId\n\n      if ((isSameTokenTransfer || isBridgeToSameChain) && mode !== 'custom') {\n        setFieldValue(FormKeyHelper.getTokenKey(oppositeFormType), '', {\n          isDirty: true,\n          isTouched: true,\n        })\n      }\n\n      // If no opposite token is selected, synchronize the opposite chain\n      // to match the currently selected chain (if allowed).\n      // In default exchange mode, also collapse \"All Networks\" on the opposite\n      // side - same-chain swap is the most common action.\n      if (\n        !selectedOppositeTokenAddress &&\n        selectedChainId &&\n        isItemAllowed(selectedChainId, chainsConfig?.[oppositeFormType])\n      ) {\n        const isDefaultExchange = !mode || mode === 'default'\n        if (isDefaultExchange) {\n          setIsAllNetworks(false, oppositeFormType)\n        }\n        setFieldValue(\n          FormKeyHelper.getChainKey(oppositeFormType),\n          selectedChainId,\n          {\n            isDirty: true,\n            isTouched: true,\n          }\n        )\n        setChain(selectedChainId, oppositeFormType)\n      }\n\n      // Automatically populate toAddress field if bridging across ecosystems and compatible wallet is connected\n      autoPopulateToAddress({\n        formType,\n        selectedToAddress,\n        selectedChainId,\n        selectedOppositeChainId,\n        selectedOppositeTokenAddress,\n      })\n\n      const eventToEmit =\n        formType === 'from'\n          ? WidgetEvent.SourceChainTokenSelected\n          : WidgetEvent.DestinationChainTokenSelected\n\n      if (selectedChainId) {\n        emitter.emit(eventToEmit, {\n          chainId: selectedChainId,\n          tokenAddress,\n        })\n      }\n\n      onClick?.()\n    },\n    [\n      autoPopulateToAddress,\n      disabledUI,\n      emitter,\n      formType,\n      getFieldValues,\n      onClick,\n      setChain,\n      setIsAllNetworks,\n      setFieldValue,\n      mode,\n      splitMode,\n      tokenKey,\n      chainsConfig,\n    ]\n  )\n}\n"],"mappings":";;;;;;;;;;;AAaA,MAAa,kBACX,UACA,YACuD;CACvD,MAAM,EAAE,MAAM,YAAY,QAAQ,iBAAiB,gBAAgB;CACnE,MAAM,YAAY,aAAa;CAC/B,MAAM,UAAU,gBAAgB;CAChC,MAAM,EAAE,eAAe,mBAAmB,gBAAgB;CAC1D,MAAM,wBAAwB,yBAAyB;CACvD,MAAM,CAAC,UAAU,oBAAoB,oBAAoB,UAAU,CACjE,MAAM,UACN,MAAM,gBACR,CAAC;CAED,MAAM,WAAW,cAAc,YAAY,QAAQ;CAEnD,OAAO,aACJ,cAAsB,YAAqB;EAC1C,cAAc,UAAU,cAAc;GAAE,SAAS;GAAM,WAAW;EAAK,CAAC;EACxE,MAAM,kBACJ,WAAW,eAAe,cAAc,YAAY,QAAQ,CAAC,CAAC,CAAC;EAEjE,cAAc,cAAc,YAAY,QAAQ,GAAG,iBAAiB;GAClE,SAAS;GACT,WAAW;EACb,CAAC;EACD,MAAM,YAAY,cAAc,aAAa,QAAQ;EACrD,IAAI,CAAC,aAAa,YAChB,cAAc,WAAW,EAAE;EAE7B,MAAM,mBAAmB,aAAa,SAAS,OAAO;EACtD,MAAM,CACJ,8BACA,yBACA,qBACE,eACF,cAAc,YAAY,gBAAgB,GAC1C,cAAc,YAAY,gBAAgB,GAC1C,WACF;EAYA,KARE,iCAAiC,gBACjC,4BAA4B,mBAG5B,SAAS,WACT,cAAc,YACd,4BAA4B,oBAEsB,SAAS,UAC3D,cAAc,cAAc,YAAY,gBAAgB,GAAG,IAAI;GAC7D,SAAS;GACT,WAAW;EACb,CAAC;EAOH,IACE,CAAC,gCACD,mBACA,cAAc,iBAAiB,eAAe,iBAAiB,GAC/D;GAEA,IAD0B,CAAC,QAAQ,SAAS,WAE1C,iBAAiB,OAAO,gBAAgB;GAE1C,cACE,cAAc,YAAY,gBAAgB,GAC1C,iBACA;IACE,SAAS;IACT,WAAW;GACb,CACF;GACA,SAAS,iBAAiB,gBAAgB;EAC5C;EAGA,sBAAsB;GACpB;GACA;GACA;GACA;GACA;EACF,CAAC;EAED,MAAM,cACJ,aAAa,SAAA,6BAAA;EAIf,IAAI,iBACF,QAAQ,KAAK,aAAa;GACxB,SAAS;GACT;EACF,CAAC;EAGH,UAAU;CACZ,GACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CACF;AACF"}

package/dist/esm/components/TokenRate/TokenRate.js

@@ -1,39 +1,38 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { formatUnits } from '@lifi/sdk';
-import { useTranslation } from 'react-i18next';
-import { create } from 'zustand';
-import { TokenRateTypography } from './TokenRate.style.js';
+import { TokenRateTypography } from "./TokenRate.style.js";
+import { formatUnits } from "@lifi/sdk";
+import { create } from "zustand";
+import { jsx } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+//#region src/components/TokenRate/TokenRate.tsx
 const useTokenRate = create((set) => ({
-    isForward: true,
-    toggleIsForward: () => set((state) => ({ isForward: !state.isForward })),
+	isForward: true,
+	toggleIsForward: () => set((state) => ({ isForward: !state.isForward }))
 }));
-export const TokenRate = ({ route }) => {
-    const { t } = useTranslation();
-    const { isForward, toggleIsForward } = useTokenRate();
-    const toggleRate = (e) => {
-        e.stopPropagation();
-        toggleIsForward();
-    };
-    const lastStep = route.steps.at(-1);
-    const fromToken = {
-        ...route.fromToken,
-        amount: BigInt(route.fromAmount),
-    };
-    const toToken = {
-        ...(lastStep?.execution?.toToken ??
-            lastStep?.action.toToken ??
-            route.toToken),
-        amount: lastStep?.execution?.toAmount
-            ? BigInt(lastStep.execution.toAmount)
-            : BigInt(route.toAmount),
-    };
-    const fromToRate = Number.parseFloat(formatUnits(toToken.amount, toToken.decimals)) /
-        Number.parseFloat(formatUnits(fromToken.amount, fromToken.decimals));
-    const toFromRate = Number.parseFloat(formatUnits(fromToken.amount, fromToken.decimals)) /
-        Number.parseFloat(formatUnits(toToken.amount, toToken.decimals));
-    const rateText = isForward
-        ? `1 ${fromToken.symbol} ≈ ${t('format.tokenAmount', { value: fromToRate })} ${toToken.symbol}`
-        : `1 ${toToken.symbol} ≈ ${t('format.tokenAmount', { value: toFromRate })} ${fromToken.symbol}`;
-    return (_jsx(TokenRateTypography, { onClick: toggleRate, role: "button", children: rateText }));
+const TokenRate = ({ route }) => {
+	const { t } = useTranslation();
+	const { isForward, toggleIsForward } = useTokenRate();
+	const toggleRate = (e) => {
+		e.stopPropagation();
+		toggleIsForward();
+	};
+	const lastStep = route.steps.at(-1);
+	const fromToken = {
+		...route.fromToken,
+		amount: BigInt(route.fromAmount)
+	};
+	const toToken = {
+		...lastStep?.execution?.toToken ?? lastStep?.action.toToken ?? route.toToken,
+		amount: lastStep?.execution?.toAmount ? BigInt(lastStep.execution.toAmount) : BigInt(route.toAmount)
+	};
+	const fromToRate = Number.parseFloat(formatUnits(toToken.amount, toToken.decimals)) / Number.parseFloat(formatUnits(fromToken.amount, fromToken.decimals));
+	const toFromRate = Number.parseFloat(formatUnits(fromToken.amount, fromToken.decimals)) / Number.parseFloat(formatUnits(toToken.amount, toToken.decimals));
+	return /* @__PURE__ */ jsx(TokenRateTypography, {
+		onClick: toggleRate,
+		role: "button",
+		children: isForward ? `1 ${fromToken.symbol} ≈ ${t("format.tokenAmount", { value: fromToRate })} ${toToken.symbol}` : `1 ${toToken.symbol} ≈ ${t("format.tokenAmount", { value: toFromRate })} ${fromToken.symbol}`
+	});
 };
+//#endregion
+export { TokenRate };
+
 //# sourceMappingURL=TokenRate.js.map