Update app to use the new subgraph

apps/web/package.json

@@ -9,9 +9,10 @@
   },
   "dependencies": {
     "@rainbow-me/rainbowkit": "^2.1.5",
-    "@tanstack/react-query": "^5.55.4",
     "@repo/ui": "*",
+    "@tanstack/react-query": "^5.55.4",
     "ethereum-blockies-base64": "^1.0.2",
+    "graphql-request": "^7.1.0",
     "next": "14.2.8",
     "react": "^18",
     "react-dom": "^18",

apps/web/src/app/page.tsx

@@ -1,12 +1,11 @@
 "use client";
 
-import { useQuery } from "@tanstack/react-query";
 import { useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
 import { getAddress } from "viem";
 import { CouncilName } from "../components/CouncilName";
 import VotingCard from "../components/VotingCard";
-import { getGrantees } from "../utils/grantees";
+import { useCouncil } from "../hooks/useCouncil";
 
 const defaultCouncil = "0x5cE162b6e6Dd6B936B9dC183Df79F61DBf8c675f";
 
@@ -27,15 +26,13 @@ export default function Page() {
   }, [router]);
 
   // Fetch data when the council is available
-  const { data: grantees, isLoading } = useQuery({
-    queryKey: ["grantees", council],
-    queryFn: () => council && getGrantees(council),
-    enabled: !!council, // Only run query if council is defined
-  });
+  const { data: councilData, isLoading } = useCouncil(council);
+  const grantees = councilData?.grantees;
+
   return (
     <main>
       <CouncilName
-        council={council}
+        name={councilData?.councilName}
         className="h-12 text-4xl font-bold mb-4 text-accent"
       />
       <VotingCard

apps/web/src/components/CouncilName.tsx

@@ -2,22 +2,11 @@
 
 import { Skeleton } from "@repo/ui/components/ui/skeleton";
 import { cn } from "@repo/ui/lib/utils";
-import { parseAbi } from "viem";
-import { useReadContract } from "wagmi";
 
 export function CouncilName({
-  council,
+  name,
   className,
-}: { council: `0x${string}` | undefined; className?: string }) {
-  const { data: name, isLoading } = useReadContract({
-    address: council,
-    abi: parseAbi(["function name() view returns (string)"]),
-    functionName: "name",
-    query: {
-      enabled: !!council,
-    },
-  });
-  if (isLoading || !council)
-    return <Skeleton className={cn("w-1/3 ", className)} />;
+}: { name: string | undefined; className?: string }) {
+  if (!name) return <Skeleton className={cn("w-1/3 ", className)} />;
   return <h1 className={className}>{name}</h1>;
 }

apps/web/src/components/VotingCard.tsx

@@ -11,11 +11,10 @@ import {
 import { Input } from "@repo/ui/components/ui/input";
 import { Skeleton } from "@repo/ui/components/ui/skeleton";
 import React, { useState } from "react";
-import { useAccount } from "wagmi";
 import { useWriteAllocation } from "../hooks/useWriteAllocation";
 import VotingButton from "./VotingButton";
 
-type Project = { grantee: `0x${string}`; name: string };
+type Project = { account: `0x${string}`; name: string };
 
 const VotingCard = ({
   className,
@@ -31,7 +30,7 @@ const VotingCard = ({
   isLoading: boolean;
 }) => {
   const [votes, setVotes] = useState<{ [grantee: `0x${string}`]: number }>(
-    Object.fromEntries(projects.map((project) => [project.grantee, 0])),
+    Object.fromEntries(projects.map((project) => [project.account, 0])),
   );
 
   // Array of project addresses that have been voted on
@@ -68,17 +67,17 @@ const VotingCard = ({
               projects)
             </h4>
             {projects.map((project) => {
-              const voteCount = votes[project.grantee] || 0;
+              const voteCount = votes[project.account] || 0;
               return (
                 <div
-                  key={project.grantee}
+                  key={project.account}
                   className="flex items-center justify-between mb-3"
                 >
                   <span className="flex-grow">{project.name}</span>
                   <div className="flex items-center">
                     <Button
                       disabled={voteCount <= 0}
-                      onClick={() => handleVote(project.grantee, voteCount - 1)}
+                      onClick={() => handleVote(project.account, voteCount - 1)}
                       className="bg-gray-700 w-8 py-1 text-white hover:bg-gray-500 rounded-r-none"
                     >
                       -
@@ -88,7 +87,7 @@ const VotingCard = ({
                       value={voteCount}
                       onChange={(e) =>
                         handleVote(
-                          project.grantee,
+                          project.account,
                           Number.parseInt(e.target.value),
                         )
                       }
@@ -97,9 +96,9 @@ const VotingCard = ({
                     <Button
                       disabled={
                         votedProjects.length >= maxVotedProjects &&
-                        !votes[project.grantee]
+                        !votes[project.account]
                       }
-                      onClick={() => handleVote(project.grantee, voteCount + 1)}
+                      onClick={() => handleVote(project.account, voteCount + 1)}
                       className="bg-gray-700 w-8 py-1 text-white hover:bg-gray-500 rounded-l-none"
                     >
                       +

apps/web/src/hooks/useCouncil.ts

@@ -0,0 +1,31 @@
+import { useQuery } from "@tanstack/react-query";
+import { gql, request } from "graphql-request";
+
+export const useCouncil = (council: `0x${string}` | undefined) => {
+  const url =
+    "https://api.goldsky.com/api/public/project_cm10r8z66lbri01se6301ddxj/subgraphs/councilhaus/0.0.1/gn";
+  const query = gql`
+      query CouncilNameAndGrantees($council: String) {
+        council(id: $council) {
+          councilName
+          grantees {
+            name
+            account
+          }
+        }
+      }`;
+  console.log(url, query, council);
+  const { data, isLoading } = useQuery<{
+    council: {
+      councilName: string;
+      grantees: { name: string; account: `0x${string}` }[];
+    };
+  }>({
+    queryKey: ["data"],
+    async queryFn() {
+      return await request(url, query, { council: council?.toLowerCase() });
+    },
+    enabled: !!council,
+  });
+  return { data: data?.council, isLoading };
+};