Merge pull request #691 from IntersectMBO/fix/687-voting-power-chip-i…

…s-displayed-incorrectly fix/687-voting-power-chip-is-displayed-incorrectly
IntersectMBO · Apr 12, 2024 · 7a3647e · 7a3647e
2 parents 087fb69 + 332733e
commit 7a3647e
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 61 deletions.
diff --git a/govtool/frontend/src/components/atoms/VotingPowerChips.tsx b/govtool/frontend/src/components/atoms/VotingPowerChips.tsx
@@ -4,7 +4,6 @@ import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
 import { Typography, Tooltip } from "@atoms";
 import { useCardano } from "@context";
 import {
-  useGetAdaHolderVotingPowerQuery,
   useGetDRepVotingPowerQuery,
   useGetVoterInfo,
   useScreenDimension,
@@ -13,67 +12,62 @@ import {
 import { correctAdaFormat } from "@utils";
 
 export const VotingPowerChips = () => {
-  const { stakeKey, isEnableLoading } = useCardano();
-  const { dRepVotingPower } = useGetDRepVotingPowerQuery();
-  const { votingPower } = useGetAdaHolderVotingPowerQuery(stakeKey);
+  const { isEnableLoading } = useCardano();
+  const { voter } = useGetVoterInfo();
+  const { dRepVotingPower } = useGetDRepVotingPowerQuery(voter);
   const { isMobile, screenWidth } = useScreenDimension();
   const { t } = useTranslation();
-  const { voter } = useGetVoterInfo();
 
   return (
-    <Box
-      sx={{
-        alignItems: 'center',
-        bgcolor: 'textBlack',
-        border: isMobile ? 2 : 0,
-        borderColor: '#FBFBFF',
-        borderRadius: 100,
-        display: 'flex',
-        height: isMobile ? 16 : 24,
-        px: 2,
-        py: isMobile ? 1 : 1.5,
-      }}
-    >
-      {voter?.isRegisteredAsDRep && (
-        <Tooltip
-          heading={t("tooltips.votingPower.heading")}
-          paragraphOne={t("tooltips.votingPower.paragraphOne")}
-          paragraphTwo={t("tooltips.votingPower.paragraphTwo")}
-          placement="bottom-end"
-          arrow
-        >
-          <InfoOutlinedIcon
-            style={{
-              color: "#ADAEAD",
-              marginRight: "12px",
-            }}
-            fontSize="small"
-          />
-        </Tooltip>
-      )}
-      {screenWidth >= 1024 && (
-        <Typography color="#A5A6A5" sx={{ mr: 1.5 }} variant="body2">
-          {t("votingPower")}
-        </Typography>
-      )}
-      {(voter?.isRegisteredAsDRep && dRepVotingPower === undefined) ||
-        (!voter?.isRegisteredAsDRep && votingPower === undefined) ||
-        isEnableLoading ||
-        !voter ? (
+    (voter?.isRegisteredAsDRep || voter?.isRegisteredAsSoleVoter) && (
+      <Box
+        sx={{
+          alignItems: "center",
+          bgcolor: "textBlack",
+          border: isMobile ? 2 : 0,
+          borderColor: "#FBFBFF",
+          borderRadius: 100,
+          display: "flex",
+          height: isMobile ? 16 : 24,
+          px: 2,
+          py: isMobile ? 1 : 1.5,
+        }}
+      >
+        {!isMobile && (
+          <Tooltip
+            heading={t("tooltips.votingPower.heading")}
+            paragraphOne={t("tooltips.votingPower.paragraphOne")}
+            paragraphTwo={t("tooltips.votingPower.paragraphTwo")}
+            placement="bottom-end"
+            arrow
+          >
+            <InfoOutlinedIcon
+              style={{
+                color: "#ADAEAD",
+                marginRight: "12px",
+              }}
+              fontSize="small"
+            />
+          </Tooltip>
+        )}
+        {screenWidth >= 1024 && (
+          <Typography color="#A5A6A5" sx={{ mr: 1.5 }} variant="body2">
+            {t("votingPower")}:
+          </Typography>
+        )}
+        {dRepVotingPower === undefined || isEnableLoading || !voter ? (
           <CircularProgress size={20} color="primary" />
-      ) : (
-        <Typography
-          color="white"
-          fontSize={18}
-          fontWeight={600}
-          sx={{ whiteSpace: "nowrap" }}
-        >
-          ₳{" "}
-          {voter?.isRegisteredAsDRep
-            ? correctAdaFormat(dRepVotingPower) ?? 0
-            : correctAdaFormat(votingPower) ?? 0}
-        </Typography>
-      )}
-    </Box>
+        ) : (
+          <Typography
+            color="white"
+            fontSize={18}
+            fontWeight={600}
+            sx={{ whiteSpace: "nowrap" }}
+          >
+            ₳ {correctAdaFormat(dRepVotingPower) ?? 0}
+          </Typography>
+        )}
+      </Box>
+    )
   );
 };
diff --git a/govtool/frontend/src/components/organisms/DashboardTopNav.tsx b/govtool/frontend/src/components/organisms/DashboardTopNav.tsx
@@ -53,6 +53,7 @@ export const DashboardTopNav = ({
           display: "flex",
           justifyContent: "space-between",
           position: "sticky",
+          minHeight: isMobile ? 36 : 48,
           px: isMobile ? 2 : 5,
           py: 3,
           top: 0,

diff --git a/govtool/frontend/src/hooks/queries/useGetDRepVotingPowerQuery.ts b/govtool/frontend/src/hooks/queries/useGetDRepVotingPowerQuery.ts
@@ -3,11 +3,10 @@ import { useQuery } from "react-query";
 import { QUERY_KEYS } from "@consts";
 import { useCardano } from "@context";
 import { getDRepVotingPower } from "@services";
-import { useGetVoterInfo } from ".";
+import { VoterInfo } from "@/models";
 
-export const useGetDRepVotingPowerQuery = () => {
+export const useGetDRepVotingPowerQuery = (voter?: VoterInfo) => {
   const { dRepID } = useCardano();
-  const { voter } = useGetVoterInfo();
 
   const { data, isLoading } = useQuery({
     queryKey: [