@lifi/widget 3.29.1 → 3.30.1

package/src/components/TokenList/TokenListItem.tsx

@@ -1,3 +1,4 @@
+import type { StaticToken } from '@lifi/sdk'
 import { ChainType } from '@lifi/sdk'
 import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined'
 import {
@@ -5,16 +6,18 @@ import {
   Box,
   ListItemAvatar,
   ListItemText,
+  listItemSecondaryActionClasses,
   Skeleton,
   Slide,
   Typography,
 } from '@mui/material'
 import type { MouseEventHandler } from 'react'
-import { memo, useRef, useState } 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 { IconButton, ListItem } from './TokenList.style.js'
 import type {
@@ -30,17 +33,12 @@ export const TokenListItem: React.FC<TokenListItemProps> = memo(
     start,
     token,
     chain,
-    accountAddress,
     isBalanceLoading,
     startAdornment,
     endAdornment,
     selected,
     onShowTokenDetails,
   }) => {
-    const handleClick: MouseEventHandler<HTMLDivElement> = (e) => {
-      e.stopPropagation()
-      onClick?.(token.address, chain?.id)
-    }
     return (
       <ListItem
         style={{
@@ -52,10 +50,9 @@ export const TokenListItem: React.FC<TokenListItemProps> = memo(
         {startAdornment}
         <TokenListItemButton
           token={token}
-          chain={chain}
-          accountAddress={accountAddress}
           isBalanceLoading={isBalanceLoading}
-          onClick={handleClick}
+          onClick={onClick}
+          chain={chain}
           selected={selected}
           onShowTokenDetails={onShowTokenDetails}
         />
@@ -65,10 +62,9 @@ export const TokenListItem: React.FC<TokenListItemProps> = memo(
   }
 )
 
-export const TokenListItemAvatar: React.FC<TokenListItemAvatarProps> = ({
-  token,
-}) => {
+const TokenListItemAvatar = memo(({ token }: TokenListItemAvatarProps) => {
   const [isImageLoading, setIsImageLoading] = useState(true)
+
   return (
     <Avatar
       src={token.logoURI}
@@ -81,17 +77,23 @@ export const TokenListItemAvatar: React.FC<TokenListItemAvatarProps> = ({
       {token.symbol?.[0]}
     </Avatar>
   )
-}
+})
 
 interface OpenTokenDetailsButtonProps {
   tokenAddress: string | undefined
   withoutContractAddress: boolean
-  onClick: (tokenAddress: string, withoutContractAddress: boolean) => void
+  chainId: number
+  onClick: (
+    tokenAddress: string,
+    withoutContractAddress: boolean,
+    chainId: number
+  ) => void
 }
 
 const OpenTokenDetailsButton = ({
   tokenAddress,
   withoutContractAddress,
+  chainId,
   onClick,
 }: OpenTokenDetailsButtonProps) => {
   if (!tokenAddress) {
@@ -103,7 +105,7 @@ const OpenTokenDetailsButton = ({
       onClick={(e) => {
         e.stopPropagation()
         e.currentTarget.blur() // Remove focus to prevent accessibility issues when opening drawer
-        onClick(tokenAddress, withoutContractAddress)
+        onClick(tokenAddress, withoutContractAddress, chainId)
       }}
     >
       <InfoOutlinedIcon />
@@ -111,92 +113,159 @@ const OpenTokenDetailsButton = ({
   )
 }
 
-export const TokenListItemButton: React.FC<TokenListItemButtonProps> = ({
-  onClick,
-  token,
-  chain,
-  accountAddress,
-  isBalanceLoading,
-  selected,
-  onShowTokenDetails,
-}) => {
-  const { t } = useTranslation()
-  const container = useRef(null)
-  const timeoutId = useRef<ReturnType<typeof setTimeout>>(undefined)
-  const [showAddress, setShowAddress] = useState(false)
+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 withoutContractAddress = chain?.chainType === ChainType.UTXO
+
+    const onMouseEnter = () => {
+      timeoutId.current = setTimeout(() => {
+        if (token.address) {
+          setShowAddress(true)
+        }
+      }, 350)
+    }
 
-  const onMouseEnter = () => {
-    timeoutId.current = setTimeout(() => {
-      if (token.address) {
-        setShowAddress(true)
+    const onMouseLeave = () => {
+      clearTimeout(timeoutId.current)
+      if (showAddress) {
+        setShowAddress(false)
       }
-    }, 350)
-  }
+    }
 
-  const onMouseLeave = () => {
-    clearTimeout(timeoutId.current)
-    if (showAddress) {
-      setShowAddress(false)
+    const handleClick: MouseEventHandler<HTMLDivElement> = (e) => {
+      e.stopPropagation()
+      onClick?.(token.address, token.chainId)
     }
-  }
 
-  const tokenAmount = formatTokenAmount(token.amount, token.decimals)
-  const tokenPrice = formatTokenPrice(
-    token.amount,
-    token.priceUSD,
-    token.decimals
-  )
+    const tokenAmount = useMemo(
+      () => formatTokenAmount(token.amount, token.decimals),
+      [token.amount, token.decimals]
+    )
 
-  const longPressEvents = useLongPress(() =>
-    onShowTokenDetails(token.address, withoutContractAddress)
-  )
+    const tokenPrice = useMemo(
+      () => formatTokenPrice(token.amount, token.priceUSD, token.decimals),
+      [token.amount, token.priceUSD, token.decimals]
+    )
 
-  return (
-    <ListItemButton
-      onClick={onClick}
-      onMouseEnter={onMouseEnter}
-      onMouseLeave={onMouseLeave}
-      {...longPressEvents}
-      dense
-      selected={selected}
-      sx={{
-        height: 60,
-        marginBottom: '4px',
-      }}
-    >
-      <ListItemAvatar>
-        <TokenListItemAvatar token={token} />
-      </ListItemAvatar>
-      <ListItemText
-        primary={token.symbol}
-        slotProps={{
-          secondary: {
-            component: 'div',
-          },
+    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',
         }}
-        secondary={
-          withoutContractAddress ? (
-            <Box
-              ref={container}
-              sx={{
-                height: 20,
-                display: 'flex',
-              }}
-            >
+      >
+        <ListItemAvatar>
+          {chain ? (
+            <TokenAvatar
+              token={token as StaticToken}
+              chain={chain}
+              tokenAvatarSize={40}
+              chainAvatarSize={16}
+            />
+          ) : (
+            <TokenListItemAvatar token={token} />
+          )}
+        </ListItemAvatar>
+        <ListItemText
+          primary={token.symbol}
+          slotProps={{
+            secondary: {
+              component: 'div',
+            },
+          }}
+          secondary={
+            withoutContractAddress ? (
               <Box
+                ref={container}
                 sx={{
-                  pt: 0.25,
+                  height: 20,
+                  display: 'flex',
                 }}
               >
-                {token.name}
+                <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
+                      sx={{
+                        display: 'flex',
+                      }}
+                    >
+                      <OpenTokenDetailsButton
+                        tokenAddress={token.address}
+                        withoutContractAddress={withoutContractAddress}
+                        chainId={token.chainId}
+                        onClick={onShowTokenDetails}
+                      />
+                    </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}
@@ -212,77 +281,28 @@ export const TokenListItemButton: React.FC<TokenListItemButtonProps> = ({
                       display: 'flex',
                     }}
                   >
+                    <Box
+                      sx={{
+                        display: 'flex',
+                        alignItems: 'center',
+                        pt: 0.125,
+                      }}
+                    >
+                      {shortenAddress(token.address)}
+                    </Box>
                     <OpenTokenDetailsButton
                       tokenAddress={token.address}
                       withoutContractAddress={withoutContractAddress}
+                      chainId={token.chainId}
                       onClick={onShowTokenDetails}
                     />
                   </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',
-                  }}
-                >
-                  <Box
-                    sx={{
-                      display: 'flex',
-                      alignItems: 'center',
-                      pt: 0.125,
-                    }}
-                  >
-                    {shortenAddress(token.address)}
-                  </Box>
-                  <OpenTokenDetailsButton
-                    tokenAddress={token.address}
-                    withoutContractAddress={withoutContractAddress}
-                    onClick={onShowTokenDetails}
-                  />
-                </Box>
-              </Slide>
-            </Box>
-          )
-        }
-      />
-      {accountAddress ? (
-        isBalanceLoading ? (
+            )
+          }
+        />
+        {isBalanceLoading ? (
           <TokenAmountSkeleton />
         ) : (
           <Box sx={{ textAlign: 'right' }}>
@@ -299,7 +319,7 @@ export const TokenListItemButton: React.FC<TokenListItemButtonProps> = ({
                 })}
               </Typography>
             ) : null}
-            {tokenPrice ? (
+            {token.amount && token.priceUSD ? (
               <Typography
                 data-price={token.priceUSD}
                 sx={{
@@ -314,23 +334,26 @@ export const TokenListItemButton: React.FC<TokenListItemButtonProps> = ({
               </Typography>
             ) : null}
           </Box>
-        )
-      ) : null}
-    </ListItemButton>
-  )
-}
+        )}
+      </ListItemButton>
+    )
+  }
+)
 
 export const TokenListItemSkeleton = () => {
   return (
     <ListItem
       secondaryAction={<TokenAmountSkeleton />}
       disablePadding
-      sx={{
+      sx={(theme) => ({
         position: 'relative',
         flexDirection: 'row',
         alignItems: 'center',
         padding: 0,
-      }}
+        [`& .${listItemSecondaryActionClasses.root}`]: {
+          right: theme.spacing(1.5),
+        },
+      })}
     >
       <ListItemAvatar>
         <Skeleton
@@ -348,7 +371,7 @@ export const TokenListItemSkeleton = () => {
   )
 }
 
-export const TokenAmountSkeleton: React.FC = () => {
+const TokenAmountSkeleton: React.FC = () => {
   return (
     <Box
       sx={{

package/src/components/TokenList/VirtualizedTokenList.tsx

@@ -1,8 +1,9 @@
 import { Typography } from '@mui/material'
 import { useVirtualizer } from '@tanstack/react-virtual'
 import type { FC } from 'react'
-import { useCallback, useEffect, useRef } 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'
@@ -12,50 +13,64 @@ import type {
   VirtualizedTokenListProps,
 } from './types.js'
 
+const tokenItemHeight = 64 // 60 + 4px margin-bottom
+
 export const VirtualizedTokenList: FC<VirtualizedTokenListProps> = ({
-  account,
   tokens,
   scrollElementRef,
   chainId,
-  chain,
   selectedTokenAddress,
   isLoading,
   isBalanceLoading,
   showCategories,
   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) => {
-      tokenDetailsSheetRef.current?.open(tokenAddress, noContractAddress)
+    (tokenAddress: string, noContractAddress: boolean, chainId: number) => {
+      tokenDetailsSheetRef.current?.open(
+        tokenAddress,
+        noContractAddress,
+        chainId
+      )
     },
     []
   )
 
   const getItemKey = useCallback(
     (index: number) => {
-      return `${tokens[index].address}-${index}`
+      const token = tokens[index]
+      return `${token.chainId}-${token.address}-${index}`
     },
     [tokens]
   )
 
-  const { getVirtualItems, getTotalSize, scrollToIndex } = useVirtualizer({
-    count: tokens.length,
-    overscan: 5,
-    paddingEnd: 12,
-    getScrollElement: () => scrollElementRef.current,
-    estimateSize: (index) => {
+  const estimateSize = useCallback(
+    (index: number) => {
+      const currentToken = tokens[index]
+
       // Base size for TokenListItem
-      let size = 64
+      let size = tokenItemHeight
+
       // 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
@@ -75,8 +90,30 @@ export const VirtualizedTokenList: FC<VirtualizedTokenListProps> = ({
 
       return size
     },
-    getItemKey,
-  })
+    [tokens, showCategories]
+  )
+
+  // Chunk the tokens for infinite loading simulation
+  const virtualizerConfig = useMemo(
+    () => ({
+      count: tokens.length,
+      overscan: 5,
+      getScrollElement: () => scrollElementRef.current,
+      estimateSize,
+      getItemKey,
+    }),
+    [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(() => {
@@ -86,17 +123,7 @@ export const VirtualizedTokenList: FC<VirtualizedTokenListProps> = ({
     }
     // Close the token details sheet when switching the chains
     tokenDetailsSheetRef.current?.close()
-  }, [scrollToIndex, chainId, getVirtualItems])
-
-  if (isLoading) {
-    return (
-      <List disablePadding>
-        {Array.from({ length: 3 }).map((_, index) => (
-          <TokenListItemSkeleton key={index} />
-        ))}
-      </List>
-    )
-  }
+  }, [scrollToIndex, isAllNetworks, chainId, getVirtualItems])
 
   return (
     <>
@@ -109,6 +136,8 @@ export const VirtualizedTokenList: FC<VirtualizedTokenListProps> = ({
           const currentToken = tokens[item.index]
           const previousToken: TokenAmount | undefined = tokens[item.index - 1]
 
+          const chain = chainsSet?.get(currentToken.chainId)
+
           const isFirstFeaturedToken = currentToken.featured && item.index === 0
 
           const isTransitionFromFeaturedTokens =
@@ -129,23 +158,28 @@ export const VirtualizedTokenList: FC<VirtualizedTokenListProps> = ({
             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
+          const startAdornmentLabel =
+            !isAllNetworks && 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
+
+          const isSelected =
+            selectedTokenAddress === currentToken.address &&
+            chainId === currentToken.chainId
 
           return (
             <TokenListItem
@@ -154,11 +188,10 @@ export const VirtualizedTokenList: FC<VirtualizedTokenListProps> = ({
               size={item.size}
               start={item.start}
               token={currentToken}
-              chain={chain}
-              selected={currentToken.address === selectedTokenAddress}
+              chain={isAllNetworks ? chain : undefined}
+              selected={isSelected}
               onShowTokenDetails={onShowTokenDetails}
               isBalanceLoading={isBalanceLoading}
-              accountAddress={account.address}
               startAdornment={
                 startAdornmentLabel ? (
                   <Typography
@@ -179,7 +212,14 @@ export const VirtualizedTokenList: FC<VirtualizedTokenListProps> = ({
           )
         })}
       </List>
-      <TokenDetailsSheet ref={tokenDetailsSheetRef} chainId={chainId} />
+      <TokenDetailsSheet ref={tokenDetailsSheetRef} />
+      {isLoading && (
+        <List disablePadding sx={{ cursor: 'default' }}>
+          {Array.from({ length: 3 }).map((_, index) => (
+            <TokenListItemSkeleton key={index} />
+          ))}
+        </List>
+      )}
     </>
   )
 }