From 8eaecd8127f8e81ae8a1383b81dc45d5f7ebd2bd Mon Sep 17 00:00:00 2001 From: Jan Jaroszczak Date: Fri, 29 Mar 2024 10:37:16 +0100 Subject: [PATCH] [#589] Vote context fix (plus small fix to supporting links in GA) --- .../GovernanceActionDetailsCardLinks.tsx | 12 +++- .../GovernanceActionDetailsCardVotes.tsx | 3 + .../molecules/GovernanceVotedOnCard.tsx | 1 + .../components/molecules/VoteActionForm.tsx | 68 ++++++++++++------- .../DashboardGovernanceActionDetails.tsx | 1 + .../organisms/GovernanceActionDetailsCard.tsx | 3 + govtool/frontend/src/consts/queryKeys.ts | 1 + govtool/frontend/src/hooks/queries/index.ts | 1 + .../queries/useGetVoteContextTextFromFile.ts | 24 +++++++ govtool/frontend/src/i18n/locales/en.ts | 1 + .../requests/getVoteContextTextFromFile.ts | 14 ++++ .../frontend/src/services/requests/index.ts | 1 + 12 files changed, 105 insertions(+), 25 deletions(-) create mode 100644 govtool/frontend/src/hooks/queries/useGetVoteContextTextFromFile.ts create mode 100644 govtool/frontend/src/services/requests/getVoteContextTextFromFile.ts diff --git a/govtool/frontend/src/components/molecules/GovernanceActionDetailsCardLinks.tsx b/govtool/frontend/src/components/molecules/GovernanceActionDetailsCardLinks.tsx index 8028668be..6d08028a6 100644 --- 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 = () => { openInNewTab(link)} + onClick={() => { + openModal({ + type: "externalLink", + state: { + externalLink: link, + }, + }); + }} icon={link} cutWithEllipsis /> diff --git a/govtool/frontend/src/components/molecules/GovernanceActionDetailsCardVotes.tsx b/govtool/frontend/src/components/molecules/GovernanceActionDetailsCardVotes.tsx index 2abf51ca9..ad39f5d4f 100644 --- 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 = ({ >; 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(); const [voteContextHash, setVoteContextHash] = useState(); const [voteContextUrl, setVoteContextUrl] = useState(); const [showWholeVoteContext, setShowWholeVoteContext] = useState(false); + const { voter } = useGetVoterInfo(); + const { voteContextText } = useGetVoteContextTextFromFile(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( () => ( - ) : ( - )} + { 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 index 581576861..0db73411c 100644 --- 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 index 9725de743..66a12b0b1 100644 --- 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 index 192e18b0d..f088d04fb 100644 --- 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 "./useGetVoteContextTextFromFile"; diff --git a/govtool/frontend/src/hooks/queries/useGetVoteContextTextFromFile.ts b/govtool/frontend/src/hooks/queries/useGetVoteContextTextFromFile.ts new file mode 100644 index 000000000..cab05659c --- /dev/null +++ b/govtool/frontend/src/hooks/queries/useGetVoteContextTextFromFile.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 useGetVoteContextTextFromFile = (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 { voteContextText: data, isLoading }; +}; diff --git a/govtool/frontend/src/i18n/locales/en.ts b/govtool/frontend/src/i18n/locales/en.ts index 9f84a3429..7a32b67b9 100644 --- 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/getVoteContextTextFromFile.ts b/govtool/frontend/src/services/requests/getVoteContextTextFromFile.ts new file mode 100644 index 000000000..407e08e11 --- /dev/null +++ b/govtool/frontend/src/services/requests/getVoteContextTextFromFile.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 index 16f5cb743..747289515 100644 --- 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 "./getVoteContextTextFromFile"; export * from "./postAdaHolderDelegate"; export * from "./postAdaHolderDelegateAbstain"; export * from "./postAdaHolderDelegateNo";