chore: use DS svg icons in token details chart

[sahar-fehri]

Description

PR to use DS icons instead of custom SVG icons for chart.

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

Screen.Recording.2026-04-23.at.22.15.16.mov

After

Screen.Recording.2026-04-23.at.22.14.29.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-only change that swaps the chart type toggle’s custom SVG icons for design-system Icon components; behavior and data flow are unchanged.

Overview
Updates the token details chart TimeRangeSelector to remove custom react-native-svg candlestick/line icons and instead render the design-system Icon (IconName.TrendUp / IconName.Candlestick) for the chart type toggle.

This simplifies icon rendering by relying on DS-provided sizing/color tokens (IconSize, IconColor) rather than inline SVG paths.

^{Reviewed by Cursor Bugbot for commit a710363. 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.

[github-actions]

🔍 Smart E2E Test Selection

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

click to see 🤖 AI reasoning details

E2E Test Selection:
The change in TimeRangeSelector.tsx is a pure UI refactor: it removes two custom inline SVG icon components (CandlestickIcon and LineChartIcon built with react-native-svg) and replaces them with standard Icon components from @metamask/design-system-react-native. The IconSize import is also consolidated to come from the design system package instead of the local component library. There are no logic, state, API, or behavioral changes. The component is used in the AdvancedChart within the AssetOverview price view (token detail screen). No E2E tests directly cover the chart type toggle button functionality, and this change does not affect any critical user flows (accounts, confirmations, swaps, networks, etc.). The risk is low and no E2E test tags are warranted.

Performance Test Selection:
This is a pure icon rendering refactor — replacing custom SVG components with design system Icon components. If anything, this slightly simplifies rendering (fewer custom SVG nodes). No performance impact is expected, and no performance test tags are needed.

View GitHub Actions results

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

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

See analysis details on SonarQube Cloud

[georgewrmarshall]

LGTM!