@lifi/widget 4.4.0 → 4.6.0

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

@@ -1 +1 @@
-{"version":3,"file":"TokenDetailsSheet.js","names":[],"sources":["../../../../src/components/TokenList/TokenDetailsSheet.tsx"],"sourcesContent":["import type { JSX, Ref } from 'react'\nimport { useImperativeHandle, useRef, useState } from 'react'\nimport { BottomSheet } from '../BottomSheet/BottomSheet.js'\nimport type { BottomSheetBase } from '../BottomSheet/types.js'\nimport { TokenDetailsSheetContent } from './TokenDetailsSheetContent.js'\nimport type { TokenDetailsSheetBase } from './types.js'\n\nexport const TokenDetailsSheet = ({\n  ref,\n}: {\n  ref?: Ref<TokenDetailsSheetBase>\n}): JSX.Element => {\n  const bottomSheetRef = useRef<BottomSheetBase>(null)\n  const [tokenAddress, setTokenAddress] = useState<string | undefined>(\n    undefined\n  )\n  const [chainId, setChainId] = useState<number | undefined>(undefined)\n  const [withoutContractAddress, setWithoutContractAddress] = useState(false)\n\n  useImperativeHandle(\n    ref,\n    () => ({\n      isOpen: () => bottomSheetRef.current?.isOpen(),\n      open: (address: string, noContractAddress: boolean, chainId: number) => {\n        setTokenAddress(address)\n        setWithoutContractAddress(noContractAddress)\n        setChainId(chainId)\n        bottomSheetRef.current?.open()\n      },\n      close: () => {\n        bottomSheetRef.current?.close()\n      },\n    }),\n    []\n  )\n\n  return (\n    <BottomSheet ref={bottomSheetRef} keepMounted>\n      <TokenDetailsSheetContent\n        onClose={() => bottomSheetRef.current?.close()}\n        tokenAddress={tokenAddress}\n        withoutContractAddress={withoutContractAddress}\n        chainId={chainId}\n      />\n    </BottomSheet>\n  )\n}\n"],"mappings":";;;;;AAOA,MAAa,qBAAqB,EAChC,UAGiB;CACjB,MAAM,iBAAiB,OAAwB,IAAI;CACnD,MAAM,CAAC,cAAc,mBAAmB,SACtC,KAAA,CACF;CACA,MAAM,CAAC,SAAS,cAAc,SAA6B,KAAA,CAAS;CACpE,MAAM,CAAC,wBAAwB,6BAA6B,SAAS,KAAK;CAE1E,oBACE,YACO;EACL,cAAc,eAAe,SAAS,OAAO;EAC7C,OAAO,SAAiB,mBAA4B,YAAoB;GACtE,gBAAgB,OAAO;GACvB,0BAA0B,iBAAiB;GAC3C,WAAW,OAAO;GAClB,eAAe,SAAS,KAAK;EAC/B;EACA,aAAa;GACX,eAAe,SAAS,MAAM;EAChC;CACF,IACA,CAAC,CACH;CAEA,OACE,oBAAC,aAAD;EAAa,KAAK;EAAgB,aAAA;YAChC,oBAAC,0BAAD;GACE,eAAe,eAAe,SAAS,MAAM;GAC/B;GACU;GACf;EACV,CAAA;CACU,CAAA;AAEjB"}
+{"version":3,"file":"TokenDetailsSheet.js","names":[],"sources":["../../../../src/components/TokenList/TokenDetailsSheet.tsx"],"sourcesContent":["import type { JSX, Ref } from 'react'\nimport { useImperativeHandle, useRef, useState } from 'react'\nimport { BottomSheet } from '../BottomSheet/BottomSheet.js'\nimport type { BottomSheetBase } from '../BottomSheet/types.js'\nimport { TokenDetailsSheetContent } from './TokenDetailsSheetContent.js'\nimport type { TokenDetailsSheetBase } from './types.js'\n\nexport const TokenDetailsSheet = ({\n  ref,\n}: {\n  ref?: Ref<TokenDetailsSheetBase>\n}): JSX.Element => {\n  const bottomSheetRef = useRef<BottomSheetBase>(null)\n  const [tokenAddress, setTokenAddress] = useState<string | undefined>(\n    undefined\n  )\n  const [chainId, setChainId] = useState<number | undefined>(undefined)\n  const [withoutContractAddress, setWithoutContractAddress] = useState(false)\n\n  useImperativeHandle(\n    ref,\n    () => ({\n      isOpen: () => bottomSheetRef.current?.isOpen(),\n      open: (address: string, noContractAddress: boolean, chainId: number) => {\n        setTokenAddress(address)\n        setWithoutContractAddress(noContractAddress)\n        setChainId(chainId)\n        bottomSheetRef.current?.open()\n      },\n      close: () => {\n        bottomSheetRef.current?.close()\n      },\n    }),\n    []\n  )\n\n  return (\n    <BottomSheet ref={bottomSheetRef} keepMounted>\n      <TokenDetailsSheetContent\n        onClose={() => bottomSheetRef.current?.close()}\n        tokenAddress={tokenAddress}\n        withoutContractAddress={withoutContractAddress}\n        chainId={chainId}\n      />\n    </BottomSheet>\n  )\n}\n"],"mappings":";;;;;AAOA,MAAa,qBAAqB,EAChC,UAGiB;CACjB,MAAM,iBAAiB,OAAwB,IAAI;CACnD,MAAM,CAAC,cAAc,mBAAmB,SACtC,KAAA,CACF;CACA,MAAM,CAAC,SAAS,cAAc,SAA6B,KAAA,CAAS;CACpE,MAAM,CAAC,wBAAwB,6BAA6B,SAAS,KAAK;CAE1E,oBACE,YACO;EACL,cAAc,eAAe,SAAS,OAAO;EAC7C,OAAO,SAAiB,mBAA4B,YAAoB;GACtE,gBAAgB,OAAO;GACvB,0BAA0B,iBAAiB;GAC3C,WAAW,OAAO;GAClB,eAAe,SAAS,KAAK;EAC/B;EACA,aAAa;GACX,eAAe,SAAS,MAAM;EAChC;CACF,IACA,CAAC,CACH;CAEA,OACE,oBAAC,aAAD;EAAa,KAAK;EAAgB,aAAA;EAChC,UAAA,oBAAC,0BAAD;GACE,eAAe,eAAe,SAAS,MAAM;GAC/B;GACU;GACf;EACV,CAAA;CACU,CAAA;AAEjB"}

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

