refactor react-router

package.json

@@ -16,9 +16,10 @@
     "@sentry/vite-plugin": "^0.7.2",
     "@tanstack/react-query": "^4.14.5",
     "@tanstack/react-query-devtools": "^4.14.5",
-    "@tanstack/react-router": "0.0.1-beta.193",
+    "@tanstack/react-router": "^1.4.6",
     "@tanstack/react-table": "^8.9.3",
     "@tanstack/react-virtual": "^3.0.0-beta.30",
+    "@tanstack/router-devtools": "^1.4.6",
     "@testing-library/dom": "^7.21.4",
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^13.0.0",

src/components/explorer/ExplorerSearch.tsx

@@ -14,7 +14,7 @@ import { ExplorerSearchDropdownItems } from 'components/explorer/ExplorerSearchD
 import { ExplorerSearchInput } from 'components/explorer/ExplorerSearchInput';
 import ExplorerSearchSuggestions from 'components/explorer/suggestion';
 import { utils } from 'ethers';
-import { PathNames, useNavigate } from 'libs/routing';
+import { useNavigate } from 'libs/routing';
 import { config } from 'services/web3/config';
 import { cn } from 'utils/helpers';
 import { ReactComponent as IconSearch } from 'assets/icons/search.svg';
@@ -68,7 +68,8 @@ export const _ExplorerSearch: FC = () => {
       if (type === 'token-pair' && !pairs.names.has(slug)) return;
       if (type === 'wallet' && (waitingToFetchEns || isInvalidAddress)) return;
       navigate({
-        to: PathNames.explorerOverview(type, slug),
+        to: '/explorer/$type/$slug',
+        params: { type, slug },
       });
     },
     [waitingToFetchEns, isInvalidAddress, navigate, pairs.names, type]

src/components/explorer/useExplorerParams.ts

