Add real-time MEV refund metrics to navbar

docusaurus.config.js

@@ -66,6 +66,10 @@ module.exports = async function createConfigAsync() {
           items: [
             { to: '/docs', label: 'Docs', position: 'left' }, // or position: 'right'
             { to: '/blog', label: 'Blog', position: 'left' }, // or position: 'right'
+            {
+              type: 'custom-mevMetrics',
+              position: 'right',
+            },
             {
               href: 'https://collective.flashbots.net/c/buildernet/31',
               label: 'Forum',
@@ -139,5 +143,9 @@ module.exports = async function createConfigAsync() {
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
       '@docusaurus/plugin-ideal-image',
     ],
+    customFields: {
+      refundMetricsApiUrl: 'https://refund-metrics-dune-api.vercel.app',
+      refundMetricsRedirectUrl: 'https://dune.com/flashbots/buildernet',
+    },
   };
 };

src/components/MevMetrics.module.css

@@ -0,0 +1,37 @@
+.metric {
+  gap: 0.25rem;
+  color: var(--ifm-navbar-link-color);
+}
+
+.value {
+  font-weight: 500;
+}
+
+.loading {
+  opacity: 0.5;
+}
+
+.separator {
+  color: var(--ifm-navbar-link-color);
+  opacity: 0.3;
+}
+
+.clickable {
+  cursor: pointer;
+  transition: opacity 0.2s ease;
+}
+
+.clickable:hover {
+  opacity: 0.8;
+}
+
+.clickable:active {
+  opacity: 0.6;
+}
+
+/* Hide on mobile */
+@media (max-width: 996px) {
+  .container {
+    display: none !important;
+  }
+}

src/components/MevMetrics.tsx

@@ -0,0 +1,89 @@
+/**
+ * Copyright (c) Flashbots Ltd. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React, { useEffect, useState } from 'react';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import styles from './MevMetrics.module.css';
+
+interface MetricsResponse {
+  totalMevRefund: number;
+  totalGasRefund: number;
+  fetchedAt: string;
+  stale: boolean;
+  showWidget?: boolean;
+}
+
+export default function MevMetrics(): JSX.Element | null {
+  const { siteConfig } = useDocusaurusContext();
+  const [data, setData] = useState<MetricsResponse | null>(null);
+  const [showWidget, setShowWidget] = useState(true);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const fetchMetrics = async () => {
+      try {
+        const apiUrl = siteConfig.customFields?.refundMetricsApiUrl as string;
+        const response = await fetch(`${apiUrl}/api/metrics`);
+        if (!response.ok) {
+          throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        const metrics: MetricsResponse = await response.json();
+
+        // Check feature flag
+        if (metrics.showWidget === false) {
+          setShowWidget(false);
+          setLoading(false);
+          return;
+        }
+
+        setData(metrics);
+      } catch (error) {
+        console.error('Error fetching MEV metrics:', error);
+        // Don't show widget on error
+        setData(null);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchMetrics();
+  }, []);
+
+  const formatValue = (value: number): string => {
+    return `${value.toFixed(2)} ETH`;
+  };
+
+  const handleRefundClick = () => {
+    const redirectUrl = siteConfig.customFields?.refundMetricsRedirectUrl as string;
+    window.open(redirectUrl, '_blank', 'noopener,noreferrer');
+  };
+
+  // Hide widget if flag says so
+  if (!showWidget) {
+    return null;
+  }
+
+  return (
+    <div className="navbar__item">
+      <div 
+        className={`${styles.metric} ${styles.clickable}`}
+        onClick={handleRefundClick}
+        role="button"
+        tabIndex={0}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            handleRefundClick();
+          }
+        }}
+      >
+        <span className={styles.label}>Gas Refunds:</span>
+        <span className={`${styles.value} ${loading ? styles.loading : ''}`}>
+          {loading ? '...' : data && formatValue(data.totalGasRefund)}
+        </span>
+      </div>
+    </div>
+  );
+}

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;