@lifi/widget 4.5.0 → 4.7.0

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

@@ -1,19 +1,22 @@
 import { formatTokenAmount, formatTokenPrice } from "../../utils/format.js";
+import { getTokenVerificationProvider } from "../../utils/token.js";
 import { TokenAvatar } from "../Avatar/TokenAvatar.js";
 import { shortenAddress } from "../../utils/wallet.js";
 import { IconButton as IconButton$1, ListItem as ListItem$1 } from "./TokenList.style.js";
 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";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useTranslation } from "react-i18next";
 import InfoOutlined from "@mui/icons-material/InfoOutlined";
-import WarningRounded from "@mui/icons-material/WarningRounded";
+import ReportRoundedIcon from "@mui/icons-material/ReportRounded";
+import VerifiedIcon from "@mui/icons-material/Verified";
 //#region src/components/TokenList/TokenListItem.tsx
-const TokenListItem = memo(({ onClick, size, start, token, chain, isBalanceLoading, startAdornment, endAdornment, selected, onShowTokenDetails }) => {
+const TokenListItem = memo(({ onClick, size, start, token, chain, chainName, isBalanceLoading, startAdornment, endAdornment, selected, onShowTokenDetails }) => {
 	return /* @__PURE__ */ jsxs(ListItem$1, {
 		style: {
 			height: `${size}px`,
@@ -27,6 +30,7 @@ const TokenListItem = memo(({ onClick, size, start, token, chain, isBalanceLoadi
 				isBalanceLoading,
 				onClick,
 				chain,
+				chainName,
 				selected,
 				onShowTokenDetails
 			}),
@@ -56,7 +60,7 @@ const OpenTokenDetailsButton = ({ tokenAddress, withoutContractAddress, chainId,
 		children: /* @__PURE__ */ jsx(InfoOutlined, {})
 	});
 };
-const TokenListItemButton = memo(({ onClick, token, chain, isBalanceLoading, selected, onShowTokenDetails }) => {
+const TokenListItemButton = memo(({ onClick, token, chain, chainName, isBalanceLoading, selected, onShowTokenDetails }) => {
 	const { t } = useTranslation();
 	const container = useRef(null);
 	const timeoutId = useRef(void 0);
@@ -81,16 +85,52 @@ const TokenListItemButton = memo(({ onClick, token, chain, isBalanceLoading, sel
 		token.priceUSD,
 		token.decimals
 	]);
+	const longPressEvents = useLongPress(() => onShowTokenDetails(token.address, withoutContractAddress, token.chainId));
+	let verificationBadge;
+	if (token.native) verificationBadge = {
+		Icon: VerifiedIcon,
+		color: "info.main",
+		title: chainName ? t("tooltip.tokenNativeOnChain", {
+			tokenSymbol: token.symbol,
+			chainName
+		}) : t("tooltip.tokenNative", { tokenSymbol: token.symbol })
+	};
+	else if (token.verificationStatus === "flagged") verificationBadge = {
+		Icon: ReportRoundedIcon,
+		color: "error.main",
+		title: t("warning.message.tokenFlagged", { tokenSymbol: token.symbol })
+	};
+	else if (token.verificationStatus === "verified") {
+		const provider = getTokenVerificationProvider(token);
+		verificationBadge = {
+			Icon: VerifiedIcon,
+			color: "success.main",
+			title: provider ? t("tooltip.tokenVerifiedByProvider", {
+				tokenSymbol: token.symbol,
+				provider
+			}) : t("tooltip.tokenVerified", { tokenSymbol: token.symbol })
+		};
+	} else if (token.verificationStatus === "unverified" && !token.listed && !token.verified) verificationBadge = {
+		Icon: ReportRoundedIcon,
+		color: "warning.main",
+		title: t("warning.message.tokenUnverifiedByProvider", { tokenSymbol: token.symbol })
+	};
+	else if (!token.verificationStatus && !token.listed && !token.verified) verificationBadge = {
+		Icon: ReportRoundedIcon,
+		color: "warning.main",
+		title: t("warning.message.tokenUnverified")
+	};
 	return /* @__PURE__ */ jsxs(ListItemButton$1, {
 		onClick: handleClick,
 		onMouseEnter,
 		onMouseLeave,
-		...useLongPress(() => onShowTokenDetails(token.address, withoutContractAddress, token.chainId)),
+		...longPressEvents,
 		dense: true,
 		selected,
 		sx: {
 			height: 60,
-			marginBottom: "4px"
+			marginBottom: "4px",
+			flex: "none"
 		},
 		children: [
 			/* @__PURE__ */ jsx(ListItemAvatar, { children: chain ? /* @__PURE__ */ jsx(TokenAvatar, {
@@ -106,14 +146,14 @@ const TokenListItemButton = memo(({ onClick, token, chain, isBalanceLoading, sel
 						alignItems: "center",
 						gap: .5
 					},
-					children: [token.symbol, !token.verified && /* @__PURE__ */ jsx(Tooltip, {
-						title: t("warning.message.unverifiedToken"),
+					children: [token.symbol, verificationBadge && /* @__PURE__ */ jsx(Tooltip, {
+						title: verificationBadge.title,
 						placement: "top",
 						arrow: true,
-						children: /* @__PURE__ */ jsx(WarningRounded, { sx: {
+						children: /* @__PURE__ */ jsx(verificationBadge.Icon, { sx: {
 							display: "flex",
 							fontSize: 16,
-							color: "warning.main",
+							color: verificationBadge.color,
 							cursor: "help"
 						} })
 					})]
@@ -137,15 +177,22 @@ const TokenListItemButton = memo(({ onClick, token, chain, isBalanceLoading, sel
 							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, {
@@ -184,15 +231,22 @@ const TokenListItemButton = memo(({ onClick, token, chain, isBalanceLoading, sel
 									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 WarningRounded from '@mui/icons-material/WarningRounded'\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 { 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    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          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    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    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              {!token.verified && (\n                <Tooltip\n                  title={t('warning.message.unverifiedToken')}\n                  placement=\"top\"\n                  arrow\n                >\n                  <WarningRounded\n                    sx={{\n                      display: 'flex',\n                      fontSize: 16,\n                      color: 'warning.main',\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,20 +27,47 @@ const VirtualizedTokenList = ({ tokens, scrollElementRef, chainId, selectedToken
 	}, []);
 	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(() => ({
+		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,
+		showPinnedTokens,
+		resolvedNativeHoisted,
+		recentStartIndex,
+		recentCount,
+		showRecentToggle
+	]);
+	const estimateSize = useCallback((index) => tokenItemHeight + bands.getRowExtraHeight(index), [bands]);
+	const virtualizerConfig = useMemo(() => ({
 		count: tokens.length,
 		overscan: 5,
 		getScrollElement: () => scrollElementRef.current,
@@ -47,7 +79,8 @@ const VirtualizedTokenList = ({ tokens, scrollElementRef, chainId, selectedToken
 		estimateSize,
 		getItemKey,
 		scrollElementRef
-	]));
+	]);
+	const { getVirtualItems, getTotalSize, scrollToIndex, measure } = useVirtualizer(virtualizerConfig);
 	useEffect(() => {
 		if (scrollElementRef.current) measure();
 	}, [measure, scrollElementRef.current]);
@@ -67,44 +100,37 @@ 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 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;
+				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,
 					start: item.start,
 					token: currentToken,
 					chain: isAllNetworks ? chain : void 0,
+					chainName: chain?.name,
 					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 && item.index === 0 ? 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);
 			})