@lifi/widget 0.0.0-preview-6cc63bac

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

@@ -0,0 +1,177 @@
+import { useAvailableChains } from "../../hooks/useAvailableChains.js";
+import { useToken } from "../../hooks/useToken.js";
+import { CardIconButton } from "../Card/CardIconButton.js";
+import { TokenAvatar } from "../Avatar/TokenAvatar.js";
+import { shortenAddress } from "../../utils/wallet.js";
+import { useExplorer } from "../../hooks/useExplorer.js";
+import { Label, MetricContainer, TokenDetailsSheetContainer, TokenDetailsSheetHeader } from "./TokenDetailsSheetContent.style.js";
+import { forwardRef, useMemo } from "react";
+import { Box, IconButton, Link, Skeleton, Typography } from "@mui/material";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { useTranslation } from "react-i18next";
+import ContentCopyRounded from "@mui/icons-material/ContentCopyRounded";
+import OpenInNewRounded from "@mui/icons-material/OpenInNewRounded";
+import Close from "@mui/icons-material/Close";
+//#region src/components/TokenList/TokenDetailsSheetContent.tsx
+const noDataLabel = "-";
+const TokenDetailsSheetContent = forwardRef(({ tokenAddress, chainId, withoutContractAddress }, ref) => {
+	const { t } = useTranslation();
+	const { getAddressLink } = useExplorer();
+	const { getChainById } = useAvailableChains();
+	const { token, isLoading } = useToken(chainId, tokenAddress, true);
+	const chain = useMemo(() => getChainById(chainId), [chainId, getChainById]);
+	const copyContractAddress = async (e) => {
+		e.stopPropagation();
+		try {
+			await navigator.clipboard.writeText(tokenAddress || "");
+		} catch {}
+	};
+	return /* @__PURE__ */ jsxs(TokenDetailsSheetContainer, { children: [
+		/* @__PURE__ */ jsxs(TokenDetailsSheetHeader, { children: [/* @__PURE__ */ jsxs(Box, {
+			sx: {
+				display: "flex",
+				flexDirection: "row",
+				alignItems: "center",
+				gap: 3
+			},
+			children: [/* @__PURE__ */ jsx(TokenAvatar, {
+				token,
+				chain,
+				tokenAvatarSize: 72,
+				chainAvatarSize: 28,
+				isLoading
+			}), /* @__PURE__ */ jsx(MetricContainer, { children: isLoading ? /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Skeleton, {
+				variant: "rounded",
+				width: 80,
+				height: 24
+			}), /* @__PURE__ */ jsx(Skeleton, {
+				variant: "rounded",
+				width: 80,
+				height: 16
+			})] }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(Typography, {
+				sx: {
+					fontWeight: 700,
+					fontSize: "24px",
+					lineHeight: "24px",
+					color: "text.primary"
+				},
+				children: token?.symbol || noDataLabel
+			}), /* @__PURE__ */ jsx(Label, { children: token?.name || noDataLabel })] }) })]
+		}), /* @__PURE__ */ jsx(IconButton, {
+			onClick: (e) => {
+				e.stopPropagation();
+				if (ref && typeof ref !== "function") ref.current?.close();
+			},
+			sx: {
+				mt: "-8px",
+				mr: "-8px"
+			},
+			children: /* @__PURE__ */ jsx(Close, {})
+		})] }),
+		/* @__PURE__ */ jsx(MetricWithSkeleton, {
+			isLoading,
+			label: t("tokenMetric.currentPrice"),
+			width: 200,
+			height: 40,
+			children: /* @__PURE__ */ jsx(Typography, {
+				sx: {
+					fontWeight: 700,
+					fontSize: "32px",
+					lineHeight: "40px",
+					color: "text.primary"
+				},
+				children: token?.priceUSD ? t("format.currency", { value: token.priceUSD }) : noDataLabel
+			})
+		}),
+		!withoutContractAddress && /* @__PURE__ */ jsx(MetricWithSkeleton, {
+			isLoading,
+			label: t("tokenMetric.contractAddress"),
+			width: 200,
+			height: 24,
+			children: /* @__PURE__ */ jsxs(Box, {
+				sx: {
+					display: "flex",
+					flexDirection: "row",
+					alignItems: "center",
+					gap: 1
+				},
+				children: [
+					/* @__PURE__ */ jsx(Typography, {
+						sx: {
+							fontWeight: 700,
+							fontSize: "18px",
+							lineHeight: "24px",
+							color: "text.primary"
+						},
+						children: shortenAddress(tokenAddress)
+					}),
+					tokenAddress && /* @__PURE__ */ jsx(CardIconButton, {
+						size: "small",
+						onClick: copyContractAddress,
+						children: /* @__PURE__ */ jsx(ContentCopyRounded, { fontSize: "inherit" })
+					}),
+					tokenAddress && /* @__PURE__ */ jsx(CardIconButton, {
+						size: "small",
+						LinkComponent: Link,
+						href: getAddressLink(tokenAddress, chainId),
+						target: "_blank",
+						rel: "nofollow noreferrer",
+						onClick: (e) => e.stopPropagation(),
+						children: /* @__PURE__ */ jsx(OpenInNewRounded, { fontSize: "inherit" })
+					})
+				]
+			})
+		}),
+		/* @__PURE__ */ jsx(MetricWithSkeleton, {
+			isLoading,
+			label: t("tokenMetric.marketCap"),
+			width: 200,
+			height: 24,
+			children: /* @__PURE__ */ jsx(Typography, {
+				sx: {
+					fontWeight: 700,
+					fontSize: "18px",
+					lineHeight: "24px",
+					color: "text.primary"
+				},
+				children: token?.marketCapUSD ? t("format.currency", {
+					value: token.marketCapUSD,
+					notation: "compact",
+					compactDisplay: "short",
+					maximumFractionDigits: 2
+				}) : noDataLabel
+			})
+		}),
+		/* @__PURE__ */ jsx(MetricWithSkeleton, {
+			isLoading,
+			label: t("tokenMetric.volume24h"),
+			width: 200,
+			height: 24,
+			children: /* @__PURE__ */ jsx(Typography, {
+				sx: {
+					fontWeight: 700,
+					fontSize: "18px",
+					lineHeight: "24px",
+					color: "text.primary"
+				},
+				children: token?.volumeUSD24H ? t("format.currency", {
+					value: token.volumeUSD24H,
+					notation: "compact",
+					compactDisplay: "short",
+					maximumFractionDigits: 2
+				}) : noDataLabel
+			})
+		})
+	] });
+});
+const MetricWithSkeleton = ({ label, width, height, isLoading, children }) => {
+	return /* @__PURE__ */ jsxs(MetricContainer, { children: [/* @__PURE__ */ jsx(Label, { children: label }), isLoading ? /* @__PURE__ */ jsx(Skeleton, {
+		variant: "rounded",
+		width,
+		height
+	}) : children] });
+};
+//#endregion
+export { TokenDetailsSheetContent };
+
+//# sourceMappingURL=TokenDetailsSheetContent.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TokenDetailsSheetContent.js","names":[],"sources":["../../../../src/components/TokenList/TokenDetailsSheetContent.tsx"],"sourcesContent":["import Close from '@mui/icons-material/Close'\nimport ContentCopyRounded from '@mui/icons-material/ContentCopyRounded'\nimport OpenInNewRounded from '@mui/icons-material/OpenInNewRounded'\nimport { Box, IconButton, Link, Skeleton, Typography } from '@mui/material'\nimport type React from 'react'\nimport { forwardRef, type PropsWithChildren, useMemo } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useAvailableChains } from '../../hooks/useAvailableChains.js'\nimport { useExplorer } from '../../hooks/useExplorer.js'\nimport { useToken } from '../../hooks/useToken.js'\nimport { shortenAddress } from '../../utils/wallet.js'\nimport { TokenAvatar } from '../Avatar/TokenAvatar.js'\nimport { CardIconButton } from '../Card/CardIconButton.js'\nimport {\n  Label,\n  MetricContainer,\n  TokenDetailsSheetContainer,\n  TokenDetailsSheetHeader,\n} from './TokenDetailsSheetContent.style.js'\nimport type { TokenDetailsSheetBase } from './types.js'\n\ninterface TokenDetailsSheetContentProps {\n  tokenAddress: string | undefined\n  chainId: number | undefined\n  withoutContractAddress: boolean\n}\n\nconst noDataLabel = '-'\n\nexport const TokenDetailsSheetContent: React.ForwardRefExoticComponent<\n  TokenDetailsSheetContentProps & React.RefAttributes<TokenDetailsSheetBase>\n> = forwardRef<TokenDetailsSheetBase, TokenDetailsSheetContentProps>(\n  ({ tokenAddress, chainId, withoutContractAddress }, ref) => {\n    const { t } = useTranslation()\n    const { getAddressLink } = useExplorer()\n    const { getChainById } = useAvailableChains()\n\n    const { token, isLoading } = useToken(chainId, tokenAddress, true)\n    const chain = useMemo(() => getChainById(chainId), [chainId, getChainById])\n\n    const copyContractAddress = async (e: React.MouseEvent) => {\n      e.stopPropagation()\n      try {\n        // Clipboard API may throw if access is denied (e.g., in insecure contexts or older browsers)\n        await navigator.clipboard.writeText(tokenAddress || '')\n      } catch {\n        // Silently fail to avoid crashing the UI if clipboard write fails\n      }\n    }\n\n    return (\n      <TokenDetailsSheetContainer>\n        <TokenDetailsSheetHeader>\n          <Box\n            sx={{\n              display: 'flex',\n              flexDirection: 'row',\n              alignItems: 'center',\n              gap: 3,\n            }}\n          >\n            <TokenAvatar\n              token={token}\n              chain={chain}\n              tokenAvatarSize={72}\n              chainAvatarSize={28}\n              isLoading={isLoading}\n            />\n            <MetricContainer>\n              {isLoading ? (\n                <>\n                  <Skeleton variant=\"rounded\" width={80} height={24} />\n                  <Skeleton variant=\"rounded\" width={80} height={16} />\n                </>\n              ) : (\n                <>\n                  <Typography\n                    sx={{\n                      fontWeight: 700,\n                      fontSize: '24px',\n                      lineHeight: '24px',\n                      color: 'text.primary',\n                    }}\n                  >\n                    {token?.symbol || noDataLabel}\n                  </Typography>\n                  <Label>{token?.name || noDataLabel}</Label>\n                </>\n              )}\n            </MetricContainer>\n          </Box>\n          <IconButton\n            onClick={(e) => {\n              e.stopPropagation()\n              if (ref && typeof ref !== 'function') {\n                ref.current?.close()\n              }\n            }}\n            sx={{ mt: '-8px', mr: '-8px' }}\n          >\n            <Close />\n          </IconButton>\n        </TokenDetailsSheetHeader>\n        <MetricWithSkeleton\n          isLoading={isLoading}\n          label={t('tokenMetric.currentPrice')}\n          width={200}\n          height={40}\n        >\n          <Typography\n            sx={{\n              fontWeight: 700,\n              fontSize: '32px',\n              lineHeight: '40px',\n              color: 'text.primary',\n            }}\n          >\n            {token?.priceUSD\n              ? t('format.currency', {\n                  value: token.priceUSD,\n                })\n              : noDataLabel}\n          </Typography>\n        </MetricWithSkeleton>\n        {!withoutContractAddress && (\n          <MetricWithSkeleton\n            isLoading={isLoading}\n            label={t('tokenMetric.contractAddress')}\n            width={200}\n            height={24}\n          >\n            <Box\n              sx={{\n                display: 'flex',\n                flexDirection: 'row',\n                alignItems: 'center',\n                gap: 1,\n              }}\n            >\n              <Typography\n                sx={{\n                  fontWeight: 700,\n                  fontSize: '18px',\n                  lineHeight: '24px',\n                  color: 'text.primary',\n                }}\n              >\n                {shortenAddress(tokenAddress)}\n              </Typography>\n              {tokenAddress && (\n                <CardIconButton size=\"small\" onClick={copyContractAddress}>\n                  <ContentCopyRounded fontSize=\"inherit\" />\n                </CardIconButton>\n              )}\n              {tokenAddress && (\n                <CardIconButton\n                  size=\"small\"\n                  LinkComponent={Link}\n                  href={getAddressLink(tokenAddress, chainId)}\n                  target=\"_blank\"\n                  rel=\"nofollow noreferrer\"\n                  onClick={(e) => e.stopPropagation()}\n                >\n                  <OpenInNewRounded fontSize=\"inherit\" />\n                </CardIconButton>\n              )}\n            </Box>\n          </MetricWithSkeleton>\n        )}\n        <MetricWithSkeleton\n          isLoading={isLoading}\n          label={t('tokenMetric.marketCap')}\n          width={200}\n          height={24}\n        >\n          <Typography\n            sx={{\n              fontWeight: 700,\n              fontSize: '18px',\n              lineHeight: '24px',\n              color: 'text.primary',\n            }}\n          >\n            {token?.marketCapUSD\n              ? t('format.currency', {\n                  value: token.marketCapUSD,\n                  notation: 'compact',\n                  compactDisplay: 'short',\n                  maximumFractionDigits: 2,\n                })\n              : noDataLabel}\n          </Typography>\n        </MetricWithSkeleton>\n        <MetricWithSkeleton\n          isLoading={isLoading}\n          label={t('tokenMetric.volume24h')}\n          width={200}\n          height={24}\n        >\n          <Typography\n            sx={{\n              fontWeight: 700,\n              fontSize: '18px',\n              lineHeight: '24px',\n              color: 'text.primary',\n            }}\n          >\n            {token?.volumeUSD24H\n              ? t('format.currency', {\n                  value: token.volumeUSD24H,\n                  notation: 'compact',\n                  compactDisplay: 'short',\n                  maximumFractionDigits: 2,\n                })\n              : noDataLabel}\n          </Typography>\n        </MetricWithSkeleton>\n      </TokenDetailsSheetContainer>\n    )\n  }\n)\n\ninterface MetricWithSkeletonProps {\n  label: string\n  isLoading: boolean\n  width: number\n  height: number\n}\n\nconst MetricWithSkeleton = ({\n  label,\n  width,\n  height,\n  isLoading,\n  children,\n}: PropsWithChildren<MetricWithSkeletonProps>) => {\n  return (\n    <MetricContainer>\n      <Label>{label}</Label>\n      {isLoading ? (\n        <Skeleton variant=\"rounded\" width={width} height={height} />\n      ) : (\n        children\n      )}\n    </MetricContainer>\n  )\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,32 @@
+import { PageContainer } from "../PageContainer.js";
+import { Box, Typography, styled } from "@mui/material";
+//#region src/components/TokenList/TokenDetailsSheetContent.style.tsx
+const TokenDetailsSheetContainer = styled(PageContainer)(({ theme }) => ({
+	display: "flex",
+	flexDirection: "column",
+	gap: theme.spacing(2),
+	paddingTop: theme.spacing(3),
+	paddingBottom: theme.spacing(3)
+}));
+const TokenDetailsSheetHeader = styled(Box)(({ theme }) => ({
+	display: "flex",
+	flexDirection: "row",
+	alignItems: "flex-start",
+	justifyContent: "space-between",
+	gap: theme.spacing(2)
+}));
+const Label = styled(Typography)(({ theme }) => ({
+	fontWeight: 500,
+	fontSize: "12px",
+	lineHeight: "16px",
+	color: theme.vars.palette.text.secondary
+}));
+const MetricContainer = styled(Box)(({ theme }) => ({
+	display: "flex",
+	flexDirection: "column",
+	gap: theme.spacing(1)
+}));
+//#endregion
+export { Label, MetricContainer, TokenDetailsSheetContainer, TokenDetailsSheetHeader };
+
+//# sourceMappingURL=TokenDetailsSheetContent.style.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TokenDetailsSheetContent.style.js","names":[],"sources":["../../../../src/components/TokenList/TokenDetailsSheetContent.style.tsx"],"sourcesContent":["import { Box, styled, Typography } from '@mui/material'\nimport type React from 'react'\nimport type { PageContainerProps } from '../PageContainer.js'\nimport { PageContainer } from '../PageContainer.js'\n\nexport const TokenDetailsSheetContainer: React.FC<\n  React.ComponentProps<typeof PageContainer> & PageContainerProps\n> = styled(PageContainer)<PageContainerProps>(({ theme }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: theme.spacing(2),\n  paddingTop: theme.spacing(3),\n  paddingBottom: theme.spacing(3),\n}))\n\nexport const TokenDetailsSheetHeader: React.FC<\n  React.ComponentProps<typeof Box>\n> = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  flexDirection: 'row',\n  alignItems: 'flex-start',\n  justifyContent: 'space-between',\n  gap: theme.spacing(2),\n}))\n\nexport const Label: React.FC<React.ComponentProps<typeof Typography>> = styled(\n  Typography\n)(({ theme }) => ({\n  fontWeight: 500,\n  fontSize: '12px',\n  lineHeight: '16px',\n  color: theme.vars.palette.text.secondary,\n}))\n\nexport const MetricContainer: React.FC<React.ComponentProps<typeof Box>> =\n  styled(Box)(({ theme }) => ({\n    display: 'flex',\n    flexDirection: 'column',\n    gap: theme.spacing(1),\n  }))\n"],"mappings":";;;AAKA,MAAa,6BAET,OAAO,aAAa,GAAuB,EAAE,aAAa;CAC5D,SAAS;CACT,eAAe;CACf,KAAK,MAAM,QAAQ,CAAC;CACpB,YAAY,MAAM,QAAQ,CAAC;CAC3B,eAAe,MAAM,QAAQ,CAAC;AAChC,EAAE;AAEF,MAAa,0BAET,OAAO,GAAG,GAAG,EAAE,aAAa;CAC9B,SAAS;CACT,eAAe;CACf,YAAY;CACZ,gBAAgB;CAChB,KAAK,MAAM,QAAQ,CAAC;AACtB,EAAE;AAEF,MAAa,QAA2D,OACtE,UACF,GAAG,EAAE,aAAa;CAChB,YAAY;CACZ,UAAU;CACV,YAAY;CACZ,OAAO,MAAM,KAAK,QAAQ,KAAK;AACjC,EAAE;AAEF,MAAa,kBACX,OAAO,GAAG,GAAG,EAAE,aAAa;CAC1B,SAAS;CACT,eAAe;CACf,KAAK,MAAM,QAAQ,CAAC;AACtB,EAAE"}

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

