@lifi/widget 3.40.11 → 4.0.0-alpha.2

package/src/AppDefault.tsx

@@ -1,35 +1,283 @@
-'use client'
-import { AppRoutes } from './AppRoutes.js'
 import {
-  AppContainer,
-  AppExpandedContainer,
-  FlexContainer,
-} from './components/AppContainer.js'
-import { Expansion } from './components/Expansion/Expansion.js'
-import { Header } from './components/Header/Header.js'
-import { Initializer } from './components/Initializer.js'
-import { version } from './config/version.js'
-import { useWideVariant } from './hooks/useWideVariant.js'
-import { useWidgetConfig } from './providers/WidgetProvider/WidgetProvider.js'
-import { createElementId, ElementId } from './utils/elements.js'
+  createMemoryHistory,
+  createRootRoute,
+  createRoute,
+  createRouter,
+  type Router,
+  RouterProvider,
+} from '@tanstack/react-router'
+import { AppLayout } from './AppLayout.js'
+import { NotFound } from './components/NotFound.js'
+import { ActiveTransactionsPage } from './pages/ActiveTransactionsPage/ActiveTransactionsPage.js'
+import { LanguagesPage } from './pages/LanguagesPage.js'
+import { MainPage } from './pages/MainPage/MainPage.js'
+import { RoutesPage } from './pages/RoutesPage/RoutesPage.js'
+import { SelectChainPage } from './pages/SelectChainPage/SelectChainPage.js'
+import { SelectEnabledToolsPage } from './pages/SelectEnabledToolsPage.js'
+import { SelectTokenPage } from './pages/SelectTokenPage/SelectTokenPage.js'
+import { BookmarksPage } from './pages/SendToWallet/BookmarksPage.js'
+import { ConnectedWalletsPage } from './pages/SendToWallet/ConnectedWalletsPage.js'
+import { RecentWalletsPage } from './pages/SendToWallet/RecentWalletsPage.js'
+import { SendToConfiguredWalletPage } from './pages/SendToWallet/SendToConfiguredWalletPage.js'
+import { SendToWalletPage } from './pages/SendToWallet/SendToWalletPage.js'
+import { SettingsPage } from './pages/SettingsPage/SettingsPage.js'
+import { TransactionDetailsPage } from './pages/TransactionDetailsPage/TransactionDetailsPage.js'
+import { TransactionHistoryPage } from './pages/TransactionHistoryPage/TransactionHistoryPage.js'
+import { TransactionPage } from './pages/TransactionPage/TransactionPage.js'
+import { navigationRoutes } from './utils/navigationRoutes.js'
+
+const rootRoute = createRootRoute({
+  component: AppLayout,
+  notFoundComponent: NotFound,
+})
+
+const indexRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: navigationRoutes.home,
+  component: MainPage,
+})
+
+const settingsLayoutRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: navigationRoutes.settings,
+})
+
+const settingsIndexRoute = createRoute({
+  getParentRoute: () => settingsLayoutRoute,
+  path: '/',
+  component: SettingsPage,
+})
+
+const settingsBridgesRoute = createRoute({
+  getParentRoute: () => settingsLayoutRoute,
+  path: navigationRoutes.bridges,
+  component: () => <SelectEnabledToolsPage type="Bridges" />,
+})
+
+const settingsExchangesRoute = createRoute({
+  getParentRoute: () => settingsLayoutRoute,
+  path: navigationRoutes.exchanges,
+  component: () => <SelectEnabledToolsPage type="Exchanges" />,
+})
+
+const settingsLanguagesRoute = createRoute({
+  getParentRoute: () => settingsLayoutRoute,
+  path: navigationRoutes.languages,
+  component: LanguagesPage,
+})
+
+const fromTokenLayoutRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: navigationRoutes.fromToken,
+})
+
+const fromTokenIndexRoute = createRoute({
+  getParentRoute: () => fromTokenLayoutRoute,
+  path: '/',
+  component: () => <SelectTokenPage formType="from" />,
+})
+
+const fromTokenFromChainRoute = createRoute({
+  getParentRoute: () => fromTokenLayoutRoute,
+  path: navigationRoutes.fromChain,
+  component: () => <SelectChainPage formType="from" />,
+})
+
+const toTokenLayoutRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: navigationRoutes.toToken,
+})
+
+const toTokenIndexRoute = createRoute({
+  getParentRoute: () => toTokenLayoutRoute,
+  path: '/',
+  component: () => <SelectTokenPage formType="to" />,
+})
+
+const toTokenToChainRoute = createRoute({
+  getParentRoute: () => toTokenLayoutRoute,
+  path: navigationRoutes.toChain,
+  component: () => <SelectChainPage formType="to" />,
+})
+
+const toTokenNativeRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: navigationRoutes.toTokenNative,
+  component: () => <SelectChainPage formType="to" selectNativeToken />,
+})
+
+const routesLayoutRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: navigationRoutes.routes,
+})
+
+const routesIndexRoute = createRoute({
+  getParentRoute: () => routesLayoutRoute,
+  path: '/',
+  component: RoutesPage,
+})
+
+const routesTransactionExecutionRoute = createRoute({
+  getParentRoute: () => routesLayoutRoute,
+  path: navigationRoutes.transactionExecution,
+})
+
+const routesTransactionExecutionIndexRoute = createRoute({
+  getParentRoute: () => routesTransactionExecutionRoute,
+  path: '/',
+  component: TransactionPage,
+})
+
+const routesTransactionExecutionDetailsRoute = createRoute({
+  getParentRoute: () => routesTransactionExecutionRoute,
+  path: navigationRoutes.transactionDetails,
+  component: TransactionDetailsPage,
+})
+
+const activeTransactionsLayoutRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: navigationRoutes.activeTransactions,
+})
+
+const activeTransactionsIndexRoute = createRoute({
+  getParentRoute: () => activeTransactionsLayoutRoute,
+  path: '/',
+  component: ActiveTransactionsPage,
+})
+
+const activeTransactionExecutionRoute = createRoute({
+  getParentRoute: () => activeTransactionsLayoutRoute,
+  path: navigationRoutes.transactionExecution,
+  component: TransactionPage,
+})
+
+const sendToWalletLayoutRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: navigationRoutes.sendToWallet,
+})
+
+const sendToWalletIndexRoute = createRoute({
+  getParentRoute: () => sendToWalletLayoutRoute,
+  path: '/',
+  component: SendToWalletPage,
+})
+
+const sendToWalletBookmarksRoute = createRoute({
+  getParentRoute: () => sendToWalletLayoutRoute,
+  path: navigationRoutes.bookmarks,
+  component: BookmarksPage,
+})
+
+const sendToWalletRecentWalletsRoute = createRoute({
+  getParentRoute: () => sendToWalletLayoutRoute,
+  path: navigationRoutes.recentWallets,
+  component: RecentWalletsPage,
+})
+
+const sendToWalletConnectedWalletsRoute = createRoute({
+  getParentRoute: () => sendToWalletLayoutRoute,
+  path: navigationRoutes.connectedWallets,
+  component: ConnectedWalletsPage,
+})
+
+const configuredWalletsRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: navigationRoutes.configuredWallets,
+  component: SendToConfiguredWalletPage,
+})
+
+const transactionHistoryLayoutRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: navigationRoutes.transactionHistory,
+})
+
+const transactionHistoryIndexRoute = createRoute({
+  getParentRoute: () => transactionHistoryLayoutRoute,
+  path: '/',
+  component: TransactionHistoryPage,
+})
+
+const transactionHistoryDetailsRoute = createRoute({
+  getParentRoute: () => transactionHistoryLayoutRoute,
+  path: navigationRoutes.transactionDetails,
+  component: TransactionDetailsPage,
+})
+
+const transactionExecutionLayoutRoute = createRoute({
+  getParentRoute: () => rootRoute,
+  path: navigationRoutes.transactionExecution,
+})
+
+const transactionExecutionIndexRoute = createRoute({
+  getParentRoute: () => transactionExecutionLayoutRoute,
+  path: '/',
+  component: TransactionPage,
+})
+
+const transactionExecutionDetailsRoute = createRoute({
+  getParentRoute: () => transactionExecutionLayoutRoute,
+  path: navigationRoutes.transactionDetails,
+  component: TransactionDetailsPage,
+})
+
+const routeTree = rootRoute.addChildren([
+  indexRoute,
+  settingsLayoutRoute.addChildren([
+    settingsIndexRoute,
+    settingsLanguagesRoute,
+    settingsBridgesRoute,
+    settingsExchangesRoute,
+  ]),
+  fromTokenLayoutRoute.addChildren([
+    fromTokenIndexRoute,
+    fromTokenFromChainRoute,
+  ]),
+  toTokenLayoutRoute.addChildren([toTokenIndexRoute, toTokenToChainRoute]),
+  toTokenNativeRoute,
+  routesLayoutRoute.addChildren([
+    routesIndexRoute,
+    routesTransactionExecutionRoute.addChildren([
+      routesTransactionExecutionIndexRoute,
+      routesTransactionExecutionDetailsRoute,
+    ]),
+  ]),
+  transactionExecutionLayoutRoute.addChildren([
+    transactionExecutionIndexRoute,
+    transactionExecutionDetailsRoute,
+  ]),
+  activeTransactionsLayoutRoute.addChildren([
+    activeTransactionsIndexRoute,
+    activeTransactionExecutionRoute,
+  ]),
+  sendToWalletLayoutRoute.addChildren([
+    sendToWalletIndexRoute,
+    sendToWalletBookmarksRoute,
+    sendToWalletRecentWalletsRoute,
+    sendToWalletConnectedWalletsRoute,
+  ]),
+  configuredWalletsRoute,
+  transactionHistoryLayoutRoute.addChildren([
+    transactionHistoryIndexRoute,
+    transactionHistoryDetailsRoute,
+  ]),
+])
+
+declare module '@tanstack/react-router' {
+  interface Register {
+    router: Router<typeof routeTree>
+  }
+}
+
+const history = createMemoryHistory({
+  initialEntries: ['/'],
+})
+
+const router = createRouter({
+  routeTree,
+  history,
+  defaultPreload: 'intent',
+})
 
 export const AppDefault = () => {
-  const { elementId } = useWidgetConfig()
-  const wideVariant = useWideVariant()
-
-  return (
-    <AppExpandedContainer
-      id={createElementId(ElementId.AppExpandedContainer, elementId)}
-      data-version={version}
-    >
-      <AppContainer>
-        <Header />
-        <FlexContainer disableGutters>
-          <AppRoutes />
-        </FlexContainer>
-        <Initializer />
-      </AppContainer>
-      {wideVariant && <Expansion />}
-    </AppExpandedContainer>
-  )
+  return <RouterProvider router={router} />
 }

