@lifi/widget 4.6.0 → 4.7.1

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

@@ -0,0 +1 @@
+{"version":3,"file":"RemoveRecentTokenButton.js","names":["CloseIcon"],"sources":["../../../../src/components/TokenList/RemoveRecentTokenButton.tsx"],"sourcesContent":["import CloseIcon from '@mui/icons-material/Close'\nimport { IconButton } from '@mui/material'\nimport type { JSX } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useRecentTokensStore } from '../../stores/recentTokens/RecentTokensStore.js'\n\ninterface RemoveRecentTokenButtonProps {\n  chainId: number\n  tokenAddress: string\n}\n\nexport const RemoveRecentTokenButton = ({\n  chainId,\n  tokenAddress,\n}: RemoveRecentTokenButtonProps): JSX.Element => {\n  const { t } = useTranslation()\n  // Selecting the action alone keeps this out of every store update.\n  const removeRecentToken = useRecentTokensStore(\n    (state) => state.removeRecentToken\n  )\n\n  const handleClick = (e: React.MouseEvent) => {\n    e.stopPropagation()\n    ;(e.currentTarget as HTMLElement).blur()\n    removeRecentToken(chainId, tokenAddress)\n  }\n\n  return (\n    <IconButton\n      aria-label={t('button.delete')}\n      sx={{ width: 20, height: 20 }}\n      size=\"small\"\n      onClick={handleClick}\n    >\n      <CloseIcon sx={{ fontSize: 12, color: 'text.secondary' }} />\n    </IconButton>\n  )\n}\n"],"mappings":";;;;;;AAWA,MAAa,2BAA2B,EACtC,SACA,mBAC+C;CAC/C,MAAM,EAAE,MAAM,eAAe;CAE7B,MAAM,oBAAoB,sBACvB,UAAU,MAAM,iBACnB;CAEA,MAAM,eAAe,MAAwB;EAC3C,EAAE,gBAAgB;EACjB,EAAG,cAA8B,KAAK;EACvC,kBAAkB,SAAS,YAAY;CACzC;CAEA,OACE,oBAAC,YAAD;EACE,cAAY,EAAE,eAAe;EAC7B,IAAI;GAAE,OAAO;GAAI,QAAQ;EAAG;EAC5B,MAAK;EACL,SAAS;EAET,UAAA,oBAACA,OAAD,EAAW,IAAI;GAAE,UAAU;GAAI,OAAO;EAAiB,EAAI,CAAA;CACjD,CAAA;AAEhB"}

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

@@ -1,5 +1,6 @@
 import { useWidgetEvents } from "../../hooks/useWidgetEvents.js";
 import "../../types/events.js";
+import { useWidgetConfig } from "../../providers/WidgetProvider/WidgetProvider.js";
 import { useChainOrderStore } from "../../stores/chains/ChainOrderStore.js";
 import { FormKeyHelper } from "../../stores/form/types.js";
 import { useFieldValues } from "../../stores/form/useFieldValues.js";
@@ -7,14 +8,18 @@ import { useDebouncedWatch } from "../../hooks/useDebouncedWatch.js";
 import { useNavigateBack } from "../../hooks/useNavigateBack.js";
 import { useListHeight } from "../../hooks/useListHeight.js";
 import { useTokenSelect } from "./useTokenSelect.js";
+import { toRecentToken } from "../../stores/recentTokens/utils.js";
+import { useRecentTokensStore } from "../../stores/recentTokens/RecentTokensStore.js";
+import { useRecentTokens } from "../../hooks/useRecentTokens.js";
 import { useTokenBalances } from "../../hooks/useTokenBalances.js";
 import { TokenNotFound } from "./TokenNotFound.js";
 import { VirtualizedTokenList } from "./VirtualizedTokenList.js";
