[#217] add dRep directory page and nav items

govtool/frontend/src/App.tsx

@@ -22,6 +22,7 @@ import {
   GovernanceActionsCategory,
   DashboardGovernanceActionsCategory,
   RetireAsSoleVoter,
+  DRepDirectory,
 } from "@pages";
 import {
   callAll,
@@ -115,7 +116,12 @@ export default function App() {
             path={PATHS.dashboardGovernanceActionsCategory}
             element={<DashboardGovernanceActionsCategory />}
           />
+          <Route
+            path={PATHS.dashboardDRepDirectory}
+            element={<DRepDirectory />}
+          />
         </Route>
+        <Route path={PATHS.dRepDirectory} element={<DRepDirectory />} />
         <Route
           path={PATHS.createGovernanceAction}
           element={<CreateGovernanceAction />}

govtool/frontend/src/components/atoms/ContentBox.tsx

@@ -0,0 +1,8 @@
+import { Box, BoxProps } from "@mui/material";
+import { FC } from "react";
+
+export const ContentBox: FC<BoxProps> = ({ children, ...props }) => (
+  <Box maxWidth={1290} mx="auto" {...props}>
+    {children}
+  </Box>
+);

govtool/frontend/src/components/atoms/PagePaddingBox.tsx

@@ -0,0 +1,8 @@
+import { Box, BoxProps } from "@mui/material";
+import { FC } from "react";
+
+export const PagePaddingBox: FC<BoxProps> = ({ children, ...props }) => (
+  <Box px={{ xxs: 2, md: 5 }} {...props}>
+    {children}
+  </Box>
+);

govtool/frontend/src/components/atoms/index.ts

@@ -3,6 +3,7 @@ export * from "./Background";
 export * from "./Button";
 export * from "./Checkbox";
 export * from "./ClickOutside";
+export * from "./ContentBox";
 export * from "./CopyButton";
 export * from "./DrawerLink";
 export * from "./FormErrorMessage";
@@ -16,6 +17,7 @@ export * from "./modal/Modal";
 export * from "./modal/ModalContents";
 export * from "./modal/ModalHeader";
 export * from "./modal/ModalWrapper";
+export * from "./PagePaddingBox";
 export * from "./Radio";
 export * from "./ScrollToManage";
 export * from "./ScrollToTop";

govtool/frontend/src/components/molecules/PageTitle.tsx

@@ -0,0 +1,24 @@
+import { useScreenDimension } from "@hooks";
+import { Typography, PagePaddingBox, ContentBox } from "@/components/atoms";
+import { FC } from "react";
+
+interface PageTitleProps {
+  title: string;
+}
+
+export const PageTitle: FC<PageTitleProps> = ({ title }) => {
+  const { isMobile } = useScreenDimension();
+
+  return (
+    <PagePaddingBox
+      borderBottom={(theme) => `1px solid ${theme.palette.neutralWhite}`}
+      py={3}
+    >
+      <ContentBox>
+        <Typography variant={isMobile ? "title1" : "headline5"}>
+          {title}
+        </Typography>
+      </ContentBox>
+    </PagePaddingBox>
+  );
+};

govtool/frontend/src/components/molecules/index.ts

@@ -14,6 +14,7 @@ export * from "./GovernanceVotedOnCard";
 export * from "./LinkWithIcon";
 export * from "./OrderActionsChip";
 export * from "./Step";
+export * from "./PageTitle";
 export * from "./VoteActionForm";
 export * from "./VotesSubmitted";
 export * from "./WalletInfoCard";

govtool/frontend/src/components/organisms/DRepDirectoryContent.tsx

@@ -0,0 +1,16 @@
+import { FC } from "react";
+
+interface DRepDirectoryContentProps {
+  isConnected?: boolean;
+}
+
+export const DRepDirectoryContent: FC<DRepDirectoryContentProps> = ({
+  isConnected,
+}) => {
+  return (
+    <>
+      <p>DRepDirectory</p>
+      <p>connected: {String(!!isConnected)}</p>
+    </>
+  );
+};

govtool/frontend/src/components/organisms/index.ts

@@ -17,6 +17,7 @@ export * from "./DelegateTodRepStepOne";
 export * from "./DelegateTodRepStepTwo";
 export * from "./Drawer";
 export * from "./DrawerMobile";
+export * from "./DRepDirectoryContent";
 export * from "./ExternalLinkModal";
 export * from "./Footer";
 export * from "./GovernanceActionDetailsCard";

govtool/frontend/src/consts/icons.ts

@@ -13,6 +13,8 @@ export const ICONS = {
   dashboardActiveIcon: "/icons/DashboardActive.svg",
   dashboardIcon: "/icons/Dashboard.svg",
   drawerIcon: "/icons/DrawerIcon.svg",
+  dRepDirectoryActiveIcon: "/icons/DRepDirectoryActive.svg",
+  dRepDirectoryIcon: "/icons/DRepDirectory.svg",
   externalLinkIcon: "/icons/ExternalLink.svg",
   faqsActiveIcon: "/icons/FaqsActive.svg",
   faqsIcon: "/icons/Faqs.svg",

govtool/frontend/src/consts/navItems.ts

@@ -1,3 +1,4 @@
+import i18n from "@/i18n";
 import { ICONS } from "./icons";
 import { PATHS } from "./paths";
 
@@ -8,6 +9,11 @@ export const NAV_ITEMS = [
     label: "Dashboard",
     newTabLink: null,
   },
+  {
+    dataTestId: "drep-directory-link",
+    navTo: PATHS.dRepDirectory,
+    label: i18n.t("dRepDirectory.title"),
+  },
   {
     dataTestId: "governance-actions-link",
     navTo: PATHS.governanceActions,
@@ -37,6 +43,13 @@ export const CONNECTED_NAV_ITEMS = [
     icon: ICONS.dashboardIcon,
     newTabLink: null,
   },
+  {
+    dataTestId: "drep-directory-link",
+    label: i18n.t("dRepDirectory.title"),
+    navTo: PATHS.dashboardDRepDirectory,
+    activeIcon: ICONS.dRepDirectoryActiveIcon,
+    icon: ICONS.dRepDirectoryIcon,
+  },
   {
     dataTestId: "governance-actions-link",
     label: "Governance Actions",

govtool/frontend/src/consts/paths.ts

@@ -4,8 +4,10 @@ export const PATHS = {
   dashboardGovernanceActionsCategory:
     "/connected/governance_actions/category/:category",
   dashboardGovernanceActions: "/connected/governance_actions",
+  dashboardDRepDirectory: "/connected/drep_directory",
   dashboard: "/dashboard",
   delegateTodRep: "/delegate",
+  dRepDirectory: "/drep_directory",
   error: "/error",
   faqs: "/faqs",
   governanceActions: "/governance_actions",

govtool/frontend/src/i18n/locales/en.ts

@@ -189,6 +189,7 @@ export const en = {
       noConfidenceDescription:
         "Select this to signal no confidence in the current constitutional committee by voting NO on every proposal and voting YES to no confidence proposals",
       noConfidenceTitle: "Signal No Confidence on Every Vote",
+      title: "DRep Directory",
       votingPower: "Voting Power",
     },
     errorPage: {

govtool/frontend/src/pages/DRepDirectory.tsx

@@ -0,0 +1,32 @@
+import { useTranslation } from "@hooks";
+import { checkIsWalletConnected } from "@/utils";
+import { Background, PagePaddingBox, ContentBox } from "@/components/atoms";
+import { DRepDirectoryContent, TopNav } from "@/components/organisms";
+import { PageTitle } from "@/components/molecules";
+
+export const DRepDirectory = () => {
+  const { t } = useTranslation();
+
+  const isConnected = !checkIsWalletConnected();
+
+  if (isConnected)
+    return (
+      <PagePaddingBox py={2}>
+        <DRepDirectoryContent isConnected />
+      </PagePaddingBox>
+    );
+
+  return (
+    <Background>
+      <TopNav />
+
+      <PageTitle title={t("dRepDirectory.title")} />
+
+      <PagePaddingBox py={2}>
+        <ContentBox>
+          <DRepDirectoryContent />
+        </ContentBox>
+      </PagePaddingBox>
+    </Background>
+  );
+};

govtool/frontend/src/pages/Dashboard.tsx

@@ -3,7 +3,7 @@ import { useLocation, Outlet, useNavigate } from "react-router-dom";
 import { Box } from "@mui/material";
 
 import { Background, ScrollToManage } from "@atoms";
-import { PATHS } from "@consts";
+import { CONNECTED_NAV_ITEMS, PATHS } from "@consts";
 import { useCardano } from "@context";
 import { useScreenDimension, useTranslation } from "@hooks";
 import { DashboardTopNav, Drawer, Footer } from "@organisms";
@@ -18,12 +18,11 @@ export const Dashboard = () => {
   const { t } = useTranslation();
 
   const getPageTitle = (pathname: string) => {
-    if (pathname === PATHS.dashboard) {
-      return t("dashboard.title");
-    } else if (pathname.includes(PATHS.dashboardGovernanceActions)) {
-      return t("dashboard.govActions.title");
-    }
-    return "";
+    if (pathname === PATHS.dashboard) return t("dashboard.title");
+    return (
+      Object.values(CONNECTED_NAV_ITEMS).find(({ navTo }) => navTo === pathname)
+        ?.label ?? ""
+    );
   };
 
   useEffect(() => {

govtool/frontend/src/pages/index.ts

@@ -1,4 +1,6 @@
 export * from "./ChooseStakeKey";
+export * from "./CreateGovernanceAction";
+export * from "./DRepDirectory";
 export * from "./Dashboard";
 export * from "./DashboardGovernanceActionsCategory";
 export * from "./DelegateTodRep";
@@ -7,6 +9,7 @@ export * from "./GovernanceActionDetails";
 export * from "./GovernanceActions";
 export * from "./GovernanceActionsCategory";
 export * from "./Home";
+export * from "./RegisterAsSoleVoter";
 export * from "./RegisterAsdRep";
 export * from "./RetireAsSoleVoter";
 export * from "./UpdatedRepMetadata";

govtool/frontend/src/theme.ts

@@ -1,6 +1,14 @@
 import { createTheme } from "@mui/material/styles";
 
 declare module "@mui/material/styles" {
+  interface BreakpointOverrides {
+    xxs: true;
+    xs: true;
+    sm: true;
+    md: true;
+    lg: true;
+    xl: true;
+  }
   interface Palette {
     accentOrange: string;
     accentYellow: string;
@@ -50,6 +58,16 @@ declare module "@mui/material/styles" {
 export type Theme = typeof theme;
 
 export const theme = createTheme({
+  breakpoints: {
+    values: {
+      xxs: 0,
+      xs: 375,
+      sm: 425,
+      md: 768,
+      lg: 1024,
+      xl: 1440,
+    },
+  },
   components: {
     MuiInputBase: {
       styleOverrides: {