@openocean.finance/widget 1.0.0

package/src/components/TokenList/TokenList.tsx

@@ -0,0 +1,134 @@
+import { Box } from '@mui/material'
+import {
+  useAccount,
+  useLastConnectedAccount,
+} from '@openocean.finance/wallet-management'
+import { type FC, useEffect } from 'react'
+import { useChain } from '../../hooks/useChain.js'
+import { useDebouncedWatch } from '../../hooks/useDebouncedWatch.js'
+import { useTokenBalances } from '../../hooks/useTokenBalances.js'
+import { useTokenSearch } from '../../hooks/useTokenSearch.js'
+import { useWidgetEvents } from '../../hooks/useWidgetEvents.js'
+import { FormKeyHelper } from '../../stores/form/types.js'
+import { useFieldValues } from '../../stores/form/useFieldValues.js'
+import { WidgetEvent } from '../../types/events.js'
+import type { TokenAmount } from '../../types/token.js'
+import { TokenNotFound } from './TokenNotFound.js'
+import { VirtualizedTokenList } from './VirtualizedTokenList.js'
+import type { TokenListProps } from './types.js'
+import { useTokenSelect } from './useTokenSelect.js'
+import { filteredTokensComparator } from './utils.js'
+
+export const TokenList: FC<TokenListProps> = ({
+  formType,
+  parentRef,
+  height,
+  onClick,
+}) => {
+  const emitter = useWidgetEvents()
+  const [selectedChainId] = useFieldValues(FormKeyHelper.getChainKey(formType))
+  const [tokenSearchFilter]: string[] = useDebouncedWatch(
+    320,
+    'tokenSearchFilter'
+  )
+
+  const { chain: selectedChain, isLoading: isSelectedChainLoading } =
+    useChain(selectedChainId)
+  const { account, accounts } = useAccount({
+    chainType: selectedChain?.chainType,
+  })
+  const { setLastConnectedAccount } = useLastConnectedAccount()
+
+  const {
+    tokens: chainTokens,
+    tokensWithBalance,
+    isLoading: isTokensLoading,
+    isBalanceLoading,
+    featuredTokens,
+    popularTokens,
+  } = useTokenBalances(selectedChainId)
+
+  let filteredTokens = (tokensWithBalance ?? chainTokens ?? []) as TokenAmount[]
+  const normalizedSearchFilter = tokenSearchFilter?.replaceAll('$', '')
+  const searchFilter = normalizedSearchFilter?.toUpperCase() ?? ''
+
+  filteredTokens = tokenSearchFilter
+    ? filteredTokens
+        .filter(
+          (token) =>
+            token.name?.toUpperCase().includes(searchFilter) ||
+            token.symbol.toUpperCase().includes(searchFilter) ||
+            token.address.toUpperCase().includes(searchFilter)
+        )
+        .sort(filteredTokensComparator(searchFilter))
+    : filteredTokens
+
+  const tokenSearchEnabled =
+    !isTokensLoading &&
+    !filteredTokens.length &&
+    !!tokenSearchFilter &&
+    !!selectedChainId
+
+  const { token: searchedToken, isLoading: isSearchedTokenLoading } =
+    useTokenSearch(selectedChainId, normalizedSearchFilter, tokenSearchEnabled)
+
+  const isLoading =
+    isTokensLoading ||
+    isSelectedChainLoading ||
+    (tokenSearchEnabled && isSearchedTokenLoading)
+
+  const tokens = filteredTokens.length
+    ? filteredTokens
+    : searchedToken
+      ? [searchedToken]
+      : filteredTokens
+
+  const handleTokenClick = useTokenSelect(formType, onClick)
+  const showCategories =
+    Boolean(featuredTokens?.length || popularTokens?.length) &&
+    !tokenSearchFilter
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: Should fire only when search filter changes
+  useEffect(() => {
+    if (normalizedSearchFilter) {
+      emitter.emit(WidgetEvent.TokenSearch, {
+        value: normalizedSearchFilter,
+        tokens,
+      })
+    }
+  }, [normalizedSearchFilter, emitter])
+
+  // Add effect for automatic wallet connector switching
+  useEffect(() => {
+    if (selectedChain?.chainType && accounts.length > 0) {
+      // Find account matching current chain type
+      const matchingAccount = accounts.find(
+        (acc) => acc.chainType === selectedChain.chainType && acc.isConnected
+      )
+
+      // If matching account found, set it as last connected account
+      if (matchingAccount?.connector) {
+        setLastConnectedAccount(matchingAccount.connector)
+      }
+    }
+  }, [selectedChain?.chainType, accounts, setLastConnectedAccount])
+
+  return (
+    <Box ref={parentRef} style={{ height, overflow: 'auto' }}>
+      {!tokens.length && !isLoading ? (
+        <TokenNotFound formType={formType} />
+      ) : null}
+      <VirtualizedTokenList
+        account={account}
+        tokens={tokens}
+        scrollElementRef={parentRef}
+        chainId={selectedChainId}
+        chain={selectedChain}
+        isLoading={isLoading}
+        isBalanceLoading={isBalanceLoading}
+        showCategories={showCategories}
+        onClick={handleTokenClick}
+      />
+    </Box>
+  )
+}

