From 4042b35b5afb3d42096cbd61aa535cef5c0958d0 Mon Sep 17 00:00:00 2001
From: Zeke Medley <zekemedley@gmail.com>
Date: Mon, 28 Mar 2022 17:08:31 -0700
Subject: [PATCH] Allow voting abstain on proposals.

---
 apps/dapp/components/ProposalDetails.tsx | 108 ++++++++++++++---------
 1 file changed, 65 insertions(+), 43 deletions(-)

diff --git a/apps/dapp/components/ProposalDetails.tsx b/apps/dapp/components/ProposalDetails.tsx
index a505fe37c0..61e9e7cc1a 100644
--- a/apps/dapp/components/ProposalDetails.tsx
+++ b/apps/dapp/components/ProposalDetails.tsx
@@ -16,6 +16,7 @@ import {
   ExternalLinkIcon,
   EyeIcon,
   EyeOffIcon,
+  MinusIcon,
   SparklesIcon,
   XIcon,
 } from '@heroicons/react/outline'
@@ -65,7 +66,7 @@ import { CosmosMessageDisplay } from './CosmosMessageDisplay'
 import { getEnd } from './ProposalList'
 
 function executeProposalVote(
-  vote: 'yes' | 'no',
+  vote: 'yes' | 'no' | 'abstain',
   id: number,
   contractAddress: string,
   signingClient: SigningCosmWasmClient | null,
@@ -148,6 +149,7 @@ function LoadingButton() {
 function ProposalVoteButtons({
   yesCount,
   noCount,
+  abstainCount,
   proposalId,
   contractAddress,
   voted,
@@ -156,6 +158,7 @@ function ProposalVoteButtons({
 }: {
   yesCount: string
   noCount: string
+  abstainCount: string
   proposalId: number
   contractAddress: string
   voted: boolean
@@ -196,15 +199,17 @@ function ProposalVoteButtons({
     position,
     children,
   }: {
-    position: 'yes' | 'no'
+    position: 'yes' | 'no' | 'abstain'
     children: ReactNode
   }) => (
     <button
-      className={
-        'btn btn-sm btn-outline normal-case border-base-300 shadow w-36 font-normal rounded-md px-1' +
-        (position === 'yes' ? ' hover:bg-green-500' : ' hover:bg-red-500') +
-        (ready ? '' : ' btn-disabled bg-base-300')
-      }
+      className={`btn btn-sm btn-outline normal-case border-base-300 shadow w-36 font-normal rounded-md px-1 ${
+        position === 'yes'
+          ? ' hover:bg-green-500 hover:border-green-500'
+          : position === 'no'
+          ? ' hover:bg-red-500 hover:border-red-500'
+          : ' hover:bg-primary hover:border-primary'
+      } ${ready ? '' : ' btn-disabled bg-base-300'}`}
       onClick={() =>
         executeProposalVote(
           position,
@@ -238,6 +243,11 @@ function ProposalVoteButtons({
           No
           <p className="text-secondary ml-2">{noCount}</p>
         </VoteButton>
+        <VoteButton position="abstain">
+          <MinusIcon className="w-4 h-4 inline mr-2" />
+          Abstain
+          <p className="text-secondary ml-2">{abstainCount}</p>
+        </VoteButton>
       </div>
     </div>
   )
@@ -355,6 +365,14 @@ export function ProposalDetailsSidebar({
           tokenDecimals
         )
   )
+  const abstainVotes = Number(
+    multisig
+      ? proposalTally?.votes.abstain
+      : convertMicroDenomToDenomWithDecimals(
+          proposalTally?.votes.abstain ?? 0,
+          tokenDecimals
+        )
+  )
   const totalWeight = Number(
     multisig
       ? proposalTally.total_weight
@@ -365,7 +383,7 @@ export function ProposalDetailsSidebar({
   )
 
   const turnoutPercent = (
-    ((yesVotes + noVotes) / totalWeight) *
+    ((yesVotes + noVotes) / (totalWeight - abstainVotes)) *
     100
   ).toLocaleString(undefined, localeOptions)
   const yesPercent = ((yesVotes / totalWeight) * 100).toLocaleString(
@@ -446,6 +464,8 @@ export function ProposalDetailsSidebar({
         <div className="col-span-2">
           {noVotes} <p className="text-secondary inline">({noPercent}%)</p>
         </div>
+        <p className="text-secondary">Abstain votes</p>
+        <div className="col-span-2">{abstainVotes}</div>
         <p className="text-secondary">Threshold</p>
         <div className="col-span-2">{threshold}</div>
         {quorum && (
@@ -595,6 +615,14 @@ export function ProposalDetails({
           tokenDecimals
         )
   )
+  const abstainVotes = Number(
+    multisig
+      ? proposalTally?.votes.abstain
+      : convertMicroDenomToDenomWithDecimals(
+          proposalTally?.votes.abstain ?? 0,
+          tokenDecimals
+        )
+  )
 
   const decodedMessages = decodeMessages(proposal.msgs)
 
@@ -603,46 +631,40 @@ export function ProposalDetails({
       <div className="max-w-prose">
         <h1 className="text-4xl font-semibold">{proposal.title}</h1>
       </div>
-      {actionLoading && (
-        <div className="mt-3">
-          <LoadingButton />
-        </div>
-      )}
-      {!actionLoading && proposal.status === 'open' && (
-        <div className="mt-3 flex flex-row flex-wrap items-center gap-3">
-          {tokenBalancesLoading ? (
+      {actionLoading ||
+        (tokenBalancesLoading && (
+          <div className="mt-3">
             <LoadingButton />
-          ) : (
-            <>
-              <ProposalVoteButtons
-                yesCount={yesVotes.toString()}
-                noCount={noVotes.toString()}
-                proposalId={proposalId}
-                contractAddress={contractAddress}
-                voted={voted}
-                setLoading={setActionLoading}
-                multisig={!!multisig}
-              />
-              <ProposalVoteStatus
-                contractAddress={contractAddress}
-                proposalId={proposalId}
-              />
-            </>
-          )}
-        </div>
-      )}
-      {!actionLoading && proposal.status === 'passed' && (
-        <div className="mt-3">
-          {tokenBalancesLoading ? (
-            <LoadingButton />
-          ) : (
-            <ProposalExecuteButton
+          </div>
+        ))}
+      {!actionLoading && proposal.status === 'open' && (
+        <div className="mt-3 flex flex-col flex-wrap justify-center gap-3">
+          <>
+            <ProposalVoteStatus
+              contractAddress={contractAddress}
+              proposalId={proposalId}
+            />
+            <ProposalVoteButtons
+              yesCount={yesVotes.toString()}
+              noCount={noVotes.toString()}
+              abstainCount={abstainVotes.toString()}
               proposalId={proposalId}
               contractAddress={contractAddress}
-              member={member.member}
+              voted={voted}
               setLoading={setActionLoading}
+              multisig={!!multisig}
             />
-          )}
+          </>
+        </div>
+      )}
+      {!actionLoading && proposal.status === 'passed' && (
+        <div className="mt-3">
+          <ProposalExecuteButton
+            proposalId={proposalId}
+            contractAddress={contractAddress}
+            member={member.member}
+            setLoading={setActionLoading}
+          />
         </div>
       )}
       <div className="py-4">