feat: STAKE-808: graph with historic vault apy tooltip #12804

Matt561 · 2024-12-19T22:42:56Z

Description

This PR updates the existing pooled-staking learn more modal to include an interactive historic vault APY graph.

Changes

Updated pooled-staking learn more modal
Added <InteractiveTimespanChart /> component that is meant to be reusable in other flows (e.g. stablecoin lending)
Added useVaultAprs and useVaultApys hooks
- These hooks use the stake-sdk under the hood to fetch data.
Added vaultAprs and vaultApys to our staking redux state.

Related issues

Ticket: [FE]Graph with vault historic APY in tooltip

Manual testing steps

Note: The related staking-api and staking-cronjobs changes haven't been deployed yet. They're pending code review. I can provide instructions to demo locally if interested.

From the asset list screen (home screen), click on "earn" next to Ethereum. Alternatively, you can select the "stake" or "stake more" button within the ETH asset overview screen.
From the staking input screen, click on the tooltip icon "?" next to MetaMask Pool
You should now see the learn more modal with the graph

Screenshots/Recordings

Before

stake-808-learn-more-modal-with-interactive-graph-before.mov

After

Loading Skeleton

stake-808-learn-more-modal-with-interactive-graph-loading-skeleton-demo.mov

Interactive Graph

stake-808-learn-more-modal-with-interactive-graph-after.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.

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 · 2024-12-19T22:43:08Z

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 · 2024-12-19T22:45:02Z

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`	184 kB	metamaskbot

View full report↗︎

app/components/UI/Stake/hooks/useVaultAprs.tsx

app/components/UI/Stake/sdk/stakeSdkProvider.tsx

github-actions · 2025-01-15T17:59:01Z

Bitrise

❌❌❌ pr_smoke_e2e_pipeline failed on Bitrise! ❌❌❌

Commit hash: e9f2204
Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/eee1ebf0-de06-4797-a495-b5f6d4c0ec72

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 · 2025-01-16T18:09:43Z

Bitrise

❌❌❌ pr_smoke_e2e_pipeline failed on Bitrise! ❌❌❌

Commit hash: b57dd1a
Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/5e6feed4-3e95-46eb-8e74-eb528368b6ed

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

…e timespan chart component

github-actions · 2025-01-31T21:22:32Z

Bitrise

❌❌❌ pr_smoke_e2e_pipeline failed on Bitrise! ❌❌❌

Commit hash: 3477f62
Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/ffc352ce-1733-40d8-b3b8-1ee0fc47dae0

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

…-tooltip

codecov-commenter · 2025-01-31T21:43:55Z

Codecov Report

Attention: Patch coverage is 87.16981% with 34 lines in your changes missing coverage. Please review.

Project coverage is 61.32%. Comparing base (ef3b5d1) to head (fe0ef91).

Files with missing lines	Patch %	Lines
...gLearnMoreModal/InteractiveTimespanChart/index.tsx	72.88%	12 Missing and 4 partials ⚠️
...ake/components/PoolStakingLearnMoreModal/index.tsx	80.00%	5 Missing and 2 partials ⚠️
...veTimespanChart/ChartTimespanButtonGroup/index.tsx	82.35%	2 Missing and 1 partial ⚠️
...dal/InteractiveTimespanChart/GraphCursor/index.tsx	66.66%	0 Missing and 3 partials ⚠️
...al/InteractiveTimespanChart/GraphTooltip/index.tsx	57.14%	1 Missing and 2 partials ⚠️
...eModal/InteractiveTimespanChart/PlotLine/index.tsx	87.50%	0 Missing and 1 partial ⚠️
...tionFooter/FooterButtonGroup/FooterButtonGroup.tsx	0.00%	0 Missing and 1 partial ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main   #12804      +/-   ##
==========================================
+ Coverage   61.18%   61.32%   +0.14%     
==========================================
  Files        1937     1952      +15     
  Lines       43131    43376     +245     
  Branches     5862     5901      +39     
==========================================
+ Hits        26391    26602     +211     
- Misses      14963    14983      +20     
- Partials     1777     1791      +14

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

amitabh94

Looks good to me overall. Left some minor comments!
Great job on this ! 👏🏼

app/components/UI/Stake/hooks/useStakingEligibility.test.tsx

app/components/UI/Stake/sdk/stakeSdkProvider.tsx

app/constants/navigation/Routes.ts

ios/Podfile.lock

locales/languages/en.json

app/components/UI/Stake/constants/index.ts

nickewansmith

Looks great Matthew! Just a few minor comments. Tests well for me!

app/components/UI/Stake/sdk/stakeSdkProvider.tsx

...onents/PoolStakingLearnMoreModal/InteractiveTimespanChart/ChartTimespanButtonGroup/index.tsx

…t mockups

github-actions · 2025-02-03T18:21:37Z

Bitrise

✅✅✅ pr_smoke_e2e_pipeline passed on Bitrise! ✅✅✅

Commit hash: 9968f04
Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/3ebd2833-969f-4ab2-8ad1-e25d57378f9c

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 · 2025-02-03T18:24:18Z

Quality Gate passed

Issues
1 New issue
0 Accepted issues

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

See analysis details on SonarQube Cloud

nickewansmith

LGTM

amitabh94

LGTM!

sethkfman

LGTM - reviewed package.json and yarn.lock

metamaskbot added the team-identity label Dec 19, 2024

Matt561 added the team-stake label Dec 19, 2024

Matt561 force-pushed the feat/stake-808/graph-with-historic-vault-apy-tooltip branch 3 times, most recently from e121cd6 to f7b65ad Compare December 19, 2024 22:54

Matt561 commented Dec 19, 2024

View reviewed changes

app/components/UI/Stake/hooks/useVaultAprs.tsx Outdated Show resolved Hide resolved

Matt561 force-pushed the feat/stake-808/graph-with-historic-vault-apy-tooltip branch from f7b65ad to aa5c436 Compare December 20, 2024 17:16

Matt561 force-pushed the feat/stake-808/graph-with-historic-vault-apy-tooltip branch 2 times, most recently from 1bafbdb to a6e84c0 Compare January 10, 2025 22:37

nickewansmith reviewed Jan 13, 2025

View reviewed changes

app/components/UI/Stake/sdk/stakeSdkProvider.tsx Outdated Show resolved Hide resolved

Matt561 force-pushed the feat/stake-808/graph-with-historic-vault-apy-tooltip branch from 095522a to e9f2204 Compare January 15, 2025 17:57

Matt561 added Run Smoke E2E Triggers smoke e2e on Bitrise and removed team-identity labels Jan 15, 2025

Matt561 force-pushed the feat/stake-808/graph-with-historic-vault-apy-tooltip branch 2 times, most recently from 30c8006 to b57dd1a Compare January 16, 2025 18:08

Matt561 added Run Smoke E2E Triggers smoke e2e on Bitrise and removed Run Smoke E2E Triggers smoke e2e on Bitrise labels Jan 16, 2025

Matt561 marked this pull request as ready for review January 16, 2025 18:42

Matt561 requested review from a team as code owners January 16, 2025 18:42

Matt561 requested review from amitabh94 and nickewansmith January 16, 2025 21:17

Matt561 added 3 commits January 30, 2025 17:37

feat: replaced existing learn more modal with historic vault apr graph

8f0a3c3

chore: bumped @metamask/stake-sdk to v0.4.0

3fded66

feat: updated pooled-staking learn more modal with generic interactiv…

46b6d0f

…e timespan chart component

fix: updated staking hooks to support latest stake-sdk

3477f62

Matt561 requested a review from nickewansmith January 31, 2025 21:13

Matt561 added Run Smoke E2E Triggers smoke e2e on Bitrise and removed Run Smoke E2E Triggers smoke e2e on Bitrise labels Jan 31, 2025

Merge branch 'main' into feat/stake-808/graph-with-historic-vault-apy…

fe0ef91

…-tooltip

amitabh94 reviewed Feb 1, 2025

View reviewed changes

nickewansmith reviewed Feb 1, 2025

View reviewed changes

app/components/UI/Stake/sdk/stakeSdkProvider.tsx Outdated Show resolved Hide resolved

...onents/PoolStakingLearnMoreModal/InteractiveTimespanChart/ChartTimespanButtonGroup/index.tsx Show resolved Hide resolved

Matt561 added 6 commits February 3, 2025 12:09

feat: reverted STAKING.MODALS.LEARN_MORE route name

4f83d66

feat: removed endpointEnv.LOCAL from stake sdk init

77b8699

feat: reverted change to flexible_unstaking_description

5361c35

feat: removed unused VALIDATOR_STAKING_LEARN_MORE_URL

14a3370

feat: updated ChartTimespanButtonGroup button styles to reflect lates…

0c4ef6d

…t mockups

feat: reset Podfile.lock to origin/main

9968f04

Matt561 requested review from nickewansmith and amitabh94 February 3, 2025 18:17

Matt561 added Run Smoke E2E Triggers smoke e2e on Bitrise and removed Run Smoke E2E Triggers smoke e2e on Bitrise labels Feb 3, 2025

nickewansmith approved these changes Feb 3, 2025

View reviewed changes

amitabh94 approved these changes Feb 3, 2025

View reviewed changes

sethkfman approved these changes Feb 3, 2025

View reviewed changes

Matt561 added this pull request to the merge queue Feb 3, 2025

Merged via the queue into main with commit 4c22942 Feb 3, 2025
43 checks passed

Matt561 deleted the feat/stake-808/graph-with-historic-vault-apy-tooltip branch February 3, 2025 21:28

github-actions bot locked and limited conversation to collaborators Feb 3, 2025

metamaskbot added the release-7.41.0 Issue or pull request that will be included in release 7.41.0 label Feb 3, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: STAKE-808: graph with historic vault apy tooltip #12804

feat: STAKE-808: graph with historic vault apy tooltip #12804

Matt561 commented Dec 19, 2024 •

edited

Loading

github-actions bot commented Dec 19, 2024

socket-security bot commented Dec 19, 2024 •

edited

Loading

github-actions bot commented Jan 15, 2025 •

edited by metamaskbot

Loading

github-actions bot commented Jan 16, 2025 •

edited by metamaskbot

Loading

github-actions bot commented Jan 31, 2025 •

edited by metamaskbot

Loading

codecov-commenter commented Jan 31, 2025

amitabh94 left a comment •

edited

Loading

nickewansmith left a comment

github-actions bot commented Feb 3, 2025 •

edited by metamaskbot

Loading

sonarqubecloud bot commented Feb 3, 2025

nickewansmith left a comment

amitabh94 left a comment

sethkfman left a comment

feat: STAKE-808: graph with historic vault apy tooltip #12804

feat: STAKE-808: graph with historic vault apy tooltip #12804

Conversation

Matt561 commented Dec 19, 2024 • edited Loading

Description

Changes

Related issues

Manual testing steps

Screenshots/Recordings

Before

After

Loading Skeleton

Interactive Graph

Pre-merge author checklist

Pre-merge reviewer checklist

github-actions bot commented Dec 19, 2024

socket-security bot commented Dec 19, 2024 • edited Loading

github-actions bot commented Jan 15, 2025 • edited by metamaskbot Loading

Bitrise

github-actions bot commented Jan 16, 2025 • edited by metamaskbot Loading

Bitrise

github-actions bot commented Jan 31, 2025 • edited by metamaskbot Loading

Bitrise

codecov-commenter commented Jan 31, 2025

Codecov Report

amitabh94 left a comment • edited Loading

Choose a reason for hiding this comment

nickewansmith left a comment

Choose a reason for hiding this comment

github-actions bot commented Feb 3, 2025 • edited by metamaskbot Loading

Bitrise

sonarqubecloud bot commented Feb 3, 2025

Quality Gate passed

nickewansmith left a comment

Choose a reason for hiding this comment

amitabh94 left a comment

Choose a reason for hiding this comment

sethkfman left a comment

Choose a reason for hiding this comment

Matt561 commented Dec 19, 2024 •

edited

Loading

socket-security bot commented Dec 19, 2024 •

edited

Loading

github-actions bot commented Jan 15, 2025 •

edited by metamaskbot

Loading

github-actions bot commented Jan 16, 2025 •

edited by metamaskbot

Loading

github-actions bot commented Jan 31, 2025 •

edited by metamaskbot

Loading

amitabh94 left a comment •

edited

Loading

github-actions bot commented Feb 3, 2025 •

edited by metamaskbot

Loading