refactor: migrate from HashRouter to createHashRouter data router

Replace the legacy component-based HashRouter with the data router API
(createHashRouter + RouterProvider). This unlocks access to loader,
action, errorElement, native lazy, and useNavigation() for future use.

Changes:
- ui/pages/index.js: Replace HashRouter with createHashRouter +
  RouterProvider. Move context providers into a root layout route
  element (AppProviders) that renders Outlet. Error boundary fallback
  keeps a standalone HashRouter for the error page.
- ui/pages/routes/routes.component.tsx: Extract routeConfig to module
  level (removes useMemo with empty deps). Replace useRoutes() with
  Outlet — the data router handles route matching internally.
- ui/pages/routes/index.js: Re-export routeConfig for use by index.js.

Test helpers keep using MemoryRouter (recommended for unit tests by
React Router docs). No test file changes needed.

Co-authored-by: Francis Nepomuceno <n3ps@users.noreply.github.com>

Author: cursoragent

ui/pages/index.js

@@ -1,7 +1,12 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import { Provider } from 'react-redux';
-import { HashRouter } from 'react-router-dom';
+import {
+  HashRouter,
+  Outlet,
+  RouterProvider,
+  createHashRouter,
+} from 'react-router-dom';
 import { QueryClientProvider } from '@tanstack/react-query';
 import { captureException } from '../../shared/lib/sentry';
 import { I18nProvider, LegacyI18nProvider } from '../contexts/i18n';
@@ -18,7 +23,51 @@ import { queryClient } from '../contexts/query-client';
 import { HardwareWalletErrorProvider } from '../contexts/hardware-wallets';
 import ErrorPage from './error-page/error-page.component';
 
-import Routes from './routes';
+import Routes, { routeConfig } from './routes';
+
+/**
+ * Root layout route element containing all context providers.
+ * Renders <Outlet /> which is replaced by the matched child route (<Routes />).
+ */
+function AppProviders() {
+  return (
+    <MetaMetricsProvider>
+      <LegacyMetaMetricsProvider>
+        <I18nProvider>
+          <LegacyI18nProvider>
+            <QueryClientProvider client={queryClient}>
+              <AssetPollingProvider>
+                <MetamaskIdentityProvider>
+                  <MetamaskNotificationsProvider>
+                    <HardwareWalletErrorProvider>
+                      <ShieldSubscriptionProvider>
+                        <RiveWasmProvider>
+                          <Outlet />
+                        </RiveWasmProvider>
+                      </ShieldSubscriptionProvider>
+                    </HardwareWalletErrorProvider>
+                  </MetamaskNotificationsProvider>
+                </MetamaskIdentityProvider>
+              </AssetPollingProvider>
+            </QueryClientProvider>
+          </LegacyI18nProvider>
+        </I18nProvider>
+      </LegacyMetaMetricsProvider>
+    </MetaMetricsProvider>
+  );
+}
+
+const router = createHashRouter([
+  {
+    element: <AppProviders />,
+    children: [
+      {
+        element: <Routes />,
+        children: routeConfig,
+      },
+    ],
+  },
+]);
 
 class Index extends PureComponent {
   state = {};
@@ -53,31 +102,7 @@ class Index extends PureComponent {
 
     return (
       <Provider store={store}>
-        <HashRouter>
-          <MetaMetricsProvider>
-            <LegacyMetaMetricsProvider>
-              <I18nProvider>
-                <LegacyI18nProvider>
-                  <QueryClientProvider client={queryClient}>
-                    <AssetPollingProvider>
-                      <MetamaskIdentityProvider>
-                        <MetamaskNotificationsProvider>
-                          <HardwareWalletErrorProvider>
-                            <ShieldSubscriptionProvider>
-                              <RiveWasmProvider>
-                                <Routes />
-                              </RiveWasmProvider>
-                            </ShieldSubscriptionProvider>
-                          </HardwareWalletErrorProvider>
-                        </MetamaskNotificationsProvider>
-                      </MetamaskIdentityProvider>
-                    </AssetPollingProvider>
-                  </QueryClientProvider>
-                </LegacyI18nProvider>
-              </I18nProvider>
-            </LegacyMetaMetricsProvider>
-          </MetaMetricsProvider>
-        </HashRouter>
+        <RouterProvider router={router} />
       </Provider>
     );
   }

ui/pages/routes/index.js

@@ -1 +1,2 @@
 export { default } from './routes.component';
+export { routeConfig } from './routes.component';