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

[Matt561]

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

1. 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.
2. From the staking input screen, click on the tooltip icon "?" next to MetaMask Pool
3. 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

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]

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]

New and removed dependencies detected. Learn more about Socket for GitHub ↗︎

Package	New capabilities	Transitives	Size	Publisher
npm/@metamask/[email protected]	network	0	182 kB	metamaskbot

🚮 Removed packages: npm/@metamask/[email protected], npm/@metamask/[email protected]

View full report↗︎

[Matt561]

@amitabh94 @nickewansmith How do you guys think we should keep redux values up to date? If we store the vaultAprs in our redux store when and how do we refresh it? We can fetch on render (hit the staking-api cache) but this will require a skeleton loader state so we don't get pop-in.

Curious to hear your thoughts 😄

[amitabh94]

You could also fetch/refresh the data in the input view itself and then either pass the data as prop or get data in the component directly from the selector.