chore: migrating interactive-replacement-token-page to ts (#26115)

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**

<!--
Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change?
2. What is the improvement/solution?
-->

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/26115?quickstart=1)

## **Related issues**

Fixes:

## **Manual testing steps**

1. Go to this page...
2.
3.

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->

### **After**

<!-- [screenshots/recordings] -->

## **Pre-merge author checklist**

- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask
Extension Coding
Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [x] I’ve included tests if applicable
- [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [x] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [x] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

ui/pages/institutional/interactive-replacement-token-page/__snapshots__/interactive-replacement-token-page.test.js.snap → ui/pages/institutional/interactive-replacement-token-page/__snapshots__/interactive-replacement-token-page.test.tsx.snap

@@ -27,7 +27,6 @@ exports[`Interactive Replacement Token Page should reject if there are errors 1`
     >
       <div
         class="mm-box interactive-replacement-token-page mm-box--margin-right-7 mm-box--margin-left-7 mm-box--display-flex mm-box--color-text-alternative"
-        overflowwrap="break-word"
       >
         <div
           class="mm-box mm-box--display-flex mm-box--flex-direction-column mm-box--width-full"
@@ -79,10 +78,9 @@ exports[`Interactive Replacement Token Page should reject if there are errors 2`
     >
       <div
         class="mm-box interactive-replacement-token-page mm-box--margin-right-7 mm-box--margin-left-7 mm-box--display-flex mm-box--color-text-alternative"
-        overflowwrap="break-word"
       >
         <p
-          class="mm-box mm-text mm-text--body-md mm-box--color-text-default"
+          class="mm-box mm-text mm-text--body-md mm-text--overflow-wrap-break-word mm-box--color-text-default"
           data-testid="connect-error-message"
         >
           Please go to displayName and click the 'Connect to MMI' button within their user interface to connect your accounts to MMI again.

ui/pages/institutional/interactive-replacement-token-page/interactive-replacement-token-page.test.js → ui/pages/institutional/interactive-replacement-token-page/interactive-replacement-token-page.test.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { screen, act, fireEvent, waitFor } from '@testing-library/react';
 import configureMockStore from 'redux-mock-store';
+import { useHistory } from 'react-router-dom';
 import thunk from 'redux-thunk';
 import { renderWithProvider } from '../../../../test/lib/render-helpers';
 import mockState from '../../../../test/data/mock-state.json';
@@ -10,6 +11,15 @@ import { shortenAddress } from '../../../helpers/utils/util';
 import { getSelectedInternalAccountFromMockState } from '../../../../test/jest/mocks';
 import InteractiveReplacementTokenPage from '.';
 
+const mockHistoryPush = jest.fn();
+
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useHistory: () => ({
+    push: mockHistoryPush,
+  }),
+}));
+
 const custodianAccounts = [
   {
     address: '0x9d0ba4ddac06032527b140912ec808ab9451b788',
@@ -73,17 +83,13 @@ const connectRequests = [
     labels,
     origin: 'origin',
     environment: 'environment',
+    token: 'token1',
   },
 ];
 
-const props = {
-  history: {
-    push: jest.fn(),
-  },
-};
-
-const render = ({ newState } = {}) => {
+const render = ({ newState = {} } = {}) => {
   const mockSelectedInternalAccount = {
+    // @ts-expect-error: todo: fix mockState ts(2345) missing properties expected by the function
     ...getSelectedInternalAccountFromMockState(mockState),
     address,
   };
@@ -129,10 +135,7 @@ const render = ({ newState } = {}) => {
   const mockStore = configureMockStore(middlewares);
   const store = mockStore(state);
 
-  return renderWithProvider(
-    <InteractiveReplacementTokenPage {...props} />,
-    store,
-  );
+  return renderWithProvider(<InteractiveReplacementTokenPage />, store);
 };
 
 describe('Interactive Replacement Token Page', function () {
@@ -145,7 +148,9 @@ describe('Interactive Replacement Token Page', function () {
       SWAPS_CHAINID_DEFAULT_BLOCK_EXPLORER_URL_MAP[CHAIN_IDS.MAINNET]
     }address/${custodianAddress}`;
 
-    await act(async () => await render());
+    await act(async () => {
+      await render();
+    });
 
     expect(screen.getByText(accountName)).toBeInTheDocument();
     const link = screen.getByRole('link', {
@@ -189,14 +194,13 @@ describe('Interactive Replacement Token Page', function () {
   });
 
   it('should call onRemoveAddTokenConnectRequest, setCustodianNewRefreshToken, and dispatch showInteractiveReplacementTokenBanner when handleApprove is called', async () => {
-    const mostRecentOverviewPage = {
-      pathname: '/institutional-features/done',
-      state: {
-        description:
-          'You can now use your custodian accounts in MetaMask Institutional.',
-        imgSrc: 'iconUrl',
-        title: 'Your custodian token has been refreshed',
-      },
+    const history = useHistory();
+    const mostRecentOverviewPage = '/institutional-features/done';
+    const mostRecentOverviewPageState = {
+      description:
+        'You can now use your custodian accounts in MetaMask Institutional.',
+      imgSrc: 'iconUrl',
+      title: 'Your custodian token has been refreshed',
     };
 
     await act(async () => {
@@ -211,8 +215,11 @@ describe('Interactive Replacement Token Page', function () {
       environment: connectRequests[0].environment,
       token: connectRequests[0].token,
     });
-    expect(props.history.push).toHaveBeenCalled();
-    expect(props.history.push).toHaveBeenCalledWith(mostRecentOverviewPage);
+    expect(history.push).toHaveBeenCalled();
+    expect(history.push).toHaveBeenCalledWith(
+      mostRecentOverviewPage,
+      mostRecentOverviewPageState,
+    );
   });
 
   it('should reject if there are errors', async () => {