@lifi/widget 4.8.0 → 4.9.0

package/src/pages/SendToWallet/BookmarkAddressSheet.tsx

@@ -9,6 +9,7 @@ import { BottomSheet } from '../../components/BottomSheet/BottomSheet.js'
 import type { BottomSheetBase } from '../../components/BottomSheet/types.js'
 import { Input } from '../../components/Input.js'
 import { AlertMessage } from '../../components/Messages/AlertMessage.js'
+import { addressInputMaxLength } from '../../config/constants.js'
 import { useAddressValidation } from '../../hooks/useAddressValidation.js'
 import type { Bookmark } from '../../stores/bookmarks/types.js'
 import { useBookmarkActions } from '../../stores/bookmarks/useBookmarkActions.js'
@@ -63,6 +64,7 @@ export const BookmarkAddressSheet = ({
       name: nameValue,
       address: validationResult.address,
       chainType: validationResult.chainType,
+      chainId: validationResult.chainId,
     }
   }
 
@@ -74,6 +76,7 @@ export const BookmarkAddressSheet = ({
       name: nameValue,
       address: validatedWallet.address,
       chainType: validatedWallet.chainType,
+      chainId: validatedWallet.chainId,
     }
   }
 
@@ -119,6 +122,7 @@ export const BookmarkAddressSheet = ({
         name: validatedBookmark.name,
         address: validatedBookmark.address,
         chainType: validatedBookmark.chainType,
+        chainId: validatedBookmark.chainId,
       })
     }
   }
@@ -198,7 +202,7 @@ export const BookmarkAddressSheet = ({
                   context: 'long',
                 })}
                 maxRows={2}
-                inputProps={{ maxLength: 128 }}
+                inputProps={{ maxLength: addressInputMaxLength }}
                 multiline
               />
             </SendToWalletCard>

package/src/pages/SendToWallet/BookmarksPage.tsx

