MetaMask / MetaMask/metamask-extension
[P2] Extract toolbar badge manager from `background.js`
- Dominant language
- TypeScript
- Stars
- 13.2k
- Forks
- 5.6k
- Avg merge
- 2d 5h
- Merged PRs (30d)
- 451
Description
**Parent Epic:** [#44543 — `app/scripts/background.js` decomposition](https://github.com/MetaMask/metamask-extension/issues/44543)
**File:** `app/scripts/background.js` → `app/scripts/lib/badge/`
**Size:** M
---
## Problem
`updateBadge`, `getBadgeLabel`, `getPendingApprovalCount`, `clearFailedTxBadge`, `onTransactionStatusUpdated`, `setClientLandingTab`, `rejectUnapprovedNotifications`, the badge messenger subscriptions (~1953–1990), and the `POPUP_CLOSED` handler render the toolbar badge (pending-approval count vs failed-tx count). They own `failedTxCount`/`seenFailedNonces` + `BADGE_*` constants, and read the UI-presence predicates. Called from the connection cluster's port `finished()` handlers and `triggerUi`.
## Solution
`app/scripts/lib/badge/badge-manager.ts` exporting `createBadgeManager({ controller, browser, isUiOpen })` that returns `{ updateBadge, clearFailedTxBadge, onTransactionStatusUpdated, … }` for the root to wire into subscriptions. Failed-tx state becomes module-private. Reuses the `isAnyUiOpen()` presence seam introduced by the dapp-metrics ticket.
## Acceptance Criteria
- [ ] TS module encapsulating failed-tx state; injected seam (incl. the presence predicate); originals deleted.
- [ ] Unit tests against a mock controller + stubbed `browser.action`.
- [ ] Badge parity (pending vs failed-tx, notification-defer rule) in a dev build.
Contributor guide
Research direction
Start with the listed badge functions, subscriptions, and POPUP_CLOSED handler in app/scripts/background.js, then inspect the app/scripts/lib/badge/ directory and the isAnyUiOpen() seam from the parent decomposition. Add the badge manager and unit tests with a mock controller and stubbed browser.action; done means the originals are removed and pending, failed-transaction, and notification-defer behavior remains equivalent in a dev build.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend
- Issue type
- Refactor
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 50/100