@lifi/widget 3.29.1 → 3.30.0

package/src/components/TokenList/TokenList.tsx

@@ -1,151 +1,79 @@
-import type { BaseToken } from '@lifi/sdk'
-import { useAccount } from '@lifi/wallet-management'
 import { Box } from '@mui/material'
-import { type FC, useEffect } from 'react'
-import { useChain } from '../../hooks/useChain.js'
+import { type FC, memo, useEffect } from 'react'
 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 { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
+import { useChainOrderStore } from '../../stores/chains/ChainOrderStore.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 { getConfigItemSets, isFormItemAllowed } from '../../utils/item.js'
 import { TokenNotFound } from './TokenNotFound.js'
 import type { TokenListProps } from './types.js'
 import { useTokenSelect } from './useTokenSelect.js'
-import { filteredTokensComparator } from './utils.js'
 import { VirtualizedTokenList } from './VirtualizedTokenList.js'
 
-export const TokenList: FC<TokenListProps> = ({
-  formType,
-  parentRef,
-  height,
-  onClick,
-}) => {
-  const emitter = useWidgetEvents()
-  const [selectedChainId, selectedTokenAddress] = useFieldValues(
-    FormKeyHelper.getChainKey(formType),
-    FormKeyHelper.getTokenKey(formType)
-  )
-  const [tokenSearchFilter]: string[] = useDebouncedWatch(
-    320,
-    'tokenSearchFilter'
-  )
+export const TokenList: FC<TokenListProps> = memo(
+  ({ formType, parentRef, height, onClick }) => {
+    const emitter = useWidgetEvents()
 
-  const { tokens: configTokens } = useWidgetConfig()
-
-  const { chain: selectedChain, isLoading: isSelectedChainLoading } =
-    useChain(selectedChainId)
-  const { account } = useAccount({
-    chainType: selectedChain?.chainType,
-  })
-
-  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() ?? ''
-
-  const filteredConfigTokens = getConfigItemSets(
-    configTokens,
-    (tokens: BaseToken[]) =>
-      new Set(
-        tokens
-          .filter((t) => t.chainId === selectedChainId)
-          .map((t) => t.address)
-      ),
-    formType
-  )
-
-  // Get the appropriate allow/deny lists based on formType
-  filteredTokens = filteredTokens.filter(
-    (token) =>
-      token.chainId === selectedChainId &&
-      isFormItemAllowed(token, filteredConfigTokens, formType, (t) => t.address)
-  )
+    const [selectedChainId, selectedTokenAddress] = useFieldValues(
+      FormKeyHelper.getChainKey(formType),
+      FormKeyHelper.getTokenKey(formType)
+    )
 
-  filteredTokens = tokenSearchFilter
-    ? filteredTokens
-        .filter(
-          (token) =>
-            token.name?.toUpperCase().includes(searchFilter) ||
-            token.symbol
-              .toUpperCase()
-              // Replace ₮ with T for USD₮0
-              .replaceAll('₮', 'T')
-              .includes(searchFilter) ||
-            token.address.toUpperCase().includes(searchFilter)
-        )
-        .sort(filteredTokensComparator(searchFilter))
-    : filteredTokens
+    const isAllNetworks = useChainOrderStore((state) => state.isAllNetworks)
 
-  const tokenSearchEnabled =
-    !isTokensLoading &&
-    !filteredTokens.length &&
-    !!tokenSearchFilter &&
-    !!selectedChainId
+    const [tokenSearchFilter]: string[] = useDebouncedWatch(
+      320,
+      'tokenSearchFilter'
+    )
 
-  const { token: searchedToken, isLoading: isSearchedTokenLoading } =
-    useTokenSearch(
+    const {
+      tokens,
+      withCategories,
+      isTokensLoading,
+      isBalanceLoading,
+      isSearchLoading,
+    } = useTokenBalances(
       selectedChainId,
-      normalizedSearchFilter,
-      tokenSearchEnabled,
-      formType
+      formType,
+      isAllNetworks,
+      tokenSearchFilter
     )
 
-  const isLoading =
-    isTokensLoading ||
-    isSelectedChainLoading ||
-    (tokenSearchEnabled && isSearchedTokenLoading)
+    const handleTokenClick = useTokenSelect(formType, onClick)
 
-  const tokens = filteredTokens.length
-    ? filteredTokens
-    : searchedToken
-      ? [searchedToken]
-      : filteredTokens
+    const showCategories =
+      withCategories && !tokenSearchFilter && !isAllNetworks
 
-  const handleTokenClick = useTokenSelect(formType, onClick)
-  const showCategories =
-    Boolean(featuredTokens?.length || popularTokens?.length) &&
-    !tokenSearchFilter
+    useEffect(() => {
+      const normalizedSearchFilter = tokenSearchFilter?.replaceAll('$', '')
+      if (normalizedSearchFilter) {
+        emitter.emit(WidgetEvent.TokenSearch, {
+          value: normalizedSearchFilter,
+          tokens,
+        })
+      }
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [tokenSearchFilter, tokens, emitter])
 
-  // biome-ignore lint/correctness/useExhaustiveDependencies: Should fire only when search filter changes
-  useEffect(() => {
-    if (normalizedSearchFilter) {
-      emitter.emit(WidgetEvent.TokenSearch, {
-        value: normalizedSearchFilter,
-        tokens,
-      })
-    }
-  }, [normalizedSearchFilter, emitter])
-
-  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}
-        selectedTokenAddress={selectedTokenAddress}
-      />
-    </Box>
-  )
-}
+    return (
+      <Box ref={parentRef} style={{ height, overflow: 'auto' }}>
+        {!tokens.length && !isTokensLoading && !isSearchLoading ? (
+          <TokenNotFound formType={formType} />
+        ) : null}
+        <VirtualizedTokenList
+          tokens={tokens}
+          scrollElementRef={parentRef}
+          chainId={selectedChainId}
+          isLoading={isTokensLoading || isSearchLoading}
+          isBalanceLoading={isBalanceLoading}
+          showCategories={showCategories}
+          onClick={handleTokenClick}
+          selectedTokenAddress={selectedTokenAddress}
+          isAllNetworks={isAllNetworks}
+        />
+      </Box>
+    )
+  }
+)

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,33 +62,40 @@ export const TokenListItem: React.FC<TokenListItemProps> = memo(
   }
 )
 
-export const TokenListItemAvatar: React.FC<TokenListItemAvatarProps> = ({
-  token,
-}) => {
-  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>
-  )
-}
+export 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
-  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 +107,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 +115,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)
+export 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)
+    const onMouseEnter = () => {
+      timeoutId.current = setTimeout(() => {
+        if (token.address) {
+          setShowAddress(true)
+        }
+      }, 350)
+    }
+
+    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 +283,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 +321,7 @@ export const TokenListItemButton: React.FC<TokenListItemButtonProps> = ({
                 })}
               </Typography>
             ) : null}
-            {tokenPrice ? (
+            {token.amount && token.priceUSD ? (
               <Typography
                 data-price={token.priceUSD}
                 sx={{
@@ -314,23 +336,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