Merge branch 'main' into feat/add-gator-permissions-feature-flag

Author: V00D00-child

ui/components/multichain/network-manager/network-manager.stories.tsx

@@ -3,7 +3,7 @@ import { Provider } from 'react-redux';
 import configureStore from '../../../store/store';
 import testData from '../../../../.storybook/test-data';
 
-import { NetworkManager } from '.';
+import { NetworkManager } from './network-manager';
 
 const store = configureStore(testData);
 

ui/components/multichain/network-manager/network-manager.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { screen, fireEvent } from '@testing-library/react';
 import { RpcEndpointType } from '@metamask/network-controller';
-import { renderWithProvider } from '../../../../test/jest';
+import { renderWithProvider } from '../../../../test/lib/render-helpers-navigate';
 import configureStore from '../../../store/store';
 import mockState from '../../../../test/data/mock-state.json';
 import { SOLANA_WALLET_SNAP_ID } from '../../../../shared/lib/accounts';

ui/components/multichain/network-manager/network-manager.tsx

@@ -5,12 +5,11 @@ import {
 import React, { useCallback, useMemo } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 import {
-  MemoryRouter,
   Route,
-  Switch,
-  useHistory,
+  Routes,
+  useNavigate,
   useLocation,
-} from 'react-router-dom';
+} from 'react-router-dom-v5-compat';
 import * as URI from 'uri-js';
 import { useI18nContext } from '../../../hooks/useI18nContext';
 import { useNetworkFormState } from '../../../pages/settings/networks-tab/networks-form/networks-form-state';
@@ -32,17 +31,15 @@ import { AddNetwork } from './components/add-network';
 import { NetworkTabs } from './network-tabs';
 import { useNetworkManagerState } from './hooks/useNetworkManagerState';
 
-// Router content component
-const NetworkManagerRouter = () => {
+export const NetworkManager = () => {
+  const dispatch = useDispatch();
   const t = useI18nContext();
-  const history = useHistory();
+  const navigate = useNavigate();
   const location = useLocation();
-  const dispatch = useDispatch();
 
   const { initialTab } = useNetworkManagerState();
-
   const handleNewNetwork = () => {
-    history.push('/add');
+    navigate('/add');
   };
 
   const [, evmNetworks] = useSelector(
@@ -83,13 +80,13 @@ const NetworkManagerRouter = () => {
         });
 
         if (location.pathname === '/edit-rpc') {
-          history.push('/edit');
+          navigate('/edit');
         } else {
-          history.push('/add');
+          navigate('/add');
         }
       }
     },
-    [history, networkFormState],
+    [navigate, networkFormState, location.pathname],
   );
 
   const handleAddExplorerUrl = useCallback(
@@ -109,137 +106,175 @@ const NetworkManagerRouter = () => {
               networkFormState.blockExplorers.blockExplorerUrls.length,
           });
           if (location.pathname === '/edit-explorer-url') {
-            history.push('/edit');
+            navigate('/edit');
           } else {
-            history.push('/add');
+            navigate('/add');
           }
           onComplete?.();
         }
       };
     },
