fix(Proposal): support voter counting of all snapshot voting types; display results in tab if needed

twodam · twodam · commit a494ee397116 · 2025-01-08T16:59:47.000+08:00
diff --git a/components/Proposal/ProposalOptions.tsx b/components/Proposal/ProposalOptions.tsx
@@ -2,9 +2,22 @@ import { Tooltip } from "flowbite-react";
 import { useProposalVotes } from "@/utils/hooks/snapshot/Proposals";
 import { SnapshotProposal } from "@/models/SnapshotTypes";
 import { formatNumber } from "@/utils/functions/NumberFormatter";
+import { processChoicesCount } from "@/utils/functions/snapshotUtil";
 
-// BasicVoting: For Against Abstain
-const SUPPORTED_VOTING_TYPES_FOR_GROUP = ["basic", "single-choice", "approval"];
+function merge(arrayOfObjects: { [choice: string]: number }[]) {
+  return arrayOfObjects.reduce((result, currentObj) => {
+    for (let key in currentObj) {
+      if (result.hasOwnProperty(key)) {
+        // If key exists, add values
+        result[key] += currentObj[key];
+      } else {
+        // If key doesn't exist, create new key-value pair
+        result[key] = currentObj[key];
+      }
+    }
+    return result;
+  }, {});
+}
 
 export default function ProposalOptions({
   proposal,
@@ -19,7 +32,7 @@ export default function ProposalOptions({
     "created",
     "",
     isOverview,
-    proposal.votes,
+    proposal.votes
   );
 
   let scores = proposal?.scores
@@ -30,22 +43,12 @@ export default function ProposalOptions({
     // sort by score desc
     .sort((a, b) => b.score - a.score);
 
-  const displayVotesByGroup = SUPPORTED_VOTING_TYPES_FOR_GROUP.includes(
-    proposal.type,
-  );
+  const displayVotesByGroup = true;
   let votesGroupByChoice: { [choice: string]: number } = {};
   if (!isOverview && displayVotesByGroup) {
     // iterate votesData and group by choice
-    votesGroupByChoice = data?.votesData.reduce(
-      (acc: { [choice: string]: number }, vote) => {
-        const choice = vote.choice;
-        if (!acc[choice]) {
-          acc[choice] = 0;
-        }
-        acc[choice]++;
-        return acc;
-      },
-      {},
+    votesGroupByChoice = merge(
+      data?.votesData.map((d) => processChoicesCount(proposal.type, d.choice))
     );
   }
 
@@ -57,17 +60,14 @@ export default function ProposalOptions({
         scores.map(({ score, index }) => (
           <div
             key={index}
-            className="overflow-hidden rounded-lg bg-white px-4 py-5 shadow sm:p-6"
+            className="overflow-hidden rounded-lg bg-white p-3 shadow"
           >
             <Tooltip content={proposal?.choices[index]} trigger="hover">
               <dt className="truncate text-sm font-medium text-gray-500">
                 {proposal?.choices[index]}
               </dt>
             </Tooltip>
-            <Tooltip
-              content={`${((score * 100) / proposal.scores_total).toFixed(2)}%`}
-              trigger="hover"
-            >
+            <div>
               {/* <dd className="mt-1 text-3xl tracking-tight font-semibold text-gray-900">{(proposal.voteByChoice[choice]*100/proposal.scores_total).toFixed(2)}%</dd> */}
               <dd className="mt-1 text-3xl font-semibold tracking-tight text-gray-900">
                 {formatNumber(score)}
@@ -82,7 +82,7 @@ export default function ProposalOptions({
                   {((score * 100) / proposal.scores_total).toFixed()}%
                 </span>
               )}
-            </Tooltip>
+            </div>
           </div>
         ))}
     </dl>
diff --git a/components/Proposal/ProposalTabs.tsx b/components/Proposal/ProposalTabs.tsx
@@ -1,37 +1,43 @@
-import {
-  useContext,
-  useEffect,
-  useState,
-  useMemo,
-} from "react";
+import { useContext, useEffect, useState, useMemo } from "react";
 import { ProposalContext } from "./context/ProposalContext";
 import { useRouter } from "next/router";
 import { classNames } from "@/utils/functions/tailwind";
 import ProposalContent from "./ProposalContent";
 import ProposalActivityFeeds from "./sub/ProposalActivityFeeds";
 import ProposalMetadata from "./sub/ProposalMetadata";
+import { SnapshotVotingType } from "@/models/SnapshotTypes";
+import ProposalOptions from "./ProposalOptions";
 
-
-const TABS = ["Content", "Activity", "Actions"] as const;
+const TABS = ["Content", "Activity", "Actions", "Results"] as const;
 const LG_MIN_WIDTH = 1024;
 
 export default function ProposalTabs() {
   const router = useRouter();
-  const [query, setQuery] = useState<typeof TABS[number]>("Content");
-  const { commonProps } = useContext(ProposalContext);
+  const [query, setQuery] = useState<(typeof TABS)[number]>("Content");
+  const { commonProps, proposalInfo } = useContext(ProposalContext);
 
   // Memoize filtered tabs
   const filteredTabs = useMemo(() => {
-    const tabs = TABS.filter(t => t !== "Content");
+    const tabs = TABS.filter((t) => t !== "Content");
     if (commonProps.actions.length === 0) {
-      return tabs.filter(t => t !== "Actions");
+      return tabs.filter((t) => t !== "Actions");
+    }
+    if (
+      proposalInfo === undefined ||
+      proposalInfo?.type === SnapshotVotingType.BASIC
+    ) {
+      return tabs.filter((t) => t !== "Results");
     }
     return tabs;
   }, [commonProps.actions]);
 
   useEffect(() => {
     const correctContentTab = () => {
-      if (window.innerWidth >= LG_MIN_WIDTH && query === "Content" && router.isReady) {
+      if (
+        window.innerWidth >= LG_MIN_WIDTH &&
+        query === "Content" &&
+        router.isReady
+      ) {
         handleTabChange("Activity");
       }
     };
@@ -51,21 +57,18 @@ export default function ProposalTabs() {
     };
   }, [query, router.isReady]);
 
-  const handleTabChange = (tab: typeof TABS[number]) => {
+  const handleTabChange = (tab: (typeof TABS)[number]) => {
     setQuery(tab);
-    router.replace({
-      pathname: router.pathname,
-      query: { ...router.query, tab },
-    });
   };
 
-  const getTabClasses = useMemo(() => (isActive: boolean) =>
-    classNames(
-      isActive
-        ? "border-indigo-500 text-indigo-600"
-        : "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700",
-      "whitespace-nowrap border-b-2 p-1 text-sm font-medium cursor-pointer"
-    ),
+  const getTabClasses = useMemo(
+    () => (isActive: boolean) =>
+      classNames(
+        isActive
+          ? "border-indigo-500 text-indigo-600"
+          : "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700",
+        "whitespace-nowrap border-b-2 p-1 text-sm font-medium cursor-pointer"
+      ),
     []
   );
 
@@ -88,7 +91,7 @@ export default function ProposalTabs() {
 
         {/* Small screen nav */}
         <nav aria-label="Tabs" className="-mb-px flex lg:hidden space-x-8">
-          {TABS.map((tab) => (
+          {[TABS[0], ...filteredTabs].map((tab) => (
             <button
               key={tab}
               onClick={() => handleTabChange(tab)}
@@ -102,13 +105,15 @@ export default function ProposalTabs() {
       </div>
 
       <div>
-        {(query === "Content" || (!query && window.innerWidth < LG_MIN_WIDTH)) && (
+        {(query === "Content" ||
+          (!query && window.innerWidth < LG_MIN_WIDTH)) && (
           <div className="hidden mt-4 w-[90vw] max-lg:block">
             <ProposalContent />
           </div>
         )}
 
-        {(query === "Activity" || (!query && window.innerWidth >= LG_MIN_WIDTH)) && (
+        {(query === "Activity" ||
+          (!query && window.innerWidth >= LG_MIN_WIDTH)) && (
           <div className="mt-4 max-lg:w-[90vw] block">
             <ProposalActivityFeeds />
           </div>
@@ -119,6 +124,12 @@ export default function ProposalTabs() {
             <ProposalMetadata />
           </div>
         )}
+
+        {query === "Results" && proposalInfo !== undefined && (
+          <div className="mt-4 max-lg:w-[90vw] overflow-x-auto block">
+            <ProposalOptions proposal={proposalInfo} />
+          </div>
+        )}
       </div>
     </div>
   );
diff --git a/components/Proposal/ProposalVoteOverview.tsx b/components/Proposal/ProposalVoteOverview.tsx
@@ -9,6 +9,7 @@ import {
 } from "next-query-params";
 import ColorBar from "@/components/common/ColorBar";
 import { formatNumber } from "@/utils/functions/NumberFormatter";
+import { SnapshotVotingType } from "@/models/SnapshotTypes";
 
 export default function ProposalVoteOverview({
   temperatureCheckVotes,
@@ -25,13 +26,7 @@ export default function ProposalVoteOverview({
 
   const proposalType = proposalInfo?.type ?? "";
   const threshold = commonProps?.minTokenPassingAmount ?? 0;
-
-  const isSimpleVoting = ![
-    "approval",
-    "ranked-choice",
-    "quadratic",
-    "weighted",
-  ].includes(proposalType);
+  const isBasicVoting = proposalType === SnapshotVotingType.BASIC;
 
   if (!proposalInfo) {
     return (
@@ -85,7 +80,7 @@ export default function ProposalVoteOverview({
 
   return (
     <div className="mb-4">
-      {isSimpleVoting && (
+      {isBasicVoting && (
         <>
           <div className="flex justify-between">
             <p
@@ -140,7 +135,7 @@ export default function ProposalVoteOverview({
         </>
       )}
 
-      {!isSimpleVoting && (
+      {!isBasicVoting && (
         <>
           <div className="flex justify-between">
             <p className="text-sm text-green-500">
diff --git a/models/SnapshotTypes.ts b/models/SnapshotTypes.ts
@@ -99,6 +99,15 @@ export interface FollowedSpacesData {
   activeProposals: number;
 }
 
+export enum SnapshotVotingType {
+  BASIC = "basic", // For Against Abstain
+  SINGLE_CHOICE = "single-choice",
+  APPROVAL = "approval", // Approve/Disapprove on multiple options
+  RANKED_CHOICE = "ranked-choice",
+  QUADRATIC = "quadratic",
+  WEIGHTED = "weighted", // give explicit weight
+}
+
 // Model for a single proposal
 export interface SnapshotProposal {
   id: string;
diff --git a/pages/s/[space]/[proposal]/index.tsx b/pages/s/[space]/[proposal]/index.tsx
@@ -14,7 +14,6 @@ import { useProposal } from "@/utils/hooks/NanceHooks";
 import { useParams } from "next/navigation";
 import ProposalTabs from "@/components/Proposal/ProposalTabs";
 import ProposalHeader from "@/components/Proposal/ProposalHeader";
-import ProposalOptions from "@/components/Proposal/ProposalOptions";
 import ProposalVoteOverview from "@/components/Proposal/ProposalVoteOverview";
 
 export default function NanceProposalPage() {
@@ -142,21 +141,6 @@ export default function NanceProposalPage() {
                   <ProposalHeader />
                   <ProposalContent />
                 </div>
-
-                {/* Display Options if not basic (For Against) */}
-                <div>
-                  {snapshotProposal &&
-                    [
-                      "approval",
-                      "ranked-choice",
-                      "quadratic",
-                      "weighted",
-                    ].includes(snapshotProposal.type) && (
-                      <div className="mt-6 flow-root">
-                        <ProposalOptions proposal={snapshotProposal} />
-                      </div>
-                    )}
-                </div>
               </div>
 
               <section
diff --git a/utils/functions/snapshotUtil.ts b/utils/functions/snapshotUtil.ts
@@ -38,6 +38,26 @@ export function getColorOfChoice(choice: string | string[]) {
   }
 }
 
+export function processChoicesCount(
+  type: string | undefined,
+  choice: any
+): { [k: string]: number } {
+  if (!choice || !type) return {};
+  if (choice === "🔐") return {}; // undefined entry appears with shutter voting
+  if (type == "approval" || type == "ranked-choice") {
+    const choices = choice as string[];
+    const ret: { [k: string]: number } = {};
+    choices.forEach((c) => (ret[c] = 1));
+    return ret;
+  } else if (type == "quadratic" || type == "weighted") {
+    const obj = choice as { [key: string]: number };
+    return obj;
+  } else {
+    const c = choice as string;
+    return { [c]: 1 };
+  }
+}
+
 export function processChoices(
   type: string | undefined,
   choice: any