@@ -34,7 +34,7 @@ export const BookmarksPage = (): JSX.Element => {
   const listParentRef = useRef<HTMLUListElement | null>(null)
   const buttonRef = useRef<HTMLDivElement | null>(null)
   const { bookmarks } = useBookmarks()
-  const { requiredToChainType } = useToAddressRequirements()
+  const { isValidReceiver } = useToAddressRequirements()
   const { addBookmark, removeBookmark, setSelectedBookmark } =
     useBookmarkActions()
   const navigate = useNavigate()
@@ -70,59 +70,49 @@ export const BookmarksPage = (): JSX.Element => {
         disablePadding
         sx={{ paddingTop: 1.5 }}
       >
-        {bookmarks.map((bookmark) => (
-          <ListItem key={bookmark.address} sx={{ position: 'relative' }}>
-            <ListItemButton
-              onClick={() => handleBookmarkSelected(bookmark)}
-              disabled={
-                requiredToChainType &&
-                requiredToChainType !== bookmark.chainType
-              }
-            >
-              <ListItemAvatar>
-                <AccountAvatar
-                  chainId={defaultChainIdsByType[bookmark.chainType]}
+        {bookmarks.map((bookmark) => {
+          const disabled = !isValidReceiver(bookmark.address)
+          const chainId =
+            bookmark.chainId ?? defaultChainIdsByType[bookmark.chainType]
+          return (
+            <ListItem key={bookmark.address} sx={{ position: 'relative' }}>
+              <ListItemButton
+                onClick={() => handleBookmarkSelected(bookmark)}
+                disabled={disabled}
+              >
+                <ListItemAvatar>
+                  <AccountAvatar chainId={chainId} />
+                </ListItemAvatar>
+                <ListItemText
+                  primary={bookmark.name}
+                  secondary={shortenAddress(bookmark.address)}
                 />
-              </ListItemAvatar>
-              <ListItemText
-                primary={bookmark.name}
-                secondary={shortenAddress(bookmark.address)}
+              </ListItemButton>
+              <ContextMenu
+                disabled={disabled}
+                items={[
+                  {
+                    icon: <ContentCopyRounded />,
+                    label: t('button.copyAddress'),
+                    onClick: () =>
+                      navigator.clipboard.writeText(bookmark.address),
+                  },
+                  {
+                    icon: <OpenInNewRounded />,
+                    label: t('button.viewOnExplorer'),
+                    onClick: () =>
+                      openInNewTab(getAddressLink(bookmark.address, chainId)),
+                  },
+                  {
+                    icon: <DeleteOutline />,
+                    label: t('button.delete'),
+                    onClick: () => removeBookmark(bookmark.address),
+                  },
+                ]}
               />
-            </ListItemButton>
-            <ContextMenu
-              disabled={
-                !!(
-                  requiredToChainType &&
-                  requiredToChainType !== bookmark.chainType
-                )
-              }
-              items={[
-                {
-                  icon: <ContentCopyRounded />,
-                  label: t('button.copyAddress'),
-                  onClick: () =>
-                    navigator.clipboard.writeText(bookmark.address),
-                },
-                {
-                  icon: <OpenInNewRounded />,
-                  label: t('button.viewOnExplorer'),
-                  onClick: () =>
-                    openInNewTab(
-                      getAddressLink(
-                        bookmark.address,
-                        defaultChainIdsByType[bookmark.chainType]
-                      )
-                    ),
-                },
-                {
-                  icon: <DeleteOutline />,
-                  label: t('button.delete'),
-                  onClick: () => removeBookmark(bookmark.address),
-                },
-              ]}
-            />
-          </ListItem>
-        ))}
+            </ListItem>
+          )
+        })}
         {!bookmarks.length && (
           <EmptyListIndicator
             icon={<TurnedIn />}

package/src/pages/SendToWallet/ConnectedWalletsPage.tsx

@@ -27,7 +27,7 @@ export const ConnectedWalletsPage = (): JSX.Element => {
   const { t } = useTranslation()
   const { accounts } = useAccount()
   const { setSelectedBookmark } = useBookmarkActions()
-  const { requiredToChainType } = useToAddressRequirements()
+  const { isValidReceiver } = useToAddressRequirements()
   const navigate = useNavigate()
   const { setFieldValue } = useFieldActions()
   const { getAddressLink } = useExplorer()
@@ -91,15 +91,13 @@ export const ConnectedWalletsPage = (): JSX.Element => {
                 ]
               : []),
           ]
+          const disabled = !isValidReceiver(account.address)
 
           return (
             <ListItem key={account.address} sx={{ position: 'relative' }}>
               <ListItemButton
                 onClick={() => handleWalletSelected(account)}
-                disabled={
-                  requiredToChainType &&
-                  requiredToChainType !== account.chainType
-                }
+                disabled={disabled}
               >
                 <ListItemAvatar>
                   <AccountAvatar chainId={account.chainId} account={account} />
@@ -109,15 +107,7 @@ export const ConnectedWalletsPage = (): JSX.Element => {
                   secondary={walletAddress}
                 />
               </ListItemButton>
-              <ContextMenu
-                items={menuItems}
-                disabled={
-                  !!(
-                    requiredToChainType &&
-                    requiredToChainType !== account.chainType
-                  )
-                }
-              />
+              <ContextMenu items={menuItems} disabled={disabled} />
             </ListItem>
           )
         })}

package/src/pages/SendToWallet/RecentWalletsPage.tsx

@@ -35,7 +35,7 @@ export const RecentWalletsPage = (): JSX.Element => {
   const bookmarkAddressSheetRef = useRef<BottomSheetBase>(null)
   const listParentRef = useRef<HTMLUListElement | null>(null)
   const { recentWallets } = useBookmarks()
-  const { requiredToChainType } = useToAddressRequirements()
+  const { isValidReceiver } = useToAddressRequirements()
   const {
     removeRecentWallet,
     addBookmark,
@@ -76,73 +76,66 @@ export const RecentWalletsPage = (): JSX.Element => {
         disablePadding
         sx={{ paddingTop: 1.5 }}
       >
-        {recentWallets.map((recentWallet) => (
-          <ListItem key={recentWallet.address} sx={{ position: 'relative' }}>
-            <ListItemButton
-              disabled={
-                requiredToChainType &&
-                requiredToChainType !== recentWallet.chainType
-              }
-              onClick={() => handleRecentSelected(recentWallet)}
-            >
-              <ListItemAvatar>
-                <AccountAvatar
-                  chainId={defaultChainIdsByType[recentWallet.chainType]}
+        {recentWallets.map((recentWallet) => {
+          const disabled = !isValidReceiver(recentWallet.address)
+          const chainId =
+            recentWallet.chainId ??
+            defaultChainIdsByType[recentWallet.chainType]
+          return (
+            <ListItem key={recentWallet.address} sx={{ position: 'relative' }}>
+              <ListItemButton
+                disabled={disabled}
+                onClick={() => handleRecentSelected(recentWallet)}
+              >
+                <ListItemAvatar>
+                  <AccountAvatar chainId={chainId} />
+                </ListItemAvatar>
+                <ListItemText
+                  primary={
+                    recentWallet.name || shortenAddress(recentWallet.address)
+                  }
+                  secondary={
+                    recentWallet.name
+                      ? shortenAddress(recentWallet.address)
+                      : undefined
+                  }
                 />
-              </ListItemAvatar>
-              <ListItemText
-                primary={
-                  recentWallet.name || shortenAddress(recentWallet.address)
-                }
-                secondary={
-                  recentWallet.name
-                    ? shortenAddress(recentWallet.address)
-                    : undefined
-                }
-              />
-            </ListItemButton>
-            <ContextMenu
-              disabled={
-                !!(
-                  requiredToChainType &&
-                  requiredToChainType !== recentWallet.chainType
-                )
-              }
-              items={[
-                {
-                  icon: <ContentCopyRounded />,
-                  label: t('button.copyAddress'),
-                  onClick: () =>
-                    navigator.clipboard.writeText(recentWallet.address),
-                },
-                {
-                  icon: <OpenInNewRounded />,
-                  label: t('button.viewOnExplorer'),
-                  onClick: () =>
-                    openInNewTab(
-                      getAddressLink(
-                        recentWallet.address,
-                        defaultChainIdsByType[recentWallet.chainType]
-                      )
-                    ),
-                },
-                {
-                  icon: <TurnedInNot />,
-                  label: t('button.bookmark'),
-                  onClick: () => {
-                    setBookmarkTarget(recentWallet)
-                    bookmarkAddressSheetRef.current?.open()
+              </ListItemButton>
+              <ContextMenu
+                disabled={disabled}
+                items={[
+                  {
+                    icon: <ContentCopyRounded />,
+                    label: t('button.copyAddress'),
+                    onClick: () =>
+                      navigator.clipboard.writeText(recentWallet.address),
+                  },
+                  {
+                    icon: <OpenInNewRounded />,
+                    label: t('button.viewOnExplorer'),
+                    onClick: () =>
+                      openInNewTab(
+                        getAddressLink(recentWallet.address, chainId)
+                      ),
+                  },
+                  {
+                    icon: <TurnedInNot />,
+                    label: t('button.bookmark'),
+                    onClick: () => {
+                      setBookmarkTarget(recentWallet)
+                      bookmarkAddressSheetRef.current?.open()
+                    },
                   },
-                },
-                {
-                  icon: <DeleteOutline />,
-                  label: t('button.delete'),
-                  onClick: () => removeRecentWallet(recentWallet.address),
-                },
-              ]}
-            />
-          </ListItem>
-        ))}
+                  {
+                    icon: <DeleteOutline />,
+                    label: t('button.delete'),
+                    onClick: () => removeRecentWallet(recentWallet.address),
+                  },
+                ]}
+              />
+            </ListItem>
+          )
+        })}
         {!recentWallets.length && (
           <EmptyListIndicator
             icon={<AccountBalanceWalletIcon />}

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 =