-    [networkFormState, history],
+    [networkFormState, navigate, location.pathname],
   );
 
   const handleClose = () => {
     dispatch(hideModal());
-    history.push('/');
+    navigate('/');
   };
 
   const handleGoHome = () => {
-    history.push('/');
+    navigate('/');
   };
 
   const handleEditOnComplete = useCallback(() => {
-    history.push('/edit');
-  }, [history]);
+    navigate('/edit');
+  }, [navigate]);
 
   const handleAddOnComplete = useCallback(() => {
-    history.push('/add');
-  }, [history]);
-
-  return (
-    <Switch>
-      <Route path="/add">
-        <ModalHeader
-          onClose={handleClose}
-          onBack={handleGoHome}
-          closeButtonProps={{ 'data-testid': 'modal-header-close-button' }}
-        >
-          {t('addNetwork')}
-        </ModalHeader>
-        <AddNetwork
-          networkFormState={networkFormState}
-          network={editedNetwork as UpdateNetworkFields}
-        />
-      </Route>
-      <Route path="/add-rpc">
-        <ModalHeader
-          onClose={handleClose}
-          onBack={handleNewNetwork}
-          closeButtonProps={{ 'data-testid': 'modal-header-close-button' }}
-        >
-          {t('addRpcUrl')}
-        </ModalHeader>
-        <AddRpcUrlModal onAdded={handleAddRPC} />
-      </Route>
-      <Route path="/edit-rpc">
-        <ModalHeader
-          onClose={handleClose}
-          onBack={handleEditOnComplete}
-          closeButtonProps={{ 'data-testid': 'modal-header-close-button' }}
-        >
-          {t('addRpcUrl')}
-        </ModalHeader>
-        <AddRpcUrlModal onAdded={handleAddRPC} />
-      </Route>
-      <Route path="/add-explorer-url">
-        <ModalHeader
-          onClose={handleClose}
-          onBack={handleNewNetwork}
-          closeButtonProps={{ 'data-testid': 'modal-header-close-button' }}
-        >
-          {t('addBlockExplorerUrl')}
-        </ModalHeader>
-        <AddBlockExplorerModal
-          onAdded={handleAddExplorerUrl(handleAddOnComplete)}
-        />
-      </Route>
-      <Route path="/edit-explorer-url">
-        <ModalHeader
-          onClose={handleClose}
-          onBack={handleNewNetwork}
-          closeButtonProps={{ 'data-testid': 'modal-header-close-button' }}
-        >
-          {t('addBlockExplorerUrl')}
-        </ModalHeader>
-        <AddBlockExplorerModal
-          onAdded={handleAddExplorerUrl(handleEditOnComplete)}
-        />
-      </Route>
-      <Route path="/edit">
-        <ModalHeader
-          onClose={handleClose}
-          onBack={handleGoHome}
-          closeButtonProps={{ 'data-testid': 'modal-header-close-button' }}
-        >
-          {t('editNetwork')}
-        </ModalHeader>
-        <AddNetwork
-          networkFormState={networkFormState}
-          network={editedNetwork as UpdateNetworkFields}
-          isEdit={true}
-        />
-      </Route>
-      <Route path="/select-rpc">
-        <ModalHeader
-          onClose={handleClose}
-          onBack={handleGoHome}
-          closeButtonProps={{ 'data-testid': 'modal-header-close-button' }}
-        >
-          {t('selectRpcUrl')}
-        </ModalHeader>
-        <SelectRpcUrlModal onNetworkChange={handleClose} />
-      </Route>
-      <Route path="/">
-        <NetworkTabs initialTab={initialTab} />
-      </Route>
-    </Switch>
-  );
-};
-
-export const NetworkManager = () => {
-  const dispatch = useDispatch();
-
-  const onClose = useCallback(() => {
-    dispatch(hideModal());
-  }, [dispatch]);
+    navigate('/add');
+  }, [navigate]);
 
   return (
-    <Modal isOpen onClose={onClose} isClosedOnEscapeKey isClosedOnOutsideClick>
+    <Modal
+      isOpen
+      onClose={handleClose}
+      isClosedOnEscapeKey
+      isClosedOnOutsideClick
+    >
       <ModalContent size={ModalContentSize.Md}>
-        <MemoryRouter initialEntries={['/']}>
-          <NetworkManagerRouter />
-        </MemoryRouter>
+        <Routes>
+          <Route
+            path="/add"
+            element={
+              <>
+                <ModalHeader
+                  onClose={handleClose}
+                  onBack={handleGoHome}
+                  closeButtonProps={{
+                    'data-testid': 'modal-header-close-button',
+                  }}
+                >
+                  {t('addNetwork')}
+                </ModalHeader>
+                <AddNetwork
+                  networkFormState={networkFormState}
+                  network={editedNetwork as UpdateNetworkFields}
+                />
+              </>
+            }
+          />
+          <Route
+            path="/add-rpc"
+            element={
+              <>
+                <ModalHeader
+                  onClose={handleClose}
+                  onBack={handleNewNetwork}
+                  closeButtonProps={{
+                    'data-testid': 'modal-header-close-button',
+                  }}
+                >
+                  {t('addRpcUrl')}
+                </ModalHeader>
+                <AddRpcUrlModal onAdded={handleAddRPC} />
+              </>
+            }
+          />
+          <Route
+            path="/edit-rpc"
+            element={
+              <>
+                <ModalHeader
+                  onClose={handleClose}
+                  onBack={handleEditOnComplete}
+                  closeButtonProps={{
+                    'data-testid': 'modal-header-close-button',
+                  }}
+                >
+                  {t('addRpcUrl')}
+                </ModalHeader>
+                <AddRpcUrlModal onAdded={handleAddRPC} />
+              </>
+            }
+          />
+          <Route
+            path="/add-explorer-url"
+            element={
+              <>
+                <ModalHeader
+                  onClose={handleClose}
+                  onBack={handleNewNetwork}
+                  closeButtonProps={{
+                    'data-testid': 'modal-header-close-button',
+                  }}
+                >
+                  {t('addBlockExplorerUrl')}
+                </ModalHeader>
+                <AddBlockExplorerModal
+                  onAdded={handleAddExplorerUrl(handleAddOnComplete)}
+                />
+              </>
+            }
+          />
+          <Route
+            path="/edit-explorer-url"
+            element={
+              <>
+                <ModalHeader
+                  onClose={handleClose}
+                  onBack={handleNewNetwork}
+                  closeButtonProps={{
+                    'data-testid': 'modal-header-close-button',
+                  }}
+                >
+                  {t('addBlockExplorerUrl')}
+                </ModalHeader>
+                <AddBlockExplorerModal
+                  onAdded={handleAddExplorerUrl(handleEditOnComplete)}
+                />
+              </>
+            }
+          />
+          <Route
+            path="/edit"
+            element={
+              <>
+                <ModalHeader
+                  onClose={handleClose}
+                  onBack={handleGoHome}
+                  closeButtonProps={{
+                    'data-testid': 'modal-header-close-button',
+                  }}
+                >
+                  {t('editNetwork')}
+                </ModalHeader>
+                <AddNetwork
+                  networkFormState={networkFormState}
+                  network={editedNetwork as UpdateNetworkFields}
+                  isEdit={true}
+                />
+              </>
+            }
+          />
+          <Route
+            path="/select-rpc"
+            element={
+              <>
+                <ModalHeader
+                  onClose={handleClose}
+                  onBack={handleGoHome}
+                  closeButtonProps={{
+                    'data-testid': 'modal-header-close-button',
+                  }}
+                >
+                  {t('selectRpcUrl')}
+                </ModalHeader>
+                <SelectRpcUrlModal onNetworkChange={handleClose} />
+              </>
+            }
+          />
+          <Route path="/" element={<NetworkTabs initialTab={initialTab} />} />
+        </Routes>
       </ModalContent>
     </Modal>
   );