feat(#1703): make voting on governance actions dependent on the protocol version

CHANGELOG.md

@@ -15,6 +15,7 @@ changes.
 - Unsancho GovTool [Issue 1637](https://github.com/IntersectMBO/govtool/issues/1637)
 - Add network metrics model to frontend service
 - Added workflows to add labels to issues
+- Make voting on governance actions enabled based on protocol version [Issue 1703](https://github.com/IntersectMBO/govtool/issues/1703)
 
 ### Fixed
 

govtool/frontend/.storybook/preview.tsx

@@ -5,6 +5,7 @@ import { I18nextProvider } from "react-i18next";
 import { QueryClient, QueryClientProvider } from "react-query";
 import { MemoryRouter, Route, Routes } from "react-router-dom";
 
+import { FeatureFlagProvider } from "../src/context/featureFlag";
 import { AppContextProvider } from "../src/context/appContext";
 import { ModalProvider } from "../src/context/modal";
 import i18n from "../src/i18n";
@@ -26,30 +27,32 @@ const preview: Preview = {
     (Story) => (
       <QueryClientProvider client={queryClient}>
         <AppContextProvider>
-          <ThemeProvider theme={theme}>
-            <ModalProvider>
-              <I18nextProvider i18n={i18n}>
-                <MemoryRouter>
-                  <Routes>
-                    <Route
-                      path="/*"
-                      element={
-                        <div
-                          style={{
-                            margin: "0px",
-                            padding: "0px",
-                            position: "relative",
-                          }}
-                        >
-                          <Story />
-                        </div>
-                      }
-                    />
-                  </Routes>
-                </MemoryRouter>
-              </I18nextProvider>
-            </ModalProvider>
-          </ThemeProvider>
+          <FeatureFlagProvider>
+            <ThemeProvider theme={theme}>
+              <ModalProvider>
+                <I18nextProvider i18n={i18n}>
+                  <MemoryRouter>
+                    <Routes>
+                      <Route
+                        path="/*"
+                        element={
+                          <div
+                            style={{
+                              margin: "0px",
+                              padding: "0px",
+                              position: "relative",
+                            }}
+                          >
+                            <Story />
+                          </div>
+                        }
+                      />
+                    </Routes>
+                  </MemoryRouter>
+                </I18nextProvider>
+              </ModalProvider>
+            </ThemeProvider>
+          </FeatureFlagProvider>
         </AppContextProvider>
       </QueryClientProvider>
     ),

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

@@ -3,6 +3,8 @@ import { Box } from "@mui/material";
 
 import { useScreenDimension } from "@hooks";
 import { VoteActionForm, VotesSubmitted } from "@molecules";
+import { useFeatureFlag } from "@/context";
+import { GovernanceActionType } from "@/types/governanceAction";
 
 type GovernanceActionCardVotesProps = {
   setIsVoteSubmitted: Dispatch<SetStateAction<boolean>>;
@@ -19,6 +21,7 @@ type GovernanceActionCardVotesProps = {
   voteEpochNoFromEP?: number;
   isDashboard?: boolean;
   isInProgress?: boolean;
+  type: GovernanceActionType;
 };
 
 export const GovernanceActionDetailsCardVotes = ({
@@ -36,7 +39,9 @@ export const GovernanceActionDetailsCardVotes = ({
   voteEpochNoFromEP,
   isDashboard,
   isInProgress,
+  type,
 }: GovernanceActionCardVotesProps) => {
+  const { isVotingOnGovernanceActionEnabled } = useFeatureFlag();
   const { screenWidth } = useScreenDimension();
 
   const isModifiedPadding =
@@ -50,7 +55,7 @@ export const GovernanceActionDetailsCardVotes = ({
         p: `40px ${isModifiedPadding ? "24px" : "80px"}`,
       }}
     >
-      {isVoter ? (
+      {isVoter && isVotingOnGovernanceActionEnabled(type) ? (
         <VoteActionForm
           setIsVoteSubmitted={setIsVoteSubmitted}
           expiryDate={expiryDate}

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

@@ -39,11 +39,11 @@ export const AutomatedVotingOptions = ({
   txHash,
 }: AutomatedVotingOptionsProps) => {
   const { t } = useTranslation();
+  // TODO: Get network metrics from useAppContext
+  const { networkMetrics, fetchNetworkMetrics } = useGetNetworkMetrics();
 
   const [isOpen, setIsOpen] = useState<boolean>(false);
 
-  const { networkMetrics } = useGetNetworkMetrics();
-
   const isDelegatedToAbstain =
     currentDelegation ===
     AutomatedVotingOptionCurrentDelegation.drep_always_abstain;
@@ -55,6 +55,10 @@ export const AutomatedVotingOptions = ({
   const isDelegationToNoConfidenceInProgress =
     delegationInProgress === AutomatedVotingOptionDelegationId.no_confidence;
 
+  useEffect(() => {
+    fetchNetworkMetrics();
+  }, []);
+
   useEffect(() => {
     const shouldBeSetOpen =
       isDelegatedToAbstain ||

govtool/frontend/src/components/organisms/CreateGovernanceActionSteps/ChooseGovernanceActionType.tsx

@@ -1,6 +1,6 @@
 import { Dispatch, SetStateAction } from "react";
 import { ActionRadio, Spacer, Typography } from "@atoms";
-import { GovernanceActionTootlip } from "@consts";
+import { GovernanceActionTooltip } from "@consts";
 import {
   useCreateGovernanceActionForm,
   useScreenDimension,
@@ -49,7 +49,9 @@ export const ChooseGovernanceActionType = ({
               value={type}
               tooltipTitle={type}
               tooltipText={
-                GovernanceActionTootlip[type as GovernanceActionType]
+                GovernanceActionTooltip[
+                  type as keyof typeof GovernanceActionTooltip
+                ]
               }
             />
             {index + 1 < governanceActionTypes.length ? <Spacer y={2} /> : null}

govtool/frontend/src/components/organisms/CreateGovernanceActionSteps/CreateGovernanceActionForm.tsx

@@ -7,7 +7,10 @@ import { GOVERNANCE_ACTION_FIELDS, Placeholders } from "@consts";
 import { useCreateGovernanceActionForm, useTranslation } from "@hooks";
 import { Field } from "@molecules";
 import { URL_REGEX, testIdFromLabel } from "@/utils";
-import { GovernanceActionField } from "@/types/governanceAction";
+import {
+  GovernanceActionField,
+  GovernanceActionType,
+} from "@/types/governanceAction";
 
 import { BgCard } from "../BgCard";
 import { ControlledField } from "../ControlledField";
@@ -40,7 +43,13 @@ export const CreateGovernanceActionForm = ({
   const isContinueButtonDisabled =
     // TODO: Provide better typing for GOVERNANCE_ACTION_FIELDS
     // to get rid of explicit type assertion
-    Object.keys(GOVERNANCE_ACTION_FIELDS[type!]).some(
+    Object.keys(
+      GOVERNANCE_ACTION_FIELDS[
+        type! as
+          | GovernanceActionType.InfoAction
+          | GovernanceActionType.TreasuryWithdrawals
+      ],
+    ).some(
       (field) => !watch(field as unknown as Parameters<typeof watch>[0]),
     ) || isError;
 
@@ -54,7 +63,13 @@ export const CreateGovernanceActionForm = ({
   };
 
   const renderGovernanceActionField = () =>
-    Object.entries(GOVERNANCE_ACTION_FIELDS[type!]).map(([key, field]) => {
+    Object.entries(
+      GOVERNANCE_ACTION_FIELDS[
+        type! as
+          | GovernanceActionType.InfoAction
+          | GovernanceActionType.TreasuryWithdrawals
+      ],
+    ).map(([key, field]) => {
       const fieldProps = {
         helpfulText: field.tipI18nKey ? t(field.tipI18nKey) : undefined,
         key,

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

@@ -18,6 +18,8 @@ import { getShortenedGovActionId, getProposalTypeLabel } from "@utils";
 import { GovernanceActionDetailsCard } from "@organisms";
 import { Breadcrumbs } from "@molecules";
 
+// TODO: Refactor: GovernanceActionDetals and DashboardGovernanceActionDetails are almost identical
+// and should be unified
 export const DashboardGovernanceActionDetails = () => {
   const { voter } = useGetVoterInfo();
   const { pendingTransaction, isEnableLoading } = useCardano();
@@ -33,7 +35,13 @@ export const DashboardGovernanceActionDetails = () => {
     state ? state.txHash : data?.proposal.txHash ?? "",
     state ? state.index : data?.proposal.index ?? "",
   );
+
+  // TODO: Refactor me
   const title = state ? state?.title : data?.proposal?.title;
+  const label = state
+    ? getProposalTypeLabel(state.type)
+    : getProposalTypeLabel(data.proposal.type);
+  const type = state ? state.type : data.proposal.type;
 
   return (
     <Box
@@ -115,14 +123,11 @@ export const DashboardGovernanceActionDetails = () => {
               voter?.isRegisteredAsDRep || voter?.isRegisteredAsSoleVoter
             }
             noVotes={state ? state.noVotes : data.proposal.noVotes}
-            type={
-              state
-                ? getProposalTypeLabel(state.type)
-                : getProposalTypeLabel(data.proposal.type)
-            }
+            type={type}
+            label={label}
+            title={title}
             details={state ? state.details : data.proposal.details}
             url={state ? state.url : data.proposal.url}
-            title={title}
             links={state ? state?.references : data.proposal?.references}
             abstract={state ? state?.abstract : data.proposal?.abstract}
             motivation={state ? state?.motivation : data.proposal?.motivation}

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

@@ -8,6 +8,7 @@ import {
 } from "@molecules";
 import { GovernanceActionDetailsCardData } from "@organisms";
 import { MetadataValidationStatus } from "@models";
+import { GovernanceActionType } from "@/types/governanceAction";
 
 type GovernanceActionDetailsCardProps = {
   abstainVotes: number;
@@ -16,7 +17,8 @@ type GovernanceActionDetailsCardProps = {
   expiryDate: string;
   expiryEpochNo: number;
   noVotes: number;
-  type: string;
+  type: GovernanceActionType;
+  label: string;
   details?: ActionDetailsType;
   url: string;
   title?: string;
@@ -43,9 +45,10 @@ export const GovernanceActionDetailsCard = ({
   expiryDate,
   expiryEpochNo,
   noVotes,
-  type,
   details,
   url,
+  type,
+  label,
   title,
   links,
   abstract,
@@ -109,7 +112,7 @@ export const GovernanceActionDetailsCard = ({
         motivation={motivation}
         rationale={rationale}
         title={title}
-        type={type}
+        label={label}
         url={url}
       />
       <GovernanceActionDetailsCardVotes
@@ -127,6 +130,7 @@ export const GovernanceActionDetailsCard = ({
         isDashboard={isDashboard}
         isOneColumn={isOneColumn}
         isInProgress={isInProgress}
+        type={type}
       />
     </Box>
   );

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

@@ -30,7 +30,7 @@ type GovernanceActionDetailsCardDataProps = {
   motivation?: string;
   rationale?: string;
   title?: string;
-  type: string;
+  label: string;
   url: string;
 };
 
@@ -51,7 +51,7 @@ export const GovernanceActionDetailsCardData = ({
   motivation,
   rationale,
   title,
-  type,
+  label,
   url,
 }: GovernanceActionDetailsCardDataProps) => {
   const { t } = useTranslation();
@@ -89,9 +89,9 @@ export const GovernanceActionDetailsCardData = ({
       />
       <GovernanceActionCardElement
         label={t("govActions.governanceActionType")}
-        text={type}
+        text={label}
         textVariant="pill"
-        dataTestId={`${getProposalTypeNoEmptySpaces(type)}-type`}
+        dataTestId={`${getProposalTypeNoEmptySpaces(label)}-type`}
       />
       <GovernanceActionsDatesBox
         createdDate={createdDate}
@@ -134,12 +134,12 @@ export const GovernanceActionDetailsCardData = ({
       />
       {details &&
         Object.keys(details).length !== 0 &&
-        Object.entries(details).map(([label, content]) => (
+        Object.entries(details).map(([detailLabel, content]) => (
           <GovernanceActionCardElement
-            isCopyButton={label.toLowerCase().includes("address")}
-            label={label}
+            isCopyButton={detailLabel.toLowerCase().includes("address")}
+            label={detailLabel}
             text={content}
-            dataTestId={testIdFromLabel(label)}
+            dataTestId={testIdFromLabel(detailLabel)}
           />
         ))}
       <GovernanceActionDetailsCardLinks links={links} />

govtool/frontend/src/consts/governanceAction/fields.ts

@@ -7,9 +7,9 @@ import {
   SharedGovernanceActionFieldSchema,
 } from "@/types/governanceAction";
 
-export const GovernanceActionTootlip = {
-  Info: I18n.t("govActions.tooltips.info"),
-  Treasury: I18n.t("govActions.tooltips.treasury"),
+export const GovernanceActionTooltip = {
+  InfoAction: I18n.t("govActions.tooltips.info"),
+  TreasuryWithdrawals: I18n.t("govActions.tooltips.treasury"),
 };
 
 export const CIP_100 =
@@ -96,8 +96,8 @@ export const sharedGovernanceActionFields: SharedGovernanceActionFieldSchema = {
 };
 
 export const GOVERNANCE_ACTION_FIELDS: GovernanceActionFields = {
-  [GovernanceActionType.Info]: sharedGovernanceActionFields,
-  [GovernanceActionType.Treasury]: {
+  [GovernanceActionType.InfoAction]: sharedGovernanceActionFields,
+  [GovernanceActionType.TreasuryWithdrawals]: {
     ...sharedGovernanceActionFields,
     receivingAddress: {
       component: GovernanceActionField.Input,

govtool/frontend/src/consts/queryKeys.ts

@@ -1,14 +1,15 @@
 export const QUERY_KEYS = {
   getAdaHolderCurrentDelegationKey: "getAdaHolderCurrentDelegationKey",
   getAdaHolderVotingPowerKey: "getAdaHolderVotingPowerKey",
+  useGetDRepInfoKey: "useGetDRepInfoKey",
   useGetDRepListInfiniteKey: "useGetDRepListInfiniteKey",
   useGetDRepVotesKey: "useGetDRepVotesKey",
   useGetDRepVotingPowerKey: "useGetDRepVotingPowerKey",
+  useGetEpochParamsKey: "useGetEpochParamsKey",
   useGetNetworkMetricsKey: "useGetNetworkMetricsKey",
   useGetProposalKey: "useGetProposalKey",
-  useGetProposalsKey: "useGetProposalsKey",
   useGetProposalsInfiniteKey: "useGetProposalsInfiniteKey",
-  useGetDRepInfoKey: "useGetDRepInfoKey",
+  useGetProposalsKey: "useGetProposalsKey",
   useGetVoteContextFromFile: "useGetVoteContextFromFile",
 };