From d15c6160e6cb010b01c4a854016bcf3f31187e91 Mon Sep 17 00:00:00 2001
From: Sem <931684+sembrestels@users.noreply.github.com>
Date: Mon, 23 Sep 2024 12:56:21 +0100
Subject: [PATCH] Use units instead of ratios when voting

---
 apps/web/src/app/page.tsx                |  3 ++-
 apps/web/src/components/VotingButton.tsx |  3 +--
 apps/web/src/components/VotingCard.tsx   | 34 +++++++++++++-----------
 apps/web/src/hooks/useAllocation.ts      |  9 ++++++-
 apps/web/src/hooks/useWriteAllocation.ts | 22 +++------------
 5 files changed, 32 insertions(+), 39 deletions(-)

diff --git a/apps/web/src/app/page.tsx b/apps/web/src/app/page.tsx
index a8501cd..c234b9f 100644
--- a/apps/web/src/app/page.tsx
+++ b/apps/web/src/app/page.tsx
@@ -30,7 +30,7 @@ export default function Page() {
   // Fetch data when the council is available
   const { address } = useAccount();
   const { data: councilData, isLoading } = useCouncil(council);
-  const { data: myAllocation } = useAllocation(council, address);
+  const { data: myAllocation, votingPower } = useAllocation(council, address);
   const grantees = councilData?.grantees;
 
   return (
@@ -46,6 +46,7 @@ export default function Page() {
         initialAllocation={myAllocation}
         maxVotedProjects={3}
         isLoading={isLoading || !council}
+        votingPower={votingPower}
       />
     </main>
   );
diff --git a/apps/web/src/components/VotingButton.tsx b/apps/web/src/components/VotingButton.tsx
index a4176df..7f6e261 100644
--- a/apps/web/src/components/VotingButton.tsx
+++ b/apps/web/src/components/VotingButton.tsx
@@ -22,7 +22,6 @@ const VotingButton = ({
 }: VotingButtonProps) => {
   const { address } = useAccount();
   const vote = useWriteAllocation(council);
-  const totalVotes = Object.values(votes).reduce((a, b) => a + b, 0);
   const [isLoading, setIsLoading] = useState(false);
   const toast = useToast();
 
@@ -37,7 +36,7 @@ const VotingButton = ({
             .filter(([, voteCount]) => voteCount > 0)
             .map(([grantee, voteCount]) => ({
               account: grantee as `0x${string}`,
-              ratio: (BigInt(voteCount) * 2n ** 128n) / BigInt(totalVotes),
+              amount: BigInt(voteCount),
             })),
         )
           .then(() => {
diff --git a/apps/web/src/components/VotingCard.tsx b/apps/web/src/components/VotingCard.tsx
index 5173f6f..852480f 100644
--- a/apps/web/src/components/VotingCard.tsx
+++ b/apps/web/src/components/VotingCard.tsx
@@ -21,24 +21,18 @@ const VotingCard = ({
   council,
   projects,
   initialAllocation,
+  votingPower,
   maxVotedProjects = 3,
   isLoading = false,
 }: {
   className: string;
   council: `0x${string}` | undefined;
   projects: Project[];
-  maxVotedProjects?: number;
   initialAllocation: Allocation | undefined;
+  votingPower: number;
+  maxVotedProjects?: number;
   isLoading: boolean;
 }) => {
-  console.log(
-    initialAllocation,
-    projects.map((project) => [
-      project.account,
-      initialAllocation?.[project.account] ?? 0,
-    ]),
-  );
-
   const [votes, setVotes] = useState<Allocation>(
     Object.fromEntries(
       projects.map((project) => [
@@ -86,11 +80,17 @@ const VotingCard = ({
           <div>No projects to vote on</div>
         ) : (
           <>
-            <h4 className="h-12 text-xl mb-6 text-accent">
-              Cast Your Vote ({votedProjects.length} / {maxVotedProjects}{" "}
-              projects)
-            </h4>
+            <div className="flex justify-between">
+              <h4 className="h-12 text-xl mb-6 text-accent">
+                Cast Your Vote ({votedProjects.length} / {maxVotedProjects}{" "}
+                projects)
+              </h4>
+              <div className="text-sm mt-2">
+                Used {totalVotes} / {votingPower}
+              </div>
+            </div>
             {projects.map((project) => {
+              console.log(totalVotes, votingPower);
               const voteCount = votes[project.account] || 0;
               return (
                 <div
@@ -119,8 +119,9 @@ const VotingCard = ({
                     />
                     <Button
                       disabled={
-                        votedProjects.length >= maxVotedProjects &&
-                        !votes[project.account]
+                        (votedProjects.length >= maxVotedProjects &&
+                          !votes[project.account]) ||
+                        totalVotes >= votingPower
                       }
                       onClick={() => handleVote(project.account, voteCount + 1)}
                       className="bg-gray-700 w-8 py-1 text-white hover:bg-gray-500 rounded-l-none"
@@ -154,8 +155,9 @@ const VotingCard = ({
 function SkeletonVote() {
   return (
     <div className="flex flex-col space-y-3">
-      <div className="h-12">
+      <div className="h-12 flex justify-between items-center">
         <Skeleton className="w-3/5 h-5" />
+        <Skeleton className="w-1/5 h-3" />
       </div>
 
       <div className="space-y-2 mt-4">
diff --git a/apps/web/src/hooks/useAllocation.ts b/apps/web/src/hooks/useAllocation.ts
index 656e54b..a9765e0 100644
--- a/apps/web/src/hooks/useAllocation.ts
+++ b/apps/web/src/hooks/useAllocation.ts
@@ -9,6 +9,9 @@ export const useAllocation = (
     "https://api.goldsky.com/api/public/project_cm10r8z66lbri01se6301ddxj/subgraphs/councilhaus/0.0.1/gn";
   const query = gql`
     query LastAllocation($council: String, $councilMember: String) {
+      councilMember(id:$councilMember) {
+        votingPower
+      }
       allocations(
         first: 1
         where: { council: $council, councilMember: $councilMember }
@@ -23,6 +26,9 @@ export const useAllocation = (
     }
   `;
   const { data, isLoading } = useQuery<{
+    councilMember: {
+      votingPower: string;
+    };
     allocations: {
       grantees: { id: string }[];
       amounts: string[];
@@ -39,7 +45,7 @@ export const useAllocation = (
   });
   const allocation = data?.allocations?.[0];
   if (!allocation) {
-    return { data: undefined, isLoading };
+    return { data: undefined, isLoading, votingPower: 0 };
   }
   const formattedAllocation: { [grantee: `0x${string}`]: number } =
     Object.fromEntries(
@@ -50,6 +56,7 @@ export const useAllocation = (
     );
   return {
     data: formattedAllocation,
+    votingPower: Number(data?.councilMember?.votingPower ?? 0),
     isLoading,
   };
 };
diff --git a/apps/web/src/hooks/useWriteAllocation.ts b/apps/web/src/hooks/useWriteAllocation.ts
index eb61800..b7b4ac8 100644
--- a/apps/web/src/hooks/useWriteAllocation.ts
+++ b/apps/web/src/hooks/useWriteAllocation.ts
@@ -1,24 +1,11 @@
 import { parseAbi } from "viem";
-import {
-  useAccount,
-  useBalance,
-  usePublicClient,
-  useWalletClient,
-} from "wagmi";
+import { usePublicClient, useWalletClient } from "wagmi";
 
 export const useWriteAllocation = (council: `0x${string}` | undefined) => {
-  const { address } = useAccount();
-  const balance = useBalance({
-    address,
-    token: council,
-    query: {
-      enabled: !!council,
-    },
-  });
   const publicClient = usePublicClient();
   const { data: walletClient } = useWalletClient();
 
-  return async (allocation: { account: `0x${string}`; ratio: bigint }[]) => {
+  return async (allocation: { account: `0x${string}`; amount: bigint }[]) => {
     if (!council || !walletClient || !publicClient) {
       throw new Error("Council or client is not set");
     }
@@ -33,10 +20,7 @@ export const useWriteAllocation = (council: `0x${string}` | undefined) => {
       args: [
         {
           accounts: allocation.map(({ account }) => account),
-          amounts: allocation.map(
-            ({ ratio }) =>
-              (ratio * BigInt(balance.data?.value ?? 0)) / 2n ** 128n,
-          ),
+          amounts: allocation.map(({ amount }) => amount),
         },
       ],
     });