[#216] add logic for automated voting options

IntersectMBO · Mar 29, 2024 · a1afb26 · a1afb26
1 parent 7194204
commit a1afb26
Show file tree

Hide file tree

Showing 6 changed files with 128 additions and 38 deletions.
diff --git a/govtool/frontend/src/components/molecules/AutomatedVotingCard.tsx b/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>
   );
 };
diff --git a/govtool/frontend/src/components/molecules/types.ts b/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;

diff --git a/govtool/frontend/src/components/organisms/AutomatedVotingOptions.tsx b/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>

diff --git a/govtool/frontend/src/components/organisms/DRepCard.tsx b/govtool/frontend/src/components/organisms/DRepCard.tsx
@@ -35,11 +35,11 @@ export const DRepCard = ({
     <Card
       {...(isMe && {
         variant: 'primary',
-        label: 'Yourself'
+        label: t('yourself')
       })}
       {...(isInProgress && {
         variant: 'warning',
-        label: 'In Progress'
+        label: t('inProgress')
       })}
       sx={{ container: "root / inline-size", py: 2.5 }}
     >

diff --git a/govtool/frontend/src/i18n/locales/en.ts b/govtool/frontend/src/i18n/locales/en.ts
@@ -724,5 +724,6 @@ export const en = {
     viewDetails: "View details",
     votingPower: "Voting power",
     yes: "Yes",
+    yourself: "Yourself",
   },
 };
diff --git a/govtool/frontend/src/pages/DRepDirectoryContent.tsx b/govtool/frontend/src/pages/DRepDirectoryContent.tsx
@@ -21,27 +21,28 @@ export const DRepDirectoryContent: FC<DRepDirectoryContentProps> = ({
 }) => {
   const {
     dRepID: myDRepId,
-    isEnableLoading,
+    isEnabled,
     pendingTransaction,
     stakeKey,
   } = useCardano();
   const { t } = useTranslation();
 
   const { delegate } = useDelegateTodRep();
 
+  const { votingPower } = useGetAdaHolderVotingPowerQuery();
   const { currentDelegation } = useGetAdaHolderCurrentDelegationQuery(stakeKey);
   const inProgressDelegation = pendingTransaction.delegate?.resourceId;
 
-  const { data: myDRepList, isLoading: isMyDRepLoading } = useGetDRepListQuery(
+  const { data: myDRepList } = useGetDRepListQuery(
     currentDelegation?.startsWith('drep') ? currentDelegation : formHexToBech32(currentDelegation),
     { enabled: !!inProgressDelegation || !!currentDelegation }
   );
   const myDrep = myDRepList?.[0];
-  const { data: dRepList, isLoading: isDRepListLoading } = useGetDRepListQuery();
-
-  const { votingPower } = useGetAdaHolderVotingPowerQuery();
+  const { data: dRepList } = useGetDRepListQuery();
 
-  if (isEnableLoading || isMyDRepLoading || isDRepListLoading) return <CircularProgress sx={{ display: 'block', mx: 'auto', mt: 4 }} />;
+  if (!isEnabled || votingPower === undefined || !dRepList) {
+    return <CircularProgress sx={{ display: 'block', mx: 'auto', mt: 4 }} />;
+  }
 
   const ada = correctAdaFormat(votingPower);
 
@@ -62,18 +63,35 @@ export const DRepDirectoryContent: FC<DRepDirectoryContentProps> = ({
 
       {isConnected && (
         <div>
-          <Typography variant="title2" sx={{ mb: 2 }}>{t("dRepDirectory.delegationOptions")}</Typography>
-          <AutomatedVotingOptions />
+          <Typography variant="title2" sx={{ mb: 2 }}>
+            {t("dRepDirectory.delegationOptions")}
+          </Typography>
+          <AutomatedVotingOptions
+            currentDelegation={(!pendingTransaction.delegate
+              && ['drep_always_abstain', 'drep_always_no_confidence'].includes(currentDelegation))
+                ? currentDelegation
+                : undefined
+            }
+            delegate={delegate}
+            delegationInProgress={inProgressDelegation
+              && ['abstain', 'no confidence'].includes(inProgressDelegation)
+                ? inProgressDelegation
+                : undefined
+            }
+            isConnected={!!isConnected}
+            votingPower={ada.toString()}
+          />
         </div>
       )}
 
       <div>
-        <Typography fontSize={18} fontWeight={500}>{t("dRepDirectory.listTitle")}</Typography>
+        <Typography fontSize={18} fontWeight={500}>
+          {t('dRepDirectory.listTitle')}
+        </Typography>
         <Box component="ul" p={0} display="flex" flexDirection="column" gap={3}>
-          {dRepList?.map((dRep) => (isSameDRep(dRep, myDrep?.view)
-            ? null
-            : (
-              <Box key={dRep.drepId} component="li" sx={{ listStyle: "none" }}>
+          {dRepList?.map((dRep) =>
+            (isSameDRep(dRep, myDrep?.view) ? null : (
+              <Box key={dRep.drepId} component="li" sx={{ listStyle: 'none' }}>
                 <DRepCard
                   dRep={dRep}
                   isConnected={!!isConnected}
@@ -82,7 +100,8 @@ export const DRepDirectoryContent: FC<DRepDirectoryContentProps> = ({
                   onDelegate={() => delegate(dRep.drepId)}
                 />
               </Box>
-            )))}
+            )),
+          )}
         </Box>
       </div>
     </Box>