Update to react-router

package.json

@@ -14,9 +14,9 @@
     "@playwright/test": "^1.37.1",
     "@sentry/react": "^7.48.0",
     "@sentry/vite-plugin": "^0.7.2",
-    "@tanstack/react-location": "^3.7.4",
     "@tanstack/react-query": "^4.14.5",
     "@tanstack/react-query-devtools": "^4.14.5",
+    "@tanstack/react-router": "0.0.1-beta.193",
     "@tanstack/react-table": "^8.9.3",
     "@tanstack/react-virtual": "^3.0.0-beta.30",
     "@testing-library/dom": "^7.21.4",

src/components/common/walletConnect/index.tsx

@@ -1,5 +1,5 @@
 import { items } from './items';
-import { Link } from '@tanstack/react-location';
+import { Link } from 'libs/routing';
 import { buttonStyles } from '../button/buttonStyles';
 
 export const WalletConnect = () => {

src/components/core/MainContent.tsx

@@ -1,6 +1,6 @@
 import { FC, useEffect, useRef } from 'react';
 import { useWeb3 } from 'libs/web3';
-import { Outlet, PathNames, useLocation } from 'libs/routing';
+import { Outlet, PathNames, useRouterState } from 'libs/routing';
 import { ErrorUnsupportedNetwork } from 'components/core/error/ErrorUnsupportedNetwork';
 import { ErrorNetworkConnection } from 'components/core/error/ErrorNetworkConnection';
 import { useTokens } from 'hooks/useTokens';
@@ -12,7 +12,7 @@ import { ErrorUserBlocked } from 'components/core/error/ErrorUserBlocked';
 
 export const MainContent: FC = () => {
   const web3 = useWeb3();
-  const location = useLocation();
+  const { location } = useRouterState();
   const prevPathnameRef = useRef('');
   const tokens = useTokens();
   const sdk = useCarbonInit();
@@ -22,20 +22,20 @@ export const MainContent: FC = () => {
       top: 0,
       left: 0,
     });
-  }, [location.current]);
+  }, [location]);
 
   useEffect(() => {
-    if (prevPathnameRef.current !== location.current.pathname) {
+    if (prevPathnameRef.current !== location.pathname) {
       carbonEvents.general.changePage({ referrer: prevPathnameRef.current });
 
-      prevPathnameRef.current = location.current.pathname;
+      prevPathnameRef.current = location.pathname;
     }
-  }, [location, location.current.pathname]);
+  }, [location, location.pathname]);
 
   if (
-    location.current.pathname === PathNames.debug ||
-    location.current.pathname === PathNames.terms ||
-    location.current.pathname === PathNames.privacy
+    location.pathname === PathNames.debug ||
+    location.pathname === PathNames.terms ||
+    location.pathname === PathNames.privacy
   ) {
     return <Outlet />;
   }

src/components/core/menu/mainMenu/MainMenuLeft.tsx

@@ -1,13 +1,13 @@
 import { FC } from 'react';
 import { carbonEvents } from 'services/events';
