@lifi/widget 3.25.0-beta.0 → 3.25.0-beta.1

package/src/i18n/vi.json

@@ -309,8 +309,9 @@
     "to": "Đến",
     "tokenOnChain": "{{tokenSymbol}} tại {{chainName}}",
     "tokenOnChainAmount": "",
-    "tokenSearch": "Tìm kiếm bằng tên token hoặc địa chỉ",
+    "tokenSearch": "",
     "valueLoss": "Bạn sẽ mất",
+    "searchChain": "",
     "searchChains": "",
     "searchBridges": "",
     "searchExchanges": ""

package/src/i18n/zh.json

@@ -309,8 +309,9 @@
     "to": "到",
     "tokenOnChain": "{{chainName}}链上的{{tokenSymbol}}",
     "tokenOnChainAmount": "",
-    "tokenSearch": "按代币名称或者地址搜索",
+    "tokenSearch": "",
     "valueLoss": "资金损失",
+    "searchChain": "",
     "searchChains": "搜索链",
     "searchBridges": "搜索跨链桥",
     "searchExchanges": "搜索交易所"

package/src/index.ts

@@ -1,5 +1,5 @@
 export type * from '@lifi/sdk'
-export { ChainType, ChainId, CoinKey } from '@lifi/sdk'
+export { ChainId, ChainType, CoinKey } from '@lifi/sdk'
 export { App as LiFiWidget } from './App.js'
 export type { WidgetDrawer } from './AppDrawer.js'
 export * from './components/ContractComponent/ItemPrice.js'
@@ -11,23 +11,23 @@ export { defaultMaxHeight } from './config/constants.js'
 export * from './config/version.js'
 export { useAvailableChains } from './hooks/useAvailableChains.js'
 export { useWidgetEvents, widgetEvents } from './hooks/useWidgetEvents.js'
+export * from './stores/bookmarks/types.js'
 export * from './stores/form/types.js'
 export { useFieldActions } from './stores/form/useFieldActions.js'
 export { useFieldValues } from './stores/form/useFieldValues.js'
-export * from './stores/bookmarks/types.js'
 export { azureLightTheme } from './themes/azureLight.js'
+export { createTheme } from './themes/createTheme.js'
 export { jumperTheme } from './themes/jumper.js'
-export { watermelonLightTheme } from './themes/watermelonLight.js'
-export { windows95Theme } from './themes/windows95.js'
 export * from './themes/palettes.js'
 export * from './themes/types.js'
-export { createTheme } from './themes/createTheme.js'
+export { watermelonLightTheme } from './themes/watermelonLight.js'
+export { windows95Theme } from './themes/windows95.js'
 export * from './types/events.js'
 export type { TokenAmount } from './types/token.js'
 export * from './types/widget.js'
-export { getPriceImpact } from './utils/getPriceImpact.js'
-export * from './utils/format.js'
-export { percentFormatter } from './utils/percentFormatter.js'
 export { compactNumberFormatter } from './utils/compactNumberFormatter.js'
 export { currencyExtendedFormatter } from './utils/currencyExtendedFormatter.js'
+export * from './utils/format.js'
+export { getPriceImpact } from './utils/getPriceImpact.js'
 export { navigationRoutes } from './utils/navigationRoutes.js'
+export { percentFormatter } from './utils/percentFormatter.js'

package/src/pages/RoutesPage/RoutesPage.tsx