package/src/components/TokenList/TokenListItem.tsx

@@ -0,0 +1,252 @@
+import { ChainType } from '@lifi/sdk'
+import { OpenInNewRounded } from '@mui/icons-material'
+import {
+  Avatar,
+  Box,
+  Link,
+  ListItemAvatar,
+  ListItemText,
+  Skeleton,
+  Slide,
+  Typography,
+} from '@mui/material'
+import type { MouseEventHandler } from 'react'
+import { useRef, useState } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useExplorer } from '../../hooks/useExplorer.js'
+import { formatTokenAmount, formatTokenPrice } from '../../utils/format.js'
+import { shortenAddress } from '../../utils/wallet.js'
+import { ListItemButton } from '../ListItem/ListItemButton.js'
+import { IconButton, ListItem } from './TokenList.style.js'
+import type { TokenListItemButtonProps, TokenListItemProps } from './types.js'
+
+export const TokenListItem: React.FC<TokenListItemProps> = ({
+  onClick,
+  size,
+  start,
+  token,
+  chain,
+  accountAddress,
+  isBalanceLoading,
+  startAdornment,
+  endAdornment,
+}) => {
+  const handleClick: MouseEventHandler<HTMLDivElement> = (e) => {
+    e.stopPropagation()
+    onClick?.(token.address, chain?.id)
+  }
+  return (
+    <ListItem
+      style={{
+        height: `${size}px`,
+        transform: `translateY(${start}px)`,
+      }}
+    >
+      {startAdornment}
+      <TokenListItemButton
+        token={token}
+        chain={chain}
+        accountAddress={accountAddress}
+        isBalanceLoading={isBalanceLoading}
+        onClick={handleClick}
+      />
+      {endAdornment}
+    </ListItem>
+  )
+}
+
+export const TokenListItemButton: React.FC<TokenListItemButtonProps> = ({
+  onClick,
+  token,
+  chain,
+  accountAddress,
+  isBalanceLoading,
+}) => {
+  const { t } = useTranslation()
+  const { getAddressLink } = useExplorer()
+
+  const container = useRef(null)
+  const timeoutId = useRef<ReturnType<typeof setTimeout>>(undefined)
+  const [showAddress, setShowAddress] = useState(false)
+
+  const tokenAddress =
+    chain?.chainType === ChainType.UTXO ? accountAddress : token.address
+
+  const onMouseEnter = () => {
+    timeoutId.current = setTimeout(() => {
+      if (tokenAddress) {
+        setShowAddress(true)
+      }
+    }, 350)
+  }
+
+  const onMouseLeave = () => {
+    clearTimeout(timeoutId.current)
+    if (showAddress) {
+      setShowAddress(false)
+    }
+  }
+  const tokenAmount = formatTokenAmount(token.amount, token.decimals)
+  const tokenPrice = formatTokenPrice(
+    token.amount,
+    token.priceUSD,
+    token.decimals
+  )
+
+  return (
+    <ListItemButton
+      onClick={onClick}
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
+      dense
+    >
+      <ListItemAvatar>
+        <Avatar src={token.logoURI} alt={token.symbol}>
+          {token.symbol?.[0]}
+        </Avatar>
+      </ListItemAvatar>
+      <ListItemText
+        primary={token.symbol}
+        secondaryTypographyProps={{
+          component: 'div',
+        }}
+        secondary={
+          <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',
+                }}
+              >
+                <Box
+                  sx={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    pt: 0.125,
+                  }}
+                >
+                  {shortenAddress(tokenAddress)}
+                </Box>
+                <IconButton
+                  size="small"
+                  LinkComponent={Link}
+                  href={getAddressLink(tokenAddress!, chain)}
+                  target="_blank"
+                  rel="nofollow noreferrer"
+                  onClick={(e) => e.stopPropagation()}
+                >
+                  <OpenInNewRounded />
+                </IconButton>
+              </Box>
+            </Slide>
+          </Box>
+        }
+      />
+      {accountAddress ? (
+        isBalanceLoading ? (
+          <TokenAmountSkeleton />
+        ) : (
+          <Box sx={{ textAlign: 'right' }}>
+            {token.amount ? (
+              <Typography
+                noWrap
+                sx={{
+                  fontWeight: 600,
+                }}
+                title={tokenAmount}
+              >
+                {t('format.tokenAmount', {
+                  value: tokenAmount,
+                })}
+              </Typography>
+            ) : null}
+            {tokenPrice ? (
+              <Typography
+                data-price={token.priceUSD}
+                sx={{
+                  fontWeight: 500,
+                  fontSize: 12,
+                  color: 'text.secondary',
+                }}
+              >
+                {t('format.currency', {
+                  value: tokenPrice,
+                })}
+              </Typography>
+            ) : null}
+          </Box>
+        )
+      ) : null}
+    </ListItemButton>
+  )
+}
+
+export const TokenListItemSkeleton = () => {
+  return (
+    <ListItem
+      secondaryAction={<TokenAmountSkeleton />}
+      disablePadding
+      sx={{ position: 'relative', flexDirection: 'row', alignItems: 'center' }}
+    >
+      <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>
+  )
+}
+
+export 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,20 @@
+import { useTranslation } from 'react-i18next'
+import { useAvailableChains } from '../../hooks/useAvailableChains.js'
+import type { FormTypeProps } from '../../stores/form/types.js'
+import { FormKeyHelper } from '../../stores/form/types.js'
+import { useFieldValues } from '../../stores/form/useFieldValues.js'
+import { SearchNotFound } from '../Search/SearchNotFound.js'
+
+export const TokenNotFound: React.FC<FormTypeProps> = ({ formType }) => {
+  const { t } = useTranslation()
+  const [selectedChainId] = useFieldValues(FormKeyHelper.getChainKey(formType))
+  const { getChainById } = useAvailableChains()
+
+  return (
+    <SearchNotFound
+      message={t('info.message.emptyTokenList', {
+        chainName: getChainById(selectedChainId)?.name,
+      })}
+    />
+  )
+}

