Upgrade react-router-dom version

apps/ans/frontend/src/App.tsx

@@ -11,12 +11,7 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import React from 'react';
 import { Helmet, HelmetProvider } from 'react-helmet-async';
-import {
-  createBrowserRouter,
-  createRoutesFromElements,
-  Route,
-  RouterProvider,
-} from 'react-router-dom';
+import { createBrowserRouter, createRoutesFromElements, Route, RouterProvider } from 'react-router';
 
 import { CssBaseline, ThemeProvider } from '@mui/material';
 

apps/ans/frontend/src/routes/authCheck.tsx

@@ -7,7 +7,7 @@ import {
   Login,
   useUserState,
 } from '@lfdecentralizedtrust/splice-common-frontend';
-import { Outlet } from 'react-router-dom';
+import { Outlet } from 'react-router';
 
 import { useAnsConfig } from '../utils';
 

apps/ans/frontend/src/routes/postPayment.tsx

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 import { Loading } from '@lfdecentralizedtrust/splice-common-frontend';
 import React from 'react';
-import { Link, useSearchParams } from 'react-router-dom';
+import { Link, useSearchParams } from 'react-router';
 
 import { CloseRounded, DoneRounded } from '@mui/icons-material';
 import { Button, Stack, Typography } from '@mui/material';

apps/ans/frontend/src/routes/root.tsx

@@ -7,7 +7,7 @@ import {
   PartyId,
   useUserState,
 } from '@lfdecentralizedtrust/splice-common-frontend';
-import { Outlet } from 'react-router-dom';
+import { Outlet } from 'react-router';
 
 import { Box, Button, Stack } from '@mui/material';
 

apps/common/frontend/package.json

@@ -18,9 +18,11 @@
     "@daml/types": "file:../../../nix/vendored/daml-types-0.0.0.tgz",
     "@js-temporal/polyfill": "^0.4.4",
     "@lfdecentralizedtrust/splice-common-frontend-utils": "0.1.0",
+    "@lfdecentralizedtrust/splitwell-openapi": "0.0.1",
+    "@lfdecentralizedtrust/sv-openapi": "0.0.1",
     "@tanstack/react-query": "5.72.2",
-    "common-typeface-termina": "1.0.0",
     "common-typeface-lato": "1.0.0",
+    "common-typeface-termina": "1.0.0",
     "date-fns": "2.29.3",
     "decimal.js-light": "2.5.1",
     "dompurify": "3.2.4",
@@ -30,9 +32,7 @@
     "jsondiffpatch": "0.6.0",
     "react-intersection-observer": "^9.15.1",
     "react-oidc-context": "2.2.2",
-    "react-router-dom": "6.8.1",
-    "@lfdecentralizedtrust/splitwell-openapi": "0.0.1",
-    "@lfdecentralizedtrust/sv-openapi": "0.0.1",
+    "react-router": "^7.12.0",
     "web-vitals": "4.2.4",
     "xunit-viewer": "^10.6.1",
     "zod": "3.19.1"

apps/common/frontend/src/components/ErrorRouterPage.tsx

@@ -1,7 +1,7 @@
 // Copyright (c) 2024 Digital Asset (Switzerland) GmbH and/or its affiliates. All rights reserved.
 // SPDX-License-Identifier: Apache-2.0
 import React from 'react';
-import { Link as RouterLink, useRouteError } from 'react-router-dom';
+import { Link as RouterLink, useRouteError } from 'react-router';
 
 import { Box, Link, Typography } from '@mui/material';
 

apps/common/frontend/src/components/Header.tsx

@@ -1,7 +1,7 @@
 // Copyright (c) 2024 Digital Asset (Switzerland) GmbH and/or its affiliates. All rights reserved.
 // SPDX-License-Identifier: Apache-2.0
 import * as React from 'react';
-import { NavLink } from 'react-router-dom';
+import { NavLink } from 'react-router';
 
 import { Warning } from '@mui/icons-material';
 import { Badge, Box, Stack, Toolbar } from '@mui/material';

apps/scan/frontend/src/App.tsx

@@ -7,12 +7,7 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import React from 'react';
 import { Helmet, HelmetProvider } from 'react-helmet-async';
-import {
-  createBrowserRouter,
-  createRoutesFromElements,
-  Route,
-  RouterProvider,
-} from 'react-router-dom';
+import { createBrowserRouter, createRoutesFromElements, Route, RouterProvider } from 'react-router';
 
 import { CssBaseline } from '@mui/material';
 import { ThemeProvider } from '@mui/material';

