@lifi/widget 4.5.0 → 4.7.0

package/src/components/Routes/LimitOrderRoutes.tsx

@@ -17,7 +17,8 @@ export const LimitOrderRoutes: React.FC<CardProps> = (props) => {
     'selectedRouteId'
   )
   const { setFieldValue } = useFieldActions()
-  const { requiredToAddress } = useToAddressRequirements()
+  const { requiredToAddress, unsupportedReceiverBlocking } =
+    useToAddressRequirements()
 
   const currentRoute = routes?.[0]
 
@@ -25,7 +26,9 @@ export const LimitOrderRoutes: React.FC<CardProps> = (props) => {
     return null
   }
 
-  const toAddressUnsatisfied = currentRoute && requiredToAddress && !toAddress
+  const toAddressUnsatisfied =
+    currentRoute &&
+    (unsupportedReceiverBlocking || (requiredToAddress && !toAddress))
   const allowInteraction = !toAddressUnsatisfied
 
   const activeRouteId =

package/src/components/Routes/RoutesContent.tsx

@@ -43,12 +43,15 @@ export const RoutesContent: React.NamedExoticComponent<RoutesContentProps> =
 
     const { account } = useAccount({ chainType: fromChain?.chainType })
     const [toAddress] = useFieldValues('toAddress')
-    const { requiredToAddress } = useToAddressRequirements()
+    const { requiredToAddress, unsupportedReceiverBlocking } =
+      useToAddressRequirements()
 
     const currentRoute = routes?.[0]
 
     const routeNotFound = !currentRoute && !isLoading && !isFetching
-    const toAddressUnsatisfied = currentRoute && requiredToAddress && !toAddress
+    const toAddressUnsatisfied =
+      currentRoute &&
+      (unsupportedReceiverBlocking || (requiredToAddress && !toAddress))
     const allowInteraction = account.isConnected && !toAddressUnsatisfied
 
     const title =

package/src/components/SendToWallet/SendToWalletExpandButton.tsx