@@ -0,0 +1,65 @@
+import { useWidgetEvents } from "../../hooks/useWidgetEvents.js";
+import "../../types/events.js";
+import { useChainOrderStore } from "../../stores/chains/ChainOrderStore.js";
+import { FormKeyHelper } from "../../stores/form/types.js";
+import { useFieldValues } from "../../stores/form/useFieldValues.js";
+import { useDebouncedWatch } from "../../hooks/useDebouncedWatch.js";
+import { useNavigateBack } from "../../hooks/useNavigateBack.js";
+import { useListHeight } from "../../hooks/useListHeight.js";
+import { useTokenSelect } from "./useTokenSelect.js";
+import { useTokenBalances } from "../../hooks/useTokenBalances.js";
+import { TokenNotFound } from "./TokenNotFound.js";
+import { VirtualizedTokenList } from "./VirtualizedTokenList.js";
+import { memo, useEffect, useRef } 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 navigateBack = useNavigateBack();
+	const listParentRef = useRef(null);
+	const { listHeight } = useListHeight({
+		listParentRef,
+		headerRef
+	});
+	const emitter = useWidgetEvents();
+	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 showCategories = withCategories && !tokenSearchFilter && !isAllNetworks;
+	useEffect(() => {
+		const normalizedSearchFilter = tokenSearchFilter?.replaceAll("$", "");
+		if (normalizedSearchFilter) emitter.emit("tokenSearch", {
+			value: normalizedSearchFilter,
+			tokens
+		});
+	}, [
+		tokenSearchFilter,
+		tokens,
+		emitter
+	]);
+	return /* @__PURE__ */ jsxs(Box, {
+		ref: listParentRef,
+		style: {
+			height: listHeight,
+			overflow: "auto"
+		},
+		children: [!tokens.length && !isTokensLoading && !isSearchLoading ? /* @__PURE__ */ jsx(TokenNotFound, { formType }) : null, /* @__PURE__ */ jsx(VirtualizedTokenList, {
+			tokens,
+			scrollElementRef: listParentRef,
+			chainId: selectedChainId,
+			isLoading: isTokensLoading || isSearchLoading,
+			isBalanceLoading,
+			showCategories,
+			showPinnedTokens: withPinnedTokens,
+			onClick: handleTokenClick,
+			selectedTokenAddress,
+			isAllNetworks
+		})]
+	});
+});
+//#endregion
+export { TokenList };
+
+//# sourceMappingURL=TokenList.js.map

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

