@lifi/widget 4.3.0 → 4.4.0

package/src/hooks/useTokenBalances.ts

@@ -1,14 +1,13 @@
 import { useMemo } from 'react'
 import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
 import type { FormType } from '../stores/form/types.js'
-import { usePinnedTokensStore } from '../stores/pinnedTokens/PinnedTokensStore.js'
 import { useSettings } from '../stores/settings/useSettings.js'
 import type { TokenAmount } from '../types/token.js'
 import { formatTokenPrice } from '../utils/format.js'
-import { isSearchMatch, processTokenBalances } from '../utils/tokenList.js'
+import { isSearchMatch, processTokenList } from '../utils/tokenList.js'
 import { useAccountsBalancesData } from './useAccountsBalancesData.js'
+import { useDisplayedTokens } from './useDisplayedTokens.js'
 import { useTokenBalancesQueries } from './useTokenBalancesQueries.js'
-import { useTokens } from './useTokens.js'
 
 export const useTokenBalances = (
   selectedChainId?: number,
@@ -23,12 +22,14 @@ export const useTokenBalances = (
   isSearchLoading: boolean
   isBalanceLoading: boolean
 } => {
-  const { hiddenUI } = useWidgetConfig()
+  const { hiddenUI, tokens: configTokens } = useWidgetConfig()
   const {
     allTokens,
-    isLoading: isTokensLoading,
+    displayedTokensList,
+    isPinnedToken,
+    isTokensLoading,
     isSearchLoading,
-  } = useTokens(formType, search, isAllNetworks ? undefined : selectedChainId)
+  } = useDisplayedTokens(selectedChainId, formType, isAllNetworks, search)
 
   const { data: accountsWithAllTokens, isLoading: isAccountsLoading } =
     useAccountsBalancesData(selectedChainId, formType, isAllNetworks, allTokens)
@@ -39,58 +40,12 @@ export const useTokenBalances = (
   const { data: allTokensWithBalances, isLoading: isBalanceQueriesLoading } =
     useTokenBalancesQueries(accountsWithAllTokens, isBalanceLoadingEnabled)
 
-  const { tokens: configTokens } = useWidgetConfig()
   const { smallBalanceThreshold } = useSettings(['smallBalanceThreshold'])
 
-  const pinnedTokens = usePinnedTokensStore((state) => state.pinnedTokens)
-
   const isBalanceLoading =
     (isBalanceQueriesLoading || isAccountsLoading) &&
     !allTokensWithBalances?.length
 
-  // Create function to check if token is pinned
-  const isPinnedToken = useMemo(() => {
-    if (isAllNetworks) {
-      // For all networks, check all pinned tokens
-      const allPinned: Array<{ chainId: number; tokenAddress: string }> = []
-      Object.entries(pinnedTokens).forEach(([chainIdStr, addresses]) => {
-        const chainId = Number.parseInt(chainIdStr, 10)
-        addresses.forEach((address) => {
-          allPinned.push({ chainId, tokenAddress: address })
-        })
-      })
-      const pinnedSet = new Set(
-        allPinned.map((p) => `${p.chainId}-${p.tokenAddress.toLowerCase()}`)
-      )
-      return (chainId: number, tokenAddress: string) => {
-        const key = `${chainId}-${tokenAddress.toLowerCase()}`
-        return pinnedSet.has(key)
-      }
-    } else if (selectedChainId) {
-      // For single chain, check only selected chain
-      const chainPinnedTokens = pinnedTokens[selectedChainId] || []
-      const pinnedSet = new Set(
-        chainPinnedTokens.map((addr) => addr.toLowerCase())
-      )
-      return (chainId: number, tokenAddress: string) => {
-        return (
-          chainId === selectedChainId &&
-          pinnedSet.has(tokenAddress.toLowerCase())
-        )
-      }
-    }
-    return undefined
-  }, [isAllNetworks, selectedChainId, pinnedTokens])
-
-  const displayedTokensList = useMemo(() => {
-    const tokensByChain = isAllNetworks
-      ? Object.values(allTokens ?? {}).flat()
-      : selectedChainId
-        ? allTokens?.[selectedChainId]
-        : undefined
-    return tokensByChain?.filter((t) => isSearchMatch(t, search)) ?? []
-  }, [allTokens, isAllNetworks, selectedChainId, search])
-
   const displayedTokensWithBalances = useMemo(() => {
     const balancesByChain = isAllNetworks
       ? allTokensWithBalances
@@ -160,7 +115,7 @@ export const useTokenBalances = (
   ])
 
   const { processedTokens, withCategories, withPinnedTokens } = useMemo(() => {
-    return processTokenBalances(
+    return processTokenList(
       isBalanceLoading,
       isAllNetworks || !!search,
       configTokens,

package/src/hooks/useTokenList.ts

@@ -0,0 +1,59 @@
+import { useMemo } from 'react'
+import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
+import type { FormType } from '../stores/form/types.js'
+import type { TokenAmount } from '../types/token.js'
+import { processTokenList } from '../utils/tokenList.js'
+import { useDisplayedTokens } from './useDisplayedTokens.js'
+
+/**
+ * Token-selection list without wallet balances - No accounts are resolved and no balance queries are fired.
+ */
+export const useTokenList = (
+  selectedChainId?: number,
+  formType?: FormType,
+  isAllNetworks?: boolean,
+  search?: string
+): {
+  tokens: TokenAmount[]
+  withCategories: boolean
+  withPinnedTokens: boolean
+  isTokensLoading: boolean
+  isSearchLoading: boolean
+} => {
+  const { tokens: configTokens } = useWidgetConfig()
+  const {
+    displayedTokensList,
+    isPinnedToken,
+    isTokensLoading,
+    isSearchLoading,
+  } = useDisplayedTokens(selectedChainId, formType, isAllNetworks, search)
+
+  const { processedTokens, withCategories, withPinnedTokens } = useMemo(
+    () =>
+      processTokenList(
+        /* withoutBalances */ true,
+        isAllNetworks || !!search,
+        configTokens,
+        selectedChainId,
+        displayedTokensList,
+        undefined,
+        isPinnedToken
+      ),
+    [
+      isAllNetworks,
+      search,
+      configTokens,
+      selectedChainId,
+      displayedTokensList,
+      isPinnedToken,
+    ]
+  )
+
+  return {
+    tokens: processedTokens ?? [],
+    withCategories,
+    withPinnedTokens,
+    isTokensLoading,
+    isSearchLoading,
+  }
+}

package/src/hooks/useTransactionDetails.ts

@@ -59,9 +59,7 @@ export const useTransactionDetails = (
         if (fromAddress) {
           queryClient.setQueryData<StatusResponse[]>(
             [transactionHistoryQueryKey, fromAddress],
-            (data) => {
-              return [...data!, transaction!]
-            }
+            (data) => (data ? [...data, transaction!] : [transaction!])
           )
         }
 

package/src/pages/LanguagesPage.tsx

@@ -1,49 +1,62 @@
 import Check from '@mui/icons-material/Check'
-import { List } from '@mui/material'
+import { Box, List } from '@mui/material'
+import { useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import { ListItemText } from '../components/ListItemText.js'
 import { PageContainer } from '../components/PageContainer.js'
 import { SettingsListItemButton } from '../components/SettingsListItemButton.js'
 import { useHeader } from '../hooks/useHeader.js'
 import { useLanguages } from '../hooks/useLanguages.js'
+import { useListHeight } from '../hooks/useListHeight.js'
 import { languageNames } from '../providers/I18nProvider/constants.js'
 
 export const LanguagesPage: React.FC = () => {
   const { t } = useTranslation()
+  const listParentRef = useRef<HTMLDivElement>(null)
   const { selectedLanguageCode, availableLanguages, setLanguageWithCode } =
     useLanguages()
 
   useHeader(t('language.title'))
 
+  const { listHeight } = useListHeight({
+    listParentRef,
+  })
+
   if (availableLanguages.length < 1) {
     return null
   }
 
   return (
     <PageContainer disableGutters>
-      <List
-        sx={{
-          padding: 1.5,
-        }}
+      <Box
+        className="long-list"
+        ref={listParentRef}
+        style={{ height: listHeight, overflow: 'auto' }}
       >
-        {availableLanguages.map((language) => (
-          <SettingsListItemButton
-            key={language}
-            onClick={() => setLanguageWithCode(language)}
-          >
-            <ListItemText
-              primary={
-                languageNames[language as keyof typeof languageNames] ||
-                t('language.name', {
-                  lng: language,
-                }) ||
-                language
-              }
-            />
-            {selectedLanguageCode === language && <Check color="primary" />}
-          </SettingsListItemButton>
-        ))}
-      </List>
+        <List
+          sx={{
+            padding: 1.5,
+          }}
+        >
+          {availableLanguages.map((language) => (
+            <SettingsListItemButton
+              key={language}
+              onClick={() => setLanguageWithCode(language)}
+            >
+              <ListItemText
+                primary={
+                  languageNames[language as keyof typeof languageNames] ||
+                  t('language.name', {
+                    lng: language,
+                  }) ||
+                  language
+                }
+              />
+              {selectedLanguageCode === language && <Check color="primary" />}
+            </SettingsListItemButton>
+          ))}
+        </List>
+      </Box>
     </PageContainer>
   )
 }

package/src/pages/RoutesPage/RoutesPage.tsx

@@ -1,13 +1,16 @@
 import type { Route } from '@lifi/sdk'
 import { useAccount } from '@lifi/wallet-management'
+import { Box } from '@mui/material'
 import { useNavigate } from '@tanstack/react-router'
-import { type JSX, useMemo } from 'react'
+import { type JSX, useMemo, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
+import { PageContainer } from '../../components/PageContainer.js'
 import { ProgressToNextUpdate } from '../../components/ProgressToNextUpdate.js'
 import { RouteCard } from '../../components/RouteCard/RouteCard.js'
 import { RouteCardSkeleton } from '../../components/RouteCard/RouteCardSkeleton.js'
 import { RouteNotFoundCard } from '../../components/RouteCard/RouteNotFoundCard.js'
 import { useHeader } from '../../hooks/useHeader.js'
+import { useListHeight } from '../../hooks/useListHeight.js'
 import { useRoutes } from '../../hooks/useRoutes.js'
 import { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js'
 import { useWidgetEvents } from '../../hooks/useWidgetEvents.js'
@@ -20,6 +23,7 @@ export const RoutesPage = (): JSX.Element => {
   const { t } = useTranslation()
   const navigate = useNavigate()
   const emitter = useWidgetEvents()
+  const listParentRef = useRef<HTMLDivElement>(null)
   const {
     routes,
     isLoading,
@@ -50,6 +54,10 @@ export const RoutesPage = (): JSX.Element => {
 
   useHeader(t('header.receive'), headerAction)
 
+  const { listHeight } = useListHeight({
+    listParentRef,
+  })
+
   const handleRouteClick = (route: Route) => {
     setReviewableRoute(route)
     navigate({
@@ -69,31 +77,34 @@ export const RoutesPage = (): JSX.Element => {
   const allowInteraction = account.isConnected && !toAddressUnsatisfied
 
   return (
-    <Stack
-      className="long-list"
-      direction="column"
-      spacing={2}
-      sx={{ flex: 1, pt: 1.5 }}
-    >
-      {routeNotFound ? (
-        <RouteNotFoundCard />
-      ) : isLoading && !routes?.length ? (
-        Array.from({ length: 3 }).map((_, index) => (
-          <RouteCardSkeleton key={index} />
-        ))
-      ) : (
-        routes?.map((route: Route, index: number) => (
-          <RouteCard
-            key={index}
-            route={route}
-            onClick={
-              allowInteraction ? () => handleRouteClick(route) : undefined
-            }
-            active={index === 0}
-            expanded={routes?.length === 1}
-          />
-        ))
-      )}
-    </Stack>
+    <PageContainer disableGutters>
+      <Box
+        className="long-list"
+        ref={listParentRef}
+        style={{ height: listHeight, overflow: 'auto' }}
+      >
+        <Stack direction="column" spacing={2} sx={{ pt: 1.5 }}>
+          {routeNotFound ? (
+            <RouteNotFoundCard />
+          ) : isLoading && !routes?.length ? (
+            Array.from({ length: 3 }).map((_, index) => (
+              <RouteCardSkeleton key={index} />
+            ))
+          ) : (
+            routes?.map((route: Route, index: number) => (
+              <RouteCard
+                key={index}
+                route={route}
+                onClick={
+                  allowInteraction ? () => handleRouteClick(route) : undefined
+                }
+                active={index === 0}
+                expanded={routes?.length === 1}
+              />
+            ))
+          )}
+        </Stack>
+      </Box>
+    </PageContainer>
   )
 }

package/src/providers/WalletProvider/WalletProvider.tsx

@@ -10,6 +10,7 @@ import {
 import { useTranslation } from 'react-i18next'
 import { useAvailableChains } from '../../hooks/useAvailableChains.js'
 import { useInitializeSDKProviders } from '../../hooks/useInitializeSDKProviders.js'
+import { getConfigItemSets, isItemAllowedForSets } from '../../utils/item.js'
 import { useWidgetConfig } from '../WidgetProvider/WidgetProvider.js'
 import { useExternalWalletProvider } from './useExternalWalletProvider.js'
 
@@ -21,12 +22,23 @@ export const WalletProvider = ({
   children,
   providers,
 }: PropsWithChildren<WalletProviderProps>): JSX.Element => {
-  const { walletConfig } = useWidgetConfig()
+  const { walletConfig, chains: chainsConfig } = useWidgetConfig()
   const { chains } = useAvailableChains()
   const { i18n } = useTranslation()
   const { useExternalWalletProvidersOnly, internalChainTypes } =
     useExternalWalletProvider()
 
+  // Restrict offered wallets to the ecosystems allowed by chains.types config.
+  const enabledChainTypes = useMemo(() => {
+    const chainTypeSets = getConfigItemSets(
+      chainsConfig?.types,
+      (items) => new Set(items)
+    )
+    return internalChainTypes.filter((chainType) =>
+      isItemAllowedForSets(chainType, chainTypeSets)
+    )
+  }, [internalChainTypes, chainsConfig?.types])
+
   if (
     !providers.length &&
     !useExternalWalletProvidersOnly &&
@@ -40,12 +52,12 @@ export const WalletProvider = ({
   const walletManagementConfig = useMemo(
     () => ({
       locale: i18n.resolvedLanguage as never,
-      enabledChainTypes: internalChainTypes,
+      enabledChainTypes,
       walletEcosystemsOrder: walletConfig?.walletEcosystemsOrder,
     }),
     [
       i18n.resolvedLanguage,
-      internalChainTypes,
+      enabledChainTypes,
       walletConfig?.walletEcosystemsOrder,
     ]
   )

package/src/shared.ts

@@ -0,0 +1,191 @@
+// ─────────────────────────────────────────────────────────────────────────────
+// @lifi/widget/shared
+//
+// Internal surface shared with sibling packages (currently @lifi/widget-checkout).
+// These exports are NOT part of the public widget API. They may change in any
+// release without notice. Application code must not depend on this subpath.
+// ─────────────────────────────────────────────────────────────────────────────
+
+// Propagate widget's MUI theme augmentations (theme.vars, custom palette keys,
+// component variants) to any consumer that imports through this subpath.
+import type {} from '@mui/material/themeCssVarsAugmentation'
+import type {} from './themes/types.js'
+
+// ── components ───────────────────────────────────────────────────────────────
+export { ActionRow } from './components/ActionRow/ActionRow.js'
+export {
+  FormControl,
+  Input,
+} from './components/AmountInput/AmountInput.style.js'
+export { AmountInputEndAdornment } from './components/AmountInput/AmountInputEndAdornment.js'
+export { InputPriceButton } from './components/AmountInput/PriceFormHelperText.style.js'
+export { AvatarBadgedDefault } from './components/Avatar/Avatar.js'
+export { TokenAvatar } from './components/Avatar/TokenAvatar.js'
+export { BaseTransactionButton } from './components/BaseTransactionButton/BaseTransactionButton.js'
+export type { BottomSheetBase } from './components/BottomSheet/types.js'
+export { ButtonTertiary } from './components/ButtonTertiary.js'
+export { Card } from './components/Card/Card.js'
+export { CardIconButton } from './components/Card/CardIconButton.js'
+export { CardTitle } from './components/Card/CardTitle.js'
+export { InputCard } from './components/Card/InputCard.js'
+export { ChainSelect } from './components/ChainSelect/ChainSelect.js'
+export { ChainAvatar } from './components/ChainSelect/ChainSelect.style.js'
+export { ContractComponent } from './components/ContractComponent/ContractComponent.js'
+export { ExecutionStatusCard } from './components/ExecutionStatusCard/ExecutionStatusCard.js'
+export { StatusIcon } from './components/ExecutionStatusCard/StatusIcon.js'
+export { FeeBreakdownTooltip } from './components/FeeBreakdownTooltip.js'
+export { IconCircle } from './components/IconCircle/IconCircle.js'
+export { IconTypography } from './components/IconTypography.js'
+export { ListItemButton } from './components/ListItem/ListItemButton.js'
+export { WarningMessages } from './components/Messages/WarningMessages.js'
+export { PageContainer } from './components/PageContainer.js'
+export { PoweredBy } from './components/PoweredBy/PoweredBy.js'
+export { ProgressToNextUpdate } from './components/ProgressToNextUpdate.js'
+export { RouteCard } from './components/RouteCard/RouteCard.js'
+export { RouteCardSkeleton } from './components/RouteCard/RouteCardSkeleton.js'
+export { RouteDetails } from './components/RouteCard/RouteDetails.js'
+export {
+  DetailInfoIcon,
+  DetailLabel,
+  DetailLabelContainer,
+  DetailRow,
+  DetailValue,
+} from './components/RouteCard/RouteDetails.style.js'
+export { RouteNotFoundCard } from './components/RouteCard/RouteNotFoundCard.js'
+export { RouteTokens } from './components/RouteCard/RouteTokens.js'
+export { SearchInput } from './components/Search/SearchInput.js'
+export { SendToWalletButton } from './components/SendToWallet/SendToWalletButton.js'
+export {
+  type ExecutionRow,
+  useExecutionRows,
+} from './components/StepActions/executionRows.js'
+export { SentToWalletRow } from './components/StepActions/SentToWalletRow.js'
+export { ExternalLink } from './components/StepActions/StepActionRow.style.js'
+export { StepActionsList } from './components/StepActions/StepActionsList.js'
+export { Token } from './components/Token/Token.js'
+export { TokenNotFound } from './components/TokenList/TokenNotFound.js'
+export { useTokenSelect } from './components/TokenList/useTokenSelect.js'
+export { VirtualizedTokenList } from './components/TokenList/VirtualizedTokenList.js'
+export { TokenRate } from './components/TokenRate/TokenRate.js'
+export {
+  DateLabelContainer,
+  DateLabelText,
+} from './components/TransactionCard/TransactionCard.style.js'
+// ── hooks ────────────────────────────────────────────────────────────────────
+export { useAddressActivity } from './hooks/useAddressActivity.js'
+export {
+  AddressType,
+  useAddressValidation,
+} from './hooks/useAddressValidation.js'
+export { useAvailableChains } from './hooks/useAvailableChains.js'
+export { useChain } from './hooks/useChain.js'
+export { useContactSupport } from './hooks/useContactSupport.js'
+export { useDebouncedWatch } from './hooks/useDebouncedWatch.js'
+export { useExplorer } from './hooks/useExplorer.js'
+export { useHeader } from './hooks/useHeader.js'
+export { useListHeight } from './hooks/useListHeight.js'
+export { useNavigateBack } from './hooks/useNavigateBack.js'
+export { useRouteExecution } from './hooks/useRouteExecution.js'
+export { useRouteExecutionMessage } from './hooks/useRouteExecutionMessage.js'
+export { useRoutes } from './hooks/useRoutes.js'
+export { useToAddressRequirements } from './hooks/useToAddressRequirements.js'
+export { useToken } from './hooks/useToken.js'
+export { useTokenAddressBalance } from './hooks/useTokenAddressBalance.js'
+export { useTokenBalances } from './hooks/useTokenBalances.js'
+export { useTokenList } from './hooks/useTokenList.js'
+export { useTools } from './hooks/useTools.js'
+export { useWidgetEvents } from './hooks/useWidgetEvents.js'
+// ── pages ────────────────────────────────────────────────────────────────────
+export { MainWarningMessages } from './pages/MainPage/MainWarningMessages.js'
+export { Stack } from './pages/RoutesPage/RoutesPage.style.js'
+export { SelectChainPage } from './pages/SelectChainPage/SelectChainPage.js'
+export { SearchTokenInput } from './pages/SelectTokenPage/SearchTokenInput.js'
+export { ContactSupportButton } from './pages/TransactionDetailsPage/ContactSupportButton.js'
+export { ConfirmToAddressSheet } from './pages/TransactionPage/ConfirmToAddressSheet.js'
+export {
+  ExchangeRateBottomSheet,
+  type ExchangeRateBottomSheetBase,
+} from './pages/TransactionPage/ExchangeRateBottomSheet.js'
+export { ExecutionDoneCard } from './pages/TransactionPage/ExecutionDoneCard.js'
+export { RouteTracker } from './pages/TransactionPage/RouteTracker.js'
+export { StartTransactionButton } from './pages/TransactionPage/StartTransactionButton.js'
+export { TokenValueBottomSheet } from './pages/TransactionPage/TokenValueBottomSheet.js'
+export { TransactionDoneButtons } from './pages/TransactionPage/TransactionDoneButtons.js'
+export {
+  calculateValueLossPercentage,
+  getTokenValueLossThreshold,
+} from './pages/TransactionPage/utils.js'
+
+// ── providers ────────────────────────────────────────────────────────────────
+export { I18nProvider } from './providers/I18nProvider/I18nProvider.js'
+export { QueryClientProvider } from './providers/QueryClientProvider.js'
+export {
+  SDKClientProvider,
+  useSDKClient,
+} from './providers/SDKClientProvider.js'
+export { WalletProvider } from './providers/WalletProvider/WalletProvider.js'
+export {
+  useWidgetConfig,
+  WidgetProvider,
+} from './providers/WidgetProvider/WidgetProvider.js'
+
+// ── stores ───────────────────────────────────────────────────────────────────
+export { BookmarkStoreProvider } from './stores/bookmarks/BookmarkStore.js'
+export { useChainOrderStore } from './stores/chains/ChainOrderStore.js'
+export {
+  FormKeyHelper,
+  type FormType,
+  type FormTypeProps,
+} from './stores/form/types.js'
+export { useFieldActions } from './stores/form/useFieldActions.js'
+export { useFieldValues } from './stores/form/useFieldValues.js'
+export {
+  useHeaderStore,
+  useSetHeaderHeight,
+} from './stores/header/useHeaderStore.js'
+export { useInputModeStore } from './stores/inputMode/useInputModeStore.js'
+export {
+  useRouteExecutionStore,
+  useRouteExecutionStoreContext,
+} from './stores/routes/RouteExecutionStore.js'
+export { RouteExecutionStatus } from './stores/routes/types.js'
+export {
+  getSourceTxHash,
+  isRouteActive,
+  isRouteDone,
+  isRouteFailed,
+} from './stores/routes/utils.js'
+export { StoreProvider } from './stores/StoreProvider.js'
+export {
+  SettingsStoreProvider,
+  useSettingsStoreContext,
+} from './stores/settings/SettingsStore.js'
+
+// ── themes ───────────────────────────────────────────────────────────────────
+export { createTheme } from './themes/createTheme.js'
+
+// ── types ────────────────────────────────────────────────────────────────────
+export { WidgetEvent } from './types/events.js'
+export type {
+  FormRef,
+  WidgetConfig,
+  WidgetTheme,
+} from './types/widget.js'
+
+// ── utils ────────────────────────────────────────────────────────────────────
+export { buildRouteFromTxHistory } from './utils/converters.js'
+export { createElementId, ElementId } from './utils/elements.js'
+export { hasEnumFlag } from './utils/enum.js'
+export { getAccumulatedFeeCostsBreakdown } from './utils/fees.js'
+export {
+  formatDuration,
+  formatInputAmount,
+  formatTokenAmount,
+  formatTokenPrice,
+  priceToTokenAmount,
+  usdDecimals,
+} from './utils/format.js'
+export { getPriceImpact } from './utils/getPriceImpact.js'
+export { fitInputText } from './utils/input.js'
+export { navigationRoutes } from './utils/navigationRoutes.js'
+export { shortenAddress } from './utils/wallet.js'

package/src/stores/form/createFormStore.ts

@@ -13,6 +13,7 @@ import type {
 export const formDefaultValues: DefaultValues = {
   fromAmount: '',
   toAmount: '',
+  cashFiatAmount: '',
   tokenSearchFilter: '',
   priceInverted: false,
   validUntil: DEFAULT_VALID_UNTIL_SECONDS,

package/src/stores/form/types.ts

@@ -12,6 +12,7 @@ export interface DefaultFieldValues {
 }
 
 export interface DefaultValues extends DefaultFieldValues {
+  cashFiatAmount: string
   contractCalls?: ContractCall[]
   tokenSearchFilter: string
   /** Limit-order: when true, the price is displayed/entered inverted. */

package/src/utils/tokenList.ts

@@ -15,8 +15,8 @@ const sortByBalances = (a: TokenAmount, b: TokenAmount) =>
 const sortByVolume = (a: TokenExtended, b: TokenExtended) =>
   (b.volumeUSD24H ?? 0) - (a.volumeUSD24H ?? 0)
 
-export const processTokenBalances = (
-  isBalanceLoading: boolean,
+export const processTokenList = (
+  withoutBalances: boolean,
   noCategories: boolean,
   configTokens?: WidgetTokens,
   selectedChainId?: number,
@@ -28,7 +28,7 @@ export const processTokenBalances = (
   withCategories: boolean
   withPinnedTokens: boolean
 } => {
-  if (isBalanceLoading) {
+  if (withoutBalances) {
     if (noCategories) {
       const sortedTokens = [...(tokens ?? [])].sort(sortByVolume)
       // Separate pinned tokens