fix: broken navigation when confirming/bookmarking address (#256)

packages/widget-playground-vite/package.json

@@ -33,6 +33,7 @@
     "microdiff": "^1.4.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-router-dom": "^6.23.1",
     "viem": "^2.12.1",
     "wagmi": "^2.9.6",
     "zustand": "^4.5.2"

packages/widget-playground-vite/src/App.tsx

@@ -18,6 +18,18 @@ import '@lifi/widget-playground/fonts';
 
 const queryClient = new QueryClient();
 
+// const router = createBrowserRouter([
+//   {
+//     path: '/test/*',
+//     element: (
+//       <Box sx={{ display: 'flex', flexGrow: '1' }}>
+//         <DrawerControls />
+//         <WidgetView />
+//       </Box>
+//     ),
+//   },
+// ]);
+
 const AppProvider = ({ children }: PropsWithChildren) => {
   return (
     <EnvVariablesProvider
@@ -35,9 +47,11 @@ const AppProvider = ({ children }: PropsWithChildren) => {
     </EnvVariablesProvider>
   );
 };
+
 export const App = () => {
   return (
     <AppProvider>
+      {/* <RouterProvider router={router} /> */}
       <Box sx={{ display: 'flex', flexGrow: '1' }}>
         <DrawerControls />
         <WidgetView />

packages/widget/src/pages/SendToWallet/BookmarksPage.tsx

@@ -23,7 +23,6 @@ import { useBookmarks } from '../../stores/bookmarks/useBookmarks.js';
 import { useFieldActions } from '../../stores/form/useFieldActions.js';
 import { useSendToWalletActions } from '../../stores/settings/useSendToWalletStore.js';
 import { defaultChainIdsByType } from '../../utils/chainType.js';
-import { navigationRoutes } from '../../utils/navigationRoutes.js';
 import { shortenAddress } from '../../utils/wallet.js';
 import { BookmarkAddressSheet } from './BookmarkAddressSheet.js';
 import { EmptyListIndicator } from './EmptyListIndicator.js';
@@ -59,7 +58,10 @@ export const BookmarksPage = () => {
     });
     setSelectedBookmark(bookmark);
     setSendToWallet(true);
-    navigate(navigationRoutes.home);
+    navigate(`../../`, {
+      relative: 'path',
+      replace: true,
+    });
   };
 
   const moreMenuId = useId();

packages/widget/src/pages/SendToWallet/ConfirmAddressSheet.tsx

@@ -3,14 +3,13 @@ import { Button, Typography } from '@mui/material';
 import type { MutableRefObject } from 'react';
 import { forwardRef } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useNavigate } from 'react-router-dom';
 import { AlertMessage } from '../../components/AlertMessage/AlertMessage.js';
 import { BottomSheet } from '../../components/BottomSheet/BottomSheet.js';
 import type { BottomSheetBase } from '../../components/BottomSheet/types.js';
+import { useNavigateBack } from '../../hooks/useNavigateBack.js';
 import type { Bookmark } from '../../stores/bookmarks/types.js';
 import { useFieldActions } from '../../stores/form/useFieldActions.js';
 import { useSendToWalletActions } from '../../stores/settings/useSendToWalletStore.js';
-import { navigationRoutes } from '../../utils/navigationRoutes.js';
 import {
   IconContainer,
   SendToWalletButtonRow,
@@ -29,7 +28,7 @@ export const ConfirmAddressSheet = forwardRef<
   ConfirmAddressSheetProps
 >(({ validatedBookmark, onConfirm }, ref) => {
   const { t } = useTranslation();
-  const navigate = useNavigate();
+  const { navigateBack } = useNavigateBack();
   const { setFieldValue } = useFieldActions();
   const { setSendToWallet } = useSendToWalletActions();
 
@@ -45,7 +44,7 @@ export const ConfirmAddressSheet = forwardRef<
       onConfirm?.(validatedBookmark);
       setSendToWallet(true);
       handleClose();
-      navigate(navigationRoutes.home);
+      navigateBack();
     }
   };
 

packages/widget/src/pages/SendToWallet/ConnectedWalletsPage.tsx

@@ -20,7 +20,6 @@ import { useToAddressRequirements } from '../../hooks/useToAddressRequirements.j
 import { useBookmarkActions } from '../../stores/bookmarks/useBookmarkActions.js';
 import { useFieldActions } from '../../stores/form/useFieldActions.js';
 import { useSendToWalletActions } from '../../stores/settings/useSendToWalletStore.js';
-import { navigationRoutes } from '../../utils/navigationRoutes.js';
 import { shortenAddress } from '../../utils/wallet.js';
 import { EmptyListIndicator } from './EmptyListIndicator.js';
 import {
@@ -44,6 +43,7 @@ export const ConnectedWalletsPage = () => {
   const open = Boolean(moreMenuAnchorEl);
 
   useHeader(t('sendToWallet.connectedWallets'));
+
   const handleWalletSelected = (account: Account) => {
     setFieldValue('toAddress', account.address!, {
       isTouched: true,
@@ -55,7 +55,10 @@ export const ConnectedWalletsPage = () => {
       isConnectedAccount: true,
     });
     setSendToWallet(true);
-    navigate(navigationRoutes.home);
+    navigate(`../../`, {
+      relative: 'path',
+      replace: true,
+    });
   };
 
   const closeMenu = () => {

packages/widget/src/pages/SendToWallet/RecentWalletsPage.tsx

@@ -63,7 +63,10 @@ export const RecentWalletsPage = () => {
     });
     setSelectedBookmark(recentWallet);
     setSendToWallet(true);
-    navigate(navigationRoutes.home);
+    navigate(`../../`, {
+      relative: 'path',
+      replace: true,
+    });
   };
 
   const handleAddBookmark = (bookmark: Bookmark) => {

packages/widget/src/pages/SendToWallet/SendToConfiguredWalletPage.tsx

@@ -6,20 +6,19 @@ import {
 import { ListItemAvatar, ListItemText, MenuItem } from '@mui/material';
 import { useId, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { useNavigate } from 'react-router-dom';
 import { AccountAvatar } from '../../components/Avatar/AccountAvatar.js';
 import { ListItem } from '../../components/ListItem/ListItem.js';
 import { ListItemButton } from '../../components/ListItem/ListItemButton.js';
 import { Menu } from '../../components/Menu.js';
 import { useChains } from '../../hooks/useChains.js';
 import { useHeader } from '../../hooks/useHeader.js';
+import { useNavigateBack } from '../../hooks/useNavigateBack.js';
 import { useToAddressRequirements } from '../../hooks/useToAddressRequirements.js';
 import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js';
 import { useBookmarkActions } from '../../stores/bookmarks/useBookmarkActions.js';
 import { useFieldActions } from '../../stores/form/useFieldActions.js';
 import type { ToAddress } from '../../types/widget.js';
 import { defaultChainIdsByType } from '../../utils/chainType.js';
-import { navigationRoutes } from '../../utils/navigationRoutes.js';
 import { shortenAddress } from '../../utils/wallet.js';
 import {
   ListContainer,
@@ -29,7 +28,7 @@ import {
 
 export const SendToConfiguredWalletPage = () => {
   const { t } = useTranslation();
-  const navigate = useNavigate();
+  const { navigateBack } = useNavigateBack();
   const { toAddresses } = useWidgetConfig();
   const [selectedToAddress, setSelectedToAddress] = useState<ToAddress>();
   const { requiredToChainType } = useToAddressRequirements();
@@ -45,7 +44,7 @@ export const SendToConfiguredWalletPage = () => {
   const handleCuratedSelected = (toAddress: ToAddress) => {
     setSelectedBookmark(toAddress);
     setFieldValue('toAddress', toAddress.address, { isTouched: true });
-    navigate(navigationRoutes.home);
+    navigateBack();
   };
 
   const closeMenu = () => {

yarn.lock

@@ -2570,6 +2570,7 @@ __metadata:
     microdiff: "npm:^1.4.0"
     react: "npm:^18.3.1"
     react-dom: "npm:^18.3.1"
+    react-router-dom: "npm:^6.23.1"
     rollup-plugin-polyfill-node: "npm:^0.13.0"
     source-map-explorer: "npm:^2.5.3"
     typescript: "npm:^5.4.5"