Fixes for upvoting

src/app/governance/[id]/page.tsx

@@ -138,7 +138,7 @@ function ProposalChainData({ propData }: { propData: MergedProposalData }) {
         {stage === ProposalStage.Queued && <ProposalUpvoteButton proposalId={id} />}
         {stage === ProposalStage.Referendum && <ProposalVoteButtons proposalId={id} />}
         {expiryTimestamp && (
-          <div>{`Voting ends in ${getHumanReadableDuration(expiryTimestamp)}`}</div>
+          <div>{`Expires in ${getHumanReadableDuration(expiryTimestamp - Date.now())}`}</div>
         )}
         {stage >= ProposalStage.Referendum && <ProposalVoteChart propData={propData} />}
         {stage === ProposalStage.Referendum && <ProposalQuorumChart propData={propData} />}

src/config/consts.ts

@@ -17,6 +17,7 @@ export const MAX_NUM_GROUPS_VOTED_FOR = 10;
 // Governance
 export const PROPOSAL_V1_MAX_ID = 110; // Proposals before this use old vote events
 export const QUEUED_STAGE_EXPIRY_TIME = 2_419_200_000; // 4 weeks
+export const DEQUEUE_FREQUENCY = 86_400_000; // 1 day
 export const APPROVAL_STAGE_EXPIRY_TIME = 86_400_000; // 1 day
 export const EXECUTION_STAGE_EXPIRY_TIME = 259_200_000; // 3 days
 

src/features/governance/UpvoteForm.tsx

@@ -2,7 +2,10 @@ import { Form, Formik, FormikErrors } from 'formik';
 import { FormSubmitButton } from 'src/components/buttons/FormSubmitButton';
 import { ProposalFormDetails } from 'src/features/governance/components/ProposalFormDetails';
 import { useProposalQueue } from 'src/features/governance/hooks/useProposalQueue';
-import { useGovernanceVotingPower } from 'src/features/governance/hooks/useVotingStatus';
+import {
+  useGovernanceVotingPower,
+  useIsGovernanceUpVoting,
+} from 'src/features/governance/hooks/useVotingStatus';
 import { UpvoteFormValues, UpvoteRecord } from 'src/features/governance/types';
 import { getUpvoteTxPlan } from 'src/features/governance/votePlan';
 import { OnConfirmedFn } from 'src/features/transactions/types';
@@ -24,13 +27,14 @@ export function UpvoteForm({
 }) {
   const { address } = useAccount();
   const { queue } = useProposalQueue();
-  const { votingPower } = useGovernanceVotingPower();
+  const { isUpvoting } = useIsGovernanceUpVoting(address);
+  const { votingPower } = useGovernanceVotingPower(address);
 
   const { getNextTx, onTxSuccess } = useTransactionPlan<UpvoteFormValues>({
     createTxPlan: (v) => getUpvoteTxPlan(v, queue || [], votingPower || 0n),
     onPlanSuccess: (v, r) =>
       onConfirmed({
-        message: `Upvote successful`,
+        message: 'Upvote successful',
         receipt: r,
         properties: [{ label: 'Proposal', value: `#${v.proposalId}` }],
       }),
@@ -40,8 +44,8 @@ export function UpvoteForm({
   const onSubmit = (values: UpvoteFormValues) => writeContract(getNextTx(values));
 
   const validate = (values: UpvoteFormValues) => {
-    if (!address || !queue || !isNullish(votingPower)) return { amount: 'Form data not ready' };
-    return validateForm(values, queue);
+    if (!address || !queue || isNullish(votingPower)) return { amount: 'Form data not ready' };
+    return validateForm(values, queue, isUpvoting);
   };
 
   return (
@@ -58,7 +62,7 @@ export function UpvoteForm({
       {({ values }) => (
         <Form className="mt-4 flex flex-1 flex-col justify-between">
           <div className="space-y-3">
-            <ProposalFormDetails proposalId={values.proposalId} />
+            <ProposalFormDetails proposalId={values.proposalId} votingPower={votingPower} />
           </div>
           <FormSubmitButton isLoading={isLoading} loadingText={'Upvoting'}>
             Upvote
@@ -72,14 +76,17 @@ export function UpvoteForm({
 function validateForm(
   values: UpvoteFormValues,
   queue: UpvoteRecord[],
+  isUpvoting: boolean,
 ): FormikErrors<UpvoteFormValues> {
   const { proposalId } = values;
 
   if (!queue.find((p) => p.proposalId === proposalId)) {
     return { proposalId: 'Proposal ID not eligible' };
   }
 
-  // TODO enforce that account has not already upvoted
+  if (isUpvoting) {
+    return { proposalId: 'Account already upvoting' };
+  }
 
   return {};
 }

src/features/governance/components/ProposalCard.tsx

@@ -31,7 +31,7 @@ export function ProposalCard({ propData }: { propData: MergedProposalData }) {
   const endTimeValue = timestampExecuted
     ? `Executed ${getHumanReadableTimeString(timestampExecuted)}`
     : expiryTimestamp
-      ? `Expires ${getHumanReadableDuration(expiryTimestamp)}`
+      ? `Expires ${getHumanReadableDuration(expiryTimestamp - Date.now())}`
       : undefined;
 
   const sum = bigIntSum(Object.values(votes || {})) || 1n;

src/features/governance/components/ProposalFormDetails.tsx

@@ -1,7 +1,14 @@
+import { formatNumberString } from 'src/components/numbers/Amount';
 import { useGovernanceProposal } from 'src/features/governance/hooks/useGovernanceProposals';
 import { trimToLength } from 'src/utils/strings';
 
-export function ProposalFormDetails({ proposalId }: { proposalId: number }) {
+export function ProposalFormDetails({
+  proposalId,
+  votingPower,
+}: {
+  proposalId: number;
+  votingPower?: bigint;
+}) {
   const propData = useGovernanceProposal(proposalId);
   const { proposal, metadata } = propData || {};
   const proposedTimeValue = proposal?.timestamp
@@ -13,6 +20,9 @@ export function ProposalFormDetails({ proposalId }: { proposalId: number }) {
     <>
       <h3>{`Proposal ID: #${proposalId} ${cgpId}`}</h3>
       {metadata && <p className="text-sm">{trimToLength(metadata.title, 35)}</p>}
+      {votingPower && (
+        <p className="text-sm">{`Voting power: ${formatNumberString(votingPower, 2, true)}`}</p>
+      )}
       {proposedTimeValue && (
         <div className="text-sm text-taupe-600">{`Proposed ${proposedTimeValue}`}</div>
       )}

src/features/governance/components/ProposalVoteButtons.tsx

@@ -2,6 +2,7 @@ import clsx from 'clsx';
 import { SolidButton } from 'src/components/buttons/SolidButton';
 import { HelpIcon } from 'src/components/icons/HelpIcon';
 import { formatNumberString } from 'src/components/numbers/Amount';
+import { useQueueHasReadyProposals } from 'src/features/governance/hooks/useProposalQueue';
 import {
   useGovernanceVoteRecord,
   useGovernanceVotingPower,
@@ -12,6 +13,8 @@ import { useTransactionModal } from 'src/features/transactions/TransactionModal'
 import { useAccount } from 'wagmi';
 
 export function ProposalUpvoteButton({ proposalId }: { proposalId?: number }) {
+  const { hasReadyProposals } = useQueueHasReadyProposals();
+
   const showTxModal = useTransactionModal(TransactionFlowType.Upvote, { proposalId });
 
   return (
@@ -23,7 +26,14 @@ export function ProposalUpvoteButton({ proposalId }: { proposalId?: number }) {
       <SolidButton
         className="btn-neutral w-full"
         onClick={() => showTxModal()}
+        disabled={hasReadyProposals}
       >{`➕ Upvote`}</SolidButton>
+      {hasReadyProposals && (
+        <p className="max-w-[20rem] text-xs text-gray-600">
+          Upvoting is disabled while there are queued proposals ready for approval. Please check
+          again later.
+        </p>
+      )}
     </>
   );
 }

src/features/governance/components/ProposalVoteChart.tsx

@@ -24,7 +24,7 @@ export function ProposalVoteChart({ propData }: { propData: MergedProposalData }
           acc[v] = {
             label: '',
             value: fromWei(votes?.[v] || 0n),
-            percentage: percent(votes?.[v] || 0n, totalVotes),
+            percentage: percent(votes?.[v] || 0n, totalVotes || 1n),
             color: VoteToColor[v],
           };
           return acc;

src/features/governance/hooks/useGovernanceProposals.ts

@@ -85,7 +85,8 @@ async function fetchGovernanceProposals(publicClient: PublicClient): Promise<Pro
   }
 
   const [queuedIds, queuedUpvotes] = queued.result;
-  const dequeuedIds = dequeued.result;
+  // Filter out queues with id of 0, not sure why they are included
+  const dequeuedIds = dequeued.result.filter((id: bigint) => !!id);
   const allIdsAndUpvotes = [
     ...queuedIds.map((id, i) => ({ id, upvotes: queuedUpvotes[i] })),
     ...dequeuedIds.map((id) => ({ id, upvotes: 0n })),

src/features/governance/hooks/useProposalQueue.ts

@@ -1,7 +1,9 @@
 import { governanceABI } from '@celo/abis';
 import { useToastError } from 'src/components/notifications/useToastError';
+import { DEQUEUE_FREQUENCY } from 'src/config/consts';
 import { Addresses } from 'src/config/contracts';
-import { UpvoteRecord } from 'src/features/governance/types';
+import { useGovernanceProposals } from 'src/features/governance/hooks/useGovernanceProposals';
+import { ProposalStage, UpvoteRecord } from 'src/features/governance/types';
 import { useReadContract } from 'wagmi';
 
 // Returns the upvote records for queued governance proposals
@@ -21,7 +23,7 @@ export function useProposalQueue() {
   if (data) {
     const ids = data[0];
     const upvotes = data[1];
-    queue = ids.map((id, i) => ({ proposalId: Number(id), upvotes: upvotes[i] || 0n }));
+    queue = ids.map((id, i) => ({ proposalId: Number(id), upvotes: BigInt(upvotes[i] || 0n) }));
   }
 
   return {
@@ -52,3 +54,20 @@ export function useProposalDequeue() {
     isLoading,
   };
 }
+
+// Checks if the queue has proposals that are ready to be dequeued
+// This is important because currently, upvote txs don't work in this scenario
+export function useQueueHasReadyProposals() {
+  const { proposals, isLoading } = useGovernanceProposals();
+
+  const readyQueuedProposals = proposals?.filter(
+    (p) =>
+      p.proposal?.stage === ProposalStage.Queued &&
+      Date.now() - p.proposal?.timestamp > DEQUEUE_FREQUENCY,
+  );
+
+  return {
+    isLoading,
+    hasReadyProposals: !!readyQueuedProposals?.length,
+  };
+}

src/features/governance/hooks/useVotingStatus.ts

@@ -29,6 +29,39 @@ export function useIsGovernanceVoting(address?: Address) {
   };
 }
 
+export function useIsGovernanceUpVoting(address?: Address) {
+  const { data, isError, isLoading, error } = useReadContract({
+    address: Addresses.Governance,
+    abi: governanceABI,
+    functionName: 'getUpvoteRecord',
+    args: [address || ZERO_ADDRESS],
+    query: {
+      enabled: !!address,
+      staleTime: 1 * 60 * 1000, // 1 minute
+    },
+  });
+
+  const { isUpvoting, upvoteRecord } = useMemo(() => {
+    if (!data || !data[0]) return { isUpvoting: false, upvoteRecord: undefined };
+    return {
+      isUpvoting: true,
+      upvoteRecord: {
+        proposalId: Number(data[0]),
+        upvotes: data[1],
+      },
+    };
+  }, [data]);
+
+  useToastError(error, 'Error fetching upvoting status');
+
+  return {
+    isUpvoting,
+    upvoteRecord,
+    isError,
+    isLoading,
+  };
+}
+
 export function useGovernanceVoteRecord(address?: Address, proposalId?: number) {
   const { dequeue } = useProposalDequeue();
 

src/features/governance/votePlan.ts

@@ -8,7 +8,6 @@ import {
 } from 'src/features/governance/types';
 import { TxPlan } from 'src/features/transactions/types';
 import { logger } from 'src/utils/logger';
-import { deepCopy } from 'src/utils/objects';
 
 export function getVoteTxPlan(values: VoteFormValues, dequeued: number[]): TxPlan {
   const { proposalId, vote } = values;
@@ -50,15 +49,25 @@ export function getUpvoteTxPlan(
 }
 
 // Based on https://github.com/celo-org/developer-tooling/blob/ae51ca8851e6684d372f976dd8610ddf502a266b/packages/sdk/contractkit/src/wrappers/Governance.ts#L765
+// TODO this fails when there are queued proposals that are ready to be de-queued
+// See dequeueProposalsIfReady in governance.sol
 function lesserAndGreaterAfterUpvote(
   proposalId: number,
   queue: UpvoteRecord[],
   votingPower: bigint,
 ): { lesserID: number; greaterID: number } {
   const proposalIndex = queue.findIndex((p) => p.proposalId === proposalId);
-  const newQueue = deepCopy(queue);
-  newQueue[proposalIndex].upvotes += votingPower;
-  newQueue.sort((a, b) => (a.upvotes > b.upvotes ? 1 : -1));
+  const newQueue = [...queue];
+  newQueue[proposalIndex] = {
+    proposalId,
+    upvotes: queue[proposalIndex].upvotes + votingPower,
+  };
+  // Sort in ascending order by upvotes
+  newQueue.sort((a, b) => {
+    if (a === b) return 0;
+    if (a.upvotes > b.upvotes) return 1;
+    else return -1;
+  });
   const newIndex = newQueue.findIndex((p) => p.proposalId === proposalId);
   return {
     lesserID: newIndex === 0 ? 0 : newQueue[newIndex - 1].proposalId,