@lifi/widget 3.40.8 → 4.0.0-alpha.1

package/src/i18n/ko.json

@@ -127,6 +127,7 @@
       "deleteTransactionHistory": "스왑 기록은 로컬에만 저장되며 삭제시 복구할 수 없습니다.",
       "fundsLossPrevention": "",
       "highValueLoss": "받은 토큰의 가치가 스왑된 토큰 및 트랜잭션 비용보다 상당히 낮습니다.",
+      "unverifiedToken": "",
       "insufficientFunds": "스왑을 진행할 자금이 부족합니다.",
       "insufficientGas": "스왑을 진행할 가스가 부족합니다. 최소 다음과 같은 가스가 필요합니다:",
       "minFromAmountUSD": "",
@@ -237,6 +238,7 @@
     "myTokens": "",
     "onChain": "{{chainName}} 에서",
     "ownedBy": "소유자: ",
+    "pinnedTokens": "",
     "popularTokens": "",
     "priceImpact": "",
     "process": {
@@ -331,7 +333,8 @@
     "routePriority": "우선 경로",
     "slippage": "",
     "custom": "사용자 정의",
-    "resetSettings": ""
+    "resetSettings": "",
+    "hideSmallBalances": ""
   },
   "sendToWallet": {
     "addBookmark": "",

package/src/i18n/pl.json

@@ -127,6 +127,7 @@
       "deleteTransactionHistory": "",
       "fundsLossPrevention": "",
       "highValueLoss": "",
+      "unverifiedToken": "",
       "insufficientFunds": "",
       "insufficientGas": "",
       "minFromAmountUSD": "",
@@ -237,6 +238,7 @@
     "myTokens": "",
     "onChain": "",
     "ownedBy": "",
+    "pinnedTokens": "",
     "popularTokens": "",
     "priceImpact": "",
     "process": {
@@ -331,7 +333,8 @@
     "routePriority": "",
     "slippage": "",
     "custom": "",
-    "resetSettings": ""
+    "resetSettings": "",
+    "hideSmallBalances": ""
   },
   "sendToWallet": {
     "addBookmark": "",

package/src/i18n/pt.json

@@ -127,6 +127,7 @@
       "deleteTransactionHistory": "O histórico de conversões é armazenado apenas localmente e não pode ser recuperado caso seja excluído.",
       "fundsLossPrevention": "Sempre certifique-se de que as contas de contrato inteligente estão devidamente configuradas na cadeia de destino e evite transferências diretas para corretoras de criptomoedas para evitar perda de fundos.",
       "highValueLoss": "A quantidade de tokens a serem recebidos é significativamente menor do que os tokens convertidos e os custos da transação.",
+      "unverifiedToken": "Token não verificado. Faça sempre sua própria pesquisa antes de prosseguir.",
       "insufficientFunds": "Você não possui fundos suficientes para completar a conversão.",
       "insufficientGas": "Você não tem gás suficiente para completar a conversão. É necessário adicionar pelo menos:",
       "minFromAmountUSD": "Valor mínimo é {{amount, currencyExt(currency: USD)}}. Por favor, insira um valor maior.",
@@ -237,6 +238,7 @@
     "myTokens": "Meus tokens",
     "onChain": "em {{chainName}}",
     "ownedBy": "Possuído por",
+    "pinnedTokens": "Tokens fixados",
     "popularTokens": "Tokens populares",
     "priceImpact": "Impacto no preço",
     "process": {
@@ -331,7 +333,8 @@
     "routePriority": "Prioridade de rota / caminho",
     "slippage": "Diferença máxima",
     "custom": "Personalizado",
-    "resetSettings": "Você está usando configurações personalizadas que podem afetar o número ou a classificação das rotas disponíveis."
+    "resetSettings": "Você está usando configurações personalizadas que podem afetar o número ou a classificação das rotas disponíveis.",
+    "hideSmallBalances": "Ocultar pequenos saldos"
   },
   "sendToWallet": {
     "addBookmark": "Adicionar marcador",

package/src/i18n/th.json

@@ -127,6 +127,7 @@
       "deleteTransactionHistory": "ประวัติการแลกเปลี่ยนจะถูกจัดเก็บไว้ในเครื่องเท่านั้นและไม่สามารถกู้คืนได้หากคุณลบออก",
       "fundsLossPrevention": "",
       "highValueLoss": "มูลค่าของโทเค็นที่ได้รับนั้นต่ำกว่าโทเค็นที่แลกเปลี่ยนและต้นทุนการทำธุรกรรมอย่างมาก.",
+      "unverifiedToken": "",
       "insufficientFunds": "คุณมีเงินไม่เพียงพอที่จะดำเนินการแลกเปลี่ยน.",
       "insufficientGas": "คุณมีแก๊สไม่เพียงพอที่จะแลกเปลี่ยนให้เสร็จสมบูรณ์ คุณต้องเพิ่มอย่างน้อย:",
       "minFromAmountUSD": "",
@@ -237,6 +238,7 @@
     "myTokens": "โทเคนของฉัน",
     "onChain": "บน {{chainName}}",
     "ownedBy": "เป็นเจ้าของโดย",
+    "pinnedTokens": "",
     "popularTokens": "โทเค็นยอดนิยม",
     "priceImpact": "",
     "process": {
@@ -331,7 +333,8 @@
     "routePriority": "ลำดับสำคัญของเส้นทาง",
     "slippage": "",
     "custom": "กำหนดเอง",
-    "resetSettings": "คุณกำลังใช้การตั้งค่าที่กำหนดเองซึ่งอาจมีผลต่อจำนวนหรือการเรียงลำดับของเส้นทางที่ใช้ได้"
+    "resetSettings": "คุณกำลังใช้การตั้งค่าที่กำหนดเองซึ่งอาจมีผลต่อจำนวนหรือการเรียงลำดับของเส้นทางที่ใช้ได้",
+    "hideSmallBalances": ""
   },
   "sendToWallet": {
     "addBookmark": "เพิ่มบุ๊กมาร์ก",

package/src/i18n/tr.json

@@ -127,6 +127,7 @@
       "deleteTransactionHistory": "İşlem geçmişi yalnızca yerel olarak depolanır ve silerseniz kurtarılamaz.",
       "fundsLossPrevention": "Her zaman akıllı sözleşme hesaplarının hedef zincirde düzgün bir şekilde ayarlandığından emin olun ve fon kaybını önlemek için borsalara doğrudan transferlerden kaçının.",
       "highValueLoss": "Elde edilecek varlıkların değeri, takas edilen varlıklardan ve işlem maliyetinden önemli ölçüde düşüktür.",
+      "unverifiedToken": "",
       "insufficientFunds": "Takas işlemini gerçekleştirmek için yeterli bakiyeniz bulunmamaktadır.",
       "insufficientGas": "En azından şunları eklemelisiniz:",
       "minFromAmountUSD": "",
@@ -237,6 +238,7 @@
     "myTokens": "Varlıklarım",
     "onChain": "{{chainName}} üzerinde",
     "ownedBy": "Tarafından sahip olunan",
+    "pinnedTokens": "",
     "popularTokens": "Popüler varlıklar",
     "priceImpact": "Fiyat etkisi",
     "process": {
@@ -331,7 +333,8 @@
     "routePriority": "Rota önceliği",
     "slippage": "Maks. kayma",
     "custom": "Özel",
-    "resetSettings": "Kullanılabilir rotaların sayısını etkileyebilecek özel bir ayar kullanıyorsunuz."
+    "resetSettings": "Kullanılabilir rotaların sayısını etkileyebilecek özel bir ayar kullanıyorsunuz.",
+    "hideSmallBalances": ""
   },
   "sendToWallet": {
     "addBookmark": "Yer işareti ekle",

package/src/i18n/uk.json

@@ -127,6 +127,7 @@
       "deleteTransactionHistory": "Історія транзакцій зберігається лише локально й не може бути відновлена, якщо ви їх видалите.",
       "fundsLossPrevention": "Завжди переконуйтеся, що облікові записи смартконтрактів правильно налаштовані в мережі призначення, та уникайте прямих переказів на біржі, щоб запобігти втраті коштів.",
       "highValueLoss": "Вартість отриманих токенів значно нижча, ніж обмінені токени та вартість транзакції.",
+      "unverifiedToken": "",
       "insufficientFunds": "У вас недостатньо коштів для здійснення свопу.",
       "insufficientGas": "Для завершення свопа у вас недостатньо газу. Вам необхідно додати хоча б:",
       "minFromAmountUSD": "Мінімальна сума {{amount, currencyExt(currency: USD)}}. Будь ласка, введіть більшу суму.",
@@ -237,6 +238,7 @@
     "myTokens": "Мої токени",
     "onChain": "на {{chainName}}",
     "ownedBy": "Власник",
+    "pinnedTokens": "",
     "popularTokens": "Популярні токени",
     "priceImpact": "Вплив на ціну",
     "process": {
@@ -331,7 +333,8 @@
     "routePriority": "Пріоритет",
     "slippage": "Макс. прослизання",
     "custom": "Власне",
-    "resetSettings": "Ви використовуєте налаштування які можуть вплинути на кількість або сортування доступних маршрутів."
+    "resetSettings": "Ви використовуєте налаштування які можуть вплинути на кількість або сортування доступних маршрутів.",
+    "hideSmallBalances": ""
   },
   "sendToWallet": {
     "addBookmark": "Додати до закладок",

package/src/i18n/vi.json

@@ -127,6 +127,7 @@
       "deleteTransactionHistory": "Lịch sử Swap chỉ lưu trữ cục bộ và không thể phục hồi khi bạn xoá chúng.",
       "fundsLossPrevention": "",
       "highValueLoss": "Giá trị của token nhận được đang thấp hơn rất nhiều so với token được swap và chi phí giao dịch.",
+      "unverifiedToken": "",
       "insufficientFunds": "Bạn không có đủ tiền để thực hiện tác vụ này.",
       "insufficientGas": "Bạn không đủ gas để thực hiện swap. Bạn cần thêm ít nhất:",
       "minFromAmountUSD": "",
@@ -237,6 +238,7 @@
     "myTokens": "Mã thông báo của tôi",
     "onChain": "tại {{chainName}}",
     "ownedBy": "Được sở hữu bởi",
+    "pinnedTokens": "",
     "popularTokens": "Mã thông báo phổ biến",
     "priceImpact": "",
     "process": {
@@ -331,7 +333,8 @@
     "routePriority": "Tuyền đường ưu tiên",
     "slippage": "",
     "custom": "Tuỳ chỉnh",
-    "resetSettings": "Bạn đang sử dụng cài đặt tùy chỉnh có thể ảnh hưởng đến số lượng hoặc cách sắp xếp các tuyến đường có sẵn."
+    "resetSettings": "Bạn đang sử dụng cài đặt tùy chỉnh có thể ảnh hưởng đến số lượng hoặc cách sắp xếp các tuyến đường có sẵn.",
+    "hideSmallBalances": ""
   },
   "sendToWallet": {
     "addBookmark": "Thêm dấu trang",

package/src/i18n/zh.json

@@ -127,6 +127,7 @@
       "deleteTransactionHistory": "交易记录只存储在本地，如果你删除它，我们将无法恢复这些记录。",
       "fundsLossPrevention": "总是确保在目的地链上适当建立智能合同账户，并避免直接转给交易所，以防止资金损失。",
       "highValueLoss": "收到的代币的价值明显低于要被兑换的代币和交易成本。",
+      "unverifiedToken": "",
       "insufficientFunds": "你没有足够的资金来完成这笔交易。",
       "insufficientGas": "您没有足够的燃气费来完成此次交易。您至少需要添加：",
       "minFromAmountUSD": "",
@@ -237,6 +238,7 @@
     "myTokens": "我的代币",
     "onChain": "在{{chainName}} 上",
     "ownedBy": "属于",
+    "pinnedTokens": "",
     "popularTokens": "热门代币",
     "priceImpact": "价格冲击",
     "process": {
@@ -331,7 +333,8 @@
     "routePriority": "路由优先级",
     "slippage": "最大滑点",
     "custom": "自定义",
-    "resetSettings": "您正在使用自定义设置来过滤可用路由。"
+    "resetSettings": "您正在使用自定义设置来过滤可用路由。",
+    "hideSmallBalances": ""
   },
   "sendToWallet": {
     "addBookmark": "添加到收藏",

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,
     })
   }

package/src/pages/SendToWallet/RecentWalletsPage.tsx

@@ -5,9 +5,9 @@ import MoreHoriz from '@mui/icons-material/MoreHoriz'
 import OpenInNewRounded from '@mui/icons-material/OpenInNewRounded'
 import TurnedInNot from '@mui/icons-material/TurnedInNot'
 import { 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'
@@ -62,18 +62,15 @@ export const RecentWalletsPage = () => {
     })
     setSelectedBookmark(recentWallet)
     setSendToWallet(true)
-    navigate('../../', {
-      relative: 'path',
+    navigate({
+      to: navigationRoutes.home,
       replace: true,
     })
   }
 
   const handleAddBookmark = (bookmark: Bookmark) => {
     addBookmark(bookmark)
-    navigate(`../${navigationRoutes.bookmarks}`, {
-      relative: 'path',
-      replace: true,
-    })
+    navigate({ to: navigationRoutes.bookmarks, replace: true })
   }
 
   const closeMenu = () => {

package/src/pages/SendToWallet/SendToConfiguredWalletPage.tsx

@@ -26,7 +26,7 @@ import {
 
 export const SendToConfiguredWalletPage = () => {
   const { t } = useTranslation()
-  const { navigateBack } = useNavigateBack()
+  const navigateBack = useNavigateBack()
   const { toAddresses } = useWidgetConfig()
   const [selectedToAddress, setSelectedToAddress] = useState<ToAddress>()
   const { requiredToChainType } = useToAddressRequirements()

package/src/pages/SendToWallet/SendToWalletPage.tsx

@@ -4,10 +4,10 @@ import History from '@mui/icons-material/History'
 import TurnedIn from '@mui/icons-material/TurnedIn'
 import Wallet from '@mui/icons-material/Wallet'
 import { Box, Tooltip, Typography } from '@mui/material'
+import { useNavigate } from '@tanstack/react-router'
 import type { ChangeEvent } from 'react'
 import { useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { useNavigate } from 'react-router-dom'
 import type { BottomSheetBase } from '../../components/BottomSheet/types.js'
 import { ButtonTertiary } from '../../components/ButtonTertiary.js'
 import { CardButton } from '../../components/Card/CardButton.js'
@@ -38,7 +38,7 @@ import {
   ValidationAlert,
 } from './SendToWalletPage.style.js'
 
-export const SendToWalletPage = () => {
+export const SendToWalletPage: React.FC = () => {
   const { t } = useTranslation()
   const navigate = useNavigate()
   const bookmarkAddressSheetRef = useRef<BottomSheetBase>(null)
@@ -164,19 +164,19 @@ export const SendToWalletPage = () => {
   }
 
   const handleRecentWalletsClick = () => {
-    navigate(navigationRoutes.recentWallets)
+    navigate({ to: navigationRoutes.recentWallets })
   }
 
   const handleConnectedWalletsClick = () => {
-    navigate(navigationRoutes.connectedWallets)
+    navigate({ to: navigationRoutes.connectedWallets })
   }
   const handleBookmarkedWalletsClick = () => {
-    navigate(navigationRoutes.bookmarks)
+    navigate({ to: navigationRoutes.bookmarks })
   }
 
   const handleAddBookmark = (bookmark: Bookmark) => {
     addBookmark(bookmark)
-    navigate(navigationRoutes.bookmarks)
+    navigate({ to: navigationRoutes.bookmarks })
   }
 
   const handleOnConfirm = (confirmedWallet: Bookmark) => {

package/src/pages/SettingsPage/BridgeAndExchangeSettings.tsx

@@ -1,7 +1,7 @@
 import AirlineStops from '@mui/icons-material/AirlineStops'
 import SwapHoriz from '@mui/icons-material/SwapHoriz'
+import { useNavigate } from '@tanstack/react-router'
 import { useTranslation } from 'react-i18next'
-import { useNavigate } from 'react-router-dom'
 import { CardButton } from '../../components/Card/CardButton.js'
 import { useSettingMonitor } from '../../hooks/useSettingMonitor.js'
 import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
@@ -38,7 +38,9 @@ export const BridgeAndExchangeSettings: React.FC<{
   }
 
   const handleClick = () => {
-    navigate(navigationRoutes[type.toLowerCase() as 'bridges' | 'exchanges'])
+    navigate({
+      to: navigationRoutes[type.toLowerCase() as 'bridges' | 'exchanges'],
+    })
   }
 
   const Icon = supportedIcons[type]

package/src/pages/SettingsPage/LanguageSetting.tsx

@@ -1,6 +1,6 @@
 import Language from '@mui/icons-material/Language'
+import { useNavigate } from '@tanstack/react-router'
 import { useTranslation } from 'react-i18next'
-import { useNavigate } from 'react-router-dom'
 import { CardButton } from '../../components/Card/CardButton.js'
 import { CardValue } from '../../components/Card/CardButton.style.js'
 import { useLanguages } from '../../hooks/useLanguages.js'
@@ -20,7 +20,7 @@ export const LanguageSetting: React.FC = () => {
   }
 
   const handleClick = () => {
-    navigate(navigationRoutes.languages)
+    navigate({ to: navigationRoutes.languages })
   }
 
   return (