[#589] Vote context fix (plus small fix to supporting links in GA)

IntersectMBO · Mar 29, 2024 · e029800 · e029800
1 parent 40a69af
commit e029800
Show file tree

Hide file tree

Showing 12 changed files with 107 additions and 27 deletions.
diff --git a/govtool/frontend/src/components/molecules/GovernanceActionDetailsCardLinks.tsx b/govtool/frontend/src/components/molecules/GovernanceActionDetailsCardLinks.tsx
@@ -3,8 +3,8 @@ import { Box } from "@mui/material";
 import { Typography } from "@atoms";
 import { useScreenDimension, useTranslation } from "@hooks";
 import { LinkWithIcon } from "@molecules";
-import { openInNewTab } from "@/utils";
 import { ICONS } from "@/consts";
+import { useModal } from "@/context";
 
 // TODO: When BE is ready, pass links as props
 const LINKS = [
@@ -17,6 +17,7 @@ const LINKS = [
 export const GovernanceActionDetailsCardLinks = () => {
   const { isMobile } = useScreenDimension();
   const { t } = useTranslation();
+  const { openModal } = useModal();
 
   return (
     <>
@@ -47,7 +48,14 @@ export const GovernanceActionDetailsCardLinks = () => {
           <LinkWithIcon
             key={link}
             label={link}
-            onClick={() => openInNewTab(link)}
+            onClick={() => {
+              openModal({
+                type: "externalLink",
+                state: {
+                  externalLink: link,
+                },
+              });
+            }}
             icon={<img alt="link" src={ICONS.link} />}
             cutWithEllipsis
           />

diff --git a/govtool/frontend/src/components/molecules/GovernanceActionDetailsCardVotes.tsx b/govtool/frontend/src/components/molecules/GovernanceActionDetailsCardVotes.tsx
@@ -12,6 +12,7 @@ type GovernanceActionCardVotesProps = {
   isOneColumn: boolean;
   isVoter?: boolean;
   voteFromEP?: string;
+  voteUrlFromEP?: string;
   isDashboard?: boolean;
   isInProgress?: boolean;
 };
@@ -24,6 +25,7 @@ export const GovernanceActionDetailsCardVotes = ({
   isOneColumn,
   isVoter,
   voteFromEP,
+  voteUrlFromEP,
   isDashboard,
   isInProgress,
 }: GovernanceActionCardVotesProps) => {
@@ -44,6 +46,7 @@ export const GovernanceActionDetailsCardVotes = ({
         <VoteActionForm
           setIsVoteSubmitted={setIsVoteSubmitted}
           voteFromEP={voteFromEP ? voteFromEP.toLowerCase() : undefined}
+          voteUrlFromEP={voteUrlFromEP}
           yesVotes={yesVotes}
           noVotes={noVotes}
           abstainVotes={abstainVotes}

diff --git a/govtool/frontend/src/components/molecules/GovernanceVotedOnCard.tsx b/govtool/frontend/src/components/molecules/GovernanceVotedOnCard.tsx
@@ -143,6 +143,7 @@ export const GovernanceVotedOnCard = ({
                 state: {
                   ...proposal,
                   vote: vote.vote.toLowerCase(),
+                  voteUrl: vote.url,
                 },
               },
             )

diff --git a/govtool/frontend/src/components/molecules/VoteActionForm.tsx b/govtool/frontend/src/components/molecules/VoteActionForm.tsx
@@ -11,6 +11,7 @@ import {
   useVoteActionForm,
   useTranslation,
   useGetVoterInfo,
+  useGetVoteContextFromFile,
 } from "@hooks";
 
 // TODO: Decide with BE on how cast votes will be implemented
@@ -21,6 +22,7 @@ const castVoteChangeDeadline = "20.06.2024 (Epoch 445)";
 type VoteActionFormProps = {
   setIsVoteSubmitted: Dispatch<SetStateAction<boolean>>;
   voteFromEP?: string;
+  voteUrlFromEP?: string;
   yesVotes: number;
   noVotes: number;
   abstainVotes: number;
@@ -30,22 +32,24 @@ type VoteActionFormProps = {
 export const VoteActionForm = ({
   setIsVoteSubmitted,
   voteFromEP,
+  voteUrlFromEP,
   yesVotes,
   noVotes,
   abstainVotes,
   isInProgress,
 }: VoteActionFormProps) => {
-  const [voteContextText, setVoteContextText] = useState<string | undefined>();
   const [voteContextHash, setVoteContextHash] = useState<string | undefined>();
   const [voteContextUrl, setVoteContextUrl] = useState<string | undefined>();
   const [showWholeVoteContext, setShowWholeVoteContext] =
     useState<boolean>(false);
 
+  const { voter } = useGetVoterInfo();
+  const { contextText } = useGetVoteContextFromFile(voteContextUrl);
+
   const { state } = useLocation();
-  const { isMobile } = useScreenDimension();
+  const { isMobile, screenWidth } = useScreenDimension();
   const { openModal } = useModal();
   const { t } = useTranslation();
-  const { voter } = useGetVoterInfo();
 
   const {
     areFormErrors,
@@ -57,10 +61,9 @@ export const VoteActionForm = ({
     vote,
   } = useVoteActionForm(voteContextHash, voteContextUrl);
 
-  const setVoteContextData = (url: string, hash: string, text: string) => {
+  const setVoteContextData = (url: string, hash: string) => {
     setVoteContextUrl(url);
     setVoteContextHash(hash);
-    setVoteContextText(text);
   };
 
   useEffect(() => {
@@ -73,6 +76,14 @@ export const VoteActionForm = ({
     }
   }, [state, voteFromEP, setValue]);
 
+  useEffect(() => {
+    if (state && state.voteUrl) {
+      setVoteContextUrl(state.voteUrl);
+    } else if (voteUrlFromEP) {
+      setVoteContextUrl(voteUrlFromEP);
+    }
+  }, [voteUrlFromEP, state]);
+
   const renderCancelButton = useMemo(
     () => (
       <Button
@@ -241,11 +252,11 @@ export const VoteActionForm = ({
             mt: "5px",
           }}
         >
-          {voteContextText
+          {contextText
             ? t("govActions.contextAboutYourVote")
             : t("govActions.youCanProvideContext")}
         </Typography>
-        {voteContextText ? (
+        {contextText && (
           <Box
             sx={{
               display: "flex",
@@ -267,7 +278,7 @@ export const VoteActionForm = ({
                 }),
               }}
             >
-              {voteContextText}
+              {contextText}
             </Typography>
             <Button
               onClick={() => {
@@ -296,24 +307,35 @@ export const VoteActionForm = ({
               </Typography>
             </Button>
           </Box>
-        ) : (
-          <Button
-            variant="outlined"
-            onClick={() => {
-              openModal({
-                type: "voteContext",
-                state: {
-                  onSubmit: setVoteContextData,
-                },
-              });
-            }}
-            sx={{
-              mt: "12px",
-            }}
-          >
-            {t("govActions.provideContextAboutYourVote")}
-          </Button>
         )}
+        <Button
+          variant="outlined"
+          onClick={() => {
+            openModal({
+              type: "voteContext",
+              state: {
+                onSubmit: setVoteContextData,
+              },
+            });
+          }}
+          sx={{
+            mt: contextText ? "40px" : "12px",
+            fontSize:
+              screenWidth < 390
+                ? "12px"
+                : screenWidth < 1036
+                ? "14px"
+                : screenWidth < 1080
+                ? "10.5px"
+                : screenWidth < 1480
+                ? "11.5px"
+                : "14px",
+          }}
+        >
+          {contextText
+            ? t("govActions.provideNewContextAboutYourVote")
+            : t("govActions.provideContextAboutYourVote")}
+        </Button>
       </Box>
       <Typography
         sx={{

diff --git a/govtool/frontend/src/components/organisms/DashboardGovernanceActionDetails.tsx b/govtool/frontend/src/components/organisms/DashboardGovernanceActionDetails.tsx
@@ -140,6 +140,7 @@ export const DashboardGovernanceActionDetails = () => {
             rationale={state ? state.rationale : data.proposal.rationale}
             yesVotes={state ? state.yesVotes : data.proposal.yesVotes}
             voteFromEP={data?.vote?.vote}
+            voteUrlFromEP={data?.vote?.url}
             govActionId={fullProposalId}
             isInProgress={
               pendingTransaction.vote?.resourceId ===

diff --git a/govtool/frontend/src/components/organisms/GovernanceActionDetailsCard.tsx b/govtool/frontend/src/components/organisms/GovernanceActionDetailsCard.tsx
@@ -27,6 +27,7 @@ type GovernanceActionDetailsCardProps = {
   isDashboard?: boolean;
   isVoter?: boolean;
   voteFromEP?: string;
+  voteUrlFromEP?: string;
   isInProgress?: boolean;
 };
 
@@ -48,6 +49,7 @@ export const GovernanceActionDetailsCard = ({
   isDashboard,
   isVoter,
   voteFromEP,
+  voteUrlFromEP,
   govActionId,
   isInProgress,
   isDataMissing,
@@ -106,6 +108,7 @@ export const GovernanceActionDetailsCard = ({
         yesVotes={yesVotes}
         isVoter={isVoter}
         voteFromEP={voteFromEP}
+        voteUrlFromEP={voteUrlFromEP}
         isDashboard={isDashboard}
         isOneColumn={isOneColumn}
         isInProgress={isInProgress}

diff --git a/govtool/frontend/src/consts/queryKeys.ts b/govtool/frontend/src/consts/queryKeys.ts
@@ -8,4 +8,5 @@ export const QUERY_KEYS = {
   useGetProposalsKey: "useGetProposalsKey",
   useGetProposalsInfiniteKey: "useGetProposalsInfiniteKey",
   useGetDRepInfoKey: "useGetDRepInfoKey",
+  useGetVoteContextFromFile: "useGetVoteContextFromFile",
 };
diff --git a/govtool/frontend/src/hooks/queries/index.ts b/govtool/frontend/src/hooks/queries/index.ts
@@ -7,3 +7,4 @@ export * from "./useGetDRepVotingPowerQuery";
 export * from "./useGetProposalQuery";
 export * from "./useGetProposalsQuery";
 export * from "./useGetProposalsInfiniteQuery";
+export * from "./useGetVoteContextFromFile";
diff --git a/govtool/frontend/src/hooks/queries/useGetVoteContextFromFile.ts b/govtool/frontend/src/hooks/queries/useGetVoteContextFromFile.ts
@@ -0,0 +1,24 @@
+import { useQuery } from "react-query";
+
+import { getVoteContextTextFromFile } from "@/services";
+import { QUERY_KEYS } from "@/consts";
+import { useCardano } from "@/context";
+import { useGetVoterInfo } from ".";
+
+export const useGetVoteContextFromFile = (url: string | undefined) => {
+  const { dRepID } = useCardano();
+  const { voter } = useGetVoterInfo();
+
+  const { data, isLoading } = useQuery(
+    [QUERY_KEYS.useGetVoteContextFromFile, url],
+    () => getVoteContextTextFromFile(url),
+    {
+      enabled:
+        !!url &&
+        !!dRepID &&
+        (!!voter?.isRegisteredAsDRep || !!voter?.isRegisteredAsSoleVoter),
+    },
+  );
+
+  return { contextText: data, isLoading };
+};
diff --git a/govtool/frontend/src/i18n/locales/en.ts b/govtool/frontend/src/i18n/locales/en.ts
@@ -326,6 +326,7 @@ export const en = {
       optional: "(optional)",
       provideContext: "Provide context",
       provideContextAboutYourVote: "Provide context about your vote",
+      provideNewContextAboutYourVote: "Provide new context about your vote",
       rationale: "Rationale",
       seeExternalData: "See external data",
       selectDifferentOption: "Select a different option to change your vote",

diff --git a/govtool/frontend/src/services/requests/getVoteContextFromFile.ts b/govtool/frontend/src/services/requests/getVoteContextFromFile.ts
@@ -0,0 +1,14 @@
+import axios from "axios";
+
+export const getVoteContextTextFromFile = async (url: string | undefined) => {
+  if (!url) {
+    throw new Error("URL is undefined");
+  }
+
+  const response = await axios.get(url);
+
+  const voteContextText =
+    response.data.body["CIP108:voteContextText"]["@value"];
+
+  return voteContextText;
+};
diff --git a/govtool/frontend/src/services/requests/index.ts b/govtool/frontend/src/services/requests/index.ts
@@ -8,6 +8,7 @@ export * from "./getEpochParams";
 export * from "./getProposal";
 export * from "./getProposals";
 export * from "./getTransactionStatus";
+export * from "./getVoteContextFromFile";
 export * from "./postAdaHolderDelegate";
 export * from "./postAdaHolderDelegateAbstain";
 export * from "./postAdaHolderDelegateNo";