Merge branch 'main' into feat/trezor-erc721-e2e

dawnseeker8 · web-flow · commit 982944763853 · 2025-08-27T19:15:14.000+08:00
diff --git a/ui/hooks/snaps/useSnapNavigation.ts b/ui/hooks/snaps/useSnapNavigation.ts
@@ -1,21 +1,21 @@
-import { useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom-v5-compat';
 import { parseMetaMaskUrl } from '@metamask/snaps-utils';
 import { getSnapRoute } from '../../helpers/utils/util';
 
 const useSnapNavigation = () => {
-  const history = useHistory();
-  const navigate = (url: string) => {
+  const navigate = useNavigate();
+  const useSnapNavigate = (url: string) => {
     let path;
     const linkData = parseMetaMaskUrl(url);
     if (linkData.snapId) {
       path = getSnapRoute(linkData.snapId);
     } else {
       path = linkData.path;
     }
-    history.push(path);
+    navigate(path);
   };
   return {
-    navigate,
+    useSnapNavigate,
   };
 };
 
diff --git a/ui/pages/confirmations/components/confirm/info/batch/transaction-account-details/transaction-account-details.stories.tsx b/ui/pages/confirmations/components/confirm/info/batch/transaction-account-details/transaction-account-details.stories.tsx
@@ -40,4 +40,4 @@ export default Story;
 
 export const DefaultStory = () => <TransactionAccountDetails />;
 
-DefaultStory.storyName = 'Default';
+DefaultStory.storyName = 'Default';
diff --git a/ui/pages/multichain-accounts/address-qr-code/address-qr-code.stories.tsx b/ui/pages/multichain-accounts/address-qr-code/address-qr-code.stories.tsx
@@ -218,4 +218,4 @@ export const SolanaAddressQR = {
       <AddressQRCode />
     </StoryWrapper>
   ),
-};
+};
diff --git a/ui/pages/multichain-accounts/base-account-details/base-account-details.stories.tsx b/ui/pages/multichain-accounts/base-account-details/base-account-details.stories.tsx
@@ -217,4 +217,4 @@ export const SolanaAccount = {
       />
     </StoryWrapper>
   ),
-};
+};
diff --git a/ui/pages/multichain-accounts/wallet-details/wallet-details.component.stories.tsx b/ui/pages/multichain-accounts/wallet-details/wallet-details.component.stories.tsx
@@ -55,4 +55,4 @@ const meta: Meta<typeof WalletDetails> = {
 export default meta;
 type Story = StoryObj<typeof WalletDetails>;
 
-export const Default: Story = {};
+export const Default: Story = {};
diff --git a/ui/pages/notification-details/notification-details.tsx b/ui/pages/notification-details/notification-details.tsx
@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect } from 'react';
 import { useSelector } from 'react-redux';
