From 34b28a6abc801dc875a1058d2f7da401dff23922 Mon Sep 17 00:00:00 2001
From: Maximilian Schneider <mail@maximilianschneider.net>
Date: Sat, 28 Aug 2021 13:55:46 +0200
Subject: [PATCH] correctly calculate vote progress

---
 components/ProposalCard.tsx          | 11 +++------
 hooks/useProposalVotes.tsx           | 37 ++++++++++++++++++++++++++++
 pages/dao/[symbol]/proposal/[pk].tsx | 28 ++++++---------------
 3 files changed, 48 insertions(+), 28 deletions(-)
 create mode 100644 hooks/useProposalVotes.tsx

diff --git a/components/ProposalCard.tsx b/components/ProposalCard.tsx
index 5118431dcc..d59f09d698 100644
--- a/components/ProposalCard.tsx
+++ b/components/ProposalCard.tsx
@@ -4,9 +4,10 @@ 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
@@ -14,12 +15,8 @@ type ProposalCardProps = {
 }
 
 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>
diff --git a/hooks/useProposalVotes.tsx b/hooks/useProposalVotes.tsx
new file mode 100644
index 0000000000..d00bab4fe1
--- /dev/null
+++ b/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,
+  }
+}
diff --git a/pages/dao/[symbol]/proposal/[pk].tsx b/pages/dao/[symbol]/proposal/[pk].tsx
index c3a236c6a9..362cdde07a 100644
--- a/pages/dao/[symbol]/proposal/[pk].tsx
+++ b/pages/dao/[symbol]/proposal/[pk].tsx
@@ -8,20 +8,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 })
 
@@ -60,21 +56,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>
                     </>
                   ) : (