From d403366f60e68baa5228d2ce162fe90fe25d1334 Mon Sep 17 00:00:00 2001 From: George Zhang Date: Thu, 10 Jul 2025 19:03:12 -0700 Subject: [PATCH 1/2] feat: add MEV refund metrics widget component MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Add a new React component that fetches and displays real-time MEV and gas refund metrics from the Dune Analytics API. The widget shows loading states and falls back to mock data on errors. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude --- src/components/MevMetrics.module.css | 39 +++++++++++++++++ src/components/MevMetrics.tsx | 64 ++++++++++++++++++++++++++++ 2 files changed, 103 insertions(+) create mode 100644 src/components/MevMetrics.module.css create mode 100644 src/components/MevMetrics.tsx diff --git a/src/components/MevMetrics.module.css b/src/components/MevMetrics.module.css new file mode 100644 index 00000000..fdab949e --- /dev/null +++ b/src/components/MevMetrics.module.css @@ -0,0 +1,39 @@ +.container { + display: flex; + align-items: center; + gap: 0.75rem; + font-size: 0.875rem; + color: var(--ifm-navbar-link-color); + margin-right: 0.75rem; +} + +.metric { + display: flex; + align-items: center; + gap: 0.25rem; +} + +.label { + font-weight: 400; +} + +.value { + font-family: monospace; + font-weight: 600; + transition: opacity 0.3s ease; +} + +.loading { + opacity: 0.5; +} + +.separator { + color: var(--ifm-navbar-link-color); + opacity: 0.3; +} + +@media (max-width: 996px) { + .container { + display: none !important; + } +} \ No newline at end of file diff --git a/src/components/MevMetrics.tsx b/src/components/MevMetrics.tsx new file mode 100644 index 00000000..813a34fd --- /dev/null +++ b/src/components/MevMetrics.tsx @@ -0,0 +1,64 @@ +import React, { useEffect, useState } from 'react'; +import styles from './MevMetrics.module.css'; + +interface MetricsResponse { + totalMevRefund: number; + totalGasRefund: number; + fetchedAt: string; + stale: boolean; +} + +export default function MevMetrics(): JSX.Element { + const [data, setData] = useState(null); + const [loading, setLoading] = useState(true); + + useEffect(() => { + const fetchMetrics = async () => { + try { + const response = await fetch('https://refund-metrics-dune-api.vercel.app/api/metrics'); + if (!response.ok) { + throw new Error(`HTTP error! status: ${response.status}`); + } + const metrics: MetricsResponse = await response.json(); + setData(metrics); + } catch (error) { + console.error('Error fetching MEV metrics:', error); + // Mock data as fallback + setData({ + totalMevRefund: 380.29, + totalGasRefund: 444.24, + fetchedAt: new Date().toISOString(), + stale: true + }); + } finally { + setLoading(false); + } + }; + + fetchMetrics(); + }, []); + + const formatValue = (value: number): string => { + return `${value.toFixed(2)} ETH`; + }; + + return ( +
+ Refund + | +
+ MEV: + + {loading ? '...' : data && formatValue(data.totalMevRefund)} + +
+ | +
+ Gas: + + {loading ? '...' : data && formatValue(data.totalGasRefund)} + +
+
+ ); +} \ No newline at end of file From 8ce8f6d7d4bd570263e44700b2bf882996e5d3d5 Mon Sep 17 00:00:00 2001 From: George Zhang Date: Thu, 10 Jul 2025 19:03:28 -0700 Subject: [PATCH 2/2] feat: integrate MEV metrics widget into navbar MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Add custom navbar item type to support the MEV metrics widget and configure it in the navbar. The widget displays real-time MEV and gas refund data fetched from the Dune Analytics API. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude --- docusaurus.config.js | 4 ++++ src/theme/NavbarItem/ComponentTypes.tsx | 27 +++++++++++++++++++++++++ 2 files changed, 31 insertions(+) create mode 100644 src/theme/NavbarItem/ComponentTypes.tsx diff --git a/docusaurus.config.js b/docusaurus.config.js index 5a7a4048..65939bb6 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -69,6 +69,10 @@ module.exports = async function createConfigAsync() { sidebarId: 'api', position: 'left', }, + { + type: 'custom-mevMetrics', + position: 'right', + }, { href: 'https://github.com/flashbots/docs', label: 'GitHub', diff --git a/src/theme/NavbarItem/ComponentTypes.tsx b/src/theme/NavbarItem/ComponentTypes.tsx new file mode 100644 index 00000000..faff4de8 --- /dev/null +++ b/src/theme/NavbarItem/ComponentTypes.tsx @@ -0,0 +1,27 @@ +import DefaultNavbarItem from '@theme/NavbarItem/DefaultNavbarItem'; +import DropdownNavbarItem from '@theme/NavbarItem/DropdownNavbarItem'; +import LocaleDropdownNavbarItem from '@theme/NavbarItem/LocaleDropdownNavbarItem'; +import SearchNavbarItem from '@theme/NavbarItem/SearchNavbarItem'; +import HtmlNavbarItem from '@theme/NavbarItem/HtmlNavbarItem'; +import DocNavbarItem from '@theme/NavbarItem/DocNavbarItem'; +import DocSidebarNavbarItem from '@theme/NavbarItem/DocSidebarNavbarItem'; +import DocsVersionNavbarItem from '@theme/NavbarItem/DocsVersionNavbarItem'; +import DocsVersionDropdownNavbarItem from '@theme/NavbarItem/DocsVersionDropdownNavbarItem'; +import MevMetrics from '@site/src/components/MevMetrics'; + +import type {ComponentTypesObject} from '@theme/NavbarItem/ComponentTypes'; + +const ComponentTypes: ComponentTypesObject = { + default: DefaultNavbarItem, + localeDropdown: LocaleDropdownNavbarItem, + search: SearchNavbarItem, + dropdown: DropdownNavbarItem, + html: HtmlNavbarItem, + doc: DocNavbarItem, + docSidebar: DocSidebarNavbarItem, + docsVersion: DocsVersionNavbarItem, + docsVersionDropdown: DocsVersionDropdownNavbarItem, + 'custom-mevMetrics': MevMetrics, +}; + +export default ComponentTypes;