-import { useHistory, useLocation } from 'react-router-dom';
+import { useNavigate, useLocation } from 'react-router-dom-v5-compat';
 import { TRIGGER_TYPES } from '@metamask/notification-services-controller/notification-services';
 import { Box } from '../../components/component-library';
 import {
@@ -26,11 +26,11 @@ import { NotificationDetailsBody } from './notification-details-body/notificatio
 import { NotificationDetailsFooter } from './notification-details-footer/notification-details-footer';
 
 function useModalNavigation() {
-  const history = useHistory();
+  const navigate = useNavigate();
 
   const redirectToNotifications = useCallback(() => {
-    history.push(NOTIFICATIONS_ROUTE);
-  }, [history]);
+    navigate(NOTIFICATIONS_ROUTE);
+  }, [navigate]);
 
   return {
     redirectToNotifications,
diff --git a/ui/pages/notifications-settings/notifications-settings.tsx b/ui/pages/notifications-settings/notifications-settings.tsx
@@ -1,6 +1,6 @@
 import React, { useMemo, useState } from 'react';
 import { useSelector } from 'react-redux';
-import { useHistory, useLocation } from 'react-router-dom';
+import { useNavigate, useLocation } from 'react-router-dom-v5-compat';
 import { useI18nContext } from '../../hooks/useI18nContext';
 import { NOTIFICATIONS_ROUTE } from '../../helpers/constants/routes';
 import {
@@ -57,7 +57,7 @@ function useNotificationAccounts() {
 // TODO: Fix in https://github.com/MetaMask/metamask-extension/issues/31860
 // eslint-disable-next-line @typescript-eslint/naming-convention
 export default function NotificationsSettings() {
-  const history = useHistory();
+  const navigate = useNavigate();
   const location = useLocation();
   const t = useI18nContext();
 
@@ -99,8 +99,8 @@ export default function NotificationsSettings() {
             size={ButtonIconSize.Sm}
             onClick={() =>
               previousPage
-                ? history.push(previousPage)
-                : history.push(NOTIFICATIONS_ROUTE)
+                ? navigate(previousPage)
+                : navigate(NOTIFICATIONS_ROUTE)
             }
           />
         }
diff --git a/ui/pages/notifications/notification-components/snap/snap-footer-button.test.tsx b/ui/pages/notifications/notification-components/snap/snap-footer-button.test.tsx
@@ -2,11 +2,19 @@ import React from 'react';
 import { processNotification } from '@metamask/notification-services-controller/notification-services';
 import { fireEvent, waitFor } from '@testing-library/react';
 import { createMockSnapNotification } from '@metamask/notification-services-controller/notification-services/mocks';
-import * as SnapNavigation from '../../../../hooks/snaps/useSnapNavigation';
 import { renderWithProvider } from '../../../../../test/lib/render-helpers';
 import { SnapFooterButton } from './snap-footer-button';
 import { DetailedViewData, SnapNotification } from './types';
 
+const mockUseNavigate = jest.fn();
+
+jest.mock('react-router-dom-v5-compat', () => {
+  return {
+    ...jest.requireActual('react-router-dom-v5-compat'),
+    useNavigate: () => mockUseNavigate,
+  };
+});
+
 // Type Util for testing
 
 // TODO: Fix in https://github.com/MetaMask/metamask-extension/issues/31973
@@ -15,17 +23,11 @@ type MockVar = any;
 
 describe('SnapFooterButton', () => {
   const arrangeMocks = () => {
-    const mockNavigate = jest.fn();
-    const mockUseSnapNavigation = jest
-      .spyOn(SnapNavigation, 'default')
-      .mockReturnValue({ navigate: mockNavigate });
     const notification = processNotification(
       createMockSnapNotification(),
     ) as SnapNotification;
 
     return {
-      mockNavigate,
-      mockUseSnapNavigation,
       notification,
     };
   };
@@ -44,7 +46,7 @@ describe('SnapFooterButton', () => {
     expect(container).toBeEmptyDOMElement();
   });
 
-  it('renders the NotificationDetailButton', () => {
+  it('renders the NotificationDetailButton and navigates to home page when clicked', () => {
     const { notification } = arrangeMocks();
     (notification.data as DetailedViewData).detailedView.footerLink = {
       text: 'Go Home',
@@ -56,21 +58,8 @@ describe('SnapFooterButton', () => {
     );
     const button = getByText('Go Home');
     expect(button).toBeInTheDocument();
-  });
-
-  it('navigates when internal link is clicked', () => {
-    const { notification, mockNavigate } = arrangeMocks();
-    (notification.data as DetailedViewData).detailedView.footerLink = {
-      text: 'Go Home',
-      href: 'metamask://client/',
-    };
-
-    const { getByText } = renderWithProvider(
-      <SnapFooterButton notification={notification} />,
-    );
-    const button = getByText('Go Home');
     fireEvent.click(button);
-    expect(mockNavigate).toHaveBeenCalledWith('metamask://client/');
+    expect(mockUseNavigate).toHaveBeenCalledWith('/');
   });
 
   it('opens SnapLinkWarning when external link is clicked', async () => {
diff --git a/ui/pages/notifications/notification-components/snap/snap-footer-button.tsx b/ui/pages/notifications/notification-components/snap/snap-footer-button.tsx
@@ -12,7 +12,7 @@ import { DetailedViewData, SnapNotification } from './types';
 
 export const SnapFooterButton = (props: { notification: SnapNotification }) => {
   const trackEvent = useContext(MetaMetricsContext);
-  const { navigate } = useSnapNavigation();
+  const { useSnapNavigate } = useSnapNavigation();
   const [isOpen, setIsOpen] = useState(false);
   const data = props.notification.data as DetailedViewData;
   const footer = data?.detailedView?.footerLink;
@@ -44,10 +44,15 @@ export const SnapFooterButton = (props: { notification: SnapNotification }) => {
       if (isExternal) {
         setIsOpen(true);
       } else {
-        navigate(href);
+        useSnapNavigate(href);
       }
     },
-    [navigate, props.notification.id, props.notification.type, trackEvent],
+    [
+      useSnapNavigate,
+      props.notification.id,
+      props.notification.type,
+      trackEvent,
+    ],
   );
 
   if (!footer) {
diff --git a/ui/pages/notifications/notification-components/snap/snap.tsx b/ui/pages/notifications/notification-components/snap/snap.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { useSelector } from 'react-redux';
-import { useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom-v5-compat';
 import { TRIGGER_TYPES } from '@metamask/notification-services-controller/notification-services';
 import {
   NotificationDetailTitle,
@@ -32,7 +32,7 @@ import { SnapFooterButton } from './snap-footer-button';
 export const components: NotificationComponent<SnapNotification> = {
   guardFn: isOfTypeNodeGuard([TRIGGER_TYPES.SNAP]),
   item: ({ notification, onClick }) => {
-    const history = useHistory();
+    const navigate = useNavigate();
     const snapsMetadata = useSelector(getSnapsMetadata);
     const snapsNameGetter = getSnapName(snapsMetadata);
     const { markNotificationAsRead } = useMarkNotificationAsRead();
@@ -48,7 +48,7 @@ export const components: NotificationComponent<SnapNotification> = {
         ]);
       }
 
-      history.push(getSnapRoute(notification.data.origin));
+      navigate(getSnapRoute(notification.data.origin));
     };
 
     return (
diff --git a/ui/pages/notifications/notifications-list-item.stories.tsx b/ui/pages/notifications/notifications-list-item.stories.tsx
@@ -20,7 +20,10 @@ import {
   createMockFeatureAnnouncementRaw,
   createMockSnapNotification,
 } from '@metamask/notification-services-controller/notification-services/mocks';
-import { SnapComponent, SnapNotification } from './notification-components/snap/snap';
+import {
+  SnapComponent,
+  SnapNotification,
+} from './notification-components/snap/snap';
 import { NotificationsListItem } from './notifications-list-item';
 import { NotificationServicesController } from '@metamask/notification-services-controller';
 
@@ -47,7 +50,7 @@ const notificationMocks = {
   Snap: () => {
     const mock = createMockSnapNotification();
     // TODO(hmalik88): the mock's origin should be fixed upstream
-    mock.data.origin = 'npm:@metamask/example-snap'
+    mock.data.origin = 'npm:@metamask/example-snap';
     return mock;
   },
 } as const;
diff --git a/ui/pages/notifications/notifications-list-item.tsx b/ui/pages/notifications/notifications-list-item.tsx
@@ -1,5 +1,5 @@
 import React, { useContext, useCallback } from 'react';
-import { useHistory } from 'react-router-dom';
+import { useNavigate } from 'react-router-dom-v5-compat';
 import { hasProperty } from '@metamask/utils';
 import { MetaMetricsContext } from '../../contexts/metametrics';
 import {
@@ -29,7 +29,7 @@ export function NotificationsListItem({
 }: {
   notification: Notification;
 }) {
-  const history = useHistory();
+  const navigate = useNavigate();
   const trackEvent = useContext(MetaMetricsContext);
   const { setNotificationTimeout } = useSnapNotificationTimeouts();
 
@@ -73,8 +73,8 @@ export function NotificationsListItem({
       return;
     }
 
-    history.push(`${NOTIFICATIONS_ROUTE}/${notification.id}`);
-  }, [notification, markNotificationAsRead, history]);
+    navigate(`${NOTIFICATIONS_ROUTE}/${notification.id}`);
+  }, [notification, markNotificationAsRead, navigate]);
 
   if (!hasNotificationComponents(notification.type)) {
     return null;
diff --git a/ui/pages/notifications/notifications-list-read-all-button.test.tsx b/ui/pages/notifications/notifications-list-read-all-button.test.tsx
@@ -4,7 +4,7 @@ import { createMockNotificationEthSent } from '@metamask/notification-services-c
 import { processNotification } from '@metamask/notification-services-controller/notification-services';
 
 import * as UseNotificationModule from '../../hooks/metamask-notifications/useNotifications';
-import { renderWithProvider } from '../../../test/lib/render-helpers';
+import { renderWithProvider } from '../../../test/lib/render-helpers-navigate';
 import configureStore from '../../store/store';
 import mockState from '../../../test/data/mock-state.json';
 import { NotificationsListReadAllButton } from './notifications-list-read-all-button';
diff --git a/ui/pages/notifications/notifications-list.test.tsx b/ui/pages/notifications/notifications-list.test.tsx
@@ -1,10 +1,8 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react';
-import { Provider } from 'react-redux';
-import { BrowserRouter as Router } from 'react-router-dom';
+import { screen } from '@testing-library/react';
 import configureStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
-import { MetamaskNotificationsProvider } from '../../contexts/metamask-notifications/metamask-notifications';
+import { renderWithProvider } from '../../../test/lib/render-helpers-navigate';
 import { NotificationsList, TAB_KEYS } from './notifications-list';
 
 jest.mock('../../store/actions', () => ({
@@ -40,20 +38,15 @@ const store = mockStore({
 
 describe('NotificationsList', () => {
   it('renders the notifications list page', () => {
-    render(
-      <Provider store={store}>
-        <Router>
-          <MetamaskNotificationsProvider>
-            <NotificationsList
-              activeTab={TAB_KEYS.ALL}
-              notifications={[]}
-              isLoading={false}
-              isError={false}
-              notificationsCount={0}
-            />
-          </MetamaskNotificationsProvider>
-        </Router>
-      </Provider>,
+    renderWithProvider(
+      <NotificationsList
+        activeTab={TAB_KEYS.ALL}
+        notifications={[]}
+        isLoading={false}
+        isError={false}
+        notificationsCount={0}
+      />,
+      store,
     );
 
     expect(screen.getByTestId('notifications-list')).toBeInTheDocument();
diff --git a/ui/pages/notifications/notifications.test.tsx b/ui/pages/notifications/notifications.test.tsx
@@ -1,9 +1,8 @@
 import React from 'react';
-import { render, fireEvent } from '@testing-library/react';
-import { Provider } from 'react-redux';
-import { MemoryRouter } from 'react-router-dom';
+import { fireEvent } from '@testing-library/react';
 import configureStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
+import { renderWithProvider } from '../../../test/lib/render-helpers-navigate';
 import mockState from '../../../test/data/mock-state.json';
 import Notifications from './notifications';
 
@@ -61,37 +60,19 @@ const store = mockStore(initialState);
 
 describe('Notifications Component', () => {
   it('renders correctly', () => {
-    const { getByTestId } = render(
-      <Provider store={store}>
-        <MemoryRouter>
-          <Notifications />
-        </MemoryRouter>
-      </Provider>,
-    );
+    const { getByTestId } = renderWithProvider(<Notifications />, store);
 
     expect(getByTestId('notifications-page')).toBeInTheDocument();
   });
 
   it('navigates to default route on back button click', () => {
-    const { getByTestId } = render(
-      <Provider store={store}>
-        <MemoryRouter>
-          <Notifications />
-        </MemoryRouter>
-      </Provider>,
-    );
+    const { getByTestId } = renderWithProvider(<Notifications />, store);
 
     fireEvent.click(getByTestId('back-button'));
   });
 
   it('navigates to settings on settings button click', () => {
-    const { getByTestId } = render(
-      <Provider store={store}>
-        <MemoryRouter>
-          <Notifications />
-        </MemoryRouter>
-      </Provider>,
-    );
+    const { getByTestId } = renderWithProvider(<Notifications />, store);
 
     fireEvent.click(getByTestId('notifications-settings-button'));
   });
diff --git a/ui/pages/notifications/notifications.tsx b/ui/pages/notifications/notifications.tsx
diff --git a/ui/pages/onboarding-flow/account-exist/account-exist.tsx b/ui/pages/onboarding-flow/account-exist/account-exist.tsx
diff --git a/ui/pages/onboarding-flow/account-not-found/account-not-found.tsx b/ui/pages/onboarding-flow/account-not-found/account-not-found.tsx
diff --git a/ui/pages/settings/developer-options-tab/developer-options-tab.stories.tsx b/ui/pages/settings/developer-options-tab/developer-options-tab.stories.tsx

Original file line number	Diff line number	Diff line change
`@@ -40,4 +40,4 @@ export default Story;`
`40`	`40`
`41`	`41`	`export const DefaultStory = () => <TransactionAccountDetails />;`
`42`	`42`
`43`		`-DefaultStory.storyName = 'Default';`
	`43`	`+DefaultStory.storyName = 'Default';`
-Original file line number
+Diff line change
       />
     </StoryWrapper>
   ),
 -};
 +};