apps/scan/frontend/src/routes/root.tsx

@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 import { useGetRoundOfLatestData } from '@lfdecentralizedtrust/splice-common-frontend/scan-api';
 import React, { useMemo } from 'react';
-import { NavLink, Outlet, useLocation } from 'react-router-dom';
+import { NavLink, Outlet, useLocation } from 'react-router';
 
 import { Tab, Tabs, Typography, Box, Grid } from '@mui/material';
 
@@ -19,7 +19,7 @@ const Root: React.FC = () => {
     { name: 'Synchronizer Fees Leaderboard', path: 'synchronizer-fees-leaderboard' },
     { name: 'Validator Liveness Leaderboard', path: 'validator-faucets-leaderboard' },
   ];
-  // Unfortunately, NavLink from react-router-dom doesn't realize that 'recent-activity' is the index at '/',
+  // Unfortunately, NavLink from react-router doesn't realize that 'recent-activity' is the index at '/',
   // so we need to set it as active manually.
   const currentPath = useLocation().pathname;
   const selected = navLinks.find(({ path }) => currentPath.includes(path)) || navLinks[0];

apps/splitwell/frontend/package.json

@@ -18,14 +18,14 @@
     "@daml/types": "file:../../../nix/vendored/daml-types-0.0.0.tgz",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
+    "@lfdecentralizedtrust/splice-common-frontend": "0.1.0",
     "@mui/icons-material": "^7.3.4",
     "@mui/material": "^7.3.4",
     "@tanstack/react-query": "5.72.2",
-    "@lfdecentralizedtrust/splice-common-frontend": "0.1.0",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-helmet-async": "^2.0.5",
-    "react-router-dom": "6.8.1",
+    "react-router": "^7.12.0",
     "uuid": "9.0.0",
     "web-vitals": "4.2.4"
   },

apps/splitwell/frontend/src/App.tsx

@@ -14,12 +14,7 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import React from 'react';
 import { Helmet, HelmetProvider } from 'react-helmet-async';
-import {
-  createBrowserRouter,
-  createRoutesFromElements,
-  Route,
-  RouterProvider,
-} from 'react-router-dom';
+import { createBrowserRouter, createRoutesFromElements, Route, RouterProvider } from 'react-router';
 
 import { CssBaseline, ThemeProvider } from '@mui/material';
 

apps/splitwell/frontend/src/routes/authCheck.tsx

@@ -7,7 +7,7 @@ import {
   Login,
   useUserState,
 } from '@lfdecentralizedtrust/splice-common-frontend';
-import { Outlet } from 'react-router-dom';
+import { Outlet } from 'react-router';
 
 interface AuthCheckProps {
   authConfig: AuthConfig;

apps/splitwell/frontend/src/routes/root.tsx

@@ -5,7 +5,7 @@ import {
   useUserState,
   usePrimaryParty,
 } from '@lfdecentralizedtrust/splice-common-frontend';
-import { Outlet } from 'react-router-dom';
+import { Outlet } from 'react-router';
 
 import { AppBar, Box, Button, CssBaseline, Toolbar, Typography } from '@mui/material';
 

apps/sv/frontend/src/App.tsx

@@ -21,7 +21,7 @@ import {
   createRoutesFromElements,
   useLocation,
   useNavigate,
-} from 'react-router-dom';
+} from 'react-router';
 
 import { CssBaseline, ThemeProvider } from '@mui/material';
 import { LocalizationProvider } from '@mui/x-date-pickers';

apps/sv/frontend/src/__tests__/governance/action-required-section.test.tsx

@@ -8,7 +8,7 @@ import {
 } from '../../components/governance/ActionRequiredSection';
 import { ContractId } from '@daml/types';
 import { VoteRequest } from '@daml.js/splice-dso-governance/lib/Splice/DsoRules';
-import { MemoryRouter } from 'react-router-dom';
+import { MemoryRouter } from 'react-router';
 import dayjs from 'dayjs';
 import { dateTimeFormatISO } from '@lfdecentralizedtrust/splice-common-frontend-utils';
 

apps/sv/frontend/src/__tests__/governance/create-proposal.test.tsx

@@ -3,7 +3,7 @@
 
 import { render, screen, waitFor } from '@testing-library/react';
 import { describe, expect, test } from 'vitest';
