refactor react-router 4

package.json

@@ -83,7 +83,7 @@
     "tailwind-merge": "^1.13.2",
     "tailwindcss": "3.1.8",
     "typechain": "^8.1.0",
-    "typescript": "^4.4.2",
+    "typescript": "^5.3.3",
     "ua-parser-js": "^1.0.35",
     "use-async-effect": "^2.2.7",
     "vite": "5.0.5",

src/components/core/menu/mainMenu/MainMenuRightBurger/useBurgerMenuItems.tsx

@@ -1,6 +1,5 @@
 import { ReactElement, useMemo } from 'react';
-import { Link, PathNames } from 'libs/routing';
-import { externalLinks } from 'libs/routing';
+import { Link, PathNames, externalLinks } from 'libs/routing';
 import { useFiatCurrency } from 'hooks/useFiatCurrency';
 import { MenuItemActions } from './useMenuContext';
 import { ReactComponent as IconX } from 'assets/logos/x.svg';

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

@@ -1,7 +1,7 @@
 import { Tooltip } from 'components/common/tooltip/Tooltip';
 import { Token } from 'libs/tokens';
 import { FC, useEffect, useId } from 'react';
-import { StrategyType } from '../types';
+import { StrategyType } from 'libs/routing/routes/strategyCreateEdit';
 import { TokenInputField } from 'components/common/TokenInputField/TokenInputField';
 import { OrderCreate } from '../useOrder';
 import { UseQueryResult } from '@tanstack/react-query';

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

@@ -9,7 +9,7 @@ import { LogoImager } from 'components/common/imager/Imager';
 import {
   StrategyDirection,
   StrategyType,
-} from 'components/strategies/create/types';
+} from 'libs/routing/routes/strategyCreateEdit';
 import { TabsMenu } from 'components/common/tabs/TabsMenu';
 import { TabsMenuButton } from 'components/common/tabs/TabsMenuButton';
 import { FullOutcome } from 'components/strategies/FullOutcome';

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

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

src/components/strategies/create/CreateStrategyTypeMenu.tsx

@@ -18,7 +18,7 @@ import { ReactComponent as IconCheck } from 'assets/icons/check.svg';
 import { cn } from 'utils/helpers';
 import styles from './CreateStrategyTypeMenu.module.css';
 import { useBreakpoints } from 'hooks/useBreakpoints';
