From d6560290557699722efdeb34fa0cc858593a3d1a Mon Sep 17 00:00:00 2001 From: Eugene Chybisov Date: Mon, 3 Jun 2024 13:18:02 +0200 Subject: [PATCH] fix: broken navigation when confirming/bookmarking address --- packages/widget-playground-vite/package.json | 1 + packages/widget-playground-vite/src/App.tsx | 14 ++++++++++++++ .../src/pages/SendToWallet/BookmarksPage.tsx | 6 ++++-- .../src/pages/SendToWallet/ConfirmAddressSheet.tsx | 7 +++---- .../pages/SendToWallet/ConnectedWalletsPage.tsx | 7 +++++-- .../src/pages/SendToWallet/RecentWalletsPage.tsx | 5 ++++- .../SendToWallet/SendToConfiguredWalletPage.tsx | 7 +++---- yarn.lock | 1 + 8 files changed, 35 insertions(+), 13 deletions(-) diff --git a/packages/widget-playground-vite/package.json b/packages/widget-playground-vite/package.json index c6ab8ec2a..1aa99dc4e 100644 --- a/packages/widget-playground-vite/package.json +++ b/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" diff --git a/packages/widget-playground-vite/src/App.tsx b/packages/widget-playground-vite/src/App.tsx index 5b2d3c7c6..847322c50 100644 --- a/packages/widget-playground-vite/src/App.tsx +++ b/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: ( +// +// +// +// +// ), +// }, +// ]); + const AppProvider = ({ children }: PropsWithChildren) => { return ( { ); }; + export const App = () => { return ( + {/* */} diff --git a/packages/widget/src/pages/SendToWallet/BookmarksPage.tsx b/packages/widget/src/pages/SendToWallet/BookmarksPage.tsx index f2efedcca..6cd675b76 100644 --- a/packages/widget/src/pages/SendToWallet/BookmarksPage.tsx +++ b/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(); diff --git a/packages/widget/src/pages/SendToWallet/ConfirmAddressSheet.tsx b/packages/widget/src/pages/SendToWallet/ConfirmAddressSheet.tsx index 651541d7a..e0cf483cb 100644 --- a/packages/widget/src/pages/SendToWallet/ConfirmAddressSheet.tsx +++ b/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(); } }; diff --git a/packages/widget/src/pages/SendToWallet/ConnectedWalletsPage.tsx b/packages/widget/src/pages/SendToWallet/ConnectedWalletsPage.tsx index 553391d5b..27d1cb3f8 100644 --- a/packages/widget/src/pages/SendToWallet/ConnectedWalletsPage.tsx +++ b/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 = () => { diff --git a/packages/widget/src/pages/SendToWallet/RecentWalletsPage.tsx b/packages/widget/src/pages/SendToWallet/RecentWalletsPage.tsx index 3fbc25043..955804db8 100644 --- a/packages/widget/src/pages/SendToWallet/RecentWalletsPage.tsx +++ b/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) => { diff --git a/packages/widget/src/pages/SendToWallet/SendToConfiguredWalletPage.tsx b/packages/widget/src/pages/SendToWallet/SendToConfiguredWalletPage.tsx index a8811fdb9..336b65926 100644 --- a/packages/widget/src/pages/SendToWallet/SendToConfiguredWalletPage.tsx +++ b/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(); 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 = () => { diff --git a/yarn.lock b/yarn.lock index 039dfa08a..c7c38d4a7 100644 --- a/yarn.lock +++ b/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"