MetaMask / MetaMask/metamask-extension
[State Sync Redesign 3.7] Component migration (per domain, repeating)
- 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
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