@lifi/widget 4.8.0 → 4.10.0

package/src/pages/SendToWallet/SendToConfiguredWalletPage.tsx

@@ -1,3 +1,4 @@
+import { useChainTypeFromAddress } from '@lifi/widget-provider'
 import ContentCopyRounded from '@mui/icons-material/ContentCopyRounded'
 import OpenInNewRounded from '@mui/icons-material/OpenInNewRounded'
 import { List, ListItemAvatar, ListItemText } from '@mui/material'
@@ -25,7 +26,8 @@ export const SendToConfiguredWalletPage = (): JSX.Element => {
   const { t } = useTranslation()
   const navigateBack = useNavigateBack()
   const { toAddresses } = useWidgetConfig()
-  const { requiredToChainType } = useToAddressRequirements()
+  const { isValidReceiver } = useToAddressRequirements()
+  const { getChainFromAddress } = useChainTypeFromAddress()
   const { setSelectedBookmark } = useBookmarkActions()
   const { setFieldValue } = useFieldActions()
   const { getAddressLink } = useExplorer()
@@ -53,57 +55,50 @@ export const SendToConfiguredWalletPage = (): JSX.Element => {
         disablePadding
         sx={{ paddingTop: 1.5 }}
       >
-        {toAddresses?.map((toAddress) => (
-          <ListItem key={toAddress.address} sx={{ position: 'relative' }}>
-            <ListItemButton
-              disabled={
-                requiredToChainType &&
-                requiredToChainType !== toAddress.chainType
-              }
-              onClick={() => handleCuratedSelected(toAddress)}
-            >
-              <ListItemAvatar>
-                <AccountAvatar
-                  chainId={defaultChainIdsByType[toAddress.chainType]}
-                  toAddress={toAddress}
+        {toAddresses?.map((toAddress) => {
+          const disabled = !isValidReceiver(toAddress.address)
+          // A configured receiver has no chainId; its provider knows the chain.
+          const chainId =
+            getChainFromAddress(toAddress.address)?.chainId ??
+            defaultChainIdsByType[toAddress.chainType]
+          return (
+            <ListItem key={toAddress.address} sx={{ position: 'relative' }}>
+              <ListItemButton
+                disabled={disabled}
+                onClick={() => handleCuratedSelected(toAddress)}
+              >
+                <ListItemAvatar>
+                  <AccountAvatar chainId={chainId} toAddress={toAddress} />
+                </ListItemAvatar>
+                <ListItemText
+                  primary={toAddress.name || shortenAddress(toAddress.address)}
+                  secondary={
+                    toAddress.name
+                      ? shortenAddress(toAddress.address)
+                      : undefined
+                  }
                 />
-              </ListItemAvatar>
-              <ListItemText
-                primary={toAddress.name || shortenAddress(toAddress.address)}
-                secondary={
-                  toAddress.name ? shortenAddress(toAddress.address) : undefined
-                }
+              </ListItemButton>
+              <ContextMenu
+                disabled={disabled}
+                items={[
+                  {
+                    icon: <ContentCopyRounded />,
+                    label: t('button.copyAddress'),
+                    onClick: () =>
+                      navigator.clipboard.writeText(toAddress.address),
+                  },
+                  {
+                    icon: <OpenInNewRounded />,
+                    label: t('button.viewOnExplorer'),
+                    onClick: () =>
+                      openInNewTab(getAddressLink(toAddress.address, chainId)),
+                  },
+                ]}
               />
-            </ListItemButton>
-            <ContextMenu
-              disabled={
-                !!(
-                  requiredToChainType &&
-                  requiredToChainType !== toAddress.chainType
-                )
-              }
-              items={[
-                {
-                  icon: <ContentCopyRounded />,
-                  label: t('button.copyAddress'),
-                  onClick: () =>
-                    navigator.clipboard.writeText(toAddress.address),
-                },
-                {
-                  icon: <OpenInNewRounded />,
-                  label: t('button.viewOnExplorer'),
-                  onClick: () =>
-                    openInNewTab(
-                      getAddressLink(
-                        toAddress.address,
-                        defaultChainIdsByType[toAddress.chainType]
-                      )
-                    ),
-                },
-              ]}
-            />
-          </ListItem>
-        ))}
+            </ListItem>
+          )
+        })}
       </List>
     </PageContainer>
   )

package/src/pages/SendToWallet/SendToWalletPage.tsx

@@ -12,13 +12,13 @@ import type { BottomSheetBase } from '../../components/BottomSheet/types.js'
 import { ButtonTertiary } from '../../components/ButtonTertiary.js'
 import { CardButton } from '../../components/Card/CardButton.js'
 import { AccountDeployedMessage } from '../../components/Messages/AccountDeployedMessage.js'
+import { addressInputMaxLength } from '../../config/constants.js'
 import {
   AddressType,
   useAddressValidation,
 } from '../../hooks/useAddressValidation.js'
 import { useChain } from '../../hooks/useChain.js'
 import { useHeader } from '../../hooks/useHeader.js'
-import { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js'
 import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
 import type { Bookmark } from '../../stores/bookmarks/types.js'
 import { useBookmarkActions } from '../../stores/bookmarks/useBookmarkActions.js'
@@ -57,7 +57,6 @@ export const SendToWalletPage: React.FC = () => {
   const [validatedWallet, setValidatedWallet] = useState<Bookmark>()
   const [errorMessage, setErrorMessage] = useState('')
   const { validateAddress, isValidating } = useAddressValidation()
-  const { requiredToChainType } = useToAddressRequirements()
   const [toChainId] = useFieldValues('toChain')
   const { chain: toChain } = useChain(toChainId)
   const [isDoneButtonLoading, setIsDoneButtonLoading] = useState(false)
@@ -91,7 +90,6 @@ export const SendToWalletPage: React.FC = () => {
     setIsDoneButtonLoading(true)
     const validationResult = await validateAddress({
       value: inputAddressValue,
-      chainType: requiredToChainType,
       chain: toChain,
     })
     setIsDoneButtonLoading(false)
@@ -100,18 +98,6 @@ export const SendToWalletPage: React.FC = () => {
       return
     }
 
-    if (
-      requiredToChainType &&
-      requiredToChainType !== validationResult.chainType
-    ) {
-      setErrorMessage(
-        t('error.title.walletChainTypeInvalid', {
-          chainName: toChain?.name,
-        })
-      )
-      return
-    }
-
     setValidatedWallet({
       name:
         validationResult.addressType === AddressType.NameService
@@ -119,6 +105,7 @@ export const SendToWalletPage: React.FC = () => {
           : undefined,
       address: validationResult.address,
       chainType: validationResult.chainType,
+      chainId: validationResult.chainId,
     })
     confirmAddressSheetRef.current?.open()
   }
@@ -155,6 +142,7 @@ export const SendToWalletPage: React.FC = () => {
             : undefined,
         address: validationResult.address,
         chainType: validationResult.chainType,
+        chainId: validationResult.chainId,
       })
       bookmarkAddressSheetRef.current?.open()
     } else {
@@ -213,7 +201,7 @@ export const SendToWalletPage: React.FC = () => {
             placeholder={placeholder}
             aria-label={placeholder}
             maxRows={2}
-            inputProps={{ maxLength: 128 }}
+            inputProps={{ maxLength: addressInputMaxLength }}
             multiline
           />
           {errorMessage ? (

package/src/providers/WalletProvider/WalletProvider.tsx

@@ -1,5 +1,8 @@
 import { WalletManagementProviders } from '@lifi/wallet-management'
-import type { WidgetProviderProps } from '@lifi/widget-provider'
+import {
+  useSDKProviders,
+  type WidgetProviderProps,
+} from '@lifi/widget-provider'
 import {
   type FC,
   type JSX,
@@ -10,8 +13,15 @@ import {
 import { useTranslation } from 'react-i18next'
 import { useAvailableChains } from '../../hooks/useAvailableChains.js'
 import { useInitializeSDKProviders } from '../../hooks/useInitializeSDKProviders.js'
+import {
+  withoutUnservedToChain,
+  withServedDestinationChains,
+} from '../../utils/chainType.js'
 import { getConfigItemSets, isItemAllowedForSets } from '../../utils/item.js'
-import { useWidgetConfig } from '../WidgetProvider/WidgetProvider.js'
+import {
+  useWidgetConfig,
+  WidgetContext,
+} from '../WidgetProvider/WidgetProvider.js'
 import { useExternalWalletProvider } from './useExternalWalletProvider.js'
 
 interface WalletProviderProps extends PropsWithChildren {
@@ -78,5 +88,20 @@ export const WalletProvider = ({
 
 const SDKProviderInitializer: FC<PropsWithChildren> = ({ children }) => {
   useInitializeSDKProviders()
-  return children
+  const config = useWidgetConfig()
+  const sdkProviders = useSDKProviders()
+  // Only below the provider components is it known which chains are served.
+  // Keyed on `config.chains`: the config object is new on every render.
+  const chains = useMemo(
+    () => withServedDestinationChains(config.chains, sdkProviders),
+    [config.chains, sdkProviders]
+  )
+  const value = useMemo(
+    () =>
+      withoutUnservedToChain(
+        chains === config.chains ? config : { ...config, chains }
+      ),
+    [config, chains]
+  )
+  return <WidgetContext value={value}>{children}</WidgetContext>
 }

package/src/providers/WidgetProvider/WidgetProvider.tsx

@@ -1,6 +1,10 @@
 import type { Context } from 'react'
 import { createContext, use, useId, useMemo } from 'react'
 import { useSettingsActions } from '../../stores/settings/useSettingsActions.js'
+import {
+  isDestinationOnlyChain,
+  withDestinationOnlyChains,
+} from '../../utils/chainType.js'
 import {
   defaultQueryScopeKey,
   resolveQueryScopeKey,
@@ -29,33 +33,30 @@ export const WidgetProvider: React.FC<
     throw new Error('Required property "integrator" is missing.')
   }
 
+  // Keyed on the integrator's `chains`: the config object is new on every render.
+  const chains = useMemo(
+    () => withDestinationOnlyChains(widgetConfig.chains),
+    [widgetConfig.chains]
+  )
+
   const value = useMemo((): WidgetContextProps => {
-    // Resolved once, so nothing below reads the deprecated keyPrefix.
-    const scopeKeys = {
+    // Omitted, not undefined: an own undefined key resets the form field.
+    const { fromChain, fromToken, ...config } = widgetConfig
+    const value = {
+      ...(isDestinationOnlyChain(fromChain) ? config : widgetConfig),
+      chains,
+      // Resolved once, so nothing below reads the deprecated keyPrefix.
       storageScopeKey: resolveStorageScopeKey(widgetConfig),
       queryScopeKey: resolveQueryScopeKey(widgetConfig),
-    }
+      elementId,
+    } as WidgetContextProps
     try {
-      // Create widget configuration object
-      const value = {
-        ...widgetConfig,
-        ...scopeKeys,
-        elementId,
-      } as WidgetContextProps
-
       // Set default settings for widget settings store
       setDefaultSettings(value)
-
-      return value
     } catch (e) {
       console.warn(e)
-      return {
-        ...widgetConfig,
-        ...scopeKeys,
-        elementId,
-        integrator: widgetConfig.integrator,
-      }
     }
-  }, [elementId, widgetConfig, setDefaultSettings])
+    return value
+  }, [elementId, widgetConfig, chains, setDefaultSettings])
   return <WidgetContext value={value}>{children}</WidgetContext>
 }

package/src/stores/bookmarks/types.ts

@@ -1,8 +1,11 @@
+import type { ChainId } from '@lifi/sdk'
 import type { StoreApi, UseBoundStore } from 'zustand'
 import type { ToAddress } from '../../types/widget.js'
 
 export interface Bookmark extends ToAddress {
   isConnectedAccount?: boolean
+  /** Display only: set when the ecosystem's default chain rejects the address. */
+  chainId?: ChainId
 }
 
 export interface BookmarkProps {

package/src/stores/chains/ChainOrderStore.tsx

@@ -80,7 +80,10 @@ export function ChainOrderStoreProvider({
 
         // Initialize the isAllNetworks with true if the tab is shown,
         // there is no config chain value and no url chain value
-        const urlValues = getDefaultValuesFromQueryString({ buildUrl })
+        const urlValues = getDefaultValuesFromQueryString({
+          buildUrl,
+          chains: chainsConfig,
+        })
         const urlChainValue =
           key === 'from' ? urlValues.fromChain : urlValues.toChain
         const configChainValue =

package/src/stores/form/FormStore.tsx

@@ -45,6 +45,7 @@ export const FormStoreProvider: React.FC<FormStoreProviderProps> = ({
     toAddress,
     formUpdateKey,
     buildUrl,
+    chains,
   } = widgetConfig
 
   const storeRef = useRef<FormStoreStore>(null)
@@ -113,6 +114,7 @@ export const FormStoreProvider: React.FC<FormStoreProviderProps> = ({
     const queryDefaults = getDefaultValuesFromQueryString({
       buildUrl,
       includeToAddress: false,
+      chains,
     })
     storeRef.current = createFormStore(
       initialiseDefaultValues({

package/src/stores/form/URLSearchParamsBuilder.tsx

@@ -34,16 +34,17 @@ export const URLSearchParamsBuilder = () => {
   const values = useFieldValues(...formValueKeys, ...limitFormValueKeys)
   const { setSelectedBookmark, addRecentWallet } = useBookmarkActions()
   const { validateAddress } = useAddressValidation()
-  const { buildUrl, mode } = useWidgetConfig()
+  const { buildUrl, mode, chains } = useWidgetConfig()
   // Using these methods as trying to use the touchedFields and values above
   // often has a lag that can effect the widgets initialisation sequence
   // and accidentally cause values to be wiped from the query string
   const { getFieldValues, isTouched, setUserAndDefaultValues } =
     useFieldActions()
 
+  // biome-ignore lint/correctness/useExhaustiveDependencies: the URL is read once, not again on each config render
   useEffect(() => {
     // get the initial values from the querystring
-    const formValues = getDefaultValuesFromQueryString({ buildUrl })
+    const formValues = getDefaultValuesFromQueryString({ buildUrl, chains })
     const { toAddress, ...initialFormValues } = formValues
 
     /**
@@ -62,6 +63,7 @@ export const URLSearchParamsBuilder = () => {
             const bookmark = {
               address: validationResult.address,
               chainType: validationResult.chainType,
+              chainId: validationResult.chainId,
             }
             setUserAndDefaultValues({ toAddress })
             setSelectedBookmark(bookmark)

package/src/stores/form/getDefaultValuesFromQueryString.ts

@@ -1,14 +1,21 @@
+import type { WidgetChains } from '../../types/widget.js'
+import {
+  isDestinationOnlyChain,
+  isUnservedDestinationChain,
+} from '../../utils/chainType.js'
 import { formatInputAmount } from '../../utils/format.js'
 import type { DefaultValues } from './types.js'
 
 interface GetDefaultValuesFromQueryStringOptions {
   includeToAddress?: boolean
   buildUrl?: boolean
+  chains?: WidgetChains
 }
 
 export const getDefaultValuesFromQueryString = ({
   buildUrl = false,
   includeToAddress = true,
+  chains,
 }: GetDefaultValuesFromQueryStringOptions): Partial<DefaultValues> => {
   if (typeof window === 'undefined') {
     return {}
@@ -22,6 +29,18 @@ export const getDefaultValuesFromQueryString = ({
     new URLSearchParams(window.location.search)
   )
 
+  // The loop below then drops their tokens too.
+  if (isDestinationOnlyChain(Number.parseInt(searchParams.fromChain, 10))) {
+    delete searchParams.fromChain
+  }
+  if (
+    isUnservedDestinationChain(
+      Number.parseInt(searchParams.toChain, 10),
+      chains
+    )
+  ) {
+    delete searchParams.toChain
+  }
   // Prevent using fromToken/toToken params if chain is not selected.
   ;(['from', 'to'] as const).forEach((key) => {
     if (searchParams[`${key}Token`] && !searchParams[`${key}Chain`]) {

package/src/utils/chainType.ts

@@ -1,4 +1,6 @@
-import { ChainId, ChainType } from '@lifi/sdk'
+import { ChainId, ChainType, type SDKProvider } from '@lifi/sdk'
+import type { WidgetChains, WidgetConfig } from '../types/widget.js'
+import { isItemAllowed } from './item.js'
 
 export const defaultChainIdsByType: Record<ChainType, ChainId> = {
   [ChainType.EVM]: ChainId.ETH,
@@ -8,3 +10,73 @@ export const defaultChainIdsByType: Record<ChainType, ChainId> = {
   [ChainType.TVM]: ChainId.TRN,
   [ChainType.STL]: ChainId.XLM,
 }
+
+// No wallet can sign on these chains yet, so a route may only deliver to them.
+const destinationOnlyChainIds: ReadonlySet<number> = new Set<number>([
+  ChainId.ZEC,
+])
+
+export const isDestinationOnlyChain = (chainId?: number): boolean =>
+  chainId !== undefined && destinationOnlyChainIds.has(chainId)
+
+export const withDestinationOnlyChains = (
+  chains: WidgetChains | undefined
+): WidgetChains => {
+  const allow = chains?.from?.allow?.filter(
+    (chainId) => !isDestinationOnlyChain(chainId)
+  )
+  return {
+    ...chains,
+    from: {
+      ...chains?.from,
+      ...(allow && { allow }),
+      deny: [...(chains?.from?.deny ?? []), ...destinationOnlyChainIds],
+    },
+  }
+}
+
+// A destination-only chain takes a receiver only through a provider that lists it.
+export const withServedDestinationChains = (
+  chains: WidgetChains | undefined,
+  providers: readonly Pick<SDKProvider, 'chainIds'>[]
+): WidgetChains | undefined => {
+  const unserved = [...destinationOnlyChainIds].filter(
+    (chainId) =>
+      !providers.some((provider) =>
+        provider.chainIds?.some((id) => id === chainId)
+      )
+  )
+  if (!unserved.length) {
+    return chains
+  }
+  const allow = chains?.allow?.filter((chainId) => !unserved.includes(chainId))
+  return {
+    ...chains,
+    ...(allow && { allow }),
+    deny: [...(chains?.deny ?? []), ...unserved],
+  }
+}
+
+// The form keeps a preset chain that the chain list does not offer.
+export const isUnservedDestinationChain = (
+  chainId: number | undefined,
+  chains: WidgetChains | undefined
+): boolean => isDestinationOnlyChain(chainId) && !isItemAllowed(chainId, chains)
+
+// Omitted, not undefined: an own undefined key resets the form field.
+export const withoutUnservedToChain = <
+  T extends Pick<WidgetConfig, 'chains' | 'toChain' | 'toToken'>,
+>(
+  config: T
+): T => {
+  if (!isUnservedDestinationChain(config.toChain, config.chains)) {
+    return config
+  }
+  const { toChain: _toChain, toToken: _toToken, ...rest } = config
+  return rest as T
+}
+
+export const isDestinationAllowedAsSource = (
+  toChainId: number | undefined,
+  chains: WidgetChains | undefined
+): boolean => !toChainId || isItemAllowed(toChainId, chains?.from)

package/src/utils/customReceiver.ts

@@ -1,4 +1,5 @@
 import { ChainType } from '@lifi/sdk'
+import type { ChainRef, IsAddressForChain } from '@lifi/widget-provider'
 
 // Stellar routes always settle to the account that signs them.
 export const isCustomReceiverUnsupported = (
@@ -29,3 +30,38 @@ export const isCustomReceiverBlocked = ({
   }
   return toAddress.toLowerCase() !== signerAddress?.toLowerCase()
 }
+
+// Without a receiver the API delivers to the signer when both chains share a
+// chain type, and a Bitcoin signer cannot receive on ZEC.
+export const isSignerInvalidReceiver = ({
+  signerAddress,
+  toAddress,
+  fromChain,
+  toChain,
+  isAddressForChain,
+}: {
+  signerAddress: string | undefined
+  toAddress: string | undefined
+  fromChain: ChainRef | undefined
+  toChain: ChainRef | undefined
+  isAddressForChain: IsAddressForChain
+}): boolean =>
+  Boolean(
+    signerAddress &&
+      !toAddress &&
+      fromChain &&
+      toChain &&
+      fromChain.chainType === toChain.chainType &&
+      !isAddressForChain(signerAddress, toChain)
+  )
+
+export const canQuoteWithToAddress = (
+  toAddress: string | undefined,
+  toChain: ChainRef | undefined,
+  isAddressForChain: IsAddressForChain
+): boolean => {
+  if (!toAddress) {
+    return true
+  }
+  return toChain ? isAddressForChain(toAddress, toChain) : false
+}

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