feat: add new semaphore explorer to apps

.gitignore

@@ -30,10 +30,12 @@ node_modules/
 
 # TypeScript cache
 *.tsbuildinfo
+next-env.d.ts
 
 # Optional npm cache directory
 .npm
 .DS_Store
+*.pem
 
 # Output of 'npm pack'
 *.tgz
@@ -94,3 +96,13 @@ typechain-types
 
 # Other
 snark-artifacts
+
+# vercel
+.vercel
+
+# local env files
+.env*.local
+
+# next.js
+.next/
+out/

apps/explorer/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Ethereum Foundation
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

apps/explorer/README.md

@@ -0,0 +1,64 @@
+<h1 align="center">
+Semaphore Explorer
+</h1>
+
+<p align="center">
+    <a href="https://github.com/semaphore-protocol" target="_blank">
+        <img src="https://img.shields.io/badge/project-Semaphore-blue.svg?style=flat-square">
+    </a>
+    <a href="https://github.com/semaphore-protocol/extensions/blob/main/LICENSE">
+        <img alt="Github license" src="https://img.shields.io/github/license/semaphore-protocol/extensions">
+    </a>
+    <a href="https://prettier.io/" target="_blank">
+        <img alt="Code style prettier" src="https://img.shields.io/badge/code%20style-prettier-f8bc45?style=flat-square&logo=prettier">
+    </a>
+</p>
+
+<div align="center">
+    <h4>
+        <a href="../../CONTRIBUTING.md">
+            👥 Contributing
+        </a>
+        <span>&nbsp;&nbsp;|&nbsp;&nbsp;</span>
+        <a href="../../CODE_OF_CONDUCT.md">
+            🤝 Code of conduct
+        </a>
+        <span>&nbsp;&nbsp;|&nbsp;&nbsp;</span>
+        <a href="https://github.com/semaphore-protocol/extensions/issues/new/choose">
+            🔎 Issues
+        </a>
+        <span>&nbsp;&nbsp;|&nbsp;&nbsp;</span>
+        <a href="https://semaphore.pse.dev/telegram">
+            🗣️ Chat &amp; Support
+        </a>
+    </h4>
+</div>
+
+| View and explore on-chain semaphore data from multiple networks in a user-friendly way. Powered by the Semaphore subgraph and the [@semaphore-protocol/data](https://github.com/semaphore-protocol/semaphore/tree/main/packages/data) library, this read-only web application provides a comprehensive and intuitive interface for analyzing blockchain data.
+| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+
+## 📜 Usage
+
+### Start
+
+To navigate inside the `explorer` folder, run:
+
+```bash
+cd benchmarks
+```
+
+To start the web app in a local server, run:
+
+```sh
+yarn dev
+```
+
+### Build
+
+To build the web app, run:
+
+```
+yarn build
+```
+
+The `build` command generates static content into the `build` directory that can be served by any static content hosting service.

apps/explorer/next.config.mjs

@@ -0,0 +1,15 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+    async redirects() {
+        return [
+            {
+                source: "/",
+                destination: "/sepolia",
+                permanent: true
+            }
+        ]
+    },
+    reactStrictMode: false
+}
+
+export default nextConfig

apps/explorer/package.json

@@ -0,0 +1,27 @@
+{
+    "name": "explorer",
+    "private": true,
+    "scripts": {
+        "dev": "next dev",
+        "build": "next build",
+        "start": "next start",
+        "lint": "next lint"
+    },
+    "dependencies": {
+        "@headlessui/react": "^2.1.10",
+        "@semaphore-protocol/data": "^4.3.1",
+        "@semaphore-protocol/utils": "^4.3.1",
+        "next": "14.2.14",
+        "react": "^18",
+        "react-dom": "^18",
+        "react-icons": "^5.3.0"
+    },
+    "devDependencies": {
+        "@types/node": "^20",
+        "@types/react": "^18",
+        "@types/react-dom": "^18",
+        "postcss": "^8",
+        "tailwindcss": "^3.4.1",
+        "typescript": "^5"
+    }
+}