package/src/AppLayout.tsx

@@ -0,0 +1,36 @@
+'use client'
+import { Outlet } from '@tanstack/react-router'
+import {
+  AppContainer,
+  AppExpandedContainer,
+} from './components/AppContainer.js'
+import { Expansion } from './components/Expansion/Expansion.js'
+import { Header } from './components/Header/Header.js'
+import { Initializer } from './components/Initializer.js'
+import { PageEntered } from './components/PageEntered.js'
+import { version } from './config/version.js'
+import { useWideVariant } from './hooks/useWideVariant.js'
+import { useWidgetConfig } from './providers/WidgetProvider/WidgetProvider.js'
+import { URLSearchParamsBuilder } from './stores/form/URLSearchParamsBuilder.js'
+import { createElementId, ElementId } from './utils/elements.js'
+
+export const AppLayout: React.FC = () => {
+  const { elementId, buildUrl } = useWidgetConfig()
+  const wideVariant = useWideVariant()
+
+  return (
+    <AppExpandedContainer
+      id={createElementId(ElementId.AppExpandedContainer, elementId)}
+      data-version={version}
+    >
+      <AppContainer>
+        <Header />
+        <Initializer />
+        {buildUrl ? <URLSearchParamsBuilder /> : null}
+        <PageEntered />
+        <Outlet />
+      </AppContainer>
+      {wideVariant && <Expansion />}
+    </AppExpandedContainer>
+  )
+}

