From 2a0660ab535ef42363ef7991777e3c656ee7fccc Mon Sep 17 00:00:00 2001 From: Amin Sammara Date: Fri, 13 Mar 2026 16:47:55 -0400 Subject: [PATCH 1/2] feat: disable governance view and show external frontends modal Replace direct governance access with a modal that directs users to external community-hosted governance frontends. The governance code is preserved but inaccessible. - Add ExternalGovernanceModal component - Add configurable external frontends list - Modify Navbar to show modal instead of navigating - Redirect /governance URLs to home --- .../ExternalGovernanceModal.tsx | 96 +++++++++++++++++ .../ExternalGovernanceModal/index.ts | 1 + .../src/components/Navbar/Navbar.tsx | 102 +++++++++--------- .../src/config/externalGovernance.ts | 23 ++++ staking-dashboard/src/routes/AppRoutes.tsx | 9 +- 5 files changed, 175 insertions(+), 56 deletions(-) create mode 100644 staking-dashboard/src/components/ExternalGovernanceModal/ExternalGovernanceModal.tsx create mode 100644 staking-dashboard/src/components/ExternalGovernanceModal/index.ts create mode 100644 staking-dashboard/src/config/externalGovernance.ts diff --git a/staking-dashboard/src/components/ExternalGovernanceModal/ExternalGovernanceModal.tsx b/staking-dashboard/src/components/ExternalGovernanceModal/ExternalGovernanceModal.tsx new file mode 100644 index 000000000..398cfe3c2 --- /dev/null +++ b/staking-dashboard/src/components/ExternalGovernanceModal/ExternalGovernanceModal.tsx @@ -0,0 +1,96 @@ +import { createPortal } from "react-dom"; +import { Icon } from "@/components/Icon"; +import { + EXTERNAL_GOVERNANCE_FRONTENDS, + type ExternalFrontend, +} from "@/config/externalGovernance"; + +interface ExternalGovernanceModalProps { + isOpen: boolean; + onClose: () => void; +} + +export function ExternalGovernanceModal({ + isOpen, + onClose, +}: ExternalGovernanceModalProps) { + if (!isOpen) return null; + + return createPortal( +
+
+ {/* Header */} +
+

+ Governance +

+ +
+ + {/* Description */} +

+ Access Aztec governance through one of the community-hosted frontends + below: +

+ + {/* Frontends List */} +
+ {EXTERNAL_GOVERNANCE_FRONTENDS.map((frontend, index) => ( + + ))} +
+ + {/* Close button */} + +
+
, + document.body + ); +} + +function FrontendItem({ frontend }: { frontend: ExternalFrontend }) { + const isComingSoon = !frontend.url; + + return ( +
+
+
+ {isComingSoon ? ( + + {frontend.name} + + ) : ( + + {frontend.name} + + + )} +

+ Hosted by {frontend.hostedBy} +

+
+ {isComingSoon && ( + + Coming Soon + + )} +
+
+ ); +} diff --git a/staking-dashboard/src/components/ExternalGovernanceModal/index.ts b/staking-dashboard/src/components/ExternalGovernanceModal/index.ts new file mode 100644 index 000000000..b14f320ea --- /dev/null +++ b/staking-dashboard/src/components/ExternalGovernanceModal/index.ts @@ -0,0 +1 @@ +export { ExternalGovernanceModal } from "./ExternalGovernanceModal"; diff --git a/staking-dashboard/src/components/Navbar/Navbar.tsx b/staking-dashboard/src/components/Navbar/Navbar.tsx index 936938dc1..a59fd452e 100644 --- a/staking-dashboard/src/components/Navbar/Navbar.tsx +++ b/staking-dashboard/src/components/Navbar/Navbar.tsx @@ -2,6 +2,7 @@ import { useState } from "react" import { Link } from "react-router-dom" import { Icon } from "@/components/Icon" import { CustomConnectButton } from "../CustomConnectButton" +import { ExternalGovernanceModal } from "@/components/ExternalGovernanceModal" /** * Main navigation bar component @@ -9,12 +10,7 @@ import { CustomConnectButton } from "../CustomConnectButton" */ export const Navbar = () => { const [isMenuOpen, setIsMenuOpen] = useState(false) - - const menuItems = [ - { name: "POSITIONS", href: "/my-position" }, - { name: "GOVERNANCE", href: "/governance" }, - { name: "DOCS", href: "https://docs.aztec.network/" }, - ] + const [isGovernanceModalOpen, setIsGovernanceModalOpen] = useState(false) const toggleMenu = () => { setIsMenuOpen(!isMenuOpen) @@ -36,27 +32,26 @@ export const Navbar = () => {
- {menuItems.map((item) => - item.href.startsWith("/") ? ( - - {item.name} - - ) : ( - - {item.name} - - ) - )} + + POSITIONS + + + + DOCS +
@@ -77,35 +72,42 @@ export const Navbar = () => { {isMenuOpen && (
- {menuItems.map((item) => - item.href.startsWith("/") ? ( - - {item.name} - - ) : ( - - {item.name} - - ) - )} + + POSITIONS + + + + DOCS +
)} + + setIsGovernanceModalOpen(false)} + /> ) }; \ No newline at end of file diff --git a/staking-dashboard/src/config/externalGovernance.ts b/staking-dashboard/src/config/externalGovernance.ts new file mode 100644 index 000000000..371fa47ef --- /dev/null +++ b/staking-dashboard/src/config/externalGovernance.ts @@ -0,0 +1,23 @@ +/** + * External Governance Frontends Configuration + * + * This file contains the list of external governance frontends that users + * can be directed to. Update this list as new frontends become available. + */ + +export interface ExternalFrontend { + /** Display name of the frontend */ + name: string; + /** Organization hosting this frontend */ + hostedBy: string; + /** URL to the frontend - undefined means "Coming Soon" */ + url?: string; +} + +export const EXTERNAL_GOVERNANCE_FRONTENDS: ExternalFrontend[] = [ + { + name: "Aztec Governance", + hostedBy: "Nethermind", + url: undefined, // Coming soon - replace with URL when live: "http://aztecgov.nethermind.io/" + }, +]; diff --git a/staking-dashboard/src/routes/AppRoutes.tsx b/staking-dashboard/src/routes/AppRoutes.tsx index e95eed0fa..b991120cb 100644 --- a/staking-dashboard/src/routes/AppRoutes.tsx +++ b/staking-dashboard/src/routes/AppRoutes.tsx @@ -1,14 +1,12 @@ // routes/AppRoutes.jsx -import { Route, Routes } from "react-router-dom" +import { Navigate, Route, Routes } from "react-router-dom" import SharedLayout from "../layouts/SharedLayout" import BaseLayout from "../layouts/BaseLayout" -import MinimalLayout from "../layouts/MinimalLayout" import { MyPositionPage } from "../pages/ATP" import { RegisterValidatorPage } from "../pages/RegisterValidator" import { StakingProvidersPage, StakingProviderDetailPage } from "../pages/Providers" import StakePortal from "@/pages/StakePortal/StakePortal" import { NotFoundPage } from "@/pages/NotFound/NotFoundPage" -import { GovernancePage } from "../pages/Governance" export default function AppRoutes() { return ( @@ -21,9 +19,8 @@ export default function AppRoutes() { } /> } /> - }> - } /> - + {/* Governance is disabled - redirect to home */} + } /> }> } /> From 9f602a00dd8f26cb1d2316141e40d022fe992387 Mon Sep 17 00:00:00 2001 From: Amin Sammara <84764772+aminsammara@users.noreply.github.com> Date: Fri, 13 Mar 2026 17:01:15 -0400 Subject: [PATCH 2/2] Potential fix for pull request finding Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> --- staking-dashboard/src/routes/AppRoutes.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/staking-dashboard/src/routes/AppRoutes.tsx b/staking-dashboard/src/routes/AppRoutes.tsx index b991120cb..d2d4f2c35 100644 --- a/staking-dashboard/src/routes/AppRoutes.tsx +++ b/staking-dashboard/src/routes/AppRoutes.tsx @@ -1,4 +1,4 @@ -// routes/AppRoutes.jsx +// routes/AppRoutes.tsx import { Navigate, Route, Routes } from "react-router-dom" import SharedLayout from "../layouts/SharedLayout" import BaseLayout from "../layouts/BaseLayout"