chore: visual update and animation market insights by zone-live · Pull Request #27914 · MetaMask/metamask-mobile

zone-live · 2026-03-25T13:34:32Z

Description

Simulator.Screen.Recording.-.iPhone.17.Pro.-.2026-03-25.at.16.09.21.mov

Changelog

CHANGELOG entry: null

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

Medium Risk
Adds new Reanimated/SVG border animation and a polling-based useViewportTracking hook, which may impact UI performance or behave differently across layouts if measurement/visibility is off.

Overview
Updates the Market Insights entry card visuals by switching to a new rounded, muted-background card layout and replacing the prior header/arrow treatment with an inline AI icon plus footer text.

Introduces an AnimatedGradientBorder (SVG + Reanimated) that sweeps a gradient stroke around the card when it becomes fully visible, driven by new useViewportTracking viewport detection.

Adds targeted tests for the new trace behavior, layout/dimension updates, and the viewport-tracking hook; also excludes the legacy MarketInsightsEntryCardOriginal.tsx and the animation component from coverage/sonar, and moves the entry card placement earlier in AssetOverviewContent.

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

github-actions · 2026-03-25T13:34:46Z

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.

github-actions · 2026-03-25T16:28:25Z

✅ E2E Fixture Validation — Schema is up to date
17 value mismatches detected (expected — fixture represents an existing user).
View details

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.}

github-actions · 2026-03-25T19:02:59Z

🔍 Smart E2E Test Selection

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

click to see 🤖 AI reasoning details

E2E Test Selection:
The changes are entirely contained within the MarketInsights feature area:

AnimatedGradientBorder.tsx (new): A new SVG-based animated border component using react-native-reanimated. Purely visual, no business logic impact.
AnimatedGradientBorder.constants.ts (new): Animation constants only.
MarketInsightsEntryCard.tsx: UI refactor - new layout with animated border, viewport tracking for animation trigger. No changes to data flow, navigation, or shared components.
useViewportTracking.ts (new): A viewport detection hook using polling. Scoped to MarketInsights.
AssetOverviewContent.tsx: Minor repositioning of the MarketInsightsEntryCard render location (moved earlier in the JSX tree, before Tron section). No logic changes.
jest.config.js: Added coverage exclusions for the new/original files - no impact on E2E tests.
sonar-project.properties: Minor config change.

No E2E tests exist for MarketInsights or TokenDetails in the spec files (confirmed via grep). The changes don't touch any shared infrastructure: no navigation changes, no modal/bottom sheet changes, no controller changes, no confirmation flows, no account/network management. The risk is low and no E2E tags are applicable.

Performance Test Selection:
The AnimatedGradientBorder uses react-native-reanimated for a one-time sweep animation triggered by viewport visibility. While it introduces animation, it is a lightweight, single-occurrence animation on a single card component within the token details page. It does not affect account lists, app startup, login flows, swap flows, or any other performance-critical paths. No performance tests are warranted.

View GitHub Actions results

Prithpal-Sooriya · 2026-03-25T19:23:34Z

I thought this was added in another PR?

It was, a while ago, but we're still updating the position in the view based on feedback 😅

sonarqubecloud · 2026-03-25T19:26:45Z

Quality Gate passed

Issues
1 New issue
0 Accepted issues

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

See analysis details on SonarQube Cloud

zone-live added 5 commits March 25, 2026 11:17

chore: adds animation and visual updates

b0f11e2

chore: animate on scroll

9a52827

Merge branch 'main' into TSA-visual-update-and-animation-market-insights

8ad59a1

chore: use hook

b289e64

chore: tweak

e21b4b3

zone-live requested a review from a team as a code owner March 25, 2026 13:34

metamaskbot added the team-social-ai Social & AI team label Mar 25, 2026

github-actions Bot added size-L risk-low Low testing needed · Low bug introduction risk labels Mar 25, 2026

cursor Bot reviewed Mar 25, 2026

View reviewed changes

Comment thread app/components/UI/MarketInsights/components/MarketInsightsEntryCard/AnimatedGradientBorder.tsx Outdated

chore: adds MarketInsightsEntryCardOriginal on the side

87cc8bd

github-actions Bot added risk-low Low testing needed · Low bug introduction risk and removed risk-low Low testing needed · Low bug introduction risk labels Mar 25, 2026

cursor Bot reviewed Mar 25, 2026

View reviewed changes

Comment thread ...nts/UI/MarketInsights/components/MarketInsightsEntryCard/MarketInsightsEntryCardOriginal.tsx

chore: fade fix

51c5da5

