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..d2d4f2c35 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" +// routes/AppRoutes.tsx +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 */} + } /> }> } />