@lifi/widget 4.3.1 → 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/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