@lifi/widget 3.40.11 → 4.0.0-alpha.2

package/src/hooks/useTokenBalances.ts

@@ -1,6 +1,10 @@
 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 { HiddenUI } from '../types/widget.js'
+import { formatTokenPrice } from '../utils/format.js'
 import { isSearchMatch, processTokenBalances } from '../utils/tokenList.js'
 import { useAccountsBalancesData } from './useAccountsBalancesData.js'
 import { useTokenBalancesQueries } from './useTokenBalancesQueries.js'
@@ -12,6 +16,7 @@ export const useTokenBalances = (
   isAllNetworks?: boolean,
   search?: string
 ) => {
+  const { hiddenUI } = useWidgetConfig()
   const {
     allTokens,
     isLoading: isTokensLoading,
@@ -28,11 +33,48 @@ export const useTokenBalances = (
     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()
@@ -53,30 +95,72 @@ export const useTokenBalances = (
         (t) => `${t.chainId}-${t.address.toLowerCase()}`
       ) || []
     )
-    return balancesByChain?.filter((token) => {
+
+    const hideSmallBalances =
+      !!smallBalanceThreshold && !hiddenUI?.includes(HiddenUI.HideSmallBalances)
+    const threshold = hideSmallBalances
+      ? Number.parseFloat(smallBalanceThreshold)
+      : undefined
+
+    if (!balancesByChain) {
+      return undefined
+    }
+
+    return balancesByChain.reduce<typeof balancesByChain>((acc, token) => {
       const tokenKey = `${token.chainId}-${token.address.toLowerCase()}`
       // Check if token is in displayed list and has amount
       const isInDisplayedList = displayedTokensSet.has(tokenKey) && token.amount
       // Check if it matches search (for cached appended tokens)
       const matchesSearch = isSearchMatch(token, search)
-      return isInDisplayedList || matchesSearch
-    })
+
+      // Filter: only include tokens that match our criteria
+      if (!isInDisplayedList && !matchesSearch) {
+        return acc
+      }
+
+      // Apply small balance threshold transformation if enabled
+      let processedToken = token
+      if (
+        hideSmallBalances &&
+        threshold !== undefined &&
+        threshold >= 0 &&
+        token.amount
+      ) {
+        const balanceUSD = formatTokenPrice(
+          token.amount,
+          token.priceUSD,
+          token.decimals
+        )
+        if (balanceUSD < threshold) {
+          processedToken = {
+            ...token,
+            amount: 0n,
+          }
+        }
+      }
+
+      acc.push(processedToken)
+      return acc
+    }, [])
   }, [
     allTokensWithBalances,
     displayedTokensList,
     search,
     selectedChainId,
     isAllNetworks,
+    smallBalanceThreshold,
+    hiddenUI,
   ])
 