@@ -0,0 +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;YAAvE,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"}

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

@@ -0,0 +1,30 @@
+import { ListItem as ListItem$2 } from "../ListItem/ListItem.js";
+import { IconButton, List, styled } from "@mui/material";
+//#region src/components/TokenList/TokenList.style.tsx
+const ListItem$1 = styled(ListItem$2)(() => ({
+	position: "absolute",
+	top: 0,
+	left: 0
+}));
+const List$1 = styled(List)(({ theme }) => ({
+	cursor: "pointer",
+	marginLeft: theme.spacing(1.5),
+	marginRight: theme.spacing(1.5)
+}));
+const IconButton$1 = styled(IconButton)(({ theme }) => ({
+	lineHeight: 1,
+	fontSize: 12,
+	fontWeight: 400,
+	padding: theme.spacing(.375, .375),
+	margin: theme.spacing(0, 0, 0, .25),
+	color: "inherit",
+	backgroundColor: "unset",
+	minWidth: "unset",
+	borderRadius: theme.vars.shape.borderRadiusTertiary,
+	"&:hover": { backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)` },
+	svg: { fontSize: 14 }
+}));
+//#endregion
+export { IconButton$1 as IconButton, List$1 as List, ListItem$1 as ListItem };
+
+//# sourceMappingURL=TokenList.style.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TokenList.style.js","names":["ListItem","ListItemBase","List","MuiList","IconButton","MuiIconButton"],"sources":["../../../../src/components/TokenList/TokenList.style.tsx"],"sourcesContent":["import type { IconButtonProps, LinkProps } from '@mui/material'\nimport {\n  IconButton as MuiIconButton,\n  List as MuiList,\n  styled,\n} from '@mui/material'\nimport type React from 'react'\nimport { ListItem as ListItemBase } from '../ListItem/ListItem.js'\n\nexport const ListItem: React.FC<\n  React.ComponentProps<typeof ListItemBase> & IconButtonProps & LinkProps\n> = styled(ListItemBase)(() => ({\n  position: 'absolute',\n  top: 0,\n  left: 0,\n}))\n\nexport const List: React.FC<\n  React.ComponentProps<typeof MuiList> & IconButtonProps & LinkProps\n> = styled(MuiList)(({ theme }) => ({\n  cursor: 'pointer',\n  marginLeft: theme.spacing(1.5),\n  marginRight: theme.spacing(1.5),\n}))\n\nexport const IconButton: React.FC<\n  React.ComponentProps<typeof MuiIconButton> & IconButtonProps & LinkProps\n> = styled(MuiIconButton)<IconButtonProps & LinkProps>(({ theme }) => ({\n  lineHeight: 1,\n  fontSize: 12,\n  fontWeight: 400,\n  padding: theme.spacing(0.375, 0.375),\n  margin: theme.spacing(0, 0, 0, 0.25),\n  color: 'inherit',\n  backgroundColor: 'unset',\n  minWidth: 'unset',\n  borderRadius: theme.vars.shape.borderRadiusTertiary,\n  '&:hover': {\n    backgroundColor: `color-mix(in srgb, ${theme.vars.palette.common.onBackground} 4%, transparent)`,\n  },\n  svg: {\n    fontSize: 14,\n  },\n}))\n"],"mappings":";;;AASA,MAAaA,aAET,OAAOC,UAAY,SAAS;CAC9B,UAAU;CACV,KAAK;CACL,MAAM;AACR,EAAE;AAEF,MAAaC,SAET,OAAOC,IAAO,GAAG,EAAE,aAAa;CAClC,QAAQ;CACR,YAAY,MAAM,QAAQ,GAAG;CAC7B,aAAa,MAAM,QAAQ,GAAG;AAChC,EAAE;AAEF,MAAaC,eAET,OAAOC,UAAa,GAAgC,EAAE,aAAa;CACrE,YAAY;CACZ,UAAU;CACV,YAAY;CACZ,SAAS,MAAM,QAAQ,MAAO,IAAK;CACnC,QAAQ,MAAM,QAAQ,GAAG,GAAG,GAAG,GAAI;CACnC,OAAO;CACP,iBAAiB;CACjB,UAAU;CACV,cAAc,MAAM,KAAK,MAAM;CAC/B,WAAW,EACT,iBAAiB,sBAAsB,MAAM,KAAK,QAAQ,OAAO,aAAa,mBAChF;CACA,KAAK,EACH,UAAU,GACZ;AACF,EAAE"}

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

@@ -0,0 +1,274 @@
+import { formatTokenAmount, formatTokenPrice } from "../../utils/format.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 { 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 InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
+import WarningRounded from "@mui/icons-material/WarningRounded";
+//#region src/components/TokenList/TokenListItem.tsx
+const TokenListItem = memo(({ onClick, size, start, token, chain, isBalanceLoading, startAdornment, endAdornment, selected, onShowTokenDetails }) => {
+	return /* @__PURE__ */ jsxs(ListItem$1, {
+		style: {
+			height: `${size}px`,
+			transform: `translateY(${start}px)`,
+			padding: 0
+		},
+		children: [
+			startAdornment,
+			/* @__PURE__ */ jsx(TokenListItemButton, {
+				token,
+				isBalanceLoading,
+				onClick,
+				chain,
+				selected,
+				onShowTokenDetails
+			}),
+			endAdornment
+		]
+	});
+});
+const TokenListItemAvatar = memo(({ token }) => {
+	const [isImageLoading, setIsImageLoading] = useState(true);
+	return /* @__PURE__ */ jsx(Avatar, {
+		src: token.logoURI,
+		alt: token.symbol,
+		sx: (theme) => isImageLoading ? { bgcolor: theme.vars.palette.grey[300] } : null,
+		onLoad: () => setIsImageLoading(false),
+		children: token.symbol?.[0]
+	});
+});
+const OpenTokenDetailsButton = ({ tokenAddress, withoutContractAddress, chainId, onClick }) => {
+	if (!tokenAddress) return null;
+	return /* @__PURE__ */ jsx(IconButton$1, {
+		size: "small",
+		onClick: (e) => {
+			e.stopPropagation();
+			e.currentTarget.blur();
+			onClick(tokenAddress, withoutContractAddress, chainId);
+		},
+		children: /* @__PURE__ */ jsx(InfoOutlinedIcon, {})
+	});
+};
+const TokenListItemButton = memo(({ onClick, token, chain, isBalanceLoading, selected, onShowTokenDetails }) => {
+	const { t } = useTranslation();
+	const container = useRef(null);
+	const timeoutId = useRef(void 0);
+	const [showAddress, setShowAddress] = useState(false);
+	const withoutContractAddress = chain?.chainType === ChainType.UTXO;
+	const onMouseEnter = () => {
+		timeoutId.current = setTimeout(() => {
+			if (token.address) setShowAddress(true);
+		}, 350);
+	};
+	const onMouseLeave = () => {
+		clearTimeout(timeoutId.current);
+		if (showAddress) setShowAddress(false);
+	};
+	const handleClick = (e) => {
+		e.stopPropagation();
+		onClick?.(token.address, token.chainId);
+	};
+	const tokenAmount = useMemo(() => formatTokenAmount(token.amount, token.decimals), [token.amount, token.decimals]);
+	const tokenPrice = useMemo(() => formatTokenPrice(token.amount, token.priceUSD, token.decimals), [
+		token.amount,
+		token.priceUSD,
+		token.decimals
+	]);
+	return /* @__PURE__ */ jsxs(ListItemButton$1, {
+		onClick: handleClick,
+		onMouseEnter,
+		onMouseLeave,
+		...useLongPress(() => onShowTokenDetails(token.address, withoutContractAddress, token.chainId)),
+		dense: true,
+		selected,
+		sx: {
+			height: 60,
+			marginBottom: "4px"
+		},
+		children: [
+			/* @__PURE__ */ jsx(ListItemAvatar, { children: chain ? /* @__PURE__ */ jsx(TokenAvatar, {
+				token,
+				chain,
+				tokenAvatarSize: 40,
+				chainAvatarSize: 16
+			}) : /* @__PURE__ */ jsx(TokenListItemAvatar, { token }) }),
+			/* @__PURE__ */ jsx(ListItemText, {
+				primary: /* @__PURE__ */ jsxs(Box, {
+					sx: {
+						display: "flex",
+						alignItems: "center",
+						gap: .5
+					},
+					children: [token.symbol, !token.verified && /* @__PURE__ */ jsx(Tooltip, {
+						title: t("warning.message.unverifiedToken"),
+						placement: "top",
+						arrow: true,
+						children: /* @__PURE__ */ jsx(WarningRounded, { sx: {
+							display: "flex",
+							fontSize: 16,
+							color: "warning.main",
+							cursor: "help"
+						} })
+					})]
+				}),
+				slotProps: { secondary: { component: "div" } },
+				secondary: withoutContractAddress ? /* @__PURE__ */ jsxs(Box, {
+					ref: container,
+					sx: {
+						height: 20,
+						display: "flex"
+					},
+					children: [/* @__PURE__ */ jsx(Box, {
+						sx: { pt: .25 },
+						children: token.name
+					}), /* @__PURE__ */ jsx(Box, {
+						sx: { position: "relative" },
+						children: /* @__PURE__ */ jsx(Slide, {
+							direction: "up",
+							in: showAddress,
+							container: container.current,
+							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
+							})] })
+						})
+					})]
+				}) : /* @__PURE__ */ jsxs(Box, {
+					ref: container,
+					sx: {
+						position: "relative",
+						height: 20
+					},
+					children: [/* @__PURE__ */ jsx(Slide, {
+						direction: "down",
+						in: !showAddress,
+						container: container.current,
+						style: { position: "absolute" },
+						appear: false,
+						children: /* @__PURE__ */ jsx(Box, {
+							sx: { pt: .25 },
+							children: token.name
+						})
+					}), /* @__PURE__ */ jsx(Slide, {
+						direction: "up",
+						in: showAddress,
+						container: container.current,
+						style: { position: "absolute" },
+						appear: false,
+						mountOnEnter: true,
+						children: /* @__PURE__ */ jsxs(Box, {
+							sx: {
+								display: "flex",
+								alignItems: "center",
+								gap: .5
+							},
+							children: [/* @__PURE__ */ jsx(Box, {
+								sx: {
+									display: "flex",
+									alignItems: "center",
+									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
+							})] })]
+						})
+					})]
+				})
+			}),
+			isBalanceLoading ? /* @__PURE__ */ jsx(TokenAmountSkeleton, {}) : /* @__PURE__ */ jsxs(Box, {
+				sx: { textAlign: "right" },
+				children: [token.amount ? /* @__PURE__ */ jsx(Typography, {
+					noWrap: true,
+					sx: { fontWeight: 600 },
+					title: tokenAmount,
+					children: t("format.tokenAmount", { value: tokenAmount })
+				}) : null, token.amount && token.priceUSD ? /* @__PURE__ */ jsx(Typography, {
+					"data-price": token.priceUSD,
+					sx: {
+						fontWeight: 500,
+						fontSize: 12,
+						color: "text.secondary"
+					},
+					children: t("format.currency", { value: tokenPrice })
+				}) : null]
+			})
+		]
+	});
+});
+const TokenListItemSkeleton = () => {
+	return /* @__PURE__ */ jsxs(ListItem$1, {
+		secondaryAction: /* @__PURE__ */ jsx(TokenAmountSkeleton, {}),
+		disablePadding: true,
+		sx: (theme) => ({
+			position: "relative",
+			flexDirection: "row",
+			alignItems: "center",
+			padding: 0,
+			[`& .${listItemSecondaryActionClasses.root}`]: { right: theme.spacing(1.5) }
+		}),
+		children: [/* @__PURE__ */ jsx(ListItemAvatar, { children: /* @__PURE__ */ jsx(Skeleton, {
+			variant: "circular",
+			width: 40,
+			height: 40,
+			sx: {
+				marginLeft: 1.5,
+				marginRight: 2
+			}
+		}) }), /* @__PURE__ */ jsx(ListItemText, {
+			primary: /* @__PURE__ */ jsx(Skeleton, {
+				variant: "text",
+				width: 56,
+				height: 24
+			}),
+			secondary: /* @__PURE__ */ jsx(Skeleton, {
+				variant: "text",
+				width: 96,
+				height: 16
+			})
+		})]
+	});
+};
+const TokenAmountSkeleton = () => {
+	return /* @__PURE__ */ jsxs(Box, {
+		sx: {
+			display: "flex",
+			flexDirection: "column",
+			alignItems: "flex-end"
+		},
+		children: [/* @__PURE__ */ jsx(Skeleton, {
+			variant: "text",
+			width: 56,
+			height: 24
+		}), /* @__PURE__ */ jsx(Skeleton, {
+			variant: "text",
+			width: 48,
+			height: 16
+		})]
+	});
+};
+//#endregion
+export { TokenListItem, TokenListItemSkeleton };
+
+//# sourceMappingURL=TokenListItem.js.map