feat: add user earning history graph and list on history button click

[nickewansmith]

Description

This PR adds a pooled staking user rewards history button to the asset detail page for ETH. This button leads to a bar chart graph of the user rewards over a 2 year period. A user can switch to 7D, M or Y to get 7 days, monthly or yearly data in the graph and can select different bars to see the amount of that bar's time period in the chart header. Default view with no selected bars shows the total amount of rewards earned.

1. What is the reason for the change?

To add a chart view for the user to look at their historical rewards in detail

2. What is the improvement/solution?

A chart view has been added that will allow the user to look at their historical rewards in detail

Related issues

Fixes:

Manual testing steps

• Go to the asset view for eth by clicking on eth or staked eth in the token list on the home page
• Note the total rewards on the asset detail page, it should be the same as in the chart
• Click the button for earnings history where staking details are to see the chart, it should load
• If there is any delay, there should be placeholders for the loading state
• If there is an error and there is no data for some reason, the loading state is currently the default
• The chart should show the total rewards and when you click on a bar that bar should become highlighted and stay highlighted until clicked again or until another bar is clicked. When highlighted the graph should show that bars info and that info should match the history list
• In the chart, we do not skip zero amount time periods
• In the list we do skip tailing zero amount time period but not any that are in between time periods with amounts
• Clicking each time period in the top of the chart should switch the data to that time period and unselect any selected bar
• The chart should be fairly quick to load and use and there should be no lagging actions

Screenshots/Recordings

Before

No chart or button n/a

After

Simulator.Screen.Recording.-.iPhone.SE.3rd.generation.-.2025-01-11.at.18.47.42.mp4

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.

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

Bitrise

❌❌❌ pr_smoke_e2e_pipeline failed on Bitrise! ❌❌❌

Commit hash: 512a37e
Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/d2b00cf2-a0c8-4454-a280-6a5d3f48b36b

Note

• You can kick off another pr_smoke_e2e_pipeline on Bitrise by removing and re-applying the Run Smoke E2E label on the pull request

Tip

• Check the documentation if you have any doubts on how to understand the failure on bitrise

[socket-security]

Updated dependencies detected. Learn more about Socket for GitHub ↗︎

Package	New capabilities	Transitives	Size	Publisher
npm/@metamask/[email protected] 🔁 npm/@metamask/[email protected]	None	0	187 kB	metamaskbot

View full report↗︎

[github-actions]

Bitrise

❌❌❌ pr_smoke_e2e_pipeline failed on Bitrise! ❌❌❌

Commit hash: 81e1a9a
Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/4ddcf746-f58f-407a-a349-66b6fde46049

Note

• You can kick off another pr_smoke_e2e_pipeline on Bitrise by removing and re-applying the Run Smoke E2E label on the pull request

Tip

• Check the documentation if you have any doubts on how to understand the failure on bitrise

[github-actions]

Bitrise

🔄🔄🔄 pr_smoke_e2e_pipeline started on Bitrise...🔄🔄🔄

Commit hash: d843584
Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/57193248-0603-40b7-b4de-cd87a6d58dbf

Note

• This comment will auto-update when build completes
• You can kick off another pr_smoke_e2e_pipeline on Bitrise by removing and re-applying the Run Smoke E2E label on the pull request

[github-actions]

Bitrise

❌❌❌ pr_smoke_e2e_pipeline failed on Bitrise! ❌❌❌

Commit hash: 4938ac2
Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/ca2e2afb-f300-4c37-87df-46f9c456f88e

Note

• You can kick off another pr_smoke_e2e_pipeline on Bitrise by removing and re-applying the Run Smoke E2E label on the pull request

Tip

• Check the documentation if you have any doubts on how to understand the failure on bitrise

[codecov-commenter]

Codecov Report

Attention: Patch coverage is 88.20059% with 40 lines in your changes missing coverage. Please review.

Project coverage is 61.17%. Comparing base (bcec04e) to head (659183c).
Report is 11 commits behind head on main.

Files with missing lines	Patch %	Lines
.../StakingEarningsHistory/StakingEarningsHistory.tsx	84.44%	7 Missing and 7 partials ⚠️
...rningsHistoryChart/StakingEarningsHistoryChart.tsx	84.78%	3 Missing and 11 partials ⚠️
...EarningsHistoryList/StakingEarningsHistoryList.tsx	72.22%	3 Missing and 2 partials ⚠️
...ngEarningsTimePeriod/StakingEarningsTimePeriod.tsx	82.60%	3 Missing and 1 partial ⚠️
...onents/UI/Stake/hooks/useStakingEarningsHistory.ts	85.00%	1 Missing and 2 partials ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #12746      +/-   ##
==========================================
+ Coverage   60.89%   61.17%   +0.27%     
==========================================
  Files        1917     1935      +18     
  Lines       42708    43087     +379     
  Branches     5788     5850      +62     
==========================================
+ Hits        26007    26357     +350     
- Misses      14937    14955      +18     
- Partials     1764     1775      +11     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[github-actions]

Bitrise

✅✅✅ pr_smoke_e2e_pipeline passed on Bitrise! ✅✅✅

Commit hash: 99c6f19
Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/018e376a-071a-4c5a-94f2-80c8122cc489

Note

• You can kick off another pr_smoke_e2e_pipeline on Bitrise by removing and re-applying the Run Smoke E2E label on the pull request

[github-actions]

Bitrise

✅✅✅ pr_smoke_e2e_pipeline passed on Bitrise! ✅✅✅

Commit hash: 659183c
Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/27af95d3-d59e-45ee-a59b-d5f6e0911c94

Note

• You can kick off another pr_smoke_e2e_pipeline on Bitrise by removing and re-applying the Run Smoke E2E label on the pull request

[sonarqubecloud]

Quality Gate passed

Issues
3 New issues
0 Accepted issues

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

See analysis details on SonarQube Cloud

[Cal-L]

LGTM

[georgewrmarshall]

LGTM! One non-blocking suggestion

[salimtb]

Assets changes LGTM