@@ -38,7 +38,7 @@ export const RoutesPage: React.FC<BoxProps> = () => {
   const headerAction = useMemo(
     () => (
       <ProgressToNextUpdate
-        updatedAt={dataUpdatedAt || new Date().getTime()}
+        updatedAt={dataUpdatedAt || Date.now()}
         timeToUpdate={refetchTime}
         isLoading={isFetching}
         onClick={() => refetch()}

package/src/pages/SelectChainPage/SelectChainPage.tsx

@@ -1,19 +1,11 @@
 import type { ExtendedChain } from '@lifi/sdk'
-import { Avatar, ListItemAvatar, debounce } from '@mui/material'
-import { type FormEventHandler, useState } from 'react'
+import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useChainSelect } from '../../components/ChainSelect/useChainSelect.js'
-import { FullPageContainer } from '../../components/FullPageContainer.js'
-import { ListItemButton } from '../../components/ListItemButton.js'
-import { ListItemText } from '../../components/ListItemText.js'
-import { StickySearchInput } from '../../components/Search/SearchInput.js'
-import { SearchList } from '../../components/Search/SearchInput.style.js'
-import { SearchNotFound } from '../../components/Search/SearchNotFound.js'
+import { SelectChainContent } from '../../components/Chains/SelectChainContent.js'
 import { useTokenSelect } from '../../components/TokenList/useTokenSelect.js'
-import { useDefaultElementId } from '../../hooks/useDefaultElementId.js'
 import { useHeader } from '../../hooks/useHeader.js'
 import { useNavigateBack } from '../../hooks/useNavigateBack.js'
-import { useScrollableContainer } from '../../hooks/useScrollableContainer.js'
 import type { SelectChainPageProps } from './types.js'
 
 export const SelectChainPage: React.FC<SelectChainPageProps> = ({
@@ -21,75 +13,30 @@ export const SelectChainPage: React.FC<SelectChainPageProps> = ({
   selectNativeToken,
 }) => {
   const { navigateBack } = useNavigateBack()
-  const { chains, setCurrentChain } = useChainSelect(formType)
+  const { setCurrentChain } = useChainSelect(formType)
   const selectToken = useTokenSelect(formType, navigateBack)
-  const elementId = useDefaultElementId()
-  const scrollableContainer = useScrollableContainer(elementId)
 
   const { t } = useTranslation()
 
   useHeader(t('header.selectChain'))
 
-  const handleClick = async (chain: ExtendedChain) => {
-    if (selectNativeToken) {
-      selectToken(chain.nativeToken.address, chain.id)
-    } else {
-      setCurrentChain(chain.id)
-      navigateBack()
-    }
-  }
-
-  const [filteredChains, setFilteredChains] = useState<ExtendedChain[]>(
-    chains ?? []
+  const handleClick = useCallback(
+    async (chain: ExtendedChain) => {
+      if (selectNativeToken) {
+        selectToken(chain.nativeToken.address, chain.id)
+      } else {
+        setCurrentChain(chain.id)
+        navigateBack()
+      }
+    },
+    [navigateBack, selectNativeToken, selectToken, setCurrentChain]
   )
 
-  const handleSearchInputChange: FormEventHandler<HTMLInputElement> = (e) => {
-    const value = (e.target as HTMLInputElement).value
-
-    if (!value) {
-      setFilteredChains(chains ?? [])
-    } else {
-      setFilteredChains(
-        chains
-          ? chains.filter((chain) =>
-              chain.name.toLowerCase().includes(value.toLowerCase())
-            )
-          : []
-      )
-    }
-
-    if (scrollableContainer) {
-      scrollableContainer.scrollTop = 0
-    }
-  }
-
-  const debouncedSearchInputChange = debounce(handleSearchInputChange, 250)
-
   return (
-    <FullPageContainer disableGutters>
-      <StickySearchInput
-        onChange={debouncedSearchInputChange}
-        placeholder={t('main.searchChains')}
-      />
-      {filteredChains.length ? (
-        <SearchList className="long-list">
-          {filteredChains.map((chain) => (
-            <ListItemButton key={chain.id} onClick={() => handleClick(chain)}>
-              <ListItemAvatar>
-                <Avatar src={chain.logoURI} alt={chain.name}>
-                  {chain.name[0]}
-                </Avatar>
-              </ListItemAvatar>
-              <ListItemText primary={chain.name} />
-            </ListItemButton>
-          ))}
-        </SearchList>
-      ) : (
-        <SearchNotFound
-          message={t('info.message.emptyChainList')}
-          adjustForStickySearchInput
-        />
-      )}
-    </FullPageContainer>
+    <SelectChainContent
+      inExpansion={false}
+      formType={formType}
+      onSelect={handleClick}
+    />
   )
 }

package/src/pages/SelectEnabledToolsPage.tsx

@@ -5,10 +5,10 @@ import CheckBoxOutlined from '@mui/icons-material/CheckBoxOutlined'
 import IndeterminateCheckBoxOutlined from '@mui/icons-material/IndeterminateCheckBoxOutlined'
 import {
   Avatar,
+  debounce,
   IconButton,
   ListItemAvatar,
   Tooltip,
-  debounce,
   useTheme,
 } from '@mui/material'
 import type { MouseEventHandler } from 'react'

package/src/pages/SelectTokenPage/SearchTokenInput.tsx

@@ -24,7 +24,9 @@ export const SearchTokenInput = () => {
       placeholder={t('main.tokenSearch')}
       onChange={(e) => onChange((e.target as HTMLInputElement).value)}
       onBlur={onBlur}
+      onClear={() => setFieldValue('tokenSearchFilter', '')}
       value={value as string | undefined}
+      autoFocus
     />
   )
 }

package/src/pages/SelectTokenPage/SelectTokenPage.tsx

@@ -1,5 +1,5 @@
 import { Box } from '@mui/material'
-import type { FC } from 'react'
+import type { FC, RefObject } from 'react'
 import { useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import { ChainSelect } from '../../components/ChainSelect/ChainSelect.js'
@@ -10,24 +10,22 @@ import { useListHeight } from '../../hooks/useListHeight.js'
 import { useNavigateBack } from '../../hooks/useNavigateBack.js'
 import { useScrollableOverflowHidden } from '../../hooks/useScrollableContainer.js'
 import { useSwapOnly } from '../../hooks/useSwapOnly.js'
+import { useWideVariant } from '../../hooks/useWideVariant.js'
 import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
-import type { FormTypeProps } from '../../stores/form/types.js'
+import type { FormType, FormTypeProps } from '../../stores/form/types.js'
 import { HiddenUI } from '../../types/widget.js'
 import { SearchTokenInput } from './SearchTokenInput.js'
 
 export const SelectTokenPage: FC<FormTypeProps> = ({ formType }) => {
   useScrollableOverflowHidden()
-  const { navigateBack } = useNavigateBack()
+
   const headerRef = useRef<HTMLElement>(null)
-  const listParentRef = useRef<HTMLUListElement | null>(null)
-  const { listHeight, minListHeight } = useListHeight({
-    listParentRef,
-    headerRef,
-  })
 
   const swapOnly = useSwapOnly()
 
-  const { subvariant, hiddenUI } = useWidgetConfig()
+  const { subvariant, hiddenUI, subvariantOptions } = useWidgetConfig()
+  const wideVariant = useWideVariant()
+
   const { t } = useTranslation()
   const title =
     formType === 'from'
@@ -39,7 +37,9 @@ export const SelectTokenPage: FC<FormTypeProps> = ({ formType }) => {
   useHeader(title)
 
   const hideChainSelect =
-    (swapOnly && formType === 'to') || hiddenUI?.includes(HiddenUI.ChainSelect)
+    (wideVariant && (subvariantOptions?.wide?.enableChainSidebar ?? true)) ||
+    (swapOnly && formType === 'to') ||
+    hiddenUI?.includes(HiddenUI.ChainSelect)
 
   return (
     <FullPageContainer disableGutters>
@@ -59,18 +59,40 @@ export const SelectTokenPage: FC<FormTypeProps> = ({ formType }) => {
           <SearchTokenInput />
         </Box>
       </Box>
-      <Box
-        sx={{
-          height: minListHeight,
-        }}
-      >
-        <TokenList
-          parentRef={listParentRef}
-          height={listHeight}
-          onClick={navigateBack}
-          formType={formType}
-        />
-      </Box>
+      <WrappedTokenList
+        // Rerender component if variant changes (since chains tiles change height)
+        key={hideChainSelect ? 'without-offset' : 'with-offset'}
+        headerRef={headerRef}
+        formType={formType}
+      />
     </FullPageContainer>
   )
 }
+
+type WrappedTokenListProps = {
+  headerRef: RefObject<HTMLElement | null>
+  formType: FormType
+}
+
+const WrappedTokenList = ({ headerRef, formType }: WrappedTokenListProps) => {
+  const { navigateBack } = useNavigateBack()
+  const listParentRef = useRef<HTMLUListElement | null>(null)
+  const { listHeight, minListHeight } = useListHeight({
+    listParentRef,
+    headerRef,
+  })
+  return (
+    <Box
+      sx={{
+        height: minListHeight,
+      }}
+    >
+      <TokenList
+        parentRef={listParentRef}
+        height={listHeight}
+        onClick={navigateBack}
+        formType={formType}
+      />
+    </Box>
+  )
+}

package/src/pages/SendToWallet/BookmarksPage.tsx

@@ -9,8 +9,8 @@ import { useTranslation } from 'react-i18next'
 import { useNavigate } from 'react-router-dom'
 import { AccountAvatar } from '../../components/Avatar/AccountAvatar.js'
 import type { BottomSheetBase } from '../../components/BottomSheet/types.js'
-import { ListItemButton } from '../../components/ListItem//ListItemButton.js'
 import { ListItem } from '../../components/ListItem/ListItem.js'
+import { ListItemButton } from '../../components/ListItem//ListItemButton.js'
 import { Menu } from '../../components/Menu.js'
 import { useExplorer } from '../../hooks/useExplorer.js'
 import { useHeader } from '../../hooks/useHeader.js'

package/src/pages/SendToWallet/SendToWalletPage.style.tsx

@@ -1,12 +1,12 @@
 import {
   Alert,
+  alertClasses,
   Box,
   IconButton,
-  List,
-  Typography,
-  alertClasses,
   inputBaseClasses,
+  List,
   styled,
+  Typography,
 } from '@mui/material'
 import { ButtonTertiary } from '../../components/ButtonTertiary.js'
 import { InputCard } from '../../components/Card/InputCard.js'

package/src/pages/SettingsPage/SettingsCard/SettingCard.style.tsx

@@ -1,4 +1,4 @@
-import { Box, Badge as MuiBadge, badgeClasses, styled } from '@mui/material'
+import { Box, badgeClasses, Badge as MuiBadge, styled } from '@mui/material'
 
 export const SettingsList = styled(Box)(({ theme }) => ({
   display: 'flex',

package/src/pages/SettingsPage/SettingsCard/SettingCardExpandable.tsx

@@ -37,9 +37,9 @@ export const SettingCardExpandable: React.FC<
         </CardTitleContainer>
         {!expanded && value}
       </CardRowButton>
+      {/** biome-ignore lint/a11y/useSemanticElements: allowed in react */}
       <Collapse
         id={collapseId}
-        // biome-ignore lint/a11y/useSemanticElements:
         role="region"
         aria-labelledby={buttonId}
         in={expanded}

package/src/pages/SettingsPage/SlippageSettings/SlippageSettings.tsx

@@ -1,6 +1,6 @@
 import Percent from '@mui/icons-material/Percent'
 import WarningRounded from '@mui/icons-material/WarningRounded'
-import { Box, Typography, debounce } from '@mui/material'
+import { Box, debounce, Typography } from '@mui/material'
 import type { ChangeEventHandler, FocusEventHandler } from 'react'
 import { useCallback, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'

package/src/pages/TransactionHistoryPage/TransactionHistoryPage.tsx

@@ -2,17 +2,16 @@ import type { FullStatusData } from '@lifi/sdk'
 import { Box, List } from '@mui/material'
 import { useVirtualizer } from '@tanstack/react-virtual'
 import type React from 'react'
-import { useRef } from 'react'
+import { useCallback, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import { PageContainer } from '../../components/PageContainer.js'
 import { useHeader } from '../../hooks/useHeader.js'
-import { useTransactionHistory } from '../../hooks/useTransactionHistory.js'
-
 import { useListHeight } from '../../hooks/useListHeight.js'
+import { useTransactionHistory } from '../../hooks/useTransactionHistory.js'
+import { minTransactionListHeight } from './constants.js'
 import { TransactionHistoryEmpty } from './TransactionHistoryEmpty.js'
 import { TransactionHistoryItem } from './TransactionHistoryItem.js'
 import { TransactionHistoryItemSkeleton } from './TransactionHistorySkeleton.js'
-import { minTransactionListHeight } from './constants.js'
 
 export const TransactionHistoryPage: React.FC = () => {
   // Parent ref and useVirtualizer should be in one file to avoid blank page (0 virtual items) issue
@@ -26,14 +25,20 @@ export const TransactionHistoryPage: React.FC = () => {
     listParentRef: parentRef,
   })
 
+  const getItemKey = useCallback(
+    (index: number) => {
+      return `${(transactions[index] as FullStatusData).transactionId}-${index}`
+    },
+    [transactions]
+  )
+
   const { getVirtualItems, getTotalSize } = useVirtualizer({
     count: transactions.length,
-    overscan: 5,
+    overscan: 3,
     paddingEnd: 12,
     getScrollElement: () => parentRef.current,
     estimateSize: () => 186,
-    getItemKey: (index) =>
-      `${(transactions[index] as FullStatusData).transactionId}-${index}`,
+    getItemKey,
   })
 
   if (!transactions.length && !isLoading) {

package/src/pages/TransactionPage/RouteTracker.tsx

@@ -33,7 +33,7 @@ export const RouteTracker = ({
    * This allows us to query the route using the same tool each time we refresh.
    * The observable and reviewable routes can be the same when we first enter the review page.
    */
-  // biome-ignore lint/correctness/useExhaustiveDependencies:
+  // biome-ignore lint/correctness/useExhaustiveDependencies: run only when currentRoute changes
   useEffect(() => {
     if (
       observableRouteIdRef.current &&
@@ -57,7 +57,7 @@ export const RouteTracker = ({
 
   return (
     <ProgressToNextUpdate
-      updatedAt={dataUpdatedAt || new Date().getTime()}
+      updatedAt={dataUpdatedAt || Date.now()}
       timeToUpdate={refetchTime}
       isLoading={isFetching}
       onClick={handleRefetch}

package/src/providers/I18nProvider/I18nProvider.tsx

@@ -7,7 +7,7 @@ import { useSettings } from '../../stores/settings/useSettings.js'
 import { compactNumberFormatter } from '../../utils/compactNumberFormatter.js'
 import { currencyExtendedFormatter } from '../../utils/currencyExtendedFormatter.js'
 import { deepMerge } from '../../utils/deepMerge.js'
-import { isItemAllowed } from '../../utils/item.js'
+import { getConfigItemSets, isItemAllowedForSets } from '../../utils/item.js'
 import { percentFormatter } from '../../utils/percentFormatter.js'
 import { useWidgetConfig } from '../WidgetProvider/WidgetProvider.js'
 import type { LanguageKey, LanguageTranslationResources } from './types.js'
@@ -19,16 +19,22 @@ export const I18nProvider: React.FC<React.PropsWithChildren> = ({
   const { language } = useSettings(['language'])
 
   const i18n = useMemo(() => {
+    const languagesConfigSets = getConfigItemSets(
+      languages,
+      (languages) => new Set(languages)
+    )
     let resources = (Object.keys(supportedLanguages) as LanguageKey[])
-      .filter((lng) => isItemAllowed(lng, languages))
+      .filter((lng) => isItemAllowedForSets(lng, languagesConfigSets))
       .reduce((resources, lng) => {
         resources[lng] = {
           translation: languageResources?.[lng]
             ? (deepMerge(
+                // biome-ignore lint/performance/noDynamicNamespaceImportAccess: TODO: make it dynamic
                 supportedLanguages[lng],
                 languageResources[lng]
-              ) as any)
-            : supportedLanguages[lng],
+              ) as LanguageTranslationResources)
+            : // biome-ignore lint/performance/noDynamicNamespaceImportAccess: TODO: make it dynamic
+              supportedLanguages[lng],
         }
         return resources
       }, {} as LanguageTranslationResources)

package/src/providers/QueryClientProvider.tsx

@@ -2,8 +2,8 @@ import {
   QueryClientContext as TanstackQueryClientContext,
   QueryClientProvider as TanstackQueryClientProvider,
 } from '@tanstack/react-query'
-import { useContext } from 'react'
 import type { PropsWithChildren } from 'react'
+import { useContext } from 'react'
 import { queryClient } from '../config/queryClient'
 
 export const QueryClientProvider: React.FC<PropsWithChildren> = ({

package/src/providers/WalletProvider/SDKProviders.tsx

@@ -1,7 +1,7 @@
 import { getConnectorClient as getBigmiConnectorClient } from '@bigmi/client'
 import { useConfig as useBigmiConfig } from '@bigmi/react'
 import type { SDKProvider } from '@lifi/sdk'
-import { ChainType, EVM, Solana, Sui, UTXO, config } from '@lifi/sdk'
+import { ChainType, config, EVM, Solana, Sui, UTXO } from '@lifi/sdk'
 import { useCurrentWallet } from '@mysten/dapp-kit'
 import type { SignerWalletAdapter } from '@solana/wallet-adapter-base'
 import { useWallet } from '@solana/wallet-adapter-react'

package/src/providers/WalletProvider/SuiBaseProvider.tsx

@@ -1,8 +1,8 @@
 import { ChainId } from '@lifi/sdk'
 import {
+  createNetworkConfig,
   SuiClientProvider,
   WalletProvider,
-  createNetworkConfig,
 } from '@mysten/dapp-kit'
 import { getFullnodeUrl } from '@mysten/sui/client'
 import { type FC, type PropsWithChildren, useMemo } from 'react'

package/src/providers/WalletProvider/WalletProvider.tsx

@@ -5,8 +5,8 @@ import { useTranslation } from 'react-i18next'
 import { useWidgetConfig } from '../WidgetProvider/WidgetProvider.js'
 import { EVMProvider } from './EVMProvider.js'
 import { SDKProviders } from './SDKProviders.js'
-import { SVMProvider } from './SVMProvider.js'
 import { SuiProvider } from './SuiProvider.js'
+import { SVMProvider } from './SVMProvider.js'
 import { UTXOProvider } from './UTXOProvider.js'
 import { useExternalWalletProvider } from './useExternalWalletProvider.js'
 

package/src/providers/WalletProvider/useExternalWalletProvider.ts

@@ -2,8 +2,8 @@ import { ChainType } from '@lifi/sdk'
 import { useContext, useMemo } from 'react'
 import { useWidgetConfig } from '../WidgetProvider/WidgetProvider.js'
 import { EVMExternalContext } from './EVMExternalContext.js'
-import { SVMExternalContext } from './SVMExternalContext.js'
 import { SuiExternalContext } from './SuiExternalContext.js'
+import { SVMExternalContext } from './SVMExternalContext.js'
 import { UTXOExternalContext } from './UTXOExternalContext.js'
 
 interface ExternalWalletProvider {

package/src/stores/chains/ChainOrderStore.tsx

@@ -4,7 +4,7 @@ import type { UseBoundStoreWithEqualityFn } from 'zustand/traditional'
 import { useChains } from '../../hooks/useChains.js'
 import { useExternalWalletProvider } from '../../providers/WalletProvider/useExternalWalletProvider.js'
 import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
-import { isItemAllowed } from '../../utils/item.js'
+import { getConfigItemSets, isItemAllowedForSets } from '../../utils/item.js'
 import type { FormType } from '../form/types.js'
 import { useFieldActions } from '../form/useFieldActions.js'
 import type { PersistStoreProviderProps } from '../types.js'
@@ -40,9 +40,14 @@ export function ChainOrderStoreProvider({
         const configChainIds = chainsConfig?.[key]
         const isFromKey = key === 'from'
 
+        // Convert configChainIds to Sets for O(1) lookup
+        const configChainIdsSet = getConfigItemSets(
+          configChainIds,
+          (chainIds) => new Set(chainIds)
+        )
         const filteredChains = chains.filter((chain) => {
-          const passesChainsConfigFilter = configChainIds
-            ? isItemAllowed(chain.id, configChainIds)
+          const passesChainsConfigFilter = configChainIdsSet
+            ? isItemAllowedForSets(chain.id, configChainIdsSet)
             : true
           // If the integrator uses external wallet management and has not opted in for partial wallet management,
           // restrict the displayed chains to those compatible with external wallet management.

package/src/stores/form/FormStore.tsx

@@ -2,9 +2,9 @@ import type { PropsWithChildren } from 'react'
 import { useMemo, useRef } from 'react'
 import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
 import type { FormRef, ToAddress } from '../../types/widget.js'
+import { createFormStore, formDefaultValues } from './createFormStore.js'
 import { FormStoreContext } from './FormStoreContext.js'
 import { FormUpdater } from './FormUpdater.js'
-import { createFormStore, formDefaultValues } from './createFormStore.js'
 import type { DefaultValues, FormStoreStore } from './types.js'
 import { useFormRef } from './useFormRef.js'
 

package/src/stores/form/FormUpdater.tsx

@@ -5,13 +5,19 @@ import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.j
 import { useBookmarkActions } from '../../stores/bookmarks/useBookmarkActions.js'
 import { formDefaultValues } from '../../stores/form/createFormStore.js'
 import { useSendToWalletActions } from '../../stores/settings/useSendToWalletStore.js'
+import { isItemAllowed } from '../../utils/item.js'
 import type { DefaultValues } from './types.js'
 import { useFieldActions } from './useFieldActions.js'
 
 export const FormUpdater: React.FC<{
   reactiveFormValues: Partial<DefaultValues>
 }> = ({ reactiveFormValues }) => {
-  const { fromChain, toChain, toAddress } = useWidgetConfig()
+  const {
+    fromChain,
+    toChain,
+    toAddress,
+    chains: configChains,
+  } = useWidgetConfig()
   const { account } = useAccount()
   const { chains } = useChains()
   const { setSendToWallet } = useSendToWalletActions()
@@ -21,21 +27,47 @@ export const FormUpdater: React.FC<{
 
   // Set wallet chain as default if no chains are provided by config and if they were not changed during widget usage
   useEffect(() => {
-    const chainAllowed =
-      account.chainId && chains?.some((chain) => chain.id === account.chainId)
+    const fromChainAllowed =
+      account.chainId &&
+      chains?.some(
+        (chain) =>
+          chain.id === account.chainId &&
+          isItemAllowed(chain.id, configChains?.from)
+      )
+    const toChainAllowed =
+      account.chainId &&
+      chains?.some(
+        (chain) =>
+          chain.id === account.chainId &&
+          isItemAllowed(chain.id, configChains?.to)
+      )
 
-    if (!account.isConnected || !account.chainId || !chainAllowed) {
+    if (
+      !account.isConnected ||
+      !account.chainId ||
+      (!fromChainAllowed && !toChainAllowed)
+    ) {
       return
     }
 
-    if (!fromChain && !isTouched('fromChain') && !isTouched('fromToken')) {
+    if (
+      !fromChain &&
+      !isTouched('fromChain') &&
+      !isTouched('fromToken') &&
+      fromChainAllowed
+    ) {
       resetField('fromChain', { defaultValue: account.chainId })
       setFieldValue('fromToken', '')
       if (isTouched('fromAmount')) {
         setFieldValue('fromAmount', '')
       }
     }
-    if (!toChain && !isTouched('toChain') && !isTouched('toToken')) {
+    if (
+      !toChain &&
+      !isTouched('toChain') &&
+      !isTouched('toToken') &&
+      toChainAllowed
+    ) {
       resetField('toChain', { defaultValue: account.chainId })
       setFieldValue('toToken', '')
     }
@@ -48,6 +80,8 @@ export const FormUpdater: React.FC<{
     isTouched,
     resetField,
     setFieldValue,
+    configChains?.from,
+    configChains?.to,
   ])
 
   // Makes widget config options reactive to changes