@@ -16,12 +16,13 @@ export const SendToWalletExpandButton = (): JSX.Element => {
   const { toAddresses, disabledUI, hiddenUI } = useWidgetConfig()
   const hiddenToAddress = hiddenUI?.toAddress
   const disabledToAddress = disabledUI?.toAddress
-  const { requiredToAddress } = useToAddressRequirements()
+  const { requiredToAddress, unsupportedToAddress } = useToAddressRequirements()
   const [toAddressValue] = useFieldValues('toAddress')
 
   const visible =
     !hiddenToAddress &&
     !disabledToAddress &&
+    !unsupportedToAddress &&
     !toAddressValue &&
     !requiredToAddress
 

package/src/components/Token/Token.tsx

@@ -7,6 +7,7 @@ import { useChain } from '../../hooks/useChain.js'
 import { useToken } from '../../hooks/useToken.js'
 import { formatTokenAmount, formatTokenPrice } from '../../utils/format.js'
 import { getPriceImpact } from '../../utils/getPriceImpact.js'
+import { mergeFallbackToken } from '../../utils/token.js'
 import { AvatarBadgedSkeleton } from '../Avatar/Avatar.js'
 import { SmallAvatar } from '../Avatar/SmallAvatar.js'
 import { TokenAvatar } from '../Avatar/TokenAvatar.js'
@@ -42,7 +43,7 @@ const TokenFallback: FC<TokenProps & BoxProps> = ({
 
   return (
     <TokenBase
-      token={{ ...token, ...chainToken } as TokenAmount}
+      token={mergeFallbackToken(token, chainToken)}
       isLoading={isLoading || isLoadingToken}
       {...other}
     />

package/src/components/TokenList/RecentTokensHeader.tsx

@@ -0,0 +1,52 @@
+import { Box, Typography } from '@mui/material'
+import type { JSX } from 'react'
+import { useTranslation } from 'react-i18next'
+import {
+  FooterText,
+  ToggleButton,
+} from '../AmountInputCard/AmountInputCard.style.js'
+
+interface RecentTokensHeaderProps {
+  atListStart: boolean
+  onClear?: () => void
+}
+
+export const RecentTokensHeader = ({
+  atListStart,
+  onClear,
+}: RecentTokensHeaderProps): JSX.Element => {
+  const { t } = useTranslation()
+
+  return (
+    <Box
+      sx={{
+        // ListItem is a flex container; claim the width for space-between.
+        width: '100%',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        px: 1.5,
+        pt: atListStart ? 0 : 1,
+        pb: 1,
+      }}
+    >
+      <Typography sx={{ fontSize: 14, fontWeight: 600, lineHeight: '16px' }}>
+        {t('main.recentSearches')}
+      </Typography>
+      {onClear ? (
+        <ToggleButton
+          clickable
+          // Right-aligned, so the padding hangs past the right edge instead.
+          sx={{ px: 0.75, ml: 0, mr: -0.75 }}
+          onClick={(e) => {
+            e.stopPropagation()
+            e.currentTarget.blur()
+            onClear()
+          }}
+        >
+          <FooterText>{t('button.clear')}</FooterText>
+        </ToggleButton>
+      ) : null}
+    </Box>
+  )
+}

package/src/components/TokenList/RecentTokensToggle.tsx

@@ -0,0 +1,45 @@
+import ExpandLessIcon from '@mui/icons-material/ExpandLess'
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
+import { Box } from '@mui/material'
+import type { JSX } from 'react'
+import { useTranslation } from 'react-i18next'
+import {
+  FooterText,
+  ToggleButton,
+} from '../AmountInputCard/AmountInputCard.style.js'
+
+interface RecentTokensToggleProps {
+  expanded: boolean
+  hiddenCount: number
+  onToggle: () => void
+}
+
+export const RecentTokensToggle = ({
+  expanded,
+  hiddenCount,
+  onToggle,
+}: RecentTokensToggleProps): JSX.Element => {
+  const { t } = useTranslation()
+  const ExpandIcon = expanded ? ExpandLessIcon : ExpandMoreIcon
+
+  return (
+    // 1 + 18 + 7 fills the reserved 26px: text 8px below the band, 18px above the next header.
+    <Box sx={{ width: '100%', display: 'flex', px: 1.5, pt: '1px', pb: '7px' }}>
+      <ToggleButton
+        clickable
+        onClick={(e) => {
+          e.stopPropagation()
+          e.currentTarget.blur()
+          onToggle()
+        }}
+      >
+        <FooterText>
+          {expanded
+            ? t('button.showLess')
+            : t('button.showMore', { count: hiddenCount })}
+        </FooterText>
+        <ExpandIcon sx={{ fontSize: 14, color: 'text.secondary' }} />
+      </ToggleButton>
+    </Box>
+  )
+}

package/src/components/TokenList/RemoveRecentTokenButton.tsx

@@ -0,0 +1,38 @@
+import CloseIcon from '@mui/icons-material/Close'
+import { IconButton } from '@mui/material'
+import type { JSX } from 'react'
+import { useTranslation } from 'react-i18next'
+import { useRecentTokensStore } from '../../stores/recentTokens/RecentTokensStore.js'
+
+interface RemoveRecentTokenButtonProps {
+  chainId: number
+  tokenAddress: string
+}
+
+export const RemoveRecentTokenButton = ({
+  chainId,
+  tokenAddress,
+}: RemoveRecentTokenButtonProps): JSX.Element => {
+  const { t } = useTranslation()
+  // Selecting the action alone keeps this out of every store update.
+  const removeRecentToken = useRecentTokensStore(
+    (state) => state.removeRecentToken
+  )
+
+  const handleClick = (e: React.MouseEvent) => {
+    e.stopPropagation()
+    ;(e.currentTarget as HTMLElement).blur()
+    removeRecentToken(chainId, tokenAddress)
+  }
+
+  return (
+    <IconButton
+      aria-label={t('button.delete')}
+      sx={{ width: 20, height: 20 }}
+      size="small"
+      onClick={handleClick}
+    >
+      <CloseIcon sx={{ fontSize: 12, color: 'text.secondary' }} />
+    </IconButton>
+  )
+}

package/src/components/TokenList/TokenList.tsx

@@ -1,20 +1,26 @@
 import { Box } from '@mui/material'
-import { type FC, memo, useEffect, useRef } from 'react'
+import { type FC, memo, useCallback, useEffect, useRef, useState } from 'react'
 import { useDebouncedWatch } from '../../hooks/useDebouncedWatch.js'
 import { useListHeight } from '../../hooks/useListHeight.js'
 import { useNavigateBack } from '../../hooks/useNavigateBack.js'
+import { useRecentTokens } from '../../hooks/useRecentTokens.js'
 import { useTokenBalances } from '../../hooks/useTokenBalances.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 { useRecentTokensStore } from '../../stores/recentTokens/RecentTokensStore.js'
+import { toRecentToken } from '../../stores/recentTokens/utils.js'
 import { WidgetEvent } from '../../types/events.js'
+import { collapsedRecentCount } from '../../utils/recentTokens.js'
 import { TokenNotFound } from './TokenNotFound.js'
 import type { TokenListProps } from './types.js'
 import { useTokenSelect } from './useTokenSelect.js'
 import { VirtualizedTokenList } from './VirtualizedTokenList.js'
 
 export const TokenList: FC<TokenListProps> = memo(({ formType, headerRef }) => {
+  const { hiddenUI } = useWidgetConfig()
   const navigateBack = useNavigateBack()
   const listParentRef = useRef<HTMLUListElement | null>(null)
   const { listHeight } = useListHeight({
@@ -45,6 +51,7 @@ export const TokenList: FC<TokenListProps> = memo(({ formType, headerRef }) => {
     isTokensLoading,
     isBalanceLoading,
     isSearchLoading,
+    nativeHoisted,
   } = useTokenBalances(
     selectedChainId,
     formType,
@@ -52,7 +59,78 @@ export const TokenList: FC<TokenListProps> = memo(({ formType, headerRef }) => {
     tokenSearchFilter
   )
 
-  const handleTokenClick = useTokenSelect(formType, navigateBack)
+  // Keyed by scope, so a chain switch collapses the band in the same render.
+  const recentScope = `${selectedChainId}-${!!isAllNetworks}`
+  const [expandedScope, setExpandedScope] = useState<string>()
+  const recentExpanded = expandedScope === recentScope
+
+  const {
+    tokens: tokensWithRecent,
+    bandEntries,
+    recentStartIndex,
+    recentCount,
+    totalRecentCount,
+  } = useRecentTokens(tokens, {
+    selectedChainId,
+    isAllNetworks,
+    search: tokenSearchFilter,
+    expanded: recentExpanded,
+    formType,
+    isTokensLoading,
+    nativeHoisted: !!nativeHoisted,
+  })
+
+  const selectToken = useTokenSelect(formType, navigateBack)
+  const [addRecentToken, isRecentToken, clearRecentTokens] =
+    useRecentTokensStore((state) => [
+      state.addRecentToken,
+      state.isRecentToken,
+      state.clearRecentTokens,
+    ])
+
+  // Refs keep onClick stable across refetches and keystrokes for memoized rows.
+  const tokensRef = useRef(tokensWithRecent)
+  tokensRef.current = tokensWithRecent
+  const searchRef = useRef(tokenSearchFilter)
+  searchRef.current = tokenSearchFilter
+
+  const handleTokenClick = useCallback(
+    (address: string, chainId?: number) => {
+      if (
+        chainId &&
+        !hiddenUI?.recentSearches &&
+        (searchRef.current?.trim() || isRecentToken(chainId, address))
+      ) {
+        // A band row is either a copy of the live row or has no live row.
+        const lower = address.toLowerCase()
+        const token = tokensRef.current.find(
+          (item) =>
+            item.chainId === chainId && item.address.toLowerCase() === lower
+        )
+        if (token) {
+          addRecentToken(toRecentToken(token))
+        }
+      }
+      selectToken(address, chainId)
+    },
+    [addRecentToken, isRecentToken, selectToken, hiddenUI?.recentSearches]
+  )
+
+  const toggleRecentExpanded = useCallback(
+    () =>
+      setExpandedScope((scope) =>
+        scope === recentScope ? undefined : recentScope
+      ),
+    [recentScope]
+  )
+
+  // The band filters on chain, config and pins; Clear takes its exact entries.
+  const bandEntriesRef = useRef(bandEntries)
+  bandEntriesRef.current = bandEntries
+  const clearRecentBand = useCallback(
+    () => clearRecentTokens(bandEntriesRef.current),
+    [clearRecentTokens]
+  )
 
   const showCategories = withCategories && !tokenSearchFilter && !isAllNetworks
 
@@ -72,7 +150,7 @@ export const TokenList: FC<TokenListProps> = memo(({ formType, headerRef }) => {
         <TokenNotFound formType={formType} />
       ) : null}
       <VirtualizedTokenList
-        tokens={tokens}
+        tokens={tokensWithRecent}
         scrollElementRef={listParentRef}
         chainId={selectedChainId}
         isLoading={isTokensLoading || isSearchLoading}
@@ -82,6 +160,17 @@ export const TokenList: FC<TokenListProps> = memo(({ formType, headerRef }) => {
         onClick={handleTokenClick}
         selectedTokenAddress={selectedTokenAddress}
         isAllNetworks={isAllNetworks}
+        nativeHoisted={!!nativeHoisted}
+        recentStartIndex={recentStartIndex}
+        recentCount={recentCount}
+        hiddenRecentCount={totalRecentCount - recentCount}
+        recentExpanded={recentExpanded}
+        onToggleRecent={
+          totalRecentCount > collapsedRecentCount
+            ? toggleRecentExpanded
+            : undefined
+        }
+        onClearRecent={clearRecentBand}
       />
     </Box>
   )

package/src/components/TokenList/TokenListItem.tsx

@@ -1,7 +1,8 @@
 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 ReportRoundedIcon from '@mui/icons-material/ReportRounded'
+import VerifiedIcon from '@mui/icons-material/Verified'
 import {
   Avatar,
   Box,
@@ -18,10 +19,12 @@ 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 { getTokenVerificationProvider } from '../../utils/token.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 { RemoveRecentTokenButton } from './RemoveRecentTokenButton.js'
 import { IconButton, ListItem } from './TokenList.style.js'
 import type {
   TokenListItemAvatarProps,
@@ -36,6 +39,7 @@ export const TokenListItem: React.FC<TokenListItemProps> = memo(
     start,
     token,
     chain,
+    chainName,
     isBalanceLoading,
     startAdornment,
     endAdornment,
@@ -56,6 +60,7 @@ export const TokenListItem: React.FC<TokenListItemProps> = memo(
           isBalanceLoading={isBalanceLoading}
           onClick={onClick}
           chain={chain}
+          chainName={chainName}
           selected={selected}
           onShowTokenDetails={onShowTokenDetails}
         />
@@ -121,6 +126,7 @@ const TokenListItemButton: React.FC<TokenListItemButtonProps> = memo(
     onClick,
     token,
     chain,
+    chainName,
     isBalanceLoading,
     selected,
     onShowTokenDetails,
@@ -166,6 +172,64 @@ const TokenListItemButton: React.FC<TokenListItemButtonProps> = memo(
       onShowTokenDetails(token.address, withoutContractAddress, token.chainId)
     )
 
+    // The native token is badged ahead of any verdict: the provider screens
+    // the native-address convention and calls it a scam on some chains.
+    // A token the main list or the integrator vouches for needs no warning;
+    // anything else without a clean verdict keeps the amber one.
+    let verificationBadge:
+      | { Icon: typeof VerifiedIcon; color: string; title: string }
+      | undefined
+    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 (
       <ListItemButton
         onClick={handleClick}
@@ -177,6 +241,8 @@ const TokenListItemButton: React.FC<TokenListItemButtonProps> = memo(
         sx={{
           height: 60,
           marginBottom: '4px',
+          // Not a flex-grow item: a band slot's spare height must not stretch the card.
+          flex: 'none',
         }}
       >
         <ListItemAvatar>
@@ -195,17 +261,13 @@ const TokenListItemButton: React.FC<TokenListItemButtonProps> = memo(
           primary={
             <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
               {token.symbol}
-              {!token.verified && (
-                <Tooltip
-                  title={t('warning.message.unverifiedToken')}
-                  placement="top"
-                  arrow
-                >
-                  <WarningRounded
+              {verificationBadge && (
+                <Tooltip title={verificationBadge.title} placement="top" arrow>
+                  <verificationBadge.Icon
                     sx={{
                       display: 'flex',
                       fontSize: 16,
-                      color: 'warning.main',
+                      color: verificationBadge.color,
                       cursor: 'help',
                     }}
                   />
@@ -260,6 +322,12 @@ const TokenListItemButton: React.FC<TokenListItemButtonProps> = memo(
                         chainId={token.chainId}
                         tokenAddress={token.address}
                       />
+                      {token.recent ? (
+                        <RemoveRecentTokenButton
+                          chainId={token.chainId}
+                          tokenAddress={token.address}
+                        />
+                      ) : null}
                     </Box>
                   </Slide>
                 </Box>
@@ -326,6 +394,12 @@ const TokenListItemButton: React.FC<TokenListItemButtonProps> = memo(
                         chainId={token.chainId}
                         tokenAddress={token.address}
                       />
+                      {token.recent ? (
+                        <RemoveRecentTokenButton
+                          chainId={token.chainId}
+                          tokenAddress={token.address}
+                        />
+                      ) : null}
                     </Box>
                   </Box>
                 </Slide>