@lifi/widget 4.6.0 → 4.7.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lifi/widget",
-  "version": "4.6.0",
+  "version": "4.7.1",
   "description": "LI.FI Widget for cross-chain bridging and swapping. It will drive your multi-chain strategy and attract new users from everywhere.",
   "type": "module",
   "main": "./dist/esm/index.js",
@@ -52,19 +52,19 @@
   "dependencies": {
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
-    "@lifi/sdk": "^4.6.1",
-    "@lifi/wallet-management": "4.2.0",
-    "@lifi/widget-provider": "4.4.0",
+    "@lifi/sdk": "^4.8.0",
+    "@lifi/wallet-management": "4.3.0",
+    "@lifi/widget-provider": "4.5.0",
     "@mui/icons-material": "^9.4.0",
     "@mui/material": "^9.4.0",
     "@mui/system": "^9.4.0",
-    "@tanstack/react-router": "^1.170.32",
-    "@tanstack/react-virtual": "^3.14.10",
+    "@tanstack/react-router": "^1.170.38",
+    "@tanstack/react-virtual": "^3.14.13",
     "eventemitter3": "^5.0.4",
-    "i18next": "^26.4.1",
+    "i18next": "^26.4.2",
     "microdiff": "^1.6.0",
-    "motion": "^13.2.0",
-    "react-i18next": "^17.0.13",
+    "motion": "^13.4.0",
+    "react-i18next": "^17.0.14",
     "react-intersection-observer": "^11.0.1",
     "react-transition-group": "^4.4.5",
     "zustand": "^5.0.15"

package/src/components/AmountInputCard/ReceiveAmountCard.tsx

@@ -6,12 +6,14 @@ import { Box, Skeleton, Tooltip } from '@mui/material'
 import { type JSX, type ReactNode, useLayoutEffect, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useRoutes } from '../../hooks/useRoutes.js'
+import { useToken } from '../../hooks/useToken.js'
 import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
 import { useFieldValues } from '../../stores/form/useFieldValues.js'
 import { useInputModeStore } from '../../stores/inputMode/useInputModeStore.js'
 import { formatTokenAmount, formatTokenPrice } from '../../utils/format.js'
 import { getPriceImpact } from '../../utils/getPriceImpact.js'
 import { fitInputText } from '../../utils/input.js'
+import { mergeFallbackToken } from '../../utils/token.js'
 import { CardTitle } from '../Card/CardTitle.js'
 import { ProgressToNextUpdate } from '../ProgressToNextUpdate.js'
 import { TokenPillButton } from '../TokenPillButton/TokenPillButton.js'
@@ -128,6 +130,17 @@ export const ReceiveAmountCard: React.FC<ReceiveCardProps> = (
   const priceImpact = useReceivePriceImpact(route)
   const showPriceImpact = !hiddenUI?.routeCardPriceImpact
 
+  // Value the amount the way a quote card does, so the two sides of the screen
+  // cannot disagree: the route's own price wins, and the cache fills only a gap
+  // the route leaves — a token it could not price arrives as '0' or ''.
+  const { token: cachedToken } = useToken(
+    route?.toToken.chainId,
+    route?.toToken.address
+  )
+  const pricedToken = route
+    ? mergeFallbackToken(route.toToken, cachedToken)
+    : undefined
+
   const receiveAmount = route?.toAmount
     ? formatTokenAmount(BigInt(route.toAmount), route.toToken.decimals)
     : undefined
@@ -135,10 +148,10 @@ export const ReceiveAmountCard: React.FC<ReceiveCardProps> = (
   const showSkeleton = isFetching && !receiveAmount
 
   const fiatValue =
-    receiveAmount && route?.toToken.priceUSD
-      ? formatTokenPrice(receiveAmount, route.toToken.priceUSD)
+    receiveAmount && pricedToken?.priceUSD
+      ? formatTokenPrice(receiveAmount, pricedToken.priceUSD)
       : 0
-  const canToggle = !!receiveAmount && !!route?.toToken.priceUSD
+  const canToggle = !!receiveAmount && !!pricedToken?.priceUSD
 
   const mainDisplay = showFiat
     ? t('format.currency', { value: fiatValue })

package/src/components/BottomSheet/BottomSheet.tsx

@@ -27,6 +27,9 @@ export const BottomSheet = ({
   const [isInert, setIsInert] = useState(!open)
 
   const close = useCallback(() => {
+    if (!openRef.current) {
+      return
+    }
     // Set inert first to prevent focus issues
     setIsInert(true)
     // Push the state update to the next event loop tick

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

@@ -24,6 +24,7 @@ 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,
@@ -240,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>
@@ -319,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>
@@ -385,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>