feat(perps): always on socket connection (#27103)

## **Description**

Replaces per-section \`PerpsConnectionProvider\` connect/disconnect
calls with a single top-level \`PerpsAlwaysOnProvider\` mounted at the
wallet root.

**Problem**: Multiple \`PerpsConnectionProvider\` instances (Homepage,
PerpsTabView, ActivityView, TrendingView, ExploreSearchScreen,
UrlAutocomplete) each called \`connect()\`/\`disconnect()\`, creating
reference-count races in \`PerpsConnectionManager\`. This caused
intermittent bugs — positions not showing, 24h values missing — after
long app backgrounding sessions.

**Solution**: \`PerpsAlwaysOnProvider\` is the sole caller of
\`PerpsConnectionManager.connect()\` and \`disconnect()\`.
\`PerpsConnectionProvider\` is now a pure React context source — it
polls singleton state and exposes it via \`PerpsConnectionContext\`, but
never calls connect/disconnect itself.

Key changes:
- New \`PerpsAlwaysOnProvider\` — mounts once **inside**
\`ErrorBoundary\` at \`Wallet/index.tsx\`, owns \`AppState\` listener,
sole connect/disconnect owner
- \`PerpsConnectionProvider\` stripped of all lifecycle management:
removed \`manageLifecycle\` prop, \`isVisible\` prop, and the
\`usePerpsConnectionLifecycle\` hook call
- Deleted \`usePerpsConnectionLifecycle\` hook (its responsibilities
moved to \`PerpsAlwaysOnProvider\`)
- All section-level \`PerpsConnectionProvider\` instances kept as
context sources (required by \`useContext(PerpsConnectionContext)\`
consumers in \`sections.config.tsx\` et al.)
- Restored \`PerpsConnectionProvider\` (context-only) in
\`ExploreSearchScreen\`, \`UrlAutocomplete\`, and \`TrendingView\`
\`SectionWrapper\` — these render \`useSectionData\` which reads
\`PerpsConnectionContext\`
- Removed visibility callback plumbing (\`onVisibilityChange\`,
\`perpsVisibilityCallback\`) from \`WalletTokensTabView\` and
\`PerpsTabViewWithProvider\`
- Updated architecture docs

## **Changelog**

CHANGELOG entry: null

## **Related issues**

Fixes:

## **Manual testing steps**

\`\`\`gherkin
Feature: Perps always-on connection

  Scenario: user backgrounds and foregrounds the app
    Given perps feature flag is enabled
    And user is on the Wallet screen

    When user opens the Perps tab
    Then positions and market data load correctly

    When user backgrounds the app for 30+ seconds
    And user foregrounds the app
    Then Perps data reconnects and loads correctly

  Scenario: user switches between tabs
    Given perps feature flag is enabled

    When user navigates between Wallet / Activity / Trending tabs
    Then perps data remains connected without errors
    And connectionRefCount stays at 1

  Scenario: user switches accounts
    Given perps feature flag is enabled

    When user switches to a different account
    Then Perps data refreshes for the new account
\`\`\`

## **Screenshots/Recordings**

### **Before**

Multiple providers each managing lifecycle → reference-count races on
background/foreground.

### **After**

Single \`PerpsAlwaysOnProvider\` owns the lifecycle —
\`connectionRefCount\` stays exactly 1. \`PerpsConnectionProvider\` is a
context-only provider with no lifecycle responsibilities.

## **Pre-merge author checklist**

- [ ] 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).
- [ ] 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](https://jsdoc.app/) format
if applicable
- [ ] 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 Perps WebSocket connection ownership from many screen-scoped
providers to a single wallet-root lifecycle manager, which can impact
reconnect behavior, resource usage, and perps data availability across
the app.
> 
> **Overview**
> **Centralizes Perps WebSocket lifecycle management** by introducing
`PerpsAlwaysOnProvider` (mounted at the `Wallet` root) as the *only*
component that calls `PerpsConnectionManager.connect()`/`disconnect()`,
driven by `AppState` background/foreground transitions with a delayed
reconnect and error logging.
> 
> `PerpsConnectionProvider` is simplified to a context/state wrapper
only: it no longer takes `isVisible`, no longer unmounts children when
hidden, and removes the `usePerpsConnectionLifecycle` hook entirely
(hook + tests deleted, barrel export removed). Call sites (Perps tab,
Activity perps transactions tab, homepage Perps section, Explore search,
UrlAutocomplete, Trending sections) are updated to stop passing
visibility props and to use `suppressErrorView` where needed.
> 
> Tests and docs are updated to match the new always-on architecture,
including new coverage for `PerpsAlwaysOnProvider` and adjusted
`PerpsConnectionProvider` retry/error behavior.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
1644485. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: abretonc7s

app/components/UI/Perps/Views/PerpsTabView/index.tsx

@@ -1,8 +1,6 @@
-import React, { useEffect, useState } from 'react';
-import { NavigationProp, ParamListBase } from '@react-navigation/native';
+import React from 'react';
 import { PerpsConnectionProvider } from '../../providers/PerpsConnectionProvider';
 import { PerpsStreamProvider } from '../../providers/PerpsStreamManager';
-import { DevLogger } from '../../../../../core/SDKConnect/utils/DevLogger';
 import PerpsTabView from './PerpsTabView';
 import PerpsStreamBridge from '../../components/PerpsStreamBridge';
 import { useSelector } from 'react-redux';
@@ -13,10 +11,7 @@ import { strings } from '../../../../../../locales/i18n';
 import { IconName } from '@metamask/design-system-react-native';
 
 interface PerpsTabViewWithProviderProps {
-  navigation?: NavigationProp<ParamListBase>;
   tabLabel?: string;
-  isVisible?: boolean;
-  onVisibilityChange?: (callback: (visible: boolean) => void) => void;
 }
 
 const styles = StyleSheet.create({
@@ -26,32 +21,16 @@ const styles = StyleSheet.create({
 });
 
 /**
- * PerpsTabView wrapped with both PerpsConnectionProvider and PerpsStreamProvider
- * This ensures the usePerpsConnection and usePerpsStream hooks work properly when used in the main wallet tab view
- * Visibility is managed internally with updates from parent via callback
+ * PerpsTabView wrapped with PerpsConnectionProvider (context only) and PerpsStreamProvider.
+ * Connection lifecycle is managed by the top-level PerpsAlwaysOnProvider.
  */
-const PerpsTabViewWithProvider: React.FC<PerpsTabViewWithProviderProps> = (
-  props,
-) => {
-  const { isVisible: initialVisible = false, onVisibilityChange } = props;
-  const [isVisible, setIsVisible] = useState(initialVisible);
+const PerpsTabViewWithProvider: React.FC<
+  PerpsTabViewWithProviderProps
+> = () => {
   const isBasicFunctionalityEnabled = useSelector(
     selectBasicFunctionalityEnabled,
   );
 
-  // Register callback with parent
-  useEffect(() => {
-    if (onVisibilityChange) {
-      onVisibilityChange((visible: boolean) => {
-        DevLogger.log('PerpsTabView: Visibility updated via callback', {
-          visible,
-          timestamp: new Date().toISOString(),
-        });
-        setIsVisible(visible);
-      });
-    }
-  }, [onVisibilityChange]);
-
   if (!isBasicFunctionalityEnabled) {
     return (
       <View style={styles.container}>
@@ -64,7 +43,7 @@ const PerpsTabViewWithProvider: React.FC<PerpsTabViewWithProviderProps> = (
   }
 
   return (
-    <PerpsConnectionProvider isVisible={isVisible}>
+    <PerpsConnectionProvider>
       <PerpsStreamProvider>
         <PerpsStreamBridge />
         <PerpsTabView />

app/components/UI/Perps/hooks/index.ts

@@ -17,7 +17,6 @@ export { usePerpsSorting } from './usePerpsSorting';
 export { usePerpsNavigation } from './usePerpsNavigation';
 
 // Connection management hooks
-export { usePerpsConnectionLifecycle } from './usePerpsConnectionLifecycle';
 export { usePerpsConnection } from './usePerpsConnection';
 export { useWebSocketHealthToast } from './useWebSocketHealthToast';