@lifi/widget 0.0.0-preview-6cc63bac

package/src/components/TokenList/TokenListItem.tsx

@@ -0,0 +1,418 @@
+import type { StaticToken } from '@lifi/sdk'
+import { ChainType } from '@lifi/sdk'
+import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined'
+import WarningRounded from '@mui/icons-material/WarningRounded'
+import {
+  Avatar,
+  Box,
+  ListItemAvatar,
+  ListItemText,
+  listItemSecondaryActionClasses,
+  Skeleton,
+  Slide,
+  Tooltip,
+  Typography,
+} from '@mui/material'
+import type { JSX, MouseEventHandler } from 'react'
+import { memo, useMemo, useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useLongPress } from '../../hooks/useLongPress.js'
+import { formatTokenAmount, formatTokenPrice } from '../../utils/format.js'
+import { shortenAddress } from '../../utils/wallet.js'
+import { TokenAvatar } from '../Avatar/TokenAvatar.js'
+import { ListItemButton } from '../ListItem/ListItemButton.js'
+import { PinTokenButton } from './PinTokenButton.js'
+import { IconButton, ListItem } from './TokenList.style.js'
+import type {
+  TokenListItemAvatarProps,
+  TokenListItemButtonProps,
+  TokenListItemProps,
+} from './types.js'
+
+export const TokenListItem: React.FC<TokenListItemProps> = memo(
+  ({
+    onClick,
+    size,
+    start,
+    token,
+    chain,
+    isBalanceLoading,
+    startAdornment,
+    endAdornment,
+    selected,
+    onShowTokenDetails,
+  }) => {
+    return (
+      <ListItem
+        style={{
+          height: `${size}px`,
+          transform: `translateY(${start}px)`,
+          padding: 0,
+        }}
+      >
+        {startAdornment}
+        <TokenListItemButton
+          token={token}
+          isBalanceLoading={isBalanceLoading}
+          onClick={onClick}
+          chain={chain}
+          selected={selected}
+          onShowTokenDetails={onShowTokenDetails}
+        />
+        {endAdornment}
+      </ListItem>
+    )
+  }
+)
+
+const TokenListItemAvatar = memo(({ token }: TokenListItemAvatarProps) => {
+  const [isImageLoading, setIsImageLoading] = useState(true)
+
+  return (
+    <Avatar
+      src={token.logoURI}
+      alt={token.symbol}
+      sx={(theme) =>
+        isImageLoading ? { bgcolor: theme.vars.palette.grey[300] } : null
+      }
+      onLoad={() => setIsImageLoading(false)}
+    >
+      {token.symbol?.[0]}
+    </Avatar>
+  )
+})
+
+interface OpenTokenDetailsButtonProps {
+  tokenAddress: string | undefined
+  withoutContractAddress: boolean
+  chainId: number
+  onClick: (
+    tokenAddress: string,
+    withoutContractAddress: boolean,
+    chainId: number
+  ) => void
+}
+
+const OpenTokenDetailsButton = ({
+  tokenAddress,
+  withoutContractAddress,
+  chainId,
+  onClick,
+}: OpenTokenDetailsButtonProps) => {
+  if (!tokenAddress) {
+    return null
+  }
+  return (
+    <IconButton
+      size="small"
+      onClick={(e) => {
+        e.stopPropagation()
+        e.currentTarget.blur() // Remove focus to prevent accessibility issues when opening drawer
+        onClick(tokenAddress, withoutContractAddress, chainId)
+      }}
+    >
+      <InfoOutlinedIcon />
+    </IconButton>
+  )
+}
+
+const TokenListItemButton: React.FC<TokenListItemButtonProps> = memo(
+  ({
+    onClick,
+    token,
+    chain,
+    isBalanceLoading,
+    selected,
+    onShowTokenDetails,
+  }) => {
+    const { t } = useTranslation()
+    const container = useRef(null)
+    const timeoutId = useRef<ReturnType<typeof setTimeout>>(undefined)
+    const [showAddress, setShowAddress] = useState(false)
+
+    const withoutContractAddress = chain?.chainType === ChainType.UTXO
+
+    const onMouseEnter = () => {
+      timeoutId.current = setTimeout(() => {
+        if (token.address) {
+          setShowAddress(true)
+        }
+      }, 350)
+    }
+
+    const onMouseLeave = () => {
+      clearTimeout(timeoutId.current)
+      if (showAddress) {
+        setShowAddress(false)
+      }
+    }
+
+    const handleClick: MouseEventHandler<HTMLDivElement> = (e) => {
+      e.stopPropagation()
+      onClick?.(token.address, token.chainId)
+    }
+
+    const tokenAmount = useMemo(
+      () => formatTokenAmount(token.amount, token.decimals),
+      [token.amount, token.decimals]
+    )
+
+    const tokenPrice = useMemo(
+      () => formatTokenPrice(token.amount, token.priceUSD, token.decimals),
+      [token.amount, token.priceUSD, token.decimals]
+    )
+
+    const longPressEvents = useLongPress(() =>
+      onShowTokenDetails(token.address, withoutContractAddress, token.chainId)
+    )
+
+    return (
+      <ListItemButton
+        onClick={handleClick}
+        onMouseEnter={onMouseEnter}
+        onMouseLeave={onMouseLeave}
+        {...longPressEvents}
+        dense
+        selected={selected}
+        sx={{
+          height: 60,
+          marginBottom: '4px',
+        }}
+      >
+        <ListItemAvatar>
+          {chain ? (
+            <TokenAvatar
+              token={token as StaticToken}
+              chain={chain}
+              tokenAvatarSize={40}
+              chainAvatarSize={16}
+            />
+          ) : (
+            <TokenListItemAvatar token={token} />
+          )}
+        </ListItemAvatar>
+        <ListItemText
+          primary={
+            <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
+              {token.symbol}
+              {!token.verified && (
+                <Tooltip
+                  title={t('warning.message.unverifiedToken')}
+                  placement="top"
+                  arrow
+                >
+                  <WarningRounded
+                    sx={{
+                      display: 'flex',
+                      fontSize: 16,
+                      color: 'warning.main',
+                      cursor: 'help',
+                    }}
+                  />
+                </Tooltip>
+              )}
+            </Box>
+          }
+          slotProps={{
+            secondary: {
+              component: 'div',
+            },
+          }}
+          secondary={
+            withoutContractAddress ? (
+              <Box
+                ref={container}
+                sx={{
+                  height: 20,
+                  display: 'flex',
+                }}
+              >
+                <Box
+                  sx={{
+                    pt: 0.25,
+                  }}
+                >
+                  {token.name}
+                </Box>
+                <Box
+                  sx={{
+                    position: 'relative',
+                  }}
+                >
+                  <Slide
+                    direction="up"
+                    in={showAddress}
+                    container={container.current}
+                    style={{
+                      position: 'absolute',
+                    }}
+                    appear={false}
+                    mountOnEnter
+                  >
+                    <Box>
+                      <OpenTokenDetailsButton
+                        tokenAddress={token.address}
+                        withoutContractAddress={withoutContractAddress}
+                        chainId={token.chainId}
+                        onClick={onShowTokenDetails}
+                      />
+                      <PinTokenButton
+                        chainId={token.chainId}
+                        tokenAddress={token.address}
+                      />
+                    </Box>
+                  </Slide>
+                </Box>
+              </Box>
+            ) : (
+              <Box
+                ref={container}
+                sx={{
+                  position: 'relative',
+                  height: 20,
+                }}
+              >
+                <Slide
+                  direction="down"
+                  in={!showAddress}
+                  container={container.current}
+                  style={{
+                    position: 'absolute',
+                  }}
+                  appear={false}
+                >
+                  <Box
+                    sx={{
+                      pt: 0.25,
+                    }}
+                  >
+                    {token.name}
+                  </Box>
+                </Slide>
+                <Slide
+                  direction="up"
+                  in={showAddress}
+                  container={container.current}
+                  style={{
+                    position: 'absolute',
+                  }}
+                  appear={false}
+                  mountOnEnter
+                >
+                  <Box
+                    sx={{
+                      display: 'flex',
+                      alignItems: 'center',
+                      gap: 0.5,
+                    }}
+                  >
+                    <Box
+                      sx={{
+                        display: 'flex',
+                        alignItems: 'center',
+                        pt: 0.125,
+                      }}
+                    >
+                      {shortenAddress(token.address)}
+                    </Box>
+                    <Box>
+                      <OpenTokenDetailsButton
+                        tokenAddress={token.address}
+                        withoutContractAddress={withoutContractAddress}
+                        chainId={token.chainId}
+                        onClick={onShowTokenDetails}
+                      />
+                      <PinTokenButton
+                        chainId={token.chainId}
+                        tokenAddress={token.address}
+                      />
+                    </Box>
+                  </Box>
+                </Slide>
+              </Box>
+            )
+          }
+        />
+        {isBalanceLoading ? (
+          <TokenAmountSkeleton />
+        ) : (
+          <Box sx={{ textAlign: 'right' }}>
+            {token.amount ? (
+              <Typography
+                noWrap
+                sx={{
+                  fontWeight: 600,
+                }}
+                title={tokenAmount}
+              >
+                {t('format.tokenAmount', {
+                  value: tokenAmount,
+                })}
+              </Typography>
+            ) : null}
+            {token.amount && token.priceUSD ? (
+              <Typography
+                data-price={token.priceUSD}
+                sx={{
+                  fontWeight: 500,
+                  fontSize: 12,
+                  color: 'text.secondary',
+                }}
+              >
+                {t('format.currency', {
+                  value: tokenPrice,
+                })}
+              </Typography>
+            ) : null}
+          </Box>
+        )}
+      </ListItemButton>
+    )
+  }
+)
+
+export const TokenListItemSkeleton = (): JSX.Element => {
+  return (
+    <ListItem
+      secondaryAction={<TokenAmountSkeleton />}
+      disablePadding
+      sx={(theme) => ({
+        position: 'relative',
+        flexDirection: 'row',
+        alignItems: 'center',
+        padding: 0,
+        [`& .${listItemSecondaryActionClasses.root}`]: {
+          right: theme.spacing(1.5),
+        },
+      })}
+    >
+      <ListItemAvatar>
+        <Skeleton
+          variant="circular"
+          width={40}
+          height={40}
+          sx={{ marginLeft: 1.5, marginRight: 2 }}
+        />
+      </ListItemAvatar>
+      <ListItemText
+        primary={<Skeleton variant="text" width={56} height={24} />}
+        secondary={<Skeleton variant="text" width={96} height={16} />}
+      />
+    </ListItem>
+  )
+}
+
+const TokenAmountSkeleton: React.FC = () => {
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'flex-end',
+      }}
+    >
+      <Skeleton variant="text" width={56} height={24} />
+      <Skeleton variant="text" width={48} height={16} />
+    </Box>
+  )
+}

package/src/components/TokenList/TokenNotFound.tsx

@@ -0,0 +1,11 @@
+import { useTranslation } from 'react-i18next'
+import type { FormTypeProps } from '../../stores/form/types.js'
+import { SearchNotFound } from '../Search/SearchNotFound.js'
+
+export const TokenNotFound: React.FC<FormTypeProps> = () => {
+  const { t } = useTranslation()
+
+  return (
+    <SearchNotFound message={t('info.message.emptyTokenListAllNetworks')} />
+  )
+}

package/src/components/TokenList/VirtualizedTokenList.tsx

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