@@ -1 +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 { type JSX, 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'\n\ninterface TokenDetailsSheetContentProps {\n  tokenAddress: string | undefined\n  chainId: number | undefined\n  withoutContractAddress: boolean\n  onClose: () => void\n}\n\nconst noDataLabel = '-'\n\nexport const TokenDetailsSheetContent = ({\n  tokenAddress,\n  chainId,\n  withoutContractAddress,\n  onClose,\n}: TokenDetailsSheetContentProps): JSX.Element => {\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            onClose()\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\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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"}
+{"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 { type JSX, 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'\n\ninterface TokenDetailsSheetContentProps {\n  tokenAddress: string | undefined\n  chainId: number | undefined\n  withoutContractAddress: boolean\n  onClose: () => void\n}\n\nconst noDataLabel = '-'\n\nexport const TokenDetailsSheetContent = ({\n  tokenAddress,\n  chainId,\n  withoutContractAddress,\n  onClose,\n}: TokenDetailsSheetContentProps): JSX.Element => {\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            onClose()\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\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":";;;;;;;;;;;;;;;AA2BA,MAAM,cAAc;AAEpB,MAAa,4BAA4B,EACvC,cACA,SACA,wBACA,cACgD;CAChD,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,EAAE,mBAAmB,YAAY;CACvC,MAAM,EAAE,iBAAiB,mBAAmB;CAE5C,MAAM,EAAE,OAAO,cAAc,SAAS,SAAS,cAAc,IAAI;CACjE,MAAM,QAAQ,cAAc,aAAa,OAAO,GAAG,CAAC,SAAS,YAAY,CAAC;CAE1E,MAAM,sBAAsB,OAAO,MAAwB;EACzD,EAAE,gBAAgB;EAClB,IAAI;GAEF,MAAM,UAAU,UAAU,UAAU,gBAAgB,EAAE;EACxD,QAAQ,CAER;CACF;CAEA,OACE,qBAAC,4BAAD,EAAA,UAAA;EACE,qBAAC,yBAAD,EAAA,UAAA,CACE,qBAAC,KAAD;GACE,IAAI;IACF,SAAS;IACT,eAAe;IACf,YAAY;IACZ,KAAK;GACP;GANF,UAAA,CAQE,oBAAC,aAAD;IACS;IACA;IACP,iBAAiB;IACjB,iBAAiB;IACN;GACZ,CAAA,GACD,oBAAC,iBAAD,EAAA,UACG,YACC,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,UAAD;IAAU,SAAQ;IAAU,OAAO;IAAI,QAAQ;GAAK,CAAA,GACpD,oBAAC,UAAD;IAAU,SAAQ;IAAU,OAAO;IAAI,QAAQ;GAAK,CAAA,CACpD,EAAA,CAAA,IAEF,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,YAAD;IACE,IAAI;KACF,YAAY;KACZ,UAAU;KACV,YAAY;KACZ,OAAO;IACT;IAEC,UAAA,OAAO,UAAU;GACR,CAAA,GACZ,oBAAC,OAAD,EAAA,UAAQ,OAAO,QAAQ,YAAmB,CAAA,CAC1C,EAAA,CAAA,EAEW,CAAA,CACd;EACL,CAAA,GAAA,oBAAC,YAAD;GACE,UAAU,MAAM;IACd,EAAE,gBAAgB;IAClB,QAAQ;GACV;GACA,IAAI;IAAE,IAAI;IAAQ,IAAI;GAAO;GAE7B,UAAA,oBAAC,OAAD,CAAQ,CAAA;EACE,CAAA,CACW,EAAA,CAAA;EACzB,oBAAC,oBAAD;GACa;GACX,OAAO,EAAE,0BAA0B;GACnC,OAAO;GACP,QAAQ;GAER,UAAA,oBAAC,YAAD;IACE,IAAI;KACF,YAAY;KACZ,UAAU;KACV,YAAY;KACZ,OAAO;IACT;IAEC,UAAA,OAAO,WACJ,EAAE,mBAAmB,EACnB,OAAO,MAAM,SACf,CAAC,IACD;GACM,CAAA;EACM,CAAA;EACnB,CAAC,0BACA,oBAAC,oBAAD;GACa;GACX,OAAO,EAAE,6BAA6B;GACtC,OAAO;GACP,QAAQ;GAER,UAAA,qBAAC,KAAD;IACE,IAAI;KACF,SAAS;KACT,eAAe;KACf,YAAY;KACZ,KAAK;IACP;IANF,UAAA;KAQE,oBAAC,YAAD;MACE,IAAI;OACF,YAAY;OACZ,UAAU;OACV,YAAY;OACZ,OAAO;MACT;MAEC,UAAA,eAAe,YAAY;KAClB,CAAA;KACX,gBACC,oBAAC,gBAAD;MAAgB,MAAK;MAAQ,SAAS;MACpC,UAAA,oBAAC,oBAAD,EAAoB,UAAS,UAAW,CAAA;KAC1B,CAAA;KAEjB,gBACC,oBAAC,gBAAD;MACE,MAAK;MACL,eAAe;MACf,MAAM,eAAe,cAAc,OAAO;MAC1C,QAAO;MACP,KAAI;MACJ,UAAU,MAAM,EAAE,gBAAgB;MAElC,UAAA,oBAAC,kBAAD,EAAkB,UAAS,UAAW,CAAA;KACxB,CAAA;IAEf;;EACa,CAAA;EAEtB,oBAAC,oBAAD;GACa;GACX,OAAO,EAAE,uBAAuB;GAChC,OAAO;GACP,QAAQ;GAER,UAAA,oBAAC,YAAD;IACE,IAAI;KACF,YAAY;KACZ,UAAU;KACV,YAAY;KACZ,OAAO;IACT;IAEC,UAAA,OAAO,eACJ,EAAE,mBAAmB;KACnB,OAAO,MAAM;KACb,UAAU;KACV,gBAAgB;KAChB,uBAAuB;IACzB,CAAC,IACD;GACM,CAAA;EACM,CAAA;EACpB,oBAAC,oBAAD;GACa;GACX,OAAO,EAAE,uBAAuB;GAChC,OAAO;GACP,QAAQ;GAER,UAAA,oBAAC,YAAD;IACE,IAAI;KACF,YAAY;KACZ,UAAU;KACV,YAAY;KACZ,OAAO;IACT;IAEC,UAAA,OAAO,eACJ,EAAE,mBAAmB;KACnB,OAAO,MAAM;KACb,UAAU;KACV,gBAAgB;KAChB,uBAAuB;IACzB,CAAC,IACD;GACM,CAAA;EACM,CAAA;CACM,EAAA,CAAA;AAEhC;AASA,MAAM,sBAAsB,EAC1B,OACA,OACA,QACA,WACA,eACgD;CAChD,OACE,qBAAC,iBAAD,EAAA,UAAA,CACE,oBAAC,OAAD,EAAA,UAAQ,MAAa,CAAA,GACpB,YACC,oBAAC,UAAD;EAAU,SAAQ;EAAiB;EAAe;CAAS,CAAA,IAE3D,QAEa,EAAA,CAAA;AAErB"}

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;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"}
+{"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"}

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

@@ -1,4 +1,5 @@
 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";
@@ -11,9 +12,10 @@ import { Avatar, Box, ListItemAvatar, ListItemText, Skeleton, Slide, Tooltip, Ty
 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 +29,7 @@ const TokenListItem = memo(({ onClick, size, start, token, chain, isBalanceLoadi
 				isBalanceLoading,
 				onClick,
 				chain,
+				chainName,
 				selected,
 				onShowTokenDetails
 			}),
@@ -56,7 +59,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,11 +84,46 @@ 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: {
@@ -106,14 +144,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"
 						} })
 					})]

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

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

@@ -24,18 +24,28 @@ const VirtualizedTokenList = ({ tokens, scrollElementRef, chainId, selectedToken
 		const token = tokens[index];
 		return `${token.chainId}-${token.address}-${index}`;
 	}, [tokens]);