-import { Link, PathNames, useLocation } from 'libs/routing';
+import { Link, PathNames, useRouterState } from 'libs/routing';
 import { ReactComponent as LogoCarbon } from 'assets/logos/carbon.svg';
 import { isPathnameMatch } from 'utils/helpers';
 import { handleOnItemClick } from '../utils';
 import { menuItems } from 'components/core/menu';
 
 export const MainMenuLeft: FC = () => {
-  const pathname = useLocation().current.pathname;
+  const pathname = useRouterState().location.pathname;
 
   return (
     <nav

src/components/core/menu/mainMenu/MainMenuTradeSwitch.tsx

@@ -3,7 +3,6 @@ import { ReactComponent as IconSwitch } from 'assets/icons/switch.svg';
 import { Button } from 'components/common/button';
 import { Token } from 'libs/tokens';
 import { useNavigate } from 'libs/routing';
-import { MyLocationGenerics } from 'components/trade/useTradeTokens';
 import { PathNames } from 'libs/routing';
 import { carbonEvents } from 'services/events';
 
@@ -13,7 +12,7 @@ type Props = {
 };
 
 export const MainMenuTradeSwitch: FC<Props> = ({ baseToken, quoteToken }) => {
-  const navigate = useNavigate<MyLocationGenerics>();
+  const navigate = useNavigate();
 
   const onClick = () => {
     navigate({

src/components/core/menu/mobileMenu/MobileMenu.tsx

@@ -1,12 +1,12 @@
-import { Link, useLocation } from 'libs/routing';
+import { Link, useRouterState } from 'libs/routing';
 import { isPathnameMatch } from 'utils/helpers';
 import { handleOnItemClick } from '../utils';
 import { ReactComponent as IconDots } from 'assets/icons/three-dots.svg';
 import { useModal } from 'hooks/useModal';
 import { menuItems } from 'components/core/menu/menuItems';
 
 export const MobileMenu = () => {
-  const location = useLocation();
+  const { location } = useRouterState();
   const { openModal } = useModal();
 
   return (
@@ -17,7 +17,7 @@ export const MobileMenu = () => {
           onClick={() => handleOnItemClick(href)}
           to={href}
           className={`px-3 py-3 ${
-            isPathnameMatch(location.current.pathname, href, hrefMatches)
+            isPathnameMatch(location.pathname, href, hrefMatches)
               ? 'text-white'
               : 'hover:text-white'
           }`}

src/components/explorer/ExplorerTabs.tsx

@@ -1,6 +1,5 @@
 import { useExplorerParams } from './useExplorerParams';
-import { useLocation } from '@tanstack/react-location';
-import { PathNames } from 'libs/routing';
+import { PathNames, useRouterState } from 'libs/routing';
 import {
   StrategyPageTabs,
   StrategyTab,
@@ -15,7 +14,8 @@ export const ExplorerTabs = () => {
   const { slug, type } = useExplorerParams();
 
   // To support emojis in ens domains
-  const pathname = decodeURIComponent(useLocation().current.pathname);
+  const { location } = useRouterState();
+  const pathname = decodeURIComponent(location.pathname);
 
   const tabs: StrategyTab[] = [
     {

src/components/explorer/index.ts

@@ -3,4 +3,3 @@ export { useExplorerParams } from './useExplorerParams';
 export { ExplorerSearch } from './ExplorerSearch';
 export { ExplorerEmpty } from './ExplorerEmpty';
 export { ExplorerEmptyError } from './ExplorerEmptyError';
-export type { ExplorerRouteGenerics } from './utils';

src/components/explorer/useExplorerParams.ts

@@ -1,8 +1,8 @@
-import { useMatch } from '@tanstack/react-location';
-import { ExplorerRouteGenerics } from './utils';
+import { useParams } from 'libs/routing';
+import { ExplorerParams } from './utils';
 
 export const useExplorerParams = () => {
-  const { params } = useMatch<ExplorerRouteGenerics>();
+  const params: ExplorerParams = useParams({ strict: false });
 
   // To support emojis in ens domains
   const decodedSlug = params.slug && decodeURIComponent(params.slug);

src/components/explorer/utils.ts

@@ -1,11 +1,7 @@
-import { MakeGenerics } from 'libs/routing';
-
 export type ExplorerType = 'wallet' | 'token-pair';
 
-export type ExplorerRouteGenerics = MakeGenerics<{
-  Params: {
-    type: ExplorerType;
-    slug?: string;
-    address?: string;
-  };
-}>;
+export type ExplorerParams = {
+  type: ExplorerType;
+  slug?: string;
+  address?: string;
+};

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

@@ -6,7 +6,6 @@ import { UseQueryResult } from 'libs/queries';
 import { LimitRangeSection } from './LimitRangeSection';
 import { LogoImager } from 'components/common/imager/Imager';
 import {
-  StrategyCreateLocationGenerics,
   StrategyDirection,
   StrategyType,
 } from 'components/strategies/create/types';
@@ -41,19 +40,15 @@ export const BuySellBlock: FC<Props> = ({
   isOrdersOverlap,
 }) => {
   const titleId = useId();
-  const navigate = useNavigate<StrategyCreateLocationGenerics>();
+  const navigate = useNavigate();
 
   const tooltipText = `This section will define the order details in which you are willing to ${
     buy ? 'buy' : 'sell'
   } ${base.symbol} at.`;
 
   const inputTitle = (
     <>
-      <span
-        className={
-          'flex h-16 w-16 items-center justify-center rounded-full bg-white/10 text-[10px] text-white/60'
-        }
-      >
+      <span className="flex h-16 w-16 items-center justify-center rounded-full bg-white/10 text-[10px] text-white/60">
         1
       </span>
       <Tooltip
@@ -129,15 +124,11 @@ export const BuySellBlock: FC<Props> = ({
       )}
 
       <BuySellHeader {...headerProps}>
-        <h3 className={'flex items-center gap-8'} id={titleId}>
+        <h3 className="flex items-center gap-8" id={titleId}>
           <Tooltip sendEventOnMount={{ buy }} element={tooltipText}>
             <span>{buy ? 'Buy Low' : 'Sell High'}</span>
           </Tooltip>
-          <LogoImager
-            alt={'Token'}
-            src={base.logoURI}
-            className={'h-18 w-18'}
-          />
+          <LogoImager alt="Token" src={base.logoURI} className="h-18 w-18" />
           <span>{base.symbol}</span>
         </h3>
       </BuySellHeader>

src/components/strategies/create/BuySellBlock/useStrategyEvents.ts

@@ -9,7 +9,7 @@ import {
   StrategySellEventType,
 } from 'services/events/types';
 import { sanitizeNumberInput } from 'utils/helpers';
-import { StrategyCreateLocationGenerics } from '../types';
+import { StrategyCreateSearch } from '../types';
 import { OrderCreate } from '../useOrder';
 import { useSearch } from 'libs/routing';
 
@@ -29,7 +29,7 @@ export const useStrategyEvents = ({
   const budgetToken = buy ? quote : base;
   const { getFiatValue } = useFiatCurrency(budgetToken);
   const fiatValueUsd = getFiatValue(order.budget, true).toString();
-  const search = useSearch<StrategyCreateLocationGenerics>();
+  const search: StrategyCreateSearch = useSearch({ strict: false });
 
   const getStrategyEventData = (): (
     | StrategySellEventType

src/components/strategies/create/CreateStrategyCTA.tsx

@@ -1,5 +1,5 @@
 import { Button } from 'components/common/button';
-import { Link, PathNames, useLocation } from 'libs/routing';
+import { Link, PathNames, useRouterState } from 'libs/routing';
 import { carbonEvents } from 'services/events';
 import { ReactComponent as IconPlus } from 'assets/icons/plus.svg';
 import { isPathnameMatch } from 'utils/helpers';
@@ -19,9 +19,7 @@ export const CreateStrategyCTA = () => {
 };
 
 export const CreateStrategyCTAMobile = () => {
-  const {
-    current: { pathname },
-  } = useLocation();
+  const { pathname } = useRouterState().location;
 
   const showCTA = isPathnameMatch(pathname, '/', [
     PathNames.strategies,

src/components/strategies/create/CreateStrategyHeader.tsx

@@ -1,7 +1,7 @@
 import { useMemo } from 'react';
 import { carbonEvents } from 'services/events';
-import { useLocation } from 'libs/routing';
 import { m } from 'libs/motion';
+import { useRouter } from 'libs/routing';
 import { items } from 'components/strategies/create/variants';
 import { UseStrategyCreateReturn } from 'components/strategies/create';
 import { ForwardArrow } from 'components/common/forwardArrow';
@@ -14,10 +14,7 @@ export const CreateStrategyHeader = ({
   setShowGraph,
   strategyDirection,
 }: UseStrategyCreateReturn) => {
-  const {
-    history: { back },
-  } = useLocation();
-
+  const { history } = useRouter();
   const title = useMemo(() => {
     if (!showOrders) {
       return 'Create Strategy';
@@ -40,7 +37,7 @@ export const CreateStrategyHeader = ({
       )}
     >
       <button
-        onClick={() => back()}
+        onClick={() => history.back()}
         className="grid h-40 w-40 place-items-center rounded-full bg-emphasis"
       >
         <ForwardArrow className="h-18 w-18 rotate-180" />

src/components/strategies/create/CreateStrategyOrders.tsx

@@ -11,7 +11,6 @@ import useInitEffect from 'hooks/useInitEffect';
 import { useWeb3 } from 'libs/web3';
 import { getStatusTextByTxStatus } from '../utils';
 import { useModal } from 'hooks/useModal';
-import { StrategyCreateLocationGenerics } from 'components/strategies/create/types';
 import { lsService } from 'services/localeStorage';
 import { ReactComponent as IconWarning } from 'assets/icons/warning.svg';
 import { useNavigate } from 'libs/routing';
@@ -38,7 +37,7 @@ export const CreateStrategyOrders = ({
 }: UseStrategyCreateReturn) => {
   const { user } = useWeb3();
   const { openModal } = useModal();
-  const navigate = useNavigate<StrategyCreateLocationGenerics>();
+  const navigate = useNavigate();
   const strategyEventData = useStrategyEventData({
     base,
     quote,

src/components/strategies/create/types.ts

@@ -1,4 +1,3 @@
-import { MakeGenerics, useNavigate } from 'libs/routing';
 import { OrderCreate } from 'components/strategies/create/useOrder';
 import { QueryClient, UseMutationResult } from '@tanstack/react-query';
 import { TransactionResponse } from '@ethersproject/providers';
@@ -8,20 +7,19 @@ import { UseStrategyCreateReturn } from 'components/strategies/create';
 import { StrategyEventType } from 'services/events/types';
 import { Dispatch, SetStateAction } from 'react';
 import { MarketPricePercentage } from 'components/strategies/marketPriceIndication/useMarketIndication';
+import { NavigateOptions } from '@tanstack/react-router';
 
 export type StrategyType = 'recurring' | 'disposable';
 export type StrategyDirection = 'buy' | 'sell';
 export type StrategySettings = 'limit' | 'range' | 'custom';
 
-export type StrategyCreateLocationGenerics = MakeGenerics<{
-  Search: {
-    base?: string;
-    quote?: string;
-    strategyType?: StrategyType;
-    strategyDirection?: StrategyDirection;
-    strategySettings?: StrategySettings;
-  };
-}>;
+export interface StrategyCreateSearch {
+  base?: string;
+  quote?: string;
+  strategyType?: StrategyType;
+  strategyDirection?: StrategyDirection;
+  strategySettings?: StrategySettings;
+}
 
 export type OrderWithSetters = {
   setIsRange: (value: ((prevState: boolean) => boolean) | boolean) => void;
@@ -44,7 +42,7 @@ export type CreateStrategyActionProps = Pick<
     unknown
   >;
   dispatchNotification: DispatchNotification;
-  navigate: ReturnType<typeof useNavigate<StrategyCreateLocationGenerics>>;
+  navigate: (opts: NavigateOptions) => Promise<void>;
   setIsProcessing: Dispatch<SetStateAction<boolean>>;
   strategyEventData: StrategyEventType & {
     buyMarketPricePercentage: MarketPricePercentage;

src/components/strategies/create/useCreateStrategy.ts

@@ -15,7 +15,7 @@ import { carbonEvents } from 'services/events';
 import { useStrategyEventData } from './useStrategyEventData';
 import { useTokens } from 'hooks/useTokens';
 import { pairsToExchangeMapping } from 'components/tradingviewChart/utils';
-import { StrategyCreateLocationGenerics } from 'components/strategies/create/types';
+import { StrategyCreateSearch } from 'components/strategies/create/types';
 import {
   handleStrategyDirection,
   handleStrategySettings,
@@ -32,7 +32,7 @@ export type UseStrategyCreateReturn = ReturnType<typeof useCreateStrategy>;
 export const useCreateStrategy = () => {
   const { templateStrategy } = useDuplicateStrategy();
   const cache = useQueryClient();
-  const navigate = useNavigate<StrategyCreateLocationGenerics>();
+  const navigate = useNavigate();
   const { user, provider } = useWeb3();
   const { openModal } = useModal();
   const [base, setBase] = useState<Token | undefined>(templateStrategy?.base);
@@ -67,11 +67,11 @@ export const useCreateStrategy = () => {
 
   const mutation = useCreateStrategyQuery();
 
-  const search = useSearch<StrategyCreateLocationGenerics>();
+  const search: StrategyCreateSearch = useSearch({ strict: false });
   const [selectedStrategySettings, setSelectedStrategySettings] = useState<
     | {
         to: string;
-        search: StrategyCreateLocationGenerics['Search'];
+        search: StrategyCreateSearch;
       }
     | undefined
   >();