package/src/AppProvider.tsx

@@ -1,20 +1,10 @@
 import type { PropsWithChildren } from 'react'
-import { Fragment } from 'react'
-import {
-  MemoryRouter,
-  type MemoryRouterProps,
-  useInRouterContext,
-} from 'react-router-dom'
-import { PageEntered } from './components/PageEntered.js'
 import { I18nProvider } from './providers/I18nProvider/I18nProvider.js'
 import { QueryClientProvider } from './providers/QueryClientProvider.js'
+import { SDKClientProvider } from './providers/SDKClientProvider.js'
 import { ThemeProvider } from './providers/ThemeProvider/ThemeProvider.js'
 import { WalletProvider } from './providers/WalletProvider/WalletProvider.js'
-import {
-  useWidgetConfig,
-  WidgetProvider,
-} from './providers/WidgetProvider/WidgetProvider.js'
-import { URLSearchParamsBuilder } from './stores/form/URLSearchParamsBuilder.js'
+import { WidgetProvider } from './providers/WidgetProvider/WidgetProvider.js'
 import { StoreProvider } from './stores/StoreProvider.js'
 import { SettingsStoreProvider } from './stores/settings/SettingsStore.js'
 import type { WidgetConfigProps } from './types/widget.js'
@@ -24,17 +14,22 @@ export const AppProvider: React.FC<PropsWithChildren<WidgetConfigProps>> = ({
   config,
   formRef,
 }) => {
+  if (!config.providers?.length && process.env.NODE_ENV === 'development') {
+    console.warn('No widget providers specified')
+  }
   return (
     <QueryClientProvider>
       <SettingsStoreProvider config={config}>
         <WidgetProvider config={config}>
           <I18nProvider>
             <ThemeProvider>
-              <WalletProvider>
-                <StoreProvider config={config} formRef={formRef}>
-                  <AppRouter>{children}</AppRouter>
-                </StoreProvider>
-              </WalletProvider>
+              <SDKClientProvider>
+                <WalletProvider providers={config.providers ?? []}>
+                  <StoreProvider config={config} formRef={formRef}>
+                    {children}
+                  </StoreProvider>
+                </WalletProvider>
+              </SDKClientProvider>
             </ThemeProvider>
           </I18nProvider>
         </WidgetProvider>
@@ -42,26 +37,3 @@ export const AppProvider: React.FC<PropsWithChildren<WidgetConfigProps>> = ({
     </QueryClientProvider>
   )
 }
-
-const memoryRouterProps: MemoryRouterProps = {
-  future: {
-    v7_startTransition: true,
-    v7_relativeSplatPath: true,
-  },
-}
-
-const AppRouter: React.FC<PropsWithChildren> = ({ children }) => {
-  const { buildUrl } = useWidgetConfig()
-  const inRouterContext = useInRouterContext()
-  const Router = inRouterContext ? Fragment : MemoryRouter
-
-  const routerProps = inRouterContext ? undefined : memoryRouterProps
-
-  return (
-    <Router {...routerProps}>
-      {children}
-      {buildUrl ? <URLSearchParamsBuilder /> : null}
-      <PageEntered />
-    </Router>
-  )
-}

package/src/components/ActiveTransactions/ActiveTransactionItem.tsx

@@ -2,8 +2,8 @@ import ArrowForward from '@mui/icons-material/ArrowForward'
 import ErrorRounded from '@mui/icons-material/ErrorRounded'
 import InfoRounded from '@mui/icons-material/InfoRounded'
 import { ListItemAvatar, ListItemText, Typography } from '@mui/material'
-import { useNavigate } from 'react-router-dom'
-import { useProcessMessage } from '../../hooks/useProcessMessage.js'
+import { useNavigate } from '@tanstack/react-router'
+import { useActionMessage } from '../../hooks/useActionMessage.js'
 import { useRouteExecution } from '../../hooks/useRouteExecution.js'
 import { RouteExecutionStatus } from '../../stores/routes/types.js'
 import { navigationRoutes } from '../../utils/navigationRoutes.js'
@@ -23,20 +23,23 @@ export const ActiveTransactionItem: React.FC<{
   })
 
   const lastActiveStep = route?.steps.findLast((step) => step.execution)
-  const lastActiveProcess = lastActiveStep?.execution?.process.at(-1)
+  const lastActiveAction = lastActiveStep?.execution?.actions?.at(-1)
 
-  const { title } = useProcessMessage(lastActiveStep, lastActiveProcess)
+  const { title } = useActionMessage(lastActiveStep, lastActiveAction)
 
   if (!route || !lastActiveStep) {
     return null
   }
 
   const handleClick = () => {
-    navigate(navigationRoutes.transactionExecution, { state: { routeId } })
+    navigate({
+      to: navigationRoutes.transactionExecution,
+      search: { routeId },
+    })
   }
 
   const getStatusComponent = () => {
-    switch (lastActiveProcess?.status) {
+    switch (lastActiveAction?.status) {
       case 'ACTION_REQUIRED':
       case 'MESSAGE_REQUIRED':
       case 'RESET_REQUIRED':

package/src/components/ActiveTransactions/ActiveTransactions.tsx

@@ -1,7 +1,7 @@
 import type { CardProps } from '@mui/material'
 import { Stack } from '@mui/material'
+import { useNavigate } from '@tanstack/react-router'
 import { useTranslation } from 'react-i18next'
-import { useNavigate } from 'react-router-dom'
 import { useExecutingRoutesIds } from '../../stores/routes/useExecutingRoutesIds.js'
 import { navigationRoutes } from '../../utils/navigationRoutes.js'
 import { ButtonTertiary } from '../ButtonTertiary.js'
@@ -19,7 +19,7 @@ export const ActiveTransactions: React.FC<CardProps> = (props) => {
   }
 
   const handleShowAll = () => {
-    navigate(navigationRoutes.activeTransactions)
+    navigate({ to: navigationRoutes.activeTransactions })
   }
 
   const hasShowAll = executingRoutes?.length > 2

package/src/components/AmountInput/AmountInput.tsx

@@ -14,6 +14,7 @@ import {
   formatInputAmount,
   formatTokenPrice,
   priceToTokenAmount,
+  usdDecimals,
 } from '../../utils/format.js'
 import { fitInputText } from '../../utils/input.js'
 import { InputCard } from '../Card/InputCard.js'
@@ -30,8 +31,6 @@ import { AmountInputEndAdornment } from './AmountInputEndAdornment.js'
 import { AmountInputStartAdornment } from './AmountInputStartAdornment.js'
 import { PriceFormHelperText } from './PriceFormHelperText.js'
 
-const USD_DECIMALS = 2
-
 export const AmountInput: React.FC<FormTypeProps & CardProps> = ({
   formType,
   ...props
@@ -102,8 +101,8 @@ const AmountInputBase: React.FC<
     if (currentInputMode === 'price') {
       const priceValue = formatTokenPrice(value as string, token?.priceUSD)
       displayValue = formatInputAmount(
-        priceValue.toFixed(USD_DECIMALS),
-        USD_DECIMALS
+        priceValue.toFixed(usdDecimals),
+        usdDecimals
       )
     } else {
       displayValue = value as string
@@ -119,7 +118,7 @@ const AmountInputBase: React.FC<
     let formattedValue: string
     if (currentInputMode === 'price') {
       const cleanInputValue = inputValue.replace('$', '')
-      formattedValue = formatInputAmount(cleanInputValue, USD_DECIMALS, true)
+      formattedValue = formatInputAmount(cleanInputValue, usdDecimals, true)
       const tokenValue = priceToTokenAmount(formattedValue, token?.priceUSD)
       setFormattedPriceInput(formattedValue)
       setFieldValue(amountKey, tokenValue, { isDirty: true, isTouched: true })
@@ -141,7 +140,7 @@ const AmountInputBase: React.FC<
     let formattedValue: string
     if (currentInputMode === 'price') {
       const cleanInputValue = inputValue.replace('$', '')
-      formattedValue = formatInputAmount(cleanInputValue, USD_DECIMALS)
+      formattedValue = formatInputAmount(cleanInputValue, usdDecimals)
       const tokenValue = priceToTokenAmount(formattedValue, token?.priceUSD)
       const formattedAmount = formatInputAmount(tokenValue, token?.decimals)
       setFieldValue(amountKey, formattedAmount, {
@@ -166,8 +165,7 @@ const AmountInputBase: React.FC<
 
   const title =
     subvariant === 'custom'
-      ? subvariantOptions?.custom === 'deposit' ||
-        subvariantOptions?.custom === 'fund'
+      ? subvariantOptions?.custom === 'deposit'
         ? t('header.amount')
         : t('header.youPay')
       : t('header.send')

package/src/components/AmountInput/AmountInputEndAdornment.tsx

@@ -1,7 +1,7 @@
+import { formatUnits } from '@lifi/sdk'
 import { InputAdornment } from '@mui/material'
 import { memo } from 'react'
 import { useTranslation } from 'react-i18next'
-import { formatUnits } from 'viem'
 import { useAvailableChains } from '../../hooks/useAvailableChains.js'
 import { useGasRecommendation } from '../../hooks/useGasRecommendation.js'
 import { useTokenAddressBalance } from '../../hooks/useTokenAddressBalance.js'

package/src/components/Avatar/AccountAvatar.tsx

@@ -1,5 +1,5 @@
-import type { Account } from '@lifi/wallet-management'
 import { getConnectorIcon } from '@lifi/wallet-management'
+import type { Account } from '@lifi/widget-provider'
 import Wallet from '@mui/icons-material/Wallet'
 import { Badge } from '@mui/material'
 import { useChain } from '../../hooks/useChain.js'

package/src/components/ChainSelect/ChainSelect.tsx

@@ -1,8 +1,8 @@
 import type { EVMChain } from '@lifi/sdk'
 import { Skeleton, type Theme, Tooltip, useMediaQuery } from '@mui/material'
+import { useNavigate } from '@tanstack/react-router'
 import { memo, useCallback, useEffect, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
-import { useNavigate } from 'react-router-dom'
 import { useChainOrderStore } from '../../stores/chains/ChainOrderStore.js'
 import {
   maxChainsToOrder,
@@ -11,6 +11,7 @@ import {
 } from '../../stores/chains/createChainOrderStore.js'
 import type { FormTypeProps } from '../../stores/form/types.js'
 import { FormKeyHelper } from '../../stores/form/types.js'
+import { useFieldActions } from '../../stores/form/useFieldActions.js'
 import { useFieldValues } from '../../stores/form/useFieldValues.js'
 import { navigationRoutes } from '../../utils/navigationRoutes.js'
 import { AllChainsAvatar } from '../Chains/AllChainsAvatar.js'
@@ -29,7 +30,7 @@ export const ChainSelect = memo(({ formType }: FormTypeProps) => {
   const isMobile = useMediaQuery((theme: Theme) =>
     theme.breakpoints.down(theme.breakpoints.values.xs)
   )
-
+  const { setFieldValue } = useFieldActions()
   const {
     chainOrder,
     chains,
@@ -68,12 +69,15 @@ export const ChainSelect = memo(({ formType }: FormTypeProps) => {
   )
 
   const showAllChains = useCallback(() => {
-    navigate(navigationRoutes[`${formType}Chain`])
+    navigate({ to: navigationRoutes[`${formType}Chain`] })
   }, [navigate, formType])
 
   const selectAllNetworks = useCallback(() => {
     setIsAllNetworks(true, formType)
-  }, [setIsAllNetworks, formType])
+    // Reset the chain and token fields when selecting all networks
+    setFieldValue(FormKeyHelper.getChainKey(formType), '', { isTouched: true })
+    setFieldValue(FormKeyHelper.getTokenKey(formType), '', { isTouched: true })
+  }, [setIsAllNetworks, formType, setFieldValue])
 
   const chainsToHide =
     chains?.length === maxChainsToShow

package/src/components/Chains/VirtualizedChainList.tsx

@@ -4,7 +4,8 @@ import type { RefObject } from 'react'
 import { useCallback, useEffect, useMemo, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useChainOrderStore } from '../../stores/chains/ChainOrderStore.js'
-import type { FormType } from '../../stores/form/types.js'
+import { FormKeyHelper, type FormType } from '../../stores/form/types.js'
+import { useFieldActions } from '../../stores/form/useFieldActions.js'
 import { AllChainsAvatar } from './AllChainsAvatar.js'
 import {
   List,
@@ -52,7 +53,7 @@ export const VirtualizedChainList = ({
     state.setIsAllNetworks,
     state[`${formType}ShowAllNetworks`],
   ])
-
+  const { setFieldValue } = useFieldActions()
   const onPin = useCallback(
     (chainId: number) => {
       setPinnedChain(chainId)
@@ -161,7 +162,10 @@ export const VirtualizedChainList = ({
 
   const selectAllNetworks = useCallback(() => {
     setIsAllNetworks(true, formType)
-  }, [setIsAllNetworks, formType])
+    // Reset the chain and token fields when selecting all networks
+    setFieldValue(FormKeyHelper.getChainKey(formType), '', { isTouched: true })
+    setFieldValue(FormKeyHelper.getTokenKey(formType), '', { isTouched: true })
+  }, [setIsAllNetworks, formType, setFieldValue])
 
   return (
     <List

package/src/components/ContractComponent/ItemPrice.tsx

@@ -1,6 +1,5 @@
-import type { ContractCall } from '@lifi/sdk'
+import { type ContractCall, formatUnits } from '@lifi/sdk'
 import { useEffect } from 'react'
-import { formatUnits } from 'viem'
 import { useFieldActions } from '../../stores/form/useFieldActions.js'
 import type { TokenAmount } from '../../types/token.js'
 import { Token } from '../Token/Token.js'

package/src/components/ContractComponent/NFT/NFT.tsx

@@ -1,5 +1,5 @@
+import { formatUnits } from '@lifi/sdk'
 import { useEffect } from 'react'
-import { formatUnits } from 'viem'
 import { useFieldActions } from '../../../stores/form/useFieldActions.js'
 import { NFTBase } from './NFTBase.js'
 import type { NFTProps } from './types.js'