feat(#3277): handle drep voting power list on frontend

Author: MSzalowski

CHANGELOG.md

@@ -25,6 +25,7 @@ changes.
 - Add redirection to outcomes when proposal is not found [Issue 3230](https://github.com/IntersectMBO/govtool/issues/3230)
 - Add DRep voting power list endpoint [Issue 3263](https://github.com/IntersectMBO/govtool/issues/3263)
 - Add DRep given name to the voting power list endpoint [Issue 3273](https://github.com/IntersectMBO/govtool/issues/3273)
+- Add DRep voting power list query to PDF Pillar [Issue 3277](https://github.com/IntersectMBO/govtool/issues/3277)
 
 ### Fixed
 

govtool/frontend/src/consts/queryKeys.ts

@@ -13,6 +13,7 @@ export const QUERY_KEYS = {
   useGetProposalsInfiniteKey: "useGetProposalsInfiniteKey",
   useGetProposalsKey: "useGetProposalsKey",
   useGetVoteContextFromFile: "useGetVoteContextFromFile",
+  useGetDRepVotingPowerListKey: "useGetDRepVotingPowerListKey",
 };
 
 export const MUTATION_KEYS = {

govtool/frontend/src/hooks/queries/index.ts

@@ -13,3 +13,4 @@ export * from "./useGetProposalsInfiniteQuery";
 export * from "./useGetProposalsQuery";
 export * from "./useGetVoteContextTextFromFile";
 export * from "./useGetVoterInfoQuery";
+export * from "./useGetDRepVotingPowerList";

govtool/frontend/src/hooks/queries/useGetDRepVotingPowerList.ts

@@ -0,0 +1,29 @@
+import { useQuery, useQueryClient } from "react-query";
+import { getDRepVotingPowerList } from "@/services";
+import { QUERY_KEYS } from "@/consts";
+
+export const useGetDRepVotingPowerList = () => {
+  const queryClient = useQueryClient();
+
+  const queryResult = useQuery({
+    queryKey: [QUERY_KEYS.useGetDRepVotingPowerListKey],
+    queryFn: () => getDRepVotingPowerList([]),
+    enabled: false,
+  });
+
+  const { data: dRepVotingPowerList, isError, error, isLoading } = queryResult;
+
+  const fetchDRepVotingPowerList = async (identifiers: string[]) =>
+    queryClient.fetchQuery({
+      queryKey: [QUERY_KEYS.useGetDRepVotingPowerListKey],
+      queryFn: () => getDRepVotingPowerList(identifiers),
+    });
+
+  return {
+    dRepVotingPowerList,
+    fetchDRepVotingPowerList,
+    isError,
+    error,
+    isLoading,
+  };
+};

govtool/frontend/src/models/api.ts

@@ -265,3 +265,12 @@ export type Infinite<T> = {
   pageSize: number;
   total: number;
 };
+
+export type DRepVotingPower = {
+  view: string;
+  hashRaw: string;
+  votingPower: number;
+  givenName: string | null;
+};
+
+export type DRepVotingPowerListResponse = DRepVotingPower[];

govtool/frontend/src/pages/ProposalDiscussion.tsx

@@ -5,7 +5,7 @@ import { useCardano, useGovernanceActions } from "@/context";
 import { useValidateMutation } from "@/hooks/mutations";
 import { useScreenDimension } from "@/hooks/useScreenDimension";
 import { Footer, TopNav } from "@/components/organisms";
-import { useGetVoterInfo } from "@/hooks";
+import { useGetDRepVotingPowerList, useGetVoterInfo } from "@/hooks";
 
 const ProposalDiscussion = React.lazy(
   () => import("@intersect.mbo/pdf-ui/cjs"),
@@ -17,6 +17,7 @@ export const ProposalDiscussionPillar = () => {
   const { walletApi, ...context } = useCardano();
   const { voter } = useGetVoterInfo();
   const { createGovernanceActionJsonLD, createHash } = useGovernanceActions();
+  const { fetchDRepVotingPowerList } = useGetDRepVotingPowerList();
 
   return (
     <Box
@@ -65,6 +66,11 @@ export const ProposalDiscussionPillar = () => {
                 typeof ProposalDiscussion
               >["validateMetadata"]
             }
+            fetchDRepVotingPowerList={
+              fetchDRepVotingPowerList as ComponentProps<
+                typeof ProposalDiscussion
+              >["fetchDRepVotingPowerList"]
+            }
           />
         </Suspense>
       </Box>

govtool/frontend/src/services/index.ts

@@ -1,3 +1,3 @@
 export * from "./API";
 
-export * from "./requests/index";
+export * from "./requests";

govtool/frontend/src/services/requests/getDRepVotingPowerList.ts

@@ -0,0 +1,15 @@
+import { DRepVotingPowerListResponse } from "@/models";
+import { API } from "../API";
+
+export const getDRepVotingPowerList = async (
+  identifiers: string[],
+): Promise<DRepVotingPowerListResponse> => {
+  const params = new URLSearchParams();
+  identifiers.forEach((id: string) => params.append("identifiers", id));
+
+  const response = await API.get<DRepVotingPowerListResponse>(
+    `/drep/voting-power-list?${params.toString()}`,
+  );
+
+  return response.data;
+};

govtool/frontend/src/services/requests/index.ts

@@ -21,3 +21,4 @@ export * from "./postDRepRegister";
 export * from "./postDRepRemoveVote";
 export * from "./postDRepRetire";
 export * from "./postDRepVote";
+export * from "./getDRepVotingPowerList";

govtool/frontend/src/types/@intersect.mbo.d.ts

@@ -24,6 +24,9 @@ type ProposalDiscussionProps = {
     | { status?: MetadataValidationStatus; metadata?: any; valid: boolean }
     | undefined
   >;
+  fetchDRepVotingPowerList: (
+    identifiers: string[],
+  ) => Promise<DRepVotingPowerListResponse>;
 };
 
 type GovernanceActionsOutcomesProps = {