perf(7292): Remove LegacyI18nProvider (legacy context bridge) and LegacyMetaMetricsProvider (#43483)

<!--
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**
React 18 emits `childContextTypes` deprecation warnings for
`LegacyI18nProvider` in `ui/contexts/i18n.js`. This class component
bridges `I18nContext` (modern `createContext`) into the old
`childContextTypes` API so legacy class components can access
`this.context.t`. Warning appears in ~795 test files.

Also the same pattern, `LegacyMetaMetricsProvider` in
`ui/contexts/metametrics.tsx` bridges `MetaMetricsContext `into legacy
`childContextTypes`. Warning appears in ~782 test files.


<!--
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?
-->

## **Changelog**

<!--
If this PR is not End-User-Facing and should not show up in the
CHANGELOG, you can choose to either:
1. Write `CHANGELOG entry: null`
2. Label with `no-changelog`

If this PR is End-User-Facing, please write a short User-Facing
description in the past tense like:
`CHANGELOG entry: Added a new tab for users to see their NFTs`
`CHANGELOG entry: Fixed a bug that was causing some NFTs to flicker`

(This helps the Release Engineer do their job more quickly and
accurately)
-->

CHANGELOG entry: null

## **Related issues**

Fixes: MetaMask/MetaMask-planning#7292

## **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**

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

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] 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.

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> **Medium Risk**
> Touches many UI surfaces (connect, permissions, home, unlock,
transactions) for i18n and analytics wiring; behavior should be
equivalent but regressions are possible in untested class-component
paths.
> 
> **Overview**
> Removes **`LegacyI18nProvider`** and **`LegacyMetaMetricsProvider`**,
which bridged modern `createContext` into deprecated `childContextTypes`
/ `getChildContext` (React 18 warnings in large test suites).
> 
> **i18n:** Class components now use `static contextType = I18nContext`
and treat context as the `t` function directly (`const t = this.context`
/ `this.context('key')`) instead of `this.context.t`. **`I18nProvider`**
in `ui/contexts/i18n.js` is simplified (no legacy wrapper).
> 
> **MetaMetrics:** Components that used legacy `this.context.trackEvent`
get **`trackEvent` via props** from thin functional wrappers using
`useContext(MetaMetricsContext)` (e.g. `PermissionPageContainer`,
`Home`, `UnlockPage`, `ConfirmEncryptionPublicKey`,
`TransactionListItemDetails` container). **`UnlockPage`** drops
`withMetaMetrics` in favor of that wrapper pattern.
> 
> **App shell & tests:** Storybook, `ui/pages/index.js`, and render
helpers no longer nest legacy providers; tests wrap with `I18nContext` /
`MetaMetricsContext` only where needed.
> 
> <sup>Reviewed by [Cursor Bugbot](https://cursor.com/bugbot) for commit
5a70d5b. Bugbot is set up for automated
code reviews on this repo. Configure
[here](https://www.cursor.com/dashboard/bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

---------

Co-authored-by: Cursor <cursoragent@cursor.com>

Author: DDDDDanica

.storybook/i18n.js

@@ -1,4 +1,4 @@
-import React, { Component, useMemo } from 'react';
+import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { getMessage } from '../ui/helpers/utils/i18n-helper';
 import { I18nContext } from '../ui/contexts/i18n';
@@ -29,29 +29,3 @@ I18nProvider.propTypes = {
 I18nProvider.defaultProps = {
   children: undefined,
 };
-
-export class LegacyI18nProvider extends Component {
-  static propTypes = {
-    children: PropTypes.node,
-  };
-
-  static defaultProps = {
-    children: undefined,
-  };
-
-  static contextType = I18nContext;
-
-  static childContextTypes = {
-    t: PropTypes.func,
-  };
-
-  getChildContext() {
-    return {
-      t: this.context,
-    };
-  }
-
-  render() {
-    return this.props.children;
-  }
-}

.storybook/metametrics.js

@@ -1,16 +1,8 @@
 import React from 'react';
-import {
-  MetaMetricsProvider,
-  LegacyMetaMetricsProvider
-} from '../ui/contexts/metametrics';
+import { MetaMetricsProvider } from '../ui/contexts/metametrics';
 
-const MetaMetricsProviderStorybook = (props) => 
-    (
-        <MetaMetricsProvider>
-          <LegacyMetaMetricsProvider>
-            {props.children}
-          </LegacyMetaMetricsProvider>
-        </MetaMetricsProvider>
-  );
+const MetaMetricsProviderStorybook = (props) => (
+  <MetaMetricsProvider>{props.children}</MetaMetricsProvider>
+);
 
-export default MetaMetricsProviderStorybook
+export default MetaMetricsProviderStorybook;

.storybook/preview.js

@@ -9,7 +9,7 @@ import configureStore from '../ui/store/store';
 import '../ui/css/index.scss';
 import localeList from '../app/_locales/index.json';
 import * as allLocales from './locales';
-import { I18nProvider, LegacyI18nProvider } from './i18n';
+import { I18nProvider } from './i18n';
 import testData from './test-data.js';
 import { MemoryRouter, Routes, Route } from 'react-router-dom';
 import { setBackgroundConnection } from '../ui/store/background-connection';
@@ -142,11 +142,9 @@ const metamaskDecorator = (story, context) => {
               current={current}
               en={allLocales.en}
             >
-              <LegacyI18nProvider>
-                <Routes>
-                  <Route path={path} element={<StoryComponent />} />
-                </Routes>
-              </LegacyI18nProvider>
+              <Routes>
+                <Route path={path} element={<StoryComponent />} />
+              </Routes>
             </I18nProvider>
           </AlertMetricsProvider>
         </MemoryRouter>

test/jest/console-baseline-integration.json

@@ -133,6 +133,7 @@
       "warn: ⚠️ React Router Future Flag": 1
     },
     "test/integration/notifications&auth/notifications-activation.test.tsx": {
+      "React: State updates on unmounted components": 1,
       "Reselect: Input stability warnings": 6,
       "warn: Selector unknown returned a different": 2,
       "warn: ⚠️ React Router Future Flag": 1

test/lib/render-helpers-navigate.js

@@ -9,11 +9,8 @@ import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import PropTypes from 'prop-types';
 import { noop } from 'lodash';
 import configureStore from '../../ui/store/store';
-import { I18nContext, LegacyI18nProvider } from '../../ui/contexts/i18n';
-import {
-  MetaMetricsContext,
-  LegacyMetaMetricsProvider,
-} from '../../ui/contexts/metametrics';
+import { I18nContext } from '../../ui/contexts/i18n';
+import { MetaMetricsContext } from '../../ui/contexts/metametrics';
 import { getMessage } from '../../ui/helpers/utils/i18n-helper';
 import * as enLocaleMessages from '../../app/_locales/en/messages.json';
 import {
@@ -140,17 +137,13 @@ export function createProviderWrapper(
     return (
       <MemoryRouter>
         <I18nProvider currentLocale="en" current={en} en={en}>
-          <LegacyI18nProvider>
-            <UIMessengerProvider value={uiMessenger}>
-              <MetaMetricsContext.Provider value={mockMetaMetricsContext}>
-                <LegacyMetaMetricsProvider>
-                  <QueryClientProvider client={queryClient}>
-                    {content}
-                  </QueryClientProvider>
-                </LegacyMetaMetricsProvider>
-              </MetaMetricsContext.Provider>
-            </UIMessengerProvider>
-          </LegacyI18nProvider>
+          <UIMessengerProvider value={uiMessenger}>
+            <MetaMetricsContext.Provider value={mockMetaMetricsContext}>
+              <QueryClientProvider client={queryClient}>
+                {content}
+              </QueryClientProvider>
+            </MetaMetricsContext.Provider>
+          </UIMessengerProvider>
         </I18nProvider>
       </MemoryRouter>
     );
@@ -255,7 +248,7 @@ export const renderHookWithProviderTyped = (
 export function renderWithLocalization(component) {
   const Wrapper = ({ children }) => (
     <I18nProvider currentLocale="en" current={en} en={en}>
-      <LegacyI18nProvider>{children}</LegacyI18nProvider>
+      {children}
     </I18nProvider>
   );
 

test/lib/render-helpers.js

@@ -3,7 +3,7 @@ import { render } from '@testing-library/react';
 import { userEvent } from '@testing-library/user-event';
 import PropTypes from 'prop-types';
 import { noop } from 'lodash';
-import { I18nContext, LegacyI18nProvider } from '../../ui/contexts/i18n';
+import { I18nContext } from '../../ui/contexts/i18n';
 import { getMessage } from '../../ui/helpers/utils/i18n-helper';
 import * as en from '../../app/_locales/en/messages.json';
 import { setupInitialStore, connectToBackground } from '../../ui';
@@ -38,7 +38,7 @@ I18nProvider.defaultProps = {
 export function renderWithLocalization(component) {
   const Wrapper = ({ children }) => (
     <I18nProvider currentLocale="en" current={en} en={en}>
-      <LegacyI18nProvider>{children}</LegacyI18nProvider>
+      {children}
     </I18nProvider>
   );
 

ui/components/app/connected-accounts-list/connected-accounts-list.component.js

@@ -11,13 +11,12 @@ import {
   Text,
 } from '../../component-library';
 import { MenuItem } from '../../ui/menu';
+import { I18nContext } from '../../../contexts/i18n';
 import ConnectedAccountsListItem from './connected-accounts-list-item';
 import ConnectedAccountsListOptions from './connected-accounts-list-options';
 
 export default class ConnectedAccountsList extends PureComponent {
-  static contextTypes = {
-    t: PropTypes.func.isRequired,
-  };
+  static contextType = I18nContext;
 
   static defaultProps = {
     accountToConnect: null,
@@ -87,7 +86,7 @@ export default class ConnectedAccountsList extends PureComponent {
 
   renderUnconnectedAccount() {
     const { accountToConnect, connectAccount } = this.props;
-    const { t } = this.context;
+    const t = this.context;
 
     if (!accountToConnect) {
       return null;
@@ -121,7 +120,7 @@ export default class ConnectedAccountsList extends PureComponent {
 
   renderListItemOptions(address) {
     const { accountWithOptionsShown } = this.state;
-    const { t } = this.context;
+    const t = this.context;
 
     return (
       <ConnectedAccountsListOptions
@@ -140,7 +139,7 @@ export default class ConnectedAccountsList extends PureComponent {
   }
 
   renderListItemAction(address) {
-    const { t } = this.context;
+    const t = this.context;
 
     return (
       <Text variant={TextVariant.bodyMd}>
@@ -158,7 +157,7 @@ export default class ConnectedAccountsList extends PureComponent {
   render() {
     const { connectedAccounts, selectedAddress, shouldRenderListOptions } =
       this.props;
-    const { t } = this.context;
+    const t = this.context;
 
     return (
       <>

ui/components/app/connected-sites-list/connected-sites-list.component.js

@@ -7,11 +7,10 @@ import { stripHttpsSchemeWithoutPort } from '../../../helpers/utils/util';
 import SiteOrigin from '../../ui/site-origin';
 import { Size } from '../../../helpers/constants/design-system';
 import { SnapIcon } from '../snaps/snap-icon';
+import { I18nContext } from '../../../contexts/i18n';
 
 export default class ConnectedSitesList extends Component {
-  static contextTypes = {
-    t: PropTypes.func,
-  };
+  static contextType = I18nContext;
 
   static propTypes = {
     connectedSubjects: PropTypes.arrayOf(
@@ -27,7 +26,7 @@ export default class ConnectedSitesList extends Component {
 
   getConnectedSitesListContent = () => {
     const { connectedSubjects, onDisconnect, getSnapName } = this.props;
-    const { t } = this.context;
+    const t = this.context;
     return connectedSubjects.map((subject) => {
       if (isSnapId(subject.origin)) {
         const snapName = getSnapName(subject.origin);
@@ -91,7 +90,7 @@ export default class ConnectedSitesList extends Component {
 
   getSubjectDisplayName(subject) {
     if (subject.extensionId) {
-      return this.context.t('externalExtension');
+      return this.context('externalExtension');
     }
 
     // We strip https schemes only, and only if the URL has no port.

ui/components/app/import-token/token-list/token-list.component.js

@@ -27,10 +27,6 @@ import { CHAIN_ID_TO_NETWORK_IMAGE_URL_MAP } from '../../../../../shared/constan
 import TokenListPlaceholder from './token-list-placeholder';
 
 export default class TokenList extends Component {
-  static contextTypes = {
-    t: PropTypes.func,
-  };
-
   static propTypes = {
     allTokens: PropTypes.object,
     results: PropTypes.array,

ui/components/app/modals/confirm-delete-network/confirm-delete-network.component.js

@@ -1,6 +1,7 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
 import { toEvmCaipChainId } from '@metamask/multichain-network-controller';
+import { I18nContext } from '../../../../contexts/i18n';
 
 import Modal, { ModalContent } from '../../modal';
 
@@ -15,9 +16,7 @@ export default class ConfirmDeleteNetwork extends PureComponent {
     switchToEthereumNetwork: PropTypes.func,
   };
 
-  static contextTypes = {
-    t: PropTypes.func,
-  };
+  static contextType = I18nContext;
 
   handleDelete = async () => {
     const {
@@ -44,7 +43,7 @@ export default class ConfirmDeleteNetwork extends PureComponent {
   };
 
   render() {
-    const { t } = this.context;
+    const t = this.context;
     const { networkNickname } = this.props;
 
     return (