Merge pull request #66 from AudiusProject/jowlee-quorum-req

Add quorum to proposal
AudiusProject · Oct 9, 2023 · 0727bc2 · 0727bc2
1 parent 5b84ff8
commit 0727bc2
Show file tree

Hide file tree

Showing 7 changed files with 119 additions and 5 deletions.
diff --git a/packages/protocol-dashboard/package-lock.json b/packages/protocol-dashboard/package-lock.json
diff --git a/packages/protocol-dashboard/package.json b/packages/protocol-dashboard/package.json
@@ -5,7 +5,7 @@
   "dependencies": {
     "3box": "^1.22.2",
     "@apollo/client": "^3.3.7",
-    "@audius/libs": "1.1.13",
+    "@audius/libs": "^1.1.14",
     "@audius/stems": "0.3.4",
     "@reduxjs/toolkit": "^1.4.0",
     "chart.js": "^2.9.3",

diff --git a/packages/protocol-dashboard/src/components/ProposalHero/ProposalHero.module.css b/packages/protocol-dashboard/src/components/ProposalHero/ProposalHero.module.css
@@ -127,3 +127,54 @@
   justify-content: center;
   min-height: 400px;
 }
+
+.quorumContainer {
+  margin-top: 8px;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  text-transform: uppercase;
+  font-weight: var(--font-bold);
+  font-size: var(--font-xs);
+  line-height: 15px;
+  text-align: center;
+  letter-spacing: 1px;
+}
+
+.quorumValue {
+  margin: 0px 8px;
+}
+
+
+.quorumStatusContainer {
+  font-weight: var(--font-demi-bold);
+  font-size: var(--font-l);
+  line-height: 22px;
+  color: var(--neutral);
+  text-transform: capitalize;
+  display: inline-flex;
+  margin-top: 16px;
+  align-items: center;
+}
+
+.circle {
+  height: 24px;
+  width: 24px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 8px;
+}
+
+.circle.met {
+  background-color: #6BCF63;
+}
+
+.circle.notMet {
+  background-color: var(--neutral-light-4);
+}
+
+.icon path {
+  fill: var(--static-white);
+}
diff --git a/packages/protocol-dashboard/src/components/ProposalHero/ProposalHero.tsx b/packages/protocol-dashboard/src/components/ProposalHero/ProposalHero.tsx
@@ -26,11 +26,13 @@ import {
 import { useAccountUser } from 'store/account/hooks'
 import Tooltip, { Position } from 'components/Tooltip'
 import { createStyles } from 'utils/mobile'
+import { IconCheck, IconRemove } from '@audius/stems'
 
 import desktopStyles from './ProposalHero.module.css'
 import mobileStyles from './ProposalHeroMobile.module.css'
 import Loading from 'components/Loading'
 import getActiveStake from 'utils/activeStake'
+import clsx from 'clsx'
 
 const styles = createStyles({ desktopStyles, mobileStyles })
 
@@ -39,7 +41,11 @@ const messages = {
   voteAgainst: 'Vote Against',
   timeRemaining: 'Est. Time Remaining',
   targetBlock: 'Target Block',
-  notVoted: 'NOT-VOTED'
+  notVoted: 'NOT-VOTED',
+  voted: 'VOTED',
+  quorum: 'QUORUM',
+  quorumMet: 'Quorum Met',
+  quorumNotMet: 'Quorum Not Met'
 }
 
 type VoteCTAProps = {
@@ -183,6 +189,13 @@ const ProposalHero: React.FC<ProposalHeroProps> = ({
     </StandaloneBox>
   )
 
+  const totalMagnitudeVoted = proposal
+    ? proposal?.voteMagnitudeYes.add(proposal?.voteMagnitudeNo)
+    : Utils.toBN('0')
+  const hasMetQuorum = proposal
+    ? totalMagnitudeVoted.gte(proposal.quorum)
+    : false
+
   return (
     <Paper className={styles.container}>
       {proposal && proposal.proposer ? (
@@ -210,6 +223,22 @@ const ProposalHero: React.FC<ProposalHeroProps> = ({
                   </div>
                 )}
               </div>
+              {isActive && hasMetQuorum && (
+                <div className={styles.quorumStatusContainer}>
+                  <div className={clsx(styles.circle, styles.met)}>
+                    <IconCheck className={styles.icon} />
+                  </div>
+                  {messages.quorumMet}
+                </div>
+              )}
+              {isActive && !hasMetQuorum && (
+                <div className={styles.quorumStatusContainer}>
+                  <div className={clsx(styles.circle, styles.notMet)}>
+                    <IconRemove className={styles.icon} />
+                  </div>
+                  {messages.quorumNotMet}
+                </div>
+              )}
             </div>
             <div className={styles.stats}>
               <VoteMeter
@@ -223,6 +252,25 @@ const ProposalHero: React.FC<ProposalHeroProps> = ({
               >
                 {`${formatShortAud(amountAbstained)} ${messages.notVoted}`}
               </Tooltip>
+              {isActive && (
+                <div className={styles.quorumContainer}>
+                  <Tooltip
+                    text={formatWei(totalMagnitudeVoted)}
+                    position={Position.BOTTOM}
+                    className={styles.quorumValue}
+                  >
+                    {`${formatShortAud(totalMagnitudeVoted)} ${messages.voted}`}
+                  </Tooltip>
+                  {' / '}
+                  <Tooltip
+                    text={formatWei(proposal.quorum)}
+                    position={Position.BOTTOM}
+                    className={styles.quorumValue}
+                  >
+                    {`${formatShortAud(proposal.quorum)} ${messages.quorum}`}
+                  </Tooltip>
+                </div>
+              )}
             </div>
           </div>
         </>

diff --git a/packages/protocol-dashboard/src/services/Audius/governance/governance.ts b/packages/protocol-dashboard/src/services/Audius/governance/governance.ts
@@ -222,6 +222,14 @@ export default class Governance {
     }))
   }
 
+  async getProposalQuorum(proposalId: number): Promise<BN> {
+    await this.aud.hasPermissions()
+    const quorumAmount: BN = await this.getContract().calculateQuorum(
+      proposalId
+    )
+    return quorumAmount
+  }
+
   /* -------------------- Governance Write -------------------- */
 
   async submitProposal(args: {

diff --git a/packages/protocol-dashboard/src/store/cache/proposals/hooks.ts b/packages/protocol-dashboard/src/store/cache/proposals/hooks.ts
@@ -60,12 +60,14 @@ export function fetchActiveProposals(): ThunkAction<
       await Promise.all(
         proposalIds.map(async id => {
           const proposal = await aud.Governance.getProposalById(id)
+          const quorum = await aud.Governance.getProposalQuorum(id)
           const {
             name,
             description
           } = await aud.Governance.getProposalSubmissionById(id)
           proposal.name = name
           proposal.description = description
+          proposal.quorum = quorum
           return proposal
         })
       )
@@ -87,8 +89,10 @@ export function fetchAllProposals(): ThunkAction<
       proposalEvents.map(async (p: ProposalEvent) => {
         const { proposalId, description, name } = p
         const proposal = await aud.Governance.getProposalById(proposalId)
+        const quorum = await aud.Governance.getProposalQuorum(proposalId)
         proposal.description = description
         proposal.name = name
+        proposal.quorum = quorum
         if (proposal.outcome !== Outcome.InProgress) {
           const evaluationBlockNumber = await aud.Governance.getProposalEvaluationBlock(
             proposalId
@@ -108,12 +112,14 @@ export function fetchProposal(
 ): ThunkAction<void, AppState, Audius, Action<string>> {
   return async (dispatch, getState, aud) => {
     const proposal = await aud.Governance.getProposalById(proposalId)
+    const quorum = await aud.Governance.getProposalQuorum(proposalId)
     const {
       name,
       description
     } = await aud.Governance.getProposalSubmissionById(proposalId)
     proposal.name = name
     proposal.description = description
+    proposal.quorum = quorum
     if (proposal.outcome !== Outcome.InProgress) {
       const evaluationBlockNumber = await aud.Governance.getProposalEvaluationBlock(
         proposalId

diff --git a/packages/protocol-dashboard/src/types.ts b/packages/protocol-dashboard/src/types.ts
@@ -151,6 +151,7 @@ export type Proposal = {
   name?: string
   description?: string
   evaluatedBlock?: Block
+  quorum: BigNumber
 }
 
 export type ProposalEvent = {