chore(runway): cherry-pick fix(perps): improve connection toast (swipe dismiss, delay, styling) cp-7.64.0 (#25659)

- fix(perps): improve connection toast (swipe dismiss, delay, styling)
cp-7.64.0 (#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: #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**
> Medium risk because it changes toast display timing/state transitions
(new 1s delay and user-dismiss suppression) and adds gesture-driven
dismissal, which could affect when users see connection status banners.
> 
> **Overview**
> **Improves Perps WebSocket connection toast UX and behavior.** The
toast can now be swipe-dismissed left/right; dismissing sets a
`userDismissed` flag so repeated `Disconnected` banners are suppressed
until reconnection, while `Connecting`/`Connected` can still show and
clear the suppression.
> 
> **Reduces banner flicker and refreshes styling.**
`useWebSocketHealthToast` now delays `Disconnected`/`Connecting` toasts
by 1s (and cancels the timer on reconnect/unmount), while `Connected`
still shows immediately; the toast UI adds a wrapper/inner muted
background and updates tests to reflect the new delay and
animation/timer behavior.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
d73b504. 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>
[9642300](9642300)

Co-authored-by: Michal Szorad <michal.szorad@consensys.net>
Co-authored-by: Cursor <cursoragent@cursor.com>

Author: 3 people

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();
     });