MetaMask / MetaMask/metamask-extension

[State Sync Redesign 3.7] Component migration (per domain, repeating)

Open
#40,044 0 comments 0 reactions 0 assignees View on GitHub
INVALID-ISSUE-TEMPLATE team-extension-platform
Dominant language
TypeScript
Stars
13.2k
Forks
5.6k
Avg merge
2d 5h
Merged PRs (30d)
451

Description

For each controller domain, apply codemod then manual review:

1. **NetworkController** consumers
2. **AccountsController** consumers
3. **PreferencesController** consumers
4. **TokensController** consumers
5. **TransactionController** consumers
6. **GasFeeController** consumers
7. **SnapController** consumers
8. Remaining controllers

Each sub-issue:
- Run codemod for domain's selectors
- Manual review of edge cases
- Verify with unit tests (existing tests pass with `renderWithControllerState`)
- Track migration percentage metric

## Scope

- ~670 `useSelector` call sites
- ~37 `connect()` HOC containers (e.g. `home.container.js`, `settings.container.js`, `unlock-page.container.ts`, `authenticated.container.js`, all `*.container.*` files in `ui/`). These use `mapStateToProps` reading `state.metamask` and need migration to hooks or updated `mapStateToProps` reading from `ControllerStateManager`.
- ~6 React context providers that sit high in the tree and consume metamask selectors (`AssetPollingProvider`, `GasFeeContextProvider`, `ShieldSubscriptionProvider`, `MetamaskNotificationsProvider`, `MetaMetricsProvider`, `SnapInterfaceContextProvider`). Migrate these early — they are high-risk re-render boundaries.
- 3 action creators with inline `getState().metamask` bypassing selectors: `connectHardware` (line 1442), `getContractMethodData` (line 5939), `deleteExpiredNotifications` (line 2309). Replace with selector calls or direct `ControllerStateManager.getSnapshot()`.

## Files

- `ui/components/**`
- `ui/pages/**`
- `ui/contexts/**`
- `ui/helpers/higher-order-components/**`

## Dependencies

Issues 3.5, 3.6, 3.2

## Context

Part of [State Sync Redesign — Epic 3: UI-controller subscriptions].

Contributor guide

Open the contributing guide

Research direction

Start by reviewing dependencies 3.5, 3.6, and 3.2, then inspect `ui/components/**`, `ui/pages/**`, `ui/contexts/**`, and `ui/helpers/higher-order-components/**`. Identify the relevant controller domain, run its codemod, and review `*.container.*` files plus the listed context providers and action creators. Done means migrated consumers pass unit tests with `renderWithControllerState` and the migration percentage is tracked.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react, typescript
Domain
frontend
Issue type
Refactor
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
20/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.