@lifi/widget 4.9.0 → 4.10.1

package/src/components/TokenList/TokenDetailsSheetContent.tsx

@@ -8,6 +8,11 @@ import { useTranslation } from 'react-i18next'
 import { useAvailableChains } from '../../hooks/useAvailableChains.js'
 import { useExplorer } from '../../hooks/useExplorer.js'
 import { useToken } from '../../hooks/useToken.js'
+import type { TokenAmount } from '../../types/token.js'
+import {
+  getTokenStatusTextKey,
+  getTokenVerificationBadge,
+} from '../../utils/token.js'
 import { shortenAddress } from '../../utils/wallet.js'
 import { TokenAvatar } from '../Avatar/TokenAvatar.js'
 import { CardIconButton } from '../Card/CardIconButton.js'
@@ -17,10 +22,10 @@ import {
   TokenDetailsSheetContainer,
   TokenDetailsSheetHeader,
 } from './TokenDetailsSheetContent.style.js'
+import { tokenVerificationIcons } from './tokenVerificationIcons.js'
 
 interface TokenDetailsSheetContentProps {
-  tokenAddress: string | undefined
-  chainId: number | undefined
+  listToken: TokenAmount | undefined
   withoutContractAddress: boolean
   onClose: () => void
 }
@@ -28,8 +33,7 @@ interface TokenDetailsSheetContentProps {
 const noDataLabel = '-'
 
 export const TokenDetailsSheetContent = ({
-  tokenAddress,
-  chainId,
+  listToken,
   withoutContractAddress,
   onClose,
 }: TokenDetailsSheetContentProps): JSX.Element => {
@@ -37,9 +41,22 @@ export const TokenDetailsSheetContent = ({
   const { getAddressLink } = useExplorer()
   const { getChainById } = useAvailableChains()
 
+  const tokenAddress = listToken?.address
+  const chainId = listToken?.chainId
   const { token, isLoading } = useToken(chainId, tokenAddress, true)
   const chain = useMemo(() => getChainById(chainId), [chainId, getChainById])
 
+  // The row token, not the fetched one: only the list sets the flags.
+  const statusBadge = listToken
+    ? getTokenVerificationBadge(listToken)
+    : undefined
+  const statusIcon = statusBadge
+    ? tokenVerificationIcons[statusBadge]
+    : undefined
+  const statusText = listToken
+    ? t(getTokenStatusTextKey(listToken))
+    : noDataLabel
+
   const copyContractAddress = async (e: React.MouseEvent) => {
     e.stopPropagation()
     try {
@@ -215,6 +232,31 @@ export const TokenDetailsSheetContent = ({
             : noDataLabel}
         </Typography>
       </MetricWithSkeleton>
+      <MetricContainer>
+        <Label>{t('tokenMetric.status')}</Label>
+        <Box sx={{ display: 'flex', alignItems: 'flex-start', gap: 1 }}>
+          {statusIcon ? (
+            <statusIcon.Icon
+              sx={{
+                flexShrink: 0,
+                fontSize: 20,
+                color: statusIcon.color,
+              }}
+            />
+          ) : null}
+          <Typography
+            sx={{
+              minWidth: 0,
+              fontWeight: 500,
+              fontSize: '14px',
+              lineHeight: '20px',
+              color: 'text.primary',
+            }}
+          >
+            {statusText}
+          </Typography>
+        </Box>
+      </MetricContainer>
     </TokenDetailsSheetContainer>
   )
 }

package/src/components/TokenList/TokenListItem.tsx

@@ -1,8 +1,6 @@
 import type { StaticToken } from '@lifi/sdk'
 import { ChainType } from '@lifi/sdk'
 import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined'
-import ReportRoundedIcon from '@mui/icons-material/ReportRounded'
-import VerifiedIcon from '@mui/icons-material/Verified'
 import {
   Avatar,
   Box,
@@ -18,14 +16,19 @@ import type { JSX, MouseEventHandler } from 'react'
 import { memo, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useLongPress } from '../../hooks/useLongPress.js'
+import type { TokenAmount } from '../../types/token.js'
 import { formatTokenAmount, formatTokenPrice } from '../../utils/format.js'
-import { getTokenVerificationProvider } from '../../utils/token.js'
+import {
+  getTokenVerificationBadge,
+  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 { tokenVerificationIcons } from './tokenVerificationIcons.js'
 import type {
   TokenListItemAvatarProps,
   TokenListItemButtonProps,
@@ -88,23 +91,17 @@ const TokenListItemAvatar = memo(({ token }: TokenListItemAvatarProps) => {
 })
 
 interface OpenTokenDetailsButtonProps {
-  tokenAddress: string | undefined
+  token: TokenAmount
   withoutContractAddress: boolean
-  chainId: number
-  onClick: (
-    tokenAddress: string,
-    withoutContractAddress: boolean,
-    chainId: number
-  ) => void
+  onClick: (token: TokenAmount, withoutContractAddress: boolean) => void
 }
 
 const OpenTokenDetailsButton = ({
-  tokenAddress,
+  token,
   withoutContractAddress,
-  chainId,
   onClick,
 }: OpenTokenDetailsButtonProps) => {
-  if (!tokenAddress) {
+  if (!token.address) {
     return null
   }
   return (
@@ -113,7 +110,7 @@ const OpenTokenDetailsButton = ({
       onClick={(e) => {
         e.stopPropagation()
         e.currentTarget.blur() // Remove focus to prevent accessibility issues when opening drawer
-        onClick(tokenAddress, withoutContractAddress, chainId)
+        onClick(token, withoutContractAddress)
       }}
     >
       <InfoOutlinedIcon />
@@ -169,65 +166,46 @@ const TokenListItemButton: React.FC<TokenListItemButtonProps> = memo(
     )
 
     const longPressEvents = useLongPress(() =>
-      onShowTokenDetails(token.address, withoutContractAddress, token.chainId)
+      onShowTokenDetails(token, withoutContractAddress)
     )
 
-    // 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
+    const verificationBadge = getTokenVerificationBadge(token)
+    const verificationIcon = verificationBadge
+      ? tokenVerificationIcons[verificationBadge]
+      : undefined
+    let verificationTitle = ''
+    switch (verificationBadge) {
+      case 'native':
+        verificationTitle = 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', {
+          : t('tooltip.tokenNative', { tokenSymbol: token.symbol })
+        break
+      case 'flagged':
+        verificationTitle = t('warning.message.tokenFlagged', {
           tokenSymbol: token.symbol,
-        }),
-      }
-    } else if (token.verificationStatus === 'verified') {
-      const provider = getTokenVerificationProvider(token)
-      verificationBadge = {
-        Icon: VerifiedIcon,
-        color: 'success.main',
-        title: provider
+        })
+        break
+      case 'verified': {
+        const provider = getTokenVerificationProvider(token)
+        verificationTitle = provider
           ? t('tooltip.tokenVerifiedByProvider', {
               tokenSymbol: token.symbol,
               provider,
             })
-          : t('tooltip.tokenVerified', { tokenSymbol: token.symbol }),
+          : t('tooltip.tokenVerified', { tokenSymbol: token.symbol })
+        break
       }
-    } else if (
-      token.verificationStatus === 'unverified' &&
-      !token.listed &&
-      !token.verified
-    ) {
-      verificationBadge = {
-        Icon: ReportRoundedIcon,
-        color: 'warning.main',
-        title: t('warning.message.tokenUnverifiedByProvider', {
+      case 'unverifiedByProvider':
+        verificationTitle = 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'),
-      }
+        })
+        break
+      case 'unverified':
+        verificationTitle = t('warning.message.tokenUnverified')
+        break
     }
 
     return (
@@ -261,13 +239,13 @@ const TokenListItemButton: React.FC<TokenListItemButtonProps> = memo(
           primary={
             <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
               {token.symbol}
-              {verificationBadge && (
-                <Tooltip title={verificationBadge.title} placement="top" arrow>
-                  <verificationBadge.Icon
+              {verificationIcon && (
+                <Tooltip title={verificationTitle} placement="top" arrow>
+                  <verificationIcon.Icon
                     sx={{
                       display: 'flex',
                       fontSize: 16,
-                      color: verificationBadge.color,
+                      color: verificationIcon.color,
                       cursor: 'help',
                     }}
                   />
@@ -313,9 +291,8 @@ const TokenListItemButton: React.FC<TokenListItemButtonProps> = memo(
                   >
                     <Box>
                       <OpenTokenDetailsButton
-                        tokenAddress={token.address}
+                        token={token}
                         withoutContractAddress={withoutContractAddress}
-                        chainId={token.chainId}
                         onClick={onShowTokenDetails}
                       />
                       <PinTokenButton
@@ -385,9 +362,8 @@ const TokenListItemButton: React.FC<TokenListItemButtonProps> = memo(
                     </Box>
                     <Box>
                       <OpenTokenDetailsButton
-                        tokenAddress={token.address}
+                        token={token}
                         withoutContractAddress={withoutContractAddress}
-                        chainId={token.chainId}
                         onClick={onShowTokenDetails}
                       />
                       <PinTokenButton

package/src/components/TokenList/VirtualizedTokenList.tsx

@@ -5,6 +5,7 @@ import { useCallback, useEffect, useMemo, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useAvailableChains } from '../../hooks/useAvailableChains.js'
 import { getTokenKey } from '../../stores/recentTokens/utils.js'
+import type { TokenAmount } from '../../types/token.js'
 import { isHoistableNative } from '../../utils/tokenList.js'
 import { createBandResolver } from '../../utils/tokenListBands.js'
 import { RecentTokensHeader } from './RecentTokensHeader.js'
@@ -53,12 +54,8 @@ export const VirtualizedTokenList: FC<VirtualizedTokenListProps> = ({
   const tokenDetailsSheetRef = useRef<TokenDetailsSheetBase>(null)
 
   const onShowTokenDetails = useCallback(
-    (tokenAddress: string, noContractAddress: boolean, chainId: number) => {
-      tokenDetailsSheetRef.current?.open(
-        tokenAddress,
-        noContractAddress,
-        chainId
-      )
+    (token: TokenAmount, noContractAddress: boolean) => {
+      tokenDetailsSheetRef.current?.open(token, noContractAddress)
     },
     []
   )

package/src/components/TokenList/tokenVerificationIcons.ts

@@ -0,0 +1,15 @@
+import ReportRoundedIcon from '@mui/icons-material/ReportRounded'
+import VerifiedIcon from '@mui/icons-material/Verified'
+import type { SvgIcon } from '@mui/material'
+import type { TokenVerificationBadge } from '../../utils/token.js'
+
+export const tokenVerificationIcons: Record<
+  TokenVerificationBadge,
+  { Icon: typeof SvgIcon; color: string }
+> = {
+  native: { Icon: VerifiedIcon, color: 'info.main' },
+  flagged: { Icon: ReportRoundedIcon, color: 'error.main' },
+  verified: { Icon: VerifiedIcon, color: 'success.main' },
+  unverifiedByProvider: { Icon: ReportRoundedIcon, color: 'warning.main' },
+  unverified: { Icon: ReportRoundedIcon, color: 'warning.main' },
+}

package/src/components/TokenList/types.ts

@@ -38,11 +38,7 @@ interface TokenListItemBaseProps {
 
 export interface TokenListItemProps extends TokenListItemBaseProps {
   token: TokenAmount
-  onShowTokenDetails: (
-    tokenAddress: string,
-    noContractAddress: boolean,
-    chainId: number
-  ) => void
+  onShowTokenDetails: (token: TokenAmount, noContractAddress: boolean) => void
   chain?: ExtendedChain
   /** Resolved for every row, unlike `chain`, which the list passes only in all-networks mode. */
   chainName?: string
@@ -53,11 +49,7 @@ export interface TokenListItemProps extends TokenListItemBaseProps {
 }
 
 export interface TokenListItemButtonProps {
-  onShowTokenDetails: (
-    tokenAddress: string,
-    noContractAddress: boolean,
-    chainId: number
-  ) => void
+  onShowTokenDetails: (token: TokenAmount, noContractAddress: boolean) => void
   onClick?(tokenAddress: string, chainId?: number): void
   token: TokenAmount
   chain?: ExtendedChain
@@ -73,6 +65,6 @@ export interface TokenListItemAvatarProps {
 
 export interface TokenDetailsSheetBase {
   isOpen(): void
-  open(address: string, noContractAddress: boolean, chainId: number): void
+  open(token: TokenAmount, noContractAddress: boolean): void
   close(): void
 }

package/src/config/version.ts

@@ -1,2 +1,2 @@
 export const name = '@lifi/widget'
-export const version = '4.9.0'
+export const version = '4.10.1'

package/src/hooks/usePacedValue.ts

@@ -1,7 +1,7 @@
 import { useEffect, useRef, useState } from 'react'
 
 /** Smallest gap between UI updates, in milliseconds. */
-const DISPLAY_INTERVAL = 1200
+export const DISPLAY_INTERVAL = 1200
 
 /**
  * Returns `live`, but changes it at most once every {@link DISPLAY_INTERVAL}

package/src/hooks/useRouteExecutionMessage.ts

@@ -1,7 +1,8 @@
-import type { ExecutionActionType, RouteExtended } from '@lifi/sdk'
+import type { RouteExtended } from '@lifi/sdk'
 import { useTranslation } from 'react-i18next'
 import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
 import { RouteExecutionStatus } from '../stores/routes/types.js'
+import { getFailedStepAction } from '../stores/routes/utils.js'
 import { getActionMessage } from '../utils/getActionMessage.js'
 import { getErrorMessage } from '../utils/getErrorMessage.js'
 import { useAvailableChains } from './useAvailableChains.js'
@@ -76,20 +77,16 @@ export const useRouteExecutionMessage = (
       break
     }
     case RouteExecutionStatus.Failed: {
-      const step = route.steps.find(
-        (step) => step.execution?.status === 'FAILED'
-      )
-      if (!step) {
+      const failed = getFailedStepAction(route)
+      if (!failed) {
         break
       }
-      const action = step.execution?.actions?.find(
-        (action) => action.status === 'FAILED'
-      ) || {
-        status: 'FAILED',
-        type: 'EXECUTION' as ExecutionActionType,
-        error: step.execution?.error,
-      } // synthetic action to represent a failed execution with no actions
-      const actionMessage = getErrorMessage(t, getChainById, step, action)
+      const actionMessage = getErrorMessage(
+        t,
+        getChainById,
+        failed.step,
+        failed.action
+      )
       title = actionMessage.title
       message = actionMessage.message
       break