Dao 721 Implemented quorum part in the Votes Column (#242)

* DAO-721 Implemented quorum column

* Implemented memoized latest proposals table to speed up UI.

* Quorum will have no decimals place per Product.

* Quorum percentage will be integer only, no decimals.

src/app/proposals/LatestProposalsTable.tsx

@@ -8,7 +8,7 @@ import { ProposalsContextProvider } from '@/app/proposals/ProposalsContext'
 import { SentimentColumn } from '@/app/proposals/SentimentColumn'
 import { VotesColumn } from '@/app/proposals/VotesColumn'
 import { ProposalNameColumn } from '@/app/proposals/ProposalNameColumn'
-import { ReactNode, useMemo } from 'react'
+import { ReactNode, useMemo, memo } from 'react'
 import { TimeRemainingColumn } from '@/app/proposals/TimeRemainingColumn'
 
 interface LatestProposalsTableProps {
@@ -33,7 +33,7 @@ const latestProposalsTransformer = (proposals: ReturnType<typeof getEventArgumen
     }
   })
 
-export const LatestProposalsTable = ({ latestProposals }: LatestProposalsTableProps) => {
+const LatestProposalsTable = ({ latestProposals }: LatestProposalsTableProps) => {
   const latestProposalsMapped = useMemo(
     // @ts-ignore
     () => latestProposals.map(getEventArguments),
@@ -60,3 +60,5 @@ export const LatestProposalsTable = ({ latestProposals }: LatestProposalsTablePr
     </div>
   )
 }
+
+export const LatestProposalsTableMemoized = memo(LatestProposalsTable)

src/app/proposals/VotesColumn.tsx

@@ -1,9 +1,42 @@
 import { useProposalContext } from '@/app/proposals/ProposalsContext'
 import { toFixed } from '@/lib/utils'
+import { useReadContract } from 'wagmi'
+import { GovernorAbi } from '@/lib/abis/Governor'
+import { GOVERNOR_ADDRESS } from '@/lib/constants'
+import { formatBalanceToHuman } from '@/app/user/Balances/balanceUtils'
 
 export const VotesColumn = () => {
-  const { proposalVotes } = useProposalContext()
-
+  const { proposalVotes, blockNumber } = useProposalContext()
   const votes = proposalVotes.reduce((prev, next) => Number(next) + prev, 0)
-  return <p>{toFixed(votes)}</p>
+
+  const { data: quorumAtSnapshot } = useReadContract({
+    abi: GovernorAbi,
+    address: GOVERNOR_ADDRESS,
+    functionName: 'quorum',
+    args: [BigInt(blockNumber)],
+  })
+  let quorum = '-'
+  let percentage = 0
+
+  if (quorumAtSnapshot) {
+    quorum = formatBalanceToHuman(quorumAtSnapshot)
+    // Calculate percentage of votes relative to quorum
+    percentage = (votes / Number(quorum)) * 100
+  }
+
+  // Determine the color based on percentage
+  let colorClass = 'text-st-error' // Default to RED (0-49%)
+  if (percentage >= 100) {
+    colorClass = 'text-st-success'
+  } else if (percentage >= 50) {
+    colorClass = 'text-st-info'
+  }
+  return (
+    <>
+      <p className={colorClass}>
+        {toFixed(votes)} ({Math.floor(percentage)}%)
+      </p>
+      <p>Quorum: {Math.floor(Number(quorum))}</p>
+    </>
+  )
 }

src/app/proposals/page.tsx

@@ -1,7 +1,7 @@
 'use client'
 import { HeaderSection } from '@/app/proposals/HeaderSection'
 import { useFetchLatestProposals } from '@/app/proposals/hooks/useFetchLatestProposals'
-import { LatestProposalsTable } from '@/app/proposals/LatestProposalsTable'
+import { LatestProposalsTableMemoized } from '@/app/proposals/LatestProposalsTable'
 import { MainContainer } from '@/components/MainContainer/MainContainer'
 import { MetricsCard } from '@/components/MetricsCard'
 import { Popover } from '@/components/Popover'
@@ -11,11 +11,13 @@ import { toFixed } from '@/lib/utils'
 import { useRouter } from 'next/navigation'
 import { FaRegQuestionCircle } from 'react-icons/fa'
 import { useVotingPower } from './hooks/useVotingPower'
+import { useMemo } from 'react'
 
 export default function Proposals() {
   const { votingPower, canCreateProposal, threshold } = useVotingPower()
   const { latestProposals } = useFetchLatestProposals()
 
+  const memoizedProposals = useMemo(() => latestProposals, [latestProposals.length])
   return (
     <MainContainer>
       <TxStatusMessage messageType="proposal" />
@@ -34,7 +36,7 @@ export default function Proposals() {
           <DelegatedTable />
           <ReceivedDelegationTable />
         </div> */}
-        <LatestProposalsTable latestProposals={latestProposals} />
+        <LatestProposalsTableMemoized latestProposals={memoizedProposals} />
       </div>
     </MainContainer>
   )