-import { StrategyCreateSearch } from './types';
+import { StrategyCreateSearch } from 'libs/routing/routes/strategyCreateEdit';
 
 export const CreateStrategyTypeMenu: FC<UseStrategyCreateReturn> = ({
   base,

src/components/strategies/create/types.ts

@@ -9,20 +9,6 @@ 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 LimitRange = 'limit' | 'range';
-export type StrategySettings = LimitRange | 'overlapping';
-
-export interface StrategyCreateSearch {
-  base?: string;
-  quote?: string;
-  strategyType?: StrategyType;
-  strategyDirection?: StrategyDirection;
-  strategySettings?: StrategySettings;
-}
-
 export type OrderWithSetters = {
   setIsRange: (value: ((prevState: boolean) => boolean) | boolean) => void;
   setPrice: (value: ((prevState: string) => string) | string) => void;

src/components/strategies/create/useCreateStrategy.tsx

@@ -4,7 +4,7 @@ import { useCreateStrategyQuery } from 'libs/queries';
 import { useModal } from 'hooks/useModal';
 import { ModalTokenListData } from 'libs/modals/modals/ModalTokenList';
 import { useApproval } from 'hooks/useApproval';
-import { PathNames, useNavigate, useSearch } from 'libs/routing';
+import { useNavigate, useSearch } from 'libs/routing';
 import { Token } from 'libs/tokens';
 import { config } from 'services/web3/config';
 import { useGetTokenBalance, useQueryClient } from 'libs/queries';
@@ -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 { StrategyCreateSearch } from 'components/strategies/create/types';
+import { StrategyCreateSearch } from 'libs/routing/routes/strategyCreateEdit';
 import {
   handleStrategyDirection,
   handleStrategySettings,
@@ -82,7 +82,7 @@ export const useCreateStrategy = () => {
 
   const mutation = useCreateStrategyQuery();
 
-  const search: StrategyCreateSearch = useSearch({ strict: false });
+  const search = useSearch({ from: '/strategies/create' });
   const {
     base: baseAddress,
     quote: quoteAddress,
@@ -235,8 +235,8 @@ export const useCreateStrategy = () => {
       }
 
       navigate({
-        to: PathNames.createStrategy,
-        search: (search: StrategyCreateSearch) => ({
+        to: '/strategies/create',
+        search: (search) => ({
           ...search,
           base: b,
           quote: q,

src/components/strategies/create/useCreateStrategyTypeMenu.tsx

@@ -1,6 +1,6 @@
 import { ReactNode, useMemo } from 'react';
 import { PathNames, useNavigate } from 'libs/routing';
-import { StrategyCreateSearch } from 'components/strategies/create/types';
+import { StrategyCreateSearch } from 'libs/routing/routes/strategyCreateEdit';
 import { ReactComponent as IconBuyRange } from 'assets/icons/buy-range.svg';
 import { ReactComponent as IconBuyLimit } from 'assets/icons/buy-limit.svg';
 import { ReactComponent as IconTwoRanges } from 'assets/icons/two-ranges.svg';
@@ -160,7 +160,7 @@ export const useCreateStrategyTypeMenu = (base: string, quote: string) => {
     search: StrategyCreateSearch,
     replace?: boolean
   ) => {
-    navigate({ to, search, replace });
+    navigate({ to, search, replace, params: {} });
   };
 
   return { items, handleClick };

src/components/strategies/create/useDuplicateStrategy.ts

@@ -1,11 +1,7 @@
-import { PathNames, useNavigate, useSearch } from 'libs/routing';
+import { useNavigate, useSearch } from 'libs/routing';
 import { Strategy } from 'libs/queries';
 import { isOverlappingStrategy } from '../overlapping/utils';
-import { StrategyCreateSearch } from './types';
-
-interface MyLocationSearch {
-  strategy: string;
-}
+import { StrategyCreateSearch } from 'libs/routing/routes/strategyCreateEdit';
 
 const isValid = (strategy: Strategy) => {
   return (
@@ -55,14 +51,14 @@ const decodeStrategyAndValidate = (
 
 export const useDuplicateStrategy = () => {
   const navigate = useNavigate();
-  const search: MyLocationSearch = useSearch({ strict: false });
+  const search: StrategyCreateSearch = useSearch({ strict: false });
   const { strategy: urlStrategy } = search;
 
   const duplicate = (strategy: Partial<Strategy>) => {
     const encodedStrategy = btoa(JSON.stringify(strategy));
 
     navigate({
-      to: `${PathNames.createStrategy}`,
+      to: '/strategies/create',
       search: {
         ...search,
         strategy: encodedStrategy,

src/components/strategies/create/useStrategyEventData.ts

@@ -4,7 +4,7 @@ import { StrategyEventType } from 'services/events/types';
 import { sanitizeNumber } from 'utils/helpers';
 import { OrderCreate } from './useOrder';
 import { useSearch } from 'libs/routing';
-import { StrategyCreateSearch } from './types';
+import { StrategyCreateSearch } from 'libs/routing/routes/strategyCreateEdit';
 
 export const useStrategyEventData = ({
   base,

src/components/strategies/create/utils.ts

@@ -1,10 +1,10 @@
 import {
   CreateStrategyActionProps,
   OrderWithSetters,
-  StrategySettings,
 } from 'components/strategies/create/types';
 import { QueryKey } from 'libs/queries';
 import { OrderCreate } from 'components/strategies/create/useOrder';
+import { StrategySettings } from 'libs/routing/routes/strategyCreateEdit';
 import { carbonEvents } from 'services/events';
 import { Dispatch, SetStateAction } from 'react';
 import { ONE_AND_A_HALF_SECONDS_IN_MS } from 'utils/time';
@@ -89,7 +89,7 @@ export const createStrategyAction = async ({
         void cache.invalidateQueries({
           queryKey: QueryKey.balance(user, quote.address),
         });
-        navigate({ to: '/', params: {} });
+        navigate({ to: '/', search: {}, params: {} });
         carbonEvents.strategy.strategyCreate(strategyEventData);
       },
       onError: (e: any) => {
@@ -115,7 +115,7 @@ export const handleTxStatusAndRedirectToOverview = (
 ) => {
   setIsProcessing(true);
   setTimeout(() => {
-    navigate?.({ to: '/', params: {} });
+    navigate?.({ to: '/', params: {}, search: {} });
     setIsProcessing(false);
   }, ONE_AND_A_HALF_SECONDS_IN_MS);
 };

src/components/strategies/edit/EditStrategyAllocatedBudget.tsx

@@ -4,7 +4,7 @@ import { Token } from 'libs/tokens';
 import { Tooltip } from 'components/common/tooltip/Tooltip';
 import { Switch } from 'components/common/switch';
 import { OrderCreate } from 'components/strategies/create/useOrder';
-import { EditTypes } from './EditStrategyMain';
+import { EditTypes } from 'libs/routing/routes/strategyCreateEdit';
 import { ReactComponent as IconDistributedEntireRange } from 'assets/distributedEntireRange.svg';
 import { ReactComponent as IconDistributedUnusedRange } from 'assets/distributedUnusedRange.svg';
 import { TooltipTokenAmount } from './tooltip/TooltipTokenAmount';

src/components/strategies/edit/EditStrategyHeader.tsx

@@ -1,5 +1,5 @@
 import { carbonEvents } from 'services/events';
-import { EditTypes } from './EditStrategyMain';
+import { EditTypes } from 'libs/routing/routes/strategyCreateEdit';
 import { useRouter } from 'libs/routing';
 import { ForwardArrow } from 'components/common/forwardArrow';
 import { ReactComponent as IconCandles } from 'assets/icons/candles.svg';

src/components/strategies/edit/EditStrategyLayout.tsx

@@ -1,4 +1,4 @@
-import { EditTypes } from './EditStrategyMain';
+import { EditTypes } from 'libs/routing/routes/strategyCreateEdit';
 import { CreateStrategyGraph } from '../create/CreateStrategyGraph';
 import { EditStrategyBudgetContent } from './EditStrategyBudgetContent';
 import { EditStrategyPricesContent } from './EditStrategyPricesContent';

src/components/strategies/edit/EditStrategyMain.tsx

@@ -1,3 +1,4 @@
+import { EditStratgySearch } from 'libs/routing/routes/strategyCreateEdit';
 import { FC, useState } from 'react';
 import { m } from 'libs/motion';
 import { EditStrategyHeader } from './EditStrategyHeader';
@@ -7,12 +8,6 @@ import { Strategy } from 'libs/queries';
 import { useSearch } from 'libs/routing';
 import { CarbonLogoLoading } from 'components/common/CarbonLogoLoading';
 
-export type EditTypes = 'renew' | 'editPrices' | 'deposit' | 'withdraw';
-
-export interface EditStratgySearch {
-  type: EditTypes;
-}
-
 interface Props {
   strategy?: Strategy;
   isLoading: boolean;

src/components/strategies/edit/EditStrategyPricesBuySellBlock.tsx

@@ -2,7 +2,7 @@ import { FC, useId } from 'react';
 import { Token } from 'libs/tokens';
 import { LimitRangeSection } from 'components/strategies/create/BuySellBlock/LimitRangeSection';
 import { OrderCreate } from 'components/strategies/create/useOrder';
-import { EditTypes } from './EditStrategyMain';
+import { EditTypes } from 'libs/routing/routes/strategyCreateEdit';
 import { EditStrategyAllocatedBudget } from './EditStrategyAllocatedBudget';
 import { FullOutcome } from '../FullOutcome';
 import { BuySellHeader } from '../create/BuySellBlock/Header';

src/components/strategies/overview/strategyBlock/StrategyBlockManage.tsx

@@ -3,7 +3,7 @@ import { SafeDecimal } from 'libs/safedecimal';
 import { FC } from 'react';
 import { useModal } from 'hooks/useModal';
 import { Strategy } from 'libs/queries';
-import { PathNames, useNavigate, useParams } from 'libs/routing';
+import { useNavigate, useParams } from 'libs/routing';
 import { useDuplicateStrategy } from 'components/strategies/create/useDuplicateStrategy';
 import { DropdownMenu } from 'components/common/dropdownMenu';
 import { Tooltip } from 'components/common/tooltip/Tooltip';
@@ -21,7 +21,6 @@ import { cn } from 'utils/helpers';
 import { explorerEvents } from 'services/events/explorerEvents';
 import { useStrategyCtx } from 'hooks/useStrategies';
 import { strategyEditEvents } from 'services/events/strategyEditEvents';
-import { ExplorerParams } from 'components/explorer/utils';
 
 type itemsType = {
   id: StrategyEditOptionId;
@@ -51,7 +50,7 @@ export const StrategyBlockManage: FC<Props> = ({
   const navigate = useNavigate();
   const order0 = useOrder(strategy.order0);
   const order1 = useOrder(strategy.order1);
-  const { type, slug }: ExplorerParams = useParams({ strict: false });
+  const { type, slug } = useParams({ from: '/explorer/$type/$slug' });
 
   const owner = useGetVoucherOwner(
     manage && type === 'token-pair' ? strategy.id : undefined
@@ -105,7 +104,8 @@ export const StrategyBlockManage: FC<Props> = ({
         const event = { type, slug, strategyEvent, strategies, sort, filter };
         explorerEvents.viewOwnersStrategiesClick(event);
         navigate({
-          to: PathNames.explorerOverview('wallet', owner.data ?? ''),
+          to: '/explorer/$type/$slug',
+          params: { type: 'wallet', slug: owner.data ?? '' },
         });
       },
       disabled: !owner.data,
@@ -123,7 +123,7 @@ export const StrategyBlockManage: FC<Props> = ({
             ...strategyEvent,
           });
           navigate({
-            to: PathNames.editStrategy,
+            to: '/strategies/edit/$strategyId',
             params: { strategyId: strategy.id },
             search: { type: 'editPrices' },
           });
@@ -145,7 +145,7 @@ export const StrategyBlockManage: FC<Props> = ({
         action: () => {
           carbonEvents.strategyEdit.strategyDepositClick(strategyEvent);
           navigate({
-            to: PathNames.editStrategy,
+            to: '/strategies/edit/$strategyId',
             params: { strategyId: strategy.id },
             search: { type: 'deposit' },
           });
@@ -162,7 +162,7 @@ export const StrategyBlockManage: FC<Props> = ({
 
           if (isOverlapping) {
             navigate({
-              to: PathNames.editStrategy,
+              to: '/strategies/edit/$strategyId',
               params: { strategyId: strategy.id },
               search: { type: 'withdraw' },
             });
@@ -194,7 +194,7 @@ export const StrategyBlockManage: FC<Props> = ({
         action: () => {
           carbonEvents.strategyEdit.strategyRenewClick(strategyEvent);
           navigate({
-            to: PathNames.editStrategy,
+            to: '/strategies/edit/$strategyId',
             params: { strategyId: strategy.id },
             search: { type: 'renew' },
           });

src/components/trade/useTradePairs.ts

@@ -1,4 +1,4 @@
-import { PathNames, useSearch, useNavigate } from 'libs/routing';
+import { useSearch, useNavigate } from 'libs/routing';
 import { TradePair } from 'libs/modals/modals/ModalTradeTokenList';
 import { useModal } from 'hooks/useModal';
 import { useCallback, useEffect, useMemo, useState } from 'react';
@@ -19,7 +19,7 @@ export const useTradePairs = () => {
 
   const onTradePairSelect = (tradePair: TradePair) => {
     navigate({
-      to: PathNames.trade,
+      to: '/trade',
       search: {
         base: tradePair.baseToken.address,
         quote: tradePair.quoteToken.address,

src/libs/routing/routes/explorer.ts

@@ -1,4 +1,5 @@
 import { redirect, Route } from '@tanstack/react-router';
+import { ExplorerType } from 'components/explorer/utils';
 import { rootRoot } from 'libs/routing/routes/root';
 import { ExplorerPage } from 'pages/explorer';
 import { ExplorerTypePage } from 'pages/explorer/type';
@@ -22,6 +23,9 @@ export const explorerRedirect = new Route({
 export const explorerPage = new Route({
   getParentRoute: () => explorerLayout,
   path: '$type',
+  parseParams: (params: Record<string, string>) => {
+    return { type: params.type as ExplorerType };
+  },
   component: ExplorerPage,
 });