From 36bde4166d33b2ea7105bb1bb03ab363584366f2 Mon Sep 17 00:00:00 2001 From: Bryan Date: Mon, 18 Nov 2024 19:01:00 -0600 Subject: [PATCH] fix VoterBreakdown (#176) --- package.json | 26 +++++----- src/components/VoteBreakdown.tsx | 81 +++++++++++++++++--------------- 2 files changed, 55 insertions(+), 52 deletions(-) diff --git a/package.json b/package.json index e4310fe..0fc7ce9 100644 --- a/package.json +++ b/package.json @@ -10,16 +10,16 @@ }, "dependencies": { "@coral-xyz/anchor": "^0.29.0", - "@helium/account-fetch-cache": "^0.9.12", - "@helium/account-fetch-cache-hooks": "^0.9.12", - "@helium/helium-react-hooks": "^0.9.12", + "@helium/account-fetch-cache": "^0.9.13", + "@helium/account-fetch-cache-hooks": "^0.9.13", + "@helium/helium-react-hooks": "^0.9.13", "@helium/modular-governance-hooks": "^0.0.13", "@helium/modular-governance-idls": "^0.0.13", "@helium/organization-sdk": "^0.0.13", - "@helium/spl-utils": "^0.9.12", + "@helium/spl-utils": "^0.9.13", "@helium/state-controller-sdk": "^0.0.13", - "@helium/voter-stake-registry-hooks": "^0.9.12", - "@helium/voter-stake-registry-sdk": "^0.9.12", + "@helium/voter-stake-registry-hooks": "^0.9.13", + "@helium/voter-stake-registry-sdk": "^0.9.13", "@hookform/resolvers": "^3.3.4", "@metaplex-foundation/mpl-token-metadata": "2.10.0", "@project-serum/anchor": "^0.26.0", @@ -41,7 +41,7 @@ "@solana/wallet-adapter-react": "^0.15.35", "@solana/wallet-adapter-react-ui": "^0.9.35", "@solana/wallet-adapter-wallets": "^0.19.32", - "@solana/web3.js": "^1.90.0", + "@solana/web3.js": "^1.95.4", "@sqds/sdk": "^2.0.4", "@tanstack/react-query": "5.45.1", "@uidotdev/usehooks": "^2.4.1", @@ -73,15 +73,15 @@ "resolutions": { "@tanstack/react-query": "5.45.1", "@solana/web3.js": "^1.90.0", - "@helium/account-fetch-cache": "^0.9.12", - "@helium/account-fetch-cache-hooks": "^0.9.12", - "@helium/helium-react-hooks": "^0.9.12", - "@helium/voter-stake-registry-hooks": "^0.9.12", + "@helium/account-fetch-cache": "^0.9.13", + "@helium/account-fetch-cache-hooks": "^0.9.13", + "@helium/helium-react-hooks": "^0.9.13", + "@helium/voter-stake-registry-hooks": "^0.9.13", "@helium/modular-governance-idls": "^0.0.13", - "@helium/spl-utils": "^0.9.12", + "@helium/spl-utils": "^0.9.13", "@helium/modular-governance-hooks": "^0.0.13", "@solana/wallet-adapter-react": "^0.15.35", - "@helium/voter-stake-registry-sdk": "^0.9.12" + "@helium/voter-stake-registry-sdk": "^0.9.13" }, "devDependencies": { "@tailwindcss/typography": "^0.5.10", diff --git a/src/components/VoteBreakdown.tsx b/src/components/VoteBreakdown.tsx index a67050c..af6314d 100644 --- a/src/components/VoteBreakdown.tsx +++ b/src/components/VoteBreakdown.tsx @@ -5,11 +5,14 @@ import { useProposal, useProposalConfig, } from "@helium/modular-governance-hooks"; -import { useRegistrar } from "@helium/voter-stake-registry-hooks"; +import { + useRegistrar, + useHeliumVsrState, + votesForProposalQuery, +} from "@helium/voter-stake-registry-hooks"; import { useMint } from "@helium/helium-react-hooks"; import BN from "bn.js"; -import { useVotes } from "@/hooks/useVotes"; -import { toNumber, truthy } from "@helium/spl-utils"; +import { toNumber } from "@helium/spl-utils"; import { Table, TableBody, @@ -23,12 +26,19 @@ import { Button } from "./ui/button"; import { FaChevronDown } from "react-icons/fa6"; import classNames from "classnames"; import Link from "next/link"; +import { useQuery } from "@tanstack/react-query"; export const VoteBreakdown: FC<{ proposalKey: PublicKey; }> = ({ proposalKey }) => { + const { voteService } = useHeliumVsrState(); const [displayCount, setDisplayCount] = useState(6); - const { markers, loading: loadingMarkers } = useVotes(proposalKey); + const { data: votes, isLoading: loadingVotes } = useQuery( + votesForProposalQuery({ + voteService, + proposal: proposalKey, + }) + ); const { info: proposal, loading: loadingProp } = useProposal(proposalKey); const { info: proposalConfig, loading: loadingConf } = useProposalConfig( proposal?.proposalConfig @@ -45,22 +55,23 @@ export const VoteBreakdown: FC<{ [proposal?.choices] ); - const groupedSortedMarkers = useMemo(() => { + const groupedSortedVotes = useMemo(() => { if (decimals) { const grouped = Object.values( - (markers || []).reduce((acc, marker) => { - const key = marker.voter.toBase58() + marker.choices.join(","); + (votes || []).reduce((acc, vote) => { + const key = vote.voter; if (!acc[key]) { acc[key] = { - voter: marker.voter, + voter: vote.voter, choices: [], totalWeight: new BN(0), }; } - acc[key].choices = marker.choices; - acc[key].totalWeight = acc[key].totalWeight.add(marker.weight); + + acc[key].choices.push(vote.choiceName); + acc[key].totalWeight = acc[key].totalWeight.add(new BN(vote.weight)); return acc; - }, {} as Record) + }, {} as Record) ); const sortedMarkers = grouped.sort((a, b) => @@ -69,21 +80,17 @@ export const VoteBreakdown: FC<{ return sortedMarkers; } - }, [markers, decimals]); + }, [votes, decimals]); const csvData = useMemo(() => { const rows: string[][] = []; rows.push(["Owner", "Choices", "Vote Power", "Percentage"]); - (groupedSortedMarkers || []).forEach((marker) => { - const owner = marker.voter.toBase58(); - const choices = marker.choices - .map((c) => proposal?.choices[c].name) - .filter(truthy) - .join(", "); - - const voteWeight = humanReadable(marker.totalWeight, decimals); - const percentage = marker.totalWeight + (groupedSortedVotes || []).forEach((vote) => { + const owner = vote.voter; + const choices = vote.choices.join(" "); + const voteWeight = humanReadable(vote.totalWeight, decimals); + const percentage = vote.totalWeight .mul(new BN(100000)) .div(totalVotes) .div(new BN(1000)) @@ -97,11 +104,11 @@ export const VoteBreakdown: FC<{ .map((row) => row.map((r) => `"${r.toString()}"`).join(",")) .join("\n"); return csvContent; - }, [groupedSortedMarkers, proposal?.choices, decimals, totalVotes]); + }, [groupedSortedVotes, decimals, totalVotes]); - const displayedMarkers = useMemo( - () => (groupedSortedMarkers || []).slice(0, displayCount), - [groupedSortedMarkers, displayCount] + const displayedVotes = useMemo( + () => (groupedSortedVotes || []).slice(0, displayCount), + [groupedSortedVotes, displayCount] ); const handleCSVDownload = () => { @@ -127,8 +134,8 @@ export const VoteBreakdown: FC<{ }; const isLoading = useMemo( - () => loadingMarkers || loadingProp || loadingConf || loadingReg, - [loadingMarkers, loadingProp, loadingConf, loadingReg] + () => loadingVotes || loadingProp || loadingConf || loadingReg, + [loadingVotes, loadingProp, loadingConf, loadingReg] ); return ( @@ -145,7 +152,7 @@ export const VoteBreakdown: FC<{ 64-bits of precision

- {groupedSortedMarkers && groupedSortedMarkers.length > displayCount && ( + {groupedSortedVotes && groupedSortedVotes.length > displayCount && ( )} @@ -166,9 +173,9 @@ export const VoteBreakdown: FC<{ {!isLoading && ( - {displayedMarkers.map((marker, i) => ( + {displayedVotes.map((vote, i) => ( - {ellipsisMiddle(marker.voter.toBase58())} + {ellipsisMiddle(vote.voter)} + {vote.choices.join(", ")} - {marker.choices - .map((c) => proposal?.choices[c].name) - .join(", ")} - - - {humanReadable(marker.totalWeight, decimals)} + {humanReadable(vote.totalWeight, decimals)} {/* Add two decimals precision */} - {marker.totalWeight + {vote.totalWeight .mul(new BN(100000)) .div(totalVotes) .div(new BN(1000))