fix: show sort direction in filter bar in trending list

[sahar-fehri]

Description

Add sort direction indicators to trending token filter buttons to improve UX by making the current sort order immediately visible.

Changelog

CHANGELOG entry: Adds sort icons on filter bar in trending list

Related issues

Fixes: https://consensyssoftware.atlassian.net/browse/ASSETS-3152

Manual testing steps

Feature: my feature name

  Scenario: user [verb for user action]
    Given [describe expected initial app state]

    When user [verb for user action]
    Then [describe expected outcome]

Screenshots/Recordings

Before

After

Screen.Recording.2026-05-07.at.14.44.42.mov

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.

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 to import wallets with many accounts and tokens
• I've instrumented key operations with Sentry traces for production performance metrics
  • See trace() for usage and addToken for an example

For performance guidelines and tooling, see the Performance Guide.

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

Low Risk
Low risk UI enhancement that only adds derived state and icon rendering for the sort button; minimal chance of regressions outside the Trending filter bar layout.

Overview
Adds a sort-direction indicator to the Trending token list price-change filter.

FilterButton/FilterBar now accept an optional iconName/priceChangeIconName and render that icon before the label. useTokenListFilters exposes a new priceChangeSortDirectionIcon (up/down) derived from priceChangeSortDirection, TokenListPageLayout wires it into the FilterBar, and tests cover the new icon mapping.

^{Reviewed by Cursor Bugbot for commit 0c6e926. Bugbot is set up for automated code reviews on this repo. Configure here.}

[github-actions]

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.

[cursor]

Cursor Bugbot has reviewed your changes and found 1 potential issue.

^{❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, have a team admin enable autofix in the Cursor dashboard.}

^{Reviewed by Cursor Bugbot for commit 96e8ebb. Configure here.}

[github-actions]

🔍 Smart E2E Test Selection

• Selected E2E tags: SmokeWalletPlatform
• Selected Performance tags: None (no tests recommended)
• Risk Level: low
• AI Confidence: 92%

click to see 🤖 AI reasoning details

E2E Test Selection:
The changes are entirely within the Trending feature area (app/components/UI/Trending/). They add a sort direction arrow icon (Arrow2Up/Arrow2Down) to the price change filter button in the Trending token list:

1. FilterBar.tsx: Adds optional iconName prop to FilterButton and FilterBarProps - purely additive, no breaking changes.
2. useTokenListFilters.ts: Adds priceChangeSortDirectionIcon memoized value that returns the appropriate icon based on sort direction.
3. TokenListPageLayout.tsx: Wires the new icon prop through to FilterBar.
4. useTokenListFilters.test.ts: Unit tests for the new behavior.

The Trending feature (discovery tab with Tokens section) is covered by SmokeWalletPlatform. No other tags are needed because:

• No controller or Engine changes
• No navigation/tab bar changes
• No shared modal/confirmation changes
• No cross-feature dependencies affected
• Changes are purely additive UI enhancements within Trending

No dependent tags are required per the tag descriptions since this is a Trending UI-only change.

Performance Test Selection:
The changes add a memoized icon name computation and an optional icon render in the FilterBar. These are trivial UI additions with no meaningful performance impact - no list rendering changes, no data loading changes, no state management changes that would affect render performance. Performance tests are not warranted.

View GitHub Actions results

[sonarqubecloud]

Quality Gate passed

Issues
1 New issue
0 Accepted issues

Measures
0 Security Hotspots
100.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud