|
| 1 | +"use client" |
| 2 | + |
| 3 | +import { GroupResponse, SemaphoreSubgraph } from "@semaphore-protocol/data" |
| 4 | +import { SupportedNetwork } from "@semaphore-protocol/utils" |
| 5 | +import { usePathname } from "next/navigation" |
| 6 | +import { useCallback, useEffect, useState } from "react" |
| 7 | +import SearchBar from "@/components/SearchBar" |
| 8 | + |
| 9 | +export default function Group() { |
| 10 | + const pathname = usePathname() |
| 11 | + const network = pathname.split("/")[1] as SupportedNetwork |
| 12 | + const groupId = pathname.split("/")[2] as SupportedNetwork |
| 13 | + |
| 14 | + const [group, setGroup] = useState<GroupResponse>() |
| 15 | + const [filteredCommitments, setFilteredCommitments] = useState<string[]>([]) |
| 16 | + const [filteredProofs, setFilteredProofs] = useState<any[]>([]) |
| 17 | + |
| 18 | + useEffect(() => { |
| 19 | + const fetchData = async () => { |
| 20 | + const subgraph = new SemaphoreSubgraph(network) |
| 21 | + |
| 22 | + const groupInfo = await subgraph.getGroup(groupId, { |
| 23 | + members: true, |
| 24 | + validatedProofs: true |
| 25 | + }) |
| 26 | + |
| 27 | + setGroup(groupInfo) |
| 28 | + |
| 29 | + setFilteredCommitments(groupInfo.members || []) |
| 30 | + setFilteredProofs(groupInfo.validatedProofs || []) |
| 31 | + } |
| 32 | + |
| 33 | + fetchData() |
| 34 | + }, []) |
| 35 | + |
| 36 | + const filterCommitments = useCallback( |
| 37 | + (identityCommitment: string) => { |
| 38 | + if (group && group.members) { |
| 39 | + const identityCommitments = group.members.filter((member) => |
| 40 | + !identityCommitment ? true : member.includes(identityCommitment) |
| 41 | + ) |
| 42 | + |
| 43 | + setFilteredCommitments(identityCommitments) |
| 44 | + } |
| 45 | + }, |
| 46 | + [group] |
| 47 | + ) |
| 48 | + |
| 49 | + const filterProofs = useCallback( |
| 50 | + (proofMessage: string) => { |
| 51 | + if (group && group.validatedProofs) { |
| 52 | + const proofs = group.validatedProofs.filter((proof) => |
| 53 | + !proofMessage ? true : proof.message.includes(proofMessage) |
| 54 | + ) |
| 55 | + |
| 56 | + setFilteredProofs(proofs) |
| 57 | + } |
| 58 | + }, |
| 59 | + [group] |
| 60 | + ) |
| 61 | + |
| 62 | + return ( |
| 63 | + group && ( |
| 64 | + <div className="mx-auto max-w-7xl px-4 lg:px-8 pt-20"> |
| 65 | + <div className="flex justify-center flex-col pb-10 font-[family-name:var(--font-geist-sans)]"> |
| 66 | + <div className="flex justify-between gap-x-6 py-5"> |
| 67 | + <div className="min-w-0 flex-auto"> |
| 68 | + <p className="text-sm font-semibold leading-6 text-gray-800">ID: {group.id}</p> |
| 69 | + <p className="mt-1 truncate text-sm leading-6 text-gray-600">Admin: {group.admin}</p> |
| 70 | + </div> |
| 71 | + <div className="hidden shrink-0 sm:flex sm:flex-col sm:items-end"> |
| 72 | + <p className="text-sm leading-6 text-gray-600">{group.members?.length} members</p> |
| 73 | + <p className="mt-1 text-sm leading-6 text-gray-600"> |
| 74 | + {group.validatedProofs?.length} proofs |
| 75 | + </p> |
| 76 | + </div> |
| 77 | + </div> |
| 78 | + |
| 79 | + <div className="flex gap-4 flex-col md:flex-row"> |
| 80 | + <div className="min-w-0 flex-auto"> |
| 81 | + <SearchBar |
| 82 | + className="mb-6" |
| 83 | + placeholder="Identity commitment" |
| 84 | + onChange={filterCommitments} |
| 85 | + /> |
| 86 | + |
| 87 | + <ul className="divide-y divide-gray-300"> |
| 88 | + {filteredCommitments.map((commitment) => ( |
| 89 | + <li className="flex justify-between gap-x-6 py-2 px-5" key={commitment}> |
| 90 | + <p className="mt-1 truncate text-xs leading-5 text-gray-500">{commitment}</p> |
| 91 | + </li> |
| 92 | + ))} |
| 93 | + </ul> |
| 94 | + </div> |
| 95 | + |
| 96 | + <div className="min-w-0 flex-auto"> |
| 97 | + <SearchBar className="mb-6" placeholder="Proof message" onChange={filterProofs} /> |
| 98 | + |
| 99 | + <ul className="divide-y divide-gray-300"> |
| 100 | + {filteredProofs.map((proof) => ( |
| 101 | + <li className="flex justify-between gap-x-6 py-2 px-5" key={proof.nullifier}> |
| 102 | + <p className="mt-1 truncate text-xs leading-5 text-gray-500">{proof.message}</p> |
| 103 | + </li> |
| 104 | + ))} |
| 105 | + </ul> |
| 106 | + </div> |
| 107 | + </div> |
| 108 | + </div> |
| 109 | + </div> |
| 110 | + ) |
| 111 | + ) |
| 112 | +} |
0 commit comments