[#1923] display value of Ada holder voting power

IntersectMBO · Sep 12, 2024 · 7cc24fd · 7cc24fd
1 parent 4982292
commit 7cc24fd
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 26 deletions.
diff --git a/govtool/frontend/src/components/atoms/StakeRadio.tsx b/govtool/frontend/src/components/atoms/StakeRadio.tsx
@@ -2,8 +2,13 @@ import { Dispatch, FC, SetStateAction } from "react";
 import { Box, IconButton, Typography } from "@mui/material";
 
 import { ICONS } from "@consts";
-import { useScreenDimension } from "@hooks";
+import {
+  useGetAdaHolderVotingPowerQuery,
+  useScreenDimension,
+  useTranslation,
+} from "@hooks";
 import { theme } from "@/theme";
+import { correctAdaFormat } from "@/utils";
 
 type StakeRadioProps = {
   isChecked?: boolean;
@@ -18,9 +23,9 @@ export const StakeRadio: FC<StakeRadioProps> = ({ ...props }) => {
     palette: { boxShadow1 },
   } = theme;
   const { isMobile } = useScreenDimension();
-  // const { powerIsLoading, votingPower } =
-  //   useGetAdaHolderVotingPowerQuery(stakeKey);
-  // const { t } = useTranslation();
+  const { powerIsLoading, votingPower } =
+    useGetAdaHolderVotingPowerQuery(stakeKey);
+  const { t } = useTranslation();
 
   return (
     <Box
@@ -63,11 +68,9 @@ export const StakeRadio: FC<StakeRadioProps> = ({ ...props }) => {
             />
           </IconButton>
         </Box>
-        {/* TODO uncomment when voting power value s correct */}
-        {/* <Box alignItems="center" display="flex">
+        <Box alignItems="center" display="flex">
           <Typography color={isChecked ? "white" : "#8E908E"} variant="body2">
-            {t("votingPower")}
-            :
+            {t("votingPower")}:
           </Typography>
           {powerIsLoading ? (
             <Typography color={isChecked ? "white" : "#8E908E"} variant="body2">
@@ -82,7 +85,7 @@ export const StakeRadio: FC<StakeRadioProps> = ({ ...props }) => {
               ₳ {correctAdaFormat(votingPower) ?? 0}
             </Typography>
           )}
-        </Box> */}
+        </Box>
       </Box>
     </Box>
   );

diff --git a/govtool/frontend/src/components/molecules/AutomatedVotingCard.tsx b/govtool/frontend/src/components/molecules/AutomatedVotingCard.tsx
@@ -1,4 +1,4 @@
-import { Box } from "@mui/material";
+import { Box, Divider } from "@mui/material";
 
 import { Button, Typography } from "@atoms";
 import { primaryBlue } from "@consts";
@@ -20,6 +20,7 @@ export const AutomatedVotingCard = ({
   onClickInfo,
   title,
   transactionId,
+  votingPower,
 }: AutomatedVotingCardProps) => {
   const { cExplorerBaseUrl } = useAppContext();
   const { isMobile, screenWidth } = useScreenDimension();
@@ -83,8 +84,7 @@ export const AutomatedVotingCard = ({
       </Box>
       {!inProgress && !isSelected && (
         <>
-          {/* TODO uncomment when voting power value s correct */}
-          {/* <Divider
+          <Divider
             flexItem
             orientation={screenWidth < 1024 ? "horizontal" : "vertical"}
             sx={{ ml: screenWidth < 1024 ? 0 : 1 }}
@@ -113,7 +113,7 @@ export const AutomatedVotingCard = ({
             orientation={screenWidth < 1024 ? "horizontal" : "vertical"}
             sx={{ mr: screenWidth < 1024 ? 0 : 1 }}
             variant={screenWidth < 1024 ? "fullWidth" : "middle"}
-          /> */}
+          />
           <Box
             sx={{
               display: "flex",

diff --git a/govtool/frontend/src/i18n/locales/en.ts b/govtool/frontend/src/i18n/locales/en.ts
@@ -105,10 +105,10 @@ export const en = {
         },
         directVoter: {
           isRegisteredDescription:
-            "Your Voting Power can be used to vote.",
+            "Your Voting Power of ₳<strong>{{votingPower}}</strong> can be used to vote.",
           register: "Register",
           registerDescription:
-            "Register to Vote on Governance Actions using your own voting power of ₳<strong>{{votingPower}}</strong>.",
+            "Register to Vote on Governance Actions using your own Voting Power of ₳<strong>{{votingPower}}</strong>.",
           registerTitle: "Become a Direct Voter",
           reRegister: "Re-register",
           registration: "Direct Voter Registration",
@@ -120,7 +120,7 @@ export const en = {
           retirementInProgress:
             "The retirement process is ongoing. This may take several minutes.",
           wasRegisteredDescription:
-            "You cannot vote on Governance Actions using your own voting power until you re-register.",
+            "You cannot vote on Governance Actions using your own Voting Power of ₳<strong>{{votingPower}}</strong> until you re-register.",
           youAreDirectVoterTitle: "You are a Direct Voter",
         },
         delegation: {
@@ -129,18 +129,18 @@ export const en = {
           noDelegationDescription: "Find a DRep to vote on your behalf.",
           noDelegationActionButton: "View DRep Directory",
           dRepDelegationTitle:
-            "Your Voting Power is delegated to:",
+            "Your Voting Power of <strong>₳{{ada}}</strong>\nis Delegated to:",
           noConfidenceDelegationTitle:
-            "You have delegated your voting power to “No Confidence”",
+            "You have delegated your Voting Power <strong>₳{{ada}}</strong>\nto “No Confidence”",
           abstainDelegationTitle:
-            "You have delegated your voting power to “Abstain”",
+            "You have delegated your Voting Power <strong>₳{{ada}}</strong>\nto “Abstain”",
           abstainDescription:
             "You have selected to apply your Voting Power to Abstain on every vote.",
           noDescription:
             "You have selected to apply your Voting Power to No Confidence on every vote.",
           inProgress: {
             title: "Delegation",
-            dRep: "Your voting power is being delegated to:",
+            dRep: "Your Voting Power of ₳<strong>{{ada}}</strong> is being delegated to:",
             abstain:
               "You have selected to apply your Voting Power to Abstain on every vote.",
             no: "You have selected to apply your Voting Power to No Confidence on every vote.",
@@ -254,9 +254,9 @@ export const en = {
       abstainCardDefaultTitle: "Abstain from Every Vote",
       automatedVotingOptions: "Automated Voting Options",
       editBtn: "Edit DRep data",
-      delegatedToAbstainTitle: "You have delegated your voting power to “Abstain”",
+      delegatedToAbstainTitle: "You have delegated ₳{{ada}} to “Abstain”",
       delegatedToNoConfidenceTitle:
-        "You have delegated your voting power to “No Confidence”",
+        "You have delegated ₳{{ada}} to “No Confidence”",
       delegatedToAbstainDescription:
         "You have selected to apply your Voting Power to Abstain on every vote.",
       delegatedToNoConfidenceDescription:
@@ -266,10 +266,10 @@ export const en = {
       filterTitle: "DRep Status",
       goToDRepDirectory: "Go to DRep Directory",
       meAsDRep: "This DRep ID is connected to your wallet",
-      myDelegation: "You have delegated your voting power to:",
+      myDelegation: "You have delegated <strong>₳ {{ada}}</strong> to:",
       myDelegationToYourself:
-        "You have delegated your voting power to yourself:",
-      myDRep: "You have delegated your voting power to this DRep.",
+        "You have delegated <strong>₳ {{ada}}</strong> to yourself:",
+      myDRep: "You have delegated ₳{{ada}} to this DRep.",
       listTitle: "Find a DRep",
       noConfidenceDefaultDescription:
         "Select this to signal no confidence in the current constitutional committee by voting NO on every proposal and voting YES to no confidence proposals",
@@ -742,7 +742,7 @@ export const en = {
           "Looks like you cannot retire, because currently you are not a Direct Voter.",
       },
       registerDescription:
-        "A Direct Voter is someone that can vote on any Governance Action with their own Voting Power, which is equal to the balance of Ada in their connected wallet. <0>Learn More</0> about Direct Voter.\n\nBecoming a Direct Voter will require a refundable deposit equal to your voting power.\n\nYour deposit will be refunded if you either retire or delegate your voting power to someone else (a DRep)",
+        "A Direct Voter is someone that can vote on any Governance Action with their own Voting Power, which is equal to the balance of Ada in their connected wallet. <0>Learn More</0> about Direct Voter.\n\nBecoming a Direct Voter will require a refundable deposit of <strong>₳{{deposit}}</strong>.\n\nYour deposit will be refunded if you either retire or delegate your voting power to someone else (a DRep)",
       registerHeading: "What this Means",
       retirementDescription:
         "By Retiring you are giving up your Voting Power. You will not be able to vote on any Governance Actions. Your deposit of {{deposit}} ada will be refunded.\n\nYou can at any time in the future re-register to become a Direct Voter, or you can delegate your Voting Power to someone else, or become a DRep.\n\nThese options are listed in our Guides here: <0>Voting options and Roles</0>",