@lifi/widget 4.9.0 → 4.10.0

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.0'

package/src/utils/token.ts

@@ -280,6 +280,54 @@ export const getTokenVerificationProvider = (
     : undefined
 }
 
+export type TokenVerificationBadge =
+  | 'native'
+  | 'flagged'
+  | 'verified'
+  | 'unverifiedByProvider'
+  | 'unverified'
+
+export const getTokenVerificationBadge = (
+  token: Pick<
+    TokenWithFlags,
+    'native' | 'listed' | 'verified' | 'verificationStatus'
+  >
+): TokenVerificationBadge | undefined => {
+  // The provider calls the native-address convention a scam on some chains.
+  if (token.native) {
+    return 'native'
+  }
+  if (token.verificationStatus === 'flagged') {
+    return 'flagged'
+  }
+  if (token.verificationStatus === 'verified') {
+    return 'verified'
+  }
+  if (token.listed || token.verified) {
+    return undefined
+  }
+  return token.verificationStatus === 'unverified'
+    ? 'unverifiedByProvider'
+    : 'unverified'
+}
+
+export type TokenStatusTextKey =
+  | 'tokenMetric.statusVerified'
+  | 'tokenMetric.statusFlagged'
+  | 'tokenMetric.statusUnverified'
+
+export const getTokenStatusTextKey = (
+  token: Pick<TokenWithFlags, 'native' | 'verificationStatus'>
+): TokenStatusTextKey => {
+  if (token.verificationStatus === 'verified') {
+    return 'tokenMetric.statusVerified'
+  }
+  if (token.verificationStatus === 'flagged' && !token.native) {
+    return 'tokenMetric.statusFlagged'
+  }
+  return 'tokenMetric.statusUnverified'
+}
+
 /**
  * Hyperliquid declares Arbitrum USDC as its native token, Lighter declares
  * Ethereum USDC. Neither is a gas token you hold there. A chain-local