[#99] feat: Drep directory

CHANGELOG.md

@@ -16,6 +16,10 @@ changes.
 - Added `isRegisteredAsSoleVoter` and `wasRegisteredAsSoleVoter` fields to the drep/info response [Issue 212](https://github.com/IntersectMBO/govtool/issues/212)
 - Abandoning registration as DRep [Issue 151](https://github.com/IntersectMBO/govtool/issues/151)
 - Abandoning GA creation [Issue 359](https://github.com/IntersectMBO/govtool/issues/359)
+- Choose GA type - GA Submiter [Issue 358](https://github.com/IntersectMBO/govtool/issues/358)
+- Create Automated Voting Options component [Issue 216](https://github.com/IntersectMBO/govtool/issues/216)
+- Change step 3 components [Issue 152](https://github.com/intersectMBO/govtool/issues/152)
+- Add possibility to vote on behalf of myself - Sole Voter [Issue 119](https://github.com/IntersectMBO/govtool/issues/119)
 - Create DRep registration page about roles [Issue 205](https://github.com/IntersectMBO/govtool/issues/205)
 - Create Checkbox component. Improve Field and ControlledField [Issue 177](https://github.com/IntersectMBO/govtool/pull/177)
 - Vitest unit tests added for utils functions [Issue 81](https://github.com/IntersectMBO/govtool/issues/81)

govtool/frontend/src/App.tsx

@@ -16,6 +16,9 @@ import {
   Dashboard,
   DashboardGovernanceActionsCategory,
   DelegateTodRep,
+  DRepDetails,
+  DRepDirectory,
+  DRepDirectoryContent,
   ErrorPage,
   GovernanceActionDetails,
   GovernanceActions,
@@ -104,6 +107,26 @@ export default () => {
             path={PATHS.dashboardGovernanceActionsCategory}
             element={<DashboardGovernanceActionsCategory />}
           />
+          <Route element={<DRepDirectory />}>
+            <Route
+              path={PATHS.dashboardDRepDirectory}
+              element={<DRepDirectoryContent isConnected />}
+            />
+            <Route
+              path={PATHS.dashboardDRepDirectoryDRep}
+              element={<DRepDetails isConnected />}
+            />
+          </Route>
+        </Route>
+        <Route element={<DRepDirectory />}>
+          <Route
+            path={PATHS.dRepDirectory}
+            element={<DRepDirectoryContent />}
+          />
+          <Route
+            path={PATHS.dRepDirectoryDRep}
+            element={<DRepDetails />}
+          />
         </Route>
         <Route
           path={PATHS.createGovernanceAction}

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

@@ -19,6 +19,7 @@ export const Button = ({
       sx={{
         fontSize: size === "extraLarge" ? 16 : 14,
         height: buttonHeight,
+        whiteSpace: "nowrap",
         ...sx,
       }}
       variant={variant}

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/StakeRadio.tsx

@@ -71,6 +71,7 @@ export const StakeRadio: FC<StakeRadioProps> = ({ ...props }) => {
         <Box alignItems="center" display="flex">
           <Typography color={isChecked ? "white" : "#8E908E"} variant="body2">
             {t("votingPower")}
+            :
           </Typography>
           {powerIsLoading ? (
             <Typography color={isChecked ? "white" : "#8E908E"} variant="body2">

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

@@ -0,0 +1,44 @@
+import { Chip, ChipProps, styled } from "@mui/material";
+import { cyan, errorRed, successGreen } from "@/consts";
+import { DRepStatus } from "@/models";
+
+interface StatusPillProps {
+  status: DRepStatus;
+  label?: string;
+  size?: 'small' | 'medium';
+  sx?: ChipProps['sx'];
+}
+
+export const StatusPill = ({
+  status,
+  label = status,
+  size = 'small',
+  sx
+}: StatusPillProps) => (
+  <StyledChip
+    status={status}
+    size={size}
+    label={label}
+    sx={sx}
+  />
+);
+
+const bgColor = {
+  [DRepStatus.Active]: successGreen.c200,
+  [DRepStatus.Inactive]: cyan.c100,
+  [DRepStatus.Retired]: errorRed.c100,
+};
+
+const textColor = {
+  [DRepStatus.Active]: successGreen.c700,
+  [DRepStatus.Inactive]: cyan.c500,
+  [DRepStatus.Retired]: errorRed.c500,
+};
+
+const StyledChip = styled(Chip)<{ status: DRepStatus }>(({ theme, status }) => ({
+  backgroundColor: bgColor[status],
+  color: textColor[status],
+  border: `2px solid ${theme.palette.neutralWhite}`,
+  fontSize: '0.75rem',
+  textTransform: 'capitalize',
+}));

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,10 +17,12 @@ 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";
 export * from "./Spacer";
+export * from "./StatusPill";
 export * from "./StakeRadio";
 export * from "./TextArea";
 export * from "./Tooltip";

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

@@ -0,0 +1,128 @@
+import { Box, Divider } from "@mui/material";
+
+import { Button, Typography } from "@atoms";
+import { useScreenDimension, useTranslation } from "@hooks";
+import { AutomatedVotingCardProps } from "./types";
+import { Card } from "./Card";
+import { primaryBlue } from "@/consts";
+import { useModal } from "@/context";
+
+export const AutomatedVotingCard = ({
+  description,
+  inProgress,
+  isConnected,
+  isSelected,
+  onClickDelegate,
+  onClickInfo,
+  title,
+  votingPower,
+}: AutomatedVotingCardProps) => {
+  const { isMobile, screenWidth } = useScreenDimension();
+  const { openModal } = useModal();
+  const { t } = useTranslation();
+
+  return (
+    <Card
+      {...(inProgress && {
+        variant: "warning",
+        label: t("inProgress"),
+      })}
+      {...(isSelected && {
+        variant: "primary",
+        label: "Selected",
+      })}
+      sx={{
+        alignItems: "center",
+        bgcolor: (theme) => `${theme.palette.neutralWhite}40`,
+        boxShadow: `0px 4px 15px 0px ${primaryBlue.c100}`,
+        display: "flex",
+        flex: 1,
+        flexDirection: screenWidth < 1440 ? "column" : "row",
+        justifyContent: "space-between",
+        mt: inProgress || isSelected ? 2 : 0,
+        py: 2.25,
+      }}
+    >
+      <Box
+        sx={{
+          flex: 1,
+          mb: screenWidth < 1440 ? 1.5 : 0,
+          width: screenWidth < 1440 ? "100%" : "auto",
+        }}
+      >
+        <Typography>{title}</Typography>
+        <Typography fontWeight={400} sx={{ mt: 0.5 }} variant="body2">
+          {description}
+        </Typography>
+      </Box>
+      <Divider
+        flexItem
+        orientation={screenWidth < 1440 ? "horizontal" : "vertical"}
+        sx={{ ml: screenWidth < 1440 ? 0 : 1 }}
+        variant={screenWidth < 1440 ? "fullWidth" : "middle"}
+      />
+      <Box
+        sx={{
+          alignContent: "flex-start",
+          display: "flex",
+          flexDirection: "column",
+          px: screenWidth < 1440 ? 0 : 4.25,
+          py: screenWidth < 1440 ? 1 : 0,
+          width: screenWidth < 1440 ? "100%" : "auto",
+        }}
+      >
+        <Typography color="neutralGray" fontWeight={500} variant="caption">
+          {t("dRepDirectory.votingPower")}
+        </Typography>
+        <Typography sx={{ display: "flex", flexDirection: "row", mt: 0.5 }}>
+          {'₳ '}
+          {votingPower}
+        </Typography>
+      </Box>
+      <Divider
+        flexItem
+        orientation={screenWidth < 1440 ? "horizontal" : "vertical"}
+        sx={{ mr: screenWidth < 1440 ? 0 : 1 }}
+        variant={screenWidth < 1440 ? "fullWidth" : "middle"}
+      />
+      <Box
+        sx={{
+          display: "flex",
+          flexDirection: "row",
+          gap: 2.5,
+          mt: screenWidth < 1440 ? 3 : 0,
+          width: screenWidth < 1440 ? "100%" : "auto",
+        }}
+      >
+        <Button
+          // TODO handle button click
+          onClick={onClickInfo}
+          size={isMobile ? "medium" : "large"}
+          sx={{ flex: screenWidth < 768 ? 1 : undefined }}
+          variant="outlined"
+        >
+          {t("info")}
+        </Button>
+        {!isConnected
+          ? (
+            <Button
+              onClick={() => openModal({ type: "chooseWallet" })}
+              size={isMobile ? "medium" : "large"}
+              sx={{ flex: screenWidth < 768 ? 1 : undefined }}
+            >
+              {t("connectToDelegate")}
+            </Button>
+          )
+          : !isSelected && (
+            <Button
+              onClick={onClickDelegate}
+              size={isMobile ? "medium" : "large"}
+              sx={{ flex: screenWidth < 768 ? 1 : undefined }}
+            >
+              {t("delegate")}
+            </Button>
+          )}
+      </Box>
+    </Card>
+  );
+};

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>
+  );
+};