fix(perps): improve connection toast (swipe dismiss, delay, styling) cp-7.64.0 (MetaMask#25569)

## **Description**

This PR improves the Perps WebSocket connection toast (the banner that
shows "Your connection is offline", "Connecting...", or "Connected" when
the WebSocket state changes).

## **Changelog**

CHANGELOG entry: Added swipe-to-dismiss and 1 second delay for the Perps
connection banner; improved toast styling with default/muted backgrounds
and highest z-index.

## **Related issues**

Fixes: MetaMask#25570
Jira issue: https://consensyssoftware.atlassian.net/browse/TAT-2453

## **Manual testing steps**

```gherkin
Feature: Perps connection toast

  Scenario: user sees and dismisses offline banner
    Given user is on a screen where Perps WebSocket is connected
    When connection drops and 1 second passes
    Then the "Your connection is offline" banner appears at the top
    And user can swipe the banner left or right to dismiss it
    And after dismissing, the banner does not show again until connection is restored and drops again

  Scenario: banner does not flicker on quick reconnect
    Given user is on a screen where Perps WebSocket is connected
    When connection drops and reconnects within 1 second
    Then the offline banner does not appear

```

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

See here https://consensyssoftware.atlassian.net/browse/TAT-2453

### **After**

<!-- [screenshots/recordings] -->
<img width="1206" height="2622" alt="Simulator Screenshot - iPhone 17
Pro - 2026-02-03 at 11 39 17"
src="https://github.com/user-attachments/assets/8656ba68-5dd3-4584-bae0-765aa60e1f51"
/>


## **Pre-merge author checklist**

- [x] I've followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [x] I've included tests if applicable
- [x] I've documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I've applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **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.


<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> **Medium Risk**
> Changes toast timing and suppression logic around WebSocket
disconnect/reconnect events, which could inadvertently hide or delay
offline/connecting signals. Scope is limited to Perps connection banner
UI/state with updated test coverage.
> 
> **Overview**
> Improves the Perps WebSocket connection toast UX by adding
**horizontal swipe-to-dismiss** and tracking a `userDismissed` state so
repeat *Disconnected* banners are suppressed until the connection
restores.
> 
> Adds a **1s delay** before showing *Disconnected/Connecting* banners
(and cancels pending banners on quick reconnect) to reduce flicker,
while still showing the *Connected* success toast immediately.
> 
> Updates toast styling to use a `toastWrapper` with default background
+ shadow and a muted inner surface, and adjusts tests to cover the new
dismissal/timing behavior (including `act()` wrapping for timer-driven
animations).
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
c63f170. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

---------

Co-authored-by: Cursor <cursoragent@cursor.com>

Author: michalconsensys

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

@@ -160,6 +160,49 @@ describe('PerpsWebSocketHealthToast.context', () => {
         expect(result.current.state.reconnectionAttempt).toBe(2);
         expect(result.current.state.isVisible).toBe(false);
       });
+
+      it('when hide({ userDismissed: true }), subsequent Disconnected is suppressed but Connecting and Connected show again', () => {
+        const { result } = renderHook(() => useWebSocketHealthToastContext(), {
+          wrapper,
+        });
+
+        act(() => {
+          result.current.show(WebSocketConnectionState.Disconnected, 1);
+        });
+        expect(result.current.state.isVisible).toBe(true);
+
+        act(() => {
+          result.current.hide({ userDismissed: true });
+        });
+        expect(result.current.state.isVisible).toBe(false);
+
+        // Showing Disconnected again should not show (user dismissed offline)
+        act(() => {
+          result.current.show(WebSocketConnectionState.Disconnected, 2);
+        });
+        expect(result.current.state.isVisible).toBe(false);
+
+        // Showing Connecting should show (user sees reconnection progress)
+        act(() => {
+          result.current.show(WebSocketConnectionState.Connecting, 3);
+        });
+        expect(result.current.state.isVisible).toBe(true);
+
+        // Showing Connected shows "online" toast and clears userDismissed
+        act(() => {
+          result.current.show(WebSocketConnectionState.Connected, 0);
+        });
+        expect(result.current.state.isVisible).toBe(true);
+
+        act(() => {
+          result.current.hide();
+        });
+        // Next Disconnected will show again (userDismissed was cleared)
+        act(() => {
+          result.current.show(WebSocketConnectionState.Disconnected, 4);
+        });
+        expect(result.current.state.isVisible).toBe(true);
+      });
     });
 
     describe('setOnRetry()', () => {

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

@@ -1,4 +1,10 @@
-import React, { createContext, useContext, useState, useCallback } from 'react';
+import React, {
+  createContext,
+  useContext,
+  useState,
+  useCallback,
+  useMemo,
+} from 'react';
 import { WebSocketConnectionState } from '../../controllers/types';
 
 /** No-op function for context defaults */
@@ -13,6 +19,12 @@ export interface WebSocketHealthToastState {
   reconnectionAttempt: number;
 }
 
+/** Options for hiding the toast (e.g. user swipe dismiss) */
+export interface WebSocketHealthToastHideOptions {
+  /** When true, toast will not be shown again until connection is restored (Connected state) */
+  userDismissed?: boolean;
+}
+
 /**
  * Context params for controlling the WebSocket health toast.
  */
@@ -22,7 +34,7 @@ export interface WebSocketHealthToastContextParams {
     connectionState: WebSocketConnectionState,
     reconnectionAttempt?: number,
   ) => void;
-  hide: () => void;
+  hide: (options?: WebSocketHealthToastHideOptions) => void;
   onRetry?: () => void;
   setOnRetry: (callback: () => void) => void;
 }
@@ -50,33 +62,73 @@ export const WebSocketHealthToastProvider: React.FC<{
   children: React.ReactNode;
 }> = ({ children }) => {
   const [state, setState] = useState<WebSocketHealthToastState>(defaultState);
-  const [onRetry, setOnRetryCallback] = useState<(() => void) | undefined>(
-    undefined,
-  );
+  const [userDismissed, setUserDismissed] = useState(false);
+  const [onRetryCallback, setOnRetryCallback] = useState<
+    (() => void) | undefined
+  >(undefined);
 
   const show = useCallback(
     (connectionState: WebSocketConnectionState, reconnectionAttempt = 0) => {
+      const isConnected =
+        connectionState === WebSocketConnectionState.Connected;
+      const isConnecting =
+        connectionState === WebSocketConnectionState.Connecting;
+
+      // When connection is restored, always show "online" toast and clear dismiss state
+      // (handled first so we never skip due to stale userDismissed closure)
+      if (isConnected) {
+        setUserDismissed(false);
+        setState({
+          isVisible: true,
+          connectionState,
+          reconnectionAttempt,
+        });
+        return;
+      }
+
+      // When reconnecting, clear userDismissed so "connecting" and later "online" toasts can show
+      if (isConnecting) {
+        setUserDismissed(false);
+      }
+
+      // Don't show Disconnected if user previously dismissed (until connection is restoring/restored).
+      // Connecting is always shown so user sees progress after having dismissed "offline".
+      if (userDismissed && !isConnecting) {
+        return;
+      }
       setState({
         isVisible: true,
         connectionState,
         reconnectionAttempt,
       });
     },
-    [],
+    [userDismissed],
   );
 
-  const hide = useCallback(() => {
+  const hide = useCallback((options?: WebSocketHealthToastHideOptions) => {
+    if (options?.userDismissed) {
+      setUserDismissed(true);
+    }
     setState((prev) => ({ ...prev, isVisible: false }));
   }, []);
 
   const setOnRetry = useCallback((callback: () => void) => {
     setOnRetryCallback(() => callback);
   }, []);
 
+  const contextValue = useMemo(
+    () => ({
+      state,
+      show,
+      hide,
+      onRetry: onRetryCallback,
+      setOnRetry,
+    }),
+    [state, show, hide, onRetryCallback, setOnRetry],
+  );
+
   return (
-    <WebSocketHealthToastContext.Provider
-      value={{ state, show, hide, onRetry, setOnRetry }}
-    >
+    <WebSocketHealthToastContext.Provider value={contextValue}>
       {children}
     </WebSocketHealthToastContext.Provider>
   );

app/components/UI/Perps/components/PerpsWebSocketHealthToast/PerpsWebSocketHealthToast.styles.ts

@@ -13,15 +13,12 @@ const styleSheet = (params: { theme: Theme }) => {
       right: 12,
       zIndex: 9999,
     },
-    // Inner toast content
-    toast: {
-      flexDirection: 'row',
-      alignItems: 'center',
-      gap: 12,
-      paddingVertical: 12,
-      paddingHorizontal: 16,
+    // Wrapper with default background (close wrap: same edges, radius)
+    toastWrapper: {
       borderRadius: 12,
       backgroundColor: colors.background.default,
+      padding: 2,
+      overflow: 'hidden',
       // Shadow for elevation
       shadowColor: colors.shadow.default,
       shadowOffset: {
@@ -32,6 +29,16 @@ const styleSheet = (params: { theme: Theme }) => {
       shadowRadius: 8,
       elevation: 8,
     },
+    // Inner toast content (muted background)
+    toast: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 12,
+      paddingVertical: 12,
+      paddingHorizontal: 16,
+      borderRadius: 10,
+      backgroundColor: colors.background.muted,
+    },
     // Icon container
     iconContainer: {
       width: 32,

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

@@ -3,7 +3,7 @@
  */
 
 import React from 'react';
-import { render, fireEvent, waitFor } from '@testing-library/react-native';
+import { render, fireEvent, waitFor, act } from '@testing-library/react-native';
 import PerpsWebSocketHealthToast from './PerpsWebSocketHealthToast';
 import { WebSocketConnectionState } from '../../controllers/types';
 import { PerpsWebSocketHealthToastSelectorsIDs } from '../../Perps.testIds';
@@ -248,8 +248,10 @@ describe('PerpsWebSocketHealthToast', () => {
 
       render(<PerpsWebSocketHealthToast />);
 
-      // Fast-forward time
-      jest.advanceTimersByTime(3000);
+      // Fast-forward time (wrap in act so Animated callbacks flush)
+      await act(async () => {
+        jest.advanceTimersByTime(3000);
+      });
 
       expect(mockHide).toHaveBeenCalled();
     });