package/src/components/TokenList/VirtualizedTokenList.tsx

@@ -0,0 +1,152 @@
+import { List, Typography } from '@mui/material'
+import { useVirtualizer } from '@tanstack/react-virtual'
+import type { FC } from 'react'
+import { useEffect } from 'react'
+import { useTranslation } from 'react-i18next'
+import type { TokenAmount } from '../../types/token.js'
+import { TokenListItem, TokenListItemSkeleton } from './TokenListItem.js'
+import type { VirtualizedTokenListProps } from './types.js'
+
+export const VirtualizedTokenList: FC<VirtualizedTokenListProps> = ({
+  account,
+  tokens,
+  scrollElementRef,
+  chainId,
+  chain,
+  isLoading,
+  isBalanceLoading,
+  showCategories,
+  onClick,
+}) => {
+  const { t } = useTranslation()
+
+  const { getVirtualItems, getTotalSize, scrollToIndex } = useVirtualizer({
+    count: tokens.length,
+    overscan: 10,
+    paddingEnd: 12,
+    getScrollElement: () => scrollElementRef.current,
+    estimateSize: (index) => {
+      // Base size for TokenListItem
+      let size = 64
+      // Early return if categories are not shown
+      if (!showCategories) {
+        return size
+      }
+
+      const currentToken = tokens[index]
+      const previousToken = tokens[index - 1]
+
+      // Adjust size for the first featured token
+      if (currentToken.featured && index === 0) {
+        size += 24
+      }
+
+      // Adjust size based on changes between the current and previous tokens
+      const isCategoryChanged =
+        (previousToken?.amount && !currentToken.amount) ||
+        (previousToken?.featured && !currentToken.featured) ||
+        (previousToken?.popular && !currentToken.popular)
+
+      if (isCategoryChanged) {
+        size += 32
+      }
+
+      return size
+    },
+    getItemKey: (index) => `${tokens[index].address}-${index}`,
+  })
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies:
+  useEffect(() => {
+    // Scroll to the top of the list when switching the chains
+    if (getVirtualItems().length) {
+      scrollToIndex(0, { align: 'start' })
+    }
+  }, [scrollToIndex, chainId, getVirtualItems])
+
+  if (isLoading) {
+    return (
+      <List disablePadding>
+        {Array.from({ length: 3 }).map((_, index) => (
+          <TokenListItemSkeleton key={index} />
+        ))}
+      </List>
+    )
+  }
+
+  return (
+    <List style={{ height: getTotalSize() }} disablePadding>
+      {getVirtualItems().map((item) => {
+        const currentToken = tokens[item.index]
+        const previousToken: TokenAmount | undefined = tokens[item.index - 1]
+
+        const isFirstFeaturedToken = currentToken.featured && item.index === 0
+
+        const isTransitionFromFeaturedTokens =
+          previousToken?.featured && !currentToken.featured
+
+        const isTransitionFromMyTokens =
+          previousToken?.amount && !currentToken.amount
+
+        const isTransitionToMyTokens =
+          isTransitionFromFeaturedTokens && currentToken.amount
+
+        const isTransitionToPopularTokens =
+          (isTransitionFromFeaturedTokens || isTransitionFromMyTokens) &&
+          currentToken.popular
+
+        const shouldShowAllTokensCategory =
+          isTransitionFromMyTokens ||
+          isTransitionFromFeaturedTokens ||
+          (previousToken?.popular && !currentToken.popular)
+
+        const startAdornmentLabel = showCategories
+          ? (() => {
+              if (isFirstFeaturedToken) {
+                return t('main.featuredTokens')
+              }
+              if (isTransitionToMyTokens) {
+                return t('main.myTokens')
+              }
+              if (isTransitionToPopularTokens) {
+                return t('main.popularTokens')
+              }
+              if (shouldShowAllTokensCategory) {
+                return t('main.allTokens')
+              }
+              return null
+            })()
+          : null
+
+        return (
+          <TokenListItem
+            key={item.key}
+            onClick={onClick}
+            size={item.size}
+            start={item.start}
+            token={currentToken}
+            chain={chain}
+            isBalanceLoading={isBalanceLoading}
+            accountAddress={account.address}
+            startAdornment={
+              startAdornmentLabel ? (
+                <Typography
+                  sx={{
+                    fontSize: 14,
+                    fontWeight: 600,
+                    lineHeight: '16px',
+                    px: 1.5,
+                    pt: isFirstFeaturedToken ? 0 : 1,
+                    pb: 1,
+                  }}
+                >
+                  {startAdornmentLabel}
+                </Typography>
+              ) : null
+            }
+          />
+        )
+      })}
+    </List>
+  )
+}