github-actions Bot added risk-low Low testing needed · Low bug introduction risk and removed risk-low Low testing needed · Low bug introduction risk labels Mar 25, 2026

chore: add file to ignore list

30772e3

github-actions Bot added risk-low Low testing needed · Low bug introduction risk and removed risk-low Low testing needed · Low bug introduction risk labels Mar 25, 2026

cursor Bot reviewed Mar 25, 2026

View reviewed changes

Comment thread app/components/UI/MarketInsights/components/MarketInsightsEntryCard/MarketInsightsEntryCard.tsx

chore: review points

5a96c78

github-actions Bot added risk-medium Moderate testing recommended · Possible bug introduction risk and removed risk-low Low testing needed · Low bug introduction risk labels Mar 25, 2026

cursor Bot reviewed Mar 25, 2026

View reviewed changes

Comment thread ...nts/UI/MarketInsights/components/MarketInsightsEntryCard/AnimatedGradientBorder.constants.ts

Merge branch 'main' into TSA-visual-update-and-animation-market-insights

28f933f

github-actions Bot added risk-low Low testing needed · Low bug introduction risk and removed risk-medium Moderate testing recommended · Possible bug introduction risk labels Mar 25, 2026

chore: clean up

a21f9e7

github-actions Bot added risk-low Low testing needed · Low bug introduction risk and removed risk-low Low testing needed · Low bug introduction risk labels Mar 25, 2026

fix: irgnore file

5018f6f

github-actions Bot added risk-low Low testing needed · Low bug introduction risk and removed risk-low Low testing needed · Low bug introduction risk labels Mar 25, 2026

zone-live added the skip-sonar-cloud Only used for bypassing sonar cloud when failures are not relevant to the changes. label Mar 25, 2026

Merge branch 'main' into TSA-visual-update-and-animation-market-insights

184d877

github-actions Bot added risk-low Low testing needed · Low bug introduction risk and removed risk-low Low testing needed · Low bug introduction risk labels Mar 25, 2026

zone-live added 2 commits March 25, 2026 18:36

chore: add coverage and ignore file

56bb34d

chore: clean up

778cef9

github-actions Bot added risk-low Low testing needed · Low bug introduction risk and removed risk-low Low testing needed · Low bug introduction risk labels Mar 25, 2026

cursor Bot reviewed Mar 25, 2026

View reviewed changes

Comment thread ...onents/UI/MarketInsights/components/MarketInsightsEntryCard/MarketInsightsEntryCard.test.tsx

chore: clean up

f96c206

github-actions Bot added risk-low Low testing needed · Low bug introduction risk and removed risk-low Low testing needed · Low bug introduction risk labels Mar 25, 2026

Prithpal-Sooriya reviewed Mar 25, 2026

View reviewed changes

Prithpal-Sooriya approved these changes Mar 25, 2026

View reviewed changes

zone-live enabled auto-merge March 25, 2026 19:25

zone-live added this pull request to the merge queue Mar 25, 2026

Merged via the queue into main with commit dfdfbce Mar 25, 2026
62 checks passed

zone-live deleted the TSA-visual-update-and-animation-market-insights branch March 25, 2026 19:47

github-actions Bot locked and limited conversation to collaborators Mar 25, 2026

metamaskbot added the release-7.72.0 Issue or pull request that will be included in release 7.72.0 label Mar 25, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

chore: visual update and animation market insights#27914

chore: visual update and animation market insights#27914
zone-live merged 16 commits into
mainfrom
TSA-visual-update-and-animation-market-insights

zone-live commented Mar 25, 2026 •

edited by cursor Bot

Loading

Uh oh!

github-actions Bot commented Mar 25, 2026

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

github-actions Bot commented Mar 25, 2026

Uh oh!

cursor Bot left a comment

Uh oh!

Uh oh!

github-actions Bot commented Mar 25, 2026

Uh oh!

Prithpal-Sooriya Mar 25, 2026

Uh oh!

zone-live Mar 25, 2026

Uh oh!

sonarqubecloud Bot commented Mar 25, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Conversation

zone-live commented Mar 25, 2026 • 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 Mar 25, 2026

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

github-actions Bot commented Mar 25, 2026

Uh oh!

cursor Bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

github-actions Bot commented Mar 25, 2026

🔍 Smart E2E Test Selection

Uh oh!

Prithpal-Sooriya Mar 25, 2026

Choose a reason for hiding this comment

Uh oh!

zone-live Mar 25, 2026

Choose a reason for hiding this comment

Uh oh!

sonarqubecloud Bot commented Mar 25, 2026

Quality Gate passed

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

zone-live commented Mar 25, 2026 •

edited by cursor Bot

Loading