MetaMask / MetaMask/metamask-extension

[State Sync Redesign 1.6] UI reconnect logic after port disconnect

Open
#40,178 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

INVALID-ISSUE-TEMPLATE team-extension-platform
Dominant language
TypeScript
Stars
13.2k
Forks
5.6k
Avg merge
2d 5h
Merged PRs (30d)
451

Description

After detecting a port disconnect (Issue 1.5), long-lived UI contexts (fullscreen tab, sidepanel) need to reconnect and rehydrate state.

`StateSubscriptionService.reinitialize()` is purpose-built for this: on a fresh `START_UI_SYNC` after port reconnection, it updates existing proxies in place (preserving subscriber lists), creates proxies for any new controllers, and atomically flushes all subscribers. This is cleaner than the current recovery path, which re-dispatches the entire state tree into Redux via `updateMetamaskState`.

## Steps

1. On disconnect detection (from Issue 1.5), establish a new `chrome.runtime.Port` connection
2. Re-trigger `START_UI_SYNC` on the new port
3. Call `StateSubscriptionService.reinitialize()` with the fresh controller-keyed state
4. During dual-write phase: also rehydrate Redux via existing `updateMetamaskState` path
5. For popup/notification contexts: reload instead of reconnecting (simpler, no in-flight state to preserve)

## Files

- `ui/index.js`
- `app/scripts/lib/setupMultiplex.js`
- `@metamask/state-subscription-service` (`reinitialize` method)

## Risk

Medium — reconnection must be atomic. A partial rehydration (some proxies updated, others stale) would cause torn reads. `reinitialize()` handles this via two-phase apply/notify.

## Dependencies

- Issue 1.5 (port disconnect detection)
- Issue 1.4 (keyed initial state on `START_UI_SYNC`)

## Context

Part of [State Sync Redesign — Epic 1: Transport optimization](#40059). See ADR risk assessment for full analysis.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with ui/index.js and app/scripts/lib/setupMultiplex.js, then inspect StateSubscriptionService.reinitialize() in @metamask/state-subscription-service. Trace the disconnect path from Issue 1.5 and the keyed START_UI_SYNC state from Issue 1.4. Done means long-lived UI contexts reconnect, rehydrate proxies atomically, preserve the dual-write Redux path, and reload popup and notification contexts.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.