chore: trending tokens section #22400

sahar-fehri · 2025-11-10T12:06:35Z

Description

PR to add trending tokens card. This should be under a feature flag( selector selectAssetsTrendingTokensEnabled)

Changelog

CHANGELOG entry: No functional changes, this is still under a feature flag.

Related issues

Fixes:

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

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

Introduces a Trending Tokens UI section integrated into TrendingView with a shared token logo hook, updates the trending fetch hook to default to popular networks, and adds comprehensive tests and i18n.

UI (Trending):
- Trending Tokens Section: New TrendingTokensSection with TrendingTokensList, TrendingTokenRowItem, TrendingTokenLogo, and TrendingTokensSkeleton, integrated into TrendingView (header tweak, scroll container).
Hooks:
- New: useTokenLogo for shared image loading/error/background logic; refactors PerpsTokenLogo to use it.
- Updated: useTrendingRequest now accepts optional chainIds, defaults to popular networks via useNetworksByNamespace/useNetworksToUse, sets initial loading to true, and fixes debounce dependencies.
Utils:
- Add formatting helpers formatCompactUSD and formatMarketStats for market cap/volume.
Tests:
- Add extensive unit tests and snapshots for new components/hooks and updated trending request behavior.
Localization:
- Update en.json with trending.title, trending.view_all, and trending.tokens strings.

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

github-actions · 2025-11-10T12:06:45Z

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.

sahar-fehri · 2025-11-11T10:17:54Z

...gView/TrendingTokensSection/TrendingTokensList/TrendingTokenRowItem/TrendingTokenRowItem.tsx

+    }
+  }, []);
+
+  const pricePercentChange1d = 3.44; // TODO ; this should come from the trending hook


This will be added by platform api team; putting a placeholder value for now

sahar-fehri · 2025-11-11T10:18:21Z

app/components/Views/TrendingView/TrendingTokensSection/TrendingTokensSection.tsx

