Skip to content

Add real-time MEV refund metrics to navbar #623

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Add real-time MEV refund metrics to navbar #623

wants to merge 1 commit into from

Conversation

odysseus0
Copy link
Collaborator

Summary

  • Add MEV refund metrics widget component that displays real-time data from Dune Analytics
  • Integrate widget into the navbar to show MEV and gas refund values
  • Replace hardcoded mock values with live data from the production API

Changes

  1. New MEV metrics widget component (src/components/MevMetrics.tsx)

    • Fetches data from https://refund-metrics-dune-api.vercel.app/api/metrics
    • Shows loading state while fetching
    • Falls back to mock data on errors
    • Displays values formatted as "X.XX ETH"

  2. Navbar integration

    • Added custom navbar item type support
    • Configured widget to appear in navbar between docs/API links and GitHub link

Testing

  • Tested locally with yarn start
  • Widget successfully displays live data: MEV Refund: 403.64 ETH, Gas Refund: 751.80 ETH
  • Error handling verified by blocking API requests
  • No CORS issues when fetching from the API

Screenshots

Widget displaying in navbar:

Flashbots | Docs | API | Refund | MEV: 403.64 ETH | Gas: 751.80 ETH | GitHub

🤖 Generated with Claude Code

@vercel Vercel
Copy link

vercel bot commented Jul 11, 2025 •
edited
Loading

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
flashbots-docs ✅ Ready (Inspect) Visit Preview 💬 Add feedback Aug 7, 2025 2:10am

@odysseus0
Copy link
Collaborator Author

Update: Added feature flag support

I've pushed an update that adds runtime feature flag support to control widget visibility:

Changes in this update:

  • Widget now checks showWidget field from API response
  • Returns null early when showWidget === false to completely hide the widget
  • Maintains backward compatibility - displays widget if field is missing
  • Clean implementation with no flash of content during loading

Testing completed:

  • ✅ Widget displays normally when showWidget: true
  • ✅ Widget is completely hidden when showWidget: false
  • ✅ Toggle works at runtime via API environment variable

This allows us to control widget visibility across all sites from a single point (the API's environment variable) without requiring frontend redeployments.

@odysseus0
feat: add MEV and gas refund metrics widget with feature flag support
1d0ed7e 
- Add MevMetrics component to display both MEV and gas refunds
- Implement feature flag support via API response
- Configure via docusaurus.config.js customFields
- Entire widget clickable, redirects to protect.flashbots.net
- No fallback values - widget hides on error
- Gracefully handle loading and error states
- Mobile responsive with proper navbar integration
@odysseus0 odysseus0 force-pushed the feat/mev-refund-metrics-widget branch from e890bc2 to 1d0ed7e Compare August 7, 2025 02:09
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@sketsdever sketsdever Awaiting requested review from sketsdever sketsdever is a code owner

@zeroXbrock zeroXbrock Awaiting requested review from zeroXbrock zeroXbrock is a code owner

@sukoneck sukoneck Awaiting requested review from sukoneck sukoneck is a code owner

At least 1 approving review is required to merge this pull request.

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
1 participant
@odysseus0