apps/explorer/postcss.config.mjs

@@ -0,0 +1,8 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+    plugins: {
+        tailwindcss: {}
+    }
+}
+
+export default config

apps/explorer/src/app/[network]/[group]/page.tsx

@@ -0,0 +1,120 @@
+"use client"
+
+import { GroupResponse, SemaphoreSubgraph } from "@semaphore-protocol/data"
+import { SupportedNetwork } from "@semaphore-protocol/utils"
+import { usePathname } from "next/navigation"
+import { useCallback, useEffect, useState } from "react"
+import SearchBar from "@/components/SearchBar"
+
+export default function Group() {
+    const pathname = usePathname()
+    const network = pathname.split("/")[1] as SupportedNetwork
+    const groupId = pathname.split("/")[2] as SupportedNetwork
+
+    const [group, setGroup] = useState<GroupResponse>()
+    const [filteredCommitments, setFilteredCommitments] = useState<string[]>([])
+    const [filteredProofs, setFilteredProofs] = useState<any[]>([])
+
+    const [loading, setLoading] = useState(false)
+
+    useEffect(() => {
+        const fetchData = async () => {
+            setLoading(true)
+            const subgraph = new SemaphoreSubgraph(network)
+
+            const groupInfo = await subgraph.getGroup(groupId, {
+                members: true,
+                validatedProofs: true
+            })
+
+            setGroup(groupInfo)
+
+            setFilteredCommitments(groupInfo.members || [])
+            setFilteredProofs(groupInfo.validatedProofs || [])
+            setLoading(false)
+        }
+
+        fetchData()
+    }, [])
+
+    const filterCommitments = useCallback(
+        (identityCommitment: string) => {
+            if (group && group.members) {
+                const identityCommitments = group.members.filter((member) =>
+                    !identityCommitment ? true : member.includes(identityCommitment)
+                )
+
+                setFilteredCommitments(identityCommitments)
+            }
+        },
+        [group]
+    )
+
+    const filterProofs = useCallback(
+        (proofMessage: string) => {
+            if (group && group.validatedProofs) {
+                const proofs = group.validatedProofs.filter((proof) =>
+                    !proofMessage ? true : proof.message.includes(proofMessage)
+                )
+
+                setFilteredProofs(proofs)
+            }
+        },
+        [group]
+    )
+
+    return loading ? (
+        <div className="flex justify-center items-center h-screen">
+            <div className="loader" />
+        </div>
+    ) : (
+        group && (
+            <div className="mx-auto max-w-7xl px-4 lg:px-8 pt-20">
+                <div className="flex justify-center flex-col pb-10 font-[family-name:var(--font-geist-sans)]">
+                    <div className="flex justify-between gap-x-6 py-5">
+                        <div className="min-w-0 flex-auto">
+                            <p className="text-sm font-semibold leading-6 text-gray-800">ID: {group.id}</p>
+                            <p className="mt-1 truncate text-sm leading-6 text-gray-600">Admin: {group.admin}</p>
+                        </div>
+                        <div className="hidden shrink-0 sm:flex sm:flex-col sm:items-end">
+                            <p className="text-sm leading-6 text-gray-600">{group.members?.length} members</p>
+                            <p className="mt-1 text-sm leading-6 text-gray-600">
+                                {group.validatedProofs?.length} proofs
+                            </p>
+                        </div>
+                    </div>
+
+                    <div className="flex gap-4 flex-col md:flex-row">
+                        <div className="min-w-0 flex-auto">
+                            <SearchBar
+                                className="mb-6"
+                                placeholder="Identity commitment"
+                                onChange={filterCommitments}
+                            />
+
+                            <ul className="divide-y divide-gray-300">
+                                {filteredCommitments.map((commitment) => (
+                                    <li className="flex justify-between gap-x-6 py-2 px-5" key={commitment}>
+                                        <p className="mt-1 truncate text-xs leading-5 text-gray-500">{commitment}</p>
+                                    </li>
+                                ))}
+                            </ul>
+                        </div>
+
+                        <div className="min-w-0 flex-auto">
+                            <SearchBar className="mb-6" placeholder="Proof message" onChange={filterProofs} />
+
+                            <ul className="divide-y divide-gray-300">
+                                {filteredProofs.map((proof) => (
+                                    <li className="flex justify-between gap-x-6 py-2 px-5" key={proof.nullifier}>
+                                        <p className="mt-1 truncate text-xs leading-5 text-gray-500">{proof.message}</p>
+                                    </li>
+                                ))}
+                            </ul>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        )
+    )
+}

