Cross-Tab Wallet Session Sync & Auto-Reconnect

[meshackyaro]

Description

This issue aims to address the implementation of Cross-Tab Wallet Session Sync & Auto-Reconnect.

The core objective is to: Synchronize Freighter wallet connection, account, and network state across browser tabs via a shared channel, with silent reconnection and conflict handling when the active account changes.

By completing this feature, we will ensure that the TrustFlow protocol maintains its high standards for security, usability, and decentralized logic. This issue requires careful attention to the Frontend architecture and adherence to the existing project conventions.

When picking up this issue, please ensure you document any new dependencies or architectural decisions made during development.

Component

Frontend

Difficulty

🔴 Hard

Tasks

• Review Next.js App Router structure
• Implement the UI components for: Cross-Tab Wallet Session Sync & Auto-Reconnect
• Ensure responsive design using Tailwind CSS or standard modules
• Add caching for npm dependencies in CI
• Run npm run lint and npm run typecheck
• Run npm run build to verify production bundling

Acceptance Criteria

• Feature accurately implements the objective: Synchronize Freighter wallet connection, account, and network state across browser tabs via a shared channel, with silent reconnection and conflict handling when the active account changes.
• Any PR that introduces TypeScript errors is automatically blocked
• CI pipeline runs in under 3 minutes per PR
• Code is properly reviewed and approved by codeowners

Estimated Time

1-3 days

[divinemike019]

Hi, I'd like to work on this issue. The core objective is to synchronize Freighter (and any other supported wallet) connection state across browser tabs, so a user connected in one tab is reflected in others without needing to reconnect manually, plus handle auto-reconnect when a session drops or a tab is reopened.

My plan is to:

1. Use a cross-tab communication mechanism (e.g., BroadcastChannel or localStorage events) to propagate wallet connection/disconnection state changes across all open tabs in real time.
2. Implement auto-reconnect logic that detects a stale or dropped session on tab load/focus and attempts to silently restore the connection using the wallet's existing session, rather than forcing the user to click "connect" again.
3. Handle edge cases carefully — user manually disconnects in one tab (should propagate everywhere), wallet account switches, and network changes — so sync doesn't create confusing or incorrect state elsewhere.
4. Test across multiple tabs and browser refresh/reopen scenarios to confirm the sync and reconnect behavior is reliable, not just working in the happy path.

Given the High priority and blockchain integration label, I have relevant experience with wallet integrations and cross-tab state management, and I'd want to share my design approach early for feedback before committing to the full implementation.

[grantfox-oss]

🦊 GrantFox — @divinemike019 has been assigned to this issue as part of the Official Campaign | FWC26 campaign!

Next steps:

1. Open a Pull Request referencing this issue (e.g., Closes #66)
2. Your PR will be reviewed by the trustflow-protocol maintainers

Good luck! Track your progress on GrantFox.