diff --git a/apps/web/src/app/page.tsx b/apps/web/src/app/page.tsx index 5c0ac7f..a8501cd 100644 --- a/apps/web/src/app/page.tsx +++ b/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} /> diff --git a/apps/web/src/components/VotingCard.tsx b/apps/web/src/components/VotingCard.tsx index 0d60730..5173f6f 100644 --- a/apps/web/src/components/VotingCard.tsx +++ b/apps/web/src/components/VotingCard.tsx @@ -10,16 +10,17 @@ 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, }: { @@ -27,12 +28,37 @@ const VotingCard = ({ 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( + 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 ( diff --git a/apps/web/src/hooks/useAllocation.ts b/apps/web/src/hooks/useAllocation.ts new file mode 100644 index 0000000..656e54b --- /dev/null +++ b/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, + }; +};