chore(runway): cherry-pick fix(perps): improve connection toast (swipe dismiss, delay, styling) cp-7.64.0 by runway-github[bot] · Pull Request #25659 · MetaMask/metamask-mobile

runway-github · 2026-02-04T17:17:31Z

fix(perps): improve connection toast (swipe dismiss, delay, styling) cp-7.64.0 (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

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

Before

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

After

Pre-merge author checklist

I've followed MetaMask Contributor
Docs and MetaMask Mobile
Coding
Standards.
I've completed the PR template to the best of my ability
I've included tests if applicable
I've documented my code using JSDoc format
if applicable
I've applied the right labels on the PR (see labeling
guidelines).
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.

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.

^{Written by Cursor Bugbot for commit d73b504. This will update automatically on new commits. Configure here.}

Co-authored-by: Cursor cursoragent@cursor.com 9642300

…e 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**  ### **Before** See here https://consensyssoftware.atlassian.net/browse/TAT-2453 ### **After**  <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.  --- > [!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>  --------- Co-authored-by: Cursor <cursoragent@cursor.com>

github-actions · 2026-02-04T17:17:42Z

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.

github-actions · 2026-02-04T17:18:26Z

🔍 Smart E2E Test Selection

⏭️ Smart E2E selection skipped - base branch is not main (base: release/7.64.0)

All E2E tests pre-selected.

View GitHub Actions results

cursor

Cursor Bugbot has reviewed your changes and found 2 potential issues.

cursor · 2026-02-04T17:20:33Z

+      // Connecting is always shown so user sees progress after having dismissed "offline".
+      if (userDismissed && !isConnecting) {
+        return;
+      }


Dismissal resets too early on reconnect

Medium Severity

show() clears userDismissed on WebSocketConnectionState.Connecting, which can allow a previously dismissed offline banner to reappear if the connection flaps Disconnected → Connecting → Disconnected without ever reaching Connected. This contradicts the intended “stay dismissed until restored” behavior.

cursor · 2026-02-04T17:20:33Z

+                }
+                // If connection restored during animation, do nothing: leave Connected toast visible
+              }
+            });


Swipe dismiss can hide toast permanently

Medium Severity

If the user swipes the toast off-screen and the connection becomes Connected before the swipe animation finishes, the completion handler skips calling hide(), but swipeAnim remains translated off-screen. Since swipeAnim resets only when isVisible flips to true, the “Connected” toast can stay invisible/off-screen.

Additional Locations (1)

app/components/UI/Perps/components/PerpsWebSocketHealthToast/PerpsWebSocketHealthToast.tsx#L160-L166

sonarqubecloud · 2026-02-04T17:40:15Z

Quality Gate failed

Failed conditions
70.5% Coverage on New Code (required ≥ 80%)

See analysis details on SonarQube Cloud

metamaskbot · 2026-02-06T10:06:16Z

No release label on PR. Adding release label release-7.64.0 on PR, as PR was cherry-picked in branch 7.64.0.

runway-github Bot requested a review from a team as a code owner February 4, 2026 17:17

metamaskbot added the team-bots Bot team (for MetaMask Bot, Runway Bot, etc.) label Feb 4, 2026

github-actions Bot added the size-M label Feb 4, 2026

cursor Bot reviewed Feb 4, 2026

View reviewed changes

joaoloureirop approved these changes Feb 4, 2026

View reviewed changes

joaoloureirop added the skip-sonar-cloud Only used for bypassing sonar cloud when failures are not relevant to the changes. label Feb 4, 2026

joaoloureirop merged commit 48891cd into release/7.64.0 Feb 4, 2026
174 of 179 checks passed

joaoloureirop deleted the runway-cherry-pick-7.64.0-1770225440 branch February 4, 2026 18:46

github-actions Bot locked and limited conversation to collaborators Feb 4, 2026

metamaskbot added the release-7.64.0 Issue or pull request that will be included in release 7.64.0 label Feb 6, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

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

chore(runway): cherry-pick fix(perps): improve connection toast (swipe dismiss, delay, styling) cp-7.64.0#25659
joaoloureirop merged 1 commit into
release/7.64.0from
runway-cherry-pick-7.64.0-1770225440

runway-github Bot commented Feb 4, 2026 •

edited by cursor Bot

Loading

Uh oh!

github-actions Bot commented Feb 4, 2026

Uh oh!

github-actions Bot commented Feb 4, 2026

Uh oh!

cursor Bot left a comment

Uh oh!

cursor Bot Feb 4, 2026

Uh oh!

cursor Bot Feb 4, 2026

Uh oh!

sonarqubecloud Bot commented Feb 4, 2026

Uh oh!

Uh oh!

metamaskbot commented Feb 6, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Conversation

runway-github Bot commented Feb 4, 2026 • edited by cursor Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Changelog

Related issues

Manual testing steps

Screenshots/Recordings

Before

After

Pre-merge author checklist

Pre-merge reviewer checklist

Uh oh!

github-actions Bot commented Feb 4, 2026

Uh oh!

github-actions Bot commented Feb 4, 2026

🔍 Smart E2E Test Selection

Uh oh!

cursor Bot left a comment

Choose a reason for hiding this comment

Uh oh!

cursor Bot Feb 4, 2026

Choose a reason for hiding this comment

Dismissal resets too early on reconnect

Uh oh!

cursor Bot Feb 4, 2026

Choose a reason for hiding this comment

Swipe dismiss can hide toast permanently

Uh oh!

sonarqubecloud Bot commented Feb 4, 2026

Quality Gate failed

Uh oh!

Uh oh!

metamaskbot commented Feb 6, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

runway-github Bot commented Feb 4, 2026 •

edited by cursor Bot

Loading