Merge pull request #963 from IntersectMBO/918-automated-voting-option…

…s-layout-fixes

[#918] Automated voting options layout fixes

govtool/frontend/src/components/molecules/AutomatedVotingCard.tsx

@@ -37,7 +37,6 @@ export const AutomatedVotingCard = ({
       })}
       {...(isSelected && {
         variant: "primary",
-        label: "Selected",
       })}
       sx={{
         alignItems: "center",
@@ -77,7 +76,7 @@ export const AutomatedVotingCard = ({
             sx={{ width: "fit-content", p: 0 }}
             variant="text"
           >
-            {t("dashboard.cards.showTransaction")}
+            {t("seeTransaction")}
           </Button>
         )}
       </Box>

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

@@ -37,5 +37,5 @@ export type AutomatedVotingCardProps = {
   title: string;
   votingPower: string | number;
   isDelegateLoading?: boolean;
-  transactionId?: string;
+  transactionId?: string | null;
 };

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

@@ -1,10 +1,9 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import {
   Accordion,
   AccordionDetails,
   AccordionSummary,
   Box,
-  Chip,
 } from "@mui/material";
 
 import { Typography } from "@atoms";
@@ -13,6 +12,10 @@ import { PendingTransaction } from "@context";
 import { useTranslation } from "@hooks";
 import { AutomatedVotingCard } from "@molecules";
 import { openInNewTab } from "@/utils";
+import {
+  AutomatedVotingOptionCurrentDelegation,
+  AutomatedVotingOptionDelegationId,
+} from "@/types/automatedVotingOptions";
 
 type AutomatedVotingOptionsProps = {
   currentDelegation?: string | null;
@@ -22,6 +25,7 @@ type AutomatedVotingOptionsProps = {
   isConnected?: boolean;
   isDelegationLoading?: boolean;
   pendingTransaction?: PendingTransaction;
+  txHash?: string | null;
 };
 
 export const AutomatedVotingOptions = ({
@@ -32,6 +36,7 @@ export const AutomatedVotingOptions = ({
   isDelegationLoading,
   pendingTransaction,
   votingPower,
+  txHash,
 }: AutomatedVotingOptionsProps) => {
   const { t } = useTranslation();
 
@@ -40,6 +45,29 @@ export const AutomatedVotingOptions = ({
   // TODO: Change to certain automated voted option if available
   const onClickInfo = () => openInNewTab("https://docs.sanchogov.tools/");
 
+  const isDelegatedToAbstain =
+    currentDelegation ===
+    AutomatedVotingOptionCurrentDelegation.drep_always_abstain;
+  const isDelegationToAbstainInProgress =
+    delegationInProgress === AutomatedVotingOptionDelegationId.abstain;
+  const isDelegatedToNoConfidence =
+    currentDelegation ===
+    AutomatedVotingOptionCurrentDelegation.drep_always_no_confidence;
+  const isDelegationToNoConfidenceInProgress =
+    delegationInProgress === AutomatedVotingOptionDelegationId.no_confidence;
+
+  useEffect(() => {
+    const shouldBeSetOpen =
+      isDelegatedToAbstain ||
+      isDelegatedToNoConfidence ||
+      isDelegationToAbstainInProgress ||
+      isDelegationToNoConfidenceInProgress;
+
+    if (shouldBeSetOpen) {
+      setIsOpen(true);
+    }
+  }, [currentDelegation, delegationInProgress]);
+
   return (
     <Accordion
       data-testid="automated-voting-options-accordion"
@@ -56,23 +84,6 @@ 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 } }}
@@ -86,34 +97,64 @@ export const AutomatedVotingOptions = ({
           }}
         >
           <AutomatedVotingCard
-            description={t("dRepDirectory.abstainCardDescription")}
-            inProgress={delegationInProgress === "abstain"}
+            description={
+              isDelegatedToAbstain
+                ? t("dRepDirectory.delegatedToAbstainDescription")
+                : t("dRepDirectory.abstainCardDefaultDescription")
+            }
+            inProgress={isDelegationToAbstainInProgress}
             isConnected={isConnected}
             isDelegateLoading={isDelegationLoading}
-            isSelected={currentDelegation === "drep_always_abstain"}
-            onClickDelegate={() => delegate("abstain")}
+            isSelected={isDelegatedToAbstain}
+            onClickDelegate={() =>
+              delegate(AutomatedVotingOptionDelegationId.abstain)
+            }
             onClickInfo={onClickInfo}
-            title={t("dRepDirectory.abstainCardTitle")}
+            title={
+              isDelegatedToAbstain
+                ? t("dRepDirectory.delegatedToAbstainTitle", {
+                    ada: votingPower,
+                  })
+                : t("dRepDirectory.abstainCardDefaultTitle")
+            }
             votingPower={votingPower}
             transactionId={
-              pendingTransaction?.delegate?.resourceId === "abstain"
+              pendingTransaction?.delegate?.resourceId ===
+              AutomatedVotingOptionDelegationId.abstain
                 ? pendingTransaction?.delegate?.transactionHash
+                : isDelegatedToAbstain
+                ? txHash
                 : undefined
             }
           />
           <AutomatedVotingCard
-            description={t("dRepDirectory.noConfidenceDescription")}
-            inProgress={delegationInProgress === "no confidence"}
+            description={
+              isDelegatedToNoConfidence
+                ? t("dRepDirectory.delegatedToNoConfidenceDescription")
+                : t("dRepDirectory.noConfidenceDefaultDescription")
+            }
+            inProgress={isDelegationToNoConfidenceInProgress}
             isConnected={isConnected}
             isDelegateLoading={isDelegationLoading}
-            isSelected={currentDelegation === "drep_always_no_confidence"}
-            onClickDelegate={() => delegate("no confidence")}
+            isSelected={isDelegatedToNoConfidence}
+            onClickDelegate={() =>
+              delegate(AutomatedVotingOptionDelegationId.no_confidence)
+            }
             onClickInfo={onClickInfo}
-            title={t("dRepDirectory.noConfidenceTitle")}
+            title={
+              isDelegatedToNoConfidence
+                ? t("dRepDirectory.delegatedToNoConfidenceTitle", {
+                    ada: votingPower,
+                  })
+                : t("dRepDirectory.noConfidenceDefaultTitle")
+            }
             votingPower={votingPower}
             transactionId={
-              pendingTransaction?.delegate?.resourceId === "no confidence"
+              pendingTransaction?.delegate?.resourceId ===
+              AutomatedVotingOptionDelegationId.no_confidence
                 ? pendingTransaction?.delegate?.transactionHash
+                : isDelegatedToNoConfidence
+                ? txHash
                 : undefined
             }
           />

govtool/frontend/src/components/organisms/DashboardCards/DelegateDashboardCard.tsx

@@ -12,6 +12,10 @@ import {
   DelegationAction,
 } from "@molecules";
 import { correctAdaFormat, formHexToBech32, openInNewTab } from "@utils";
+import {
+  AutomatedVotingOptionCurrentDelegation,
+  AutomatedVotingOptionDelegationId,
+} from "@/types/automatedVotingOptions";
 
 type DelegateDashboardCardProps = {
   currentDelegation: CurrentDelegation;
@@ -129,9 +133,11 @@ export const DelegateDashboardCard = ({
 
 const getDelegationTitle = (currentDelegation: string | null, ada: number) => {
   const key =
-    currentDelegation === "drep_always_no_confidence"
+    currentDelegation ===
+    AutomatedVotingOptionCurrentDelegation.drep_always_no_confidence
       ? "dashboard.cards.delegation.noConfidenceDelegationTitle"
-      : currentDelegation === "drep_always_abstain"
+      : currentDelegation ===
+        AutomatedVotingOptionCurrentDelegation.drep_always_abstain
       ? "dashboard.cards.delegation.abstainDelegationTitle"
       : "dashboard.cards.delegation.dRepDelegationTitle";
 
@@ -140,9 +146,11 @@ const getDelegationTitle = (currentDelegation: string | null, ada: number) => {
 
 const getDelegationDescription = (currentDelegation: string | null) => {
   const key =
-    currentDelegation === "drep_always_no_confidence"
+    currentDelegation ===
+    AutomatedVotingOptionCurrentDelegation.drep_always_no_confidence
       ? "dashboard.cards.delegation.noDescription"
-      : currentDelegation === "drep_always_abstain"
+      : currentDelegation ===
+        AutomatedVotingOptionCurrentDelegation.drep_always_abstain
       ? "dashboard.cards.delegation.abstainDescription"
       : undefined;
   return <Trans i18nKey={key} />;
@@ -152,9 +160,9 @@ const getProgressDescription = (delegateTo: string, ada: number) => {
   const key = (() => {
     if (!delegateTo) return undefined;
     switch (delegateTo) {
-      case "no confidence":
+      case AutomatedVotingOptionDelegationId.no_confidence:
         return "dashboard.cards.delegation.inProgress.no";
-      case "abstain":
+      case AutomatedVotingOptionDelegationId.abstain:
         return "dashboard.cards.delegation.inProgress.abstain";
       default:
         return "dashboard.cards.delegation.inProgress.dRep";
@@ -174,10 +182,10 @@ const getDisplayedDelegationId = ({
 }) => {
   const restrictedNames = [
     dRepID,
-    "drep_always_abstain",
-    "drep_always_no_confidence",
-    "abstain",
-    "no confidence",
+    AutomatedVotingOptionCurrentDelegation.drep_always_abstain,
+    AutomatedVotingOptionCurrentDelegation.drep_always_no_confidence,
+    AutomatedVotingOptionDelegationId.abstain,
+    AutomatedVotingOptionDelegationId.no_confidence,
   ];
   if (delegateTo) {
     if (!restrictedNames.includes(delegateTo)) {

govtool/frontend/src/context/pendingTransaction/utils.tsx

@@ -1,6 +1,10 @@
 import { QueryClient, QueryKey } from "react-query";
 import { QUERY_KEYS } from "@/consts";
 import { TransactionType, TransactionState } from "./types";
+import {
+  AutomatedVotingOptionCurrentDelegation,
+  AutomatedVotingOptionDelegationId,
+} from "@/types/automatedVotingOptions";
 
 export const getDesiredResult = (
   type: TransactionType,
@@ -9,8 +13,10 @@ export const getDesiredResult = (
   switch (type) {
     case "delegate": {
       // current delegation
-      if (resourceId === "no confidence") return "drep_always_no_confidence";
-      if (resourceId === "abstain") return "drep_always_abstain";
+      if (resourceId === AutomatedVotingOptionDelegationId.no_confidence)
+        return AutomatedVotingOptionCurrentDelegation.drep_always_no_confidence;
+      if (resourceId === AutomatedVotingOptionDelegationId.abstain)
+        return AutomatedVotingOptionCurrentDelegation.drep_always_abstain;
       return resourceId;
     }
     case "registerAsDrep":
@@ -60,7 +66,10 @@ export const refetchData = async (
   const data = await queryClient.getQueryData<any>(queryKey);
 
   if (type === "delegate") {
-    if (resourceId === "no confidence" || resourceId === "abstain") {
+    if (
+      resourceId === AutomatedVotingOptionDelegationId.no_confidence ||
+      resourceId === AutomatedVotingOptionDelegationId.abstain
+    ) {
       return data.dRepView;
     }
     return data.dRepHash;

govtool/frontend/src/context/wallet.tsx

@@ -72,6 +72,7 @@ import {
   TransactionStateWithoutResource,
   usePendingTransaction,
 } from "./pendingTransaction";
+import { AutomatedVotingOptionDelegationId } from "@/types/automatedVotingOptions";
 
 interface Props {
   children: React.ReactNode;
@@ -585,9 +586,9 @@ const CardanoProvider = (props: Props) => {
 
         // Create correct DRep
         let targetDRep;
-        if (target === "abstain") {
+        if (target === AutomatedVotingOptionDelegationId.abstain) {
           targetDRep = DRep.new_always_abstain();
-        } else if (target === "no confidence") {
+        } else if (target === AutomatedVotingOptionDelegationId.no_confidence) {
           targetDRep = DRep.new_always_no_confidence();
         } else if (target.includes("drep")) {
           targetDRep = DRep.new_key_hash(Ed25519KeyHash.from_bech32(target));

govtool/frontend/src/i18n/locales/en.ts

@@ -245,10 +245,18 @@ export const en = {
       },
     },
     dRepDirectory: {
-      abstainCardDescription: "Select this to vote ABSTAIN to every vote.",
-      abstainCardTitle: "Abstain from Every Vote",
+      abstainCardDefaultDescription:
+        "Select this to vote ABSTAIN to every vote.",
+      abstainCardDefaultTitle: "Abstain from Every Vote",
       automatedVotingOptions: "Automated Voting Options",
       editBtn: "Edit DRep data",
+      delegatedToAbstainTitle: "You have delegated ₳{{ada}} to “Abstain”",
+      delegatedToNoConfidenceTitle:
+        "You have delegated ₳{{ada}} to “No Confidence”",
+      delegatedToAbstainDescription:
+        "You have selected to apply your Voting Power to Abstain on every vote.",
+      delegatedToNoConfidenceDescription:
+        "You have selected to apply your Voting Power to No Confidence on every vote.",
       delegationOptions: "Delegation Options",
       directVoter: "Direct Voter",
       filterTitle: "DRep Status",
@@ -259,9 +267,9 @@ export const en = {
         "You have delegated <strong>₳ {{ada}}</strong> to yourself:",
       myDRep: "This is your DRep",
       listTitle: "Find a DRep",
-      noConfidenceDescription:
+      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",
-      noConfidenceTitle: "Signal No Confidence on Every Vote",
+      noConfidenceDefaultTitle: "Signal No Confidence on Every Vote",
       noResultsForTheSearchTitle: "No DReps found",
       noResultsForTheSearchDescription: "Please try a different search",
       title: "DRep Directory",