[DON'T MERGE] Use data service to fetch historical prices from Price API

[mcmire]

Description

This PR demonstrates how useQuery from @metamask/react-data-query can be used to fetch data through a data service, which makes a request, instead of making a request directly in the UI.

See corresponding core PR: MetaMask/core#8393

Changelog

CHANGELOG entry:

Related issues

Fixes:

Manual testing steps

1. Go to this page...

Screenshots/Recordings

Before

After

Pre-merge author checklist

• I've followed MetaMask Contributor Docs and MetaMask Extension 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.

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

[socket-security]

Review the following changes in direct dependencies. Learn more about Socket for GitHub.

Diff	Package	Supply Chain Security	Vulnerability	Quality	Maintenance	License
	@​metamask-previews/​price-api@​0.0.0-preview-f1592e178

View full report

[socket-security]

Caution

MetaMask internal reviewing guidelines:

• Do not ignore-all
• Each alert has instructions on how to review if you don't know what it means. If lost, ask your Security Liaison or the supply-chain group
• Copy-paste ignore lines for specific packages or a group of one kind with a note on what research you did to deem it safe.
  @SocketSecurity ignore npm/PACKAGE@VERSION

Action	Severity	Alert  (click "▶" to expand/collapse)
Block		Network access: npm @metamask-previews/price-api in module globalThis["fetch"] Module: globalThis["fetch"] Location: Package overview From: package.json → npm/@metamask-previews/price-api@0.0.0-preview-f1592e178 ℹ Read more on: This package | This alert | What is network access? Next steps: Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at support@socket.dev. Suggestion: Packages should remove all network access that is functionally unnecessary. Consumers should audit network access to ensure legitimate use. Mark the package as acceptable risk. To ignore this alert only in this pull request, reply with the comment @SocketSecurity ignore npm/@metamask-previews/price-api@0.0.0-preview-f1592e178. You can also ignore all packages with @SocketSecurity ignore-all. To ignore an alert for all future pull requests, use Socket's Dashboard to change the triage state of this alert.

View full report

[metamaskbotv2]

Builds ready [f3f503c]

• builds: chrome, firefox
• builds (beta): chrome, firefox
• builds (flask): chrome, firefox
• builds (test): chrome, firefox
• builds (test-flask): chrome, firefox
• webpack builds: chrome, firefox
• webpack builds (beta): chrome, firefox
• webpack builds (flask): chrome, firefox
• webpack builds (test): chrome, firefox
• webpack builds (test-flask): chrome, firefox
• bundle size: Bundle Size Stats
• interaction-benchmark: Interaction Stats
• storybook: Storybook
• typescript migration: Dashboard
• all artifacts
• bundle viz:

  • background: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12
  • common: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21
  • ui: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21
  • content-script: 0
  • offscreen: 0

⚡ Performance Benchmarks (Total: 🟢 8 pass · 🟡 1 warn · 🔴 0 fail)

Baseline (latest main): f34f804 | Date: 9/10/58222 | Pipeline: 24103572274 | Baseline logs

Interaction Benchmarks · Samples: 5

Benchmark	chrome-browserify
loadNewAccount	🟢 [Show logs]
confirmTx	🟢 [Show logs]
bridgeUserActions	🟢 [Show logs]

Startup Benchmarks · Samples: 100

Benchmark	chrome-webpack
startupStandardHome	🟢 [Show logs]
startupPowerUserHome	🟡 [Show logs]

📈 Results compared to the previous 5 runs on main

• ↓ startupStandardHome/uiStartup: -10%
• ↓ startupStandardHome/load: -11%
• ↓ startupStandardHome/domContentLoaded: -11%
• ↓ startupStandardHome/backgroundConnect: -32%
• ↓ startupStandardHome/firstReactRender: -20%
• ↓ startupStandardHome/loadScripts: -10%
• ↓ startupStandardHome/numNetworkReqs: -29%
• ↑ startupPowerUserHome/numNetworkReqs: +43%

🌐 Core Web Vitals — 🟢 good · 🟡 needs improvement · 🔴 poor (web.dev thresholds)

• 🔴 startupPowerUserHome/INP: p75 584ms

User Journey Benchmarks · Samples: 5 · mock API

⚠️ Missing data: chrome/browserify/userJourneyAssets, chrome/browserify/userJourneyTransactions

Benchmark	chrome-browserify
onboardingImportWallet	🟢 [Show logs]
onboardingNewWallet	🟢 [Show logs]
importSrpHome	🟢 [Show logs]

Dapp Page Load Benchmarks · Samples: 100

Benchmark	chrome-browserify
dappPageLoad	🟢 [Show logs]

Bundle size diffs [🚨 Warning! Bundle size has increased!]

• background: 44.53 KiB (0.8%)
• ui: -46.65 KiB (-0.55%)
• common: 52.57 KiB (0.42%)