+  const trendingTokens = trendingTokensResults.slice(0, 3);
+
+  const handleViewAll = useCallback(() => {
+    // TODO: Implement view all logic


Will be implemented on a separate PR

sahar-fehri · 2025-11-11T10:18:37Z

app/components/Views/TrendingView/TrendingTokensSection/TrendingTokensSection.tsx

+  const handleTokenPress = useCallback((token: TrendingAsset) => {
+    // eslint-disable-next-line no-console
+    console.log('🚀 ~ TrendingTokensSection ~ token:', token);
+    // TODO: Implement token press logic


Will be implemented on a separate PR

sahar-fehri · 2025-11-11T10:29:52Z

...gView/TrendingTokensSection/TrendingTokensList/TrendingTokenRowItem/TrendingTokenRowItem.tsx

+          <Text variant={TextVariant.BodyMDMedium} color={TextColor.Default}>
+            {token.name}
+          </Text>
+          <Icon


There is an ongoing discussion around this badge; it should come from the trending api itself; thinking about removing the icon for now til we have something from API

app/components/UI/Assets/hooks/useTrendingRequest/index.ts

...mponents/Views/TrendingView/TrendingTokensSection/TrendingTokenLogo/TrendingTokenBgConfig.ts

...ts/Views/TrendingView/TrendingTokensSection/TrendingTokensList/TrendingTokenRowItem/index.ts

sahar-fehri · 2025-11-11T15:27:32Z

Very nit, in a future PR maybe we could show 3 items in the skeleton as soon as the screen is opened instead of showing an empty container and then snapping into 3 items, wdyt?

Screen.Recording.2025-11-11.at.15.18.29.mov
Also should this be clickable? Looks wrong 🤔

Screen.Recording.2025-11-11.at.15.19.35.mov

Should be fixed now 🙏

app/components/Views/TrendingView/TrendingTokensSection/TrendingTokensSection.tsx

...gView/TrendingTokensSection/TrendingTokensList/TrendingTokenRowItem/TrendingTokenRowItem.tsx

app/components/Views/TrendingView/TrendingTokensSection/TrendingTokensSection.tsx

juanmigdr

LGTM 🚀

app/components/Views/TrendingView/TrendingTokensSection/TrendingTokensSection.tsx

app/components/UI/Assets/hooks/useTrendingRequest/index.ts

sonarqubecloud · 2025-11-11T18:56:19Z

Quality Gate passed

Issues
11 New issues
0 Accepted issues

Measures
0 Security Hotspots
89.3% Coverage on New Code
4.3% Duplication on New Code

See analysis details on SonarQube Cloud

chore: trending tokens section

d0ddc0e

metamaskbot added the team-assets label Nov 10, 2025

github-actions bot added the size-L label Nov 10, 2025

sahar-fehri added 2 commits November 10, 2025 13:52

fix: test

93a023c

fix: test

0e58bc7

github-actions bot added size-XL and removed size-L labels Nov 10, 2025

sahar-fehri added 10 commits November 10, 2025 16:04

fix: test

8f7e6fc

Merge branch 'main' into feat/add-trending-tokens-section

9303424

fix: fix hook and cleanup

0b61fc4

fix: test

d872a37

fix: snap

49994f2

fix: refactor

c88088a

fix: add ut

256a7b9

fix: add ut

05e5ff7

fix: fix

a498622

fix: cleanup

04c97b2

sahar-fehri commented Nov 11, 2025

View reviewed changes

fix: add ut

5bf6b67

sahar-fehri marked this pull request as ready for review November 11, 2025 11:28

sahar-fehri requested review from a team as code owners November 11, 2025 11:28

Merge branch 'main' into feat/add-trending-tokens-section

1abda00

juanmigdr reviewed Nov 11, 2025

View reviewed changes

app/components/UI/Assets/hooks/useTrendingRequest/index.ts Show resolved Hide resolved

juanmigdr reviewed Nov 11, 2025

View reviewed changes

...mponents/Views/TrendingView/TrendingTokensSection/TrendingTokenLogo/TrendingTokenBgConfig.ts Outdated Show resolved Hide resolved

juanmigdr reviewed Nov 11, 2025

View reviewed changes

...ts/Views/TrendingView/TrendingTokensSection/TrendingTokensList/TrendingTokenRowItem/index.ts Outdated Show resolved Hide resolved

fix: fix clickable card

ed61527

sahar-fehri added 4 commits November 11, 2025 16:32

fix: fix styles

32ab0a1

fix: fix

81cce02

fix: rm config

4ea2b72

fix: rm config

8ef1ca4

cursor bot reviewed Nov 11, 2025

View reviewed changes

app/components/Views/TrendingView/TrendingTokensSection/TrendingTokensSection.tsx Show resolved Hide resolved

...gView/TrendingTokensSection/TrendingTokensList/TrendingTokenRowItem/TrendingTokenRowItem.tsx Outdated Show resolved Hide resolved

juanmigdr reviewed Nov 11, 2025

View reviewed changes

app/components/Views/TrendingView/TrendingTokensSection/TrendingTokensSection.tsx Outdated Show resolved Hide resolved

juanmigdr previously approved these changes Nov 11, 2025

View reviewed changes

fix: fix path import

13b9063

sahar-fehri dismissed juanmigdr’s stale review via 13b9063 November 11, 2025 16:49

sahar-fehri added 3 commits November 11, 2025 17:50

fix: translation

9e3add5

fix: fix percentage check

d830478

fix: fix

522e4d8

juanmigdr previously approved these changes Nov 11, 2025

View reviewed changes

sahar-fehri enabled auto-merge November 11, 2025 17:31

fix: add unit test

55ec0ee

sahar-fehri dismissed juanmigdr’s stale review via 55ec0ee November 11, 2025 17:49

cursor bot reviewed Nov 11, 2025

View reviewed changes

app/components/Views/TrendingView/TrendingTokensSection/TrendingTokensSection.tsx Show resolved Hide resolved

fix: add unit test

49ddd1a

cursor bot reviewed Nov 11, 2025

View reviewed changes

app/components/UI/Assets/hooks/useTrendingRequest/index.ts Show resolved Hide resolved

abretonc7s approved these changes Nov 12, 2025

View reviewed changes

juanmigdr approved these changes Nov 12, 2025

View reviewed changes

sahar-fehri added this pull request to the merge queue Nov 12, 2025

Merged via the queue into main with commit 88a6815 Nov 12, 2025
85 of 86 checks passed

sahar-fehri deleted the feat/add-trending-tokens-section branch November 12, 2025 09:18

github-actions bot locked and limited conversation to collaborators Nov 12, 2025

metamaskbot added the release-7.60.0 Issue or pull request that will be included in release 7.60.0 label Nov 12, 2025

Uh oh!

chore: trending tokens section #22400

chore: trending tokens section #22400

Conversation

sahar-fehri commented Nov 10, 2025 • 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 Nov 10, 2025

Uh oh!

sahar-fehri Nov 11, 2025

Choose a reason for hiding this comment

Uh oh!

sahar-fehri Nov 11, 2025

Choose a reason for hiding this comment

Uh oh!

sahar-fehri Nov 11, 2025

Choose a reason for hiding this comment

Uh oh!

sahar-fehri Nov 11, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

sahar-fehri commented Nov 11, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

juanmigdr left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

sonarqubecloud bot commented Nov 11, 2025

Quality Gate passed

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

sahar-fehri commented Nov 10, 2025 •

edited by cursor bot

Loading