chore(runway): cherry-pick feat(perps): sdk reconnect on native socket event (#25022) (#25573)

## Summary

Cherry-pick of #25022 (`91ad46f5f8`) for release 7.63.1.

**Original PR**: #25022

### Changes
This PR implements event-based WebSocket connection health monitoring
for Perps, replacing the previous polling-based approach:

- **Removes polling**: Eliminates 5-second interval health checks
- **Uses SDK events**: Leverages SDK's `terminate` event for instant
disconnection detection
- **Adds toast notifications**: Visual feedback for connection states
(connected/connecting/disconnected)
- **Manual retry**: Users can tap "Retry" button when disconnected
- **Auto-retry**: Automatic reconnection attempt after 10 seconds

### Conflict Resolution
5 files had conflicts due to the architectural change from polling to
event-based monitoring:
- `HyperLiquidProvider.ts` / `.test.ts`
- `HyperLiquidClientService.ts` / `.test.ts`  
- `HyperLiquidSubscriptionService.test.ts`

Resolved by accepting the PR version (event-based approach), which is
the intended behavior.

## Test Plan
- [x] TypeScript compilation passes
- [x] All Perps tests pass (243 suites, 5869 tests)
- [x] ESLint passes

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> **Medium Risk**
> Introduces new WebSocket connection-state plumbing from the Perps
SDK/provider up through `PerpsController` to an app-level toast with
auto-retry, which could impact connection/reconnection behavior and user
UX if state transitions are mishandled.
> 
> **Overview**
> Adds **event-driven Perps WebSocket health UX** by introducing
`PerpsWebSocketHealthToast` (with a new `WebSocketHealthToastProvider`
context) and wiring it into `App.tsx` so connection status can be
surfaced above all screens.
> 
> Extends the Perps stack to expose and consume WebSocket connection
state: `PerpsController` now provides `getWebSocketConnectionState`,
`subscribeToConnectionState`, and `reconnect`, `PerpsStreamBridge`
enables the new `useWebSocketHealthToast` hook, and the hook triggers
disconnected/connecting/connected toasts plus manual retry and a 10s
auto-retry.
> 
> Updates Perps config/constants and tests/mocks to support reconnection
delays, new selector test IDs, and provider/controller coverage for the
new connection-state APIs (plus a few related test expectation
adjustments).
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
85f917e. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Co-authored-by: Michal Szorad <michal.szorad@consensys.net>
Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>

Author: 3 people

app/components/Nav/App/App.tsx

@@ -36,6 +36,9 @@ import ModalConfirmation from '../../../component-library/components/Modals/Moda
 import Toast, {
   ToastContext,
 } from '../../../component-library/components/Toast';
+import PerpsWebSocketHealthToast, {
+  WebSocketHealthToastProvider,
+} from '../../UI/Perps/components/PerpsWebSocketHealthToast';
 import AccountSelector from '../../../components/Views/AccountSelector';
 import AddressSelector from '../../../components/Views/AddressSelector';
 import { TokenSortBottomSheet } from '../../UI/Tokens/TokenSortBottomSheet/TokenSortBottomSheet';
@@ -1276,11 +1279,12 @@ const App: React.FC = () => {
   }, []);
 
   return (
-    <>
+    <WebSocketHealthToastProvider>
       <AppFlow />
       <Toast ref={toastRef} />
+      <PerpsWebSocketHealthToast />
       <ProfilerManager />
-    </>
+    </WebSocketHealthToastProvider>
   );
 };
 

app/components/UI/Perps/Perps.testIds.ts

@@ -675,3 +675,12 @@ export const PerpsOrderBookTableSelectorsIDs = {
 export const PerpsOrderBookDepthChartSelectorsIDs = {
   CONTAINER: 'perps-order-book-depth-chart',
 } as const;
+
+// ========================================
+// PERPS WEBSOCKET HEALTH TOAST SELECTORS
+// ========================================
+
+export const PerpsWebSocketHealthToastSelectorsIDs = {
+  TOAST: 'perps-websocket-health-toast',
+  RETRY_BUTTON: 'perps-websocket-health-toast-retry-button',
+} as const;

app/components/UI/Perps/__mocks__/providerMocks.ts

@@ -52,6 +52,10 @@ export const createMockHyperLiquidProvider =
       subscribeToOrders: jest.fn(),
       subscribeToAccount: jest.fn(),
       setUserFeeDiscount: jest.fn(),
+      // WebSocket connection state methods
+      getWebSocketConnectionState: jest.fn(),
+      subscribeToConnectionState: jest.fn().mockReturnValue(() => undefined),
+      reconnect: jest.fn().mockResolvedValue(undefined),
     }) as unknown as jest.Mocked<HyperLiquidProvider>;
 
 export const createMockOrderResult = () => ({

app/components/UI/Perps/components/PerpsStreamBridge.tsx

@@ -1,12 +1,16 @@
 import React from 'react';
 import { usePerpsWithdrawStatus } from '../hooks/usePerpsWithdrawStatus';
 import { usePerpsDepositStatus } from '../hooks/usePerpsDepositStatus';
+import { useWebSocketHealthToast } from '../hooks/useWebSocketHealthToast';
 
 /**
  * PerpsStreamBridge - Bridges stream context to global hooks.
  *
  * This component acts as a bridge, allowing hooks to access the PerpsStream context
  * by being rendered inside both PerpsConnectionProvider and PerpsStreamProvider.
+ *
+ * The WebSocket health toast is rendered at the App level via WebSocketHealthToastProvider
+ * and PerpsWebSocketHealthToast to ensure it appears on top of all other content.
  */
 const PerpsStreamBridge: React.FC = () => {
   // Enable withdrawal status monitoring and toasts
@@ -15,7 +19,9 @@ const PerpsStreamBridge: React.FC = () => {
   // Enable deposit status monitoring and toasts
   usePerpsDepositStatus();
 
-  // This component doesn't render anything
+  // Enable WebSocket health monitoring (toast is rendered at App level)
+  useWebSocketHealthToast();
+
   return null;
 };
 

app/components/UI/Perps/components/PerpsWebSocketHealthToast/PerpsWebSocketHealthToast.context.test.tsx

@@ -0,0 +1,270 @@
+/**
+ * Tests for PerpsWebSocketHealthToast.context
+ */
+
+import React from 'react';
+import { Text } from 'react-native';
+import { renderHook, act } from '@testing-library/react-hooks';
+import { render } from '@testing-library/react-native';
+import {
+  WebSocketHealthToastProvider,
+  useWebSocketHealthToastContext,
+  WebSocketHealthToastContext,
+} from './PerpsWebSocketHealthToast.context';
+import { WebSocketConnectionState } from '../../controllers/types';
+
+describe('PerpsWebSocketHealthToast.context', () => {
+  describe('WebSocketHealthToastProvider', () => {
+    it('renders children correctly', () => {
+      const { getByText } = render(
+        <WebSocketHealthToastProvider>
+          <Text>Test Child</Text>
+        </WebSocketHealthToastProvider>,
+      );
+
+      expect(getByText('Test Child')).toBeTruthy();
+    });
+  });
+
+  describe('useWebSocketHealthToastContext', () => {
+    const wrapper = ({ children }: { children: React.ReactNode }) => (
+      <WebSocketHealthToastProvider>{children}</WebSocketHealthToastProvider>
+    );
+
+    it('has correct initial state', () => {
+      const { result } = renderHook(() => useWebSocketHealthToastContext(), {
+        wrapper,
+      });
+
+      expect(result.current.state).toEqual({
+        isVisible: false,
+        connectionState: WebSocketConnectionState.DISCONNECTED,
+        reconnectionAttempt: 0,
+      });
+    });
+
+    describe('show()', () => {
+      it('updates visibility and connection state', () => {
+        const { result } = renderHook(() => useWebSocketHealthToastContext(), {
+          wrapper,
+        });
+
+        act(() => {
+          result.current.show(WebSocketConnectionState.CONNECTING, 1);
+        });
+
+        expect(result.current.state).toEqual({
+          isVisible: true,
+          connectionState: WebSocketConnectionState.CONNECTING,
+          reconnectionAttempt: 1,
+        });
+      });
+
+      it('updates reconnection attempt number', () => {
+        const { result } = renderHook(() => useWebSocketHealthToastContext(), {
+          wrapper,
+        });
+
+        act(() => {
+          result.current.show(WebSocketConnectionState.CONNECTING, 5);
+        });
+
+        expect(result.current.state.reconnectionAttempt).toBe(5);
+      });
+
+      it('defaults reconnectionAttempt to 0 when not provided', () => {
+        const { result } = renderHook(() => useWebSocketHealthToastContext(), {
+          wrapper,
+        });
+
+        act(() => {
+          result.current.show(WebSocketConnectionState.CONNECTED);
+        });
+
+        expect(result.current.state.reconnectionAttempt).toBe(0);
+      });
+
+      it('handles DISCONNECTED state', () => {
+        const { result } = renderHook(() => useWebSocketHealthToastContext(), {
+          wrapper,
+        });
+
+        act(() => {
+          result.current.show(WebSocketConnectionState.DISCONNECTED, 3);
+        });
+
+        expect(result.current.state).toEqual({
+          isVisible: true,
+          connectionState: WebSocketConnectionState.DISCONNECTED,
+          reconnectionAttempt: 3,
+        });
+      });
+
+      it('handles CONNECTED state', () => {
+        const { result } = renderHook(() => useWebSocketHealthToastContext(), {
+          wrapper,
+        });
+
+        act(() => {
+          result.current.show(WebSocketConnectionState.CONNECTED, 0);
+        });
+
+        expect(result.current.state).toEqual({
+          isVisible: true,
+          connectionState: WebSocketConnectionState.CONNECTED,
+          reconnectionAttempt: 0,
+        });
+      });
+    });
+
+    describe('hide()', () => {
+      it('sets visibility to false', () => {
+        const { result } = renderHook(() => useWebSocketHealthToastContext(), {
+          wrapper,
+        });
+
+        // First show the toast
+        act(() => {
+          result.current.show(WebSocketConnectionState.DISCONNECTED, 1);
+        });
+
+        expect(result.current.state.isVisible).toBe(true);
+
+        // Then hide it
+        act(() => {
+          result.current.hide();
+        });
+
+        expect(result.current.state.isVisible).toBe(false);
+      });
+
+      it('preserves other state when hiding', () => {
+        const { result } = renderHook(() => useWebSocketHealthToastContext(), {
+          wrapper,
+        });
+
+        // Show with specific state
+        act(() => {
+          result.current.show(WebSocketConnectionState.CONNECTING, 2);
+        });
+
+        // Hide
+        act(() => {
+          result.current.hide();
+        });
+
+        // Other state properties should be preserved
+        expect(result.current.state.connectionState).toBe(
+          WebSocketConnectionState.CONNECTING,
+        );
+        expect(result.current.state.reconnectionAttempt).toBe(2);
+        expect(result.current.state.isVisible).toBe(false);
+      });
+    });
+
+    describe('setOnRetry()', () => {
+      it('registers retry callback', () => {
+        const { result } = renderHook(() => useWebSocketHealthToastContext(), {
+          wrapper,
+        });
+
+        const mockCallback = jest.fn();
+
+        act(() => {
+          result.current.setOnRetry(mockCallback);
+        });
+
+        expect(result.current.onRetry).toBe(mockCallback);
+      });
+
+      it('allows onRetry callback to be called', () => {
+        const { result } = renderHook(() => useWebSocketHealthToastContext(), {
+          wrapper,
+        });
+
+        const mockCallback = jest.fn();
+
+        act(() => {
+          result.current.setOnRetry(mockCallback);
+        });
+
+        // Call the registered callback
+        act(() => {
+          result.current.onRetry?.();
+        });
+
+        expect(mockCallback).toHaveBeenCalled();
+      });
+
+      it('allows updating the retry callback', () => {
+        const { result } = renderHook(() => useWebSocketHealthToastContext(), {
+          wrapper,
+        });
+
+        const firstCallback = jest.fn();
+        const secondCallback = jest.fn();
+
+        act(() => {
+          result.current.setOnRetry(firstCallback);
+        });
+
+        act(() => {
+          result.current.setOnRetry(secondCallback);
+        });
+
+        expect(result.current.onRetry).toBe(secondCallback);
+      });
+    });
+
+    describe('onRetry', () => {
+      it('is undefined initially', () => {
+        const { result } = renderHook(() => useWebSocketHealthToastContext(), {
+          wrapper,
+        });
+
+        expect(result.current.onRetry).toBeUndefined();
+      });
+
+      it('is accessible from context after setOnRetry', () => {
+        const { result } = renderHook(() => useWebSocketHealthToastContext(), {
+          wrapper,
+        });
+
+        const mockCallback = jest.fn();
+
+        act(() => {
+          result.current.setOnRetry(mockCallback);
+        });
+
+        expect(result.current.onRetry).toBeDefined();
+        expect(typeof result.current.onRetry).toBe('function');
+      });
+    });
+  });
+
+  describe('Default context values', () => {
+    it('has default noop functions in context', () => {
+      // Test using context directly without provider
+      const { result } = renderHook(() =>
+        React.useContext(WebSocketHealthToastContext),
+      );
+
+      // Default values should exist and not throw
+      expect(result.current.state).toEqual({
+        isVisible: false,
+        connectionState: WebSocketConnectionState.DISCONNECTED,
+        reconnectionAttempt: 0,
+      });
+
+      // Default functions should be no-ops
+      expect(() => {
+        result.current.show(WebSocketConnectionState.CONNECTED);
+        result.current.hide();
+        result.current.setOnRetry(() => undefined);
+      }).not.toThrow();
+
+      // onRetry should be undefined by default
+      expect(result.current.onRetry).toBeUndefined();
+    });
+  });
+});