update veto check to use existing query

Author: biwasxyz

src/components/proposals/VoteStatusChart.tsx

@@ -1,10 +1,11 @@
 "use client";
 
-import { useState, useCallback } from "react";
+import { useState, useCallback, useMemo } from "react";
 import { TokenBalance } from "@/components/reusables/BalanceDisplay";
 import { Button } from "@/components/ui/button";
 import { RefreshCw, AlertCircle } from "lucide-react";
 import { useProposalVote } from "@/hooks/useProposalVote";
+import { safeNumberFromBigInt } from "@/utils/proposal";
 import type { Proposal, ProposalWithDAO } from "@/types";
 
 interface VoteStatusChartProps {
@@ -112,6 +113,44 @@ const VoteStatusChart = ({
 
   // const isRefreshingAny = localRefreshing || refreshing;
 
+  // Calculate progress bar size based on quorum
+  const progressBarCalculations = useMemo(() => {
+    if (!proposal || !calculations) return null;
+
+    const quorumPercentage = safeNumberFromBigInt(proposal.voting_quorum);
+    const liquidTokensNum = calculations.liquidTokensNum;
+
+    // Calculate quorum amount in tokens
+    const quorumAmount = (liquidTokensNum * quorumPercentage) / 100;
+
+    // Bar width is quorum + 10%, or total votes if exceeded
+    const barWidth = Math.max(quorumAmount * 1.1, calculations.totalVotes);
+
+    // Calculate percentages based on the bar width
+    const votesForPercentage = (calculations.votesForNum / barWidth) * 100;
+    const votesAgainstPercentage =
+      (calculations.votesAgainstNum / barWidth) * 100;
+    const quorumLinePercentage = (quorumAmount / barWidth) * 100;
+
+    return {
+      votesForPercentage,
+      votesAgainstPercentage,
+      quorumLinePercentage,
+      quorumAmount,
+      barWidth,
+    };
+  }, [proposal, calculations]);
+
+  if (!progressBarCalculations) {
+    return (
+      <div className="flex items-center justify-center p-4">
+        <span className="text-sm text-muted-foreground">
+          No vote data available
+        </span>
+      </div>
+    );
+  }
+
   // Main vote display
   return (
     <div className="space-y-2">
@@ -122,17 +161,29 @@ const VoteStatusChart = ({
           <div
             className="absolute left-0 top-0 h-full bg-green-500/80 transition-all duration-500 ease-out rounded-l-full"
             style={{
-              width: `${Math.min(calculations.barPercentageFor, 100)}%`,
+              width: `${Math.min(progressBarCalculations.votesForPercentage, 100)}%`,
             }}
           />
           {/* Votes against (red) */}
           <div
             className="absolute top-0 h-full bg-red-500/80 transition-all duration-500 ease-out"
             style={{
-              width: `${Math.min(calculations.barPercentageAgainst, 100)}%`,
-              left: `${Math.min(calculations.barPercentageFor, 100)}%`,
+              width: `${Math.min(progressBarCalculations.votesAgainstPercentage, 100)}%`,
+              left: `${Math.min(progressBarCalculations.votesForPercentage, 100)}%`,
             }}
           />
+          {/* Quorum line indicator */}
+          <div
+            className="absolute top-0 bottom-0 w-0.5 bg-primary z-10"
+            style={{
+              left: `${Math.min(progressBarCalculations.quorumLinePercentage, 100)}%`,
+            }}
+          >
+            <div
+              className="absolute -top-1 w-3 h-3 bg-primary rounded-sm border-2 border-background"
+              style={{ left: "-5px" }}
+            />
+          </div>
         </div>
       </div>
 

src/hooks/useVetoCheck.ts

@@ -1,7 +1,6 @@
-import { useQuery } from "@tanstack/react-query";
-import { fetchProposalVetos } from "@/services/veto.service";
 import type { Proposal, ProposalWithDAO } from "@/types";
 import { useMemo } from "react";
+import { useProposalVetos } from "@/hooks/useVetos";
 
 interface UseVetoCheckProps {
   proposal: Proposal | ProposalWithDAO;
@@ -24,23 +23,7 @@ export function useVetoCheck({
   proposal,
   votesForNum = 0,
 }: UseVetoCheckProps): VetoCheckResult {
-  // Fetch vetos for this proposal
-  const {
-    data: vetos,
-    isLoading,
-    error,
-  } = useQuery({
-    queryKey: ["proposalVetos", proposal.id],
-    queryFn: async () => {
-      if (!proposal.id) {
-        return [];
-      }
-      return await fetchProposalVetos(proposal.id);
-    },
-    enabled: !!proposal.id,
-    staleTime: 30000, // 30 seconds
-    retry: 2,
-  });
+  const { data: vetos, isLoading, error } = useProposalVetos(proposal.id || "");
 
   // Calculate total veto amount
   const vetoCalculations = useMemo(() => {