Merge pull request #14 from blockworks-foundation/max/vote-progress

correctly calculate vote progress

components/ProposalCard.tsx

@@ -4,22 +4,19 @@ import { ChevronRightIcon } from '@heroicons/react/solid'
 import StatusBadge from './StatusBadge'
 import Link from 'next/link'
 import { Proposal, ProposalState } from '../models/accounts'
-import { calculatePct, fmtUnixTime } from '../utils/formatting'
+import { fmtUnixTime } from '../utils/formatting'
 import ApprovalProgress from './ApprovalProgress'
 import useRealm from '../hooks/useRealm'
+import useProposalVotes from '../hooks/useProposalVotes'
 
 type ProposalCardProps = {
   id: string
   proposal: Proposal
 }
 
 const ProposalCard = ({ id, proposal }: ProposalCardProps) => {
-  const { symbol, mint } = useRealm()
-
-  const yesVotePct = calculatePct(proposal.yesVotesCount, mint.supply)
-
-  const yesVoteProgress =
-    (yesVotePct / proposal.voteThresholdPercentage?.value) * 100
+  const { symbol } = useRealm()
+  const { yesVoteProgress } = useProposalVotes(proposal)
 
   return (
     <div>

hooks/useProposalVotes.tsx

@@ -0,0 +1,37 @@
+import { Proposal } from '../models/accounts'
+import { calculatePct, fmtTokenAmount } from '../utils/formatting'
+import useRealm from './useRealm'
+
+export default function useProposalVotes(proposal?: Proposal) {
+  const { mint, governances } = useRealm()
+
+  const governance = governances[proposal?.governance?.toBase58()]?.info
+
+  // TODO: optimize using memo
+  if (!proposal || !governance || !mint)
+    return {
+      voteThresholdPct: 100,
+      yesVotePct: 0,
+      yesVoteProgress: 0,
+      yesVoteCount: 'N/A',
+      noVoteCount: 'N/A',
+    }
+
+  const voteThresholdPct =
+    (proposal.isVoteFinalized() && proposal.voteThresholdPercentage?.value) ||
+    governance.config.voteThresholdPercentage.value
+
+  const yesVotePct = calculatePct(proposal.yesVotesCount, mint.supply)
+  const yesVoteProgress = (yesVotePct / voteThresholdPct) * 100
+
+  const yesVoteCount = fmtTokenAmount(proposal.yesVotesCount, mint.decimals)
+  const noVoteCount = fmtTokenAmount(proposal.noVotesCount, mint.decimals)
+
+  return {
+    voteThresholdPct,
+    yesVotePct,
+    yesVoteProgress,
+    yesVoteCount,
+    noVoteCount,
+  }
+}

pages/dao/[symbol]/proposal/[pk].tsx

@@ -9,20 +9,16 @@ import DiscussionPanel from '../../../../components/DiscussionPanel'
 import VotePanel from '../../../../components/VotePanel'
 import { ProposalState } from '../../../../models/accounts'
 
-import { calculatePct, fmtTokenAmount } from '../../../../utils/formatting'
 import ApprovalProgress from '../../../../components/ApprovalProgress'
 import useRealm from '../../../../hooks/useRealm'
+import useProposalVotes from '../../../../hooks/useProposalVotes'
 
 const Proposal = () => {
-  const { symbol, mint } = useRealm()
+  const { symbol } = useRealm()
   const { proposal, description, instructions } = useProposal()
-
-  const yesVotePct = proposal
-    ? calculatePct(proposal.info.yesVotesCount, mint?.supply)
-    : null
-
-  const yesVoteProgress =
-    (yesVotePct / proposal?.info.voteThresholdPercentage?.value) * 100
+  const { yesVoteProgress, yesVoteCount, noVoteCount } = useProposalVotes(
+    proposal?.info
+  )
 
   console.log('proposal data', { proposal, instructions })
 
@@ -88,21 +84,11 @@ const Proposal = () => {
                     <>
                       <div className="bg-bkg-1 px-4 py-2 rounded w-full">
                         <p className="text-fgd-3 text-xs">Approve</p>
-                        <div className="font-bold">
-                          {fmtTokenAmount(
-                            proposal?.info.yesVotesCount,
-                            mint?.decimals
-                          )}
-                        </div>
+                        <div className="font-bold">{yesVoteCount}</div>
                       </div>
                       <div className="bg-bkg-1 px-4 py-2 rounded w-full">
                         <p className="text-fgd-3 text-xs">Deny</p>
-                        <div className="font-bold">
-                          {fmtTokenAmount(
-                            proposal?.info.noVotesCount,
-                            mint?.decimals
-                          )}
-                        </div>
+                        <div className="font-bold">{noVoteCount}</div>
                       </div>
                     </>
                   ) : (