fix: better handle go back navigation

packages/widget/src/components/Header/NavigationHeader.tsx

@@ -5,8 +5,9 @@ import {
 } from '@mui/icons-material';
 import { Box, IconButton, Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
-import { Route, Routes, useLocation, useNavigate } from 'react-router-dom';
-import { useWallet } from '../../providers/WalletProvider';
+import { Route, Routes, useLocation } from 'react-router-dom';
+import { useNavigateBack } from '../../hooks';
+import { useWallet } from '../../providers';
 import { navigationRoutes, navigationRoutesValues } from '../../utils';
 import { HeaderAppBar } from './Header.style';
 import { useHeaderActionStore } from './useHeaderActionStore';
@@ -24,17 +25,13 @@ const backButtonRoutes = [
 
 export const NavigationHeader: React.FC = () => {
   const { t } = useTranslation();
-  const navigate = useNavigate();
+  const { navigate, navigateBack } = useNavigateBack();
   const { account } = useWallet();
   const { element } = useHeaderActionStore();
   const { pathname } = useLocation();
   const path = pathname.substring(pathname.lastIndexOf('/') + 1);
   const hasPath = navigationRoutesValues.includes(path);
 
-  const handleBack = () => {
-    navigate(-1);
-  };
-
   const handleHeaderTitle = () => {
     switch (path) {
       case navigationRoutes.selectWallet:
@@ -65,7 +62,7 @@ export const NavigationHeader: React.FC = () => {
           size="medium"
           aria-label="settings"
           edge="start"
-          onClick={handleBack}
+          onClick={navigateBack}
         >
           <ArrowBackIcon />
         </IconButton>

packages/widget/src/components/Header/WalletHeader.tsx

@@ -5,8 +5,7 @@ import {
 import { Box, IconButton, Typography } from '@mui/material';
 import { useTranslation } from 'react-i18next';
 import { useLocation, useNavigate } from 'react-router-dom';
-import { useWallet } from '../../providers/WalletProvider';
-import { useWidgetConfig } from '../../providers/WidgetProvider';
+import { useWallet, useWidgetConfig } from '../../providers';
 import { navigationRoutes } from '../../utils';
 import { HeaderAppBar } from './Header.style';
 

packages/widget/src/hooks/index.ts

@@ -5,6 +5,7 @@ export * from './useDebouncedWatch';
 export * from './useFeaturedTokens';
 export * from './useGasSufficiency';
 export * from './useInitializer';
+export * from './useNavigateBack';
 export * from './useRouteExecution';
 export * from './useScrollableContainer';
 export * from './useSwapRoutes';

packages/widget/src/hooks/useNavigateBack.ts

@@ -0,0 +1,22 @@
+import { useCallback } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+export const useNavigateBack = () => {
+  const navigate = useNavigate();
+
+  const navigateBack = useCallback(() => {
+    if (window.history.state && window.history.state.idx > 0) {
+      navigate(-1);
+    } else {
+      navigate(
+        window.location.pathname.substring(
+          0,
+          window.location.pathname.lastIndexOf('/'),
+        ) || '/',
+        { replace: true },
+      );
+    }
+  }, [navigate]);
+
+  return { navigateBack, navigate };
+};

packages/widget/src/pages/SelectTokenPage/ChainSelect.tsx

@@ -1,5 +1,4 @@
 import { KeyboardArrowDown as KeyboardArrowDownIcon } from '@mui/icons-material';
-import type { SelectChangeEvent } from '@mui/material';
 import {
   Avatar,
   FormControl,
@@ -12,12 +11,12 @@ import { useTranslation } from 'react-i18next';
 import { Card, CardTitle } from '../../components/Card';
 import { Select } from '../../components/Select';
 import { useChains } from '../../hooks';
-import type { SwapFormTypeProps } from '../../providers/SwapFormProvider';
+import type { SwapFormTypeProps } from '../../providers';
 import {
   SwapFormKey,
   SwapFormKeyHelper,
-} from '../../providers/SwapFormProvider';
-import { useWidgetConfig } from '../../providers/WidgetProvider';
+  useWidgetConfig,
+} from '../../providers';
 
 export const ChainSelect = ({ formType }: SwapFormTypeProps) => {
   const { t } = useTranslation();
@@ -29,14 +28,13 @@ export const ChainSelect = ({ formType }: SwapFormTypeProps) => {
     name: [chainKey],
   });
 
-  const { onChange, onBlur, name, ref } = register(chainKey);
-
-  const handleChain = (event: SelectChangeEvent<unknown>) => {
-    onChange(event);
-    setValue(SwapFormKeyHelper.getTokenKey(formType), '');
-    setValue(SwapFormKeyHelper.getAmountKey(formType), '');
-    setValue(SwapFormKey.TokenSearchFilter, '');
-  };
+  const { onChange, onBlur, name, ref } = register(chainKey, {
+    onChange: () => {
+      setValue(SwapFormKeyHelper.getTokenKey(formType), '');
+      setValue(SwapFormKeyHelper.getAmountKey(formType), '');
+      setValue(SwapFormKey.TokenSearchFilter, '');
+    },
+  });
 
   return !isLoading ? (
     <Card>
@@ -49,7 +47,7 @@ export const ChainSelect = ({ formType }: SwapFormTypeProps) => {
           MenuProps={{ elevation: 2 }}
           defaultValue={formType === 'from' ? fromChain : toChain}
           value={chainId}
-          onChange={handleChain}
+          onChange={onChange}
           onBlur={onBlur}
           IconComponent={KeyboardArrowDownIcon}
         >

packages/widget/src/pages/SelectTokenPage/SelectTokenPage.tsx

@@ -1,26 +1,25 @@
 import { Box, Container } from '@mui/material';
 import type { FC } from 'react';
 import { useLayoutEffect, useRef, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
 import { TokenList } from '../../components/TokenList';
-import { useContentHeight, useScrollableOverflowHidden } from '../../hooks';
-import type { SwapFormDirection } from '../../providers/SwapFormProvider';
+import {
+  useContentHeight,
+  useNavigateBack,
+  useScrollableOverflowHidden,
+} from '../../hooks';
+import type { SwapFormDirection } from '../../providers';
 import { ChainSelect } from './ChainSelect';
 import { SearchTokenInput } from './SearchTokenInput';
 
 export const SelectTokenPage: FC<{ formType: SwapFormDirection }> = ({
   formType,
 }) => {
   useScrollableOverflowHidden();
-  const navigate = useNavigate();
+  const { navigateBack } = useNavigateBack();
   const headerRef = useRef<HTMLElement>(null);
   const contentHeight = useContentHeight();
   const [headerHeight, setHeaderHeight] = useState(0);
 
-  const handleTokenClick = () => {
-    navigate(-1);
-  };
-
   useLayoutEffect(() => {
     setHeaderHeight(contentHeight - (headerRef.current?.offsetHeight ?? 0));
   }, [contentHeight]);
@@ -35,7 +34,7 @@ export const SelectTokenPage: FC<{ formType: SwapFormDirection }> = ({
       </Box>
       <TokenList
         height={headerHeight}
-        onClick={handleTokenClick}
+        onClick={navigateBack}
         formType={formType}
       />
     </Container>

packages/widget/src/pages/SelectWalletPage/SelectWalletPage.tsx

@@ -12,18 +12,17 @@ import {
 } from '@mui/material';
 import { useCallback, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useNavigate } from 'react-router-dom';
 import { Dialog } from '../../components/Dialog';
-import { useWallet } from '../../providers/WalletProvider';
+import { useNavigateBack } from '../../hooks';
+import { useWallet } from '../../providers';
 import {
   WalletListItemButton,
   WalletListItemText,
 } from './SelectWalletPage.style';
 
 export const SelectWalletPage = () => {
   const { t } = useTranslation();
-
-  const navigate = useNavigate();
+  const { navigateBack } = useNavigateBack();
   const { connect } = useWallet();
   const [walletIdentity, setWalletIdentity] = useState<{
     show: boolean;
@@ -50,10 +49,10 @@ export const SelectWalletPage = () => {
         });
         return;
       }
-      navigate(-1);
+      navigateBack();
       await connect(wallet);
     },
-    [connect, navigate],
+    [connect, navigateBack],
   );
 
   return (

packages/widget/src/pages/SwapDetailsPage/SwapDetailsPage.tsx

@@ -14,19 +14,20 @@ import {
 } from '@mui/material';
 import { Fragment, useCallback, useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useLocation, useNavigate } from 'react-router-dom';
+import { useLocation } from 'react-router-dom';
 import shallow from 'zustand/shallow';
 import { Card, CardTitle } from '../../components/Card';
 import { Dialog } from '../../components/Dialog';
 import { useSetHeaderAction } from '../../components/Header';
 import { Step } from '../../components/Step';
 import { StepDivider } from '../../components/StepDivider';
+import { useNavigateBack } from '../../hooks';
 import { useRouteStore } from '../../stores';
 import { Container } from './SwapDetailsPage.style';
 
 export const SwapDetailsPage: React.FC = () => {
   const { t } = useTranslation();
-  const navigate = useNavigate();
+  const { navigateBack } = useNavigateBack();
   const setHeaderAction = useSetHeaderAction();
   const { state }: any = useLocation();
   const [routeExecution, deleteRoute] = useRouteStore(
@@ -40,7 +41,7 @@ export const SwapDetailsPage: React.FC = () => {
   }, []);
 
   const handleDeleteRoute = () => {
-    navigate(-1);
+    navigateBack();
     if (routeExecution) {
       deleteRoute(routeExecution.route.id);
     }

packages/widget/src/pages/SwapPage/StatusBottomSheet.tsx

@@ -7,12 +7,11 @@ import { Box, Button, Typography } from '@mui/material';
 import { useEffect, useMemo, useRef } from 'react';
 import { useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
-import { useNavigate } from 'react-router-dom';
 import type { BottomSheetBase } from '../../components/BottomSheet';
 import { BottomSheet } from '../../components/BottomSheet';
 import { Token } from '../../components/Token';
-import { useChains, useTokenBalance } from '../../hooks';
-import { SwapFormKey } from '../../providers/SwapFormProvider';
+import { useChains, useNavigateBack, useTokenBalance } from '../../hooks';
+import { SwapFormKey } from '../../providers';
 import type { RouteExecution } from '../../stores';
 import {
   IconCircle,
@@ -26,7 +25,7 @@ export const StatusBottomSheet: React.FC<RouteExecution> = ({
   route,
 }) => {
   const { t } = useTranslation();
-  const navigate = useNavigate();
+  const { navigateBack } = useNavigateBack();
   const ref = useRef<BottomSheetBase>(null);
   const { getChainById } = useChains();
   const { token, refetch: refetchBalance } = useTokenBalance(
@@ -42,7 +41,7 @@ export const StatusBottomSheet: React.FC<RouteExecution> = ({
 
   const handleDone = () => {
     clearFromAmount();
-    navigate(-1);
+    navigateBack();
   };
 
   const handleClose = () => {

packages/widget/src/pages/SwapPage/SwapPage.tsx

@@ -1,24 +1,24 @@
 import { Box, Button } from '@mui/material';
 import { Fragment } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useLocation, useNavigate } from 'react-router-dom';
+import { useLocation } from 'react-router-dom';
 import { GasSufficiencyMessage } from '../../components/GasSufficiencyMessage';
 import { Step } from '../../components/Step';
 import { StepDivider } from '../../components/StepDivider';
 import { SwapButton } from '../../components/SwapButton';
-import { useRouteExecution } from '../../hooks';
+import { useNavigateBack, useRouteExecution } from '../../hooks';
 import { StatusBottomSheet } from './StatusBottomSheet';
 import { Container } from './SwapPage.style';
 
 export const SwapPage: React.FC = () => {
   const { t } = useTranslation();
   const { state }: any = useLocation();
-  const navigate = useNavigate();
+  const { navigateBack } = useNavigateBack();
   const { route, status, executeRoute, restartRoute, deleteRoute } =
     useRouteExecution(state?.routeId);
 
   const handleRemoveRoute = () => {
-    navigate(-1);
+    navigateBack();
     deleteRoute();
   };