@@ -2,6 +2,8 @@ import { useParams } from 'libs/routing';
 import { ExplorerParams } from './utils';
 
 export const useExplorerParams = () => {
+  // TODO broken type inference
+  // const params = useParams({ from: explorerResultLayout.fullPath });
   const params: ExplorerParams = useParams({ strict: false });
 
   // To support emojis in ens domains

src/components/strategies/create/BuySellBlock/index.tsx

@@ -1,3 +1,4 @@
+import { useNavigate } from '@tanstack/react-router';
 import { FC, useId } from 'react';
 import { Tooltip } from 'components/common/tooltip/Tooltip';
 import { OrderCreate } from 'components/strategies/create/useOrder';
@@ -12,7 +13,6 @@ import {
 import { TabsMenu } from 'components/common/tabs/TabsMenu';
 import { TabsMenuButton } from 'components/common/tabs/TabsMenuButton';
 import { FullOutcome } from 'components/strategies/FullOutcome';
-import { useNavigate } from 'libs/routing';
 import { BuySellHeader } from './Header';
 import { m } from 'libs/motion';
 import { items } from '../variants';
@@ -71,6 +71,7 @@ export const BuySellBlock: FC<Props> = ({
 
   const changeStrategy = (direction: StrategyDirection) => {
     navigate({
+      from: '/strategies/create',
       search: (search) => ({
         ...search,
         strategyDirection: direction,

src/components/strategies/create/CreateStrategyTokenSelection.tsx

@@ -1,7 +1,7 @@
+import { useNavigate } from '@tanstack/react-router';
 import { FC } from 'react';
 import { carbonEvents } from 'services/events';
 import { m } from 'libs/motion';
-import { PathNames, useNavigate } from 'libs/routing';
 import { Tooltip } from 'components/common/tooltip/Tooltip';
 import { SelectTokenButton } from 'components/common/selectToken';
 import { UseStrategyCreateReturn } from 'components/strategies/create';
@@ -22,7 +22,7 @@ export const CreateStrategyTokenSelection: FC<UseStrategyCreateReturn> = ({
         updatedQuote: base.symbol,
       });
       navigate({
-        to: PathNames.createStrategy,
+        to: '/strategies/create',
         search: (search) => ({
           ...search,
           base: quote.address,

src/components/strategies/create/utils.ts

@@ -90,7 +90,7 @@ export const createStrategyAction = async ({
         void cache.invalidateQueries({
           queryKey: QueryKey.balance(user, quote.address),
         });
-        navigate({ to: PathNames.strategies });
+        navigate({ to: '/', params: {} });
         carbonEvents.strategy.strategyCreate(strategyEventData);
       },
       onError: (e: any) => {

src/libs/routing/router.tsx

@@ -2,7 +2,13 @@ import { Router } from '@tanstack/react-router';
 import { routeTree } from 'libs/routing/routes';
 import { parseSearchWith } from 'libs/routing/utils';
 
-export const router = new Router<any, any>({
+export const router = new Router({
   routeTree,
   parseSearch: parseSearchWith(JSON.parse),
 });
+
+declare module '@tanstack/react-router' {
+  interface Register {
+    router: typeof router;
+  }
+}

src/libs/routing/routes.tsx

@@ -1,14 +1,12 @@
 import { ExplorerPage } from 'pages/explorer';
 import { StrategiesPage } from 'pages/strategies';
-import { TradePage } from 'pages/trade';
 import { CreateStrategyPage } from 'pages/strategies/create';
 import { DebugPage } from 'pages/debug';
 import { TermsPage } from 'pages/terms';
 import { EditStrategyPage } from 'pages/strategies/edit';
 import { PrivacyPage } from 'pages/privacy';
 import { App } from 'App';
-import { Navigate, RootRoute, Route } from '@tanstack/react-router';
-import { PathNames } from './pathnames';
+import { redirect, RootRoute, Route } from '@tanstack/react-router';
 import { ExplorerTypePage } from 'pages/explorer/type';
 import { ExplorerTypePortfolioPage } from 'pages/explorer/type/portfolio';
 import { ExplorerTypePortfolioTokenPage } from 'pages/explorer/type/portfolio/token';
@@ -56,17 +54,17 @@ const debugPage = new Route({
   component: DebugPage,
 });
 
-const tradePage = new Route({
-  getParentRoute: () => appRoute,
-  path: '/trade',
-  component: TradePage,
-});
+// const tradePage = new Route({
+//   getParentRoute: () => appRoute,
+//   path: '/trade',
+//   component: TradePage,
+// });
 
 const createStrategyPage = new Route({
   getParentRoute: () => appRoute,
   path: '/strategies/create',
   component: CreateStrategyPage,
-  validateSearch: (search) => {
+  validateSearch: (search: Record<string, unknown>) => {
     if (
       search.strategyType === 'recurring' ||
       search.strategyType === 'disposable' ||
@@ -80,7 +78,7 @@ const createStrategyPage = new Route({
 
 const editStrategyPage = new Route({
   getParentRoute: () => appRoute,
-  path: PathNames.editStrategy,
+  path: '/strategies/edit/$strategyId',
   component: EditStrategyPage,
 });
 
@@ -112,12 +110,6 @@ export const strategyPortflioPage = new Route({
   path: '/',
   component: StrategiesPortfolioPage,
 });
-strategyPortflioLayout.addChildren([
-  strategyPortflioPage,
-  strategyPortflioTokenPage,
-]);
-
-myStrategyLayout.addChildren([strategyOverviewPage, strategyPortflioLayout]);
 
 // EXPLORER
 const explorerLayout = new Route({
@@ -128,9 +120,9 @@ const explorerLayout = new Route({
 const explorerRedirect = new Route({
   getParentRoute: () => explorerLayout,
   path: '/',
-  component: () => (
-    <Navigate to="/explorer/$type" params={{ type: 'token-pair' }} />
-  ),
+  loader: () => {
+    redirect({ to: '/explorer/$type', params: { type: 'token-pair' } });
+  },
 });
 
 const explorerPage = new Route({
@@ -139,7 +131,7 @@ const explorerPage = new Route({
   component: ExplorerPage,
 });
 
-const explorerResultLayout = new Route({
+export const explorerResultLayout = new Route({
   getParentRoute: () => explorerPage,
   path: '$slug',
 });
@@ -173,25 +165,31 @@ const explorerPortfolioTokenPage = new Route({
   component: ExplorerTypePortfolioTokenPage,
 });
 
-explorerPortfolioLayout.addChildren([
-  explorerPortfolioPage,
-  explorerPortfolioTokenPage,
-]);
-
-explorerLayout.addChildren([explorerRedirect, explorerPage]);
-explorerPage.addChildren([explorerTypePage, explorerResultLayout]);
-explorerResultLayout.addChildren([
-  explorerOverviewPage,
-  explorerPortfolioLayout,
-]);
-
 export const routeTree = appRoute.addChildren([
   termPage,
   privacyPage,
   debugPage,
-  tradePage,
+  // tradePage,
   createStrategyPage,
   editStrategyPage,
-  explorerLayout,
-  myStrategyLayout,
+  explorerLayout.addChildren([
+    explorerRedirect,
+    explorerPage.addChildren([
+      explorerTypePage,
+      explorerResultLayout.addChildren([
+        explorerOverviewPage,
+        explorerPortfolioLayout.addChildren([
+          explorerPortfolioPage,
+          explorerPortfolioTokenPage,
+        ]),
+      ]),
+    ]),
+  ]),
+  myStrategyLayout.addChildren([
+    strategyOverviewPage,
+    strategyPortflioLayout.addChildren([
+      strategyPortflioPage,
+      strategyPortflioTokenPage,
+    ]),
+  ]),
 ]);

src/pages/explorer/index.tsx

@@ -1,5 +1,5 @@
 import { Page } from 'components/common/page';
-import { Outlet, PathNames, Navigate } from 'libs/routing';
+import { Outlet, Navigate } from 'libs/routing';
 import {
   ExplorerSearch,
   useExplorer,
@@ -14,7 +14,7 @@ export const ExplorerPage = () => {
   const { slug, type } = useExplorerParams();
   const query = useExplorer();
   if (type !== 'wallet' && type !== 'token-pair') {
-    return <Navigate to={PathNames.explorer('wallet')} />;
+    return <Navigate to={'/explorer/$type'} params={{ type: 'token-pair' }} />;
   }
 
   return (

src/pages/explorer/type/portfolio/index.tsx

@@ -12,7 +12,12 @@ export const ExplorerTypePortfolioPage = () => {
 
   const onRowClick = (row: Row<PortfolioData>) =>
     navigate({
-      to: `/explorer/${type}/${slug}/portfolio/token/${row.original.token.address}`,
+      to: '/explorer/$type/$slug/portfolio/token/$address',
+      params: {
+        type,
+        slug,
+        address: row.original.token.address,
+      },
     });
 
   const getHref = (row: PortfolioData) =>

src/pages/strategies/edit/index.tsx

@@ -1,5 +1,5 @@
 import { EditStrategyMain } from 'components/strategies/edit';
-import { PathNames, useNavigate, useParams } from 'libs/routing';
+import { useNavigate, useParams } from 'libs/routing';
 import { useWeb3 } from 'libs/web3';
 import { useEffect, useState } from 'react';
 import { StrategiesPage } from '..';
@@ -15,11 +15,11 @@ export const EditStrategyPage = () => {
   useEffect(() => {
     if (isLoading) return;
     if (!user || !strategyId) {
-      navigate({ to: PathNames.strategies });
+      navigate({ to: '/' });
     } else {
       const strategy = strategies?.find(({ id }) => id === strategyId);
       if (strategy) setStrategy(strategy);
-      else navigate({ to: PathNames.strategies });
+      else navigate({ to: '/' });
     }
   }, [user, strategyId, strategies, isLoading, navigate]);
 

src/pages/strategies/portfolio/index.tsx

@@ -2,14 +2,18 @@ import { Row } from '@tanstack/react-table';
 import { PortfolioAllTokens } from 'components/strategies/portfolio';
 import { PortfolioData } from 'components/strategies/portfolio/usePortfolioData';
 import { useStrategyCtx } from 'hooks/useStrategies';
-import { PathNames, useNavigate } from 'libs/routing';
+import { PathNames } from 'libs/routing';
+import { useNavigate } from '@tanstack/react-router';
 
 export const StrategiesPortfolioPage = () => {
   const { strategies, isLoading } = useStrategyCtx();
   const navigate = useNavigate();
 
   const onRowClick = (row: Row<PortfolioData>) =>
-    navigate({ to: PathNames.portfolioToken(row.original.token.address) });
+    navigate({
+      to: '/strategies/portfolio/token/$address',
+      params: { address: row.original.token.address },
+    });
 
   const getHref = (row: PortfolioData) =>
     PathNames.portfolioToken(row.token.address);