fix: Polish Perps filter patterns on Market and Transactions screens (MetaMask#29391)

<!--
Please submit this PR as a draft initially.

Do not mark it as "Ready for review" until this PR meets the canonical
Definition of Ready For Review in `docs/readme/ready-for-review.md`.

In short: the template must be materially complete (not just section
titles
present), all status checks must be currently passing, and the only
expected
follow-up commits must be reviewer-driven.
-->

## **Description**

This PR polishes the filter patterns on the Market and Transactions
pages for consistency. It is part of a wider initiative to standardize
our design patterns. [See this file
](https://www.figma.com/design/aRyo0N82L0IoNlMVIKvSpc/Mobile-Papercuts?node-id=1204-1329)for
context.

## **Changelog**

<!--
If this PR is not End-User-Facing and should not show up in the
CHANGELOG, you can choose to either:
1. Write `CHANGELOG entry: null`
2. Label with `no-changelog`

If this PR is End-User-Facing, please write a short User-Facing
description in the past tense like:
`CHANGELOG entry: Added a new tab for users to see their NFTs`
`CHANGELOG entry: Fixed a bug that was causing some NFTs to flicker`

(This helps the Release Engineer do their job more quickly and
accurately)
-->

CHANGELOG entry: null

## **Related issues**

Fixes:

MetaMask#28711
MetaMask#29396

## **Manual testing steps**

```gherkin
Feature: Perps market category filters (design system badge, no dismiss icon)

  Scenario: user selects and clears a perps market category using chip taps only
    Given I am on the Perps markets list and all category chips are visible with none selected (or a known starting filter)

    When user taps a category chip to apply that filter, then taps that same chip again
    Then the list filters when the chip is selected, no dismiss “×” appears on the chip, and tapping the selected chip again clears the filter back to all markets
```

## **Screenshots/Recordings**

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

### **Before**

<img width="768" height="771" alt="Screenshot 2026-04-28 at 8 54 33 PM"
src="https://github.com/user-attachments/assets/43fb350b-68ae-438a-b6cc-f771ec0beee8"
/>

### **After**

<img width="1285" height="743" alt="Screenshot 2026-04-28 at 1 43 59 PM"
src="https://github.com/user-attachments/assets/bded9482-933e-4214-8b3f-78fd6420ef74"
/>

## **Pre-merge author checklist**


<!--
Every checklist item must be consciously assessed before marking this PR
as
"Ready for review". A checked box means you deliberately considered that
responsibility, not that you literally performed every action listed.

Unchecked boxes are ambiguous: they are not an implicit "N/A" and they
are not
a silent "skip". See `docs/readme/ready-for-review.md` for the full
checklist
semantics.
-->

- [ ] 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.

#### Performance checks (if applicable)

- [ ] I've tested on Android
  - Ideally on a mid-range device; emulator is acceptable
- [ ] I've tested with a power user scenario
- Use these [power-user
SRPs](https://consensyssoftware.atlassian.net/wiki/spaces/TL1/pages/edit-v2/401401446401?draftShareId=9d77e1e1-4bdc-4be1-9ebb-ccd916988d93)
to import wallets with many accounts and tokens
- [ ] I've instrumented key operations with Sentry traces for production
performance metrics
- See [`trace()`](/app/util/trace.ts) for usage and
[`addToken`](/app/components/Views/AddAsset/components/AddCustomToken/AddCustomToken.tsx#L274)
for an example

For performance guidelines and tooling, see the [Performance
Guide](https://consensyssoftware.atlassian.net/wiki/spaces/TL1/pages/400085549067/Performance+Guide+for+Engineers).

## **Pre-merge reviewer checklist**

<!--
Reviewer checklist items follow the same semantics as the author
checklist: an
unchecked box is ambiguous, a checked box means the reviewer consciously
assessed that responsibility. See `docs/readme/ready-for-review.md`.
-->

- [ ] 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]
> **Low Risk**
> Low risk UI polish and minor component API simplification; main risk
is unintended visual/regression in Perps category filtering due to
removing the badge dismiss affordance.
> 
> **Overview**
> Polishes Perps filter UI spacing to be consistent across screens
(e.g., tighter gaps between Transactions filter tabs and adjusted Market
search bar padding).
> 
> Simplifies `PerpsMarketCategoryBadge` by removing the
`showDismiss`/`onDismiss` behavior and dismiss icon, updating
styling/typography, and adjusting `PerpsMarketCategoryBadges` plus tests
to reflect the new toggle-off-by-retap interaction without dismiss
indicators.
> 
> <sup>Reviewed by [Cursor Bugbot](https://cursor.com/bugbot) for commit
5e65e5f. Bugbot is set up for automated
code reviews on this repo. Configure
[here](https://www.cursor.com/dashboard/bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: amandaye0h

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

@@ -137,7 +137,6 @@ const styleSheet = (params: { theme: Theme }) => {
     },
     searchBarRow: {
       paddingHorizontal: 16,
-      paddingTop: 12,
       paddingBottom: 8,
     },
     searchContainer: {

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

@@ -477,7 +477,7 @@ const PerpsTransactionsView: React.FC = () => {
           <ScrollView
             horizontal
             showsHorizontalScrollIndicator={false}
-            contentContainerStyle={tw.style('flex-row gap-3')}
+            contentContainerStyle={tw.style('flex-row gap-2')}
             pointerEvents="auto"
             scrollEnabled={false}
           >
@@ -501,7 +501,7 @@ const PerpsTransactionsView: React.FC = () => {
       <View style={styles.filterContainer} pointerEvents="box-none">
         <ScrollView
           horizontal
-          contentContainerStyle={tw.style('flex-row gap-3')}
+          contentContainerStyle={tw.style('flex-row gap-2')}
           showsHorizontalScrollIndicator={false}
           pointerEvents="auto"
           scrollEnabled

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

@@ -20,11 +20,10 @@ export const styleSheet = (params: {
       justifyContent: 'center',
       paddingHorizontal: 12,
       paddingVertical: 8,
-      borderRadius: 8,
+      borderRadius: 12,
       backgroundColor: isSelected
         ? theme.colors.icon.default
         : theme.colors.background.muted,
-      gap: 4,
     },
     badgePressed: {
       opacity: 0.7,

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

@@ -21,7 +21,7 @@ describe('PerpsMarketCategoryBadge', () => {
     expect(getByText('Crypto')).toBeTruthy();
   });
 
-  it('calls onPress when pressed and not showing dismiss', () => {
+  it('calls onPress when pressed', () => {
     const onPress = jest.fn();
     const { getByText } = render(
       <PerpsMarketCategoryBadge {...defaultProps} onPress={onPress} />,
@@ -31,50 +31,6 @@ describe('PerpsMarketCategoryBadge', () => {
     expect(onPress).toHaveBeenCalledTimes(1);
   });
 
-  it('does not show dismiss icon when showDismiss is false', () => {
-    const { queryByTestId } = render(
-      <PerpsMarketCategoryBadge
-        {...defaultProps}
-        testID="badge"
-        showDismiss={false}
-      />,
-    );
-
-    expect(queryByTestId('badge-dismiss')).toBeNull();
-  });
-
-  it('shows dismiss icon when showDismiss is true', () => {
-    const { getByTestId } = render(
-      <PerpsMarketCategoryBadge
-        {...defaultProps}
-        testID="badge"
-        showDismiss
-        isSelected
-      />,
-    );
-
-    expect(getByTestId('badge-dismiss')).toBeTruthy();
-  });
-
-  it('calls onDismiss when pressed with showDismiss true', () => {
-    const onDismiss = jest.fn();
-    const onPress = jest.fn();
-    const { getByTestId } = render(
-      <PerpsMarketCategoryBadge
-        {...defaultProps}
-        testID="badge"
-        showDismiss
-        isSelected
-        onPress={onPress}
-        onDismiss={onDismiss}
-      />,
-    );
-
-    fireEvent.press(getByTestId('badge'));
-    expect(onDismiss).toHaveBeenCalledTimes(1);
-    expect(onPress).not.toHaveBeenCalled();
-  });
-
   it('has correct accessibility properties', () => {
     const { getByRole } = render(
       <PerpsMarketCategoryBadge {...defaultProps} isSelected />,

app/components/UI/Perps/components/PerpsMarketCategoryBadge/PerpsMarketCategoryBadge.tsx

@@ -1,13 +1,10 @@
-import React, { useCallback } from 'react';
+import React from 'react';
 import { Pressable } from 'react-native';
-import Text, {
+import {
+  FontWeight,
+  Text,
   TextVariant,
-} from '../../../../../component-library/components/Texts/Text';
-import Icon, {
-  IconName,
-  IconSize,
-  IconColor,
-} from '../../../../../component-library/components/Icons/Icon';
+} from '@metamask/design-system-react-native';
 import { useStyles } from '../../../../../component-library/hooks';
 import { styleSheet } from './PerpsMarketCategoryBadge.styles';
 import type { PerpsMarketCategoryBadgeProps } from './PerpsMarketCategoryBadge.types';
@@ -16,59 +13,40 @@ import type { PerpsMarketCategoryBadgeProps } from './PerpsMarketCategoryBadge.t
  * PerpsMarketCategoryBadge - Interactive badge for category filtering
  *
  * Displays a pressable badge/pill for selecting market categories.
- * When selected and showDismiss is true, shows an "×" icon to clear the filter.
  *
  * @example
  * ```tsx
  * <PerpsMarketCategoryBadge
- *   category="crypto"
  *   label="Crypto"
  *   isSelected={selectedCategory === 'crypto'}
- *   showDismiss={selectedCategory === 'crypto'}
- *   onPress={() => setSelectedCategory('crypto')}
- *   onDismiss={() => setSelectedCategory('all')}
+ *   onPress={() => handleCategoryPress('crypto')}
  * />
  * ```
  */
 const PerpsMarketCategoryBadge: React.FC<PerpsMarketCategoryBadgeProps> = ({
   label,
   isSelected,
-  showDismiss = false,
   onPress,
-  onDismiss,
   testID,
 }) => {
   const { styles } = useStyles(styleSheet, { isSelected });
 
-  const handlePress = useCallback(() => {
-    if (showDismiss && onDismiss) {
-      // If showing dismiss and clicked, treat as dismiss
-      onDismiss();
-    } else {
-      onPress();
-    }
-  }, [showDismiss, onDismiss, onPress]);
-
   return (
     <Pressable
       style={({ pressed }) => [styles.badge, pressed && styles.badgePressed]}
-      onPress={handlePress}
+      onPress={onPress}
       testID={testID}
       accessibilityRole="button"
       accessibilityState={{ selected: isSelected }}
       accessibilityLabel={label}
     >
-      <Text variant={TextVariant.BodySM} style={styles.badgeText}>
+      <Text
+        variant={TextVariant.BodyMd}
+        fontWeight={FontWeight.Medium}
+        style={styles.badgeText}
+      >
         {label}
       </Text>
-      {showDismiss && (
-        <Icon
-          name={IconName.Close}
-          size={IconSize.Xs}
-          color={IconColor.Inverse}
-          testID={testID ? `${testID}-dismiss` : undefined}
-        />
-      )}
     </Pressable>
   );
 };

app/components/UI/Perps/components/PerpsMarketCategoryBadge/PerpsMarketCategoryBadge.types.ts

@@ -7,18 +7,10 @@ export interface PerpsMarketCategoryBadgeProps {
    * Whether this badge is currently selected
    */
   isSelected: boolean;
-  /**
-   * Whether to show the dismiss "×" icon (typically when selected)
-   */
-  showDismiss?: boolean;
   /**
    * Callback when the badge is pressed
    */
   onPress: () => void;
-  /**
-   * Callback when the dismiss icon is pressed (only used when showDismiss is true)
-   */
-  onDismiss?: () => void;
   /**
    * Optional test ID for E2E testing
    */

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

@@ -70,8 +70,8 @@ describe('PerpsMarketCategoryBadges', () => {
   });
 
   describe('Selected state (category selected)', () => {
-    it('shows all badges when a category is selected, with dismiss icon on selected one', () => {
-      const { getByText, getByTestId, queryByTestId } = render(
+    it('shows all badges when a category is selected, without dismiss icons', () => {
+      const { getByText, queryByTestId } = render(
         <PerpsMarketCategoryBadges
           {...defaultProps}
           selectedCategory="crypto"
@@ -84,8 +84,7 @@ describe('PerpsMarketCategoryBadges', () => {
       expect(getByText('Commodities')).toBeTruthy();
       expect(getByText('Forex')).toBeTruthy();
 
-      // Selected badge should show dismiss icon, others should not
-      expect(getByTestId('category-badges-crypto-dismiss')).toBeTruthy();
+      expect(queryByTestId('category-badges-crypto-dismiss')).toBeNull();
       expect(queryByTestId('category-badges-stocks-dismiss')).toBeNull();
       expect(queryByTestId('category-badges-commodities-dismiss')).toBeNull();
       expect(queryByTestId('category-badges-forex-dismiss')).toBeNull();
@@ -154,12 +153,12 @@ describe('PerpsMarketCategoryBadges', () => {
       );
 
       // Should show available categories (fallback to "all" view)
-      // No auto-reset - user must explicitly dismiss via badge click
+      // No auto-reset — user must tap a badge to change selection
       expect(getByText('Crypto')).toBeTruthy();
       expect(getByText('Stocks')).toBeTruthy();
       // Forex is not in availableCategories, so it shouldn't show
       expect(queryByText('Forex')).toBeNull();
-      // No auto-reset - filter is only reset when user clicks dismiss on a selected badge
+      // No auto-reset — filter clears when user taps the selected category again
       expect(onCategorySelect).not.toHaveBeenCalled();
     });
 

app/components/UI/Perps/components/PerpsMarketCategoryBadges/PerpsMarketCategoryBadges.tsx

@@ -30,7 +30,7 @@ const DEFAULT_CATEGORIES: CategoryBadgeConfig[] = [
  *
  * Always displays all category badges in a horizontal scroll.
  * The selected category is visually highlighted.
- * Tapping a selected badge deselects it (toggles back to 'all').
+ * Tapping a selected badge again deselects it (toggles back to 'all').
  *
  * @example
  * ```tsx
@@ -93,9 +93,7 @@ const PerpsMarketCategoryBadges: React.FC<PerpsMarketCategoryBadgesProps> = ({
             <PerpsMarketCategoryBadge
               label={strings(config.labelKey)}
               isSelected={isCategorySelected}
-              showDismiss={isCategorySelected}
               onPress={() => handleCategoryPress(config.category)}
-              onDismiss={() => onCategorySelect('all')}
               testID={testID ? `${testID}-${config.category}` : undefined}
             />
           </Animated.View>