[#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";
@@ -22,6 +21,7 @@ type AutomatedVotingOptionsProps = {
   isConnected?: boolean;
   isDelegationLoading?: boolean;
   pendingTransaction?: PendingTransaction;
+  txHash?: string | null;
 };
 
 export const AutomatedVotingOptions = ({
@@ -32,6 +32,7 @@ export const AutomatedVotingOptions = ({
   isDelegationLoading,
   pendingTransaction,
   votingPower,
+  txHash,
 }: AutomatedVotingOptionsProps) => {
   const { t } = useTranslation();
 
@@ -40,6 +41,25 @@ export const AutomatedVotingOptions = ({
   // TODO: Change to certain automated voted option if available
   const onClickInfo = () => openInNewTab("https://docs.sanchogov.tools/");
 
+  const isDelegatedToAbstain = currentDelegation === "drep_always_abstain";
+  const isDelegationToAbstainInProgress = delegationInProgress === "abstain";
+  const isDelegatedToNoConfidence =
+    currentDelegation === "drep_always_no_confidence";
+  const isDelegationToNoConfidenceInProgress =
+    delegationInProgress === "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 +76,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 +89,58 @@ 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"}
+            isSelected={isDelegatedToAbstain}
             onClickDelegate={() => delegate("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?.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"}
+            isSelected={isDelegatedToNoConfidence}
             onClickDelegate={() => delegate("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?.transactionHash
+                : isDelegatedToNoConfidence
+                ? txHash
                 : undefined
             }
           />

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",

govtool/frontend/src/pages/DRepDirectoryContent.tsx

@@ -95,6 +95,11 @@ export const DRepDirectoryContent: FC<DRepDirectoryContentProps> = ({
   const dRepListToDisplay = yourselfDRep
     ? [yourselfDRep, ...dRepsWithoutYourself]
     : dRepList;
+  const isAnAutomatedOptionChosen =
+    currentDelegation?.dRepView &&
+    ["drep_always_abstain", "drep_always_no_confidence"].includes(
+      currentDelegation?.dRepView,
+    );
 
   return (
     <Box display="flex" flex={1} flexDirection="column" gap={4}>
@@ -121,11 +126,7 @@ export const DRepDirectoryContent: FC<DRepDirectoryContentProps> = ({
           </Typography>
           <AutomatedVotingOptions
             currentDelegation={
-              !pendingTransaction.delegate &&
-              currentDelegation?.dRepView &&
-              ["drep_always_abstain", "drep_always_no_confidence"].includes(
-                currentDelegation?.dRepView,
-              )
+              !pendingTransaction.delegate && isAnAutomatedOptionChosen
                 ? currentDelegation?.dRepView
                 : undefined
             }
@@ -140,6 +141,11 @@ export const DRepDirectoryContent: FC<DRepDirectoryContentProps> = ({
             isDelegationLoading={isDelegating}
             votingPower={ada.toString()}
             pendingTransaction={pendingTransaction}
+            txHash={
+              !pendingTransaction.delegate && isAnAutomatedOptionChosen
+                ? currentDelegation?.txHash
+                : undefined
+            }
           />
         </div>
       )}