-  const { processedTokens, withCategories } = useMemo(() => {
+  const { processedTokens, withCategories, withPinnedTokens } = useMemo(() => {
     return processTokenBalances(
       isBalanceLoading,
       isAllNetworks || !!search,
       configTokens,
       selectedChainId,
       displayedTokensList,
-      displayedTokensWithBalances
+      displayedTokensWithBalances,
+      isPinnedToken
     )
   }, [
     isBalanceLoading,
@@ -86,11 +170,13 @@ export const useTokenBalances = (
     displayedTokensList,
     displayedTokensWithBalances,
     search,
+    isPinnedToken,
   ])
 
   return {
     tokens: processedTokens ?? [],
     withCategories,
+    withPinnedTokens,
     isTokensLoading,
     isSearchLoading,
     isBalanceLoading,

package/src/hooks/useTokenBalancesQueries.ts

@@ -1,6 +1,7 @@
 import { getTokenBalances, type TokenExtended } from '@lifi/sdk'
 import { useQueries } from '@tanstack/react-query'
 import { useMemo, useRef } from 'react'
+import { useSDKClient } from '../providers/SDKClientProvider.js'
 import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
 import type { TokenAmount, TokenAmountExtended } from '../types/token.js'
 import { getQueryKey } from '../utils/queries.js'
@@ -12,6 +13,7 @@ export const useTokenBalancesQueries = (
   isBalanceLoadingEnabled?: boolean
 ) => {
   const { keyPrefix } = useWidgetConfig()
+  const sdkClient = useSDKClient()
   const firstLoadStartRef = useRef<number | null>(null)
 
   const queryConfig = useMemo(() => {
@@ -33,7 +35,7 @@ export const useTokenBalancesQueries = (
               if (!accountAddress || !tokens) {
                 return []
               }
-              return await getTokenBalances(accountAddress, tokens)
+              return await getTokenBalances(sdkClient, accountAddress, tokens)
             },
             enabled: isBalanceLoadingEnabled,
             refetchInterval: defaultRefetchInterval,
@@ -42,7 +44,7 @@ export const useTokenBalancesQueries = (
           }
         })
     )
-  }, [accountsWithTokens, isBalanceLoadingEnabled, keyPrefix])
+  }, [accountsWithTokens, isBalanceLoadingEnabled, keyPrefix, sdkClient])
 
   const result = useQueries({
     queries: queryConfig,

package/src/hooks/useTokenSearch.ts

@@ -5,6 +5,7 @@ import {
   type TokenExtended,
 } from '@lifi/sdk'
 import { useQuery, useQueryClient } from '@tanstack/react-query'
+import { useSDKClient } from '../providers/SDKClientProvider.js'
 import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
 import type { FormType } from '../stores/form/types.js'
 import type { TokensByChain } from '../types/token.js'
@@ -19,13 +20,19 @@ export const useTokenSearch = (
 ) => {
   const queryClient = useQueryClient()
   const { tokens: configTokens, keyPrefix } = useWidgetConfig()
+  const sdkClient = useSDKClient()
 
   const { data, isLoading } = useQuery({
     queryKey: [getQueryKey('token-search', keyPrefix), chainId, tokenQuery],
     queryFn: async ({ queryKey: [, chainId, tokenQuery], signal }) => {
-      const token = await getToken(chainId as ChainId, tokenQuery as string, {
-        signal,
-      })
+      const token = await getToken(
+        sdkClient,
+        chainId as ChainId,
+        tokenQuery as string,
+        {
+          signal,
+        }
+      )
 
       if (token) {
         // Filter config tokens by chain before checking if token is allowed

package/src/hooks/useTokens.ts

@@ -4,15 +4,14 @@ import {
   getTokens,
   type TokensExtendedResponse,
 } from '@lifi/sdk'
+import { useChainTypeFromAddress } from '@lifi/widget-provider'
 import { useQuery } from '@tanstack/react-query'
 import { useMemo } from 'react'
+import { useSDKClient } from '../providers/SDKClientProvider.js'
 import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
 import type { FormType } from '../stores/form/types.js'
 import type { TokensByChain } from '../types/token.js'
-import {
-  defaultChainIdsByType,
-  getChainTypeFromAddress,
-} from '../utils/chainType.js'
+import { defaultChainIdsByType } from '../utils/chainType.js'
 import { isItemAllowed } from '../utils/item.js'
 import { getQueryKey } from '../utils/queries.js'
 import {
@@ -32,6 +31,8 @@ export const useTokens = (
     chains: chainsConfig,
     keyPrefix,
   } = useWidgetConfig()
+  const sdkClient = useSDKClient()
+  const { getChainTypeFromAddress } = useChainTypeFromAddress()
 
   // Main tokens cache - verified tokens from API
   const { data: verifiedTokens, isLoading } = useQuery({
@@ -45,6 +46,7 @@ export const useTokens = (
       ].filter((chainType) => isItemAllowed(chainType, chainsConfig?.types))
 
       const tokensResponse: TokensExtendedResponse = await getTokens(
+        sdkClient,
         {
           chainTypes,
           orderBy: 'volumeUSD24H',
@@ -86,6 +88,7 @@ export const useTokens = (
       ].filter((chainType) => isItemAllowed(chainType, chainsConfig?.types))
 
       const tokensResponse: TokensExtendedResponse = await getTokens(
+        sdkClient,
         {
           chainTypes,
           orderBy: 'volumeUSD24H',
@@ -101,7 +104,7 @@ export const useTokens = (
       let _chainId = searchChainId
       if (!_chainId) {
         const chainType = getChainTypeFromAddress(searchQuery)
-        if (chainType) {
+        if (chainType && chainType in defaultChainIdsByType) {
           _chainId = defaultChainIdsByType[chainType]
         }
       }
@@ -111,7 +114,9 @@ export const useTokens = (
       if (_chainId && searchQuery) {
         const existingTokens = tokensResponse.tokens[_chainId] || []
         if (!existingTokens.length) {
-          const token = await getToken(_chainId, searchQuery, { signal })
+          const token = await getToken(sdkClient, _chainId, searchQuery, {
+            signal,
+          })
           if (token) {
             tokensResponse.tokens[_chainId] = [token]
           }

package/src/hooks/useTools.ts

@@ -1,5 +1,6 @@
 import { getTools, type ToolsResponse } from '@lifi/sdk'
 import { useQuery } from '@tanstack/react-query'
+import { useSDKClient } from '../providers/SDKClientProvider.js'
 import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
 import { useSettingsStoreContext } from '../stores/settings/SettingsStore.js'
 import { getConfigItemSets, isItemAllowedForSets } from '../utils/item.js'
@@ -8,6 +9,7 @@ import { getQueryKey } from '../utils/queries.js'
 export const useTools = () => {
   const { bridges, exchanges, keyPrefix } = useWidgetConfig()
   const settingsStore = useSettingsStoreContext()
+  const sdkClient = useSDKClient()
 
   const { data } = useQuery({
     queryKey: [
@@ -18,7 +20,7 @@ export const useTools = () => {
       exchanges?.deny,
     ],
     queryFn: async (): Promise<ToolsResponse> => {
-      const tools = await getTools()
+      const tools = await getTools(sdkClient)
       const bridgesConfigSets = getConfigItemSets(
         bridges,
         (bridges) => new Set(bridges)

package/src/hooks/useTransactionDetails.ts

@@ -7,6 +7,7 @@ import {
   useQueryClient,
 } from '@tanstack/react-query'
 import { useMemo } from 'react'
+import { useSDKClient } from '../providers/SDKClientProvider.js'
 import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
 import { getQueryKey } from '../utils/queries.js'
 
@@ -14,6 +15,7 @@ export const useTransactionDetails = (transactionHash?: string) => {
   const { account, accounts } = useAccount()
   const queryClient = useQueryClient()
   const { keyPrefix } = useWidgetConfig()
+  const sdkClient = useSDKClient()
 
   const transactionHistoryQueryKey = useMemo(
     () => getQueryKey('transaction-history', keyPrefix),
@@ -40,6 +42,7 @@ export const useTransactionDetails = (transactionHash?: string) => {
         }
 
         const transaction = await getStatus(
+          sdkClient,
           {
             txHash: transactionHash,
           },

package/src/hooks/useTransactionHistory.ts

@@ -3,12 +3,14 @@ import { type ExtendedTransactionInfo, getTransactionHistory } from '@lifi/sdk'
 import { useAccount } from '@lifi/wallet-management'
 import type { QueryFunction } from '@tanstack/react-query'
 import { useQueries } from '@tanstack/react-query'
+import { useSDKClient } from '../providers/SDKClientProvider.js'
 import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
 import { getQueryKey } from '../utils/queries.js'
 
 export const useTransactionHistory = () => {
   const { accounts } = useAccount()
   const { keyPrefix } = useWidgetConfig()
+  const sdkClient = useSDKClient()
 
   const { data, isLoading } = useQueries({
     queries: accounts.map((account) => ({
@@ -24,6 +26,7 @@ export const useTransactionHistory = () => {
         date.setFullYear(date.getFullYear() - 10)
 
         const response = await getTransactionHistory(
+          sdkClient,
           {
             wallet: accountAddress,
             fromTimestamp: Math.floor(date.getTime() / 1000),

package/src/hooks/useWidgetChains.ts

@@ -0,0 +1,6 @@
+import type { WidgetConfig } from '../types/widget.js'
+import { useAvailableChains } from './useAvailableChains.js'
+
+export const useWidgetChains = (widgetConfig: WidgetConfig) => {
+  return useAvailableChains(undefined, widgetConfig)
+}

package/src/index.ts

@@ -1,11 +1,5 @@
 export type * from '@lifi/sdk'
-export {
-  ChainId,
-  ChainType,
-  CoinKey,
-  isZeroAddress,
-  PatcherMagicNumber,
-} 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'
@@ -15,7 +9,7 @@ export * from './components/ContractComponent/NFT/types.js'
 export * from './components/Skeleton/WidgetSkeleton.js'
 export { defaultMaxHeight } from './config/constants.js'
 export * from './config/version.js'
-export { useAvailableChains } from './hooks/useAvailableChains.js'
+export { useWidgetChains } from './hooks/useWidgetChains.js'
 export { useWidgetEvents, widgetEvents } from './hooks/useWidgetEvents.js'
 export * from './stores/bookmarks/types.js'
 export * from './stores/form/types.js'

package/src/pages/LanguagesPage.tsx

@@ -1,3 +1,4 @@
+import Check from '@mui/icons-material/Check'
 import { List } from '@mui/material'
 import { useTranslation } from 'react-i18next'
 import { ListItemText } from '../components/ListItemText.js'
@@ -32,7 +33,6 @@ export const LanguagesPage: React.FC = () => {
           <SettingsListItemButton
             key={language}
             onClick={() => setLanguageWithCode(language)}
-            selected={selectedLanguageCode === language}
           >
             <ListItemText
               primary={
@@ -43,6 +43,7 @@ export const LanguagesPage: React.FC = () => {
                 language
               }
             />
+            {selectedLanguageCode === language && <Check color="primary" />}
           </SettingsListItemButton>
         ))}
       </List>

package/src/pages/MainPage/MainPage.tsx

@@ -52,9 +52,7 @@ export const MainPage: React.FC = () => {
         <ContractComponent sx={marginSx}>{contractComponent}</ContractComponent>
       ) : null}
       <SelectChainAndToken mb={2} />
-      {!custom ||
-      subvariantOptions?.custom === 'deposit' ||
-      subvariantOptions?.custom === 'fund' ? (
+      {!custom || subvariantOptions?.custom === 'deposit' ? (
         <AmountInput formType="from" sx={marginSx} />
       ) : null}
       {!wideVariant ? <Routes sx={marginSx} /> : null}

package/src/pages/MainPage/ReviewButton.tsx

@@ -1,5 +1,5 @@
+import { useNavigate } from '@tanstack/react-router'
 import { useTranslation } from 'react-i18next'
-import { useNavigate } from 'react-router-dom'
 import { BaseTransactionButton } from '../../components/BaseTransactionButton/BaseTransactionButton.js'
 import { useRoutes } from '../../hooks/useRoutes.js'
 import { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js'
@@ -26,8 +26,9 @@ export const ReviewButton: React.FC = () => {
     }
 
     setReviewableRoute(currentRoute)
-    navigate(navigationRoutes.transactionExecution, {
-      state: { routeId: currentRoute.id },
+    navigate({
+      to: navigationRoutes.transactionExecution,
+      search: { routeId: currentRoute.id },
     })
     emitter.emit(WidgetEvent.RouteSelected, {
       route: currentRoute,
@@ -53,8 +54,7 @@ export const ReviewButton: React.FC = () => {
     }
     switch (subvariant) {
       case 'custom':
-        return subvariantOptions?.custom === 'deposit' ||
-          subvariantOptions?.custom === 'fund'
+        return subvariantOptions?.custom === 'deposit'
           ? t('button.deposit')
           : t('button.buy')
       case 'refuel':

package/src/pages/RoutesPage/RoutesPage.tsx

@@ -1,6 +1,6 @@
 import type { Route } from '@lifi/sdk'
 import { useAccount } from '@lifi/wallet-management'
-import type { BoxProps } from '@mui/material'
+import { useNavigate } from '@tanstack/react-router'
 import { useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import { ProgressToNextUpdate } from '../../components/ProgressToNextUpdate.js'
@@ -8,7 +8,6 @@ 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 { useNavigateBack } from '../../hooks/useNavigateBack.js'
 import { useRoutes } from '../../hooks/useRoutes.js'
 import { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js'
 import { useWidgetEvents } from '../../hooks/useWidgetEvents.js'
@@ -17,9 +16,9 @@ import { WidgetEvent } from '../../types/events.js'
 import { navigationRoutes } from '../../utils/navigationRoutes.js'
 import { Stack } from './RoutesPage.style.js'
 
-export const RoutesPage: React.FC<BoxProps> = () => {
+export const RoutesPage = () => {
   const { t } = useTranslation()
-  const { navigate } = useNavigateBack()
+  const navigate = useNavigate()
   const emitter = useWidgetEvents()
   const {
     routes,
@@ -53,8 +52,9 @@ export const RoutesPage: React.FC<BoxProps> = () => {
 
   const handleRouteClick = (route: Route) => {
     setReviewableRoute(route)
-    navigate(navigationRoutes.transactionExecution, {
-      state: { routeId: route.id },
+    navigate({
+      to: navigationRoutes.transactionExecution,
+      search: { routeId: route.id },
     })
     emitter.emit(WidgetEvent.RouteSelected, {
       route,

package/src/pages/SelectChainPage/SelectChainPage.tsx

@@ -12,7 +12,7 @@ export const SelectChainPage: React.FC<SelectChainPageProps> = ({
   formType,
   selectNativeToken,
 }) => {
-  const { navigateBack } = useNavigateBack()
+  const navigateBack = useNavigateBack()
   const { setCurrentChain } = useChainSelect(formType)
   const selectToken = useTokenSelect(formType, navigateBack)
 

package/src/pages/SelectTokenPage/SelectTokenPage.tsx

@@ -1,18 +1,16 @@
 import { Box, type Theme, useMediaQuery } from '@mui/material'
-import type { FC, RefObject } from 'react'
+import type { FC } from 'react'
 import { useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import { ChainSelect } from '../../components/ChainSelect/ChainSelect.js'
 import { FullPageContainer } from '../../components/FullPageContainer.js'
 import { TokenList } from '../../components/TokenList/TokenList.js'
 import { useHeader } from '../../hooks/useHeader.js'
-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 { FormType, FormTypeProps } from '../../stores/form/types.js'
+import type { FormTypeProps } from '../../stores/form/types.js'
 import { HiddenUI } from '../../types/widget.js'
 import { SearchTokenInput } from './SearchTokenInput.js'
 
@@ -37,7 +35,7 @@ export const SelectTokenPage: FC<FormTypeProps> = ({ formType }) => {
   useHeader(title)
 
   const hideChainSelect =
-    (wideVariant && subvariantOptions?.wide?.enableChainSidebar) ||
+    (wideVariant && !subvariantOptions?.wide?.disableChainSidebar) ||
     (swapOnly && formType === 'to') ||
     hiddenUI?.includes(HiddenUI.ChainSelect)
 
@@ -68,7 +66,7 @@ export const SelectTokenPage: FC<FormTypeProps> = ({ formType }) => {
           </Box>
         )}
       </Box>
-      <WrappedTokenList
+      <TokenList
         // Rerender component if variant changes (since chains tiles change height)
         key={
           hideChainSelect
@@ -83,25 +81,3 @@ export const SelectTokenPage: FC<FormTypeProps> = ({ 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 } = useListHeight({
-    listParentRef,
-    headerRef,
-  })
-  return (
-    <TokenList
-      parentRef={listParentRef}
-      height={listHeight}
-      onClick={navigateBack}
-      formType={formType}
-    />
-  )
-}

package/src/pages/SendToWallet/BookmarksPage.tsx

@@ -4,9 +4,9 @@ import MoreHoriz from '@mui/icons-material/MoreHoriz'
 import OpenInNewRounded from '@mui/icons-material/OpenInNewRounded'
 import TurnedIn from '@mui/icons-material/TurnedIn'
 import { Button, ListItemAvatar, ListItemText, MenuItem } from '@mui/material'
+import { useNavigate } from '@tanstack/react-router'
 import { useId, useRef, useState } from 'react'
 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 { ListItem } from '../../components/ListItem/ListItem.js'
@@ -22,6 +22,7 @@ import { useBookmarks } from '../../stores/bookmarks/useBookmarks.js'
 import { useFieldActions } from '../../stores/form/useFieldActions.js'
 import { useSendToWalletActions } from '../../stores/settings/useSendToWalletStore.js'
 import { defaultChainIdsByType } from '../../utils/chainType.js'
+import { navigationRoutes } from '../../utils/navigationRoutes.js'
 import { shortenAddress } from '../../utils/wallet.js'
 import { BookmarkAddressSheet } from './BookmarkAddressSheet.js'
 import { EmptyListIndicator } from './EmptyListIndicator.js'
@@ -59,10 +60,7 @@ export const BookmarksPage = () => {
     })
     setSelectedBookmark(bookmark)
     setSendToWallet(true)
-    navigate('../../', {
-      relative: 'path',
-      replace: true,
-    })
+    navigate({ to: navigationRoutes.home, replace: true })
   }
 
   const moreMenuId = useId()

package/src/pages/SendToWallet/ConfirmAddressSheet.tsx

@@ -50,7 +50,7 @@ const ConfirmAddressSheetContent: React.FC<ConfirmAddressSheetContentProps> = ({
   onClose,
 }) => {
   const { t } = useTranslation()
-  const { navigateBack } = useNavigateBack()
+  const navigateBack = useNavigateBack()
   const { setFieldValue } = useFieldActions()
   const { setSendToWallet } = useSendToWalletActions()
 

package/src/pages/SendToWallet/ConnectedWalletsPage.tsx

@@ -1,13 +1,13 @@
-import type { Account } from '@lifi/wallet-management'
 import { useAccount } from '@lifi/wallet-management'
+import type { Account } from '@lifi/widget-provider'
 import ContentCopyRounded from '@mui/icons-material/ContentCopyRounded'
 import MoreHoriz from '@mui/icons-material/MoreHoriz'
 import OpenInNewRounded from '@mui/icons-material/OpenInNewRounded'
 import Wallet from '@mui/icons-material/Wallet'
 import { ListItemAvatar, ListItemText, MenuItem } from '@mui/material'
+import { useNavigate } from '@tanstack/react-router'
 import { useId, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { useNavigate } from 'react-router-dom'
 import { AccountAvatar } from '../../components/Avatar/AccountAvatar.js'
 import { ListItem } from '../../components/ListItem/ListItem.js'
 import { ListItemButton } from '../../components/ListItem/ListItemButton.js'
@@ -18,6 +18,7 @@ import { useToAddressRequirements } from '../../hooks/useToAddressRequirements.j
 import { useBookmarkActions } from '../../stores/bookmarks/useBookmarkActions.js'
 import { useFieldActions } from '../../stores/form/useFieldActions.js'
 import { useSendToWalletActions } from '../../stores/settings/useSendToWalletStore.js'
+import { navigationRoutes } from '../../utils/navigationRoutes.js'
 import { shortenAddress } from '../../utils/wallet.js'
 import { EmptyListIndicator } from './EmptyListIndicator.js'
 import {
@@ -54,8 +55,8 @@ export const ConnectedWalletsPage = () => {
       isConnectedAccount: true,
     })
     setSendToWallet(true)
-    navigate('../../', {
-      relative: 'path',
+    navigate({
+      to: navigationRoutes.home,
       replace: true,
     })
   }