Skip to content

Add real-time MEV refund metrics to navbar #39

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
odysseus0 wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Add real-time MEV refund metrics to navbar #39

odysseus0 wants to merge 2 commits into from

Conversation

@odysseus0
Copy link
Contributor

@odysseus0 odysseus0 commented Jul 11, 2025

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/blog links and forum link

Testing

  • Tested locally with npm 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:

BuilderNet | Docs | Blog | Refund | MEV: 403.64 ETH | Gas: 751.80 ETH | Forum

🤖 Generated with Claude Code

@vercel
Copy link

vercel bot commented Jul 11, 2025

@odysseus0 is attempting to deploy a commit to the Flashbots Team on Vercel.

A member of the Team first needs to authorize it.

@vercel
Copy link

vercel bot commented Jul 23, 2025 •
edited
Loading

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

Project Deployment Preview Updated (UTC)
buildernet-website Ready Ready Preview Aug 26, 2025 11:01am

sukoneck
sukoneck approved these changes Jul 23, 2025
View reviewed changes
Copy link
Collaborator

@sukoneck sukoneck left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks great! Wait for @sketsdever review before merging 🫡

@odysseus0
Copy link
Contributor Author

odysseus0 commented Jul 23, 2025 •
edited
Loading

@sukoneck Thanks for the review! I've made the following updates:

✅ Configuration Update

  • Moved API URL configuration to docusaurus.config.js under customFields (following Docusaurus best practices)
  • Removed environment variable approach - much cleaner with just one place to edit
  • The component uses useDocusaurusContext to access the configured URL

📝 Documentation

I've also added a new section to the README documenting the refund metrics widget:

  • How to configure the API endpoint
  • Link to the upstream API repository
  • Explanation of BuilderNet-specific behavior (gas refunds only, links to BuilderNet Dune dashboard)

Question: Since this is a public-facing repository, should we keep this technical documentation in the README, or would you prefer it moved elsewhere (maybe a separate CONTRIBUTING.md or internal docs)? Happy to adjust based on your preference. (CC. @sketsdever)

@sukoneck
Copy link
Collaborator

sukoneck commented Jul 23, 2025

@sukoneck Thanks for the review! I've made the following updates:
...
Question: Since this is a public-facing repository, should we keep this technical documentation in the README, or would you prefer it moved elsewhere (maybe a separate CONTRIBUTING.md or internal docs)? Happy to adjust based on your preference. (CC. @sketsdever)

Fine to leave in README for now. Let's reconsider CONTRIBUTING when Chris can review 👍 FYI I didn't see the docs update in your latest commit.

@odysseus0
Copy link
Contributor Author

odysseus0 commented Jul 23, 2025 •
edited
Loading

@sukoneck ah just realized didn't push! now it is there!

@odysseus0
Copy link
Contributor Author

odysseus0 commented Aug 7, 2025

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

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 odysseus0 force-pushed the feat/mev-refund-metrics-widget branch from 6622e2e to a66202f Compare August 7, 2025 02:09
@metachris
Copy link
Contributor

metachris commented Aug 11, 2025

It's not showing MEV refunds for me, and the vertical alignment is slightly off.

image

@odysseus0
Copy link
Contributor Author

odysseus0 commented Aug 26, 2025

@metachris forgot to sync. I believe we later decided to only show gas refund as MEV refund is more of a less relevant Flashbots feature that might not be credibly neutral to show here. Will look into the vertical alignment.

@odysseus0
Copy link
Contributor Author

odysseus0 commented Aug 26, 2025 •
edited
Loading

image Just adjusted the alignment! Simplified the CSS as well!

@odysseus0 odysseus0 force-pushed the feat/mev-refund-metrics-widget branch 3 times, most recently from d29d328 to 8839433 Compare August 26, 2025 09:49
@odysseus0
Copy link
Contributor Author

odysseus0 commented Aug 26, 2025

PR ready for merge - alignment and typography issues resolved with professional commits

@odysseus0 odysseus0 force-pushed the feat/mev-refund-metrics-widget branch 2 times, most recently from 90d4756 to 1c01810 Compare August 26, 2025 10:07
@odysseus0
Add MEV refund metrics widget with polished navbar integration
6d08a78 
- Add real-time gas refund metrics to BuilderNet navbar
- Fetch data from configurable API endpoint with feature flag support
- Use navbar__item class for proper Docusaurus framework integration
- Perfect typography: regular labels, semibold values (font-weight: 500) matching navbar links
- Include click handler to redirect to Dune analytics dashboard
- Hide on mobile with responsive design
- Add loading states and error handling with fallback data

Technical implementation follows Docusaurus best practices:
- Custom navbar component registered in ComponentTypes
- Minimal CSS leveraging framework alignment and typography
- Server-side rendering compatible with feature flag control
@odysseus0 odysseus0 force-pushed the feat/mev-refund-metrics-widget branch from 1c01810 to 6d08a78 Compare August 26, 2025 10:13
@odysseus0 @claude
Remove hardcoded dummy values from MEV metrics widget
fb31e04 
- Hide widget completely on API error instead of showing fallback data (380.29, 444.24)
- Makes error handling consistent across all three refund tracker implementations
- Widget now only shows when real data is successfully fetched

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@sukoneck sukoneck sukoneck approved these changes

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@odysseus0 @sukoneck @metachris