+	const nativeTokenHoisted = useMemo(() => {
+		const first = tokens[0];
+		return !!first?.native && !first.pinned && !first.featured && !first.popular && !first.verified;
+	}, [tokens]);
+	const isListStartIndex = useCallback((index) => index === 0 || index === 1 && nativeTokenHoisted, [nativeTokenHoisted]);
 	const estimateSize = useCallback((index) => {
 		const currentToken = tokens[index];
 		const previousToken = tokens[index - 1];
 		let size = tokenItemHeight;
-		if (currentToken.pinned && index === 0) size += 24;
+		if (currentToken.pinned && isListStartIndex(index)) 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;
+		if (currentToken.featured && !currentToken.pinned && isListStartIndex(index)) size += 24;
+		const isNotPinned = !currentToken.pinned && !previousToken?.pinned;
+		if (!isListStartIndex(index) && isNotPinned && (previousToken?.amount && !currentToken.amount || previousToken?.featured && !currentToken.featured || previousToken?.popular && !currentToken.popular)) size += 32;
 		return size;
-	}, [tokens, showCategories]);
-	const { getVirtualItems, getTotalSize, scrollToIndex, measure } = useVirtualizer(useMemo(() => ({
+	}, [
+		tokens,
+		showCategories,
+		isListStartIndex
+	]);
+	const virtualizerConfig = useMemo(() => ({
 		count: tokens.length,
 		overscan: 5,
 		getScrollElement: () => scrollElementRef.current,
@@ -47,7 +57,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]);
@@ -69,8 +80,9 @@ const VirtualizedTokenList = ({ tokens, scrollElementRef, chainId, selectedToken
 				const currentToken = tokens[item.index];
 				const previousToken = tokens[item.index - 1];
 				const chain = chainsSet?.get(currentToken.chainId);
+				const isListStart = isListStartIndex(item.index);
 				const isNotPinned = !currentToken.pinned;
-				const isFirstPinnedToken = currentToken.pinned && item.index === 0;
+				const isFirstPinnedToken = currentToken.pinned && isListStart;
 				const isTransitionFromPinned = previousToken?.pinned && isNotPinned;
 				const isTransitionFromFeatured = previousToken?.featured && !currentToken.featured && isNotPinned;
 				const isTransitionFromMyTokens = previousToken?.amount && !currentToken.amount && isNotPinned;
@@ -79,7 +91,7 @@ const VirtualizedTokenList = ({ tokens, scrollElementRef, chainId, selectedToken
 					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 (isTransitionFromPinned && currentToken.featured || currentToken.featured && isNotPinned && isListStart) return t("main.featuredTokens");
 					if ((isTransitionFromFeatured || isTransitionFromPinned) && currentToken.amount && isNotPinned) return t("main.myTokens");
 					if ((isTransitionFromFeatured || isTransitionFromMyTokens || isTransitionFromPinned) && currentToken.popular && isNotPinned) return t("main.popularTokens");
 					if (isTransitionFromMyTokens || isTransitionFromFeatured || isTransitionFromPinned || isTransitionFromPopular) return t("main.allTokens");
@@ -92,6 +104,7 @@ const VirtualizedTokenList = ({ tokens, scrollElementRef, chainId, selectedToken
 					start: item.start,
 					token: currentToken,
 					chain: isAllNetworks ? chain : void 0,
+					chainName: chain?.name,
 					selected: isSelected,
 					onShowTokenDetails,
 					isBalanceLoading,
@@ -101,7 +114,7 @@ const VirtualizedTokenList = ({ tokens, scrollElementRef, chainId, selectedToken
 							fontWeight: 600,
 							lineHeight: "16px",
 							px: 1.5,
-							pt: isFirstPinnedToken || currentToken.featured && isNotPinned && item.index === 0 ? 0 : 1,
+							pt: isFirstPinnedToken || currentToken.featured && isNotPinned && isListStart ? 0 : 1,
 							pb: 1
 						},
 						children: startAdornmentLabel

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"TokenPillButton.js","names":[],"sources":["../../../../src/components/TokenPillButton/TokenPillButton.tsx"],"sourcesContent":["import { useNavigate } from '@tanstack/react-router'\nimport type { JSX } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useChain } from '../../hooks/useChain.js'\nimport { useToken } from '../../hooks/useToken.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport type { FormTypeProps } from '../../stores/form/types.js'\nimport { FormKeyHelper } from '../../stores/form/types.js'\nimport { useFieldValues } from '../../stores/form/useFieldValues.js'\nimport type { DisabledUIConfig } from '../../types/widget.js'\nimport { navigationRoutes } from '../../utils/navigationRoutes.js'\nimport { AvatarBadgedDefault } from '../Avatar/Avatar.js'\nimport { TokenAvatar } from '../Avatar/TokenAvatar.js'\nimport {\n  TokenPill,\n  TokenPillLabel,\n  TokenPillSymbol,\n  TokenSelectPill,\n} from './TokenPillButton.style.js'\n\nexport const TokenPillButton: React.FC<FormTypeProps> = ({\n  formType,\n}): JSX.Element => {\n  const { t } = useTranslation()\n  const navigate = useNavigate()\n  const { disabledUI, mode } = useWidgetConfig()\n\n  const tokenKey = FormKeyHelper.getTokenKey(formType)\n  const [chainId, tokenAddress] = useFieldValues(\n    FormKeyHelper.getChainKey(formType),\n    tokenKey\n  )\n\n  const { chain } = useChain(chainId)\n  const { token } = useToken(chainId, tokenAddress)\n\n  const isSelected = !!(chain && token)\n\n  const handleClick = (): void => {\n    navigate({\n      to:\n        formType === 'from'\n          ? navigationRoutes.fromToken\n          : mode === 'refuel'\n            ? navigationRoutes.toTokenNative\n            : navigationRoutes.toToken,\n    })\n  }\n\n  const isDisabled = !!disabledUI?.[tokenKey as keyof DisabledUIConfig]\n\n  const testId = `widget-${formType}-token-button`\n\n  if (isSelected) {\n    return (\n      <TokenPill\n        onClick={isDisabled ? undefined : handleClick}\n        disabled={isDisabled}\n        data-testid={testId}\n      >\n        <TokenAvatar\n          token={token}\n          chain={chain}\n          tokenAvatarSize={24}\n          chainAvatarSize={12}\n        />\n        <TokenPillSymbol>{token.symbol}</TokenPillSymbol>\n      </TokenPill>\n    )\n  }\n\n  return (\n    <TokenSelectPill\n      onClick={isDisabled ? undefined : handleClick}\n      data-testid={testId}\n    >\n      <AvatarBadgedDefault chain={chain} avatarSize={24} badgeSize={12} />\n      <TokenPillLabel>{t('main.select')}</TokenPillLabel>\n    </TokenSelectPill>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;AAoBA,MAAa,mBAA4C,EACvD,eACiB;CACjB,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,WAAW,YAAY;CAC7B,MAAM,EAAE,YAAY,SAAS,gBAAgB;CAE7C,MAAM,WAAW,cAAc,YAAY,QAAQ;CACnD,MAAM,CAAC,SAAS,gBAAgB,eAC9B,cAAc,YAAY,QAAQ,GAClC,QACF;CAEA,MAAM,EAAE,UAAU,SAAS,OAAO;CAClC,MAAM,EAAE,UAAU,SAAS,SAAS,YAAY;CAEhD,MAAM,aAAa,CAAC,EAAE,SAAS;CAE/B,MAAM,oBAA0B;EAC9B,SAAS,EACP,IACE,aAAa,SACT,iBAAiB,YACjB,SAAS,WACP,iBAAiB,gBACjB,iBAAiB,QAC3B,CAAC;CACH;CAEA,MAAM,aAAa,CAAC,CAAC,aAAa;CAElC,MAAM,SAAS,UAAU,SAAS;CAElC,IAAI,YACF,OACE,qBAAC,WAAD;EACE,SAAS,aAAa,KAAA,IAAY;EAClC,UAAU;EACV,eAAa;YAHf,CAKE,oBAAC,aAAD;GACS;GACA;GACP,iBAAiB;GACjB,iBAAiB;EAClB,CAAA,GACD,oBAAC,iBAAD,EAAA,UAAkB,MAAM,OAAwB,CAAA,CACvC;;CAIf,OACE,qBAAC,iBAAD;EACE,SAAS,aAAa,KAAA,IAAY;EAClC,eAAa;YAFf,CAIE,oBAAC,qBAAD;GAA4B;GAAO,YAAY;GAAI,WAAW;EAAK,CAAA,GACnE,oBAAC,gBAAD,EAAA,UAAiB,EAAE,aAAa,EAAkB,CAAA,CACnC;;AAErB"}
+{"version":3,"file":"TokenPillButton.js","names":[],"sources":["../../../../src/components/TokenPillButton/TokenPillButton.tsx"],"sourcesContent":["import { useNavigate } from '@tanstack/react-router'\nimport type { JSX } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useChain } from '../../hooks/useChain.js'\nimport { useToken } from '../../hooks/useToken.js'\nimport { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'\nimport type { FormTypeProps } from '../../stores/form/types.js'\nimport { FormKeyHelper } from '../../stores/form/types.js'\nimport { useFieldValues } from '../../stores/form/useFieldValues.js'\nimport type { DisabledUIConfig } from '../../types/widget.js'\nimport { navigationRoutes } from '../../utils/navigationRoutes.js'\nimport { AvatarBadgedDefault } from '../Avatar/Avatar.js'\nimport { TokenAvatar } from '../Avatar/TokenAvatar.js'\nimport {\n  TokenPill,\n  TokenPillLabel,\n  TokenPillSymbol,\n  TokenSelectPill,\n} from './TokenPillButton.style.js'\n\nexport const TokenPillButton: React.FC<FormTypeProps> = ({\n  formType,\n}): JSX.Element => {\n  const { t } = useTranslation()\n  const navigate = useNavigate()\n  const { disabledUI, mode } = useWidgetConfig()\n\n  const tokenKey = FormKeyHelper.getTokenKey(formType)\n  const [chainId, tokenAddress] = useFieldValues(\n    FormKeyHelper.getChainKey(formType),\n    tokenKey\n  )\n\n  const { chain } = useChain(chainId)\n  const { token } = useToken(chainId, tokenAddress)\n\n  const isSelected = !!(chain && token)\n\n  const handleClick = (): void => {\n    navigate({\n      to:\n        formType === 'from'\n          ? navigationRoutes.fromToken\n          : mode === 'refuel'\n            ? navigationRoutes.toTokenNative\n            : navigationRoutes.toToken,\n    })\n  }\n\n  const isDisabled = !!disabledUI?.[tokenKey as keyof DisabledUIConfig]\n\n  const testId = `widget-${formType}-token-button`\n\n  if (isSelected) {\n    return (\n      <TokenPill\n        onClick={isDisabled ? undefined : handleClick}\n        disabled={isDisabled}\n        data-testid={testId}\n      >\n        <TokenAvatar\n          token={token}\n          chain={chain}\n          tokenAvatarSize={24}\n          chainAvatarSize={12}\n        />\n        <TokenPillSymbol>{token.symbol}</TokenPillSymbol>\n      </TokenPill>\n    )\n  }\n\n  return (\n    <TokenSelectPill\n      onClick={isDisabled ? undefined : handleClick}\n      data-testid={testId}\n    >\n      <AvatarBadgedDefault chain={chain} avatarSize={24} badgeSize={12} />\n      <TokenPillLabel>{t('main.select')}</TokenPillLabel>\n    </TokenSelectPill>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;AAoBA,MAAa,mBAA4C,EACvD,eACiB;CACjB,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,WAAW,YAAY;CAC7B,MAAM,EAAE,YAAY,SAAS,gBAAgB;CAE7C,MAAM,WAAW,cAAc,YAAY,QAAQ;CACnD,MAAM,CAAC,SAAS,gBAAgB,eAC9B,cAAc,YAAY,QAAQ,GAClC,QACF;CAEA,MAAM,EAAE,UAAU,SAAS,OAAO;CAClC,MAAM,EAAE,UAAU,SAAS,SAAS,YAAY;CAEhD,MAAM,aAAa,CAAC,EAAE,SAAS;CAE/B,MAAM,oBAA0B;EAC9B,SAAS,EACP,IACE,aAAa,SACT,iBAAiB,YACjB,SAAS,WACP,iBAAiB,gBACjB,iBAAiB,QAC3B,CAAC;CACH;CAEA,MAAM,aAAa,CAAC,CAAC,aAAa;CAElC,MAAM,SAAS,UAAU,SAAS;CAElC,IAAI,YACF,OACE,qBAAC,WAAD;EACE,SAAS,aAAa,KAAA,IAAY;EAClC,UAAU;EACV,eAAa;EAHf,UAAA,CAKE,oBAAC,aAAD;GACS;GACA;GACP,iBAAiB;GACjB,iBAAiB;EAClB,CAAA,GACD,oBAAC,iBAAD,EAAA,UAAkB,MAAM,OAAwB,CAAA,CACvC;;CAIf,OACE,qBAAC,iBAAD;EACE,SAAS,aAAa,KAAA,IAAY;EAClC,eAAa;EAFf,UAAA,CAIE,oBAAC,qBAAD;GAA4B;GAAO,YAAY;GAAI,WAAW;EAAK,CAAA,GACnE,oBAAC,gBAAD,EAAA,UAAiB,EAAE,aAAa,EAAkB,CAAA,CACnC;;AAErB"}

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

@@ -26,10 +26,11 @@ const TokenRate = ({ route }) => {
 	};
 	const fromToRate = Number.parseFloat(formatUnits(toToken.amount, toToken.decimals)) / Number.parseFloat(formatUnits(fromToken.amount, fromToken.decimals));
 	const toFromRate = Number.parseFloat(formatUnits(fromToken.amount, fromToken.decimals)) / Number.parseFloat(formatUnits(toToken.amount, toToken.decimals));
+	const rateText = isForward ? `1 ${fromToken.symbol} ≈ ${t("format.tokenAmount", { value: fromToRate })} ${toToken.symbol}` : `1 ${toToken.symbol} ≈ ${t("format.tokenAmount", { value: toFromRate })} ${fromToken.symbol}`;
 	return /* @__PURE__ */ jsx(TokenRateTypography, {
 		onClick: toggleRate,
 		role: "button",
-		children: isForward ? `1 ${fromToken.symbol} ≈ ${t("format.tokenAmount", { value: fromToRate })} ${toToken.symbol}` : `1 ${toToken.symbol} ≈ ${t("format.tokenAmount", { value: toFromRate })} ${fromToken.symbol}`
+		children: rateText
 	});
 };
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"TokenRate.js","names":[],"sources":["../../../../src/components/TokenRate/TokenRate.tsx"],"sourcesContent":["import { formatUnits, type RouteExtended } from '@lifi/sdk'\nimport type { TypographyProps } from '@mui/material'\nimport type { MouseEventHandler } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { create } from 'zustand'\nimport { TokenRateTypography } from './TokenRate.style.js'\n\ninterface TokenRateProps extends TypographyProps {\n  route: RouteExtended\n}\n\ninterface TokenRateState {\n  isForward: boolean\n  toggleIsForward(): void\n}\n\nconst useTokenRate = create<TokenRateState>((set) => ({\n  isForward: true,\n  toggleIsForward: () => set((state) => ({ isForward: !state.isForward })),\n}))\n\nexport const TokenRate: React.FC<TokenRateProps> = ({ route }) => {\n  const { t } = useTranslation()\n  const { isForward, toggleIsForward } = useTokenRate()\n\n  const toggleRate: MouseEventHandler<HTMLSpanElement> = (e) => {\n    e.stopPropagation()\n    toggleIsForward()\n  }\n\n  const lastStep = route.steps.at(-1)\n\n  const fromToken = {\n    ...route.fromToken,\n    amount: BigInt(route.fromAmount),\n  }\n  const toToken = {\n    ...(lastStep?.execution?.toToken ??\n      lastStep?.action.toToken ??\n      route.toToken),\n    amount: lastStep?.execution?.toAmount\n      ? BigInt(lastStep.execution.toAmount)\n      : BigInt(route.toAmount),\n  }\n\n  const fromToRate =\n    Number.parseFloat(formatUnits(toToken.amount!, toToken.decimals)) /\n    Number.parseFloat(formatUnits(fromToken.amount!, fromToken.decimals))\n  const toFromRate =\n    Number.parseFloat(formatUnits(fromToken.amount!, fromToken.decimals)) /\n    Number.parseFloat(formatUnits(toToken.amount!, toToken.decimals))\n\n  const rateText = isForward\n    ? `1 ${fromToken.symbol} ≈ ${t('format.tokenAmount', { value: fromToRate })} ${toToken.symbol}`\n    : `1 ${toToken.symbol} ≈ ${t('format.tokenAmount', { value: toFromRate })} ${fromToken.symbol}`\n\n  return (\n    <TokenRateTypography onClick={toggleRate} role=\"button\">\n      {rateText}\n    </TokenRateTypography>\n  )\n}\n"],"mappings":";;;;;;AAgBA,MAAM,eAAe,QAAwB,SAAS;CACpD,WAAW;CACX,uBAAuB,KAAK,WAAW,EAAE,WAAW,CAAC,MAAM,UAAU,EAAE;AACzE,EAAE;AAEF,MAAa,aAAuC,EAAE,YAAY;CAChE,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,EAAE,WAAW,oBAAoB,aAAa;CAEpD,MAAM,cAAkD,MAAM;EAC5D,EAAE,gBAAgB;EAClB,gBAAgB;CAClB;CAEA,MAAM,WAAW,MAAM,MAAM,GAAG,EAAE;CAElC,MAAM,YAAY;EAChB,GAAG,MAAM;EACT,QAAQ,OAAO,MAAM,UAAU;CACjC;CACA,MAAM,UAAU;EACd,GAAI,UAAU,WAAW,WACvB,UAAU,OAAO,WACjB,MAAM;EACR,QAAQ,UAAU,WAAW,WACzB,OAAO,SAAS,UAAU,QAAQ,IAClC,OAAO,MAAM,QAAQ;CAC3B;CAEA,MAAM,aACJ,OAAO,WAAW,YAAY,QAAQ,QAAS,QAAQ,QAAQ,CAAC,IAChE,OAAO,WAAW,YAAY,UAAU,QAAS,UAAU,QAAQ,CAAC;CACtE,MAAM,aACJ,OAAO,WAAW,YAAY,UAAU,QAAS,UAAU,QAAQ,CAAC,IACpE,OAAO,WAAW,YAAY,QAAQ,QAAS,QAAQ,QAAQ,CAAC;CAMlE,OACE,oBAAC,qBAAD;EAAqB,SAAS;EAAY,MAAK;YALhC,YACb,KAAK,UAAU,OAAO,KAAK,EAAE,sBAAsB,EAAE,OAAO,WAAW,CAAC,EAAE,GAAG,QAAQ,WACrF,KAAK,QAAQ,OAAO,KAAK,EAAE,sBAAsB,EAAE,OAAO,WAAW,CAAC,EAAE,GAAG,UAAU;CAKlE,CAAA;AAEzB"}
+{"version":3,"file":"TokenRate.js","names":[],"sources":["../../../../src/components/TokenRate/TokenRate.tsx"],"sourcesContent":["import { formatUnits, type RouteExtended } from '@lifi/sdk'\nimport type { TypographyProps } from '@mui/material'\nimport type { MouseEventHandler } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { create } from 'zustand'\nimport { TokenRateTypography } from './TokenRate.style.js'\n\ninterface TokenRateProps extends TypographyProps {\n  route: RouteExtended\n}\n\ninterface TokenRateState {\n  isForward: boolean\n  toggleIsForward(): void\n}\n\nconst useTokenRate = create<TokenRateState>((set) => ({\n  isForward: true,\n  toggleIsForward: () => set((state) => ({ isForward: !state.isForward })),\n}))\n\nexport const TokenRate: React.FC<TokenRateProps> = ({ route }) => {\n  const { t } = useTranslation()\n  const { isForward, toggleIsForward } = useTokenRate()\n\n  const toggleRate: MouseEventHandler<HTMLSpanElement> = (e) => {\n    e.stopPropagation()\n    toggleIsForward()\n  }\n\n  const lastStep = route.steps.at(-1)\n\n  const fromToken = {\n    ...route.fromToken,\n    amount: BigInt(route.fromAmount),\n  }\n  const toToken = {\n    ...(lastStep?.execution?.toToken ??\n      lastStep?.action.toToken ??\n      route.toToken),\n    amount: lastStep?.execution?.toAmount\n      ? BigInt(lastStep.execution.toAmount)\n      : BigInt(route.toAmount),\n  }\n\n  const fromToRate =\n    Number.parseFloat(formatUnits(toToken.amount!, toToken.decimals)) /\n    Number.parseFloat(formatUnits(fromToken.amount!, fromToken.decimals))\n  const toFromRate =\n    Number.parseFloat(formatUnits(fromToken.amount!, fromToken.decimals)) /\n    Number.parseFloat(formatUnits(toToken.amount!, toToken.decimals))\n\n  const rateText = isForward\n    ? `1 ${fromToken.symbol} ≈ ${t('format.tokenAmount', { value: fromToRate })} ${toToken.symbol}`\n    : `1 ${toToken.symbol} ≈ ${t('format.tokenAmount', { value: toFromRate })} ${fromToken.symbol}`\n\n  return (\n    <TokenRateTypography onClick={toggleRate} role=\"button\">\n      {rateText}\n    </TokenRateTypography>\n  )\n}\n"],"mappings":";;;;;;AAgBA,MAAM,eAAe,QAAwB,SAAS;CACpD,WAAW;CACX,uBAAuB,KAAK,WAAW,EAAE,WAAW,CAAC,MAAM,UAAU,EAAE;AACzE,EAAE;AAEF,MAAa,aAAuC,EAAE,YAAY;CAChE,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,EAAE,WAAW,oBAAoB,aAAa;CAEpD,MAAM,cAAkD,MAAM;EAC5D,EAAE,gBAAgB;EAClB,gBAAgB;CAClB;CAEA,MAAM,WAAW,MAAM,MAAM,GAAG,EAAE;CAElC,MAAM,YAAY;EAChB,GAAG,MAAM;EACT,QAAQ,OAAO,MAAM,UAAU;CACjC;CACA,MAAM,UAAU;EACd,GAAI,UAAU,WAAW,WACvB,UAAU,OAAO,WACjB,MAAM;EACR,QAAQ,UAAU,WAAW,WACzB,OAAO,SAAS,UAAU,QAAQ,IAClC,OAAO,MAAM,QAAQ;CAC3B;CAEA,MAAM,aACJ,OAAO,WAAW,YAAY,QAAQ,QAAS,QAAQ,QAAQ,CAAC,IAChE,OAAO,WAAW,YAAY,UAAU,QAAS,UAAU,QAAQ,CAAC;CACtE,MAAM,aACJ,OAAO,WAAW,YAAY,UAAU,QAAS,UAAU,QAAQ,CAAC,IACpE,OAAO,WAAW,YAAY,QAAQ,QAAS,QAAQ,QAAQ,CAAC;CAElE,MAAM,WAAW,YACb,KAAK,UAAU,OAAO,KAAK,EAAE,sBAAsB,EAAE,OAAO,WAAW,CAAC,EAAE,GAAG,QAAQ,WACrF,KAAK,QAAQ,OAAO,KAAK,EAAE,sBAAsB,EAAE,OAAO,WAAW,CAAC,EAAE,GAAG,UAAU;CAEzF,OACE,oBAAC,qBAAD;EAAqB,SAAS;EAAY,MAAK;EAC5C,UAAA;CACkB,CAAA;AAEzB"}

package/dist/esm/components/Tools/ToolItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToolItem.js","names":["ListItemText"],"sources":["../../../../src/components/Tools/ToolItem.tsx"],"sourcesContent":["import { Avatar, Checkbox, ListItemAvatar } from '@mui/material'\nimport { memo, type NamedExoticComponent } from 'react'\nimport { ListItemText } from '../ListItemText.js'\nimport { SettingsListItemButton } from '../SettingsListItemButton.js'\n\ninterface ToolItemProps {\n  tool: any\n  typeKey: string\n  isEnabled: boolean\n  onToggle: (key: string) => void\n}\n\nexport const ToolItem: NamedExoticComponent<ToolItemProps> =\n  memo<ToolItemProps>(({ tool, typeKey, isEnabled, onToggle }) => {\n    const handleClick = () => {\n      onToggle(tool.key)\n    }\n\n    const handleCheckboxClick = (e: React.MouseEvent) => {\n      e.stopPropagation()\n      onToggle(tool.key)\n    }\n\n    return (\n      <SettingsListItemButton onClick={handleClick}>\n        <ListItemAvatar>\n          <Avatar src={tool.logoURI} alt={tool.name}>\n            {tool.name[0]}\n          </Avatar>\n        </ListItemAvatar>\n        <ListItemText primary={tool.name} />\n        <Checkbox\n          id={`${typeKey}-${tool.key}-checkbox`}\n          checked={isEnabled}\n          onChange={handleClick}\n          onClick={handleCheckboxClick}\n          sx={{ mr: -1 }}\n        />\n      </SettingsListItemButton>\n    )\n  })\n"],"mappings":";;;;;;AAYA,MAAa,WACX,MAAqB,EAAE,MAAM,SAAS,WAAW,eAAe;CAC9D,MAAM,oBAAoB;EACxB,SAAS,KAAK,GAAG;CACnB;CAEA,MAAM,uBAAuB,MAAwB;EACnD,EAAE,gBAAgB;EAClB,SAAS,KAAK,GAAG;CACnB;CAEA,OACE,qBAAC,wBAAD;EAAwB,SAAS;YAAjC;GACE,oBAAC,gBAAD,EAAA,UACE,oBAAC,QAAD;IAAQ,KAAK,KAAK;IAAS,KAAK,KAAK;cAClC,KAAK,KAAK;GACL,CAAA,EACM,CAAA;GAChB,oBAACA,gBAAD,EAAc,SAAS,KAAK,KAAO,CAAA;GACnC,oBAAC,UAAD;IACE,IAAI,GAAG,QAAQ,GAAG,KAAK,IAAI;IAC3B,SAAS;IACT,UAAU;IACV,SAAS;IACT,IAAI,EAAE,IAAI,GAAG;GACd,CAAA;EACqB;;AAE5B,CAAC"}
+{"version":3,"file":"ToolItem.js","names":["ListItemText"],"sources":["../../../../src/components/Tools/ToolItem.tsx"],"sourcesContent":["import { Avatar, Checkbox, ListItemAvatar } from '@mui/material'\nimport { memo, type NamedExoticComponent } from 'react'\nimport { ListItemText } from '../ListItemText.js'\nimport { SettingsListItemButton } from '../SettingsListItemButton.js'\n\ninterface ToolItemProps {\n  tool: any\n  typeKey: string\n  isEnabled: boolean\n  onToggle: (key: string) => void\n}\n\nexport const ToolItem: NamedExoticComponent<ToolItemProps> =\n  memo<ToolItemProps>(({ tool, typeKey, isEnabled, onToggle }) => {\n    const handleClick = () => {\n      onToggle(tool.key)\n    }\n\n    const handleCheckboxClick = (e: React.MouseEvent) => {\n      e.stopPropagation()\n      onToggle(tool.key)\n    }\n\n    return (\n      <SettingsListItemButton onClick={handleClick}>\n        <ListItemAvatar>\n          <Avatar src={tool.logoURI} alt={tool.name}>\n            {tool.name[0]}\n          </Avatar>\n        </ListItemAvatar>\n        <ListItemText primary={tool.name} />\n        <Checkbox\n          id={`${typeKey}-${tool.key}-checkbox`}\n          checked={isEnabled}\n          onChange={handleClick}\n          onClick={handleCheckboxClick}\n          sx={{ mr: -1 }}\n        />\n      </SettingsListItemButton>\n    )\n  })\n"],"mappings":";;;;;;AAYA,MAAa,WACX,MAAqB,EAAE,MAAM,SAAS,WAAW,eAAe;CAC9D,MAAM,oBAAoB;EACxB,SAAS,KAAK,GAAG;CACnB;CAEA,MAAM,uBAAuB,MAAwB;EACnD,EAAE,gBAAgB;EAClB,SAAS,KAAK,GAAG;CACnB;CAEA,OACE,qBAAC,wBAAD;EAAwB,SAAS;EAAjC,UAAA;GACE,oBAAC,gBAAD,EAAA,UACE,oBAAC,QAAD;IAAQ,KAAK,KAAK;IAAS,KAAK,KAAK;IAClC,UAAA,KAAK,KAAK;GACL,CAAA,EACM,CAAA;GAChB,oBAACA,gBAAD,EAAc,SAAS,KAAK,KAAO,CAAA;GACnC,oBAAC,UAAD;IACE,IAAI,GAAG,QAAQ,GAAG,KAAK,IAAI;IAC3B,SAAS;IACT,UAAU;IACV,SAAS;IACT,IAAI,EAAE,IAAI,GAAG;GACd,CAAA;EACqB;;AAE5B,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"Tools.js","names":[],"sources":["../../../../src/components/Tools/Tools.tsx"],"sourcesContent":["import type { ToolsResponse } from '@lifi/sdk'\nimport { List } from '@mui/material'\nimport { type JSX, useMemo, useRef } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useSettingsStore } from '../../stores/settings/SettingsStore.js'\nimport { useSettingsActions } from '../../stores/settings/useSettingsActions.js'\nimport { SearchNotFound } from '../Search/SearchNotFound.js'\nimport { ToolItem } from './ToolItem.js'\n\nexport type ToolCollectionTypes =\n  | ToolsResponse['exchanges']\n  | ToolsResponse['bridges']\n\ninterface ToolsProps {\n  filteredTools: ToolCollectionTypes\n  type: 'Bridges' | 'Exchanges'\n}\n\nexport const Tools = ({ filteredTools, type }: ToolsProps): JSX.Element => {\n  const { t } = useTranslation()\n  const typeKey = type.toLowerCase() as 'bridges' | 'exchanges'\n  const enabledTools = useSettingsStore((state) => state[`_enabled${type}`])\n  const { setToolValue } = useSettingsActions()\n\n  // Use ref to access current enabledTools without causing re-renders\n  const enabledToolsRef = useRef(enabledTools)\n  enabledToolsRef.current = enabledTools\n  const toggleCallbacks = useMemo(() => {\n    const callbacks: Record<string, () => void> = {}\n    filteredTools.forEach((tool) => {\n      callbacks[tool.key] = () => {\n        // Access current state via ref to avoid dependency on enabledTools\n        setToolValue(type, tool.key, !enabledToolsRef.current[tool.key])\n      }\n    })\n    return callbacks\n  }, [filteredTools, setToolValue, type])\n\n  if (!filteredTools.length) {\n    return <SearchNotFound message={t(`info.message.empty${type}List`)} />\n  }\n\n  return (\n    <List\n      className=\"long-list\"\n      disablePadding\n      data-testid={`${typeKey}-list`}\n      sx={{ px: 1.5, pb: 2 }}\n    >\n      {filteredTools.map((tool) => (\n        <ToolItem\n          key={tool.key}\n          tool={tool}\n          typeKey={typeKey}\n          isEnabled={enabledTools[tool.key]}\n          onToggle={toggleCallbacks[tool.key]}\n        />\n      ))}\n    </List>\n  )\n}\n"],"mappings":";;;;;;;;;AAkBA,MAAa,SAAS,EAAE,eAAe,WAAoC;CACzE,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,UAAU,KAAK,YAAY;CACjC,MAAM,eAAe,kBAAkB,UAAU,MAAM,WAAW,OAAO;CACzE,MAAM,EAAE,iBAAiB,mBAAmB;CAG5C,MAAM,kBAAkB,OAAO,YAAY;CAC3C,gBAAgB,UAAU;CAC1B,MAAM,kBAAkB,cAAc;EACpC,MAAM,YAAwC,CAAC;EAC/C,cAAc,SAAS,SAAS;GAC9B,UAAU,KAAK,aAAa;IAE1B,aAAa,MAAM,KAAK,KAAK,CAAC,gBAAgB,QAAQ,KAAK,IAAI;GACjE;EACF,CAAC;EACD,OAAO;CACT,GAAG;EAAC;EAAe;EAAc;CAAI,CAAC;CAEtC,IAAI,CAAC,cAAc,QACjB,OAAO,oBAAC,gBAAD,EAAgB,SAAS,EAAE,qBAAqB,KAAK,KAAK,EAAI,CAAA;CAGvE,OACE,oBAAC,MAAD;EACE,WAAU;EACV,gBAAA;EACA,eAAa,GAAG,QAAQ;EACxB,IAAI;GAAE,IAAI;GAAK,IAAI;EAAE;YAEpB,cAAc,KAAK,SAClB,oBAAC,UAAD;GAEQ;GACG;GACT,WAAW,aAAa,KAAK;GAC7B,UAAU,gBAAgB,KAAK;EAChC,GALM,KAAK,GAKX,CACF;CACG,CAAA;AAEV"}
+{"version":3,"file":"Tools.js","names":[],"sources":["../../../../src/components/Tools/Tools.tsx"],"sourcesContent":["import type { ToolsResponse } from '@lifi/sdk'\nimport { List } from '@mui/material'\nimport { type JSX, useMemo, useRef } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useSettingsStore } from '../../stores/settings/SettingsStore.js'\nimport { useSettingsActions } from '../../stores/settings/useSettingsActions.js'\nimport { SearchNotFound } from '../Search/SearchNotFound.js'\nimport { ToolItem } from './ToolItem.js'\n\nexport type ToolCollectionTypes =\n  | ToolsResponse['exchanges']\n  | ToolsResponse['bridges']\n\ninterface ToolsProps {\n  filteredTools: ToolCollectionTypes\n  type: 'Bridges' | 'Exchanges'\n}\n\nexport const Tools = ({ filteredTools, type }: ToolsProps): JSX.Element => {\n  const { t } = useTranslation()\n  const typeKey = type.toLowerCase() as 'bridges' | 'exchanges'\n  const enabledTools = useSettingsStore((state) => state[`_enabled${type}`])\n  const { setToolValue } = useSettingsActions()\n\n  // Use ref to access current enabledTools without causing re-renders\n  const enabledToolsRef = useRef(enabledTools)\n  enabledToolsRef.current = enabledTools\n  const toggleCallbacks = useMemo(() => {\n    const callbacks: Record<string, () => void> = {}\n    filteredTools.forEach((tool) => {\n      callbacks[tool.key] = () => {\n        // Access current state via ref to avoid dependency on enabledTools\n        setToolValue(type, tool.key, !enabledToolsRef.current[tool.key])\n      }\n    })\n    return callbacks\n  }, [filteredTools, setToolValue, type])\n\n  if (!filteredTools.length) {\n    return <SearchNotFound message={t(`info.message.empty${type}List`)} />\n  }\n\n  return (\n    <List\n      className=\"long-list\"\n      disablePadding\n      data-testid={`${typeKey}-list`}\n      sx={{ px: 1.5, pb: 2 }}\n    >\n      {filteredTools.map((tool) => (\n        <ToolItem\n          key={tool.key}\n          tool={tool}\n          typeKey={typeKey}\n          isEnabled={enabledTools[tool.key]}\n          onToggle={toggleCallbacks[tool.key]}\n        />\n      ))}\n    </List>\n  )\n}\n"],"mappings":";;;;;;;;;AAkBA,MAAa,SAAS,EAAE,eAAe,WAAoC;CACzE,MAAM,EAAE,MAAM,eAAe;CAC7B,MAAM,UAAU,KAAK,YAAY;CACjC,MAAM,eAAe,kBAAkB,UAAU,MAAM,WAAW,OAAO;CACzE,MAAM,EAAE,iBAAiB,mBAAmB;CAG5C,MAAM,kBAAkB,OAAO,YAAY;CAC3C,gBAAgB,UAAU;CAC1B,MAAM,kBAAkB,cAAc;EACpC,MAAM,YAAwC,CAAC;EAC/C,cAAc,SAAS,SAAS;GAC9B,UAAU,KAAK,aAAa;IAE1B,aAAa,MAAM,KAAK,KAAK,CAAC,gBAAgB,QAAQ,KAAK,IAAI;GACjE;EACF,CAAC;EACD,OAAO;CACT,GAAG;EAAC;EAAe;EAAc;CAAI,CAAC;CAEtC,IAAI,CAAC,cAAc,QACjB,OAAO,oBAAC,gBAAD,EAAgB,SAAS,EAAE,qBAAqB,KAAK,KAAK,EAAI,CAAA;CAGvE,OACE,oBAAC,MAAD;EACE,WAAU;EACV,gBAAA;EACA,eAAa,GAAG,QAAQ;EACxB,IAAI;GAAE,IAAI;GAAK,IAAI;EAAE;EAEpB,UAAA,cAAc,KAAK,SAClB,oBAAC,UAAD;GAEQ;GACG;GACT,WAAW,aAAa,KAAK;GAC7B,UAAU,gBAAgB,KAAK;EAChC,GALM,KAAK,GAKX,CACF;CACG,CAAA;AAEV"}

package/dist/esm/components/TransactionCard/ActiveTransactionCard.js

@@ -19,32 +19,33 @@ const ActiveTransactionCard = ({ route, status, onClick, onDelete }) => {
 	const lastActiveAction = lastActiveStep?.execution?.actions?.at(-1);
 	const { title } = useActionMessage(lastActiveStep, lastActiveAction);
 	const isFailed = status === 8;
+	const statusIcon = (() => {
+		if (isFailed) return /* @__PURE__ */ jsx(IconCircle, {
+			status: "error",
+			size: 24
+		});
+		if ([
+			"ACTION_REQUIRED",
+			"MESSAGE_REQUIRED",
+			"RESET_REQUIRED"
+		].includes(lastActiveAction?.status ?? "")) return /* @__PURE__ */ jsx(IconCircle, {
+			status: "info",
+			size: 24
+		});
+		return /* @__PURE__ */ jsx(PendingCircle, { children: /* @__PURE__ */ jsx(CircularProgressPending, {
+			size: 24,
+			sx: {
+				top: -2,
+				left: -2
+			}
+		}) });
+	})();
 	return /* @__PURE__ */ jsxs(Card$1, {
 		onClick,
 		indented: true,
 		children: [/* @__PURE__ */ jsx(ActionRow, {
 			sx: { mb: 1.5 },
-			startAdornment: (() => {
-				if (isFailed) return /* @__PURE__ */ jsx(IconCircle, {
-					status: "error",
-					size: 24
-				});
-				if ([
-					"ACTION_REQUIRED",
-					"MESSAGE_REQUIRED",
-					"RESET_REQUIRED"
-				].includes(lastActiveAction?.status ?? "")) return /* @__PURE__ */ jsx(IconCircle, {
-					status: "info",
-					size: 24
-				});
-				return /* @__PURE__ */ jsx(PendingCircle, { children: /* @__PURE__ */ jsx(CircularProgressPending, {
-					size: 24,
-					sx: {
-						top: -2,
-						left: -2
-					}
-				}) });
-			})(),
+			startAdornment: statusIcon,
 			message: title ?? "",
 			endAdornment: isFailed ? /* @__PURE__ */ jsx(Tooltip, {
 				title: t("button.clearTransaction"),

package/dist/esm/components/TransactionCard/ActiveTransactionCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActiveTransactionCard.js","names":["Card"],"sources":["../../../../src/components/TransactionCard/ActiveTransactionCard.tsx"],"sourcesContent":["import type { RouteExtended } from '@lifi/sdk'\nimport DeleteOutline from '@mui/icons-material/DeleteOutlined'\nimport { Tooltip, Typography } from '@mui/material'\nimport type { JSX, MouseEvent } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useActionMessage } from '../../hooks/useActionMessage.js'\nimport { RouteExecutionStatus } from '../../stores/routes/types.js'\nimport { getExpiryTimestamp } from '../../utils/timer.js'\nimport { ActionRow } from '../ActionRow/ActionRow.js'\nimport { Card } from '../Card/Card.js'\nimport { IconCircle } from '../IconCircle/IconCircle.js'\nimport { RouteTokens } from '../RouteCard/RouteTokens.js'\nimport { ExecutionTimerText } from '../Timer/ExecutionTimerText.js'\nimport { CircularProgressPending } from '../Timer/StepStatusTimer.style.js'\nimport { DeleteButton, PendingCircle } from './ActiveTransactionCard.style.js'\n\ninterface ActiveTransactionCardProps {\n  route: RouteExtended\n  status?: RouteExecutionStatus\n  onClick: () => void\n  onDelete: (e: MouseEvent) => void\n}\n\nexport const ActiveTransactionCard = ({\n  route,\n  status,\n  onClick,\n  onDelete,\n}: ActiveTransactionCardProps): JSX.Element => {\n  const { t } = useTranslation()\n\n  const lastActiveStep = route.steps.findLast((step) => step.execution)\n  const lastActiveAction = lastActiveStep?.execution?.actions?.at(-1)\n  const { title } = useActionMessage(lastActiveStep, lastActiveAction)\n\n  const isFailed = status === RouteExecutionStatus.Failed\n\n  const statusIcon = (() => {\n    if (isFailed) {\n      return <IconCircle status=\"error\" size={24} />\n    }\n    if (\n      ['ACTION_REQUIRED', 'MESSAGE_REQUIRED', 'RESET_REQUIRED'].includes(\n        lastActiveAction?.status ?? ''\n      )\n    ) {\n      return <IconCircle status=\"info\" size={24} />\n    }\n    return (\n      <PendingCircle>\n        <CircularProgressPending size={24} sx={{ top: -2, left: -2 }} />\n      </PendingCircle>\n    )\n  })()\n\n  return (\n    <Card onClick={onClick} indented>\n      <ActionRow\n        sx={{ mb: 1.5 }}\n        startAdornment={statusIcon}\n        message={title ?? ''}\n        endAdornment={\n          isFailed ? (\n            <Tooltip title={t('button.clearTransaction')}>\n              <DeleteButton size=\"small\" onClick={onDelete}>\n                <DeleteOutline sx={{ fontSize: 16 }} />\n              </DeleteButton>\n            </Tooltip>\n          ) : lastActiveStep?.execution?.signedAt ? (\n            <Typography sx={{ fontSize: 12, fontWeight: 600 }}>\n              <ExecutionTimerText\n                expiryTimestamp={getExpiryTimestamp(lastActiveStep)}\n              />\n            </Typography>\n          ) : undefined\n        }\n      />\n      <RouteTokens route={route} />\n    </Card>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;AAuBA,MAAa,yBAAyB,EACpC,OACA,QACA,SACA,eAC6C;CAC7C,MAAM,EAAE,MAAM,eAAe;CAE7B,MAAM,iBAAiB,MAAM,MAAM,UAAU,SAAS,KAAK,SAAS;CACpE,MAAM,mBAAmB,gBAAgB,WAAW,SAAS,GAAG,EAAE;CAClE,MAAM,EAAE,UAAU,iBAAiB,gBAAgB,gBAAgB;CAEnE,MAAM,WAAW,WAAA;CAoBjB,OACE,qBAACA,QAAD;EAAe;EAAS,UAAA;YAAxB,CACE,oBAAC,WAAD;GACE,IAAI,EAAE,IAAI,IAAI;GACd,uBAtBoB;IACxB,IAAI,UACF,OAAO,oBAAC,YAAD;KAAY,QAAO;KAAQ,MAAM;IAAK,CAAA;IAE/C,IACE;KAAC;KAAmB;KAAoB;IAAgB,CAAC,CAAC,SACxD,kBAAkB,UAAU,EAC9B,GAEA,OAAO,oBAAC,YAAD;KAAY,QAAO;KAAO,MAAM;IAAK,CAAA;IAE9C,OACE,oBAAC,eAAD,EAAA,UACE,oBAAC,yBAAD;KAAyB,MAAM;KAAI,IAAI;MAAE,KAAK;MAAI,MAAM;KAAG;IAAI,CAAA,EAClD,CAAA;GAEnB,EAAA,CAM+B;GACzB,SAAS,SAAS;GAClB,cACE,WACE,oBAAC,SAAD;IAAS,OAAO,EAAE,yBAAyB;cACzC,oBAAC,cAAD;KAAc,MAAK;KAAQ,SAAS;eAClC,oBAAC,eAAD,EAAe,IAAI,EAAE,UAAU,GAAG,EAAI,CAAA;IAC1B,CAAA;GACP,CAAA,IACP,gBAAgB,WAAW,WAC7B,oBAAC,YAAD;IAAY,IAAI;KAAE,UAAU;KAAI,YAAY;IAAI;cAC9C,oBAAC,oBAAD,EACE,iBAAiB,mBAAmB,cAAc,EACnD,CAAA;GACS,CAAA,IACV,KAAA;EAEP,CAAA,GACD,oBAAC,aAAD,EAAoB,MAAQ,CAAA,CACxB;;AAEV"}
+{"version":3,"file":"ActiveTransactionCard.js","names":["Card"],"sources":["../../../../src/components/TransactionCard/ActiveTransactionCard.tsx"],"sourcesContent":["import type { RouteExtended } from '@lifi/sdk'\nimport DeleteOutline from '@mui/icons-material/DeleteOutlined'\nimport { Tooltip, Typography } from '@mui/material'\nimport type { JSX, MouseEvent } from 'react'\nimport { useTranslation } from 'react-i18next'\nimport { useActionMessage } from '../../hooks/useActionMessage.js'\nimport { RouteExecutionStatus } from '../../stores/routes/types.js'\nimport { getExpiryTimestamp } from '../../utils/timer.js'\nimport { ActionRow } from '../ActionRow/ActionRow.js'\nimport { Card } from '../Card/Card.js'\nimport { IconCircle } from '../IconCircle/IconCircle.js'\nimport { RouteTokens } from '../RouteCard/RouteTokens.js'\nimport { ExecutionTimerText } from '../Timer/ExecutionTimerText.js'\nimport { CircularProgressPending } from '../Timer/StepStatusTimer.style.js'\nimport { DeleteButton, PendingCircle } from './ActiveTransactionCard.style.js'\n\ninterface ActiveTransactionCardProps {\n  route: RouteExtended\n  status?: RouteExecutionStatus\n  onClick: () => void\n  onDelete: (e: MouseEvent) => void\n}\n\nexport const ActiveTransactionCard = ({\n  route,\n  status,\n  onClick,\n  onDelete,\n}: ActiveTransactionCardProps): JSX.Element => {\n  const { t } = useTranslation()\n\n  const lastActiveStep = route.steps.findLast((step) => step.execution)\n  const lastActiveAction = lastActiveStep?.execution?.actions?.at(-1)\n  const { title } = useActionMessage(lastActiveStep, lastActiveAction)\n\n  const isFailed = status === RouteExecutionStatus.Failed\n\n  const statusIcon = (() => {\n    if (isFailed) {\n      return <IconCircle status=\"error\" size={24} />\n    }\n    if (\n      ['ACTION_REQUIRED', 'MESSAGE_REQUIRED', 'RESET_REQUIRED'].includes(\n        lastActiveAction?.status ?? ''\n      )\n    ) {\n      return <IconCircle status=\"info\" size={24} />\n    }\n    return (\n      <PendingCircle>\n        <CircularProgressPending size={24} sx={{ top: -2, left: -2 }} />\n      </PendingCircle>\n    )\n  })()\n\n  return (\n    <Card onClick={onClick} indented>\n      <ActionRow\n        sx={{ mb: 1.5 }}\n        startAdornment={statusIcon}\n        message={title ?? ''}\n        endAdornment={\n          isFailed ? (\n            <Tooltip title={t('button.clearTransaction')}>\n              <DeleteButton size=\"small\" onClick={onDelete}>\n                <DeleteOutline sx={{ fontSize: 16 }} />\n              </DeleteButton>\n            </Tooltip>\n          ) : lastActiveStep?.execution?.signedAt ? (\n            <Typography sx={{ fontSize: 12, fontWeight: 600 }}>\n              <ExecutionTimerText\n                expiryTimestamp={getExpiryTimestamp(lastActiveStep)}\n              />\n            </Typography>\n          ) : undefined\n        }\n      />\n      <RouteTokens route={route} />\n    </Card>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;AAuBA,MAAa,yBAAyB,EACpC,OACA,QACA,SACA,eAC6C;CAC7C,MAAM,EAAE,MAAM,eAAe;CAE7B,MAAM,iBAAiB,MAAM,MAAM,UAAU,SAAS,KAAK,SAAS;CACpE,MAAM,mBAAmB,gBAAgB,WAAW,SAAS,GAAG,EAAE;CAClE,MAAM,EAAE,UAAU,iBAAiB,gBAAgB,gBAAgB;CAEnE,MAAM,WAAW,WAAA;CAEjB,MAAM,oBAAoB;EACxB,IAAI,UACF,OAAO,oBAAC,YAAD;GAAY,QAAO;GAAQ,MAAM;EAAK,CAAA;EAE/C,IACE;GAAC;GAAmB;GAAoB;EAAgB,CAAC,CAAC,SACxD,kBAAkB,UAAU,EAC9B,GAEA,OAAO,oBAAC,YAAD;GAAY,QAAO;GAAO,MAAM;EAAK,CAAA;EAE9C,OACE,oBAAC,eAAD,EAAA,UACE,oBAAC,yBAAD;GAAyB,MAAM;GAAI,IAAI;IAAE,KAAK;IAAI,MAAM;GAAG;EAAI,CAAA,EAClD,CAAA;CAEnB,EAAA,CAAG;CAEH,OACE,qBAACA,QAAD;EAAe;EAAS,UAAA;EAAxB,UAAA,CACE,oBAAC,WAAD;GACE,IAAI,EAAE,IAAI,IAAI;GACd,gBAAgB;GAChB,SAAS,SAAS;GAClB,cACE,WACE,oBAAC,SAAD;IAAS,OAAO,EAAE,yBAAyB;IACzC,UAAA,oBAAC,cAAD;KAAc,MAAK;KAAQ,SAAS;KAClC,UAAA,oBAAC,eAAD,EAAe,IAAI,EAAE,UAAU,GAAG,EAAI,CAAA;IAC1B,CAAA;GACP,CAAA,IACP,gBAAgB,WAAW,WAC7B,oBAAC,YAAD;IAAY,IAAI;KAAE,UAAU;KAAI,YAAY;IAAI;IAC9C,UAAA,oBAAC,oBAAD,EACE,iBAAiB,mBAAmB,cAAc,EACnD,CAAA;GACS,CAAA,IACV,KAAA;EAEP,CAAA,GACD,oBAAC,aAAD,EAAoB,MAAQ,CAAA,CACxB;;AAEV"}