@lifi/widget 4.8.0 → 4.10.0

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/components/TokenList/useTokenSelect.ts

@@ -1,5 +1,7 @@
 import { useCallback } from 'react'
+import { useAvailableChains } from '../../hooks/useAvailableChains.js'
 import { useToAddressAutoPopulate } from '../../hooks/useToAddressAutoPopulate.js'
+import { useToAddressReset } from '../../hooks/useToAddressReset.js'
 import { useWidgetEvents } from '../../hooks/useWidgetEvents.js'
 import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
 import { useChainOrderStore } from '../../stores/chains/ChainOrderStore.js'
@@ -20,6 +22,8 @@ export const useTokenSelect = (
   const emitter = useWidgetEvents()
   const { setFieldValue, getFieldValues } = useFieldActions()
   const autoPopulateToAddress = useToAddressAutoPopulate()
+  const { tryResetToAddress } = useToAddressReset()
+  const { getChainById } = useAvailableChains()
   const [setChain, setIsAllNetworks] = useChainOrderStore((state) => [
     state.setChain,
     state.setIsAllNetworks,
@@ -29,6 +33,7 @@ export const useTokenSelect = (
 
   return useCallback(
     (tokenAddress: string, chainId?: number) => {
+      const [toChainIdBefore] = getFieldValues('toChain')
       setFieldValue(tokenKey, tokenAddress, { isDirty: true, isTouched: true })
       const selectedChainId =
         chainId ?? getFieldValues(FormKeyHelper.getChainKey(formType))[0]
@@ -93,6 +98,14 @@ export const useTokenSelect = (
         setChain(selectedChainId, oppositeFormType)
       }
 
+      // A token from "All networks" moves the destination without the chain select,
+      // which resets a receiver the new chain cannot take.
+      const [toChainId] = getFieldValues('toChain')
+      const toChain = getChainById(toChainId)
+      if (toChainId !== toChainIdBefore && toChain) {
+        tryResetToAddress(toChain)
+      }
+
       // Automatically populate toAddress field if bridging across ecosystems and compatible wallet is connected
       autoPopulateToAddress({
         formType,
@@ -118,6 +131,8 @@ export const useTokenSelect = (
     },
     [
       autoPopulateToAddress,
+      tryResetToAddress,
+      getChainById,
       disabledUI,
       emitter,
       formType,

package/src/config/constants.ts

@@ -1,3 +1,6 @@
 export const defaultMaxHeight = 686
 
 export const internalExplorerUrl = 'https://scan.li.fi'
+
+// Fits the longest Zcash unified address in the official test vectors (509 characters).
+export const addressInputMaxLength = 512

package/src/config/version.ts

@@ -1,2 +1,2 @@
 export const name = '@lifi/widget'
-export const version = '4.8.0'
+export const version = '4.10.0'

package/src/hooks/useAccountsBalancesData.ts

@@ -1,5 +1,6 @@
 import type { TokenExtended } from '@lifi/sdk'
 import { useAccount } from '@lifi/wallet-management'
+import { useAddressForChain } from '@lifi/widget-provider'
 import { useMemo } from 'react'
 import type { FormType } from '../stores/form/types.js'
 import { useChains } from './useChains.js'
@@ -30,6 +31,7 @@ export const useAccountsBalancesData = (
   const { accounts: allAccounts, account: currentAccount } = useAccount(
     isAllNetworks ? undefined : { chainType: currentChain?.chainType }
   )
+  const { isAddressForChain } = useAddressForChain()
   const accounts = useMemo(() => {
     return isAllNetworks
       ? allAccounts
@@ -48,7 +50,9 @@ export const useAccountsBalancesData = (
         (acc, account) => {
           if (account.address) {
             const accountChains = chains?.filter(
-              (chain) => account.chainType === chain?.chainType
+              (chain) =>
+                account.chainType === chain?.chainType &&
+                isAddressForChain(account.address as string, chain)
             )
             if (accountChains) {
               const chainIdSet = new Set(accountChains.map((chain) => chain.id))
@@ -68,7 +72,7 @@ export const useAccountsBalancesData = (
         },
         {} as Record<string, Record<number, TokenExtended[]>>
       )
-  }, [accounts, chains, allTokens])
+  }, [accounts, chains, allTokens, isAddressForChain])
 
   return {
     data: accountsWithTokens,

package/src/hooks/useAddressValidation.ts

@@ -1,6 +1,9 @@
 import type { Chain, ChainType } from '@lifi/sdk'
-import { getNameServiceAddress } from '@lifi/sdk'
-import { useChainTypeFromAddress } from '@lifi/widget-provider'
+import { ChainId, getNameServiceAddress } from '@lifi/sdk'
+import {
+  useAddressForChain,
+  useChainTypeFromAddress,
+} from '@lifi/widget-provider'
 import { useMutation } from '@tanstack/react-query'
 import { useTranslation } from 'react-i18next'
 import { useSDKClient } from '../providers/SDKClientProvider.js'
@@ -12,7 +15,7 @@ export enum AddressType {
 
 type ValidationArgs = {
   value: string
-  chainType?: ChainType
+  /** Strict: the receiver must be valid on this chain. */
   chain?: Chain
 }
 
@@ -20,6 +23,7 @@ type ValidResponse = {
   address: string
   addressType: AddressType
   chainType: ChainType
+  chainId?: ChainId
   isValid: true
 }
 
@@ -35,49 +39,100 @@ export const useAddressValidation = (): {
   isValidating: boolean
 } => {
   const { t } = useTranslation()
-  const { getChainTypeFromAddress } = useChainTypeFromAddress()
+  const { getChainFromAddress } = useChainTypeFromAddress()
+  const { isAddressForChain } = useAddressForChain()
   const sdkClient = useSDKClient()
 
+  const validFor = (
+    address: string,
+    addressType: AddressType,
+    chain: Chain
+  ): ValidResponse => ({
+    address,
+    addressType,
+    chainType: chain.chainType,
+    chainId: getChainFromAddress(address)?.chainId,
+    isValid: true,
+  })
+
+  const validateForChain = async (
+    value: string,
+    chain: Chain
+  ): Promise<ValidResponse | InvalidResponse> => {
+    if (isAddressForChain(value, chain)) {
+      return validFor(value, AddressType.Address, chain)
+    }
+    // A recognised address is no name to resolve.
+    if (getChainFromAddress(value)) {
+      return {
+        isValid: false,
+        error: t('error.title.walletChainTypeInvalid', {
+          chainName: chain.name,
+        }),
+      }
+    }
+    const resolved = await getNameServiceAddress(
+      sdkClient,
+      value,
+      chain.chainType
+    )
+    if (resolved && isAddressForChain(resolved, chain)) {
+      return validFor(resolved, AddressType.NameService, chain)
+    }
+    return {
+      isValid: false,
+      error:
+        chain.id === ChainId.ZEC
+          ? t('error.title.zcashAddressInvalid')
+          : t('error.title.walletAddressInvalid', {
+              context: 'chain',
+              chainName: chain.name,
+            }),
+    }
+  }
+
+  const validateWithoutChain = async (
+    value: string
+  ): Promise<ValidResponse | undefined> => {
+    const detected = getChainFromAddress(value)
+    if (detected) {
+      return {
+        address: value,
+        addressType: AddressType.Address,
+        ...detected,
+        isValid: true,
+      }
+    }
+    const address = await getNameServiceAddress(sdkClient, value)
+    const resolved = address ? getChainFromAddress(address) : undefined
+    if (address && resolved) {
+      return {
+        address,
+        addressType: AddressType.NameService,
+        ...resolved,
+        isValid: true,
+      }
+    }
+    return undefined
+  }
+
   const { mutateAsync: validateAddress, isPending: isValidating } = useMutation(
     {
       mutationFn: async ({
         value,
-        chainType,
         chain,
       }: ValidationArgs): Promise<ValidResponse | InvalidResponse> => {
         try {
           if (!value) {
             throw new Error()
           }
-
-          const _chainType = getChainTypeFromAddress(value)
-          if (_chainType) {
-            return {
-              address: value,
-              addressType: AddressType.Address,
-              chainType: _chainType,
-              isValid: true,
-            }
+          if (chain) {
+            return await validateForChain(value, chain)
           }
-
-          const address = await getNameServiceAddress(
-            sdkClient,
-            value,
-            chainType
-          )
-
-          if (address) {
-            const _chainType = getChainTypeFromAddress(address)
-            if (_chainType) {
-              return {
-                address: address,
-                addressType: AddressType.NameService,
-                chainType: _chainType,
-                isValid: true,
-              }
-            }
+          const result = await validateWithoutChain(value)
+          if (result) {
+            return result
           }
-
           throw new Error()
         } catch (_) {
           return {

package/src/hooks/useGasRefuel.ts

@@ -1,5 +1,6 @@
 import type { ExtendedChain } from '@lifi/sdk'
 import { useAccount } from '@lifi/wallet-management'
+import { useAddressForChain } from '@lifi/widget-provider'
 import { useMemo } from 'react'
 import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
 import { useFieldValues } from '../stores/form/useFieldValues.js'
@@ -28,8 +29,17 @@ export const useGasRefuel = (): {
   const fromChain = getChainById(fromChainId)
 
   const { account: toAccount } = useAccount({ chainType: toChain?.chainType })
+  const { isAddressForChain } = useAddressForChain()
 
-  const effectiveToAddress = toAddress || toAccount?.address
+  // A shared chain type is not a shared format: a Bitcoin account cannot receive on ZEC.
+  const toAccountAddress =
+    toAccount?.address &&
+    toChain &&
+    isAddressForChain(toAccount.address, toChain)
+      ? toAccount.address
+      : undefined
+
+  const effectiveToAddress = toAddress || toAccountAddress
 
   const { isContractAddress: isToContractAddress } = useIsContractAddress(
     effectiveToAddress,