package/src/components/TokenList/types.ts

@@ -0,0 +1,47 @@
+import type { ExtendedChain } from '@lifi/sdk'
+import type { Account } from '@openocean.finance/wallet-management'
+import type { MouseEventHandler, MutableRefObject } from 'react'
+import type { FormType } from '../../stores/form/types.js'
+import type { TokenAmount } from '../../types/token.js'
+
+export interface TokenListProps {
+  parentRef: MutableRefObject<HTMLElement | null>
+  formType: FormType
+  height: number
+  onClick?(): void
+}
+
+export interface VirtualizedTokenListProps {
+  account: Account
+  tokens: TokenAmount[]
+  scrollElementRef: MutableRefObject<HTMLElement | null>
+  isLoading: boolean
+  isBalanceLoading: boolean
+  chainId?: number
+  chain?: ExtendedChain
+  showCategories?: boolean
+  onClick(tokenAddress: string, chainId?: number): void
+}
+
+export interface TokenListItemBaseProps {
+  onClick?(tokenAddress: string, chainId?: number): void
+  size: number
+  start: number
+}
+
+export interface TokenListItemProps extends TokenListItemBaseProps {
+  accountAddress?: string
+  token: TokenAmount
+  chain?: ExtendedChain
+  isBalanceLoading?: boolean
+  startAdornment?: React.ReactNode
+  endAdornment?: React.ReactNode
+}
+
+export interface TokenListItemButtonProps {
+  onClick?: MouseEventHandler<HTMLDivElement>
+  accountAddress?: string
+  token: TokenAmount
+  chain?: ExtendedChain
+  isBalanceLoading?: boolean
+}