Merge pull request #723 from aibtcdev/1

display quorum and threshold in main card

Author: biwasxyz

src/components/proposals/ProposalCard.tsx

@@ -16,6 +16,8 @@ import { useProposalVote } from "@/hooks/useProposalVote";
 import { Button } from "@/components/ui/button";
 import { RefreshCw, AlertCircle } from "lucide-react";
 import { motion } from "framer-motion";
+import { safeNumberFromBigInt } from "@/utils/proposal";
+import { cn } from "@/lib/utils";
 
 interface ProposalCardProps {
   proposal: Proposal | ProposalWithDAO;
@@ -31,14 +33,16 @@ export default function ProposalCard({
   const router = useRouter();
 
   // Use the unified status system
-  const { statusConfig, isActive, isPassed } = useProposalStatus(proposal);
+  const { status, statusConfig, isActive } = useProposalStatus(proposal);
 
   // Use centralized vote hook for consistent data fetching
   const {
     voteDisplayData,
+    calculations,
     error: hasVoteDataError,
     refreshVoteData,
     isLoading: isLoadingVotes,
+    vetoCheck,
   } = useProposalVote({
     proposal,
     contractPrincipal: proposal.contract_principal,
@@ -90,6 +94,43 @@ export default function ProposalCard({
   // const liquidTokens = Number(proposal.liquid_tokens);
   const { totalVotes, hasVoteData } = voteSummary;
 
+  // Enhanced calculations for quorum and threshold display
+  const enhancedCalculations = useMemo(() => {
+    if (!calculations) return null;
+
+    const quorumPercentage = safeNumberFromBigInt(proposal.voting_quorum);
+    const thresholdPercentage = safeNumberFromBigInt(proposal.voting_threshold);
+
+    // Calculate if requirements are met
+    const metQuorum = calculations.participationRate >= quorumPercentage;
+    const metThreshold =
+      calculations.totalVotes > 0
+        ? calculations.approvalRate >= thresholdPercentage
+        : false;
+
+    return {
+      ...calculations,
+      quorumPercentage,
+      thresholdPercentage,
+      metQuorum,
+      metThreshold,
+    };
+  }, [calculations, proposal]);
+
+  // Helper function for status display
+  const getStatusText = (met: boolean, percentage?: number) => {
+    // If voting hasn't started (PENDING, DRAFT), show "Pending"
+    if (status === "PENDING" || status === "DRAFT") {
+      return "Pending";
+    }
+
+    if (isActive) {
+      return percentage !== undefined ? `${percentage.toFixed(1)}%` : "0%";
+    }
+
+    return met ? "Passed" : "Failed";
+  };
+
   // Memoize DAO info
   const daoInfo = useMemo(() => {
     const proposalWithDAO = proposal as ProposalWithDAO;
@@ -130,12 +171,93 @@ export default function ProposalCard({
                   ? `#${proposal.proposal_id}: ${proposal.title}`
                   : proposal.title}
               </h3>
-              <div className="flex items-center gap-2 sm:gap-3 mb-2">
+              <div className="flex flex-wrap items-center gap-2 mb-2">
                 <ProposalStatusBadge
                   proposal={proposal}
                   size="sm"
                   className="flex-shrink-0"
                 />
+
+                {/* Quorum and Threshold Badges */}
+                {enhancedCalculations &&
+                  statusConfig.label !== "Pending" &&
+                  statusConfig.label !== "Draft" && (
+                    <>
+                      {/* Quorum Badge */}
+                      <div
+                        className={cn(
+                          "px-2 py-0.5 rounded-sm text-xs font-medium border flex-shrink-0",
+                          isActive
+                            ? enhancedCalculations.metQuorum
+                              ? "bg-success/10 border-success/20"
+                              : "bg-primary/10 border-primary/20"
+                            : enhancedCalculations.metQuorum
+                              ? "bg-success/10 border-success/20"
+                              : "bg-destructive/10 border-destructive/20"
+                        )}
+                      >
+                        <span className="text-muted-foreground">Quorum:</span>{" "}
+                        <span
+                          className={cn(
+                            isActive
+                              ? enhancedCalculations.metQuorum
+                                ? "text-success"
+                                : "text-primary"
+                              : enhancedCalculations.metQuorum
+                                ? "text-success"
+                                : "text-destructive"
+                          )}
+                        >
+                          {getStatusText(
+                            enhancedCalculations.metQuorum,
+                            enhancedCalculations.participationRate
+                          )}
+                        </span>
+                      </div>
+
+                      {/* Threshold Badge */}
+                      <div
+                        className={cn(
+                          "px-2 py-0.5 rounded-sm text-xs font-medium border flex-shrink-0",
+                          isActive
+                            ? enhancedCalculations.metThreshold
+                              ? "bg-success/10 border-success/20"
+                              : "bg-primary/10 border-primary/20"
+                            : enhancedCalculations.metThreshold
+                              ? "bg-success/10 border-success/20"
+                              : "bg-destructive/10 border-destructive/20"
+                        )}
+                      >
+                        <span className="text-muted-foreground">
+                          Threshold:
+                        </span>{" "}
+                        <span
+                          className={cn(
+                            isActive
+                              ? enhancedCalculations.metThreshold
+                                ? "text-success"
+                                : "text-primary"
+                              : enhancedCalculations.metThreshold
+                                ? "text-success"
+                                : "text-destructive"
+                          )}
+                        >
+                          {getStatusText(
+                            enhancedCalculations.metThreshold,
+                            enhancedCalculations.approvalRate
+                          )}
+                        </span>
+                      </div>
+                    </>
+                  )}
+
+                {/* 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">
@@ -347,28 +469,11 @@ export default function ProposalCard({
             </div>
           )}
 
-          {/* Completed Status */}
-          {/* {isPassed && (
-          <div className="text-sm">
-            <span className="text-foreground/75">Final result: </span>
-            <span className="font-medium">
-              <span className="text-success">
-                <TokenBalance variant="abbreviated" value={votesFor} /> For
-              </span>
-              ,{" "}
-              <span className="text-destructive">
-                <TokenBalance variant="abbreviated" value={votesAgainst} />{" "}
-                Against
-              </span>
-            </span>
-          </div>
-        )} */}
-
-          {/* Enhanced Chart Section for detailed view - Hide for pending proposals */}
+          {/* Vote Status Chart - Show for active, veto period, execution window, passed, and failed proposals */}
           {(isActive ||
             statusConfig.label === "Veto Period" ||
             statusConfig.label === "Execution Window" ||
-            isPassed ||
+            statusConfig.label === "Passed" ||
             statusConfig.label === "Failed") &&
             statusConfig.label !== "Pending" && (
               <div className="">

src/components/proposals/ProposalSubmission.tsx

@@ -1319,6 +1319,28 @@ export function ProposalSubmission({
                 </div>
               </div>
             )}
+
+          {/* Blocked User Lock Overlay */}
+          {hasAccessToken &&
+            !needsXLink &&
+            !isXLoading &&
+            profile?.is_blocked === true && (
+              <div className="absolute inset-0 bg-zinc-900 rounded-sm flex flex-col items-center justify-center z-10">
+                <div className="text-center space-y-4 max-w-md mx-auto px-6">
+                  <div className="w-16 h-16 rounded-sm bg-red-900/20 border border-red-800/30 flex items-center justify-center mx-auto">
+                    <Lock className="w-8 h-8 text-red-400" />
+                  </div>
+                  <div>
+                    <h3 className="text-xl font-bold text-red-300 mb-2">
+                      Account Restricted
+                    </h3>
+                    <p className="text-sm text-red-200/80 leading-relaxed">
+                      Your account is restricted from submitting contributions.
+                    </p>
+                  </div>
+                </div>
+              </div>
+            )}
           {/* Airdrop notification - Commented out per user request */}
           {/* {hasAccessToken && (
             <div className="bg-secondary/40 rounded-sm p-3 shadow-sm">
@@ -1694,7 +1716,8 @@ export function ProposalSubmission({
                   isLoadingEmbed ||
                   !twitterEmbedData ||
                   !!xUsernameError ||
-                  !canSubmitContribution
+                  !canSubmitContribution ||
+                  profile?.is_blocked === true
                 }
                 className="bg-primary hover:bg-primary/90 text-primary-foreground font-bold px-6 py-2 text-sm rounded-sm shadow-md hover:shadow-lg transition-all duration-200"
               >
@@ -1746,6 +1769,11 @@ export function ProposalSubmission({
                     <Loader />
                     <span className="break-words">Loading Post Content...</span>
                   </div>
+                ) : profile?.is_blocked === true ? (
+                  <div className="flex items-center gap-2">
+                    <Lock className="w-4 h-4" />
+                    <span>Account Restricted</span>
+                  </div>
                 ) : (
                   <div className="flex items-center gap-2">
                     <Send className="h-4 w-4" />

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 {
@@ -22,7 +23,7 @@ const VoteStatusChart = ({
   initialVotesAgainst,
   // refreshing = false,
   tokenSymbol = "",
-  liquidTokens,
+  // liquidTokens,
   proposal,
 }: VoteStatusChartProps) => {
   const [localRefreshing, setLocalRefreshing] = useState(false);
@@ -62,6 +63,34 @@ const VoteStatusChart = ({
     [refreshVoteData]
   );
 
+  // Calculate progress bar size based on quorum (must be before early returns)
+  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]);
+
   // Show loading state
   if (isLoadingVotes && !error) {
     return (
@@ -100,7 +129,7 @@ const VoteStatusChart = ({
     );
   }
 
-  if (!voteDisplayData || !calculations) {
+  if (!voteDisplayData || !calculations || !progressBarCalculations) {
     return (
       <div className="flex items-center justify-center p-4">
         <span className="text-sm text-muted-foreground">
@@ -110,8 +139,6 @@ const VoteStatusChart = ({
     );
   }
 
-  // const isRefreshingAny = localRefreshing || refreshing;
-
   // Main vote display
   return (
     <div className="space-y-2">
@@ -122,17 +149,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>
 
@@ -171,26 +210,6 @@ const VoteStatusChart = ({
             className="font-medium sm:hidden"
           />
         </div>
-
-        {/* Liquid Tokens - Right */}
-        {liquidTokens && Number(liquidTokens) > 0 && (
-          <div className="flex items-center gap-1">
-            <span className="text-muted-foreground">Liquid Token:</span>
-            <TokenBalance
-              value={liquidTokens}
-              decimals={8}
-              variant="abbreviated"
-              symbol={tokenSymbol}
-              className="font-medium hidden sm:inline"
-            />
-            <TokenBalance
-              value={liquidTokens}
-              decimals={8}
-              variant="abbreviated"
-              className="font-medium sm:hidden"
-            />
-          </div>
-        )}
       </div>
     </div>
   );

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 */}