Show previous allocated amounts by connected address

apps/web/src/app/page.tsx

@@ -3,8 +3,10 @@
 import { useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
 import { getAddress } from "viem";
+import { useAccount } from "wagmi";
 import { CouncilName } from "../components/CouncilName";
 import VotingCard from "../components/VotingCard";
+import { useAllocation } from "../hooks/useAllocation";
 import { useCouncil } from "../hooks/useCouncil";
 
 const defaultCouncil = "0x5cE162b6e6Dd6B936B9dC183Df79F61DBf8c675f";
@@ -26,7 +28,9 @@ export default function Page() {
   }, [router]);
 
   // Fetch data when the council is available
+  const { address } = useAccount();
   const { data: councilData, isLoading } = useCouncil(council);
+  const { data: myAllocation } = useAllocation(council, address);
   const grantees = councilData?.grantees;
 
   return (
@@ -39,6 +43,7 @@ export default function Page() {
         className="max-w-lg mx-auto"
         council={council}
         projects={grantees ?? []}
+        initialAllocation={myAllocation}
         maxVotedProjects={3}
         isLoading={isLoading || !council}
       />

apps/web/src/components/VotingCard.tsx

@@ -10,29 +10,55 @@ import {
 } from "@repo/ui/components/ui/card";
 import { Input } from "@repo/ui/components/ui/input";
 import { Skeleton } from "@repo/ui/components/ui/skeleton";
-import React, { useState } from "react";
-import { useWriteAllocation } from "../hooks/useWriteAllocation";
+import React, { useEffect, useState } from "react";
 import VotingButton from "./VotingButton";
 
 type Project = { account: `0x${string}`; name: string };
+type Allocation = { [grantee: `0x${string}`]: number };
 
 const VotingCard = ({
   className,
   council,
   projects,
+  initialAllocation,
   maxVotedProjects = 3,
   isLoading = false,
 }: {
   className: string;
   council: `0x${string}` | undefined;
   projects: Project[];
   maxVotedProjects?: number;
+  initialAllocation: Allocation | undefined;
   isLoading: boolean;
 }) => {
-  const [votes, setVotes] = useState<{ [grantee: `0x${string}`]: number }>(
-    Object.fromEntries(projects.map((project) => [project.account, 0])),
+  console.log(
+    initialAllocation,
+    projects.map((project) => [
+      project.account,
+      initialAllocation?.[project.account] ?? 0,
+    ]),
   );
 
+  const [votes, setVotes] = useState<Allocation>(
+    Object.fromEntries(
+      projects.map((project) => [
+        project.account,
+        initialAllocation?.[project.account] ?? 0,
+      ]),
+    ),
+  );
+
+  useEffect(() => {
+    setVotes(
+      Object.fromEntries(
+        projects.map((project) => [
+          project.account,
+          initialAllocation?.[project.account] ?? 0,
+        ]),
+      ),
+    );
+  }, [initialAllocation, projects]);
+
   // Array of project addresses that have been voted on
   const votedProjects = Object.keys(votes).filter(
     (grantee) => (votes[grantee as `0x${string}`] ?? 0) > 0,
@@ -48,8 +74,6 @@ const VotingCard = ({
     }));
   };
 
-  const vote = useWriteAllocation(council);
-
   return (
     <Card className={className}>
       <CardHeader>

apps/web/src/hooks/useAllocation.ts

@@ -0,0 +1,55 @@
+import { useQuery } from "@tanstack/react-query";
+import { gql, request } from "graphql-request";
+
+export const useAllocation = (
+  council: `0x${string}` | undefined,
+  councilMember: `0x${string}` | undefined,
+) => {
+  const url =
+    "https://api.goldsky.com/api/public/project_cm10r8z66lbri01se6301ddxj/subgraphs/councilhaus/0.0.1/gn";
+  const query = gql`
+    query LastAllocation($council: String, $councilMember: String) {
+      allocations(
+        first: 1
+        where: { council: $council, councilMember: $councilMember }
+        orderBy: allocatedAt
+        orderDirection: desc
+      ) {
+        grantees {
+          id
+        }
+        amounts
+      }
+    }
+  `;
+  const { data, isLoading } = useQuery<{
+    allocations: {
+      grantees: { id: string }[];
+      amounts: string[];
+    }[];
+  }>({
+    queryKey: ["allocation"],
+    async queryFn() {
+      return await request(url, query, {
+        council: council?.toLowerCase(),
+        councilMember: councilMember?.toLowerCase(),
+      });
+    },
+    enabled: !!council && !!councilMember,
+  });
+  const allocation = data?.allocations?.[0];
+  if (!allocation) {
+    return { data: undefined, isLoading };
+  }
+  const formattedAllocation: { [grantee: `0x${string}`]: number } =
+    Object.fromEntries(
+      allocation.grantees.map((g, index) => [
+        g.id as `0x${string}`,
+        Number(allocation.amounts[index]),
+      ]),
+    );
+  return {
+    data: formattedAllocation,
+    isLoading,
+  };
+};