flashbots-docs icon indicating copy to clipboard operation
flashbots-docs copied to clipboard

Add real-time MEV refund metrics to navbar

Open odysseus0 opened this issue 6 months ago • 3 comments

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

odysseus0 avatar Jul 11 '25 02:07 odysseus0

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Preview Comments Updated (UTC)
flashbots-docs Ready Ready Preview Comment Aug 26, 2025 10:50am

vercel[bot] avatar Jul 11 '25 02:07 vercel[bot]

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 avatar Aug 07 '25 01:08 odysseus0

Ready for review - navbar alignment fixed with consistent typography hierarchy

odysseus0 avatar Aug 26 '25 09:08 odysseus0