diff --git a/apps/web/src/app/page.tsx b/apps/web/src/app/page.tsx index 0040bf7..bfc2203 100644 --- a/apps/web/src/app/page.tsx +++ b/apps/web/src/app/page.tsx @@ -2,6 +2,7 @@ import { Badge } from "@repo/ui/components/ui/badge"; import { Label } from "@repo/ui/components/ui/label"; +import { Skeleton } from "@repo/ui/components/ui/skeleton"; import Link from "next/link"; import { useRouter } from "next/navigation"; import { useEffect, useState } from "react"; @@ -31,28 +32,55 @@ export default function Page() { // Fetch data when the council is available const { address } = useAccount(); - const { data: councilData, isLoading } = useCouncil(council); + const { + councilName, + councilMembers, + grantees, + maxAllocationsPerMember, + pool, + isLoading, + } = useCouncil(council); const { data: myAllocation, votingPower } = useAllocation(council, address); - const grantees = councilData?.grantees; + + const totalVotingPower = councilMembers?.reduce( + (acc, curr) => acc + Number(curr.votingPower), + 0, + ); + console.log(totalVotingPower); return (
- + +
+ {totalVotingPower ? ( +

+ You are 1 of {councilMembers?.length} council members, holding{" "} + {((votingPower / totalVotingPower) * 100).toFixed(2)}% of the total + voting power. Your vote plays a significant role in determining how + the budget is allocated to projects. Use your influence wisely. +

+ ) : ( + <> + + + + )} +
diff --git a/apps/web/src/hooks/useCouncil.ts b/apps/web/src/hooks/useCouncil.ts index 6629342..3d7defd 100644 --- a/apps/web/src/hooks/useCouncil.ts +++ b/apps/web/src/hooks/useCouncil.ts @@ -9,9 +9,15 @@ export const useCouncil = (council: `0x${string}` | undefined) => { council(id: $council) { councilName pool + councilMembers { + account + votingPower + enabled + } grantees { name account + enabled } maxAllocationsPerMember } @@ -19,7 +25,12 @@ export const useCouncil = (council: `0x${string}` | undefined) => { const { data, isLoading } = useQuery<{ council: { councilName: string; - grantees: { name: string; account: `0x${string}` }[]; + councilMembers: { + account: `0x${string}`; + votingPower: number; + enabled: boolean; + }[]; + grantees: { name: string; account: `0x${string}`; enabled: boolean }[]; maxAllocationsPerMember: number; pool: string; }; @@ -30,5 +41,12 @@ export const useCouncil = (council: `0x${string}` | undefined) => { }, enabled: !!council, }); - return { data: data?.council, isLoading }; + return { + councilName: data?.council?.councilName, + councilMembers: data?.council?.councilMembers.filter((m) => m.enabled), + grantees: data?.council?.grantees.filter((g) => g.enabled), + maxAllocationsPerMember: data?.council?.maxAllocationsPerMember, + pool: data?.council?.pool, + isLoading, + }; };