[#220] drep list

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

@@ -0,0 +1,57 @@
+import { Chip, ChipProps, styled } from "@mui/material";
+import { cyan, errorRed, successGreen } from "@/consts";
+
+type Status = 'Active' | 'Inactive' | 'Retired';
+
+interface StatusPillProps {
+  status: Status;
+  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 getBgColor = (status: Status): string => {
+  switch (status) {
+    case 'Active':
+      return successGreen.c200;
+    case 'Inactive':
+      return cyan.c100;
+    case 'Retired':
+      return errorRed.c100;
+      // no default
+  }
+};
+
+const getTextColor = (status: Status): string => {
+  switch (status) {
+    case 'Active':
+      return successGreen.c700;
+    case 'Inactive':
+      return cyan.c500;
+    case 'Retired':
+      return errorRed.c500;
+      // no default
+  }
+};
+
+const StyledChip = styled(Chip)<{ status: Status }>(({ theme, status }) => ({
+  backgroundColor: getBgColor(status),
+  color: getTextColor(status),
+  border: `2px solid ${theme.palette.neutralWhite}`,
+  fontSize: '0.75rem',
+  textTransform: 'capitalize',
+}));

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

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

@@ -1,31 +1,46 @@
 import { Box, Divider } from "@mui/material";
 
-import { Button, Spacer, Typography } from "@atoms";
+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 (
-    <Box
+    <Card
+      {...(inProgress && {
+        variant: "warning",
+        label: t("inProgress"),
+      })}
+      {...(isSelected && {
+        variant: "primary",
+        label: "Selected",
+      })}
       sx={{
         alignItems: "center",
-        bgcolor: "#FFFFFF4D",
-        borderRadius: 4,
-        boxShadow: `0px 4px 15px 0px #DDE3F5`,
+        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",
-        padding: "18px 24px",
+        mt: inProgress || isSelected ? 2 : 0,
+        py: 2.25,
       }}
     >
       <Box
@@ -74,27 +89,40 @@ export const AutomatedVotingCard = ({
         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>
-        <Spacer x={2.5} />
-        <Button
-          onClick={onClickDelegate}
-          size={isMobile ? "medium" : "large"}
-          sx={{ flex: screenWidth < 768 ? 1 : undefined }}
-        >
-          {t("delegate")}
-        </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>
-    </Box>
+    </Card>
   );
 };

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

@@ -18,6 +18,9 @@ export type StepProps = {
 
 export type AutomatedVotingCardProps = {
   description: string;
+  inProgress?: boolean;
+  isConnected?: boolean;
+  isSelected?: boolean;
   onClickDelegate: () => void;
   onClickInfo: () => void;
   title: string;

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

@@ -3,19 +3,39 @@ import {
   AccordionDetails,
   AccordionSummary,
   Box,
+  Chip,
 } from "@mui/material";
 
 import { Typography } from "@atoms";
 import { ICONS } from "@consts";
 import { useTranslation } from "@hooks";
 import { AutomatedVotingCard } from "@molecules";
+import { useState } from "react";
 
-export const AutomatedVotingOptions = () => {
+type AutomatedVotingOptionsProps = {
+  currentDelegation: string | undefined;
+  delegate: (delegateTo: string) => void;
+  delegationInProgress?: string;
+  isConnected?: boolean;
+  votingPower: string;
+};
+
+export const AutomatedVotingOptions = ({
+  currentDelegation,
+  delegate,
+  delegationInProgress,
+  isConnected,
+  votingPower,
+}: AutomatedVotingOptionsProps) => {
   const { t } = useTranslation();
 
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+
   return (
     <Accordion
       elevation={3}
+      expanded={isOpen}
+      onChange={(_, isExpanded) => setIsOpen(isExpanded)}
       sx={(theme) => ({
         bgcolor: `${theme.palette.lightBlue}80`,
         border: `1px solid ${theme.palette.neutralWhite}`,
@@ -26,6 +46,19 @@ export const AutomatedVotingOptions = () => {
         sx={{ borderRadius: 3, px: { xxs: 2, md: 3 } }}
       >
         <Typography>{t("dRepDirectory.automatedVotingOptions")}</Typography>
+        {currentDelegation && !isOpen && (
+          // TODO this Chip is temporary, since there were no design for this case
+          <Chip
+            color="primary"
+            label={currentDelegation === "drep_always_abstain" ? 'Abstain' : 'No confidence'}
+            sx={{
+              backgroundColor: (theme) => theme.palette.neutralWhite,
+              fontWeight: 400,
+              ml: 2,
+              textTransform: 'uppercase',
+            }}
+          />
+        )}
       </AccordionSummary>
       <AccordionDetails sx={{ p: { xxs: 2, md: 3 }, pt: { xxs: 0, md: 0 } }}>
         <Box
@@ -37,17 +70,23 @@ export const AutomatedVotingOptions = () => {
         >
           <AutomatedVotingCard
             description={t("dRepDirectory.abstainCardDescription")}
-            onClickDelegate={() => {}}
-            onClickInfo={() => {}}
+            inProgress={delegationInProgress === "abstain"}
+            isConnected={isConnected}
+            isSelected={currentDelegation === "drep_always_abstain"}
+            onClickDelegate={() => delegate("abstain")}
+            onClickInfo={() => { }}
             title={t("dRepDirectory.abstainCardTitle")}
-            votingPower="99,111,111"
+            votingPower={votingPower}
           />
           <AutomatedVotingCard
             description={t("dRepDirectory.noConfidenceDescription")}
-            onClickDelegate={() => {}}
-            onClickInfo={() => {}}
+            inProgress={delegationInProgress === "no confidence"}
+            isConnected={isConnected}
+            isSelected={currentDelegation === "drep_always_no_confidence"}
+            onClickDelegate={() => delegate("no confidence")}
+            onClickInfo={() => { }}
             title={t("dRepDirectory.noConfidenceTitle")}
-            votingPower="99,111,111"
+            votingPower={votingPower}
           />
         </Box>
       </AccordionDetails>