MetaMask / MetaMask/metamask-extension

[P2] Extract toolbar badge manager from `background.js`

Open
#44,550 0 comments 0 reactions 0 assignees View on GitHub
for-migration INVALID-ISSUE-TEMPLATE mig-epic-69-child team-extension-platform
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.