[#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,
@@ -103,7 +104,12 @@ export default () => {
             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

@@ -2,6 +2,7 @@ export * from "./ActionRadio";
 export * from "./Background";
 export * from "./Button";
 export * from "./Checkbox";
+export * from "./ContentBox";
 export * from "./CopyButton";
 export * from "./DrawerLink";
 export * from "./ExternalModalButton";
@@ -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/AutomatedVotingCard.tsx

@@ -1,8 +1,8 @@
 import { Box, Divider } from "@mui/material";
 
-import { AutomatedVotingCardProps } from "./types";
 import { Button, Spacer, Typography } from "@atoms";
 import { useScreenDimension, useTranslation } from "@hooks";
+import { AutomatedVotingCardProps } from "./types";
 
 export const AutomatedVotingCard = ({
   description,

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

@@ -0,0 +1,24 @@
+import { useScreenDimension } from "@hooks";
+import { FC } from "react";
+import { Typography, PagePaddingBox, ContentBox } from "@/components/atoms";
+
+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

@@ -29,6 +29,7 @@ export * from "./Share";
 export * from "./SliderArrow";
 export * from "./SliderArrows";
 export * from "./Step";
+export * from "./PageTitle";
 export * from "./VoteActionForm";
 export * from "./VotesSubmitted";
 export * from "./WalletInfoCard";

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

@@ -53,15 +53,15 @@ export const AutomatedVotingOptions = () => {
             onClickDelegate={() => {}}
             onClickInfo={() => {}}
             title={t("dRepDirectory.abstainCardTitle")}
-            votingPower={"99,111,111"}
+            votingPower="99,111,111"
           />
           <Spacer y={2} />
           <AutomatedVotingCard
             description={t("dRepDirectory.noConfidenceDescription")}
             onClickDelegate={() => {}}
             onClickInfo={() => {}}
             title={t("dRepDirectory.noConfidenceTitle")}
-            votingPower={"99,111,111"}
+            votingPower="99,111,111"
           />
         </>
       ) : null}

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

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

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

@@ -15,6 +15,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

@@ -15,6 +15,8 @@ export const ICONS = {
   dashboardIcon: "/icons/Dashboard.svg",
   download: "/icons/Download.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

@@ -241,6 +241,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,33 @@
+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/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";