Merge pull request #3437 from cardano-foundation/feat/MET-2055-update…

…-Governance-votes fix: MET-2055 disable gov cannot vote
cardano-foundation · May 9, 2024 · dbe997a · dbe997a
2 parents 2e909a6 + d5f35e2
commit dbe997a
Show file tree

Hide file tree

Showing 3 changed files with 110 additions and 36 deletions.
diff --git a/src/components/GovernanceVotes/OverallVote.tsx b/src/components/GovernanceVotes/OverallVote.tsx
@@ -1,4 +1,4 @@
-import { useMemo, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import {
   Box,
   Button,
@@ -60,17 +60,26 @@ const OverallVote: React.FC<{ data: GovernanceVoteDetail | null; voteId: string;
   voteId,
   index
 }) => {
-  const [selectVote, setSelectVote] = useState<VoteType>("SPOs");
+  const [selectVote, setSelectVote] = useState<VoteType | "">("");
   const [openHistoryVoteModal, setOpenHistoryVoteModal] = useState<boolean>(false);
   const [openActionMetadataModal, setOpenActionMetadataModal] = useState<boolean>(false);
   const [openModal, setOpenModal] = useState(false);
 
+  useEffect(() => {
+    if (data?.allowedVoteBySPO) {
+      setSelectVote("SPOs");
+    } else {
+      setSelectVote("DReps");
+    }
+  }, [data?.allowedVoteBySPO]);
   const { data: dataChart, loading: loadingChart } = useFetch<GovernanceVoteChart>(
-    `${API.POOL_CERTIFICATE.POOL_CHART}?${stringify({
-      txHash: voteId,
-      index: index || 0,
-      voterType: voterType[selectVote]
-    })}`
+    selectVote
+      ? `${API.POOL_CERTIFICATE.POOL_CHART}?${stringify({
+          txHash: voteId,
+          index: index || 0,
+          voterType: voterType[selectVote as VoteType]
+        })}`
+      : ""
   );
 
   const theme = useTheme();
@@ -117,6 +126,12 @@ const OverallVote: React.FC<{ data: GovernanceVoteDetail | null; voteId: string;
     return <></>;
   }
 
+  const disableButtonSelect = (key: string) => {
+    if (key === "SPOs" && !data.allowedVoteBySPO) return true;
+    if (key === "CC" && !data.allowedVoteByCC) return true;
+    return false;
+  };
+
   return (
     <DataContainer sx={{ boxShadow: "unset" }}>
       <Box
@@ -346,33 +361,46 @@ const OverallVote: React.FC<{ data: GovernanceVoteDetail | null; voteId: string;
 
                 <Box display="flex" gap="8px" flexWrap="inherit">
                   {listVotes.map((i) => (
-                    <Chip
+                    <CustomTooltip
                       key={i}
-                      sx={{
-                        fontWeight: 500,
-                        fontSize: "12px",
-                        background:
-                          selectVote === i
-                            ? theme.palette.primary[200]
-                            : theme.isDark
-                            ? theme.palette.primary[500]
-                            : theme.palette.primary[100],
-                        border: `1px solid ${
-                          selectVote === i ? theme.palette.primary.main : theme.palette.secondary[600]
-                        }`,
-                        color:
-                          selectVote === i
-                            ? theme.palette.secondary.main
-                            : theme.isDark
-                            ? theme.palette.secondary.main
-                            : theme.palette.secondary[600],
-                        "&:hover": {
-                          background: theme.palette.primary[200]
-                        }
-                      }}
-                      label={i}
-                      onClick={() => setSelectVote(i as VoteType)}
-                    />
+                      title={
+                        disableButtonSelect(i)
+                          ? i === "SPOs"
+                            ? t("drep.SPODisable")
+                            : t("drep.CCÏDisable")
+                          : undefined
+                      }
+                    >
+                      <Box display={"inline-block"}>
+                        <Chip
+                          disabled={disableButtonSelect(i)}
+                          sx={{
+                            fontWeight: 500,
+                            fontSize: "12px",
+                            background:
+                              selectVote === i
+                                ? theme.palette.primary[200]
+                                : theme.isDark
+                                ? theme.palette.primary[500]
+                                : theme.palette.primary[100],
+                            border: `1px solid ${
+                              selectVote === i ? theme.palette.primary.main : theme.palette.secondary[600]
+                            }`,
+                            color:
+                              selectVote === i
+                                ? theme.palette.secondary.main
+                                : theme.isDark
+                                ? theme.palette.secondary.main
+                                : theme.palette.secondary[600],
+                            "&:hover": {
+                              background: theme.palette.primary[200]
+                            }
+                          }}
+                          label={i}
+                          onClick={() => setSelectVote(i as VoteType)}
+                        />
+                      </Box>
+                    </CustomTooltip>
                   ))}
                 </Box>
               </InfoTitle>
@@ -596,7 +624,21 @@ const VoteRate = ({ data, selectedVote }: { data: VotingChart | null; selectedVo
               </Box>
             </CustomTooltip>
           </Box>
-          <CustomTooltip title={t("drep.activeVoteStakeTooltip")}>
+          <CustomTooltip
+            slotProps={{
+              popper: {
+                modifiers: [
+                  {
+                    name: "offset",
+                    options: {
+                      offset: [0, -4]
+                    }
+                  }
+                ]
+              }
+            }}
+            title={t("drep.activeVoteStakeTooltip")}
+          >
             <BlackWarningIcon />
           </CustomTooltip>
         </Box>
@@ -625,7 +667,21 @@ const VoteRate = ({ data, selectedVote }: { data: VotingChart | null; selectedVo
               </Box>
             </CustomTooltip>
           </Box>{" "}
-          <CustomTooltip title={t("drep.thresholdTooltip")}>
+          <CustomTooltip
+            slotProps={{
+              popper: {
+                modifiers: [
+                  {
+                    name: "offset",
+                    options: {
+                      offset: [0, -4]
+                    }
+                  }
+                ]
+              }
+            }}
+            title={t("drep.thresholdTooltip")}
+          >
             <BlackWarningIcon />
           </CustomTooltip>
         </Box>
@@ -653,7 +709,21 @@ const VoteRate = ({ data, selectedVote }: { data: VotingChart | null; selectedVo
               </Box>
             </CustomTooltip>
           </Box>{" "}
-          <CustomTooltip title={t("drep.remainingTooltip")}>
+          <CustomTooltip
+            slotProps={{
+              popper: {
+                modifiers: [
+                  {
+                    name: "offset",
+                    options: {
+                      offset: [0, -4]
+                    }
+                  }
+                ]
+              }
+            }}
+            title={t("drep.remainingTooltip")}
+          >
             <BlackWarningIcon />
           </CustomTooltip>
         </Box>

diff --git a/src/components/GovernanceVotes/index.tsx b/src/components/GovernanceVotes/index.tsx
@@ -342,6 +342,8 @@ export interface GovernanceVoteDetail {
   votingPower: number | null;
   submissionDate: string;
   poolName: string | null;
+  allowedVoteByCC: boolean;
+  allowedVoteBySPO: boolean;
   expiryDate: string;
   historyVotes: {
     no: number | null;

diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json
@@ -1116,6 +1116,8 @@
   "drep.ccMembers": "CC Members",
   "drep.threshold": "Threshold",
   "drep.remaining": "Remaining",
+  "drep.SPODisable": "SPOs cannot cast votes for this governance action",
+  "drep.CCDisable": "CC cannot cast votes for this governance action",
   "drep.activeVoteStakeTooltip": "The active voting stake is the amount of participating stake involved in this governance action.",
   "drep.thresholdTooltip": "The threshold is the amount of ADA from yes votes required for this governance action to be ratified.",
   "drep.remainingTooltip": "The remaining ADA shows the amount of ADA from participants still left to be voted.",