-import { memo, useEffect, useRef } from "react";
+import { memo, useCallback, useEffect, useRef, useState } from "react";
 import { Box } from "@mui/material";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/TokenList/TokenList.tsx
 const TokenList = memo(({ formType, headerRef }) => {
+	const { hiddenUI } = useWidgetConfig();
 	const navigateBack = useNavigateBack();
 	const listParentRef = useRef(null);
 	const { listHeight } = useListHeight({
@@ -25,8 +30,46 @@ const TokenList = memo(({ formType, headerRef }) => {
 	const [selectedChainId, selectedTokenAddress] = useFieldValues(FormKeyHelper.getChainKey(formType), FormKeyHelper.getTokenKey(formType));
 	const isAllNetworks = useChainOrderStore((state) => state[`${formType}IsAllNetworks`]);
 	const [tokenSearchFilter] = useDebouncedWatch(320, "tokenSearchFilter");
-	const { tokens, withCategories, withPinnedTokens, isTokensLoading, isBalanceLoading, isSearchLoading } = useTokenBalances(selectedChainId, formType, isAllNetworks, tokenSearchFilter);
-	const handleTokenClick = useTokenSelect(formType, navigateBack);
+	const { tokens, withCategories, withPinnedTokens, isTokensLoading, isBalanceLoading, isSearchLoading, nativeHoisted } = useTokenBalances(selectedChainId, formType, isAllNetworks, tokenSearchFilter);
+	const recentScope = `${selectedChainId}-${!!isAllNetworks}`;
+	const [expandedScope, setExpandedScope] = useState();
+	const recentExpanded = expandedScope === recentScope;
+	const { tokens: tokensWithRecent, bandEntries, recentStartIndex, recentCount, totalRecentCount } = useRecentTokens(tokens, {
+		selectedChainId,
+		isAllNetworks,
+		search: tokenSearchFilter,
+		expanded: recentExpanded,
+		formType,
+		isTokensLoading,
+		nativeHoisted: !!nativeHoisted
+	});
+	const selectToken = useTokenSelect(formType, navigateBack);
+	const [addRecentToken, isRecentToken, clearRecentTokens] = useRecentTokensStore((state) => [
+		state.addRecentToken,
+		state.isRecentToken,
+		state.clearRecentTokens
+	]);
+	const tokensRef = useRef(tokensWithRecent);
+	tokensRef.current = tokensWithRecent;
+	const searchRef = useRef(tokenSearchFilter);
+	searchRef.current = tokenSearchFilter;
+	const handleTokenClick = useCallback((address, chainId) => {
+		if (chainId && !hiddenUI?.recentSearches && (searchRef.current?.trim() || isRecentToken(chainId, address))) {
+			const lower = address.toLowerCase();
+			const token = tokensRef.current.find((item) => item.chainId === chainId && item.address.toLowerCase() === lower);
+			if (token) addRecentToken(toRecentToken(token));
+		}
+		selectToken(address, chainId);
+	}, [
+		addRecentToken,
+		isRecentToken,
+		selectToken,
+		hiddenUI?.recentSearches
+	]);
+	const toggleRecentExpanded = useCallback(() => setExpandedScope((scope) => scope === recentScope ? void 0 : recentScope), [recentScope]);
+	const bandEntriesRef = useRef(bandEntries);
+	bandEntriesRef.current = bandEntries;
+	const clearRecentBand = useCallback(() => clearRecentTokens(bandEntriesRef.current), [clearRecentTokens]);
 	const showCategories = withCategories && !tokenSearchFilter && !isAllNetworks;
 	useEffect(() => {
 		const normalizedSearchFilter = tokenSearchFilter?.replaceAll("$", "");
@@ -46,7 +89,7 @@ const TokenList = memo(({ formType, headerRef }) => {
 			overflow: "auto"
 		},
 		children: [!tokens.length && !isTokensLoading && !isSearchLoading ? /* @__PURE__ */ jsx(TokenNotFound, { formType }) : null, /* @__PURE__ */ jsx(VirtualizedTokenList, {
-			tokens,
+			tokens: tokensWithRecent,
 			scrollElementRef: listParentRef,
 			chainId: selectedChainId,
 			isLoading: isTokensLoading || isSearchLoading,
@@ -55,7 +98,14 @@ const TokenList = memo(({ formType, headerRef }) => {
 			showPinnedTokens: withPinnedTokens,
 			onClick: handleTokenClick,
 			selectedTokenAddress,
-			isAllNetworks
+			isAllNetworks,
+			nativeHoisted: !!nativeHoisted,
+			recentStartIndex,
+			recentCount,
+			hiddenRecentCount: totalRecentCount - recentCount,
+			recentExpanded,
+			onToggleRecent: totalRecentCount > 4 ? toggleRecentExpanded : void 0,
+			onClearRecent: clearRecentBand
 		})]
 	});
 });

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

@@ -1 +1 @@
-{"version":3,"file":"TokenList.js","names":[],"sources":["../../../../src/components/TokenList/TokenList.tsx"],"sourcesContent":["import { Box } from '@mui/material'\nimport { type FC, memo, useEffect, useRef } from 'react'\nimport { useDebouncedWatch } from '../../hooks/useDebouncedWatch.js'\nimport { useListHeight } from '../../hooks/useListHeight.js'\nimport { useNavigateBack } from '../../hooks/useNavigateBack.js'\nimport { useTokenBalances } from '../../hooks/useTokenBalances.js'\nimport { useWidgetEvents } from '../../hooks/useWidgetEvents.js'\nimport { useChainOrderStore } from '../../stores/chains/ChainOrderStore.js'\nimport { FormKeyHelper } from '../../stores/form/types.js'\nimport { useFieldValues } from '../../stores/form/useFieldValues.js'\nimport { WidgetEvent } from '../../types/events.js'\nimport { TokenNotFound } from './TokenNotFound.js'\nimport type { TokenListProps } from './types.js'\nimport { useTokenSelect } from './useTokenSelect.js'\nimport { VirtualizedTokenList } from './VirtualizedTokenList.js'\n\nexport const TokenList: FC<TokenListProps> = memo(({ formType, headerRef }) => {\n  const navigateBack = useNavigateBack()\n  const listParentRef = useRef<HTMLUListElement | null>(null)\n  const { listHeight } = useListHeight({\n    listParentRef,\n    headerRef,\n  })\n\n  const emitter = useWidgetEvents()\n\n  const [selectedChainId, selectedTokenAddress] = useFieldValues(\n    FormKeyHelper.getChainKey(formType),\n    FormKeyHelper.getTokenKey(formType)\n  )\n\n  const isAllNetworks = useChainOrderStore(\n    (state) => state[`${formType}IsAllNetworks`]\n  )\n\n  const [tokenSearchFilter]: string[] = useDebouncedWatch(\n    320,\n    'tokenSearchFilter'\n  )\n\n  const {\n    tokens,\n    withCategories,\n    withPinnedTokens,\n    isTokensLoading,\n    isBalanceLoading,\n    isSearchLoading,\n  } = useTokenBalances(\n    selectedChainId,\n    formType,\n    isAllNetworks,\n    tokenSearchFilter\n  )\n\n  const handleTokenClick = useTokenSelect(formType, navigateBack)\n\n  const showCategories = withCategories && !tokenSearchFilter && !isAllNetworks\n\n  useEffect(() => {\n    const normalizedSearchFilter = tokenSearchFilter?.replaceAll('$', '')\n    if (normalizedSearchFilter) {\n      emitter.emit(WidgetEvent.TokenSearch, {\n        value: normalizedSearchFilter,\n        tokens,\n      })\n    }\n  }, [tokenSearchFilter, tokens, emitter])\n\n  return (\n    <Box ref={listParentRef} style={{ height: listHeight, overflow: 'auto' }}>\n      {!tokens.length && !isTokensLoading && !isSearchLoading ? (\n        <TokenNotFound formType={formType} />\n      ) : null}\n      <VirtualizedTokenList\n        tokens={tokens}\n        scrollElementRef={listParentRef}\n        chainId={selectedChainId}\n        isLoading={isTokensLoading || isSearchLoading}\n        isBalanceLoading={isBalanceLoading}\n        showCategories={showCategories}\n        showPinnedTokens={withPinnedTokens}\n        onClick={handleTokenClick}\n        selectedTokenAddress={selectedTokenAddress}\n        isAllNetworks={isAllNetworks}\n      />\n    </Box>\n  )\n})\n"],"mappings":";;;;;;;;;;;;;;;;AAgBA,MAAa,YAAgC,MAAM,EAAE,UAAU,gBAAgB;CAC7E,MAAM,eAAe,gBAAgB;CACrC,MAAM,gBAAgB,OAAgC,IAAI;CAC1D,MAAM,EAAE,eAAe,cAAc;EACnC;EACA;CACF,CAAC;CAED,MAAM,UAAU,gBAAgB;CAEhC,MAAM,CAAC,iBAAiB,wBAAwB,eAC9C,cAAc,YAAY,QAAQ,GAClC,cAAc,YAAY,QAAQ,CACpC;CAEA,MAAM,gBAAgB,oBACnB,UAAU,MAAM,GAAG,SAAS,eAC/B;CAEA,MAAM,CAAC,qBAA+B,kBACpC,KACA,mBACF;CAEA,MAAM,EACJ,QACA,gBACA,kBACA,iBACA,kBACA,oBACE,iBACF,iBACA,UACA,eACA,iBACF;CAEA,MAAM,mBAAmB,eAAe,UAAU,YAAY;CAE9D,MAAM,iBAAiB,kBAAkB,CAAC,qBAAqB,CAAC;CAEhE,gBAAgB;EACd,MAAM,yBAAyB,mBAAmB,WAAW,KAAK,EAAE;EACpE,IAAI,wBACF,QAAQ,KAAA,eAA8B;GACpC,OAAO;GACP;EACF,CAAC;CAEL,GAAG;EAAC;EAAmB;EAAQ;CAAO,CAAC;CAEvC,OACE,qBAAC,KAAD;EAAK,KAAK;EAAe,OAAO;GAAE,QAAQ;GAAY,UAAU;EAAO;EAAvE,UAAA,CACG,CAAC,OAAO,UAAU,CAAC,mBAAmB,CAAC,kBACtC,oBAAC,eAAD,EAAyB,SAAW,CAAA,IAClC,MACJ,oBAAC,sBAAD;GACU;GACR,kBAAkB;GAClB,SAAS;GACT,WAAW,mBAAmB;GACZ;GACF;GAChB,kBAAkB;GAClB,SAAS;GACa;GACP;EAChB,CAAA,CACE;;AAET,CAAC"}
+{"version":3,"file":"TokenList.js","names":[],"sources":["../../../../src/components/TokenList/TokenList.tsx"],"sourcesContent":["import { Box } from '@mui/material'\nimport { type FC, memo, useCallback, useEffect, useRef, useState } from 'react'\nimport { useDebouncedWatch } from '../../hooks/useDebouncedWatch.js'\nimport { useListHeight } from '../../hooks/useListHeight.js'\nimport { useNavigateBack } from '../../hooks/useNavigateBack.js'\nimport { useRecentTokens } from '../../hooks/useRecentTokens.js'\nimport { useTokenBalances } from '../../hooks/useTokenBalances.js'\nimport { useWidgetEvents } from '../../hooks/useWidgetEvents.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport { useChainOrderStore } from '../../stores/chains/ChainOrderStore.js'\nimport { FormKeyHelper } from '../../stores/form/types.js'\nimport { useFieldValues } from '../../stores/form/useFieldValues.js'\nimport { useRecentTokensStore } from '../../stores/recentTokens/RecentTokensStore.js'\nimport { toRecentToken } from '../../stores/recentTokens/utils.js'\nimport { WidgetEvent } from '../../types/events.js'\nimport { collapsedRecentCount } from '../../utils/recentTokens.js'\nimport { TokenNotFound } from './TokenNotFound.js'\nimport type { TokenListProps } from './types.js'\nimport { useTokenSelect } from './useTokenSelect.js'\nimport { VirtualizedTokenList } from './VirtualizedTokenList.js'\n\nexport const TokenList: FC<TokenListProps> = memo(({ formType, headerRef }) => {\n  const { hiddenUI } = useWidgetConfig()\n  const navigateBack = useNavigateBack()\n  const listParentRef = useRef<HTMLUListElement | null>(null)\n  const { listHeight } = useListHeight({\n    listParentRef,\n    headerRef,\n  })\n\n  const emitter = useWidgetEvents()\n\n  const [selectedChainId, selectedTokenAddress] = useFieldValues(\n    FormKeyHelper.getChainKey(formType),\n    FormKeyHelper.getTokenKey(formType)\n  )\n\n  const isAllNetworks = useChainOrderStore(\n    (state) => state[`${formType}IsAllNetworks`]\n  )\n\n  const [tokenSearchFilter]: string[] = useDebouncedWatch(\n    320,\n    'tokenSearchFilter'\n  )\n\n  const {\n    tokens,\n    withCategories,\n    withPinnedTokens,\n    isTokensLoading,\n    isBalanceLoading,\n    isSearchLoading,\n    nativeHoisted,\n  } = useTokenBalances(\n    selectedChainId,\n    formType,\n    isAllNetworks,\n    tokenSearchFilter\n  )\n\n  // Keyed by scope, so a chain switch collapses the band in the same render.\n  const recentScope = `${selectedChainId}-${!!isAllNetworks}`\n  const [expandedScope, setExpandedScope] = useState<string>()\n  const recentExpanded = expandedScope === recentScope\n\n  const {\n    tokens: tokensWithRecent,\n    bandEntries,\n    recentStartIndex,\n    recentCount,\n    totalRecentCount,\n  } = useRecentTokens(tokens, {\n    selectedChainId,\n    isAllNetworks,\n    search: tokenSearchFilter,\n    expanded: recentExpanded,\n    formType,\n    isTokensLoading,\n    nativeHoisted: !!nativeHoisted,\n  })\n\n  const selectToken = useTokenSelect(formType, navigateBack)\n  const [addRecentToken, isRecentToken, clearRecentTokens] =\n    useRecentTokensStore((state) => [\n      state.addRecentToken,\n      state.isRecentToken,\n      state.clearRecentTokens,\n    ])\n\n  // Refs keep onClick stable across refetches and keystrokes for memoized rows.\n  const tokensRef = useRef(tokensWithRecent)\n  tokensRef.current = tokensWithRecent\n  const searchRef = useRef(tokenSearchFilter)\n  searchRef.current = tokenSearchFilter\n\n  const handleTokenClick = useCallback(\n    (address: string, chainId?: number) => {\n      if (\n        chainId &&\n        !hiddenUI?.recentSearches &&\n        (searchRef.current?.trim() || isRecentToken(chainId, address))\n      ) {\n        // A band row is either a copy of the live row or has no live row.\n        const lower = address.toLowerCase()\n        const token = tokensRef.current.find(\n          (item) =>\n            item.chainId === chainId && item.address.toLowerCase() === lower\n        )\n        if (token) {\n          addRecentToken(toRecentToken(token))\n        }\n      }\n      selectToken(address, chainId)\n    },\n    [addRecentToken, isRecentToken, selectToken, hiddenUI?.recentSearches]\n  )\n\n  const toggleRecentExpanded = useCallback(\n    () =>\n      setExpandedScope((scope) =>\n        scope === recentScope ? undefined : recentScope\n      ),\n    [recentScope]\n  )\n\n  // The band filters on chain, config and pins; Clear takes its exact entries.\n  const bandEntriesRef = useRef(bandEntries)\n  bandEntriesRef.current = bandEntries\n  const clearRecentBand = useCallback(\n    () => clearRecentTokens(bandEntriesRef.current),\n    [clearRecentTokens]\n  )\n\n  const showCategories = withCategories && !tokenSearchFilter && !isAllNetworks\n\n  useEffect(() => {\n    const normalizedSearchFilter = tokenSearchFilter?.replaceAll('$', '')\n    if (normalizedSearchFilter) {\n      emitter.emit(WidgetEvent.TokenSearch, {\n        value: normalizedSearchFilter,\n        tokens,\n      })\n    }\n  }, [tokenSearchFilter, tokens, emitter])\n\n  return (\n    <Box ref={listParentRef} style={{ height: listHeight, overflow: 'auto' }}>\n      {!tokens.length && !isTokensLoading && !isSearchLoading ? (\n        <TokenNotFound formType={formType} />\n      ) : null}\n      <VirtualizedTokenList\n        tokens={tokensWithRecent}\n        scrollElementRef={listParentRef}\n        chainId={selectedChainId}\n        isLoading={isTokensLoading || isSearchLoading}\n        isBalanceLoading={isBalanceLoading}\n        showCategories={showCategories}\n        showPinnedTokens={withPinnedTokens}\n        onClick={handleTokenClick}\n        selectedTokenAddress={selectedTokenAddress}\n        isAllNetworks={isAllNetworks}\n        nativeHoisted={!!nativeHoisted}\n        recentStartIndex={recentStartIndex}\n        recentCount={recentCount}\n        hiddenRecentCount={totalRecentCount - recentCount}\n        recentExpanded={recentExpanded}\n        onToggleRecent={\n          totalRecentCount > collapsedRecentCount\n            ? toggleRecentExpanded\n            : undefined\n        }\n        onClearRecent={clearRecentBand}\n      />\n    </Box>\n  )\n})\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AAqBA,MAAa,YAAgC,MAAM,EAAE,UAAU,gBAAgB;CAC7E,MAAM,EAAE,aAAa,gBAAgB;CACrC,MAAM,eAAe,gBAAgB;CACrC,MAAM,gBAAgB,OAAgC,IAAI;CAC1D,MAAM,EAAE,eAAe,cAAc;EACnC;EACA;CACF,CAAC;CAED,MAAM,UAAU,gBAAgB;CAEhC,MAAM,CAAC,iBAAiB,wBAAwB,eAC9C,cAAc,YAAY,QAAQ,GAClC,cAAc,YAAY,QAAQ,CACpC;CAEA,MAAM,gBAAgB,oBACnB,UAAU,MAAM,GAAG,SAAS,eAC/B;CAEA,MAAM,CAAC,qBAA+B,kBACpC,KACA,mBACF;CAEA,MAAM,EACJ,QACA,gBACA,kBACA,iBACA,kBACA,iBACA,kBACE,iBACF,iBACA,UACA,eACA,iBACF;CAGA,MAAM,cAAc,GAAG,gBAAgB,GAAG,CAAC,CAAC;CAC5C,MAAM,CAAC,eAAe,oBAAoB,SAAiB;CAC3D,MAAM,iBAAiB,kBAAkB;CAEzC,MAAM,EACJ,QAAQ,kBACR,aACA,kBACA,aACA,qBACE,gBAAgB,QAAQ;EAC1B;EACA;EACA,QAAQ;EACR,UAAU;EACV;EACA;EACA,eAAe,CAAC,CAAC;CACnB,CAAC;CAED,MAAM,cAAc,eAAe,UAAU,YAAY;CACzD,MAAM,CAAC,gBAAgB,eAAe,qBACpC,sBAAsB,UAAU;EAC9B,MAAM;EACN,MAAM;EACN,MAAM;CACR,CAAC;CAGH,MAAM,YAAY,OAAO,gBAAgB;CACzC,UAAU,UAAU;CACpB,MAAM,YAAY,OAAO,iBAAiB;CAC1C,UAAU,UAAU;CAEpB,MAAM,mBAAmB,aACtB,SAAiB,YAAqB;EACrC,IACE,WACA,CAAC,UAAU,mBACV,UAAU,SAAS,KAAK,KAAK,cAAc,SAAS,OAAO,IAC5D;GAEA,MAAM,QAAQ,QAAQ,YAAY;GAClC,MAAM,QAAQ,UAAU,QAAQ,MAC7B,SACC,KAAK,YAAY,WAAW,KAAK,QAAQ,YAAY,MAAM,KAC/D;GACA,IAAI,OACF,eAAe,cAAc,KAAK,CAAC;EAEvC;EACA,YAAY,SAAS,OAAO;CAC9B,GACA;EAAC;EAAgB;EAAe;EAAa,UAAU;CAAc,CACvE;CAEA,MAAM,uBAAuB,kBAEzB,kBAAkB,UAChB,UAAU,cAAc,KAAA,IAAY,WACtC,GACF,CAAC,WAAW,CACd;CAGA,MAAM,iBAAiB,OAAO,WAAW;CACzC,eAAe,UAAU;CACzB,MAAM,kBAAkB,kBAChB,kBAAkB,eAAe,OAAO,GAC9C,CAAC,iBAAiB,CACpB;CAEA,MAAM,iBAAiB,kBAAkB,CAAC,qBAAqB,CAAC;CAEhE,gBAAgB;EACd,MAAM,yBAAyB,mBAAmB,WAAW,KAAK,EAAE;EACpE,IAAI,wBACF,QAAQ,KAAA,eAA8B;GACpC,OAAO;GACP;EACF,CAAC;CAEL,GAAG;EAAC;EAAmB;EAAQ;CAAO,CAAC;CAEvC,OACE,qBAAC,KAAD;EAAK,KAAK;EAAe,OAAO;GAAE,QAAQ;GAAY,UAAU;EAAO;EAAvE,UAAA,CACG,CAAC,OAAO,UAAU,CAAC,mBAAmB,CAAC,kBACtC,oBAAC,eAAD,EAAyB,SAAW,CAAA,IAClC,MACJ,oBAAC,sBAAD;GACE,QAAQ;GACR,kBAAkB;GAClB,SAAS;GACT,WAAW,mBAAmB;GACZ;GACF;GAChB,kBAAkB;GAClB,SAAS;GACa;GACP;GACf,eAAe,CAAC,CAAC;GACC;GACL;GACb,mBAAmB,mBAAmB;GACtB;GAChB,gBACE,mBAAA,IACI,uBACA,KAAA;GAEN,eAAe;EAChB,CAAA,CACE;;AAET,CAAC"}

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

@@ -6,6 +6,7 @@ import { IconButton as IconButton$1, ListItem as ListItem$1 } from "./TokenList.
 import { useLongPress } from "../../hooks/useLongPress.js";
 import { ListItemButton as ListItemButton$1 } from "../ListItem/ListItemButton.js";
 import { PinTokenButton } from "./PinTokenButton.js";
+import { RemoveRecentTokenButton } from "./RemoveRecentTokenButton.js";
 import { ChainType } from "@lifi/sdk";
 import { memo, useMemo, useRef, useState } from "react";
 import { Avatar, Box, ListItemAvatar, ListItemText, Skeleton, Slide, Tooltip, Typography, listItemSecondaryActionClasses } from "@mui/material";
@@ -128,7 +129,8 @@ const TokenListItemButton = memo(({ onClick, token, chain, chainName, isBalanceL
 		selected,
 		sx: {
 			height: 60,
-			marginBottom: "4px"
+			marginBottom: "4px",
+			flex: "none"
 		},
 		children: [
 			/* @__PURE__ */ jsx(ListItemAvatar, { children: chain ? /* @__PURE__ */ jsx(TokenAvatar, {
@@ -175,15 +177,22 @@ const TokenListItemButton = memo(({ onClick, token, chain, chainName, isBalanceL
 							style: { position: "absolute" },
 							appear: false,
 							mountOnEnter: true,
-							children: /* @__PURE__ */ jsxs(Box, { children: [/* @__PURE__ */ jsx(OpenTokenDetailsButton, {
-								tokenAddress: token.address,
-								withoutContractAddress,
-								chainId: token.chainId,
-								onClick: onShowTokenDetails
-							}), /* @__PURE__ */ jsx(PinTokenButton, {
-								chainId: token.chainId,
-								tokenAddress: token.address
-							})] })
+							children: /* @__PURE__ */ jsxs(Box, { children: [
+								/* @__PURE__ */ jsx(OpenTokenDetailsButton, {
+									tokenAddress: token.address,
+									withoutContractAddress,
+									chainId: token.chainId,
+									onClick: onShowTokenDetails
+								}),
+								/* @__PURE__ */ jsx(PinTokenButton, {
+									chainId: token.chainId,
+									tokenAddress: token.address
+								}),
+								token.recent ? /* @__PURE__ */ jsx(RemoveRecentTokenButton, {
+									chainId: token.chainId,
+									tokenAddress: token.address
+								}) : null
+							] })
 						})
 					})]
 				}) : /* @__PURE__ */ jsxs(Box, {
@@ -222,15 +231,22 @@ const TokenListItemButton = memo(({ onClick, token, chain, chainName, isBalanceL
 									pt: .125
 								},
 								children: shortenAddress(token.address)
-							}), /* @__PURE__ */ jsxs(Box, { children: [/* @__PURE__ */ jsx(OpenTokenDetailsButton, {
-								tokenAddress: token.address,
-								withoutContractAddress,
-								chainId: token.chainId,
-								onClick: onShowTokenDetails
-							}), /* @__PURE__ */ jsx(PinTokenButton, {
-								chainId: token.chainId,
-								tokenAddress: token.address
-							})] })]
+							}), /* @__PURE__ */ jsxs(Box, { children: [
+								/* @__PURE__ */ jsx(OpenTokenDetailsButton, {
+									tokenAddress: token.address,
+									withoutContractAddress,
+									chainId: token.chainId,
+									onClick: onShowTokenDetails
+								}),
+								/* @__PURE__ */ jsx(PinTokenButton, {
+									chainId: token.chainId,
+									tokenAddress: token.address
+								}),
+								token.recent ? /* @__PURE__ */ jsx(RemoveRecentTokenButton, {
+									chainId: token.chainId,
+									tokenAddress: token.address
+								}) : null
+							] })]
 						})
 					})]
 				})

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

@@ -1 +1 @@
-{"version":3,"file":"TokenListItem.js","names":["ListItem","IconButton","InfoOutlinedIcon","ListItemButton"],"sources":["../../../../src/components/TokenList/TokenListItem.tsx"],"sourcesContent":["import type { StaticToken } from '@lifi/sdk'\nimport { ChainType } from '@lifi/sdk'\nimport InfoOutlinedIcon from '@mui/icons-material/InfoOutlined'\nimport ReportRoundedIcon from '@mui/icons-material/ReportRounded'\nimport VerifiedIcon from '@mui/icons-material/Verified'\nimport {\n  Avatar,\n  Box,\n  ListItemAvatar,\n  ListItemText,\n  listItemSecondaryActionClasses,\n  Skeleton,\n  Slide,\n  Tooltip,\n  Typography,\n} from '@mui/material'\nimport type { JSX, MouseEventHandler } from 'react'\nimport { memo, useMemo, useRef, useState } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useLongPress } from '../../hooks/useLongPress.js'\nimport { formatTokenAmount, formatTokenPrice } from '../../utils/format.js'\nimport { getTokenVerificationProvider } from '../../utils/token.js'\nimport { shortenAddress } from '../../utils/wallet.js'\nimport { TokenAvatar } from '../Avatar/TokenAvatar.js'\nimport { ListItemButton } from '../ListItem/ListItemButton.js'\nimport { PinTokenButton } from './PinTokenButton.js'\nimport { IconButton, ListItem } from './TokenList.style.js'\nimport type {\n  TokenListItemAvatarProps,\n  TokenListItemButtonProps,\n  TokenListItemProps,\n} from './types.js'\n\nexport const TokenListItem: React.FC<TokenListItemProps> = memo(\n  ({\n    onClick,\n    size,\n    start,\n    token,\n    chain,\n    chainName,\n    isBalanceLoading,\n    startAdornment,\n    endAdornment,\n    selected,\n    onShowTokenDetails,\n  }) => {\n    return (\n      <ListItem\n        style={{\n          height: `${size}px`,\n          transform: `translateY(${start}px)`,\n          padding: 0,\n        }}\n      >\n        {startAdornment}\n        <TokenListItemButton\n          token={token}\n          isBalanceLoading={isBalanceLoading}\n          onClick={onClick}\n          chain={chain}\n          chainName={chainName}\n          selected={selected}\n          onShowTokenDetails={onShowTokenDetails}\n        />\n        {endAdornment}\n      </ListItem>\n    )\n  }\n)\n\nconst TokenListItemAvatar = memo(({ token }: TokenListItemAvatarProps) => {\n  const [isImageLoading, setIsImageLoading] = useState(true)\n\n  return (\n    <Avatar\n      src={token.logoURI}\n      alt={token.symbol}\n      sx={(theme) =>\n        isImageLoading ? { bgcolor: theme.vars.palette.grey[300] } : null\n      }\n      onLoad={() => setIsImageLoading(false)}\n    >\n      {token.symbol?.[0]}\n    </Avatar>\n  )\n})\n\ninterface OpenTokenDetailsButtonProps {\n  tokenAddress: string | undefined\n  withoutContractAddress: boolean\n  chainId: number\n  onClick: (\n    tokenAddress: string,\n    withoutContractAddress: boolean,\n    chainId: number\n  ) => void\n}\n\nconst OpenTokenDetailsButton = ({\n  tokenAddress,\n  withoutContractAddress,\n  chainId,\n  onClick,\n}: OpenTokenDetailsButtonProps) => {\n  if (!tokenAddress) {\n    return null\n  }\n  return (\n    <IconButton\n      size=\"small\"\n      onClick={(e) => {\n        e.stopPropagation()\n        e.currentTarget.blur() // Remove focus to prevent accessibility issues when opening drawer\n        onClick(tokenAddress, withoutContractAddress, chainId)\n      }}\n    >\n      <InfoOutlinedIcon />\n    </IconButton>\n  )\n}\n\nconst TokenListItemButton: React.FC<TokenListItemButtonProps> = memo(\n  ({\n    onClick,\n    token,\n    chain,\n    chainName,\n    isBalanceLoading,\n    selected,\n    onShowTokenDetails,\n  }) => {\n    const { t } = useTranslation()\n    const container = useRef(null)\n    const timeoutId = useRef<ReturnType<typeof setTimeout>>(undefined)\n    const [showAddress, setShowAddress] = useState(false)\n\n    const withoutContractAddress = chain?.chainType === ChainType.UTXO\n\n    const onMouseEnter = () => {\n      timeoutId.current = setTimeout(() => {\n        if (token.address) {\n          setShowAddress(true)\n        }\n      }, 350)\n    }\n\n    const onMouseLeave = () => {\n      clearTimeout(timeoutId.current)\n      if (showAddress) {\n        setShowAddress(false)\n      }\n    }\n\n    const handleClick: MouseEventHandler<HTMLDivElement> = (e) => {\n      e.stopPropagation()\n      onClick?.(token.address, token.chainId)\n    }\n\n    const tokenAmount = useMemo(\n      () => formatTokenAmount(token.amount, token.decimals),\n      [token.amount, token.decimals]\n    )\n\n    const tokenPrice = useMemo(\n      () => formatTokenPrice(token.amount, token.priceUSD, token.decimals),\n      [token.amount, token.priceUSD, token.decimals]\n    )\n\n    const longPressEvents = useLongPress(() =>\n      onShowTokenDetails(token.address, withoutContractAddress, token.chainId)\n    )\n\n    // The native token is badged ahead of any verdict: the provider screens\n    // the native-address convention and calls it a scam on some chains.\n    // A token the main list or the integrator vouches for needs no warning;\n    // anything else without a clean verdict keeps the amber one.\n    let verificationBadge:\n      | { Icon: typeof VerifiedIcon; color: string; title: string }\n      | undefined\n    if (token.native) {\n      verificationBadge = {\n        Icon: VerifiedIcon,\n        color: 'info.main',\n        title: chainName\n          ? t('tooltip.tokenNativeOnChain', {\n              tokenSymbol: token.symbol,\n              chainName,\n            })\n          : t('tooltip.tokenNative', { tokenSymbol: token.symbol }),\n      }\n    } else if (token.verificationStatus === 'flagged') {\n      verificationBadge = {\n        Icon: ReportRoundedIcon,\n        color: 'error.main',\n        title: t('warning.message.tokenFlagged', {\n          tokenSymbol: token.symbol,\n        }),\n      }\n    } else if (token.verificationStatus === 'verified') {\n      const provider = getTokenVerificationProvider(token)\n      verificationBadge = {\n        Icon: VerifiedIcon,\n        color: 'success.main',\n        title: provider\n          ? t('tooltip.tokenVerifiedByProvider', {\n              tokenSymbol: token.symbol,\n              provider,\n            })\n          : t('tooltip.tokenVerified', { tokenSymbol: token.symbol }),\n      }\n    } else if (\n      token.verificationStatus === 'unverified' &&\n      !token.listed &&\n      !token.verified\n    ) {\n      verificationBadge = {\n        Icon: ReportRoundedIcon,\n        color: 'warning.main',\n        title: t('warning.message.tokenUnverifiedByProvider', {\n          tokenSymbol: token.symbol,\n        }),\n      }\n    } else if (!token.verificationStatus && !token.listed && !token.verified) {\n      verificationBadge = {\n        Icon: ReportRoundedIcon,\n        color: 'warning.main',\n        title: t('warning.message.tokenUnverified'),\n      }\n    }\n\n    return (\n      <ListItemButton\n        onClick={handleClick}\n        onMouseEnter={onMouseEnter}\n        onMouseLeave={onMouseLeave}\n        {...longPressEvents}\n        dense\n        selected={selected}\n        sx={{\n          height: 60,\n          marginBottom: '4px',\n        }}\n      >\n        <ListItemAvatar>\n          {chain ? (\n            <TokenAvatar\n              token={token as StaticToken}\n              chain={chain}\n              tokenAvatarSize={40}\n              chainAvatarSize={16}\n            />\n          ) : (\n            <TokenListItemAvatar token={token} />\n          )}\n        </ListItemAvatar>\n        <ListItemText\n          primary={\n            <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>\n              {token.symbol}\n              {verificationBadge && (\n                <Tooltip title={verificationBadge.title} placement=\"top\" arrow>\n                  <verificationBadge.Icon\n                    sx={{\n                      display: 'flex',\n                      fontSize: 16,\n                      color: verificationBadge.color,\n                      cursor: 'help',\n                    }}\n                  />\n                </Tooltip>\n              )}\n            </Box>\n          }\n          slotProps={{\n            secondary: {\n              component: 'div',\n            },\n          }}\n          secondary={\n            withoutContractAddress ? (\n              <Box\n                ref={container}\n                sx={{\n                  height: 20,\n                  display: 'flex',\n                }}\n              >\n                <Box\n                  sx={{\n                    pt: 0.25,\n                  }}\n                >\n                  {token.name}\n                </Box>\n                <Box\n                  sx={{\n                    position: 'relative',\n                  }}\n                >\n                  <Slide\n                    direction=\"up\"\n                    in={showAddress}\n                    container={container.current}\n                    style={{\n                      position: 'absolute',\n                    }}\n                    appear={false}\n                    mountOnEnter\n                  >\n                    <Box>\n                      <OpenTokenDetailsButton\n                        tokenAddress={token.address}\n                        withoutContractAddress={withoutContractAddress}\n                        chainId={token.chainId}\n                        onClick={onShowTokenDetails}\n                      />\n                      <PinTokenButton\n                        chainId={token.chainId}\n                        tokenAddress={token.address}\n                      />\n                    </Box>\n                  </Slide>\n                </Box>\n              </Box>\n            ) : (\n              <Box\n                ref={container}\n                sx={{\n                  position: 'relative',\n                  height: 20,\n                }}\n              >\n                <Slide\n                  direction=\"down\"\n                  in={!showAddress}\n                  container={container.current}\n                  style={{\n                    position: 'absolute',\n                  }}\n                  appear={false}\n                >\n                  <Box\n                    sx={{\n                      pt: 0.25,\n                    }}\n                  >\n                    {token.name}\n                  </Box>\n                </Slide>\n                <Slide\n                  direction=\"up\"\n                  in={showAddress}\n                  container={container.current}\n                  style={{\n                    position: 'absolute',\n                  }}\n                  appear={false}\n                  mountOnEnter\n                >\n                  <Box\n                    sx={{\n                      display: 'flex',\n                      alignItems: 'center',\n                      gap: 0.5,\n                    }}\n                  >\n                    <Box\n                      sx={{\n                        display: 'flex',\n                        alignItems: 'center',\n                        pt: 0.125,\n                      }}\n                    >\n                      {shortenAddress(token.address)}\n                    </Box>\n                    <Box>\n                      <OpenTokenDetailsButton\n                        tokenAddress={token.address}\n                        withoutContractAddress={withoutContractAddress}\n                        chainId={token.chainId}\n                        onClick={onShowTokenDetails}\n                      />\n                      <PinTokenButton\n                        chainId={token.chainId}\n                        tokenAddress={token.address}\n                      />\n                    </Box>\n                  </Box>\n                </Slide>\n              </Box>\n            )\n          }\n        />\n        {isBalanceLoading ? (\n          <TokenAmountSkeleton />\n        ) : (\n          <Box sx={{ textAlign: 'right' }}>\n            {token.amount ? (\n              <Typography\n                noWrap\n                sx={{\n                  fontWeight: 600,\n                }}\n                title={tokenAmount}\n              >\n                {t('format.tokenAmount', {\n                  value: tokenAmount,\n                })}\n              </Typography>\n            ) : null}\n            {token.amount && token.priceUSD ? (\n              <Typography\n                data-price={token.priceUSD}\n                sx={{\n                  fontWeight: 500,\n                  fontSize: 12,\n                  color: 'text.secondary',\n                }}\n              >\n                {t('format.currency', {\n                  value: tokenPrice,\n                })}\n              </Typography>\n            ) : null}\n          </Box>\n        )}\n      </ListItemButton>\n    )\n  }\n)\n\nexport const TokenListItemSkeleton = (): JSX.Element => {\n  return (\n    <ListItem\n      secondaryAction={<TokenAmountSkeleton />}\n      disablePadding\n      sx={(theme) => ({\n        position: 'relative',\n        flexDirection: 'row',\n        alignItems: 'center',\n        padding: 0,\n        [`& .${listItemSecondaryActionClasses.root}`]: {\n          right: theme.spacing(1.5),\n        },\n      })}\n    >\n      <ListItemAvatar>\n        <Skeleton\n          variant=\"circular\"\n          width={40}\n          height={40}\n          sx={{ marginLeft: 1.5, marginRight: 2 }}\n        />\n      </ListItemAvatar>\n      <ListItemText\n        primary={<Skeleton variant=\"text\" width={56} height={24} />}\n        secondary={<Skeleton variant=\"text\" width={96} height={16} />}\n      />\n    </ListItem>\n  )\n}\n\nconst TokenAmountSkeleton: React.FC = () => {\n  return (\n    <Box\n      sx={{\n        display: 'flex',\n        flexDirection: 'column',\n        alignItems: 'flex-end',\n      }}\n    >\n      <Skeleton variant=\"text\" width={56} height={24} />\n      <Skeleton variant=\"text\" width={48} height={16} />\n    </Box>\n  )\n}\n"],"mappings":"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"}
+{"version":3,"file":"TokenListItem.js","names":["ListItem","IconButton","InfoOutlinedIcon","ListItemButton"],"sources":["../../../../src/components/TokenList/TokenListItem.tsx"],"sourcesContent":["import type { StaticToken } from '@lifi/sdk'\nimport { ChainType } from '@lifi/sdk'\nimport InfoOutlinedIcon from '@mui/icons-material/InfoOutlined'\nimport ReportRoundedIcon from '@mui/icons-material/ReportRounded'\nimport VerifiedIcon from '@mui/icons-material/Verified'\nimport {\n  Avatar,\n  Box,\n  ListItemAvatar,\n  ListItemText,\n  listItemSecondaryActionClasses,\n  Skeleton,\n  Slide,\n  Tooltip,\n  Typography,\n} from '@mui/material'\nimport type { JSX, MouseEventHandler } from 'react'\nimport { memo, useMemo, useRef, useState } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useLongPress } from '../../hooks/useLongPress.js'\nimport { formatTokenAmount, formatTokenPrice } from '../../utils/format.js'\nimport { getTokenVerificationProvider } from '../../utils/token.js'\nimport { shortenAddress } from '../../utils/wallet.js'\nimport { TokenAvatar } from '../Avatar/TokenAvatar.js'\nimport { ListItemButton } from '../ListItem/ListItemButton.js'\nimport { PinTokenButton } from './PinTokenButton.js'\nimport { RemoveRecentTokenButton } from './RemoveRecentTokenButton.js'\nimport { IconButton, ListItem } from './TokenList.style.js'\nimport type {\n  TokenListItemAvatarProps,\n  TokenListItemButtonProps,\n  TokenListItemProps,\n} from './types.js'\n\nexport const TokenListItem: React.FC<TokenListItemProps> = memo(\n  ({\n    onClick,\n    size,\n    start,\n    token,\n    chain,\n    chainName,\n    isBalanceLoading,\n    startAdornment,\n    endAdornment,\n    selected,\n    onShowTokenDetails,\n  }) => {\n    return (\n      <ListItem\n        style={{\n          height: `${size}px`,\n          transform: `translateY(${start}px)`,\n          padding: 0,\n        }}\n      >\n        {startAdornment}\n        <TokenListItemButton\n          token={token}\n          isBalanceLoading={isBalanceLoading}\n          onClick={onClick}\n          chain={chain}\n          chainName={chainName}\n          selected={selected}\n          onShowTokenDetails={onShowTokenDetails}\n        />\n        {endAdornment}\n      </ListItem>\n    )\n  }\n)\n\nconst TokenListItemAvatar = memo(({ token }: TokenListItemAvatarProps) => {\n  const [isImageLoading, setIsImageLoading] = useState(true)\n\n  return (\n    <Avatar\n      src={token.logoURI}\n      alt={token.symbol}\n      sx={(theme) =>\n        isImageLoading ? { bgcolor: theme.vars.palette.grey[300] } : null\n      }\n      onLoad={() => setIsImageLoading(false)}\n    >\n      {token.symbol?.[0]}\n    </Avatar>\n  )\n})\n\ninterface OpenTokenDetailsButtonProps {\n  tokenAddress: string | undefined\n  withoutContractAddress: boolean\n  chainId: number\n  onClick: (\n    tokenAddress: string,\n    withoutContractAddress: boolean,\n    chainId: number\n  ) => void\n}\n\nconst OpenTokenDetailsButton = ({\n  tokenAddress,\n  withoutContractAddress,\n  chainId,\n  onClick,\n}: OpenTokenDetailsButtonProps) => {\n  if (!tokenAddress) {\n    return null\n  }\n  return (\n    <IconButton\n      size=\"small\"\n      onClick={(e) => {\n        e.stopPropagation()\n        e.currentTarget.blur() // Remove focus to prevent accessibility issues when opening drawer\n        onClick(tokenAddress, withoutContractAddress, chainId)\n      }}\n    >\n      <InfoOutlinedIcon />\n    </IconButton>\n  )\n}\n\nconst TokenListItemButton: React.FC<TokenListItemButtonProps> = memo(\n  ({\n    onClick,\n    token,\n    chain,\n    chainName,\n    isBalanceLoading,\n    selected,\n    onShowTokenDetails,\n  }) => {\n    const { t } = useTranslation()\n    const container = useRef(null)\n    const timeoutId = useRef<ReturnType<typeof setTimeout>>(undefined)\n    const [showAddress, setShowAddress] = useState(false)\n\n    const withoutContractAddress = chain?.chainType === ChainType.UTXO\n\n    const onMouseEnter = () => {\n      timeoutId.current = setTimeout(() => {\n        if (token.address) {\n          setShowAddress(true)\n        }\n      }, 350)\n    }\n\n    const onMouseLeave = () => {\n      clearTimeout(timeoutId.current)\n      if (showAddress) {\n        setShowAddress(false)\n      }\n    }\n\n    const handleClick: MouseEventHandler<HTMLDivElement> = (e) => {\n      e.stopPropagation()\n      onClick?.(token.address, token.chainId)\n    }\n\n    const tokenAmount = useMemo(\n      () => formatTokenAmount(token.amount, token.decimals),\n      [token.amount, token.decimals]\n    )\n\n    const tokenPrice = useMemo(\n      () => formatTokenPrice(token.amount, token.priceUSD, token.decimals),\n      [token.amount, token.priceUSD, token.decimals]\n    )\n\n    const longPressEvents = useLongPress(() =>\n      onShowTokenDetails(token.address, withoutContractAddress, token.chainId)\n    )\n\n    // The native token is badged ahead of any verdict: the provider screens\n    // the native-address convention and calls it a scam on some chains.\n    // A token the main list or the integrator vouches for needs no warning;\n    // anything else without a clean verdict keeps the amber one.\n    let verificationBadge:\n      | { Icon: typeof VerifiedIcon; color: string; title: string }\n      | undefined\n    if (token.native) {\n      verificationBadge = {\n        Icon: VerifiedIcon,\n        color: 'info.main',\n        title: chainName\n          ? t('tooltip.tokenNativeOnChain', {\n              tokenSymbol: token.symbol,\n              chainName,\n            })\n          : t('tooltip.tokenNative', { tokenSymbol: token.symbol }),\n      }\n    } else if (token.verificationStatus === 'flagged') {\n      verificationBadge = {\n        Icon: ReportRoundedIcon,\n        color: 'error.main',\n        title: t('warning.message.tokenFlagged', {\n          tokenSymbol: token.symbol,\n        }),\n      }\n    } else if (token.verificationStatus === 'verified') {\n      const provider = getTokenVerificationProvider(token)\n      verificationBadge = {\n        Icon: VerifiedIcon,\n        color: 'success.main',\n        title: provider\n          ? t('tooltip.tokenVerifiedByProvider', {\n              tokenSymbol: token.symbol,\n              provider,\n            })\n          : t('tooltip.tokenVerified', { tokenSymbol: token.symbol }),\n      }\n    } else if (\n      token.verificationStatus === 'unverified' &&\n      !token.listed &&\n      !token.verified\n    ) {\n      verificationBadge = {\n        Icon: ReportRoundedIcon,\n        color: 'warning.main',\n        title: t('warning.message.tokenUnverifiedByProvider', {\n          tokenSymbol: token.symbol,\n        }),\n      }\n    } else if (!token.verificationStatus && !token.listed && !token.verified) {\n      verificationBadge = {\n        Icon: ReportRoundedIcon,\n        color: 'warning.main',\n        title: t('warning.message.tokenUnverified'),\n      }\n    }\n\n    return (\n      <ListItemButton\n        onClick={handleClick}\n        onMouseEnter={onMouseEnter}\n        onMouseLeave={onMouseLeave}\n        {...longPressEvents}\n        dense\n        selected={selected}\n        sx={{\n          height: 60,\n          marginBottom: '4px',\n          // Not a flex-grow item: a band slot's spare height must not stretch the card.\n          flex: 'none',\n        }}\n      >\n        <ListItemAvatar>\n          {chain ? (\n            <TokenAvatar\n              token={token as StaticToken}\n              chain={chain}\n              tokenAvatarSize={40}\n              chainAvatarSize={16}\n            />\n          ) : (\n            <TokenListItemAvatar token={token} />\n          )}\n        </ListItemAvatar>\n        <ListItemText\n          primary={\n            <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>\n              {token.symbol}\n              {verificationBadge && (\n                <Tooltip title={verificationBadge.title} placement=\"top\" arrow>\n                  <verificationBadge.Icon\n                    sx={{\n                      display: 'flex',\n                      fontSize: 16,\n                      color: verificationBadge.color,\n                      cursor: 'help',\n                    }}\n                  />\n                </Tooltip>\n              )}\n            </Box>\n          }\n          slotProps={{\n            secondary: {\n              component: 'div',\n            },\n          }}\n          secondary={\n            withoutContractAddress ? (\n              <Box\n                ref={container}\n                sx={{\n                  height: 20,\n                  display: 'flex',\n                }}\n              >\n                <Box\n                  sx={{\n                    pt: 0.25,\n                  }}\n                >\n                  {token.name}\n                </Box>\n                <Box\n                  sx={{\n                    position: 'relative',\n                  }}\n                >\n                  <Slide\n                    direction=\"up\"\n                    in={showAddress}\n                    container={container.current}\n                    style={{\n                      position: 'absolute',\n                    }}\n                    appear={false}\n                    mountOnEnter\n                  >\n                    <Box>\n                      <OpenTokenDetailsButton\n                        tokenAddress={token.address}\n                        withoutContractAddress={withoutContractAddress}\n                        chainId={token.chainId}\n                        onClick={onShowTokenDetails}\n                      />\n                      <PinTokenButton\n                        chainId={token.chainId}\n                        tokenAddress={token.address}\n                      />\n                      {token.recent ? (\n                        <RemoveRecentTokenButton\n                          chainId={token.chainId}\n                          tokenAddress={token.address}\n                        />\n                      ) : null}\n                    </Box>\n                  </Slide>\n                </Box>\n              </Box>\n            ) : (\n              <Box\n                ref={container}\n                sx={{\n                  position: 'relative',\n                  height: 20,\n                }}\n              >\n                <Slide\n                  direction=\"down\"\n                  in={!showAddress}\n                  container={container.current}\n                  style={{\n                    position: 'absolute',\n                  }}\n                  appear={false}\n                >\n                  <Box\n                    sx={{\n                      pt: 0.25,\n                    }}\n                  >\n                    {token.name}\n                  </Box>\n                </Slide>\n                <Slide\n                  direction=\"up\"\n                  in={showAddress}\n                  container={container.current}\n                  style={{\n                    position: 'absolute',\n                  }}\n                  appear={false}\n                  mountOnEnter\n                >\n                  <Box\n                    sx={{\n                      display: 'flex',\n                      alignItems: 'center',\n                      gap: 0.5,\n                    }}\n                  >\n                    <Box\n                      sx={{\n                        display: 'flex',\n                        alignItems: 'center',\n                        pt: 0.125,\n                      }}\n                    >\n                      {shortenAddress(token.address)}\n                    </Box>\n                    <Box>\n                      <OpenTokenDetailsButton\n                        tokenAddress={token.address}\n                        withoutContractAddress={withoutContractAddress}\n                        chainId={token.chainId}\n                        onClick={onShowTokenDetails}\n                      />\n                      <PinTokenButton\n                        chainId={token.chainId}\n                        tokenAddress={token.address}\n                      />\n                      {token.recent ? (\n                        <RemoveRecentTokenButton\n                          chainId={token.chainId}\n                          tokenAddress={token.address}\n                        />\n                      ) : null}\n                    </Box>\n                  </Box>\n                </Slide>\n              </Box>\n            )\n          }\n        />\n        {isBalanceLoading ? (\n          <TokenAmountSkeleton />\n        ) : (\n          <Box sx={{ textAlign: 'right' }}>\n            {token.amount ? (\n              <Typography\n                noWrap\n                sx={{\n                  fontWeight: 600,\n                }}\n                title={tokenAmount}\n              >\n                {t('format.tokenAmount', {\n                  value: tokenAmount,\n                })}\n              </Typography>\n            ) : null}\n            {token.amount && token.priceUSD ? (\n              <Typography\n                data-price={token.priceUSD}\n                sx={{\n                  fontWeight: 500,\n                  fontSize: 12,\n                  color: 'text.secondary',\n                }}\n              >\n                {t('format.currency', {\n                  value: tokenPrice,\n                })}\n              </Typography>\n            ) : null}\n          </Box>\n        )}\n      </ListItemButton>\n    )\n  }\n)\n\nexport const TokenListItemSkeleton = (): JSX.Element => {\n  return (\n    <ListItem\n      secondaryAction={<TokenAmountSkeleton />}\n      disablePadding\n      sx={(theme) => ({\n        position: 'relative',\n        flexDirection: 'row',\n        alignItems: 'center',\n        padding: 0,\n        [`& .${listItemSecondaryActionClasses.root}`]: {\n          right: theme.spacing(1.5),\n        },\n      })}\n    >\n      <ListItemAvatar>\n        <Skeleton\n          variant=\"circular\"\n          width={40}\n          height={40}\n          sx={{ marginLeft: 1.5, marginRight: 2 }}\n        />\n      </ListItemAvatar>\n      <ListItemText\n        primary={<Skeleton variant=\"text\" width={56} height={24} />}\n        secondary={<Skeleton variant=\"text\" width={96} height={16} />}\n      />\n    </ListItem>\n  )\n}\n\nconst TokenAmountSkeleton: React.FC = () => {\n  return (\n    <Box\n      sx={{\n        display: 'flex',\n        flexDirection: 'column',\n        alignItems: 'flex-end',\n      }}\n    >\n      <Skeleton variant=\"text\" width={56} height={24} />\n      <Skeleton variant=\"text\" width={48} height={16} />\n    </Box>\n  )\n}\n"],"mappings":"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"}

package/dist/esm/components/TokenList/TokenNotFound.d.ts

@@ -1,6 +1,5 @@
 import { FormTypeProps } from "../../stores/form/types.js";
 //#region src/components/TokenList/TokenNotFound.d.ts
-declare const TokenNotFound: React.FC<FormTypeProps>;
+export declare const TokenNotFound: React.FC<FormTypeProps>;
 //#endregion
-export { TokenNotFound };
 //# sourceMappingURL=TokenNotFound.d.ts.map

package/dist/esm/components/TokenList/TokenNotFound.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TokenNotFound.d.ts","names":[],"sources":["../../../../src/components/TokenList/TokenNotFound.tsx"],"mappings":";;cAIa,eAAe,MAAM,GAAG"}
+{"version":3,"file":"TokenNotFound.d.ts","names":[],"sources":["../../../../src/components/TokenList/TokenNotFound.tsx"],"mappings":";;qBAIa,eAAe,MAAM,GAAG"}

package/dist/esm/components/TokenList/VirtualizedTokenList.d.ts

@@ -1,7 +1,6 @@
 import { VirtualizedTokenListProps } from "./types.js";
 import { FC } from "react";
 //#region src/components/TokenList/VirtualizedTokenList.d.ts
-declare const VirtualizedTokenList: FC<VirtualizedTokenListProps>;
+export declare const VirtualizedTokenList: FC<VirtualizedTokenListProps>;
 //#endregion
-export { VirtualizedTokenList };
 //# sourceMappingURL=VirtualizedTokenList.d.ts.map

package/dist/esm/components/TokenList/VirtualizedTokenList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VirtualizedTokenList.d.ts","names":[],"sources":["../../../../src/components/TokenList/VirtualizedTokenList.tsx"],"mappings":";;;cAiBa,sBAAsB,GAAG"}
+{"version":3,"file":"VirtualizedTokenList.d.ts","names":[],"sources":["../../../../src/components/TokenList/VirtualizedTokenList.tsx"],"mappings":";;;qBAqBa,sBAAsB,GAAG"}

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

@@ -1,4 +1,9 @@
 import { useAvailableChains } from "../../hooks/useAvailableChains.js";
+import { getTokenKey } from "../../stores/recentTokens/utils.js";
+import { isHoistableNative } from "../../utils/tokenList.js";
+import { createBandResolver } from "../../utils/tokenListBands.js";
+import { RecentTokensHeader } from "./RecentTokensHeader.js";
+import { RecentTokensToggle } from "./RecentTokensToggle.js";
 import { TokenDetailsSheet } from "./TokenDetailsSheet.js";
 import { List as List$1 } from "./TokenList.style.js";
 import { TokenListItem, TokenListItemSkeleton } from "./TokenListItem.js";
@@ -9,7 +14,7 @@ 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 VirtualizedTokenList = ({ tokens, scrollElementRef, chainId, selectedTokenAddress, isLoading, isBalanceLoading, showCategories, showPinnedTokens, onClick, isAllNetworks, recentStartIndex = 0, recentCount = 0, hiddenRecentCount = 0, recentExpanded = false, onToggleRecent, onClearRecent, nativeHoisted }) => {
 	const { t } = useTranslation();
 	const { chains } = useAvailableChains();
 	const chainsSet = useMemo(() => {
@@ -22,29 +27,46 @@ const VirtualizedTokenList = ({ tokens, scrollElementRef, chainId, selectedToken
 	}, []);
 	const getItemKey = useCallback((index) => {
 		const token = tokens[index];
-		return `${token.chainId}-${token.address}-${index}`;
-	}, [tokens]);
-	const nativeTokenHoisted = useMemo(() => {
-		const first = tokens[0];
-		return !!first?.native && !first.pinned && !first.featured && !first.popular && !first.verified;
-	}, [tokens]);
-	const isListStartIndex = useCallback((index) => index === 0 || index === 1 && nativeTokenHoisted, [nativeTokenHoisted]);
-	const estimateSize = useCallback((index) => {
-		const currentToken = tokens[index];
-		const previousToken = tokens[index - 1];
-		let size = tokenItemHeight;
-		if (currentToken.pinned && isListStartIndex(index)) size += 24;
-		if (previousToken?.pinned && !currentToken.pinned) size += 32;
-		if (!showCategories) return size;
-		if (currentToken.featured && !currentToken.pinned && isListStartIndex(index)) size += 24;
-		const isNotPinned = !currentToken.pinned && !previousToken?.pinned;
-		if (!isListStartIndex(index) && isNotPinned && (previousToken?.amount && !currentToken.amount || previousToken?.featured && !currentToken.featured || previousToken?.popular && !currentToken.popular)) size += 32;
-		return size;
+		if (token.recent) return `recent-${token.chainId}-${token.address}`;
+		const shift = index >= recentStartIndex + recentCount ? recentCount : 0;
+		return `${token.chainId}-${token.address}-${index - shift}`;
 	}, [
+		tokens,
+		recentStartIndex,
+		recentCount
+	]);
+	const resolvedNativeHoisted = useMemo(() => nativeHoisted ?? isHoistableNative(tokens[0]), [nativeHoisted, tokens]);
+	const showRecentToggle = recentCount > 0 && !!onToggleRecent;
+	const bandKeys = useMemo(() => {
+		if (!recentCount) return;
+		const keys = /* @__PURE__ */ new Set();
+		for (let i = recentStartIndex; i < recentStartIndex + recentCount; i++) {
+			const token = tokens[i];
+			if (token) keys.add(getTokenKey(token.chainId, token.address));
+		}
+		return keys;
+	}, [
+		tokens,
+		recentStartIndex,
+		recentCount
+	]);
+	const bands = useMemo(() => createBandResolver(tokens, {
+		showCategories: !!showCategories,
+		showPinnedTokens: !!showPinnedTokens,
+		nativeHoisted: resolvedNativeHoisted,
+		recentStartIndex,
+		recentCount,
+		showRecentToggle
+	}), [
 		tokens,
 		showCategories,
-		isListStartIndex
+		showPinnedTokens,
+		resolvedNativeHoisted,
+		recentStartIndex,
+		recentCount,
+		showRecentToggle
 	]);
+	const estimateSize = useCallback((index) => tokenItemHeight + bands.getRowExtraHeight(index), [bands]);
 	const virtualizerConfig = useMemo(() => ({
 		count: tokens.length,
 		overscan: 5,
@@ -78,26 +100,9 @@ const VirtualizedTokenList = ({ tokens, scrollElementRef, chainId, selectedToken
 			disablePadding: true,
 			children: getVirtualItems().map((item) => {
 				const currentToken = tokens[item.index];
-				const previousToken = tokens[item.index - 1];
 				const chain = chainsSet?.get(currentToken.chainId);
-				const isListStart = isListStartIndex(item.index);
-				const isNotPinned = !currentToken.pinned;
-				const isFirstPinnedToken = currentToken.pinned && isListStart;
-				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 && isListStart) 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;
+				const band = bands.getRowBandLabel(item.index);
+				const isSelected = selectedTokenAddress === currentToken.address && chainId === currentToken.chainId && (!!currentToken.recent || !bandKeys?.has(getTokenKey(currentToken.chainId, currentToken.address)));
 				return /* @__PURE__ */ jsx(TokenListItem, {
 					onClick,
 					size: item.size,
@@ -108,16 +113,24 @@ const VirtualizedTokenList = ({ tokens, scrollElementRef, chainId, selectedToken
 					selected: isSelected,
 					onShowTokenDetails,
 					isBalanceLoading,
-					startAdornment: startAdornmentLabel ? /* @__PURE__ */ jsx(Typography, {
+					startAdornment: band?.kind === "recent" ? /* @__PURE__ */ jsx(RecentTokensHeader, {
+						atListStart: band.atListStart,
+						onClear: onClearRecent
+					}) : band?.kind === "text" ? /* @__PURE__ */ jsx(Typography, {
 						sx: {
 							fontSize: 14,
 							fontWeight: 600,
 							lineHeight: "16px",
 							px: 1.5,
-							pt: isFirstPinnedToken || currentToken.featured && isNotPinned && isListStart ? 0 : 1,
+							pt: band.atListStart ? 0 : 1,
 							pb: 1
 						},
-						children: startAdornmentLabel
+						children: t(band.key)
+					}) : null,
+					endAdornment: onToggleRecent && bands.isToggleRow(item.index) ? /* @__PURE__ */ jsx(RecentTokensToggle, {
+						expanded: recentExpanded,
+						hiddenCount: hiddenRecentCount,
+						onToggle: onToggleRecent
 					}) : null
 				}, item.key);
 			})

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

@@ -1 +1 @@
-{"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  // The hoisted native token sits above every category, so the row after it\n  // opens the first one. Only a row the hoist could have moved counts.\n  const nativeTokenHoisted = useMemo(() => {\n    const first = tokens[0]\n    return (\n      !!first?.native &&\n      !first.pinned &&\n      !first.featured &&\n      !first.popular &&\n      !first.verified\n    )\n  }, [tokens])\n\n  const isListStartIndex = useCallback(\n    (index: number) => index === 0 || (index === 1 && nativeTokenHoisted),\n    [nativeTokenHoisted]\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 && isListStartIndex(index)) {\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 (\n        currentToken.featured &&\n        !currentToken.pinned &&\n        isListStartIndex(index)\n      ) {\n        size += 24\n      }\n\n      // Category transition (excluding pinned tokens). The hoisted native row\n      // sits above every band, so the row after it ends nothing.\n      const isNotPinned = !currentToken.pinned && !previousToken?.pinned\n      if (\n        !isListStartIndex(index) &&\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, isListStartIndex]\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 isListStart = isListStartIndex(item.index)\n          const isNotPinned = !currentToken.pinned\n          const isFirstPinnedToken = currentToken.pinned && isListStart\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 && isListStart)\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              chainName={chain?.name}\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 && isNotPinned && isListStart)\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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"}
+{"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 { getTokenKey } from '../../stores/recentTokens/utils.js'\nimport { isHoistableNative } from '../../utils/tokenList.js'\nimport { createBandResolver } from '../../utils/tokenListBands.js'\nimport { RecentTokensHeader } from './RecentTokensHeader.js'\nimport { RecentTokensToggle } from './RecentTokensToggle.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  recentStartIndex = 0,\n  recentCount = 0,\n  hiddenRecentCount = 0,\n  recentExpanded = false,\n  onToggleRecent,\n  onClearRecent,\n  nativeHoisted,\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  // Rows below the band keep their key as it changes size, so none remount.\n  const getItemKey = useCallback(\n    (index: number) => {\n      const token = tokens[index]\n      if (token.recent) {\n        return `recent-${token.chainId}-${token.address}`\n      }\n      const shift = index >= recentStartIndex + recentCount ? recentCount : 0\n      return `${token.chainId}-${token.address}-${index - shift}`\n    },\n    [tokens, recentStartIndex, recentCount]\n  )\n\n  const resolvedNativeHoisted = useMemo(\n    () => nativeHoisted ?? isHoistableNative(tokens[0]),\n    [nativeHoisted, tokens]\n  )\n\n  const showRecentToggle = recentCount > 0 && !!onToggleRecent\n\n  // The band copy is on screen; its list row may be far below the fold.\n  const bandKeys = useMemo(() => {\n    if (!recentCount) {\n      return undefined\n    }\n    const keys = new Set<string>()\n    for (let i = recentStartIndex; i < recentStartIndex + recentCount; i++) {\n      const token = tokens[i]\n      if (token) {\n        keys.add(getTokenKey(token.chainId, token.address))\n      }\n    }\n    return keys\n  }, [tokens, recentStartIndex, recentCount])\n\n  const bands = useMemo(\n    () =>\n      createBandResolver(tokens, {\n        showCategories: !!showCategories,\n        showPinnedTokens: !!showPinnedTokens,\n        nativeHoisted: resolvedNativeHoisted,\n        recentStartIndex,\n        recentCount,\n        showRecentToggle,\n      }),\n    [\n      tokens,\n      showCategories,\n      showPinnedTokens,\n      resolvedNativeHoisted,\n      recentStartIndex,\n      recentCount,\n      showRecentToggle,\n    ]\n  )\n\n  const estimateSize = useCallback(\n    (index: number) => tokenItemHeight + bands.getRowExtraHeight(index),\n    [bands]\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 chain = chainsSet?.get(currentToken.chainId)\n          const band = bands.getRowBandLabel(item.index)\n\n          const isSelected =\n            selectedTokenAddress === currentToken.address &&\n            chainId === currentToken.chainId &&\n            (!!currentToken.recent ||\n              !bandKeys?.has(\n                getTokenKey(currentToken.chainId, currentToken.address)\n              ))\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              chainName={chain?.name}\n              selected={isSelected}\n              onShowTokenDetails={onShowTokenDetails}\n              isBalanceLoading={isBalanceLoading}\n              startAdornment={\n                band?.kind === 'recent' ? (\n                  // Unconditional: the resolver always reserves this height.\n                  <RecentTokensHeader\n                    atListStart={band.atListStart}\n                    onClear={onClearRecent}\n                  />\n                ) : band?.kind === 'text' ? (\n                  <Typography\n                    sx={{\n                      fontSize: 14,\n                      fontWeight: 600,\n                      lineHeight: '16px',\n                      px: 1.5,\n                      pt: band.atListStart ? 0 : 1,\n                      pb: 1,\n                    }}\n                  >\n                    {t(band.key)}\n                  </Typography>\n                ) : null\n              }\n              endAdornment={\n                onToggleRecent && bands.isToggleRow(item.index) ? (\n                  <RecentTokensToggle\n                    expanded={recentExpanded}\n                    hiddenCount={hiddenRecentCount}\n                    onToggle={onToggleRecent}\n                  />\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/types.d.ts

@@ -3,7 +3,7 @@ import { TokenAmount as TokenAmount$1 } from "../../types/token.js";
 import { ExtendedChain } from "@lifi/sdk";
 import { RefObject } from "react";
 //#region src/components/TokenList/types.d.ts
-interface VirtualizedTokenListProps {
+export interface VirtualizedTokenListProps {
   tokens: TokenAmount$1[];
   scrollElementRef: RefObject<HTMLElement | null>;
   isLoading: boolean;
@@ -14,7 +14,14 @@ interface VirtualizedTokenListProps {
   onClick(tokenAddress: string, chainId?: number): void;
   selectedTokenAddress?: string;
   isAllNetworks: boolean;
+  recentStartIndex?: number;
+  recentCount?: number;
+  hiddenRecentCount?: number;
+  recentExpanded?: boolean;
+  onToggleRecent?: () => void;
+  onClearRecent?: () => void;
+  /** Defaults to this component's own `isHoistableNative(tokens[0])`. */
+  nativeHoisted?: boolean;
 }
 //#endregion
-export { VirtualizedTokenListProps };
 //# sourceMappingURL=types.d.ts.map

package/dist/esm/components/TokenList/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","names":[],"sources":["../../../../src/components/TokenList/types.ts"],"mappings":";;;;;UAUiB;EACf,QAAQ;EACR,kBAAkB,UAAU;EAC5B;EACA;EACA;EACA;EACA;EACA,QAAQ,sBAAsB;EAC9B;EACA"}
+{"version":3,"file":"types.d.ts","names":[],"sources":["../../../../src/components/TokenList/types.ts"],"mappings":";;;;;iBAUiB;EACf,QAAQ;EACR,kBAAkB,UAAU;EAC5B;EACA;EACA;EACA;EACA;EACA,QAAQ,sBAAsB;EAC9B;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;;EAEA"}

package/dist/esm/components/TokenList/useTokenSelect.d.ts

@@ -1,6 +1,5 @@
 import { FormType } from "../../stores/form/types.js";
 //#region src/components/TokenList/useTokenSelect.d.ts
-declare const useTokenSelect: (formType: FormType, onClick?: () => void) => ((tokenAddress: string, chainId?: number) => void);
+export declare const useTokenSelect: (formType: FormType, onClick?: () => void) => ((tokenAddress: string, chainId?: number) => void);
 //#endregion
-export { useTokenSelect };
 //# sourceMappingURL=useTokenSelect.d.ts.map

package/dist/esm/components/TokenList/useTokenSelect.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTokenSelect.d.ts","names":[],"sources":["../../../../src/components/TokenList/useTokenSelect.ts"],"mappings":";;cAaa,iBACX,UAAU,UACV,2BACG,sBAAsB"}
+{"version":3,"file":"useTokenSelect.d.ts","names":[],"sources":["../../../../src/components/TokenList/useTokenSelect.ts"],"mappings":";;qBAaa,iBACX,UAAU,UACV,2BACG,sBAAsB"}

package/dist/esm/components/TokenRate/TokenRate.d.ts

@@ -4,7 +4,6 @@ import { TypographyProps } from "@mui/material";
 interface TokenRateProps extends TypographyProps {
   route: RouteExtended;
 }
-declare const TokenRate: React.FC<TokenRateProps>;
+export declare const TokenRate: React.FC<TokenRateProps>;
 //#endregion
-export { TokenRate };
 //# sourceMappingURL=TokenRate.d.ts.map

package/dist/esm/components/TokenRate/TokenRate.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TokenRate.d.ts","names":[],"sources":["../../../../src/components/TokenRate/TokenRate.tsx"],"mappings":";;;UAOU,uBAAuB;EAC/B,OAAO;;cAaI,WAAW,MAAM,GAAG"}
+{"version":3,"file":"TokenRate.d.ts","names":[],"sources":["../../../../src/components/TokenRate/TokenRate.tsx"],"mappings":";;;UAOU,uBAAuB;EAC/B,OAAO;;qBAaI,WAAW,MAAM,GAAG"}