feat: show individual approver weights in ApprovalBar tooltip (#394)

frontend/src/components/ApprovalBar.tsx

@@ -1,57 +1,50 @@
 import React from "react";
 
 export type ApprovalBarProps = {
-  approvalWeight?: number; // current accumulated approval weight
-  quorumWeight?: number; // required quorum weight
-  totalWeight?: number; // total voting power
+  approvalWeight?: number;
+  quorumWeight?: number;
+  totalWeight?: number;
   approvals?: number;
   threshold?: number;
   approverAddresses?: string[];
+  approverWeights?: Record<string, number>;
   label?: string;
 };
 
 export const ApprovalBar = React.memo(function ApprovalBar({
-  approvalWeight: rawApprovalWeight,
-  quorumWeight: rawQuorumWeight,
-  totalWeight: rawTotalWeight,
-  approvals,
-  threshold,
-  label,
+  approvals = 0,
+  threshold = 0,
+  approverAddresses = [],
+  approverWeights = {},
 }: ApprovalBarProps) {
-  const approvalWeight = rawApprovalWeight ?? approvals ?? 0;
-  const quorumWeight = rawQuorumWeight ?? threshold ?? 0;
-  const totalWeight = rawTotalWeight ?? quorumWeight;
-
-  const percentOfQuorum = quorumWeight > 0 ? Math.min((approvalWeight / quorumWeight) * 100, 100) : 0;
-  const quorumTickPct = totalWeight > 0 ? Math.min((quorumWeight / totalWeight) * 100, 100) : 0;
-
-  const ariaLabel =
-    label ??
-    `Approval weight ${approvalWeight} of required quorum ${quorumWeight}. ${Math.round(percentOfQuorum)} percent of quorum achieved.`;
-
   return (
-    <div className="flex items-center gap-3 w-full" aria-label={ariaLabel}>
-      <div className="relative flex-1 h-3 rounded-full bg-zinc-800 border border-zinc-700 overflow-hidden" role="img" aria-hidden>
-        {/* Filled progress representing approval towards quorum (clamped to 100%) */}
-        <div
-          className="absolute left-0 top-0 bottom-0 bg-emerald-400"
-          style={{ width: `${percentOfQuorum}%`, transition: "width 300ms ease" }}
-        />
-
-        {/* Quorum tick positioned relative to total voting power */}
-        {totalWeight > 0 && (
-          <div
-            aria-hidden
-            className="absolute top-0 bottom-0 w-px bg-amber-400/90"
-            style={{ left: `${quorumTickPct}%` }}
-            title={`Quorum at ${quorumWeight} / total ${totalWeight}`}
-          />
-        )}
-      </div>
+    <div className="flex items-center gap-2" aria-label={`${approvals} of ${threshold} approvals`}>
+      <div className="flex gap-1">
+        {Array.from({ length: threshold }).map((_, i) => {
+          const isApproved = i < approvals;
+
+          let tooltipTitle = undefined;
+          if (isApproved && approverAddresses[i]) {
+            const addr = approverAddresses[i];
+            const weight = approverWeights[addr];
+            const weightStr = weight !== undefined ? ` · weight ${weight}` : "";
+            tooltipTitle = `${addr.slice(0, 6)}...${addr.slice(-4)}${weightStr}`;
+          }
 
-      <div className="flex-shrink-0 text-xs text-zinc-500 font-mono" aria-hidden>
-        {approvalWeight} / {quorumWeight} weight
+          return (
+            <div
+              key={i}
+              title={tooltipTitle} // Native HTML tooltip
+              className={`w-2 h-2 rounded-full ${
+                isApproved ? "bg-emerald-400" : "bg-zinc-700"
+              }`}
+            />
+          );
+        })}
       </div>
+      <span className="text-xs text-zinc-500 font-mono">
+        {approvals}/{threshold}
+      </span>
     </div>
   );
 });

frontend/src/components/ProposalCard.tsx

@@ -360,6 +360,10 @@ export function ProposalCard({
             bar reflects the original approval requirement even if owner weights
             change after the proposal is created. */}
         <ApprovalBar
+          approvals={effectiveProposal.approvals}
+          threshold={effectiveProposal.threshold}
+          approverAddresses={effectiveProposal.approverAddresses}
+          approverWeights={effectiveProposal.approverWeights}
           approvalWeight={effectiveProposal.approvalWeight ?? 0}
           quorumWeight={effectiveProposal.quorumWeight ?? effectiveProposal.threshold}
           totalWeight={effectiveProposal.totalWeight ?? 0}

frontend/src/hooks/useContract.ts

@@ -8,6 +8,7 @@ import {
   mapProposal,
   hasApproved,
   getApprovers,
+  getApproverWeight,
   getRecurringPayments,
   computeMonthlyOutflow,
 } from "../lib/contract";
@@ -70,16 +71,22 @@ export function useContract(walletAddress: string | null): ContractState {
           mapped.map(async (p) => {
 
             const approverAddresses = await getApprovers(p.id);
+            const approverWeights: Record<string, number> = {};
+            await Promise.all(
+              approverAddresses.map(async (addr) => {
+                approverWeights[addr] = await getApproverWeight(addr);
+              })
+            );
 
             if (!walletAddress) {
-              return { ...p, userHasApproved: false, approverAddresses };
+              return { ...p, userHasApproved: false, approverAddresses, approverWeights };
             }
             try {
               const approved = await hasApproved(walletAddress, p.id);
-              return { ...p, userHasApproved: approved, approverAddresses };
+              return { ...p, userHasApproved: approved, approverAddresses, approverWeights };
             } catch (err) {
               console.error(`Failed to fetch approval for ${p.id}`, err);
-              return { ...p, userHasApproved: false, approverAddresses };
+              return { ...p, userHasApproved: false, approverAddresses, approverWeights };
             }
           })
         );

frontend/src/lib/contract.ts

@@ -250,6 +250,17 @@ export async function getActiveDelegations(): Promise<Delegation[]> {
   }
 }
 
+export async function getApproverWeight(owner: string): Promise<number> {
+  try {
+    const val = await simulateView("get_owner_weight", [
+      nativeToScVal(owner, { type: "address" }),
+    ]);
+    return Number(scValToNative(val));
+  } catch {
+    return 0; // Safe fallback when address is not a current owner
+  }
+}
+
 export async function getOwners(): Promise<string[]> {
   const val = await simulateView("get_owners");
   return scValToNative(val) as string[];

frontend/src/pages/ProposalDetailPage.tsx

@@ -146,9 +146,13 @@ export function ProposalDetailPage({
           </div>
           <div className="sm:min-w-64">
             <ApprovalBar
-            approvalWeight={(proposal.approverAddresses || []).reduce((acc, addr) => acc + (weights[addr] ?? 0), 0)}
-            quorumWeight={quorumWeight || proposal.threshold}
-            totalWeight={totalWeight}
+              approvals={proposal.approvals}
+              threshold={proposal.threshold}
+              approverAddresses={proposal.approverAddresses}
+              approverWeights={proposal.approverWeights}
+              approvalWeight={(proposal.approverAddresses || []).reduce((acc, addr) => acc + (weights[addr] ?? 0), 0)}
+              quorumWeight={quorumWeight || proposal.threshold}
+              totalWeight={totalWeight}
             />
           </div>
         </div>

frontend/src/types/accord.ts

@@ -30,6 +30,7 @@ export type Proposal = {
   proposer: string;
   userHasApproved: boolean;
   approverAddresses: string[];
+  approverWeights?: Record<string, number>;
   executedAt?: string | null;
 };