Skip to content

feat(perps): show alert when user gets disconnected #24318

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Draft
michalconsensys wants to merge 10 commits into
base: main
Choose a base branch
from
Draft

feat(perps): show alert when user gets disconnected #24318

michalconsensys wants to merge 10 commits into from
+923 −104

Conversation

@michalconsensys
Copy link
Contributor

@michalconsensys michalconsensys commented Jan 8, 2026

Description

Changelog

CHANGELOG entry:

Related issues

Fixes:

Manual testing steps

Feature: my feature name

  Scenario: user [verb for user action]
    Given [describe expected initial app state]

    When user [verb for user action]
    Then [describe expected outcome]

Screenshots/Recordings

Before

After

Pre-merge author checklist

Pre-merge reviewer checklist

  • I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed).
  • I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.

@github-actions
Copy link
Contributor

github-actions bot commented Jan 8, 2026

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

@metamaskbot metamaskbot added the team-perps Perps team label Jan 8, 2026
@github-actions github-actions bot added the size-L label Jan 8, 2026
@michalconsensys
Merge branch 'main' into feat/perps/ws-notifications
063ffcc
@michalconsensys
chore: delete test
60b3981
@michalconsensys
chore: fix ts
93fd565
@michalconsensys
feat(perps): add custom WebSocket health toast for connection status
48aa87f 
- Create PerpsWebSocketHealthToast component with slide-from-top animation
- Show connection states: disconnected (error), connecting (warning), connected (success)
- Position toast at top of screen (74px from top) with solid background and shadow
- Update useWebSocketHealthToast hook to return state for custom toast rendering
- Remove websocketHealth options from usePerpsToasts (no longer needed)
- Update PerpsStreamBridge to render the custom toast component
@michalconsensys
feat(perps): add retry button to WebSocket health toast
60d7372 
- Add reconnect() method to HyperLiquidClientService, Provider, and Controller
- Show Retry button on toast when connection is disconnected
- Update toast positioning to 12px from left/right edges
- Update copy: title, description, and button text per design specs
@michalconsensys
feat(perps): add max retry limit for WebSocket reconnection
8b91d27 
- Limit auto-reconnection to 10 attempts before marking as disconnected
- Reset attempt counter when user manually clicks Retry button
- Allows user to always retry even after max attempts reached
@github-actions github-actions bot added size-XL and removed size-L labels Jan 9, 2026
@michalconsensys
feat(perps): render WebSocket health toast at App level for global po…
c32010f 
…sitioning

- Create WebSocketHealthToastContext for managing toast state globally
- Render PerpsWebSocketHealthToast at App level next to existing Toast
- Update useWebSocketHealthToast hook to use context instead of local state
- Remove toast rendering from PerpsStreamBridge (now uses context)
- Ensures toast appears on top of all content regardless of where useWebSocketHealthToast is called
@michalconsensys
fix(perps): show disconnected toast when max reconnection attempts re…
9ac979b 
…ached

- Update condition to show disconnected toast when transitioning from
  CONNECTING to DISCONNECTED (max attempts reached case)
- Previously only showed toast for direct CONNECTED to DISCONNECTED transition
@github-actions
Copy link
Contributor

github-actions bot commented Jan 9, 2026

🔍 Smart E2E Test Selection

  • Selected E2E tags: SmokePerps
  • Risk Level: medium
  • AI Confidence: 90%
click to see 🤖 AI reasoning details

This PR introduces WebSocket connection health monitoring and toast notifications specifically for the Perps (perpetuals trading) feature. The changes include:

  1. PerpsController.ts (marked CRITICAL): Added new methods for WebSocket connection state management (getWebSocketConnectionState, subscribeToConnectionState, reconnect)

  2. HyperLiquidClientService.ts: Significant changes to WebSocket connection handling including:

    • Connection state listeners for event-based notifications
    • Reconnection attempt counter with max 10 attempts
    • Health check timeout reduced from 5s to 1s
    • Manual reconnect() method

  3. New PerpsWebSocketHealthToast component: Toast UI showing connection status (disconnected/connecting/connected) with animations and retry button

  4. App.tsx: Added WebSocketHealthToastProvider wrapper and PerpsWebSocketHealthToast component at app level

  5. PerpsStreamManager.tsx: Changed clearAllChannels() to use new reconnect() method

  6. HyperLiquidProvider.ts: Changed ensureClientsInitialized() from sync to async, added WebSocket state methods

All changes are contained within the Perps feature domain. The E2E tests in e2e/specs/perps/ directory use the SmokePerps tag and should verify that the Perps functionality still works correctly with these WebSocket health monitoring changes. No other features are affected by these changes.

View GitHub Actions results

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

size-XL team-perps Perps team

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@michalconsensys @metamaskbot