add veto check and veto badge in proposal card and details

Author: biwasxyz

src/components/proposals/ProposalCard.tsx

@@ -42,6 +42,7 @@ export default function ProposalCard({
     error: hasVoteDataError,
     refreshVoteData,
     isLoading: isLoadingVotes,
+    vetoCheck,
   } = useProposalVote({
     proposal,
     contractPrincipal: proposal.contract_principal,
@@ -250,6 +251,13 @@ export default function ProposalCard({
                     </>
                   )}
 
+                {/* Veto Override Warning Badge */}
+                {vetoCheck?.vetoExceedsForVote && !isActive && (
+                  <div className="px-2 py-0.5 rounded-sm text-xs font-medium border flex-shrink-0 bg-destructive/10 border-destructive/20">
+                    <span className="text-destructive">⚠️ Vetoed</span>
+                  </div>
+                )}
+
                 <div className="flex items-center gap-1 text-xs text-foreground/75 flex-shrink-0">
                   <Clock className="h-3 w-3 flex-shrink-0" />
                   <span className="whitespace-nowrap">

src/components/proposals/VotesTable.tsx

@@ -170,9 +170,9 @@ const VotesTable = ({ proposalId, limit }: VotesTableProps) => {
             </tr>
           </thead>
           <tbody>
-            {displayedVotes.map((vote, index) => (
+            {displayedVotes.map((vote) => (
               <tr
-                key={vote.tx_id || index}
+                key={vote.id}
                 className="border-b border-border/50 hover:bg-muted/30 transition-colors"
               >
                 {/* Voter */}

src/components/proposals/VotingProgressChart.tsx

@@ -57,6 +57,7 @@ const VotingProgressChart = ({
     error: voteDataError,
     hasData,
     refreshVoteData,
+    vetoCheck,
   } = useProposalVote({
     proposal,
     contractPrincipal,
@@ -172,6 +173,17 @@ const VotingProgressChart = ({
   const getResultStatus = () => {
     const StatusIcon = statusConfig.icon;
 
+    // Check if veto amount exceeds For votes - this overrides other status
+    if (vetoCheck.vetoExceedsForVote && !isActive) {
+      return {
+        status: "Failed",
+        color: "text-destructive",
+        icon: <XCircle className="h-4 w-4" />,
+        bgColor: "bg-destructive/10 border-destructive/20",
+        reason: "Veto amount exceeds For votes",
+      };
+    }
+
     switch (status) {
       case "DRAFT":
         return {
@@ -742,6 +754,13 @@ const VotingProgressChart = ({
                     />
                   </div>
 
+                  {/* Veto override message */}
+                  {resultStatus.reason && (
+                    <div className="text-destructive">
+                      ⚠️ {resultStatus.reason}
+                    </div>
+                  )}
+
                   {/* Additional status-specific information */}
                   {status === "EXECUTION_WINDOW" && (
                     <div className="text-accent-foreground">
@@ -760,7 +779,8 @@ const VotingProgressChart = ({
                   )}
                   {status === "FAILED" &&
                     enhancedCalculations.metQuorum &&
-                    enhancedCalculations.metThreshold && (
+                    enhancedCalculations.metThreshold &&
+                    !resultStatus.reason && (
                       <div className="text-destructive">
                         ⚠️ Failed despite meeting requirements
                       </div>

src/hooks/useProposalVote.ts

@@ -3,6 +3,7 @@ import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { fetchProposalVotes } from "@/services/vote.service";
 import { useProposalStatus } from "@/hooks/useProposalStatus";
 import { useSmartCacheBusting } from "@/hooks/useSmartCacheBusting";
+import { useVetoCheck } from "@/hooks/useVetoCheck";
 import type { Proposal, ProposalWithDAO } from "@/types";
 
 interface UseProposalVoteProps {
@@ -270,6 +271,12 @@ export function useProposalVote({
     return !voteDisplayData && primaryQuery.error;
   }, [voteDisplayData, primaryQuery.error]);
 
+  // Check if veto amount exceeds For votes
+  const vetoCheck = useVetoCheck({
+    proposal,
+    votesForNum: calculations?.votesForNum || 0,
+  });
+
   return {
     // Data
     voteDisplayData,
@@ -291,6 +298,9 @@ export function useProposalVote({
     // Raw data
     rawData: activeVoteData,
 
+    // Veto check
+    vetoCheck,
+
     // Debug info
     cacheInfo: {
       shouldAlwaysBustCache,

src/hooks/useVetoCheck.ts

@@ -0,0 +1,79 @@
+import { useQuery } from "@tanstack/react-query";
+import { fetchProposalVetos } from "@/services/veto.service";
+import type { Proposal, ProposalWithDAO } from "@/types";
+import { useMemo } from "react";
+
+interface UseVetoCheckProps {
+  proposal: Proposal | ProposalWithDAO;
+  votesForNum?: number;
+}
+
+interface VetoCheckResult {
+  totalVetoAmount: number;
+  rawTotalVetoAmount: string;
+  vetoExceedsForVote: boolean;
+  isLoading: boolean;
+  error: boolean;
+}
+
+/**
+ * Hook to check if veto amount exceeds the For votes
+ * Vetos are formatted the same way as votes (divided by 1e8)
+ */
+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,
+  });
+
+  // Calculate total veto amount
+  const vetoCalculations = useMemo(() => {
+    if (!vetos || vetos.length === 0) {
+      return {
+        totalVetoAmount: 0,
+        rawTotalVetoAmount: "0",
+        vetoExceedsForVote: false,
+      };
+    }
+
+    // Sum up all veto amounts
+    const totalRaw = vetos.reduce((sum, veto) => {
+      const amount = veto.amount ? parseFloat(veto.amount) : 0;
+      return sum + amount;
+    }, 0);
+
+    // Format veto amount the same way as votes (divide by 1e8)
+    const totalFormatted = totalRaw;
+
+    // Check if veto exceeds For votes
+    const vetoExceedsForVote = totalFormatted > votesForNum;
+
+    return {
+      totalVetoAmount: totalFormatted,
+      rawTotalVetoAmount: totalRaw.toString(),
+      vetoExceedsForVote,
+    };
+  }, [vetos, votesForNum]);
+
+  return {
+    ...vetoCalculations,
+    isLoading,
+    error: !!error,
+  };
+}