@rango-dev/widget-embedded 0.17.1-next.11 → 0.17.1-next.13

package/dist/pages/ConfirmSwapPage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ConfirmSwapPage.d.ts","sourceRoot":"","sources":["../../src/pages/ConfirmSwapPage.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAkDnD,wBAAgB,eAAe,sBAuR9B"}
+{"version":3,"file":"ConfirmSwapPage.d.ts","sourceRoot":"","sources":["../../src/pages/ConfirmSwapPage.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAkDnD,wBAAgB,eAAe,sBAwR9B"}

package/dist/pages/HistoryPage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"HistoryPage.d.ts","sourceRoot":"","sources":["../../src/pages/HistoryPage.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAmB,MAAM,OAAO,CAAC;AA4CxC,wBAAgB,WAAW,sBAsE1B"}
+{"version":3,"file":"HistoryPage.d.ts","sourceRoot":"","sources":["../../src/pages/HistoryPage.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAmB,MAAM,OAAO,CAAC;AA0CxC,wBAAgB,WAAW,sBAoE1B"}

package/dist/pages/Home.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Home.d.ts","sourceRoot":"","sources":["../../src/pages/Home.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAqD3D,wBAAgB,IAAI,sBAmPnB"}
+{"version":3,"file":"Home.d.ts","sourceRoot":"","sources":["../../src/pages/Home.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAqD3D,wBAAgB,IAAI,sBAsPnB"}

package/dist/pages/LanguagePage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LanguagePage.d.ts","sourceRoot":"","sources":["../../src/pages/LanguagePage.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,wBAAgB,YAAY,sBA2C3B"}
+{"version":3,"file":"LanguagePage.d.ts","sourceRoot":"","sources":["../../src/pages/LanguagePage.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,wBAAgB,YAAY,sBAwC3B"}

package/dist/pages/LiquiditySourcePage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LiquiditySourcePage.d.ts","sourceRoot":"","sources":["../../src/pages/LiquiditySourcePage.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAkBxC,UAAU,SAAS;IACjB,UAAU,EAAE,WAAW,GAAG,SAAS,CAAC;CACrC;AAED,wBAAgB,mBAAmB,CAAC,EAAE,UAAU,EAAE,EAAE,SAAS,qBAsH5D"}
+{"version":3,"file":"LiquiditySourcePage.d.ts","sourceRoot":"","sources":["../../src/pages/LiquiditySourcePage.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAgBxC,UAAU,SAAS;IACjB,UAAU,EAAE,WAAW,GAAG,SAAS,CAAC;CACrC;AAED,wBAAgB,mBAAmB,CAAC,EAAE,UAAU,EAAE,EAAE,SAAS,qBAoH5D"}

package/dist/pages/SelectBlockchainPage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectBlockchainPage.d.ts","sourceRoot":"","sources":["../../src/pages/SelectBlockchainPage.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAUxC,UAAU,SAAS;IACjB,IAAI,EAAE,QAAQ,GAAG,aAAa,CAAC;CAChC;AAED,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,SAAS,qBA0DpD"}
+{"version":3,"file":"SelectBlockchainPage.d.ts","sourceRoot":"","sources":["../../src/pages/SelectBlockchainPage.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAmB,MAAM,OAAO,CAAC;AASxC,UAAU,SAAS;IACjB,IAAI,EAAE,QAAQ,GAAG,aAAa,CAAC;CAChC;AAED,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,SAAS,qBAqDpD"}

package/dist/pages/SelectSwapItemsPage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SelectSwapItemsPage.d.ts","sourceRoot":"","sources":["../../src/pages/SelectSwapItemsPage.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAcxC,UAAU,SAAS;IACjB,IAAI,EAAE,QAAQ,GAAG,aAAa,CAAC;CAChC;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,SAAS,qBA4GnD"}
+{"version":3,"file":"SelectSwapItemsPage.d.ts","sourceRoot":"","sources":["../../src/pages/SelectSwapItemsPage.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAcxC,UAAU,SAAS;IACjB,IAAI,EAAE,QAAQ,GAAG,aAAa,CAAC;CAChC;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,SAAS,qBA8FnD"}

package/dist/pages/SettingsPage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SettingsPage.d.ts","sourceRoot":"","sources":["../../src/pages/SettingsPage.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,MAAM,OAAO,CAAC;AAc1B,wBAAgB,YAAY,sBAiK3B"}
+{"version":3,"file":"SettingsPage.d.ts","sourceRoot":"","sources":["../../src/pages/SettingsPage.tsx"],"names":[],"mappings":"AAYA,OAAO,KAAK,MAAM,OAAO,CAAC;AAa1B,wBAAgB,YAAY,sBA+J3B"}

package/dist/pages/SwapDetailsPage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SwapDetailsPage.d.ts","sourceRoot":"","sources":["../../src/pages/SwapDetailsPage.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAU1B,wBAAgB,eAAe,sBAoD9B"}
+{"version":3,"file":"SwapDetailsPage.d.ts","sourceRoot":"","sources":["../../src/pages/SwapDetailsPage.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,wBAAgB,eAAe,sBAoD9B"}

package/dist/pages/ThemePage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThemePage.d.ts","sourceRoot":"","sources":["../../src/pages/ThemePage.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,MAAM,OAAO,CAAC;AAgB1B,wBAAgB,SAAS,sBAoExB"}
+{"version":3,"file":"ThemePage.d.ts","sourceRoot":"","sources":["../../src/pages/ThemePage.tsx"],"names":[],"mappings":"AAWA,OAAO,KAAK,MAAM,OAAO,CAAC;AAc1B,wBAAgB,SAAS,sBAkExB"}

package/dist/pages/WalletsPage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"WalletsPage.d.ts","sourceRoot":"","sources":["../../src/pages/WalletsPage.tsx"],"names":[],"mappings":"AAIA,OAAO,KAA6B,MAAM,OAAO,CAAC;AAuBlD,eAAO,MAAM,mBAAmB,OAAQ,CAAC;AACzC,eAAO,MAAM,oBAAoB,MAAM,CAAC;AAExC,wBAAgB,WAAW,sBAqE1B"}
+{"version":3,"file":"WalletsPage.d.ts","sourceRoot":"","sources":["../../src/pages/WalletsPage.tsx"],"names":[],"mappings":"AAIA,OAAO,KAA6B,MAAM,OAAO,CAAC;AAqBlD,eAAO,MAAM,mBAAmB,OAAQ,CAAC;AACzC,eAAO,MAAM,oBAAoB,MAAM,CAAC;AAExC,wBAAgB,WAAW,sBAmE1B"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rango-dev/widget-embedded",
-  "version": "0.17.1-next.11",
+  "version": "0.17.1-next.13",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.js",
@@ -19,7 +19,7 @@
   "dependencies": {
     "@lingui/core": "4.2.1",
     "@lingui/react": "4.2.1",
-    "@rango-dev/provider-all": "^0.22.1-next.4",
+    "@rango-dev/provider-all": "^0.22.1-next.5",
     "@rango-dev/queue-manager-core": "^0.22.1-next.0",
     "@rango-dev/queue-manager-rango-preset": "^0.22.1-next.5",
     "@rango-dev/queue-manager-react": "^0.22.1-next.0",

package/src/components/AppRoutes.tsx

@@ -14,8 +14,6 @@ import { SwapDetailsPage } from '../pages/SwapDetailsPage';
 import { ThemePage } from '../pages/ThemePage';
 import { WalletsPage } from '../pages/WalletsPage';
 
-const getAbsolutePath = (path: string) => path.replace('/', '');
-
 export function AppRoutes() {
   return useRoutes([
     {
@@ -24,51 +22,74 @@ export function AppRoutes() {
     },
     {
       path: navigationRoutes.fromSwap,
-      element: <SelectSwapItemsPage type="source" />,
+      children: [
+        {
+          index: true,
+          element: <SelectSwapItemsPage type="source" />,
+        },
+        {
+          path: navigationRoutes.blockchains,
+          element: <SelectBlockchainPage type="source" />,
+        },
+      ],
     },
     {
       path: navigationRoutes.toSwap,
-      element: <SelectSwapItemsPage type="destination" />,
-    },
-    {
-      path: navigationRoutes.fromBlockchain,
-      element: <SelectBlockchainPage type="source" />,
-    },
-    {
-      path: navigationRoutes.toBlockchain,
-      element: <SelectBlockchainPage type="destination" />,
+      children: [
+        {
+          index: true,
+          element: <SelectSwapItemsPage type="destination" />,
+        },
+        {
+          path: navigationRoutes.blockchains,
+          element: <SelectBlockchainPage type="destination" />,
+        },
+      ],
     },
     {
       path: navigationRoutes.settings,
-      element: <SettingsPage />,
-    },
-    {
-      path: navigationRoutes.themes,
-      element: <ThemePage />,
-    },
-    {
-      path: navigationRoutes.languages,
-      element: <LanguagePage />,
-    },
-    {
-      path: navigationRoutes.exchanges,
-      element: <LiquiditySourcePage sourceType="Exchanges" />,
-    },
-    {
-      path: navigationRoutes.bridges,
-      element: <LiquiditySourcePage sourceType="Bridges" />,
+      children: [
+        {
+          index: true,
+          element: <SettingsPage />,
+        },
+        {
+          path: navigationRoutes.themes,
+          element: <ThemePage />,
+        },
+        {
+          path: navigationRoutes.languages,
+          element: <LanguagePage />,
+        },
+        {
+          path: navigationRoutes.exchanges,
+          element: <LiquiditySourcePage sourceType="Exchanges" />,
+        },
+        {
+          path: navigationRoutes.bridges,
+          element: <LiquiditySourcePage sourceType="Bridges" />,
+        },
+      ],
     },
-    { path: navigationRoutes.swaps, element: <HistoryPage /> },
     {
-      path: navigationRoutes.swapDetails,
-      element: <SwapDetailsPage />,
+      path: navigationRoutes.swaps,
+      children: [
+        {
+          index: true,
+          element: <HistoryPage />,
+        },
+        {
+          path: navigationRoutes.swapDetails,
+          element: <SwapDetailsPage />,
+        },
+      ],
     },
     {
       path: navigationRoutes.wallets,
       element: <WalletsPage />,
     },
     {
-      path: getAbsolutePath(navigationRoutes.confirmSwap),
+      path: navigationRoutes.confirmSwap,
       element: <ConfirmSwapPage />,
     },
   ]);

package/src/components/ConfirmWalletsModal/ConfirmWalletsModal.tsx

@@ -19,7 +19,6 @@ import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import { getQuoteErrorMessage } from '../../constants/errors';
-import { navigationRoutes } from '../../constants/navigationRoutes';
 import { getQuoteUpdateWarningMessage } from '../../constants/warnings';
 import { useAppStore } from '../../store/AppStore';
 import { useQuoteStore } from '../../store/quote';
@@ -244,7 +243,8 @@ export function ConfirmWalletsModal(props: PropTypes) {
       open={open}
       onClose={() => {
         if (!quoteWalletsConfirmed) {
-          navigate(navigationRoutes.home, { replace: true });
+          const home = '../';
+          navigate(home, { replace: true });
         }
         onClose();
       }}

package/src/components/Layout/Layout.tsx

@@ -3,9 +3,8 @@ import type { PropsWithChildren } from 'react';
 
 import { BottomLogo, Divider, Header } from '@rango-dev/ui';
 import React from 'react';
-import { useNavigate } from 'react-router-dom';
 
-import { navigationRoutes } from '../../constants/navigationRoutes';
+import { useNavigateBack } from '../../hooks/useNavigateBack';
 import { useUiStore } from '../../store/ui';
 import { useWalletsStore } from '../../store/wallets';
 import { getContainer } from '../../utils/common';
@@ -26,22 +25,26 @@ function LayoutComponent(props: PropsWithChildren<PropTypes>, ref: Ref) {
 
   const connectWalletsButtonDisabled =
     useUiStore.use.connectWalletsButtonDisabled();
-  const navigate = useNavigate();
+  const navigateBack = useNavigateBack();
 
   const onConnectWallet = () => {
-    if (!connectWalletsButtonDisabled) {
-      navigate('/' + navigationRoutes.wallets);
+    if (!connectWalletsButtonDisabled && header.onWallet) {
+      header.onWallet();
     }
   };
+
+  const showBackButton =
+    typeof header.hasBackButton === 'undefined' || header.hasBackButton;
+
   return (
     <Container ref={ref} fixedHeight={fixedHeight} id="swap-box">
       <Header
-        prefix={<>{header.onBack && <BackButton onClick={header.onBack} />}</>}
+        prefix={<>{showBackButton && <BackButton onClick={navigateBack} />}</>}
         title={header.title}
         suffix={
           <>
             {header.suffix}
-            {header.hasConnectWallet && (
+            {header.onWallet && (
               <WalletButton
                 container={getContainer()}
                 onClick={onConnectWallet}

package/src/components/Layout/Layout.types.ts

@@ -1,10 +1,10 @@
 export interface PropTypes {
   header: {
     title: string;
-    hasConnectWallet?: boolean;
+    onWallet?: () => void;
     hasSettings?: boolean;
     suffix?: React.ReactNode;
-    onBack?: () => void;
+    hasBackButton?: boolean;
     onCancel?: () => void;
   };
   hasLogo?: boolean;

package/src/components/NotificationContent/NotificationContent.tsx

@@ -34,7 +34,7 @@ export function NotificationContent() {
 
   const handleOnClick = (requestId: Notification['requestId']) => {
     setSelectedSwap(requestId);
-    navigate(`/swaps/${requestId}`);
+    navigate(`${requestId}`);
   };
 
   return (

package/src/components/QuoteWarningsAndErrors/SlippageWariningModal.tsx

@@ -33,7 +33,7 @@ export function SlippageWarningModal(props: PropsTypes) {
         <Button
           size="small"
           variant="ghost"
-          onClick={() => navigate('/' + navigationRoutes.settings)}>
+          onClick={() => navigate('../' + navigationRoutes.settings)}>
           <Typography variant="label" size="medium" color="$neutral900">
             {i18n.t('Change settings')}
           </Typography>

package/src/components/SwapDetails/SwapDetails.Placeholder.tsx

@@ -10,8 +10,6 @@ import {
 } from '@rango-dev/ui';
 import React from 'react';
 
-import { navigationRoutes } from '../../constants/navigationRoutes';
-import { useNavigateBack } from '../../hooks/useNavigateBack';
 import { SuffixContainer } from '../HeaderButtons/HeaderButtons.styles';
 import { Layout } from '../Layout';
 import { LoadingSwapDetails } from '../LoadingSwapDetails';
@@ -24,14 +22,12 @@ import {
 
 export function SwapDetailsPlaceholder(props: SwapDetailsPlaceholderPropTypes) {
   const { requestId, showSkeleton } = props;
-  const { navigateBackFrom } = useNavigateBack();
 
   return (
     <Layout
       noPadding
       header={{
         title: i18n.t('Swap and Bridge'),
-        onBack: () => navigateBackFrom(navigationRoutes.swapDetails),
         suffix: <SuffixContainer />,
       }}>
       {showSkeleton && (

package/src/components/SwapDetails/SwapDetails.tsx

@@ -22,7 +22,6 @@ import { useWallets } from '@rango-dev/wallets-react';
 import React, { useEffect, useRef, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 
-import { navigationRoutes } from '../../constants/navigationRoutes';
 import {
   GAS_FEE_MAX_DECIMALS,
   GAS_FEE_MIN_DECIMALS,
@@ -33,7 +32,6 @@ import {
   USD_VALUE_MAX_DECIMALS,
   USD_VALUE_MIN_DECIMALS,
 } from '../../constants/routing';
-import { useNavigateBack } from '../../hooks/useNavigateBack';
 import { useAppStore } from '../../store/AppStore';
 import { useNotificationStore } from '../../store/notification';
 import { useQuoteStore } from '../../store/quote';
@@ -68,7 +66,6 @@ export function SwapDetails(props: SwapDetailsProps) {
   const tokens = useAppStore().tokens();
   const retry = useQuoteStore.use.retry();
   const navigate = useNavigate();
-  const { navigateBackFrom } = useNavigateBack();
   const [_, handleCopy] = useCopyToClipboard(RESET_INTERVAL);
   const listRef = useRef<HTMLDivElement | null>(null);
   const [modalState, setModalState] = useState<ModalState>(null);
@@ -237,7 +234,6 @@ export function SwapDetails(props: SwapDetailsProps) {
       noPadding
       header={{
         title: i18n.t('Swap and Bridge'),
-        onBack: () => navigateBackFrom(navigationRoutes.swapDetails),
         onCancel:
           swap.status === 'running' ? () => setModalState('cancel') : undefined,
         suffix: swap.status !== 'running' && (
@@ -265,7 +261,8 @@ export function SwapDetails(props: SwapDetailsProps) {
             onClick={() => {
               retry(swap, { blockchains: blockchains, tokens: tokens });
               setTimeout(() => {
-                navigate(navigationRoutes.home);
+                const home = '../../';
+                navigate(home);
               }, 0);
             }}>
             {i18n.t('Try again')}

package/src/components/SwapDetailsModal/SwapDetailsCompleteModal.tsx

@@ -12,8 +12,6 @@ import {
 import React from 'react';
 import { useNavigate } from 'react-router-dom';
 
-import { navigationRoutes } from '../../constants/navigationRoutes';
-
 export function SwapDetailsCompleteModal(props: CompleteModalPropTypes) {
   const {
     open,
@@ -70,7 +68,10 @@ export function SwapDetailsCompleteModal(props: CompleteModalPropTypes) {
           variant="contained"
           type="primary"
           size="large"
-          onClick={() => navigate(navigationRoutes.home)}>
+          onClick={() => {
+            const home = '../../';
+            navigate(home);
+          }}>
           <Typography variant="title" size="medium" color="neutral100">
             {i18n.t('Done')}
           </Typography>

package/src/components/UpdateUrl.tsx

@@ -66,9 +66,6 @@ export function UpdateUrl() {
         fromAmount =
           searchParamsRef.current[SearchParams.FROM_AMOUNT] || inputAmount;
       } else {
-        if (location.state === 'redirect') {
-          return;
-        }
         fromChainString = fromBlockchain?.name || '';
         fromTokenString =
           (fromToken?.symbol || '') +

package/src/constants/navigationRoutes.ts

@@ -1,17 +1,16 @@
 export const navigationRoutes = {
   home: '/',
   fromSwap: 'from-swap',
-  fromBlockchain: '/from-swap/blockchains',
-  toBlockchain: '/to-swap/blockchains',
   toSwap: 'to-swap',
+  blockchains: 'blockchains',
   settings: 'settings',
-  liquiditySources: '/settings/liquidity-sources',
-  themes: '/settings/themes',
-  bridges: '/settings/bridges',
-  exchanges: '/settings/exchanges',
-  languages: '/settings/languages',
+  liquiditySources: 'liquidity-sources',
+  themes: 'themes',
+  bridges: 'bridges',
+  exchanges: 'exchanges',
+  languages: 'languages',
   swaps: 'swaps',
   wallets: 'wallets',
   confirmSwap: 'confirm-swap',
-  swapDetails: 'swaps/:requestId',
+  swapDetails: ':requestId',
 };

package/src/hooks/useNavigateBack.ts

@@ -1,55 +1,6 @@
-import { useInRouterContext, useNavigate } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom';
 
-import { navigationRoutes } from '../constants/navigationRoutes';
-import { useQuoteStore } from '../store/quote';
-
-export function useNavigateBack() {
-  const isRouterInContext = useInRouterContext();
+export function useNavigateBack(): () => void {
   const navigate = useNavigate();
-  const quoteWalletsConfirmed = useQuoteStore.use.quoteWalletsConfirmed();
-
-  navigationRoutes;
-
-  const navigateBackFrom = (currentRoute: string) => {
-    if (currentRoute === navigationRoutes.swapDetails) {
-      return navigate('/' + navigationRoutes.swaps, { replace: true });
-    }
-
-    if (
-      !isRouterInContext ||
-      (window.history.state && window.history.state.idx > 0)
-    ) {
-      // eslint-disable-next-line @typescript-eslint/no-magic-numbers
-      navigate(-1);
-    } else {
-      if (
-        [navigationRoutes.settings, navigationRoutes.wallets].includes(
-          currentRoute
-        ) &&
-        quoteWalletsConfirmed
-      ) {
-        return navigate('/' + navigationRoutes.confirmSwap, { replace: true });
-      }
-      if (
-        [
-          navigationRoutes.fromSwap,
-          navigationRoutes.toSwap,
-          navigationRoutes.settings,
-          navigationRoutes.wallets,
-          navigationRoutes.swaps,
-          navigationRoutes.confirmSwap,
-        ].includes(currentRoute)
-      ) {
-        navigate(navigationRoutes.home, { replace: true });
-      } else if (currentRoute === navigationRoutes.fromBlockchain) {
-        navigate('/' + navigationRoutes.fromSwap, { replace: true });
-      } else if (currentRoute === navigationRoutes.toBlockchain) {
-        navigate('/' + navigationRoutes.fromSwap, { replace: true });
-      } else if (currentRoute === navigationRoutes.liquiditySources) {
-        navigate('/' + navigationRoutes.settings, { replace: true });
-      }
-    }
-  };
-
-  return { navigateBackFrom };
+  return () => navigate(-1);
 }

package/src/pages/ConfirmSwapPage.tsx

@@ -119,12 +119,11 @@ export function ConfirmSwapPage() {
           { id: confirmSwapResult.swap.requestId }
         );
         setSelectedSwap(confirmSwapResult.swap.requestId);
-        navigate(
-          '/' + navigationRoutes.swaps + `/${confirmSwapResult.swap.requestId}`,
-          {
-            replace: true,
-          }
-        );
+
+        const swap_url = `../${navigationRoutes.swaps}/${confirmSwapResult.swap.requestId}`;
+        navigate(swap_url, {
+          replace: true,
+        });
         setTimeout(() => {
           setInputAmount('');
         }, 0);
@@ -242,8 +241,10 @@ export function ConfirmSwapPage() {
     <Layout
       header={{
         title: i18n.t('Confirm Swap'),
-        onBack: () => navigate(-1),
-        hasConnectWallet: true,
+        onWallet: () => {
+          const wallets_url = `../${navigationRoutes.wallets}`;
+          navigate(wallets_url);
+        },
         suffix: (
           <Tooltip
             container={getContainer()}
@@ -252,7 +253,7 @@ export function ConfirmSwapPage() {
             <HeaderButton
               size="small"
               variant="ghost"
-              onClick={() => navigate('/' + navigationRoutes.settings)}>
+              onClick={() => navigate('../' + navigationRoutes.settings)}>
               <SettingsIcon size={18} color="black" />
             </HeaderButton>
           </Tooltip>

package/src/pages/HistoryPage.tsx

@@ -11,8 +11,6 @@ import { Layout } from '../components/Layout';
 import { SearchInput } from '../components/SearchInput';
 import { SwapsGroup } from '../components/SwapsGroup';
 import { NotFoundContainer } from '../components/SwapsGroup/SwapsGroup.styles';
-import { navigationRoutes } from '../constants/navigationRoutes';
-import { useNavigateBack } from '../hooks/useNavigateBack';
 import { useUiStore } from '../store/ui';
 import { groupSwapsByDate } from '../utils/date';
 import { containsText } from '../utils/numbers';
@@ -51,7 +49,6 @@ const isStepContainsText = (steps: PendingSwapStep[], value: string) => {
 export function HistoryPage() {
   const setSelectedSwap = useUiStore.use.setSelectedSwap();
   const navigate = useNavigate();
-  const { navigateBackFrom } = useNavigateBack();
   const { manager, state } = useManager();
   const list: PendingSwap[] = getPendingSwaps(manager).map(({ swap }) => swap);
   const [searchedFor, setSearchedFor] = useState<string>('');
@@ -78,7 +75,6 @@ export function HistoryPage() {
   return (
     <Layout
       header={{
-        onBack: () => navigateBackFrom(navigationRoutes.swaps),
         title: i18n.t('History'),
       }}>
       <Container>
@@ -108,7 +104,7 @@ export function HistoryPage() {
               list={filteredList}
               onSwapClick={(requestId) => {
                 setSelectedSwap(requestId);
-                navigate(`${requestId}`, { replace: true });
+                navigate(requestId);
               }}
               groupBy={groupSwapsByDate}
               isLoading={loading}

package/src/pages/Home.tsx

@@ -184,7 +184,10 @@ export function Home() {
         </Button>
       }
       header={{
-        hasConnectWallet: true,
+        onWallet: () => {
+          navigate(navigationRoutes.wallets);
+        },
+        hasBackButton: false,
         title: i18n.t('Swap'),
         suffix: (
           <HomeButtons
@@ -213,7 +216,7 @@ export function Home() {
                 displayName: fromToken?.symbol || '',
                 image: fromToken?.image || '',
               }}
-              onClickToken={() => navigate('from-swap')}
+              onClickToken={() => navigate(navigationRoutes.fromSwap)}
               price={{
                 value: inputAmount,
                 usdValue: priceImpactInputCanNotBeComputed
@@ -272,7 +275,7 @@ export function Home() {
                 ? errorMessages().unknownPriceError.impactTitle
                 : undefined,
             }}
-            onClickToken={() => navigate('to-swap')}
+            onClickToken={() => navigate(navigationRoutes.toSwap)}
             disabled={fetchMetaStatus === 'failed'}
             loading={fetchMetaStatus === 'loading'}
           />

package/src/pages/LanguagePage.tsx

@@ -10,13 +10,9 @@ import React from 'react';
 
 import { Layout } from '../components/Layout';
 import { SettingsContainer } from '../components/SettingsContainer';
-import { navigationRoutes } from '../constants/navigationRoutes';
 import { useLanguage } from '../hooks/useLanguage';
-import { useNavigateBack } from '../hooks/useNavigateBack';
 
 export function LanguagePage() {
-  const { navigateBackFrom } = useNavigateBack();
-
   const { activeLanguage, changeLanguage, languages } = useLanguage();
 
   const languageList = languages.map((languageItem) => {
@@ -38,7 +34,6 @@ export function LanguagePage() {
   return (
     <Layout
       header={{
-        onBack: () => navigateBackFrom(navigationRoutes.settings),
         title: i18n.t('Language'),
       }}>
       <SettingsContainer>

package/src/pages/LiquiditySourcePage.tsx

@@ -23,8 +23,6 @@ import {
   NotFoundContainer,
   SettingsContainer,
 } from '../components/SettingsContainer';
-import { navigationRoutes } from '../constants/navigationRoutes';
-import { useNavigateBack } from '../hooks/useNavigateBack';
 import { useAppStore } from '../store/AppStore';
 import { useSettingsStore } from '../store/settings';
 import { containsText } from '../utils/numbers';
@@ -39,7 +37,6 @@ export function LiquiditySourcePage({ sourceType }: PropTypes) {
   const swappers = useAppStore().swappers();
   const [searchedFor, setSearchedFor] = useState<string>('');
   const toggleLiquiditySource = useSettingsStore.use.toggleLiquiditySource();
-  const { navigateBackFrom } = useNavigateBack();
   const supportedUniqueSwappersGroups: Array<UniqueSwappersGroupType> =
     getUniqueSwappersGroups(swappers);
 
@@ -102,7 +99,6 @@ export function LiquiditySourcePage({ sourceType }: PropTypes) {
   return (
     <Layout
       header={{
-        onBack: () => navigateBackFrom(navigationRoutes.settings),
         title: i18n.t(sourceType),
         suffix: (
           <LiquiditySourceSuffix>