fix lint:tsc

ui/components/app/assets/nfts/nft-details/nft-full-image.tsx

@@ -24,9 +24,11 @@ import { useI18nContext } from '../../../../../hooks/useI18nContext';
 import { ASSET_ROUTE } from '../../../../../helpers/constants/routes';
 import useGetAssetImageUrl from '../../../../../hooks/useGetAssetImageUrl';
 
+type Params = { asset: string; id: string };
+
 export default function NftFullImage() {
   const t = useI18nContext();
-  const { asset, id } = useParams<{ asset: string; id: string }>();
+  const { asset, id } = useParams<Params>() as Params;
   const nfts = useSelector(getNfts);
   const nft = nfts.find(
     ({ address, tokenId }: { address: string; tokenId: string }) =>

ui/components/multichain/account-list-menu/account-list-menu.test.tsx

@@ -105,7 +105,6 @@ describe('AccountListMenu', () => {
     jest
       .spyOn(reactRouterDom, 'useHistory')
       .mockImplementation()
-      // @ts-expect-error mocking history return
       .mockReturnValue({ push: historyPushMock });
   });
 

ui/components/multichain/pages/connections/connections.test.tsx

@@ -1,13 +1,12 @@
 import React from 'react';
-import { Router, Route } from 'react-router-dom'; // Import Router and Route
-import { createMemoryHistory } from 'history';
+import { MemoryRouter, Route } from 'react-router-dom';
+import mockState from '../../../../../test/data/mock-state.json';
 import {
   fireEvent,
   renderWithProvider,
   waitFor,
 } from '../../../../../test/jest';
 import configureStore from '../../../../store/store';
-import mockState from '../../../../../test/data/mock-state.json';
 import { Connections } from './connections';
 
 describe('Connections Content', () => {
@@ -88,46 +87,43 @@ describe('Connections Content', () => {
   });
 
   it('should render correctly', () => {
-    const history = createMemoryHistory();
-    history.push('/connect/https%3A%2F%2Fmetamask.github.io');
-
     const { container, getByTestId } = renderWithProvider(
-      <Router history={history}>
+      <MemoryRouter
+        initialEntries={['/connect/https%3A%2F%2Fmetamask.github.io']}
+      >
         <Route path="/connect/:origin">
           <Connections />
         </Route>
-      </Router>,
+      </MemoryRouter>,
       connectedStore,
     );
     expect(container).toMatchSnapshot();
     expect(getByTestId('connections-page')).toBeInTheDocument();
   });
 
   it('it should render Disconnect all Account button of the page', () => {
-    const history = createMemoryHistory();
-    history.push('/connect/https%3A%2F%2Fmetamask.github.io');
-
     const { getByText } = renderWithProvider(
-      <Router history={history}>
+      <MemoryRouter
+        initialEntries={['/connect/https%3A%2F%2Fmetamask.github.io']}
+      >
         <Route path="/connect/:origin">
           <Connections />
         </Route>
-      </Router>,
+      </MemoryRouter>,
       connectedStore,
     );
     expect(getByText('Disconnect all accounts')).toBeInTheDocument();
   });
 
   it('it should trigger disconnect all accounts modal flow when disconnect all accounts button is clicked', async () => {
-    const history = createMemoryHistory();
-    history.push('/connect/https%3A%2F%2Fmetamask.github.io');
-
     const { getByText, getByTestId } = renderWithProvider(
-      <Router history={history}>
+      <MemoryRouter
+        initialEntries={['/connect/https%3A%2F%2Fmetamask.github.io']}
+      >
         <Route path="/connect/:origin">
           <Connections />
         </Route>
-      </Router>,
+      </MemoryRouter>,
       connectedStore,
     );
 

ui/components/multichain/pages/connections/connections.tsx

@@ -67,6 +67,8 @@ import {
 } from './components/connections.types';
 import { NoConnectionContent } from './components/no-connection';
 
+type Params = { origin: string };
+
 export const Connections = () => {
   const t = useI18nContext();
   const dispatch = useDispatch();
@@ -85,10 +87,9 @@ export const Connections = () => {
     setShowDisconnectedAllAccountsUpdatedToast,
   ] = useState(false);
 
-  const urlParams: { origin: string } = useParams();
-  const securedOrigin = decodeURIComponent(urlParams.origin);
+  const { origin } = useParams<Params>() as Params;
+  const activeTabOrigin = decodeURIComponent(origin);
 
-  const activeTabOrigin: string = securedOrigin;
   // TODO: Replace `any` with type
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const subjectMetadata: { [key: string]: any } = useSelector(
@@ -246,7 +247,7 @@ export const Connections = () => {
             textAlign={TextAlign.Center}
             ellipsis
           >
-            {getURLHost(securedOrigin)}
+            {getURLHost(activeTabOrigin)}
           </Text>
         </Box>
       </Header>

ui/components/multichain/pages/review-permissions-page/review-permissions-page.tsx

@@ -56,11 +56,13 @@ import { MergedInternalAccount } from '../../../../selectors/selectors.types';
 import { TEST_CHAINS } from '../../../../../shared/constants/network';
 import { SiteCell } from '.';
 
+type Params = { origin: string };
+
 export const ReviewPermissions = () => {
   const t = useI18nContext();
   const dispatch = useDispatch();
   const history = useHistory();
-  const urlParams: { origin: string } = useParams();
+  const urlParams = useParams<Params>() as Params;
   const securedOrigin = decodeURIComponent(urlParams.origin);
   const [showAccountToast, setShowAccountToast] = useState(false);
   const [showNetworkToast, setShowNetworkToast] = useState(false);

ui/pages/asset/asset.tsx

@@ -13,12 +13,14 @@ import { DEFAULT_ROUTE } from '../../helpers/constants/routes';
 import NativeAsset from './components/native-asset';
 import TokenAsset from './components/token-asset';
 
+type Params = { asset: string; id: string };
+
 /** A page representing a native, token, or NFT asset */
 const Asset = () => {
   const nativeCurrency = useSelector(getNativeCurrency);
   const tokens = useSelector(getTokens);
   const nfts = useSelector(getNfts);
-  const { asset, id } = useParams<{ asset: string; id: string }>();
+  const { asset, id } = useParams<Params>() as Params;
 
   const token = tokens.find(({ address }: { address: string }) =>
     isEqualCaseInsensitive(address, asset),

ui/pages/bridge/index.tsx

@@ -40,7 +40,6 @@ const CrossChainSwap = () => {
   const redirectToDefaultRoute = async () => {
     history.push({
       pathname: DEFAULT_ROUTE,
-      // @ts-expect-error - property 'state' does not exist on type PartialPath.
       state: { stayOnHomePage: true },
     });
     dispatch(clearSwapsState());

ui/pages/confirmations/confirm/stories/utils.tsx

@@ -46,7 +46,7 @@ export function ConfirmStoryTemplate(
           }`,
         ]}
       >
-        <Route path="/confirmation/:id" render={() => <ConfirmPage />} />
+        <Route path="/confirmation/:id" element={<ConfirmPage />} />
       </MemoryRouter>
     </Provider>
   );