chore: Aligned Transactions/Activity tab with the rest of trade lane (MetaMask#21236)

## **Description**

This PR updates the Activity/Transactions page UI to align with the
latest design system standards and improve consistency across the app.

**What is the reason for the change?**
The Activity page's filter buttons (used in Transfers and Perps tabs)
were using outdated styling and inconsistent component patterns. The
buttons didn't follow the current design system guidelines and used a
mix of StyleSheet-based styling and old component-library components.

**What is the improvement/solution?**
- Migrated Activity page to use MetaMask Design System React Native
(MMDS) components (`Box`, `Text`) instead of component-library
equivalents
- Updated all filter buttons (All/Purchased/Sold in Transfers tab, and
Trades/Orders/Funding in Perps tab) to use consistent styling:
  - Height: 40px (previously 32px)
  - Horizontal padding: 16px
  - Border radius: 12px (previously 20px)
  - Gap between buttons: 12px (previously 8px)
  - Text: Body MD variant with Medium font weight
- Selected state: `bg-icon-default` background with `text-icon-inverse`
text
- Unselected state: `bg-background-muted` background with `text-default`
text
- Replaced `TouchableOpacity` with `Pressable` for better interaction
handling
- Converted styling to use Tailwind CSS via `useTailwind()` hook instead
of StyleSheet
- Improved accessibility with proper pressed states

## **Changelog**

CHANGELOG entry: Updated Activity page filter buttons to use design
system components with consistent styling

## **Related issues**

Fixes: 

## **Manual testing steps**

```gherkin
Feature: Updated Activity page filter buttons

  Scenario: user views and interacts with Transfers filter buttons
    Given user is on the Activity tab
    When user taps on the "Transfers" tab
    Then user should see "All", "Purchased", and "Sold" filter buttons
    And filter buttons should have 40px height with rounded corners
    And the "All" button should be selected by default with dark background
    When user taps on "Purchased" button
    Then "Purchased" button should become selected with dark background
    And "All" button should become unselected with light background

  Scenario: user views and interacts with Perps filter buttons
    Given user is on the Activity tab
    And Perps feature is enabled
    When user taps on the "Perps" tab
    Then user should see "Trades", "Orders", and "Funding" filter buttons
    And filter buttons should have 40px height with rounded corners
    And the "Trades" button should be selected by default
    When user taps on "Orders" button
    Then "Orders" button should become selected with dark background
    And transactions list should update to show orders

  Scenario: user views button pressed state
    Given user is on any Activity tab with filter buttons
    When user presses and holds a filter button
    Then button should show a pressed state with reduced opacity
    When user releases the button
    Then button should return to its normal state
```

## **Screenshots/Recordings**

### **Before**


https://github.com/user-attachments/assets/ad772865-a079-40dd-a3bf-d9f5776c443e

### **After**


https://github.com/user-attachments/assets/87fb66ab-9611-4142-b568-a6d551e897a3


https://github.com/user-attachments/assets/0b110dae-1adc-47cf-92f3-865a7e8d1f37

## **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]
> Replaces Activity/Transactions UI with design-system Header/Tabs,
standardizes filter/tab styling and behavior, adds dynamic tab
management, and updates related styles, tests, and e2e selectors.
> 
> - **ActivityView (major)**:
> - Replace legacy header/tab system with `HeaderBase` and `TabsList`;
use `Box` and Tailwind utilities.
> - Add dynamic tab ordering/visibility (Transactions, Orders, Perps,
Predict) with feature flags; expose `goToTabIndex`.
>   - Move network filter button into Transactions tab and align styles.
> - **Tabs**:
> - Update `TabsList` to use `React.Children.toArray` + filter valid
elements; improve key/label extraction; add swipe navigation; expose
testIDs.
> - **Perps Transactions**:
> - Switch to design-system `Text` variants; Tailwind spacing for filter
bar; tweak paddings and section header; minor empty-state padding.
> - **Transactions/Multichain/Unified views**:
> - Normalize empty/loading containers (full-width, `paddingVertical:
40`, bg); simplify styles creation in Multichain view.
> - `TransactionElement`: restructure `ListItem` layout; wrap
import-time row in `View`; small style cleanups.
> - **Tests**:
> - Overhaul ActivityView tests to mock new `TabsList`, validate tab
presence/order and navigation; snapshot updates.
> - Update e2e selectors/page objects (add `activity-view-tabs` IDs;
swipe tabs bar; select tab by label).
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
5246c91. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: brianacnguyen

app/component-library/components-temp/Tabs/TabsList/TabsList.tsx

@@ -35,30 +35,24 @@ const TabsList = forwardRef<TabsListRef, TabsListProps>(
 
     const tabs: TabItem[] = useMemo(
       () =>
-        React.Children.map(children, (child, index) => {
-          if (React.isValidElement(child)) {
-            const props = child.props as {
+        React.Children.toArray(children)
+          .filter((child) => React.isValidElement(child))
+          .map((child, index) => {
+            const props = (child as React.ReactElement).props as {
               tabLabel?: string;
               isDisabled?: boolean;
             };
             const tabLabel = props.tabLabel || `Tab ${index + 1}`;
             const isDisabled = props.isDisabled || false;
             return {
-              key: child.key?.toString() || `tab-${index}`,
+              key:
+                (child as React.ReactElement).key?.toString() || `tab-${index}`,
               label: tabLabel,
               content: child,
               isDisabled,
               isLoaded: false,
             };
-          }
-          return {
-            key: `tab-${index}`,
-            label: `Tab ${index + 1}`,
-            content: child,
-            isDisabled: false,
-            isLoaded: false,
-          };
-        }) || [],
+          }),
       [children],
     );
 

app/component-library/components-temp/Tabs/TabsList/__snapshots__/TabsList.test.tsx.snap

@@ -146,109 +146,6 @@ exports[`TabsList Edge Cases handles non-React element children with default val
           </Text>
         </View>
       </View>
-      <View
-        onLayout={[Function]}
-        style={
-          {
-            "flexShrink": 0,
-          }
-        }
-      >
-        <View
-          accessibilityState={
-            {
-              "busy": undefined,
-              "checked": undefined,
-              "disabled": false,
-              "expanded": undefined,
-              "selected": undefined,
-            }
-          }
-          accessibilityValue={
-            {
-              "max": undefined,
-              "min": undefined,
-              "now": undefined,
-              "text": undefined,
-            }
-          }
-          accessible={true}
-          collapsable={false}
-          focusable={true}
-          onBlur={[Function]}
-          onClick={[Function]}
-          onFocus={[Function]}
-          onResponderGrant={[Function]}
-          onResponderMove={[Function]}
-          onResponderRelease={[Function]}
-          onResponderTerminate={[Function]}
-          onResponderTerminationRequest={[Function]}
-          onStartShouldSetResponder={[Function]}
-          style={
-            {
-              "alignItems": "center",
-              "flexDirection": "row",
-              "justifyContent": "center",
-              "paddingBottom": 4,
-              "paddingLeft": 0,
-              "paddingRight": 0,
-              "paddingTop": 4,
-              "position": "relative",
-            }
-          }
-          testID="undefined-tab-1"
-        >
-          <Text
-            accessibilityRole="text"
-            numberOfLines={1}
-            style={
-              [
-                {
-                  "color": "#121314",
-                  "fontFamily": "Geist Bold",
-                  "fontSize": 16,
-                  "fontWeight": 400,
-                  "letterSpacing": 0,
-                  "lineHeight": 24,
-                },
-                {
-                  "opacity": 0,
-                },
-              ]
-            }
-          >
-            Tab 2
-          </Text>
-          <Text
-            accessibilityRole="text"
-            numberOfLines={1}
-            style={
-              [
-                {
-                  "color": "#686e7d",
-                  "fontFamily": "Geist Regular",
-                  "fontSize": 16,
-                  "fontWeight": 400,
-                  "letterSpacing": 0,
-                  "lineHeight": 24,
-                },
-                {
-                  "alignItems": "center",
-                  "bottom": 0,
-                  "display": "flex",
-                  "justifyContent": "center",
-                  "left": 0,
-                  "position": "absolute",
-                  "right": 0,
-                  "top": 0,
-                },
-              ]
-            }
-          >
-            Tab 2
-          </Text>
-        </View>
-      </View>
     </View>
   </View>
   <View

app/components/UI/Perps/Views/PerpsTransactionsView/PerpsTransactionsView.styles.ts

@@ -8,47 +8,21 @@ export const styleSheet = (params: { theme: Theme }) => {
     container: {
       flex: 1,
     },
-    filterTabText: {
-      color: colors.text.alternative,
-    },
     filterContainer: {
+      paddingVertical: 8,
       paddingHorizontal: 16,
-      paddingVertical: 12,
       backgroundColor: colors.background.default,
     },
-    filterScrollView: {
-      flexGrow: 0,
-    },
-    filterTabContainer: {
-      gap: 8,
-    },
-    filterTabActive: {
-      backgroundColor: colors.background.defaultPressed,
-    },
-    transactionList: {
-      flex: 1,
-      minHeight: 1, // Prevents FlashList layout issues
-    },
     tabDescription: {
       paddingHorizontal: 16,
       paddingTop: 8,
     },
-    sectionHeader: {
-      paddingTop: 12,
-      paddingHorizontal: 16,
-      backgroundColor: colors.background.default,
-    },
-    sectionHeaderText: {
-      fontSize: 16,
-      fontWeight: '600' as const,
-      color: colors.text.alternative,
-    },
     transactionItem: {
       flexDirection: 'row' as const,
       alignItems: 'center' as const,
       paddingVertical: 16,
       paddingHorizontal: 16,
-      minHeight: 72, // Consistent height for FlashList
+      minHeight: 72,
     },
     tokenIconContainer: {
       width: 36,
@@ -104,12 +78,11 @@ export const styleSheet = (params: { theme: Theme }) => {
       flex: 1,
       justifyContent: 'center' as const,
       alignItems: 'center' as const,
-      paddingVertical: 48,
+      paddingVertical: 40,
     },
-    fillTag: {
-      flexDirection: 'row' as const,
-      alignItems: 'center' as const,
-      gap: 10,
+    sectionHeader: {
+      paddingVertical: 12,
+      paddingHorizontal: 16,
     },
   };
 };

app/components/UI/Perps/Views/PerpsTransactionsView/PerpsTransactionsView.tsx

@@ -10,10 +10,15 @@ import React, {
 import { RefreshControl, ScrollView, View } from 'react-native';
 import { useSelector } from 'react-redux';
 import { strings } from '../../../../../../locales/i18n';
-import Text, {
+import {
+  Text,
   TextVariant,
-} from '../../../../../component-library/components/Texts/Text';
+  TextColor,
+  ButtonSize,
+} from '@metamask/design-system-react-native';
 import { useStyles } from '../../../../../component-library/hooks';
+import { TabEmptyState } from '../../../../../component-library/components-temp/TabEmptyState';
+import ButtonFilter from '../../../../../component-library/components-temp/ButtonFilter';
 import Routes from '../../../../../constants/navigation/Routes';
 import { PerpsNavigationParamList } from '../../types/navigation';
 import { selectSelectedInternalAccountFormattedAddress } from '../../../../../selectors/accountsController';
@@ -36,12 +41,11 @@ import { formatDateSection } from '../../utils/formatUtils';
 import { styleSheet } from './PerpsTransactionsView.styles';
 import { usePerpsMeasurement } from '../../hooks/usePerpsMeasurement';
 import { TraceName } from '../../../../../util/trace';
-import ButtonFilter from '../../../../../component-library/components-temp/ButtonFilter';
-import { ButtonSize } from '@metamask/design-system-react-native';
-import { TabEmptyState } from '../../../../../component-library/components-temp/TabEmptyState';
+import { useTailwind } from '@metamask/design-system-twrnc-preset';
 
 const PerpsTransactionsView: React.FC<PerpsTransactionsViewProps> = () => {
   const { styles } = useStyles(styleSheet, {});
+  const tw = useTailwind();
   const navigation = useNavigation<NavigationProp<PerpsNavigationParamList>>();
 
   // Transaction data is now computed from hooks instead of stored in state
@@ -266,7 +270,7 @@ const PerpsTransactionsView: React.FC<PerpsTransactionsViewProps> = () => {
     if (item.fill) {
       return (
         <Text
-          variant={TextVariant.BodySM}
+          variant={TextVariant.BodySm}
           style={item.fill.isPositive ? styles.profitAmount : styles.lossAmount}
         >
           {item.fill.amount}
@@ -285,7 +289,7 @@ const PerpsTransactionsView: React.FC<PerpsTransactionsViewProps> = () => {
       }
 
       return (
-        <Text variant={TextVariant.BodySM} style={statusStyle}>
+        <Text variant={TextVariant.BodySm} style={statusStyle}>
           {item.order.text}
         </Text>
       );
@@ -294,7 +298,7 @@ const PerpsTransactionsView: React.FC<PerpsTransactionsViewProps> = () => {
     if (item.fundingAmount) {
       return (
         <Text
-          variant={TextVariant.BodySM}
+          variant={TextVariant.BodySm}
           style={
             item.fundingAmount.isPositive
               ? styles.profitAmount
@@ -314,7 +318,7 @@ const PerpsTransactionsView: React.FC<PerpsTransactionsViewProps> = () => {
     if (item.type === 'header') {
       return (
         <View style={styles.sectionHeader}>
-          <Text style={styles.sectionHeaderText}>{item.title}</Text>
+          <Text color={TextColor.TextAlternative}>{item.title}</Text>
         </View>
       );
     }
@@ -382,7 +386,7 @@ const PerpsTransactionsView: React.FC<PerpsTransactionsViewProps> = () => {
           <ScrollView
             horizontal
             showsHorizontalScrollIndicator={false}
-            style={styles.filterScrollView}
+            contentContainerStyle={tw.style('flex-row gap-3')}
             pointerEvents="auto"
             scrollEnabled={false}
           >
@@ -392,7 +396,7 @@ const PerpsTransactionsView: React.FC<PerpsTransactionsViewProps> = () => {
 
         {filterTabDescription && (
           <View style={styles.tabDescription}>
-            <Text variant={TextVariant.BodySM}>{filterTabDescription}</Text>
+            <Text variant={TextVariant.BodySm}>{filterTabDescription}</Text>
           </View>
         )}
 
@@ -406,7 +410,7 @@ const PerpsTransactionsView: React.FC<PerpsTransactionsViewProps> = () => {
       <View style={styles.filterContainer} pointerEvents="box-none">
         <ScrollView
           horizontal
-          contentContainerStyle={styles.filterTabContainer}
+          contentContainerStyle={tw.style('flex-row gap-3')}
           showsHorizontalScrollIndicator={false}
           pointerEvents="auto"
           scrollEnabled
@@ -417,7 +421,7 @@ const PerpsTransactionsView: React.FC<PerpsTransactionsViewProps> = () => {
 
       {filterTabDescription && (
         <View style={styles.tabDescription}>
-          <Text variant={TextVariant.BodySM}>{filterTabDescription}</Text>
+          <Text variant={TextVariant.BodySm}>{filterTabDescription}</Text>
         </View>
       )}