flashbots-docs
flashbots-docs copied to clipboard
Add real-time MEV refund metrics to navbar
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
-
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"
- Fetches data from
-
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
The latest updates on your projects. Learn more about Vercel for GitHub.
| Project | Deployment | Preview | Comments | Updated (UTC) |
|---|---|---|---|---|
| flashbots-docs | Preview | Comment | Aug 26, 2025 10:50am |
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
showWidgetfield from API response - Returns
nullearly whenshowWidget === falseto 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.
Ready for review - navbar alignment fixed with consistent typography hierarchy