-import { MemoryRouter } from 'react-router-dom';
+import { MemoryRouter } from 'react-router';
 import { ThemeProvider } from '@emotion/react';
 import { theme } from '../../../../../common/frontend/lib/theme';
 import { CreateProposal } from '../../routes/createProposal';
@@ -35,14 +35,15 @@ async function checkActionSelection(actionName: string, actionValue: string, tes
 
   await waitFor(async () => {
     const actionToSelect = screen.getByText(actionName);
-    expect(actionToSelect).toBeDefined();
+    expect(actionToSelect).toBeInTheDocument();
     await user.click(actionToSelect);
   });
 
   const nextButton = screen.getByText('Next');
+  expect(nextButton).toBeInTheDocument();
   await user.click(nextButton);
 
-  const actionInput = screen.getByTestId(testId);
+  const actionInput = await screen.findByTestId(testId);
   const action = createProposalActions.find(a => a.value === actionValue);
   expect(actionInput.getAttribute('value')).toBe(action!.name);
 }
@@ -66,25 +67,66 @@ describe('Create Proposal', () => {
     user.click(selectInput);
 
     await waitFor(() => {
-      expect(screen.getByText('Offboard Member')).toBeTruthy();
-      expect(screen.getByText('Feature Application')).toBeTruthy();
-      expect(screen.getByText('Unfeature Application')).toBeTruthy();
-      expect(screen.getByText('Set Dso Rules Configuration')).toBeTruthy();
-      expect(screen.getByText('Set Amulet Rules Configuration')).toBeTruthy();
-      expect(screen.getByText('Update SV Reward Weight')).toBeTruthy();
+      expect(screen.getByText('Offboard Member')).toBeInTheDocument();
+      expect(screen.getByText('Feature Application')).toBeInTheDocument();
+      expect(screen.getByText('Unfeature Application')).toBeInTheDocument();
+      expect(screen.getByText('Set Dso Rules Configuration')).toBeInTheDocument();
+      expect(screen.getByText('Set Amulet Rules Configuration')).toBeInTheDocument();
+      expect(screen.getByText('Update SV Reward Weight')).toBeInTheDocument();
+      expect(screen.getByText('Create Unclaimed Activity Record')).toBeInTheDocument();
     });
   });
 
-  test('Update Reward Weight Form is rendered after action selection', async () => {
+  test('Offboard SV Form is rendered after action selection', async () => {
+    await checkActionSelection('Offboard Member', 'SRARC_OffboardSv', 'offboard-sv-action');
+  });
+
+  test('Feature Application Form is rendered after action selection', async () => {
+    await checkActionSelection(
+      'Feature Application',
+      'SRARC_GrantFeaturedAppRight',
+      'grant-featured-app-action'
+    );
+  });
+
+  test('Unfeature Application Form is rendered after action selection', async () => {
+    await checkActionSelection(
+      'Unfeature Application',
+      'SRARC_RevokeFeaturedAppRight',
+      'revoke-featured-app-action'
+    );
+  });
+
+  test('Set Dso Rules Configuration Form is rendered after action selection', async () => {
+    await checkActionSelection(
+      'Set Dso Rules Configuration',
+      'SRARC_SetConfig',
+      'set-dso-config-rules-action'
+    );
+  });
+
+  test('Set Amulet Rules Configuration Form is rendered after action selection', async () => {
+    await checkActionSelection(
+      'Set Amulet Rules Configuration',
+      'CRARC_SetConfig',
+      'set-amulet-config-rules-action'
+    );
+  });
+
+  test('Update SV Reward Weight Form is rendered after action selection', async () => {
     await checkActionSelection(
       'Update SV Reward Weight',
       'SRARC_UpdateSvRewardWeight',
       'update-sv-reward-weight-action'
     );
   });
 
-  test('Offboard SV Form is rendered after action selection', async () => {
-    await checkActionSelection('Offboard Member', 'SRARC_OffboardSv', 'offboard-sv-action');
+  test('Create Unclaimed Activity Record Form is rendered after action selection', async () => {
+    await checkActionSelection(
+      'Create Unclaimed Activity Record',
+      'SRARC_CreateUnallocatedUnclaimedActivityRecord',
+      'create-unallocated-unclaimed-activity-record-action'
+    );
   });
 
   test('Display cancel and next buttons', () => {