apps/explorer/src/app/[network]/page.tsx

@@ -0,0 +1,86 @@
+"use client"
+
+import { GroupResponse, SemaphoreSubgraph } from "@semaphore-protocol/data"
+import { SupportedNetwork } from "@semaphore-protocol/utils"
+import { usePathname } from "next/navigation"
+import { useCallback, useEffect, useState } from "react"
+import SearchBar from "@/components/SearchBar"
+
+export default function Network() {
+    const pathname = usePathname()
+    const network = (pathname.split("/")[1] || "sepolia") as SupportedNetwork
+
+    const [allGroups, setAllGroups] = useState<GroupResponse[]>([])
+    const [filteredGroups, setFilteredGroups] = useState<GroupResponse[]>([])
+
+    const [loading, setLoading] = useState(false)
+
+    useEffect(() => {
+        const fetchData = async () => {
+            setLoading(true)
+            const subgraph = new SemaphoreSubgraph(network)
+
+            const groups = await subgraph.getGroups({
+                members: true,
+                validatedProofs: true
+            })
+
+            setAllGroups(groups)
+            setFilteredGroups(groups.slice())
+            setLoading(false)
+        }
+
+        fetchData()
+    }, [])
+
+    const filterGroups = useCallback(
+        (groupId: string) => {
+            const groups = allGroups.filter((group) => (!groupId ? true : group.id.includes(groupId)))
+
+            setFilteredGroups(groups)
+        },
+        [allGroups]
+    )
+
+    return loading ? (
+        <div className="flex justify-center items-center h-screen">
+            <div className="loader" />
+        </div>
+    ) : (
+        allGroups && (
+            <div className="mx-auto max-w-7xl px-4 lg:px-8 pt-20">
+                <SearchBar className="mb-6" placeholder="Group ID" onChange={filterGroups} />
+
+                <div className="flex justify-center flex-col pb-10 font-[family-name:var(--font-geist-sans)]">
+                    <ul className="divide-y divide-gray-300 min-w-xl">
+                        {filteredGroups.map((group) => (
+                            <li key={group.id}>
+                                <a
+                                    href={`/${network}/${group.id}`}
+                                    className="flex justify-between gap-x-6 p-5 hover:bg-gray-200"
+                                >
+                                    <div className="min-w-0 flex-auto">
+                                        <p className="text-sm font-semibold leading-6 text-gray-800">ID: {group.id}</p>
+                                        <p className="mt-1 truncate text-sm leading-6 text-gray-600">
+                                            Admin: {group.admin}
+                                        </p>
+                                    </div>
+                                    <div className="hidden shrink-0 sm:flex sm:flex-col sm:items-end">
+                                        <p className="text-sm leading-6 text-gray-600">
+                                            {group.members?.length} member
+                                            {group.members?.length !== 1 ? "s" : ""}
+                                        </p>
+                                        <p className="mt-1 text-sm leading-6 text-gray-600">
+                                            {group.validatedProofs?.length} proof
+                                            {group.validatedProofs?.length !== 1 ? "s" : ""}
+                                        </p>
+                                    </div>
+                                </a>
+                            </li>
+                        ))}
+                    </ul>
+                </div>
+            </div>
+        )
+    )
+}