chore: v4.0.0-beta.3

Former-commit-id: 9c6f9006e0

.commitlintrc.js

@@ -0,0 +1,20 @@
+const fs = require("node:fs")
+const path = require("node:path")
+
+const packages = fs.readdirSync(path.resolve(__dirname, "packages"))
+
+module.exports = {
+    extends: ["@commitlint/config-conventional"],
+    prompt: {
+        scopes: [...packages],
+        markBreakingChangeMode: true,
+        allowCustomIssuePrefix: false,
+        allowEmptyIssuePrefix: false,
+        issuePrefixes: [
+            {
+                value: "re",
+                name: "re: ISSUES related"
+            }
+        ]
+    }
+}

.commitlintrc.json

@@ -1,3 +0,0 @@
-{
-    "extends": ["@commitlint/config-conventional"]
-}

.env.example

@@ -1,8 +1,10 @@
 DEFAULT_NETWORK=hardhat
-TREE_DEPTH=20
-ALL_SNARK_ARTIFACTS=true
+TREE_DEPTH=10
 REPORT_GAS=false
 BACKEND_PRIVATE_KEY=
 INFURA_API_KEY=
 COINMARKETCAP_API_KEY=
 ETHERSCAN_API_KEY=
+DEFENDER_KEY=
+DEFENDER_SECRET=
+CREATE2_SALT=1234

.github/ISSUE_TEMPLATE/♻️-refactoring.md

@@ -0,0 +1,17 @@
+---
+name: "♻️ Refactoring"
+about: 'about: Suggest any improvements for this project'
+title: ''
+labels: 'refactoring :recycle:'
+assignees: ''
+
+---
+
+**Describe the improvement you're thinking about**
+A clear and concise description of what you think could improve the code.
+
+**Describe alternatives you've considered**
+A clear and concise description of any alternative solutions you've considered.
+
+**Additional context**
+Add any other context or screenshots about the improvement request here.

.github/pull_request_template.md

@@ -1,24 +1,40 @@
-<!-- Please refer to our contributing documentation for any questions on submitting a pull request -->
-<!--- Provide a general summary of your changes in the Title above -->
+<!-- Please refer to our CONTRIBUTING documentation for any questions on submitting a pull request. -->
+<!-- Provide a general summary of your changes in the Title above. -->
 
 ## Description
 
-<!--- Describe your changes in detail -->
+<!-- Describe your changes in detail. -->
+<!-- You may want to answer some of the following questions: -->
+<!-- What kind of change does this PR introduce?** (Bug fix, feature, docs update, ...) -->
+<!-- What is the current behavior?** (You can also link to an open issue here) -->
+<!-- What is the new behavior (if this is a feature change)? -->
+<!-- Does this PR introduce a breaking change?** (What changes might users need to make in their application due to this PR?) -->
 
-## Related Issue
+## Related Issue(s)
 
-<!--- This project accepts pull requests related to open issues -->
-<!--- If suggesting a new feature or change, please discuss it in an issue first -->
-<!--- If fixing a bug, there should be an issue describing it with steps to reproduce -->
-<!--- Please link to the issue here: -->
+<!-- This project accepts pull requests related to open issues. -->
+<!-- If suggesting a new feature or change, please discuss it in an issue first. -->
+<!-- If fixing a bug, there should be an issue describing it with steps to reproduce. -->
+<!-- Please link to the issue(s) here -->
 
-## Does this introduce a breaking change?
-
--   [ ] Yes
--   [ ] No
-
-<!-- If this introduces a breaking change, please describe the impact and migration path for existing applications below. -->
+<!-- Closes # -->
+<!-- Fixes # -->
 
 ## Other information
 
 <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. -->
+<!-- Feel free to remove this section if you will not use it. -->
+
+## Checklist
+
+<!-- Please check if the PR fulfills these requirements. -->
+
+-   [ ] My code follows the style guidelines of this project
+-   [ ] I have performed a self-review of my code
+-   [ ] I have commented my code, particularly in hard-to-understand areas
+-   [ ] I have made corresponding changes to the documentation
+-   [ ] My changes generate no new warnings
+-   [ ] I have run `yarn prettier` and `yarn lint` without getting any errors
+-   [ ] I have added tests that prove my fix is effective or that my feature works
+-   [ ] New and existing unit tests pass locally with my changes
+-   [ ] Any dependent changes have been merged and published in downstream modules

.github/workflows/docs.yml

@@ -10,29 +10,20 @@ jobs:
         runs-on: ubuntu-latest
 
         steps:
-            - uses: actions/checkout@v2
+            - uses: actions/checkout@v4
 
             - name: Install Node.js
-              uses: actions/setup-node@v1
+              uses: actions/setup-node@v4
               with:
-                  node-version: 16.x
-
-            - name: Get yarn cache directory path
-              id: yarn-cache-dir-path
-              run: echo "::set-output name=dir::$(yarn config get cacheFolder)"
-
-            - name: Restore yarn cache
-              uses: actions/cache@v3
-              id: yarn-cache
-              with:
-                  path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
-                  key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
-                  restore-keys: |
-                      ${{ runner.os }}-yarn-
+                  node-version: 20
+                  cache: yarn
 
             - name: Install dependencies
               run: yarn
 
+            - name: Build libraries
+              run: yarn build:libraries
+
             - name: Generate doc website
               run: yarn docs
 

.github/workflows/production.yml

@@ -6,33 +6,20 @@ on:
             - main
 
 env:
-    TREE_DEPTH: 20
-    ALL_SNARK_ARTIFACTS: false
+    TREE_DEPTH: 10
 
 jobs:
     style:
         runs-on: ubuntu-latest
 
         steps:
-            - uses: actions/checkout@v2
+            - uses: actions/checkout@v4
 
             - name: Install Node.js
-              uses: actions/setup-node@v1
+              uses: actions/setup-node@v4
               with:
-                  node-version: 16.x
-
-            - name: Get yarn cache directory path
-              id: yarn-cache-dir-path
-              run: echo "::set-output name=dir::$(yarn config get cacheFolder)"
-
-            - name: Restore yarn cache
-              uses: actions/cache@v3
-              id: yarn-cache
-              with:
-                  path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
-                  key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
-                  restore-keys: |
-                      ${{ runner.os }}-yarn-
+                  node-version: 20
+                  cache: yarn
 
             - name: Install dependencies
               run: yarn
@@ -56,25 +43,13 @@ jobs:
         runs-on: ubuntu-latest
 
         steps:
-            - uses: actions/checkout@v2
+            - uses: actions/checkout@v4
 
             - name: Install Node.js
-              uses: actions/setup-node@v1
+              uses: actions/setup-node@v4
               with:
-                  node-version: 16.x
-
-            - name: Get yarn cache directory path
-              id: yarn-cache-dir-path
-              run: echo "::set-output name=dir::$(yarn config get cacheFolder)"
-
-            - name: Restore yarn cache
-              uses: actions/cache@v3
-              id: yarn-cache
-              with:
-                  path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
-                  key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
-                  restore-keys: |
-                      ${{ runner.os }}-yarn-
+                  node-version: 20
+                  cache: yarn
 
             - name: Install dependencies
               run: yarn
@@ -90,29 +65,25 @@ jobs:
         strategy:
             matrix:
                 type:
+                    - circuits
                     - libraries
                     - contracts
 
         steps:
-            - uses: actions/checkout@v2
+            - uses: actions/checkout@v4
 
             - name: Install Node.js
-              uses: actions/setup-node@v1
+              uses: actions/setup-node@v4
               with:
-                  node-version: 16.x
+                  node-version: 20
+                  cache: yarn
 
-            - name: Get yarn cache directory path
-              id: yarn-cache-dir-path
-              run: echo "::set-output name=dir::$(yarn config get cacheFolder)"
+            # https://github.com/iden3/circuits/blob/8fffb6609ecad0b7bcda19bb908bdb544bdb3cf7/.github/workflows/main.yml#L18-L22
+            - name: Setup Circom deps
+              run: sudo apt-get update && sudo apt-get install -y wget nlohmann-json3-dev libgmp-dev nasm g++ build-essential
 
-            - name: Restore yarn cache
-              uses: actions/cache@v3
-              id: yarn-cache
-              with:
-                  path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
-                  key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
-                  restore-keys: |
-                      ${{ runner.os }}-yarn-
+            - name: Setup Circom
+              run: wget https://github.com/iden3/circom/releases/latest/download/circom-linux-amd64 && sudo mv ./circom-linux-amd64 /usr/bin/circom && sudo chmod +x /usr/bin/circom
 
             - name: Install dependencies
               run: yarn
@@ -120,10 +91,11 @@ jobs:
             - name: Build libraries
               run: yarn build:libraries
 
-            - name: Test contracts and libraries
+            - name: Test libraries, contracts and circuits
               run: yarn test:${{ matrix.type }}
 
             - name: Coveralls
+              if: matrix.type != 'circuits'
               uses: coverallsapp/github-action@master
               with:
                   github-token: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/pull-requests.yml

@@ -4,33 +4,20 @@ on:
     pull_request:
 
 env:
-    TREE_DEPTH: 20
-    ALL_SNARK_ARTIFACTS: false
+    TREE_DEPTH: 10
 
 jobs:
     style:
         runs-on: ubuntu-latest
 
         steps:
-            - uses: actions/checkout@v2
+            - uses: actions/checkout@v4
 
             - name: Install Node.js
-              uses: actions/setup-node@v1
+              uses: actions/setup-node@v4
               with:
-                  node-version: 16.x
-
-            - name: Get yarn cache directory path
-              id: yarn-cache-dir-path
-              run: echo "::set-output name=dir::$(yarn config get cacheFolder)"
-
-            - name: Restore yarn cache
-              uses: actions/cache@v3
-              id: yarn-cache
-              with:
-                  path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
-                  key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
-                  restore-keys: |
-                      ${{ runner.os }}-yarn-
+                  node-version: 20
+                  cache: yarn
 
             - name: Install dependencies
               run: yarn
@@ -54,25 +41,20 @@ jobs:
         runs-on: ubuntu-latest
 
         steps:
-            - uses: actions/checkout@v2
+            - uses: actions/checkout@v4
 
             - name: Install Node.js
-              uses: actions/setup-node@v1
+              uses: actions/setup-node@v4
               with:
-                  node-version: 16.x
+                  node-version: 20
+                  cache: yarn
 
-            - name: Get yarn cache directory path
-              id: yarn-cache-dir-path
-              run: echo "::set-output name=dir::$(yarn config get cacheFolder)"
+            # https://github.com/iden3/circuits/blob/8fffb6609ecad0b7bcda19bb908bdb544bdb3cf7/.github/workflows/main.yml#L18-L22
+            - name: Setup Circom deps
+              run: sudo apt-get update && sudo apt-get install -y wget nlohmann-json3-dev libgmp-dev nasm g++ build-essential
 
-            - name: Restore yarn cache
-              uses: actions/cache@v3
-              id: yarn-cache
-              with:
-                  path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
-                  key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
-                  restore-keys: |
-                      ${{ runner.os }}-yarn-
+            - name: Setup Circom
+              run: wget https://github.com/iden3/circom/releases/latest/download/circom-linux-amd64 && sudo mv ./circom-linux-amd64 /usr/bin/circom && sudo chmod +x /usr/bin/circom
 
             - name: Install dependencies
               run: yarn
@@ -83,5 +65,5 @@ jobs:
             - name: Build subgraph
               run: yarn build:subgraph
 
-            - name: Test contracts, libraries and subgraph
+            - name: Test contracts, libraries, circuits and subgraph
               run: yarn test

.github/workflows/release.yml

@@ -13,31 +13,31 @@ jobs:
         runs-on: ubuntu-latest
 
         steps:
-            - uses: actions/checkout@v3
+            - uses: actions/checkout@v4
               with:
                   fetch-depth: 0
 
             - name: Install Node.js
-              uses: actions/setup-node@v3
+              uses: actions/setup-node@v4
               with:
-                  node-version: 16.x
+                  node-version: 20
+                  cache: yarn
+                  registry-url: "https://registry.npmjs.org"
 
-            - name: Get yarn cache directory path
-              id: yarn-cache-dir-path
-              run: echo "::set-output name=dir::$(yarn config get cacheFolder)"
-
-            - name: Restore yarn cache
-              uses: actions/cache@v3
-              id: yarn-cache
-              with:
-                  path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
-                  key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
-                  restore-keys: |
-                      ${{ runner.os }}-yarn-
+            - name: Authentication
+              run: |
+                  echo npmAuthToken: "$NODE_AUTH_TOKEN" >> ./.yarnrc.yml
+              env:
+                  NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
 
             - name: Install dependencies
               run: yarn
 
+            - name: Publish packages
+              run: yarn version:publish
+              env:
+                  NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+
             - run: yarn version:release
               env:
                   GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}

.gitignore

@@ -73,9 +73,6 @@ dist
 artifacts
 cache
 typechain-types
-packages/contracts/deployed-contracts/undefined.json
-packages/contracts/deployed-contracts/hardhat.json
-packages/contracts/deployed-contracts/localhost.json
 
 # Stores VSCode versions used for testing VSCode extensions
 .vscode-test

.husky/prepare-commit-msg

@@ -0,0 +1,6 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+if [ "$NO_HOOK" != "1" ]; then
+  exec < /dev/tty && yarn cz --hook || true
+fi

.prettierignore

@@ -12,15 +12,6 @@ coverage.json
 artifacts
 cache
 typechain-types
-packages/contracts/deployed-contracts/undefined.json
-packages/contracts/deployed-contracts/hardhat.json
-packages/contracts/deployed-contracts/localhost.json
-
-# circuits
-circuits
-
-# contracts
-Verifier*.sol
 
 # production
 dist

.yarn/plugins/@yarnpkg/plugin-version.cjs.REMOVED.git-id

@@ -1 +0,0 @@
-87de4f440a77841135f97a187e09140c6d4e6ae2

.yarn/releases/yarn-3.2.1.cjs.REMOVED.git-id

@@ -1 +0,0 @@
-b3cadff6efb37a12712d12c2553ec703dbcaa4dd

.yarn/releases/yarn-4.1.0.cjs.REMOVED.git-id

@@ -0,0 +1 @@
+738adce5914a0e193f2e1255e4dcf7042256a1c1

.yarnrc.yml

@@ -1,11 +1,9 @@
 checksumBehavior: update
 
+compressionLevel: mixed
+
+enableGlobalCache: false
+
 nodeLinker: node-modules
 
-plugins:
-    - path: .yarn/plugins/@yarnpkg/plugin-workspace-tools.cjs
-      spec: "@yarnpkg/plugin-workspace-tools"
-    - path: .yarn/plugins/@yarnpkg/plugin-version.cjs
-      spec: "@yarnpkg/plugin-version"
-
-yarnPath: .yarn/releases/yarn-3.2.1.cjs
+yarnPath: .yarn/releases/yarn-4.1.0.cjs

CONTRIBUTING.md

@@ -28,7 +28,7 @@ Pull requests are great if you want to add a feature or fix a bug. Here's a quic
 
 6. Commit your changes.
 
-7. Push to your fork and submit a pull request on our `dev` branch. Please provide us with some explanation of why you made the changes you made. For new features make sure to explain a standard use case to us.
+7. Push to your fork and submit a pull request on our `main` branch. Please provide us with some explanation of why you made the changes you made. For new features make sure to explain a standard use case to us.
 
 ## CI (Github Actions) Tests
 
@@ -46,7 +46,7 @@ We always use ESLint and Prettier. To check that your code follows the rules, si
 
 For commits it is recommended to use [Conventional Commits](https://www.conventionalcommits.org).
 
-Don't worry if it looks complicated, in our repositories, after `git add`, you can usually run the npm script `yarn commit` to make many of these steps interactive.
+Don't worry if it looks complicated, in our repositories, `git commit` opens an interactive app to create your conventional commit.
 
 Each commit message consists of a **header**, a **body** and a **footer**. The **header** has a special format that includes a **type**, a **scope** and a **subject**:
 
@@ -93,7 +93,6 @@ Just as in the subject, use the imperative, present tense: "change" not "changed
 ### Branch rules
 
 -   There must be a `main` branch, used only for the releases.
--   There must be a `dev` branch, used to merge all the branches under it.
 -   Avoid long descriptive names for long-lived branches.
 -   Use kebab-case (no CamelCase).
 -   Use grouping tokens (words) at the beginning of your branch names (in a similar way to the `type` of commit).

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2022 Ethereum Foundation
+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

README.md

@@ -34,7 +34,9 @@
     <a href="https://www.gitpoap.io/gh/semaphore-protocol/semaphore" target="_blank">
         <img src="https://public-api.gitpoap.io/v1/repo/semaphore-protocol/semaphore/badge">
     </a>
-
+    <a href="http://commitizen.github.io/cz-cli/">
+        <img alt="Commitizen friendly" src="https://img.shields.io/badge/commitizen-friendly-586D76?style=flat-square">
+    </a>
 </p>
 
 <div align="center">
@@ -69,6 +71,25 @@ The core of the Semaphore protocol is in the [circuit logic](/packages/circuits/
     <th>Version</th>
     <th>Downloads</th>
     <tbody>
+        <tr>
+            <td>
+                <a href="/packages/core">
+                    @semaphore-protocol/core
+                </a>
+            </td>
+            <td>
+                <!-- NPM version -->
+                <a href="https://npmjs.org/package/@semaphore-protocol/core">
+                    <img src="https://img.shields.io/npm/v/@semaphore-protocol/core.svg?style=flat-square" alt="NPM version" />
+                </a>
+            </td>
+            <td>
+                <!-- Downloads -->
+                <a href="https://npmjs.org/package/@semaphore-protocol/core">
+                    <img src="https://img.shields.io/npm/dm/@semaphore-protocol/core.svg?style=flat-square" alt="Downloads" />
+                </a>
+            </td>
+        </tr>
         <tr>
             <td>
                 <a href="/packages/contracts">
@@ -214,6 +235,28 @@ The core of the Semaphore protocol is in the [circuit logic](/packages/circuits/
                 </a>
             </td>
         </tr>
+        <tr>
+            <td>
+                <a href="/packages/utils">
+                    @semaphore-protocol/utils
+                </a>
+                <a href="https://js.semaphore.pse.dev/modules/_semaphore_protocol_utils">
+                    (docs)
+                </a>
+            </td>
+            <td>
+                <!-- NPM version -->
+                <a href="https://npmjs.org/package/@semaphore-protocol/utils">
+                    <img src="https://img.shields.io/npm/v/@semaphore-protocol/utils.svg?style=flat-square" alt="NPM version" />
+                </a>
+            </td>
+            <td>
+                <!-- Downloads -->
+                <a href="https://npmjs.org/package/@semaphore-protocol/utils">
+                    <img src="https://img.shields.io/npm/dm/@semaphore-protocol/utils.svg?style=flat-square" alt="Downloads" />
+                </a>
+            </td>
+        </tr>
         <tr>
             <td>
                 <a href="/packages/heyauthn">
@@ -293,14 +336,6 @@ yarn commit
 
 It will also automatically check that the modified files comply with ESLint and Prettier rules.
 
-### Snark artifacts
-
-Download the Semaphore snark artifacts needed to generate and verify proofs:
-
-```bash
-yarn download:snark-artifacts
-```
-
 ### Testing
 
 Run [Jest](https://jestjs.io/) to test the JS libraries:
@@ -323,10 +358,10 @@ yarn test
 
 ### Build libraries & compile contracts
 
-Run [Rollup](https://www.rollupjs.org) to build all the packages:
+Run [Rollup](https://www.rollupjs.org) and [TheGraph](https://www.npmjs.com/package/@graphprotocol/graph-cli) to build all the packages and the subgraph:
 
 ```bash
-yarn build:libraries
+yarn build
 ```
 
 Compile the smart contracts with [Hardhat](https://hardhat.org/):
@@ -344,3 +379,15 @@ yarn docs
 ```
 
 The output will be placed on the `docs` folder.
+
+### Releases
+
+Bump a new version with:
+
+```bash
+yarn version:bump <version>
+# e.g. yarn version:bump 2.0.0
+```
+
+It will create a commit and a git tag that will need to pushed on the main branch. A workflow will be triggered and will
+publish the Semaphore packages on [npm](https://www.npmjs.com/) and release a new version on Github with its changelogs automatically.

apps/docs/docusaurus.config.js

@@ -1,96 +0,0 @@
-// @ts-check
-// Note: type annotations allow type checking and IDEs autocompletion
-
-const lightCodeTheme = require("prism-react-renderer/themes/github")
-const darkCodeTheme = require("prism-react-renderer/themes/dracula")
-
-/** @type {import('@docusaurus/types').Config} */
-module.exports = {
-    title: "Semaphore",
-    tagline: "Documentation and Guides",
-    url: "https://docs.semaphore.pse.dev/",
-    baseUrl: "/",
-    favicon: "/img/favicon.ico",
-    onBrokenLinks: "throw",
-    onBrokenMarkdownLinks: "warn",
-    organizationName: "semaphore-protocol",
-    projectName: "semaphore",
-    trailingSlash: false,
-
-    plugins: ["docusaurus-plugin-sass"],
-
-    i18n: {
-        defaultLocale: "en",
-        locales: ["en", "es"]
-    },
-
-    presets: [
-        [
-            "classic",
-            /** @type {import('@docusaurus/preset-classic').Options} */
-            ({
-                docs: {
-                    routeBasePath: "/",
-                    sidebarPath: require.resolve("./sidebars.js"),
-                    editUrl: "https://github.com/semaphore-protocol/website/edit/main/",
-                    includeCurrentVersion: false
-                },
-                theme: {
-                    customCss: [require.resolve("./src/css/custom.scss")]
-                }
-            })
-        ]
-    ],
-
-    themeConfig:
-        /** @type {import('@docusaurus/preset-classic').ThemeConfig} */
-        ({
-            // announcementBar: {
-            // id: "semaphore-v3",
-            // content:
-            // '<b>We are pleased to announce the release of <a target="_blank" rel="noopener noreferrer" href="https://github.com/semaphore-protocol/semaphore/releases/tag/v3.0.0">Semaphore V3</a> 🎉</b>',
-            // backgroundColor: "#DAE0FF",
-            // textColor: "#000000"
-            // },
-            navbar: {
-                logo: {
-                    alt: "Semaphore Logo",
-                    src: "img/semaphore-logo.svg"
-                },
-                items: [
-                    {
-                        label: "Whitepaper",
-                        to: "https://docs.semaphore.pse.dev/whitepaper-v1.pdf",
-                        position: "right",
-                        className: "V1"
-                    },
-                    {
-                        label: "Github",
-                        href: "https://github.com/semaphore-protocol",
-                        position: "right"
-                    },
-                    {
-                        type: "localeDropdown",
-                        position: "right"
-                    }
-                ]
-            },
-            colorMode: {
-                defaultMode: "dark",
-                // Should we use the prefers-color-scheme media-query,
-                // using user system preferences, instead of the hardcoded defaultMode
-                respectPrefersColorScheme: true
-            },
-            prism: {
-                theme: lightCodeTheme,
-                darkTheme: darkCodeTheme,
-                additionalLanguages: ["solidity"]
-            },
-            algolia: {
-                appId: "6P229KVKCB",
-                apiKey: "879bb5b002b6370f181f0f79f5c2afe2",
-                indexName: "semaphoreliedzkp",
-                contextualSearch: true
-            }
-        })
-}

apps/docs/docusaurus.config.ts

@@ -0,0 +1,127 @@
+import type * as Preset from "@docusaurus/preset-classic"
+import type { Config } from "@docusaurus/types"
+import { themes } from "prism-react-renderer"
+
+const lightCodeTheme = themes.oneLight
+const darkCodeTheme = themes.oneDark
+
+const config: Config = {
+    title: "Semaphore",
+    tagline: "Semaphore documentation and guides.",
+    url: "https://docs.semaphore.pse.dev/",
+    baseUrl: "/",
+    favicon: "/img/favicon.ico",
+    onBrokenLinks: "throw",
+    onBrokenMarkdownLinks: "warn",
+    organizationName: "semaphore-protocol",
+    projectName: "semaphore",
+    trailingSlash: false,
+    plugins: ["docusaurus-plugin-sass"],
+    i18n: {
+        defaultLocale: "en",
+        locales: ["en", "es"]
+    },
+    headTags: [
+        {
+            tagName: "link",
+            attributes: {
+                rel: "preconnect",
+                href: "https://psedev.matomo.cloud"
+            }
+        },
+        {
+            tagName: "script",
+            innerHTML: `
+                var _paq = window._paq = window._paq || [];
+                /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
+                _paq.push(['trackPageView']);
+                _paq.push(['enableLinkTracking']);
+                (function() {
+                    var u="https://psedev.matomo.cloud/";
+                    _paq.push(['setTrackerUrl', u+'matomo.php']);
+                    _paq.push(['setSiteId', '10']);
+                    var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
+                    g.async=true; g.src='//cdn.matomo.cloud/psedev.matomo.cloud/matomo.js'; s.parentNode.insertBefore(g,s);
+                })();
+            `,
+            attributes: {}
+        }
+    ],
+    presets: [
+        [
+            "classic",
+            {
+                docs: {
+                    routeBasePath: "/",
+                    sidebarPath: require.resolve("./sidebars.js"),
+                    editUrl: "https://github.com/semaphore-protocol/semaphore/edit/main/apps/docs",
+                    includeCurrentVersion: false
+                },
+                theme: {
+                    customCss: [require.resolve("./src/css/custom.scss")]
+                }
+            } satisfies Preset.Options
+        ]
+    ],
+    themeConfig: {
+        announcementBar: {
+            id: "semaphore-v4-beta",
+            content:
+                '<b>Semaphore V4-beta is out 🎉 <a href="/getting-started">Try it out</a> and let us know for any feedback on <a href="https://semaphore.pse.dev/discord" target="_blank">Discord</a> or <a href="https://github.com/orgs/semaphore-protocol/discussions" target="_blank">Github</a>!</b>',
+            backgroundColor: "#dde6fc",
+            textColor: "#000000"
+        },
+        navbar: {
+            logo: {
+                alt: "Semaphore Logo",
+                src: "img/semaphore-logo.svg"
+            },
+            items: [
+                {
+                    type: "docsVersionDropdown",
+                    position: "left",
+                    dropdownActiveClassDisabled: true
+                },
+                {
+                    label: "Whitepaper",
+                    to: "https://docs.semaphore.pse.dev/whitepaper-v1.pdf",
+                    position: "left",
+                    className: "whitepaper-v1"
+                },
+                {
+                    label: "Github",
+                    href: "https://github.com/semaphore-protocol",
+                    position: "right"
+                },
+                {
+                    label: "Website",
+                    href: "https://semaphore.pse.dev",
+                    position: "right"
+                },
+                {
+                    type: "localeDropdown",
+                    position: "right"
+                }
+            ]
+        },
+        colorMode: {
+            defaultMode: "light",
+            // Should we use the prefers-color-scheme media-query,
+            // using user system preferences, instead of the hardcoded defaultMode
+            respectPrefersColorScheme: true
+        },
+        prism: {
+            theme: lightCodeTheme,
+            darkTheme: darkCodeTheme,
+            additionalLanguages: ["solidity", "bash", "typescript"]
+        },
+        algolia: {
+            appId: "6P229KVKCB",
+            apiKey: "879bb5b002b6370f181f0f79f5c2afe2",
+            indexName: "semaphoreliedzkp",
+            contextualSearch: true
+        }
+    } satisfies Preset.ThemeConfig
+}
+
+export default config

apps/docs/i18n/en/code.json

@@ -392,6 +392,6 @@
         "message": "X (Twitter)"
     },
     "footer.copyright": {
-        "message": "Copyright © 2023 Ethereum Foundation"
+        "message": "Copyright © 2024 Ethereum Foundation"
     }
 }

apps/docs/i18n/es/code.json

@@ -392,6 +392,6 @@
         "message": "X (Twitter)"
     },
     "footer.copyright": {
-        "message": "Copyright © 2023 Ethereum Foundation"
+        "message": "Copyright © 2024 Ethereum Foundation"
     }
 }

apps/docs/i18n/es/docusaurus-plugin-content-docs/version-V2/glossary.md

@@ -40,7 +40,7 @@ For more information, see [Merkle tree in Wikipedia](https://en.wikipedia.org/wi
 
 A value used to prevent double entry or double signalling.
 
-See [Circuit nullifier hash](/technical-reference/circuits/#nullifier-hash).
+See [Circuit nullifier hash](/technical-reference/circuits/#hash-anulador-nullifier-hash).
 
 ## Relay
 
@@ -60,5 +60,5 @@ To generate or verify valid zero-knowledge proofs with Semaphore, applications m
 -   semaphore.wasm
 -   semaphore.json
 
-For a complete list of ready-to-use files, see <http://www.trusted-setup-pse.org>.
+For a complete list of ready-to-use files, see [trusted-setup-pse.org](https://www.trusted-setup-pse.org).
 To learn more, see the [trusted setup ceremony](https://storage.googleapis.com/trustedsetup-a86f4.appspot.com/semaphore/semaphore_top_index.html).

apps/docs/i18n/es/docusaurus-plugin-content-docs/version-V2/guides/groups.md

@@ -20,14 +20,14 @@ title: Groups
 
 Use Semaphore in your application or smart contract to create off-chain and on-chain groups.
 
-A [Semaphore group](/glossary/#semaphore-group) contains [identity commitments](/glossary/#identity-commitment) of group members.
+A [Semaphore group](/glossary/#grupo-semaphore) contains [identity commitments](/glossary/#compromiso-de-identidad-identity-commitment) of group members.
 Example uses of groups include the following:
 
 -   Poll question that attendees join to rate an event.
 -   Ballot that members join to vote on a proposal.
 -   Whistleblowers who are verified employees of an organization.
 
-A Semaphore group is an [incremental Merkle tree](/glossary/#incremental-merkle-tree), and group members (i.e., [identity commitments](/glossary/#identity-commitments)) are tree leaves.
+A Semaphore group is an [incremental Merkle tree](/glossary/#árbol-de-merkle-merkle-tree), and group members (i.e., identity commitments) are tree leaves.
 Semaphore groups set the following two parameters:
 
 -   **Tree depth**: the maximum number of members a group can contain (`max size = 2 ^ tree depth`).

apps/docs/i18n/es/docusaurus-plugin-content-docs/version-V2/use-cases/private-voting.md

@@ -133,5 +133,5 @@ When a member votes (for example, by selecting a radio button), then the dApp ta
 
 ### Related
 
--   To get started developing with Semaphore, see the [Quick setup](/quick-setup/) guide.
+-   To get started developing with Semaphore, see the [Quick setup](/V2/quick-setup/) guide.
 -   For an example app that you can use to start your own project, see [Semaphore boilerplate](https://github.com/semaphore-protocol/boilerplate).

apps/docs/i18n/es/docusaurus-plugin-content-docs/version-V3/glossary.md

@@ -58,7 +58,7 @@ Para generar o verificar pruebas válidas de conocimiento cero con Semaphore, la
 -   semaphore.wasm
 -   semaphore.json
 
-Para ver una lista completa de archivos listos para utilizarse, vea <http://www.trusted-setup-pse.org>.
+Para ver una lista completa de archivos listos para utilizarse, vea [trusted-setup-pse.org](https://www.trusted-setup-pse.org).
 Para aprender más, vea la [ceremonia de configuración de confianza](https://storage.googleapis.com/trustedsetup-a86f4.appspot.com/semaphore/semaphore_top_index.html) (trusted setup ceremony).
 
 ## Señales (Signals)

apps/docs/i18n/es/docusaurus-plugin-content-docs/version-V3/guides/fetching-data.mdx

@@ -28,21 +28,21 @@ values={[
 <TabItem value="npm">
 
 ```bash
-npm install @semaphore-protocol/data
+npm install @semaphore-protocol/data@^3
 ```
 
 </TabItem>
 <TabItem value="yarn">
 
 ```bash
-yarn add @semaphore-protocol/data
+yarn add @semaphore-protocol/data@^3
 ```
 
 </TabItem>
 <TabItem value="pnpm">
 
 ```bash
-pnpm add @semaphore-protocol/data
+pnpm add @semaphore-protocol/data@^3
 ```
 
 </TabItem>
@@ -178,4 +178,4 @@ const semaphoreEthers = new SemaphoreEthers("sepolia")
 const members = await semaphoreEthers.getGroupMembers(groupId)
 const group = new Group(groupId, 20, members)
 ```
-:::
+:::

apps/docs/i18n/es/docusaurus-plugin-content-docs/version-V3/guides/groups.mdx

@@ -54,21 +54,21 @@ values={[
 <TabItem value="npm">
 
 ```bash
-npm install @semaphore-protocol/group
+npm install @semaphore-protocol/group@^3
 ```
 
 </TabItem>
 <TabItem value="yarn">
 
 ```bash
-yarn add @semaphore-protocol/group
+yarn add @semaphore-protocol/group@^3
 ```
 
 </TabItem>
 <TabItem value="pnpm">
 
 ```bash
-pnpm add @semaphore-protocol/group
+pnpm add @semaphore-protocol/group@^3
 ```
 
 </TabItem>
@@ -156,4 +156,4 @@ Alternativamente, puede utilizar un contrato [`Semaphore.sol`](https://github.co
 
 :::caution
 `Semaphore.sol` incluye un mecanismo para verificar pruebas Semaphore creadas con raíces de árboles de Merkle antiguas. La duración de este mecanismo puede ser definido por el admin en la función `createGroup`. Por lo tanto, los miembros de un grupo pueden continuar generando pruebas válidas incluso después de ser removidos. Para más información ver el issue [#98](https://github.com/semaphore-protocol/semaphore/issues/98).
-:::
+:::

apps/docs/i18n/es/docusaurus-plugin-content-docs/version-V3/guides/identities.mdx

@@ -37,19 +37,19 @@ values={[
 <TabItem value="npm">
 
 ```bash
-npm install @semaphore-protocol/identity
+npm install @semaphore-protocol/identity@^3
 ```
 </TabItem>
 <TabItem value="yarn">
 ```bash
-yarn add @semaphore-protocol/identity
+yarn add @semaphore-protocol/identity@^3
 ```
 
 </TabItem>
 <TabItem value="pnpm">
 
 ```bash
-pnpm add @semaphore-protocol/identity
+pnpm add @semaphore-protocol/identity@^3
 ```
 
 </TabItem>

apps/docs/i18n/es/docusaurus-plugin-content-docs/version-V3/guides/proofs.mdx

@@ -43,20 +43,20 @@ values={[
 <TabItem value="npm">
 
 ```bash
-npm install @semaphore-protocol/proof
+npm install @semaphore-protocol/proof@^3
 ```
 
 </TabItem>
 <TabItem value="yarn">
 
 ```bash
-yarn add @semaphore-protocol/proof
+yarn add @semaphore-protocol/proof@^3
 ```
 </TabItem>
 <TabItem value="pnpm">
 
 ```bash
-pnpm add @semaphore-protocol/proof
+pnpm add @semaphore-protocol/proof@^3
 ```
 
 </TabItem>

apps/docs/i18n/es/docusaurus-plugin-content-docs/version-V3/quick-setup.mdx

@@ -10,13 +10,13 @@ import TabItem from "@theme/TabItem"
 Semaphore ofrece un CLI oficial para configurar su proyecto con Hardhat. Si su NPM es versión 5.2 or más reciente puede utilizar NPX:
 
 ```bash
-npx @semaphore-protocol/cli@latest create my-app --template monorepo-ethers
+npx @semaphore-protocol/cli@^3 create my-app --template monorepo-ethers
 ```
 
-De lo contrario, instale `@semaphore-protocol/cli` de forma global y corra el comando `init`:
+De lo contrario, instale `@semaphore-protocol/cli@^3` de forma global y corra el comando `init`:
 
 ```bash
-npm i -g @semaphore-protocol/cli@latest
+npm i -g @semaphore-protocol/cli@^3
 semaphore create my-app --template monorepo-ethers
 ```
 
@@ -333,4 +333,4 @@ pnpm dev
 ```
 
 </TabItem>
-</Tabs>
+</Tabs>

apps/docs/package.json

@@ -1,6 +1,5 @@
 {
     "name": "semaphore-docs",
-    "version": "2.0.0",
     "private": true,
     "scripts": {
         "start": "docusaurus start",
@@ -14,26 +13,24 @@
         "write-heading-ids": "docusaurus write-heading-ids"
     },
     "dependencies": {
-        "@docusaurus/core": "2.2.0",
-        "@docusaurus/preset-classic": "2.2.0",
-        "@mdx-js/react": "^1.6.22",
+        "@docusaurus/core": "3.1.1",
+        "@docusaurus/preset-classic": "3.1.1",
+        "@mdx-js/react": "^3.0.0",
         "@svgr/webpack": "^5.5.0",
         "clsx": "^1.2.1",
-        "docusaurus-plugin-sass": "^0.2.2",
+        "docusaurus-plugin-sass": "^0.2.5",
         "file-loader": "^6.2.0",
-        "prism-react-renderer": "^1.3.5",
-        "react": "^17.0.2",
-        "react-dom": "^17.0.2",
+        "prism-react-renderer": "^2.1.0",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
         "sass": "^1.52.3",
         "url-loader": "^4.1.1"
     },
     "devDependencies": {
-        "@docusaurus/module-type-aliases": "2.2.0",
-        "@tsconfig/docusaurus": "^1.0.6",
-        "@types/react": "^17.0.14",
-        "@types/react-helmet": "^6.1.2",
-        "@types/react-router-dom": "^5.1.8",
-        "typescript": "^4.3.5"
+        "@docusaurus/module-type-aliases": "3.1.1",
+        "@docusaurus/tsconfig": "3.1.1",
+        "@types/react": "^18.2.29",
+        "typescript": "~5.2.2"
     },
     "browserslist": {
         "production": [
@@ -46,5 +43,8 @@
             "last 1 firefox version",
             "last 1 safari version"
         ]
+    },
+    "engines": {
+        "node": ">=18.0"
     }
 }

apps/docs/src/components/Articles.tsx

@@ -0,0 +1,25 @@
+import React, { useEffect, useState } from "react"
+
+export default function Articles() {
+    const [articles, setArticles] = useState<any[]>([])
+
+    useEffect(() => {
+        fetch("https://raw.githubusercontent.com/semaphore-protocol/semaphore/main/apps/website/src/data/articles.json")
+            .then((response) => response.json())
+            .catch(() => [])
+            .then(setArticles)
+    }, [])
+
+    return (
+        <ul>
+            {articles.map((article) => (
+                <li key={article.url + article.title}>
+                    <a href={article.url} target="_blank" rel="noreferrer">
+                        {article.title}
+                    </a>{" "}
+                    - {article.authors.join(", ")} (<i>{article.date}</i>)
+                </li>
+            ))}
+        </ul>
+    )
+}

apps/docs/src/components/DeployedContracts.tsx

@@ -0,0 +1,56 @@
+import Heading from "@theme/Heading"
+import { useEffect, useState } from "react"
+
+function capitalizeFirstLetter(s: string): string {
+    return s.charAt(0).toUpperCase() + s.slice(1)
+}
+
+function getEtherscanLink(network: string): string {
+    switch (network) {
+        case "sepolia":
+            return "https://sepolia.etherscan.io/address/"
+        case "mumbai":
+            return "https://mumbai.polygonscan.com/address/"
+        case "arbitrum":
+            return "https://arbiscan.io/address/"
+        case "arbitrum-sepolia":
+            return "https://sepolia.arbiscan.io/address/"
+        case "optimism-sepolia":
+            return "https://sepolia-optimism.etherscan.io/address/"
+        default:
+            return ""
+    }
+}
+
+export default function DeployedContracts() {
+    const [deployedContracts, setDeployedContracts] = useState<any[]>([])
+
+    useEffect(() => {
+        fetch(
+            "https://raw.githubusercontent.com/semaphore-protocol/semaphore/main/packages/contracts/deployed-contracts.json"
+        )
+            .then((response) => response.json())
+            .catch(() => [])
+            .then(setDeployedContracts)
+    }, [])
+
+    return (
+        <div>
+            {deployedContracts.map(({ network, contracts }) => (
+                <div key={network}>
+                    <Heading as="h2">{capitalizeFirstLetter(network)}</Heading>
+                    <ul>
+                        {contracts.map(({ name, address }) => (
+                            <li key={address}>
+                                {name}:{" "}
+                                <a href={getEtherscanLink(network) + address} target="_blank" rel="noreferrer">
+                                    {address}
+                                </a>
+                            </li>
+                        ))}
+                    </ul>
+                </div>
+            ))}
+        </div>
+    )
+}

apps/docs/src/components/RemoteCode.tsx

@@ -0,0 +1,21 @@
+import React, { useEffect, useState } from "react"
+import CodeBlock from "@theme/CodeBlock"
+
+export default function RemoteCode({ url, language, title }: { url: string; language: string; title: string }) {
+    const [code, setCode] = useState<string>("")
+
+    useEffect(() => {
+        fetch(url)
+            .then((response) => response.text())
+            .catch(() => "")
+            .then((text) => setCode(text))
+    }, [url])
+
+    return (
+        <div>
+            <CodeBlock language={language} title={title} showLineNumbers>
+                {code}
+            </CodeBlock>
+        </div>
+    )
+}

apps/docs/src/components/Videos.tsx

@@ -0,0 +1,25 @@
+import React, { useEffect, useState } from "react"
+
+export default function Videos() {
+    const [videos, setVideos] = useState<any[]>([])
+
+    useEffect(() => {
+        fetch("https://raw.githubusercontent.com/semaphore-protocol/semaphore/main/apps/website/src/data/videos.json")
+            .then((response) => response.json())
+            .catch(() => [])
+            .then(setVideos)
+    }, [])
+
+    return (
+        <ul>
+            {videos.map((video) => (
+                <li key={video.url + video.title}>
+                    <a href={video.url} target="_blank" rel="noreferrer">
+                        {video.title}
+                    </a>{" "}
+                    - {video.speakers.join(", ")} at <u>{video.eventName}</u> (<i>{video.date}</i>)
+                </li>
+            ))}
+        </ul>
+    )
+}

apps/docs/src/css/custom.scss

@@ -6,8 +6,12 @@
 
 /* You can override the default Infima variables here. */
 
-@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=DMSans:wght@400;500;600&display=swap");
+@font-face {
+    font-family: "DM Sans";
+    src: url("/static/fonts/DMSans.ttf") format("truetype");
+    font-weight: 400;
+    font-style: normal;
+}
 
 :root {
     --ifm-color-primary: "linear(to-r, #4771ea, #2735a6)";
@@ -73,13 +77,17 @@ html[data-theme="light"] {
 }
 
 html {
-    font-family: "DMSans", sans-serif;
+    font-family: "DM Sans", sans-serif;
     font-size: 18px;
     font-variant: none;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-    font-feature-settings: "ss01" on, "ss02" on, "cv01" on, "cv03" on;
+    font-feature-settings:
+        "ss01" on,
+        "ss02" on,
+        "cv01" on,
+        "cv03" on;
     font-weight: 400;
 }
 
@@ -93,7 +101,7 @@ svg.custom-icon circle {
 }
 
 p {
-    font-family: "DMSans", sans-serif;
+    font-family: "DM Sans", sans-serif;
     line-height: 32px;
     font-weight: 400;
 }
@@ -109,7 +117,6 @@ h2,
 h3,
 h4,
 h5 {
-    font-family: "Outfit", sans-serif;
     font-weight: 500;
 }
 
@@ -147,7 +154,6 @@ h5 {
 }
 
 .navbar {
-    height: 95px;
     align-items: center;
     box-shadow: none;
     font-size: 18px;
@@ -234,6 +240,18 @@ html[data-theme="light"] {
     }
 }
 
+/* Navbar items visibility */
+
+a.whitepaper-v1 {
+    display: none;
+}
+
+html.docs-version-V1 {
+    a.whitepaper-v1 {
+        display: inline-block;
+    }
+}
+
 .container {
     padding: 0px;
     /* margin: 4rem auto 0px; */
@@ -256,18 +274,6 @@ html[data-theme="light"] {
     box-shadow: none !important;
 }
 
-.navbar__title {
-    font-family: "Outfit", sans-serif;
-    color: var(--ifm-color-primary);
-    font-weight: 500;
-}
-
-.navbar__link {
-    font-family: "Outfit", sans-serif;
-    color: var(--ifm-color-primary);
-    font-weight: 400;
-}
-
 .menu__link {
     font-size: 18px;
     font-weight: 400;

apps/docs/src/theme/NavbarItem/index.tsx

@@ -1,30 +0,0 @@
-import { useLocation } from "@docusaurus/router"
-import useDocusaurusContext from "@docusaurus/useDocusaurusContext"
-import OriginalNavBarItem from "@theme-original/NavbarItem"
-import React from "react"
-
-export default function NavbarItem(props: any) {
-    const { pathname } = useLocation()
-    const { i18n } = useDocusaurusContext()
-
-    const pathSegments = pathname.split("/")
-
-    let version: string
-
-    if (i18n.locales.includes(pathSegments[1])) {
-        ;[, , version] = pathSegments
-    } else {
-        ;[, version] = pathSegments
-    }
-
-    const { className = "" } = props
-
-    return (
-        (!className ||
-            !(
-                (className.includes("V1") && version !== "V1") ||
-                (className.includes("V2") && version !== "V2") ||
-                (className.includes("V3") && version !== "V3")
-            )) && <OriginalNavBarItem {...props} />
-    )
-}

apps/docs/tsconfig.json

@@ -1,6 +1,6 @@
 {
     // This file is not used in compilation. It is here just for a nice editor experience.
-    "extends": "@tsconfig/docusaurus/tsconfig.json",
+    "extends": "@docusaurus/tsconfig",
     "compilerOptions": {
         "baseUrl": "."
     }

apps/docs/versioned_docs/version-V2/glossary.md

@@ -60,5 +60,5 @@ To generate or verify valid zero-knowledge proofs with Semaphore, applications m
 -   semaphore.wasm
 -   semaphore.json
 
-For a complete list of ready-to-use files, see <http://www.trusted-setup-pse.org>.
+For a complete list of ready-to-use files, see [trusted-setup-pse.org](https://www.trusted-setup-pse.org).
 To learn more, see the [trusted setup ceremony](https://storage.googleapis.com/trustedsetup-a86f4.appspot.com/semaphore/semaphore_top_index.html).

apps/docs/versioned_docs/version-V2/use-cases/private-voting.md

@@ -132,5 +132,5 @@ When a member votes (for example, by selecting a radio button), then the dApp ta
 
 ### Related
 
--   To get started developing with Semaphore, see the [Quick setup](/quick-setup/) guide.
+-   To get started developing with Semaphore, see the [Quick setup](/V2/quick-setup/) guide.
 -   For an example app that you can use to start your own project, see [Semaphore boilerplate](https://github.com/semaphore-protocol/boilerplate).

apps/docs/versioned_docs/version-V3/faq.md

@@ -30,7 +30,7 @@ Finally, the nullifier hash is just the hash of the identity nullifier and the e
 
 In the case of a voting application, if you have a group and you want all members of this group to vote only once, you can use the id of the group as an external nullifier. When a user votes the first time, you can save the hash of their identity nullifier and the group id (i.e. the nullifier hash) and prevent double-voting by checking if that hash already exists.
 
-See the [Semaphore circuits](https://docs.semaphore.pse.dev/technical-reference/circuits) for more technical information, or the [Semaphore boilerplate](https://github.com/semaphore-protocol/boilerplate) for a real use-case.
+See the [Semaphore circuits](https://docs.semaphore.pse.dev/technical-reference/circuits) for more technical information, or the [Semaphore boilerplate](https://github.com/semaphore-protocol/boilerplate/tree/version/3) for a real use-case.
 
 ## Why should I prevent proofs from being verified twice?
 
@@ -44,11 +44,11 @@ You can find some applications that are using Semaphore in [this blog post](http
 
 ## How can I start a project using Semaphore?
 
-There are three ways you can start using Semaphore in your project: using the [Semaphore CLI](https://github.com/semaphore-protocol/semaphore/tree/main/packages/cli), using the [Semaphore boilerplate](https://github.com/semaphore-protocol/boilerplate) as a template or forking it, or installing the Semaphore packages manually.
+There are three ways you can start using Semaphore in your project: using the [Semaphore CLI](https://github.com/semaphore-protocol/semaphore/tree/v3.15.2/packages/cli), using the [Semaphore boilerplate](https://github.com/semaphore-protocol/boilerplate/tree/version/3) as a template or forking it, or installing the Semaphore packages manually.
 
 ### Semaphore CLI
 
-To create a new project you could use `npx` or install the [Semaphore CLI](https://github.com/semaphore-protocol/semaphore/tree/main/packages/cli) globally using `npm` and then create the new project using the `semaphore create` command. See the [Quick Setup](https://docs.semaphore.pse.dev/quick-setup) for more information.
+To create a new project you could use `npx` or install the [Semaphore CLI](https://github.com/semaphore-protocol/semaphore/tree/v3.15.2/packages/cli) globally using `npm` and then create the new project using the `semaphore create` command. See the [Quick Setup](https://docs.semaphore.pse.dev/quick-setup) for more information.
 
 There are three supported templates right now: `contracts-hardhat`, `monorepo-ethers` and `monorepo-subgraph`.
 
@@ -65,7 +65,7 @@ The Semaphore CLI can also be used to get group data from a supported network. T
 
 ### Semaphore boilerplate
 
-To create a project, you could also use the [Semaphore boilerplate](https://github.com/semaphore-protocol/boilerplate). You could fork it or use it as a template.
+To create a project, you could also use the [Semaphore boilerplate](https://github.com/semaphore-protocol/boilerplate/tree/version/3). You could fork it or use it as a template.
 
 The Semaphore CLI templates and the Semaphore boilerplate contain the same code, which is a feedback application where you can create an identity, join a group, and send your feedback anonymously. They are almost the same, the only difference is that the templates use plain CSS so you can decide the CSS framework or library you want to use and the boilerplate uses [ChakraUI](https://chakra-ui.com/) by default.
 

apps/docs/versioned_docs/version-V3/glossary.md

@@ -39,7 +39,7 @@ For more information, see [Merkle tree in Wikipedia](https://en.wikipedia.org/wi
 
 A value used to prevent double entry or double signalling.
 
-See [Circuit nullifier hash](/technical-reference/circuits/#nullifier-hash).
+See [Circuit nullifier hash](/V3/technical-reference/circuits/#nullifier-hash).
 
 ## Relay
 
@@ -59,7 +59,7 @@ To generate or verify valid zero-knowledge proofs with Semaphore, applications m
 -   semaphore.wasm
 -   semaphore.json
 
-For a complete list of ready-to-use files, see <http://www.trusted-setup-pse.org>.
+For a complete list of ready-to-use files, see [trusted-setup-pse.org](https://www.trusted-setup-pse.org).
 To learn more, see the [trusted setup ceremony](https://storage.googleapis.com/trustedsetup-a86f4.appspot.com/semaphore/semaphore_top_index.html).
 
 ## Signals

apps/docs/versioned_docs/version-V3/guides/fetching-data.mdx

@@ -8,9 +8,9 @@ import TabItem from "@theme/TabItem"
 
 # Semaphore data
 
-To fetch on-chain data from the [Semaphore.sol](https://github.com/semaphore-protocol/semaphore/blob/main/packages/contracts/contracts/Semaphore.sol) contract, you can use the [@semaphore-protocol/data](https://github.com/semaphore-protocol/semaphore/tree/main/packages/data) library.
+To fetch on-chain data from the [Semaphore.sol](https://github.com/semaphore-protocol/semaphore/blob/v3.15.2/packages/contracts/contracts/Semaphore.sol) contract, you can use the [@semaphore-protocol/data](https://github.com/semaphore-protocol/semaphore/tree/v3.15.2/packages/data) library.
 
-There are two ways to do this, using [`SemaphoreSubgraph`](https://github.com/semaphore-protocol/semaphore/blob/main/packages/data/src/subgraph.ts) or [`SemaphoreEthers`](https://github.com/semaphore-protocol/semaphore/blob/main/packages/data/src/ethers.ts). The `SemaphoreSubgraph` class uses the [Semaphore subgraph](https://github.com/semaphore-protocol/subgraph), which uses [The Graph Protocol](https://thegraph.com/) under the hood, and the `SemaphoreEthers` class uses [Ethers](https://github.com/ethers-io/ethers.js/).
+There are two ways to do this, using [`SemaphoreSubgraph`](https://github.com/semaphore-protocol/semaphore/blob/v3.15.2/packages/data/src/subgraph.ts) or [`SemaphoreEthers`](https://github.com/semaphore-protocol/semaphore/blob/v3.15.2/packages/data/src/ethers.ts). The `SemaphoreSubgraph` class uses the [Semaphore subgraph](https://github.com/semaphore-protocol/subgraph), which uses [The Graph Protocol](https://thegraph.com/) under the hood, and the `SemaphoreEthers` class uses [Ethers](https://github.com/ethers-io/ethers.js/).
 
 - [**Fetch data using SemaphoreSubgraph**](#fetch-data-using-semaphoresubgraph)
 - [**Fetch data using SemaphoreEthers**](#fetch-data-using-semaphoreethers)
@@ -28,21 +28,21 @@ values={[
 <TabItem value="npm">
 
 ```bash
-npm install @semaphore-protocol/data
+npm install @semaphore-protocol/data@^3
 ```
 
 </TabItem>
 <TabItem value="yarn">
 
 ```bash
-yarn add @semaphore-protocol/data
+yarn add @semaphore-protocol/data@^3
 ```
 
 </TabItem>
 <TabItem value="pnpm">
 
 ```bash
-pnpm add @semaphore-protocol/data
+pnpm add @semaphore-protocol/data@^3
 ```
 
 </TabItem>
@@ -50,7 +50,7 @@ pnpm add @semaphore-protocol/data
 
 ## Fetch data using SemaphoreSubgraph
 
-To fetch data using the Semaphore subgraph you can use the [`SemaphoreSubgraph`](https://github.com/semaphore-protocol/semaphore/blob/main/packages/data/src/subgraph.ts) class from the [@semaphore-protocol/data](https://github.com/semaphore-protocol/semaphore/tree/main/packages/data) package.
+To fetch data using the Semaphore subgraph you can use the [`SemaphoreSubgraph`](https://github.com/semaphore-protocol/semaphore/blob/v3.15.2/packages/data/src/subgraph.ts) class from the [@semaphore-protocol/data](https://github.com/semaphore-protocol/semaphore/tree/v3.15.2/packages/data) package.
 
 ```typescript
 import { SemaphoreSubgraph } from "@semaphore-protocol/data"
@@ -117,7 +117,7 @@ const group = new Group(groupId, 20, members)
 
 ## Fetch data using SemaphoreEthers
 
-To fetch data using Ethers you can use the [`SemaphoreEthers`](https://github.com/semaphore-protocol/semaphore/blob/main/packages/data/src/ethers.ts) class from the [@semaphore-protocol/data](https://github.com/semaphore-protocol/semaphore/tree/main/packages/data) package.
+To fetch data using Ethers you can use the [`SemaphoreEthers`](https://github.com/semaphore-protocol/semaphore/blob/v3.15.2/packages/data/src/ethers.ts) class from the [@semaphore-protocol/data](https://github.com/semaphore-protocol/semaphore/tree/v3.15.2/packages/data) package.
 
 ```typescript
 import { SemaphoreEthers } from "@semaphore-protocol/data"
@@ -178,4 +178,4 @@ const semaphoreEthers = new SemaphoreEthers("sepolia")
 const members = await semaphoreEthers.getGroupMembers(groupId)
 const group = new Group(groupId, 20, members)
 ```
-:::
+:::

apps/docs/versioned_docs/version-V3/guides/groups.mdx

@@ -8,14 +8,14 @@ import TabItem from "@theme/TabItem"
 
 # Semaphore groups
 
-A [Semaphore group](/glossary/#semaphore-group) contains [identity commitments](/glossary/#identity-commitment) of group members.
+A [Semaphore group](/V3/glossary/#semaphore-group) contains [identity commitments](/V3/glossary/#identity-commitment) of group members.
 Example uses of groups include the following:
 
 -   poll question that attendees join to rate an event,
 -   ballot that members join to vote on a proposal,
 -   whistleblowers who are verified employees of an organization.
 
-A Semaphore group is an [incremental Merkle tree](/glossary/#incremental-merkle-tree), and group members (i.e., [identity commitments](/glossary/#identity-commitments)) are tree leaves.
+A Semaphore group is an [incremental Merkle tree](/V3/glossary/#incremental-merkle-tree), and group members (i.e., [identity commitments](/V3/glossary/#identity-commitments)) are tree leaves.
 Semaphore groups set the following three parameters:
 
 -   **Group id**: a unique identifier for the group;
@@ -35,7 +35,7 @@ Learn how to work with groups.
 
 ### Create a group
 
-Use the [`@semaphore-protocol/group`](https://github.com/semaphore-protocol/semaphore/blob/main/packages/group) library `Group` class to create an off-chain group with the following parameters:
+Use the [`@semaphore-protocol/group`](https://github.com/semaphore-protocol/semaphore/blob/v3.15.2/packages/group) library `Group` class to create an off-chain group with the following parameters:
 
 -   `Group id`: a unique identifier for the group;
 -   `Tree depth`: (_default `20`_) the maximum number of members a group can contain (`max size = 2 ^ tree depth`).
@@ -54,21 +54,21 @@ values={[
 <TabItem value="npm">
 
 ```bash
-npm install @semaphore-protocol/group
+npm install @semaphore-protocol/group@^3
 ```
 
 </TabItem>
 <TabItem value="yarn">
 
 ```bash
-yarn add @semaphore-protocol/group
+yarn add @semaphore-protocol/group@^3
 ```
 
 </TabItem>
 <TabItem value="pnpm">
 
 ```bash
-pnpm add @semaphore-protocol/group
+pnpm add @semaphore-protocol/group@^3
 ```
 
 </TabItem>
@@ -142,13 +142,13 @@ Given that the node isn't removed, and the length of the `group.members` array d
 
 ## On-chain groups
 
-The [`SemaphoreGroups`](https://github.com/semaphore-protocol/semaphore/blob/main/packages/contracts/contracts/base/SemaphoreGroups.sol) contract uses the [`IncrementalBinaryTree`](https://github.com/privacy-scaling-explorations/zk-kit/blob/main/packages/incremental-merkle-tree.sol/contracts/IncrementalBinaryTree.sol) library and provides methods to create and manage groups.
+The [`SemaphoreGroups`](https://github.com/semaphore-protocol/semaphore/blob/v3.15.2/packages/contracts/contracts/base/SemaphoreGroups.sol) contract uses the [`IncrementalBinaryTree`](https://github.com/privacy-scaling-explorations/zk-kit/blob/main/packages/incremental-merkle-tree.sol/contracts/IncrementalBinaryTree.sol) library and provides methods to create and manage groups.
 
 :::info
-You can import `SemaphoreGroups.sol` and other Semaphore contracts from the [`@semaphore-protocol/contracts`](https://github.com/semaphore-protocol/semaphore/tree/main/packages/contracts) NPM module.
+You can import `SemaphoreGroups.sol` and other Semaphore contracts from the [`@semaphore-protocol/contracts`](https://github.com/semaphore-protocol/semaphore/tree/v3.15.2/packages/contracts) NPM module.
 :::
 
-Alternatively, you can use an already deployed [`Semaphore.sol`](https://github.com/semaphore-protocol/semaphore/blob/main/packages/contracts/contracts/Semaphore.sol) contract and use its group external functions.
+Alternatively, you can use an already deployed [`Semaphore.sol`](https://github.com/semaphore-protocol/semaphore/blob/v3.15.2/packages/contracts/contracts/Semaphore.sol) contract and use its group external functions.
 
 :::caution
 `Semaphore.sol` does not check if a member with a specific identity commitment already exists in a group. This check must be done off-chain.
@@ -156,4 +156,4 @@ Alternatively, you can use an already deployed [`Semaphore.sol`](https://github.
 
 :::caution
 `Semaphore.sol` includes a mechanism to verify Semaphore proofs created with old Merkle tree roots, the duration of which can be defined by the admin in the `createGroup` function. Members of a group could then continue to generate valid proofs even after being removed. For more info see the issue [#98](https://github.com/semaphore-protocol/semaphore/issues/98).
-:::
+:::

apps/docs/versioned_docs/version-V3/guides/identities.mdx

@@ -8,7 +8,7 @@ import TabItem from "@theme/TabItem"
 
 # Semaphore identities
 
-In order to join a [Semaphore group](/glossary#semaphore-group), a user must first create a [Semaphore identity](/glossary#semaphore-identity).
+In order to join a [Semaphore group](/V3/glossary#semaphore-group), a user must first create a [Semaphore identity](/V3/glossary#semaphore-identity).
 A Semaphore identity contains two values generated with the identity:
 
 -   Identity trapdoor
@@ -19,7 +19,7 @@ To prevent fraud, the owner should keep both values secret.
 
 ## Create identities
 
-In your code, use the [`@semaphore-protocol/identity`](https://github.com/semaphore-protocol/semaphore/tree/main/packages/identity) library to create a Semaphore identity _deterministically_ (from the hash of a message) or _randomly_.
+In your code, use the [`@semaphore-protocol/identity`](https://github.com/semaphore-protocol/semaphore/tree/v3.15.2/packages/identity) library to create a Semaphore identity _deterministically_ (from the hash of a message) or _randomly_.
 
 -   [**Create random identities**](#create-random-identities)
 -   [**Create deterministic identities**](#create-deterministic-identities)
@@ -37,21 +37,21 @@ values={[
 <TabItem value="npm">
 
 ```bash
-npm install @semaphore-protocol/identity
+npm install @semaphore-protocol/identity@^3
 ```
 
 </TabItem>
 <TabItem value="yarn">
 
 ```bash
-yarn add @semaphore-protocol/identity
+yarn add @semaphore-protocol/identity@^3
 ```
 
 </TabItem>
 <TabItem value="pnpm">
 
 ```bash
-pnpm add @semaphore-protocol/identity
+pnpm add @semaphore-protocol/identity@^3
 ```
 
 </TabItem>
@@ -116,4 +116,4 @@ To reuse the saved identity, pass the JSON to the `Identity()` constructor.
 
 ```ts
 const identity2 = new Identity(identity.toString())
-```
+```

apps/docs/versioned_docs/version-V3/guides/proofs.mdx

@@ -8,7 +8,7 @@ import TabItem from "@theme/TabItem"
 
 # Semaphore proofs
 
-Once a user joins their [Semaphore identity](/glossary#semaphore-identity) to a [Semaphore group](/glossary#semaphore-group), the user can signal anonymously with a zero-knowledge proof that proves the following:
+Once a user joins their [Semaphore identity](/V3/glossary#semaphore-identity) to a [Semaphore group](/V3/glossary#semaphore-group), the user can signal anonymously with a zero-knowledge proof that proves the following:
 
 -   the user is a member of the group,
 -   the same user created the signal and the proof.
@@ -21,14 +21,14 @@ Developers can use Semaphore for the following:
 
 ## Generate a proof off-chain
 
-Use the [`@semaphore-protocol/proof`](https://github.com/semaphore-protocol/semaphore/tree/main/packages/proof) library to generate an off-chain proof.
+Use the [`@semaphore-protocol/proof`](https://github.com/semaphore-protocol/semaphore/tree/v3.15.2/packages/proof) library to generate an off-chain proof.
 To generate a proof, pass the following parameters to the `generateProof` function:
 
 -   `identity`: the Semaphore identity of the user broadcasting the signal and generating the proof;
 -   `group`: the group to which the user belongs;
 -   `externalNullifier`: the value that prevents double-signaling;
 -   `signal`: the signal the user wants to send anonymously;
--   `snarkArtifacts`: the `zkey` and `wasm` [trusted setup files](/glossary/#trusted-setup-files).
+-   `snarkArtifacts`: the `zkey` and `wasm` [trusted setup files](/V3/glossary/#trusted-setup-files).
 
 #### Install library:
 
@@ -43,29 +43,29 @@ values={[
 <TabItem value="npm">
 
 ```bash
-npm install @semaphore-protocol/proof
+npm install @semaphore-protocol/proof@^3
 ```
 
 </TabItem>
 <TabItem value="yarn">
 
 ```bash
-yarn add @semaphore-protocol/proof
+yarn add @semaphore-protocol/proof@^3
 ```
 
 </TabItem>
 <TabItem value="pnpm">
 
 ```bash
-pnpm add @semaphore-protocol/proof
+pnpm add @semaphore-protocol/proof@^3
 ```
 
 </TabItem>
 </Tabs>
 
-In the voting system use case, once all the voters have joined their [identities](/guides/identities#create-an-identity) to the ballot [group](/guides/groups),
+In the voting system use case, once all the voters have joined their [identities](/V3/guides/identities#create-an-identity) to the ballot [group](/V3/guides/groups),
 a voter can generate a proof to vote for a proposal.
-In the call to `generateProof`, the voting system passes the unique ballot ID (the [Merkle tree](/glossary/#merkle-tree/) root of the group) as the
+In the call to `generateProof`, the voting system passes the unique ballot ID (the [Merkle tree](/V3/glossary/#merkle-tree/) root of the group) as the
 `externalNullifier` to prevent the voter signaling more than once for the ballot.
 The following code sample shows how to use `generateProof` to generate the voting proof:
 
@@ -91,7 +91,7 @@ const fullProof = await generateProof(identity, group, externalNullifier, signal
 
 ## Verify a proof off-chain
 
-Use the [`@semaphore-protocol/proof`](https://github.com/semaphore-protocol/semaphore/tree/main/packages/proof) library to verify a Semaphore proof off-chain.
+Use the [`@semaphore-protocol/proof`](https://github.com/semaphore-protocol/semaphore/tree/v3.15.2/packages/proof) library to verify a Semaphore proof off-chain.
 To verify a proof, pass the following to the `verifyProof` function:
 
 -   `fullProof`: the Semaphore proof;
@@ -109,10 +109,10 @@ await verifyProof(fullProof, 20) // true or false.
 
 ## Verify a proof on-chain
 
-Use the [`Semaphore.sol`](/technical-reference/contracts#semaphoresol) contract to verify proofs on-chain.
+Use the [`Semaphore.sol`](/V3/technical-reference/contracts#semaphoresol) contract to verify proofs on-chain.
 
 :::info
-See our [deployed contracts](/deployed-contracts) to find the addresses for your network.
+See our [deployed contracts](/V3/deployed-contracts) to find the addresses for your network.
 ::::
 
 To verify Semaphore proofs in your contract, import `ISemaphore.sol`, pass it the `Semaphore.sol` address and call the `verifyProof` method with following parameters:
@@ -125,5 +125,5 @@ To verify Semaphore proofs in your contract, import `ISemaphore.sol`, pass it th
 -   `proof`: a [Solidity-compatible Semaphore proof](#generate-a-solidity-compatible-proof).
 
 :::info
-You can import `ISemaphore.sol` and other Semaphore contracts from the [`@semaphore-protocol/contracts`](https://github.com/semaphore-protocol/semaphore/tree/main/packages/contracts) NPM module.
-:::
+You can import `ISemaphore.sol` and other Semaphore contracts from the [`@semaphore-protocol/contracts`](https://github.com/semaphore-protocol/semaphore/tree/v3.15.2/packages/contracts) NPM module.
+:::

apps/docs/versioned_docs/version-V3/quick-setup.mdx

@@ -10,22 +10,22 @@ import TabItem from "@theme/TabItem"
 Semaphore provides an official CLI to set up your project with Hardhat. If your NPM version is 5.2 or higher you can use NPX:
 
 ```bash
-npx @semaphore-protocol/cli@latest create my-app --template monorepo-ethers
+npx @semaphore-protocol/cli@^3 create my-app --template monorepo-ethers
 ```
 
-Otherwise, install `@semaphore-protocol/cli` globally and run the `create` command:
+Otherwise, install `@semaphore-protocol/cli@^3` globally and run the `create` command:
 
 ```bash
-npm i -g @semaphore-protocol/cli@latest
+npm i -g @semaphore-protocol/cli@^3
 semaphore create my-app --template monorepo-ethers
 ```
 
 :::info
-The supported templates are: [`contracts-hardhat`](https://github.com/semaphore-protocol/semaphore/tree/main/packages/cli-template-contracts-hardhat), [`monorepo-ethers`](https://github.com/semaphore-protocol/semaphore/tree/main/packages/cli-template-monorepo-ethers), [`monorepo-subgraph`](https://github.com/semaphore-protocol/semaphore/tree/main/packages/cli-template-monorepo-subgraph).
+The supported templates are: [`contracts-hardhat`](https://github.com/semaphore-protocol/semaphore/tree/v3.15.2/packages/cli-template-contracts-hardhat), [`monorepo-ethers`](https://github.com/semaphore-protocol/semaphore/tree/v3.15.2/packages/cli-template-monorepo-ethers), [`monorepo-subgraph`](https://github.com/semaphore-protocol/semaphore/tree/v3.15.2/packages/cli-template-monorepo-subgraph).
 :::
 
 :::info
-The [`semaphore CLI`](https://github.com/semaphore-protocol/semaphore/tree/main/packages/cli) can also be used to get group data from a supported network (e.g `semaphore get-groups --network arbitrum-goerli`).
+The [`semaphore CLI`](https://github.com/semaphore-protocol/semaphore/tree/v3.15.2/packages/cli) can also be used to get group data from a supported network (e.g `semaphore get-groups --network arbitrum-goerli`).
 :::
 
 To start working on your project, install the dependencies:
@@ -293,7 +293,7 @@ In the project root folder:
     </Tabs>
 
     :::note
-    Check the Semaphore contract addresses [here](/deployed-contracts).
+    Check the Semaphore contract addresses [here](/V3/deployed-contracts).
     :::
 
     :::caution
@@ -333,4 +333,4 @@ pnpm dev
 ```
 
 </TabItem>
-</Tabs>
+</Tabs>

apps/docs/versioned_docs/version-V3/subgraph.md

@@ -6,7 +6,7 @@ sidebar_position: 6
 
 [The Graph](https://thegraph.com/) is a protocol for indexing networks like Ethereum and IPFS.
 Site owners publish _subgraphs_ that expose site data for anyone to query.
-Semaphore's subgraph allows you to retrieve data from the [`Semaphore.sol`](https://github.com/semaphore-protocol/semaphore/blob/main/packages/contracts/Semaphore.sol) smart contract.
+Semaphore's subgraph allows you to retrieve data from the [`Semaphore.sol`](https://github.com/semaphore-protocol/semaphore/blob/v3.15.2/packages/contracts/Semaphore.sol) smart contract.
 
 :::tip
 The Graph protocol uses the [GraphQL](https://graphql.org/) query language. For examples, see the [GraphQL API documentation](https://thegraph.com/docs/developer/graphql-api). Visit the [subgraph repository](https://github.com/semaphore-protocol/subgraph) to see the list of Semaphore subgraphs.

apps/docs/versioned_docs/version-V3/technical-reference/circuits.md

@@ -4,13 +4,13 @@ sidebar_position: 2
 
 # Circuits
 
-The [Semaphore circuit](https://github.com/semaphore-protocol/semaphore/tree/main/packages/circuits) is the heart of the protocol and consists of three parts:
+The [Semaphore circuit](https://github.com/semaphore-protocol/semaphore/tree/v3.15.2/packages/circuits) is the heart of the protocol and consists of three parts:
 
--   [**Proof of membership**](/technical-reference/circuits#proof-of-membership)
--   [**Nullifier hash**](/technical-reference/circuits#nullifier-hash)
--   [**Signal**](/technical-reference/circuits#signal)
+-   [**Proof of membership**](/V3/technical-reference/circuits#proof-of-membership)
+-   [**Nullifier hash**](/V3/technical-reference/circuits#nullifier-hash)
+-   [**Signal**](/V3/technical-reference/circuits#signal)
 
-![Semaphore circuit](https://github.com/semaphore-protocol/semaphore/raw/main/packages/circuits/scheme.png)
+![Semaphore circuit](https://github.com/semaphore-protocol/semaphore/raw/v3.15.2/packages/circuits/scheme.png)
 
 The diagram above shows how the input signals are used in the Semaphore circuit and how the outputs are calculated.
 

apps/docs/versioned_docs/version-V3/technical-reference/contracts.md

@@ -6,25 +6,25 @@ sidebar_position: 3
 
 Semaphore includes two types of contracts:
 
--   [**Base contracts**](/technical-reference/contracts#base-contracts)
--   [**Extension contracts**](/technical-reference/contracts#extension-contracts)
+-   [**Base contracts**](/V3/technical-reference/contracts#base-contracts)
+-   [**Extension contracts**](/V3/technical-reference/contracts#extension-contracts)
 
-And [**Semaphore.sol**](/technical-reference/contracts#semaphoresol), the main contract deployed on the networks supported by Semaphore.
+And [**Semaphore.sol**](/V3/technical-reference/contracts#semaphoresol), the main contract deployed on the networks supported by Semaphore.
 
 :::info
 To use Semaphore contracts and interfaces in your project,
-install the [`@semaphore-protocol/contracts`](https://github.com/semaphore-protocol/semaphore/tree/main/packages/contracts) NPM package.
+install the [`@semaphore-protocol/contracts`](https://github.com/semaphore-protocol/semaphore/tree/v3.15.2/packages/contracts) NPM package.
 :::
 
 ## Base contracts
 
 Semaphore provides the following base contracts:
 
--   [`SemaphoreVerifier.sol`](https://github.com/semaphore-protocol/semaphore/blob/main/packages/contracts/contracts/base/SemaphoreVerifier.sol): contains a function to verify Semaphore proofs;
--   [`SemaphoreGroups.sol`](https://github.com/semaphore-protocol/semaphore/blob/main/packages/contracts/contracts/base/SemaphoreGroups.sol): contains the functions to create groups and add/remove/update members.
+-   [`SemaphoreVerifier.sol`](https://github.com/semaphore-protocol/semaphore/blob/v3.15.2/packages/contracts/contracts/base/SemaphoreVerifier.sol): contains a function to verify Semaphore proofs;
+-   [`SemaphoreGroups.sol`](https://github.com/semaphore-protocol/semaphore/blob/v3.15.2/packages/contracts/contracts/base/SemaphoreGroups.sol): contains the functions to create groups and add/remove/update members.
 
 These contracts are closely related to the protocol.
-You can use them in your contract or you can use [**Semaphore.sol**](/technical-reference/contracts#semaphoresol), which integrates them for you.
+You can use them in your contract or you can use [**Semaphore.sol**](/V3/technical-reference/contracts#semaphoresol), which integrates them for you.
 
 :::info
 While some DApps may use on-chain groups, others may prefer to use off-chain groups, saving only their tree roots in the contract.
@@ -32,20 +32,20 @@ While some DApps may use on-chain groups, others may prefer to use off-chain gro
 
 ## Extension contracts
 
--   [`SemaphoreVoting.sol`](https://github.com/semaphore-protocol/semaphore/blob/main/packages/contracts/contracts/extensions/SemaphoreVoting.sol): voting contract that contains the essential functions to create polls, add voters, and anonymously cast votes;
--   [`SemaphoreWhistleblowing.sol`](https://github.com/semaphore-protocol/semaphore/blob/main/packages/contracts/contracts/extensions/SemaphoreWhistleblowing.sol): whistleblowing contract that contains the essential functions to create entities (for example: non-profit organizations), add whistleblowers, and anonymously publish leaks.
+-   [`SemaphoreVoting.sol`](https://github.com/semaphore-protocol/semaphore/blob/v3.15.2/packages/contracts/contracts/extensions/SemaphoreVoting.sol): voting contract that contains the essential functions to create polls, add voters, and anonymously cast votes;
+-   [`SemaphoreWhistleblowing.sol`](https://github.com/semaphore-protocol/semaphore/blob/v3.15.2/packages/contracts/contracts/extensions/SemaphoreWhistleblowing.sol): whistleblowing contract that contains the essential functions to create entities (for example: non-profit organizations), add whistleblowers, and anonymously publish leaks.
 
 These contracts extend the protocol to provide application logic for specific use-cases.
 More extensions will be added in the future.
 
 ## Semaphore.sol
 
-[`Semaphore.sol`](https://github.com/semaphore-protocol/semaphore/blob/main/packages/contracts/contracts/Semaphore.sol) is based on the base contracts. It integrates them and additionally provides:
+[`Semaphore.sol`](https://github.com/semaphore-protocol/semaphore/blob/v3.15.2/packages/contracts/contracts/Semaphore.sol) is based on the base contracts. It integrates them and additionally provides:
 
 -   a system to allow only admins (i.e. Ethereum accounts or smart contracts) to manage groups;
--   a mechanism to save the [nullifier hashes](/technical-reference/circuits#nullifier-hash) of each group and prevent double-signaling;
+-   a mechanism to save the [nullifier hashes](/V3/technical-reference/circuits#nullifier-hash) of each group and prevent double-signaling;
 -   a mechanism to allow Semaphore proofs generated with old Merkle roots to be verified for a certain period of time defined by the group admin.
 
 :::info
-See our [deployed contracts](/deployed-contracts) to find the addresses for your network.
+See our [deployed contracts](/V3/deployed-contracts) to find the addresses for your network.
 ::::

apps/docs/versioned_docs/version-V3/troubleshooting.mdx

@@ -11,7 +11,7 @@ If these suggestions do not work, feel free to ask in the [Semaphore Discussions
 
 ## Using Semaphore in the frontend
 
-Semaphore works with any JavaScript frontend framework, but the [`@semaphore-protocol/proof`](https://github.com/semaphore-protocol/semaphore/tree/main/packages/proof) package is using [snarkjs](https://github.com/iden3/snarkjs), which uses Node.js modules which are not compatible with frontend frameworks and there are some changes that we need to do to make it work on the client side.
+Semaphore works with any JavaScript frontend framework, but the [`@semaphore-protocol/proof`](https://github.com/semaphore-protocol/semaphore/tree/v3.15.2/packages/proof) package is using [snarkjs](https://github.com/iden3/snarkjs), which uses Node.js modules which are not compatible with frontend frameworks and there are some changes that we need to do to make it work on the client side.
 
 ### Semaphore with Nextjs
 
@@ -229,10 +229,10 @@ Your `tsconfig.json` file would be something like this:
 
 When you create a group and the transaction is reverted, make sure that the group id you are using does not exist on the network you are using.
 
-To check that, you can use the [Semaphore CLI](https://github.com/semaphore-protocol/semaphore/tree/main/packages/cli) with the command `get-groups` and the network you are using and then, make sure that your group id is not part of that list. You can also use the [Semaphore explorer](https://explorer.semaphore.pse.dev/).
+To check that, you can use the [Semaphore CLI](https://github.com/semaphore-protocol/semaphore/tree/v3.15.2/packages/cli) with the command `get-groups` and the network you are using and then, make sure that your group id is not part of that list. You can also use the [Semaphore explorer](https://explorer.semaphore.pse.dev/).
 
 ## Semaphore Proofs
 
 ### Transaction reverted when using the same external nullifier
 
-When you generate a proof using the same external nullifier you used to verify a proof before, the transaction will be reverted because that external nullifier was already used. If you want to send and verify several proofs from the same identity, you should use a different external nullifier each time you generate a proof.
+When you generate a proof using the same external nullifier you used to verify a proof before, the transaction will be reverted because that external nullifier was already used. If you want to send and verify several proofs from the same identity, you should use a different external nullifier each time you generate a proof.

apps/docs/versioned_docs/version-V3/what-is-semaphore.md

@@ -7,7 +7,7 @@ slug: /
 
 ## Overview
 
-[Semaphore](https://github.com/semaphore-protocol/semaphore) is a [zero-knowledge](https://z.cash/technology/zksnarks) protocol that allows you to cast a signal (for example, a vote or endorsement) as a provable group member without revealing your identity.
+[Semaphore](https://github.com/semaphore-protocol/semaphore/tree/v3.15.2) is a [zero-knowledge](https://z.cash/technology/zksnarks) protocol that allows you to cast a signal (for example, a vote or endorsement) as a provable group member without revealing your identity.
 Additionally, it provides a simple mechanism to prevent double-signaling.
 Use cases include private voting, whistleblowing, anonymous DAOs and mixers.
 
@@ -15,9 +15,9 @@ Use cases include private voting, whistleblowing, anonymous DAOs and mixers.
 
 With Semaphore, you can allow your users to do the following:
 
-1. [Create a Semaphore identity](/guides/identities/).
-2. [Add their Semaphore identity to a group (i.e. _Merkle tree_)](/guides/groups/).
-3. [Send a verifiable, anonymous signal (e.g a vote or endorsement)](/guides/proofs/).
+1. [Create a Semaphore identity](/V3/guides/identities/).
+2. [Add their Semaphore identity to a group (i.e. _Merkle tree_)](/V3/guides/groups/).
+3. [Send a verifiable, anonymous signal (e.g a vote or endorsement)](/V3/guides/proofs/).
 
 When a user broadcasts a signal (for example: a vote), Semaphore zero-knowledge
 proofs can ensure that the user has joined the group and hasn't already cast a signal with their nullifier.
@@ -33,14 +33,14 @@ Semaphore is designed to be a simple and generic _privacy layer_ for decentraliz
 
 ## About the code
 
-The core of the protocol is the [circuit logic](https://github.com/semaphore-protocol/semaphore/tree/main/packages/circuits/scheme.png).
+The core of the protocol is the [circuit logic](https://github.com/semaphore-protocol/semaphore/tree/v3.15.2/packages/circuits/scheme.png).
 In addition to circuits,
-Semaphore provides [Solidity contracts](https://github.com/semaphore-protocol/semaphore/tree/main/packages/contracts)
-and [JavaScript libraries](https://github.com/semaphore-protocol/semaphore#-packages) that allow developers to generate zero-knowledge proofs and verify them with minimal effort.
+Semaphore provides [Solidity contracts](https://github.com/semaphore-protocol/semaphore/tree/v3.15.2/packages/contracts)
+and [JavaScript libraries](https://github.com/semaphore-protocol/semaphore/tree/v3.15.2#-packages) that allow developers to generate zero-knowledge proofs and verify them with minimal effort.
 
 ### Trusted Setup Ceremony
 
-The [secure parameters](/glossary#trusted-setup-files) for generating valid proofs with Semaphore circuits were generated in a [Trusted Setup Ceremony](https://storage.googleapis.com/trustedsetup-a86f4.appspot.com/semaphore/semaphore_top_index.html) that was completed with over 300 participants on [29 March 2022](https://etherscan.io/tx/0xec6dbe68883c7593c2bea82f55af18b3aeb5cc146e026d0083a9b3faa9aa0b65#eventlog).
+The [secure parameters](/V3/glossary#trusted-setup-files) for generating valid proofs with Semaphore circuits were generated in a [Trusted Setup Ceremony](https://storage.googleapis.com/trustedsetup-a86f4.appspot.com/semaphore/semaphore_top_index.html) that was completed with over 300 participants on [29 March 2022](https://etherscan.io/tx/0xec6dbe68883c7593c2bea82f55af18b3aeb5cc146e026d0083a9b3faa9aa0b65#eventlog).
 
 ### Audits
 

apps/docs/versioned_docs/version-V4-beta/credits.md

@@ -0,0 +1,19 @@
+---
+sidebar_position: 11
+---
+
+# Credits
+
+Semaphore is the work of several people, for a complete list of contributors you can visit the Semaphore [Github insights](https://github.com/semaphore-protocol/semaphore/graphs/contributors).
+
+-   [Barry WhiteHat](https://github.com/barryWhiteHat)
+-   [Kobi Gurkan](https://github.com/kobigurk)
+-   [Koh Wei Jie](https://github.com/weijiekoh)
+-   [Andrija Novakovic](https://github.com/akinovak)
+-   [Cedoor](https://github.com/cedoor)
+-   [Rachel Aux](https://github.com/rachelaux)
+-   [Andy Guzman](https://github.com/aguzmant103)
+-   [Vivian Plasencia](https://github.com/vplasencia)
+-   [LauNaMu](https://github.com/0xyNaMu)
+-   [0xjei](https://github.com/0xjei)
+-   [Mari Poveda](https://github.com/maripoveda)

apps/docs/versioned_docs/version-V4-beta/deployed-contracts.mdx

@@ -0,0 +1,9 @@
+---
+sidebar_position: 5
+---
+
+import DeployedContracts from '@site/src/components/DeployedContracts';
+
+# Deployed contracts
+
+<DeployedContracts />

apps/docs/versioned_docs/version-V4-beta/faq.md

@@ -0,0 +1,37 @@
+---
+sidebar_position: 10
+---
+
+# FAQ
+
+## Where can I ask questions about Semaphore?
+
+You can ask questions about Semaphore on [Discord](https://semaphore.pse.dev/discord) or by opening a [Semaphore Discussion](https://github.com/semaphore-protocol/semaphore/discussions). The most frequent questions will be listed below.
+
+## Why should I prevent proofs from being verified twice?
+
+Since zero-knowledge proofs are completely anonymous, it is important to prevent those generated by eligible identities from being reused by a malicious party.
+
+For example, in an anonymous voting application a valid proof could be reused to vote again.
+
+## What is the difference between the "nullifier" and "scope"?
+
+The [scope](/glossary#scope) is used like a topic on which users can generate a valid proof only once. The scope is a public value and every one can see what the scope of a proof is.
+
+The [nullifier](/glossary#nullifier) is the hash of the private key of the identity and the scope, and it is used to check if the same proof with that specific scope has already been generated by the same user. The nullifier is also a public value and it is what is actually stored to prevent, for example, double-voting.
+
+In the case of a voting application, if you have a group and you want all members of this group to vote only once, you can use the id of the group as the scope. When a user votes the first time, you can store the hash of voter's private key and the group id (i.e., the nullifier) and prevent double-voting by checking if that hash already exists.
+
+See the [Semaphore circuits](/technical-reference/circuits) for more technical information, or the [Semaphore boilerplate](https://github.com/semaphore-protocol/boilerplate/tree/main) for a real use-case.
+
+## Where can I find examples of applications using Semaphore?
+
+You can find a complete list of applications that are using Semaphore on the [Semaphore website](https://semaphore.pse.dev/projects).
+
+## How can I start a project using Semaphore?
+
+There are three ways you can start using Semaphore in your project: using the [CLI](https://github.com/semaphore-protocol/semaphore/tree/main/packages/cli), using the [boilerplate](https://github.com/semaphore-protocol/boilerplate/tree/main) as a template or forking it, or installing the Semaphore [packages](/guides/identities) manually.
+
+## How can I contribute to the protocol?
+
+There are several ways you could contribute to the protocol, you can find more information about on [Github](https://github.com/semaphore-protocol#ways-to-contribute).

apps/docs/versioned_docs/version-V4-beta/getting-started.mdx

@@ -0,0 +1,142 @@
+---
+sidebar_position: 2
+---
+
+# Getting started
+
+Semaphore provides an official CLI to set up your project with Hardhat. If your NPM version is 5.2 or higher you can use NPX:
+
+```bash
+npx @semaphore-protocol/cli create my-app --template monorepo-ethers
+```
+
+Otherwise, install `@semaphore-protocol/cli` globally and run the `create` command:
+
+```bash
+npm i -g @semaphore-protocol/cli
+semaphore create my-app --template monorepo-ethers
+```
+
+:::info
+The supported templates are: [`contracts-hardhat`](https://github.com/semaphore-protocol/semaphore/tree/main/packages/cli-template-contracts-hardhat), [`monorepo-ethers`](https://github.com/semaphore-protocol/semaphore/tree/main/packages/cli-template-monorepo-ethers), [`monorepo-subgraph`](https://github.com/semaphore-protocol/semaphore/tree/main/packages/cli-template-monorepo-subgraph).
+:::
+
+:::info
+The [`semaphore CLI`](https://github.com/semaphore-protocol/semaphore/tree/main/packages/cli) can also be used to get group data from a supported network (e.g. `semaphore get-groups --network sepolia`).
+:::
+
+To start working on your project, install the dependencies:
+
+```bash
+cd my-app
+yarn
+```
+
+## Output
+
+The `create` command will create a directory called my-app (or whatever name you choose) inside the current folder. That directory will contain the initial project structure, which includes a simple contract, a task to deploy it, some tests and a Next.js application (the web-app folder) to interact with that contract.
+
+```
+my-app
+├── .yarn
+├── apps
+│   └── contracts
+│   │   └── contracts
+|   │   │   └── Feedback.sol
+│   │   └── tasks
+|   │   │   └── deploy.ts
+│   │   └── test
+|   │   │   └── Feedback.ts
+│   │   └── hardhat.config.ts
+│   │   └── package.json
+│   │   └── tsconfig.json
+│   └── web-app
+├── .editorconfig
+├── .env
+├── .env.example
+├── .eslintignore
+├── .eslintrc.json
+├── .gitignore
+├── .prettierignore
+├── .prettierrc.json
+├── .yarnrc.yml
+├── package.json
+├── README.md
+└── tsconfig.json
+```
+
+The `Feedback.sol` contract creates a Semaphore group, allows users to join that group with their Semaphore identity, and finally allows group members to send an anonymous feedback.
+
+## Usage
+
+### Compile contracts
+
+Go to the `contracts` folder:
+
+```bash
+cd apps/contracts
+```
+
+And compile your contracts:
+
+```bash
+yarn compile
+```
+
+### Test contracts
+
+Test your contracts:
+
+```bash
+yarn test
+```
+
+Generate a test coverage report:
+
+```bash
+yarn test:coverage
+```
+
+Or a test gas report:
+
+```bash
+yarn test:report-gas
+```
+
+### Deploy contracts
+
+Follow the instructions below to deploy your contracts:
+
+In the project root folder:
+
+1. Add your environment variables in the `.env` file.
+
+    :::note
+    You should at least set a valid Infura API Key (you could use Alchemy as well) and a private key with some ethers.
+    :::
+
+2. Go to the `apps/contracts` folder and deploy your contract.
+
+    ```bash
+    yarn deploy --semaphore <semaphore-address> --group <group-id> --network sepolia
+    ```
+
+    :::note
+    Check the Semaphore contract addresses [here](/deployed-contracts).
+    :::
+
+    :::caution
+    The group id is a number.
+    :::
+
+### Start app
+
+Start the application:
+
+```bash
+yarn dev
+```
+
+:::info
+If you want to see the code of a comprehensive application built on top of Semaphore see the [boilerplate](https://github.com/semaphore-protocol/boilerplate/tree/main). For more info about the core libraries, keep reading the next guides.
+:::

apps/docs/versioned_docs/version-V4-beta/glossary.md

@@ -0,0 +1,49 @@
+---
+sidebar_position: 7
+---
+
+# Glossary
+
+## Identity
+
+The identity of a user in the Semaphore protocol. A Semaphore identity consists of an [EdDSA](https://en.wikipedia.org/wiki/EdDSA) public/private key pair and a [commitment](#identity-commitment). Semaphore uses an [EdDSA](https://github.com/privacy-scaling-explorations/zk-kit/tree/main/packages/eddsa-poseidon) implementation based on [Baby Jubjub](https://eips.ethereum.org/EIPS/eip-2494) and [Poseidon](https://www.poseidon-hash.info).
+
+## Identity commitment
+
+The public [Semaphore identity](#identity) value used in [Semaphore groups](#group). Semaphore uses the [Poseidon](https://www.poseidon-hash.info) hash function to create the identity commitment from the Semaphore identity public key.
+
+## Group
+
+A group is a [Merkle tree](#merkle-tree) in which each leaf is an [identity commitment](#identity-commitment) for a user. Semaphore uses the [LeanIMT](https://zkkit.pse.dev/classes/_zk_kit_imt.LeanIMT.html) implementation, which is an optimized binary incremental Merkle tree. The tree nodes are calculated using [Poseidon](https://www.poseidon-hash.info).
+
+## Merkle tree
+
+A [tree](https://en.wikipedia.org/wiki/Merkle_tree) in which every leaf (i.e., a node that doesn't have children) is labelled with the cryptographic hash of a data block,
+and every node that isn't a leaf is labelled with the cryptographic hash of its child node labels.
+In zero-knowledge protocols, Merkle trees can be used to efficiently summarize and validate large data sets.
+To validate that a tree contains a specific leaf, a verifier only needs a portion of the complete data structure.
+
+## Scope
+
+A value used like a topic on which users can generate a valid proof only once. The scope is supposed to be used to generate the [nullifier](#nullifier).
+
+## Nullifier
+
+A value designed to be a unique identifier and used to prevent the same zero-knowledge proof from being used twice. In Semaphore, the nullifier is the hash of the scope and private key of the user's Semaphore identity.
+
+## Message
+
+The term "message" in Semaphore refers to the value the user broadcasts when voting, confirming, sending a text message and so on.
+
+## Relay
+
+A third-party who could receive a fee for including relayed transactions in the blockchain (McMenamin, Daza, and Fitz. https://eprint.iacr.org/2022/155.pdf, p.3).
+To preserve the anonymity of the user broadcasting a message with Semaphore, an application may use a relayer to send the transaction to Ethereum on behalf of the user.
+
+## Trusted setup
+
+A trusted setup in the context of zero-knowledge proofs, particularly zk-SNARKs, is a preparatory phase where [certain parameters](#trusted-setup-files) are generated for later use in creating and verifying proofs. This process must be conducted by trusted parties, as any retained secret information (toxic waste) could compromise the system's integrity by enabling the creation of false proofs.
+
+## Trusted setup files
+
+The secure, verifiable parameters generated by Semaphore's trusted setup ceremony. Semaphore uses the trusted setup files to generate and verify valid zero-knowledge proofs. The [Semaphore circuit](/technical-reference/circuits) includes a parameter to set the tree's maximum depth (MAX_DEPTH). During the trusted setup, parameters are specifically generated for each circuit instance, aligning with their designated MAX_DEPTH (from 1 to 32).

apps/docs/versioned_docs/version-V4-beta/guides/_category_.json

@@ -0,0 +1,4 @@
+{
+    "label": "Guides",
+    "position": 3
+}

apps/docs/versioned_docs/version-V4-beta/guides/groups.mdx

@@ -0,0 +1,244 @@
+---
+sidebar_position: 2
+title: Groups
+---
+
+import Tabs from "@theme/Tabs"
+import TabItem from "@theme/TabItem"
+
+# Semaphore groups
+
+A [Semaphore group](/glossary/#group) contains [identity commitments](/glossary/#commitment) of group members.
+Example uses of groups include the following:
+
+-   poll question that attendees join to rate an event,
+-   ballot that members join to vote on a proposal,
+-   whistleblowers who are verified employees of an organization.
+
+:::info
+Semaphore V4 uses the [ZK-Kit](https://github.com/privacy-scaling-explorations/zk-kit) LeanIMT (i.e., Lean Incremental
+Merkle Tree) [Solidity](https://github.com/privacy-scaling-explorations/zk-kit/tree/main/packages/imt.sol/contracts) and
+[JavaScript](https://github.com/privacy-scaling-explorations/zk-kit/tree/main/packages/imt) implementations for managing groups. Groups are Merkle trees, and the group members (i.e., identity commitments) are their leaves.
+:::
+
+## Off-chain groups
+
+Use the [`@semaphore-protocol/group`](https://github.com/semaphore-protocol/semaphore/blob/main/packages/group) package to manage off-chain groups.
+
+### Install package
+
+<Tabs
+defaultValue="npm"
+groupId="package-managers"
+values={[
+{label: 'npm', value: 'npm'},
+{label: 'Yarn', value: 'yarn'},
+{label: 'pnpm', value: 'pnpm'}
+]}>
+<TabItem value="npm">
+
+```bash
+npm install @semaphore-protocol/group
+```
+
+</TabItem>
+<TabItem value="yarn">
+
+```bash
+yarn add @semaphore-protocol/group
+```
+
+</TabItem>
+<TabItem value="pnpm">
+
+```bash
+pnpm add @semaphore-protocol/group
+```
+
+</TabItem>
+</Tabs>
+
+:::info
+Semaphore also provides `@semaphore-protocol/core`, which includes the functions of the following core packages: `@semaphore-protocol/identity`, `@semaphore-protocol/group`, `@semaphore-protocol/proof`.
+:::
+
+### Create a group
+
+To create a group instantiate `Group` without any parameters. For example:
+
+```ts
+import { Group } from "@semaphore-protocol/group"
+
+const group1 = new Group()
+```
+
+You can also initialize a group with multiple members by passing the list of identity commitments as the first parameter when creating the group:
+
+```ts
+const members = [
+  "11237622825477336339577122413451117718539783476837539122310492284566644730311",
+  "9332663527862709610616009715800254142772436825222910251631161087138559093425",
+  "13255821893820536903335282929376140649646180444238593676033702344407594536519"
+]
+
+const group2 = new Group(members)
+```
+
+### Add members
+
+Use the `addMember` method to add a member to a group. For example:
+
+```ts
+import { Identity } from "@semaphore-protocol/identity"
+
+const { commitment } = new Identity()
+
+group1.addMember(commitment)
+```
+
+To add a batch of members to a group, pass an array to the `addMembers` method. For example:
+
+```ts
+group1.addMembers(members)
+```
+
+:::caution
+When you use the same Semaphore identity across multiple groups, if an attacker takes control of that identity all the groups it is part of will be compromised. Consider using different identities for each group.
+:::
+
+### Remove or update members
+
+To remove members from a group, pass the member index to the `removeMember` method. For example:
+
+```ts
+group.removeMember(0)
+```
+
+To update members in a group, pass the member index and the new value to the `updateMember` method. For example:
+
+```ts
+group.updateMember(0, 2)
+```
+
+:::caution
+Removing a member from a group sets its value to 0.
+Given that the member isn't removed, the number of members (i.e., `group.size` on `group.members.length`) doesn't change.
+:::
+
+### Generate a Merkle proof
+
+Semaphore groups are [Merkle trees](/glossary#merkle-tree), and it is therefore possible to calculate the Merkle proof of a group member (i.e., tree leaf) by passing the index of the member to the `generateMerkleProof`. For example:
+
+```ts
+group.generateMerkleProof(0)
+```
+
+## On-chain groups
+
+Semaphore provides [`Semaphore.sol`](https://github.com/semaphore-protocol/semaphore/blob/main/packages/contracts/contracts/Semaphore.sol), a contract designed for managing on-chain groups ([deployed](/deployed-contracts) on major testnets).
+
+Use the [`@semaphore-protocol/contracts`](https://github.com/semaphore-protocol/semaphore/blob/main/packages/contracts) package to import the `ISemaphore.sol` interface in your contract and start using its functions.
+
+### Install package
+
+<Tabs
+defaultValue="npm"
+groupId="package-managers"
+values={[
+{label: 'npm', value: 'npm'},
+{label: 'Yarn', value: 'yarn'},
+{label: 'pnpm', value: 'pnpm'}
+]}>
+<TabItem value="npm">
+
+```bash
+npm install @semaphore-protocol/contracts
+```
+
+</TabItem>
+<TabItem value="yarn">
+
+```bash
+yarn add @semaphore-protocol/contracts
+```
+
+</TabItem>
+<TabItem value="pnpm">
+
+```bash
+pnpm add @semaphore-protocol/contracts
+```
+
+</TabItem>
+</Tabs>
+
+### Create a group
+
+To create a group initialize your contract with the `Semaphore.sol` address and a group ID.
+The `createGroup` function can be used to create a Semaphore group. For example:
+
+```solidity
+pragma solidity ^0.8.23;
+
+import "@semaphore-protocol/contracts/interfaces/ISemaphore.sol";
+
+contract YourContract {
+    ISemaphore public semaphore;
+
+    uint256 public groupId;
+
+    constructor(ISemaphore _semaphore, uint256 _groupId) {
+        semaphore = _semaphore;
+        groupId = _groupId;
+
+        semaphore.createGroup(groupId, address(this));
+    }
+}
+```
+
+`Semaphore.sol` also includes a mechanism to verify Semaphore proofs created with old Merkle tree roots, the duration of which can optionally be defined by the admin in the `createGroup` function as the third parameter. The default value duration is 1 hour and it should be fine for most use-cases. For more context see the issue [#98](https://github.com/semaphore-protocol/semaphore/issues/98).
+
+### Add members
+
+Use the `addMember` function to add a member to a group. For example:
+
+```solidity
+function addMember(uint256 identityCommitment) external {
+    semaphore.addMember(groupId, identityCommitment);
+}
+```
+
+To add a batch of members to a group, pass an array to the `addMembers` function. For example:
+
+```solidity
+function addMembers(uint256[] calldata identityCommitments) external {
+    semaphore.addMembers(groupId, identityCommitments);
+}
+```
+
+### Remove or update members
+
+To update members in a group, pass the identity commitment of the member you want to update, its new identity commitment and the siblings of the Merkle proof for that member. For example:
+
+```solidity
+function updateMember(uint256 identityCommitment, uint256 newIdentityCommitment, uint256[] calldata merkleProofSiblings) external {
+    semaphore.updateMember(groupId, identityCommitment, newIdentityCommitment, merkleProofSiblings);
+}
+```
+
+:::info
+To calculate the Merkle proof of a group member you can use the `generateMerkleProof` method of the JavaScript `Group` class described above.
+:::
+
+To remove members from a group, pass the identity commitment of the member you want to remove and the siblings of the Merkle proof for that member. For example:
+
+```solidity
+function removeMember(uint256 identityCommitment, uint256[] calldata merkleProofSiblings) external {
+    semaphore.removeMember(groupId, identityCommitment, merkleProofSiblings);
+}
+```
+
+:::info
+If you want to see an example of a working contract, have a look at the [`contracts-hardhat`](https://github.com/semaphore-protocol/semaphore/tree/main/packages/cli-template-contracts-hardhat) CLI template. You can also create a project with that template by running `semaphore create my-app --template contracts-hardhat`.
+:::
+

apps/docs/versioned_docs/version-V4-beta/guides/identities.mdx

@@ -0,0 +1,114 @@
+---
+sidebar_position: 1
+title: Identities
+---
+
+import Tabs from "@theme/Tabs"
+import TabItem from "@theme/TabItem"
+
+# Semaphore identities
+
+In order to join a [Semaphore group](/glossary#group), a user must first create a [Semaphore identity](/glossary#identity).
+A Semaphore identity contains three values generated with the identity:
+
+-   Private key
+-   Public key
+-   Commitment
+
+To use and verify the identity, the identity owner (user) must know its private key.
+To prevent fraud, the owner should keep their private key secret.
+
+## Install package
+
+In your code, use the [`@semaphore-protocol/identity`](https://github.com/semaphore-protocol/semaphore/tree/main/packages/identity) package to manage Semaphore identites.
+
+<Tabs
+defaultValue="npm"
+groupId="package-managers"
+values={[
+{label: 'npm', value: 'npm'},
+{label: 'Yarn', value: 'yarn'},
+{label: 'pnpm', value: 'pnpm'}
+]}>
+<TabItem value="npm">
+
+```bash
+npm install @semaphore-protocol/identity
+```
+
+</TabItem>
+<TabItem value="yarn">
+
+```bash
+yarn add @semaphore-protocol/identity
+```
+
+</TabItem>
+<TabItem value="pnpm">
+
+```bash
+pnpm add @semaphore-protocol/identity
+```
+
+</TabItem>
+</Tabs>
+
+:::info
+Semaphore also provides `@semaphore-protocol/core`, which includes the functions of the following core packages: `@semaphore-protocol/identity`, `@semaphore-protocol/group`, `@semaphore-protocol/proof`.
+:::
+
+## Create identities
+
+### Create random identities
+
+To create a random identity, instantiate `Identity` without any parameters. For example:
+
+```ts
+import { Identity } from "@semaphore-protocol/identity"
+
+const { privateKey, publicKey, commitment } = new Identity()
+```
+
+The new identity contains your private key, your public key, and its associated commitment, which serves as a public representation of the identity (similar to an Ethereum address).
+
+### Create deterministic identities
+
+If you pass a previously used private key or any secret value that acts as your private key as parameter, you can deterministically generate a Semaphore identity.
+
+```ts
+const identity1 = new Identity(privateKey)
+// or
+const identity2 = new Identity("secret-value")
+```
+
+:::tip
+Building a system to save or recover secret values of Semaphore identities is nontrivial.
+You may choose to delegate such functionality to existing wallets such as Metamask. For example:
+
+1. In Metamask, a user signs a message with the private key of their Ethereum account.
+2. In your application, the user creates a deterministic identity with the signed message that acts as your Semaphore private key.
+3. The user can now recreate their Semaphore identity whenever they want by signing the same message with their Ethereum account in Metamask.
+:::
+
+## Sign and verify messages
+
+Semaphore V4 uses asymmetric cryptography and in particular EdDSA to generate the identity keys. It is therefore also possible to sign messages and verify their signatures.
+
+### Sign a message
+
+Any Semaphore identity can sign a message by simply passing a string, number or buffer.
+
+```ts
+const message = "Hello World"
+
+const signature = identity1.signMessage(message)
+```
+
+### Verify a signature
+
+After a message is signed, anyone can verify the signature using the message itself, the signature, and the signer's public key.
+
+```ts
+// Static method.
+Identity.verifySignature(message, signature, identity1.publicKey)
+```

apps/docs/versioned_docs/version-V4-beta/guides/proofs.mdx

@@ -0,0 +1,114 @@
+---
+sidebar_position: 3
+title: Proofs
+---
+
+import Tabs from "@theme/Tabs"
+import TabItem from "@theme/TabItem"
+
+# Semaphore proofs
+
+Once a user joins a [Semaphore group](/glossary#group) with their [Semaphore identity](/glossary#identity), the user can send their anonymous [message](/glossary#message) with a zero-knowledge proof that proves the following:
+
+-   the user is a member of the group,
+-   the same user created the message and the proof.
+
+A unique [nullifier](/glossary#nullifier) is also generated for each proof that can be used to check whether that proof has already been validated.
+
+## Install package
+
+In your code, use the [`@semaphore-protocol/proof`](https://github.com/semaphore-protocol/semaphore/tree/main/packages/proof) package to generate and verify a proof.
+
+<Tabs
+defaultValue="npm"
+groupId="package-managers"
+values={[
+{label: 'npm', value: 'npm'},
+{label: 'Yarn', value: 'yarn'},
+{label: 'pnpm', value: 'pnpm'}
+]}>
+<TabItem value="npm">
+
+```bash
+npm install @semaphore-protocol/proof
+```
+
+</TabItem>
+<TabItem value="yarn">
+
+```bash
+yarn add @semaphore-protocol/proof
+```
+
+</TabItem>
+<TabItem value="pnpm">
+
+```bash
+pnpm add @semaphore-protocol/proof
+```
+
+</TabItem>
+</Tabs>
+
+:::info
+Semaphore also provides `@semaphore-protocol/core`, which includes the functions of the following core packages: `@semaphore-protocol/identity`, `@semaphore-protocol/group`, `@semaphore-protocol/proof`.
+:::
+
+## Generate a proof
+
+### 1. Create the identity
+
+In order for a user to generate a proof, it is necessary to create a Semaphore identity. If you do not know how to
+create an identity, see the previous [guide](/guides/identities) on identities.
+
+### 2. Create the group
+
+Before generating a proof you also need to create a Semaphore group containing the commitment of the Semaphore identity of the user who will generate the proof. If you do not know how to create a group, see the previous [guide](/guides/groups) on groups.
+
+If your group is on-chain, you can use the [`@semaphore-protocol/data`](https://github.com/semaphore-protocol/semaphore/tree/main/packages/data) library to fetch the group members and re-create the off-chain group. For example:
+
+```ts
+import { SemaphoreSubgraph } from "@semaphore-protocol/data"
+import { Group } from "@semaphore-protocol/group"
+
+const semaphoreSubgraph = new SemaphoreSubgraph("sepolia")
+
+const { members } = semaphoreSubgraph.getGroup("42", { members: true })
+
+const group = new Group(members)
+```
+
+### 3. Choose the scope
+
+Each proof requires a [scope](/glossary#scope), on which each user may only generate one valid proof. The scope, together with the user's private key, is used to generate the nullifier, which is the value you can actually use to check whether a proof with that scope has already been generated by that user. In a voting application where double-voting must be prevented, the scope could be the ballot id, or the Merkle root of the group.
+
+### 4. Generate the anomymous message
+
+Finally, you can generate the proof with the anonymous message using the `generateProof` function. For example:
+
+```ts
+import { generateProof } from "@semaphore-protocol/proof"
+
+const scope = group.root
+const message = 1
+
+const proof = await generateProof(identity, group, externalNullifier, message)
+```
+
+## Verify a proof
+
+To verify a proof, pass the proof you generated to the `verifyProof` function. For example:
+
+```ts
+import { verifyProof } from "@semaphore-protocol/proof"
+
+await verifyProof(proof) // true or false.
+```
+
+If you want to validate a proof on-chain, you can use [`@semaphore-protocol/contracts`](https://github.com/semaphore-protocol/semaphore/blob/main/packages/contracts) and the [`Semaphore.sol`](https://github.com/semaphore-protocol/semaphore/blob/main/packages/contracts/contracts/Semaphore.sol) contract, as explained in the previous [guide](/guides/groups#install-package-1), and use the `validateProof` function. For example:
+
+```solidity
+function validateProof(ISemaphore.SemaphoreProof calldata proof) external {
+    semaphore.validateProof(groupId, proof);
+}
+```

apps/docs/versioned_docs/version-V4-beta/resources.mdx

@@ -0,0 +1,16 @@
+---
+sidebar_position: 8
+---
+
+import Articles from '@site/src/components/Articles';
+import Videos from '@site/src/components/Videos';
+
+# Resources
+
+## Articles
+
+<Articles />
+
+## Videos
+
+<Videos />

apps/docs/versioned_docs/version-V4-beta/subgraph.mdx

@@ -0,0 +1,20 @@
+---
+sidebar_position: 6
+---
+
+import RemoteCode from '@site/src/components/RemoteCode';
+
+# Subgraph
+
+[The Graph](https://thegraph.com/) is a protocol for indexing networks like Ethereum and IPFS.
+Site owners publish _subgraphs_ that expose site data for anyone to query.
+Semaphore's subgraph allows you to retrieve data from the [`Semaphore.sol`](https://github.com/semaphore-protocol/semaphore/blob/main/packages/contracts/contracts/Semaphore.sol) smart contract.
+
+:::tip
+The Graph protocol uses the [GraphQL](https://graphql.org/) query language. For examples, see the [GraphQL API documentation](https://thegraph.com/docs/developer/graphql-api). Visit the [Semaphore subgraph](https://github.com/semaphore-protocol/semaphore/tree/main/apps/subgraph) to see the list of networks supported by Semaphore and its URLs.
+:::
+
+## Schema
+
+<RemoteCode url="https://raw.githubusercontent.com/semaphore-protocol/semaphore/main/apps/subgraph/schema.graphql"
+title="apps/subgraph/schema.graphql" language="graphql" />

apps/docs/versioned_docs/version-V4-beta/technical-reference/_category_.json

@@ -0,0 +1,4 @@
+{
+    "label": "Technical reference",
+    "position": 4
+}

apps/docs/versioned_docs/version-V4-beta/technical-reference/circuits.md

@@ -0,0 +1,54 @@
+---
+sidebar_position: 2
+---
+
+# Circuits
+
+The [Semaphore circuit](https://github.com/semaphore-protocol/semaphore/tree/main/packages/circuits/semaphore.circom) is the heart of the protocol and consists of three parts:
+
+-   [Proof of membership](#proof-of-membership)
+-   [Nullifier](#nullifier)
+-   [Message](#message)
+
+![Semaphore circuit](https://github.com/semaphore-protocol/semaphore/raw/main/packages/circuits/scheme.png)
+
+The diagram above shows how the input signals are used in the Semaphore circuit and how the outputs are calculated.
+
+## Proof of membership
+
+The circuit derive the public key from the secret and hashes the public key to generate an identity commitment. Then, it verifies the proof of membership against the Merkle root and the identity commitment.
+
+**Private inputs:**
+
+-   `merkleProofLength`: the actual number of nodes in the Merkle proof path,
+-   `merkleProofIndices[MAX_DEPTH]`: the list of 0s and 1s to calculate the hashes of the nodes at the correct position,
+-   `merkleProofSiblings[MAX_DEPTH]`: the list of siblings nodes to be used to calculate the hashes of the nodes up to the root,
+-   `secret`: the EdDSA [secret scalar](https://www.rfc-editor.org/rfc/rfc8032#section-5.1.5) derived from the private key.
+
+**Public outputs:**
+
+-   `merkleRoot`: The Merkle root of the tree.
+
+## Nullifier
+
+The circuit hashes the secret with the scope and then checks that the result matches the provided nullifier.
+
+**Private inputs:**
+
+-   `secret`: the EdDSA [secret scalar](https://www.rfc-editor.org/rfc/rfc8032#section-5.1.5) derived from the private key.
+
+**Public inputs:**
+
+-   `scope`: the value used like a topic on which users can generate a valid proof only once.
+
+**Public outputs:**
+
+-   `nullifier`: the value designed to be a unique identifier and used to prevent the same proof from being used twice.
+
+## Message
+
+The circuit calculates a dummy square of the message to prevent any tampering with the proof.
+
+**Public inputs:**
+
+-   `message`: the anonymous value the user broadcasts.

apps/docs/versioned_docs/version-V4-beta/technical-reference/contracts.md

@@ -0,0 +1,41 @@
+---
+sidebar_position: 3
+---
+
+# Contracts
+
+Semaphore contracts are designed with minimal yet essential code, enabling developers to efficiently manage on-chain groups and verify or validate zero-knowledge proofs.
+There are three contracts:
+
+-   [`SemaphoreVerifier.sol`](https://github.com/semaphore-protocol/semaphore/blob/main/packages/contracts/contracts/base/SemaphoreVerifier.sol)
+-   [`SemaphoreGroups.sol`](https://github.com/semaphore-protocol/semaphore/blob/main/packages/contracts/contracts/base/SemaphoreGroups.sol)
+-   [`Semaphore.sol`](https://github.com/semaphore-protocol/semaphore/blob/main/packages/contracts/contracts/Semaphore.sol)
+
+:::info
+To use Semaphore contracts and interfaces in your project,
+install the [`@semaphore-protocol/contracts`](https://github.com/semaphore-protocol/semaphore/tree/main/packages/contracts) NPM package.
+:::
+
+## SemaphoreVerifier.sol
+
+`SemaphoreVerifier.sol` is an extended version of the Groth16 verifier generated by default with [SnarkJS](https://github.com/iden3/snarkjs). It contains a function for verifying proofs and a list of verification keys parameters.
+
+Since the Semaphore circuit is compiled with a `MAX_DEPTH` range from 1 to 32 during the [trusted setup](/glossary#trusted-setup), the verifier must contain the parameters of the verification keys of each instance.
+
+## SemaphoreGroups.sol
+
+`SemaphoreGroups.sol` is an abstract contract which contains the functions required to create on-chain groups, and add/remove/update members. Each group is assigned an admin, which can be an Ethereum account or another contract.
+
+This contract uses the [`LeanIMT.sol`](https://github.com/privacy-scaling-explorations/zk-kit/blob/main/packages/imt.sol/contracts/internal/InternalLeanIMT.sol) ZK-Kit library, an optimized binary incremental Merkle tree with [Poseidon](https://www.poseidon-hash.info).
+
+## Semaphore.sol
+
+`Semaphore.sol` inherits `SemaphoreGroups.sol` and adds functions to verify (`verifyProof`) or validate (`validateProof`) a Semaphore proof. The only constructor parameter is the `SemaphoreVerifier.sol` address, which must be deployed separately.
+
+The `verifyProof` function contains code for checking whether a Semaphore proof is true or false. It is a read-only view function that in addition to verifying the proof also includes a mechanism for keeping track of proofs generated with old Merkle roots, i.e. group instances that contained fewer or different members.
+
+The `validateProof` function first checks whether a proof with the same nullifier has already been validated, and then verifies the proof with the `verifyProof` function and saves the nullifier. This function also creates a log with the group id and the proof, which can then additionally be verified off-chain.
+
+:::info
+Semaphore contracts are deployed on the main testnets and Arbitrum One. See the [deployed contracts](/deployed-contracts) to check the addresses.
+::::

apps/docs/versioned_docs/version-V4-beta/troubleshooting.md

@@ -0,0 +1,20 @@
+---
+sidebar_position: 9
+---
+
+import Tabs from "@theme/Tabs"
+import TabItem from "@theme/TabItem"
+
+# Troubleshooting
+
+If these suggestions do not work, feel free to ask for more help and support on [Github Discussions](https://github.com/semaphore-protocol/semaphore/discussions) or [Discord](https://semaphore.pse.dev/discord) ("dev-chat" channel).
+
+## Creating a Group
+
+When you create a group and the transaction is reverted, make sure that the group id you are using does not exist on the network you are using.
+
+To check that, you can use the [Semaphore CLI](https://github.com/semaphore-protocol/semaphore/tree/main/packages/cli) with the command `get-groups` and the network you are using and then, make sure that your group id is not part of that list. You can also use the [Semaphore explorer](https://explorer.semaphore.pse.dev/).
+
+## Transaction reverted when using the same nullifier
+
+When you generate a proof using the same [scope](/glossary#scope) you used to validate a proof before, the transaction will be reverted because that scope (and thus the [nullifier](/glossary#nullifier)) has already been used. If you want to send and validate several proofs from the same identity, you need to use a different scope for each time you generate a proof.

apps/docs/versioned_docs/version-V4-beta/what-is-semaphore.md

@@ -0,0 +1,51 @@
+---
+id: introduction
+title: What Is Semaphore?
+sidebar_position: 1
+slug: /
+---
+
+## Overview
+
+[Semaphore](https://github.com/semaphore-protocol/semaphore/tree/main) is a [zero-knowledge](https://z.cash/technology/zksnarks) protocol that allows you to cast a message (for example, a vote or endorsement) as a provable group member without revealing your identity.
+Additionally, it provides a simple mechanism to prevent double-signaling.
+Use cases include private voting, whistleblowing, anonymous DAOs and mixers.
+
+## Features
+
+With Semaphore, you can allow your users to do the following:
+
+1. [Create a Semaphore identity](/guides/identities/).
+2. [Add their Semaphore identity to a group (i.e. _Merkle tree_)](/guides/groups/).
+3. [Send a verifiable, anonymous message (e.g a vote or endorsement)](/guides/proofs/).
+
+When a user broadcasts a message, Semaphore zero-knowledge
+proofs can ensure that the user has joined the group and hasn't already cast a message with their nullifier.
+
+Semaphore uses on-chain Solidity contracts and off-chain JavaScript libraries that work in tandem.
+
+-   Off chain, JavaScript libraries can be used to create identities, manage groups and generate proofs.
+-   On chain, Solidity contracts can be used to manage groups and verify proofs.
+
+## Developer benefits
+
+Semaphore is designed to be a simple and generic _privacy layer_ for decentralized applications (dApps) on Ethereum. It encourages modular application design, allowing dApp developers to choose and customize the on-chain and off-chain components they need.
+
+## About the code
+
+The core of the protocol is the [circuit logic](https://github.com/semaphore-protocol/semaphore/tree/main/packages/circuits/semaphore.circom).
+In addition to circuits,
+Semaphore provides [Solidity contracts](https://github.com/semaphore-protocol/semaphore/tree/main/packages/contracts)
+and [JavaScript libraries](https://github.com/semaphore-protocol/semaphore/tree/main#-packages) that allow developers to generate zero-knowledge proofs and verify them with minimal effort.
+
+### Audits
+
+| Version | Auditors                          | Report                                                                                                                | Scope                    |
+| ------- | --------------------------------- | --------------------------------------------------------------------------------------------------------------------- | ------------------------ |
+| v2.0.0  | [PSE](https://pse.dev/)           | [Semaphore_2.0.0_Audit.pdf](https://github.com/semaphore-protocol/semaphore/files/9850441/Semaphore_2.0.0_Audit.pdf)  | `circuits`, `contracts`  |
+| v2.5.0  | [PSE](https://pse.dev/)           | [Semaphore_2.5.0_Audit.pdf](https://github.com/semaphore-protocol/semaphore/files/9845008/Semaphore_2.5.0_Audit.pdf)  | `contracts`, `libraries` |
+| v3.0.0  | [Veridise](https://veridise.com/) | [Semaphore_3.0.0_Audit.pdf](https://github.com/semaphore-protocol/semaphore/files/10513776/Semaphore_3.0.0_Audit.pdf) | `circuits`, `contracts`  |
+
+:::caution
+Semaphore V4 is in early testing and might have bugs. Please, don't use it in production.
+:::

apps/docs/versioned_sidebars/version-V1-sidebars.json

@@ -1,5 +1,5 @@
 {
-    "version-V1/mySidebar": [
+    "mySidebar": [
         {
             "type": "autogenerated",
             "dirName": "."

apps/docs/versioned_sidebars/version-V2-sidebars.json

@@ -1,5 +1,5 @@
 {
-    "version-V2/mySidebar": [
+    "mySidebar": [
         {
             "type": "autogenerated",
             "dirName": "."

apps/docs/versioned_sidebars/version-V3-sidebars.json

@@ -1,5 +1,5 @@
 {
-    "version-V3/mySidebar": [
+    "mySidebar": [
         {
             "type": "autogenerated",
             "dirName": "."

apps/docs/versioned_sidebars/version-V4-beta-sidebars.json

@@ -0,0 +1,8 @@
+{
+    "mySidebar": [
+        {
+            "type": "autogenerated",
+            "dirName": "."
+        }
+    ]
+}

apps/docs/versions.json

@@ -1 +1 @@
-["V3", "V2", "V1"]
+["V4-beta", "V3", "V2", "V1"]

apps/subgraph/.gitignore

@@ -6,3 +6,5 @@ subgraph.yaml
 
 # Tests
 /tests/.bin
+
+/data

apps/subgraph/README.md

@@ -42,13 +42,13 @@
 
 ## Networks
 
-| Semaphore version | Sepolia                                                                                   | Goerli                                                                                                            | Mumbai                                                                                  | Optimism Goerli                                                                                           | Arbitrum Goerli                                                                                           | Arbitrum One                                                                                                          |
-| ----------------- | ----------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------- |
-| v2.0              | N/A                                                                                       | N/A                                                                                                               | N/A                                                                                     | N/A                                                                                                       | N/A                                                                                                       | [semaphore-protocol/arbitrum](https://thegraph.com/hosted-service/subgraph/semaphore-protocol/arbitrum)               |
-| v2.5              | N/A                                                                                       | [semaphore-protocol/goerli](https://thegraph.com/hosted-service/subgraph/semaphore-protocol/goerli)               | N/A                                                                                     | N/A                                                                                                       | N/A                                                                                                       | N/A                                                                                                                   |
-| v2.6              | N/A                                                                                       | [semaphore-protocol/goerli-5259d3](https://thegraph.com/hosted-service/subgraph/semaphore-protocol/goerli-5259d3) | N/A                                                                                     | N/A                                                                                                       | N/A                                                                                                       | [semaphore-protocol/arbitrum-86337c](https://thegraph.com/hosted-service/subgraph/semaphore-protocol/arbitrum-86337c) |
-| v3.0 - v3.1       | N/A                                                                                       | [semaphore-protocol/goerli-89490c](https://thegraph.com/hosted-service/subgraph/semaphore-protocol/goerli-89490c) | N/A                                                                                     | N/A                                                                                                       | N/A                                                                                                       | [semaphore-protocol/arbitrum-72dca3](https://thegraph.com/hosted-service/subgraph/semaphore-protocol/arbitrum-72dca3) |
-| >= v3.2           | [semaphore-sepolia](https://api.studio.thegraph.com/query/14377/semaphore-sepolia/v3.6.1) | [semaphore-goerli](https://api.studio.thegraph.com/query/14377/semaphore-goerli/v3.6.1)                           | [semaphore-mumbai](https://api.studio.thegraph.com/query/14377/semaphore-mumbai/v3.6.1) | [semaphore-optimism-goerli](https://api.studio.thegraph.com/query/14377/semaphore-optimism-goerli/v3.6.1) | [semaphore-arbitrum-goerli](https://api.studio.thegraph.com/query/14377/semaphore-arbitrum-goerli/v3.6.1) | [semaphore-arbitrum](https://api.studio.thegraph.com/query/14377/semaphore-arbitrum/v3.6.1)                           |
+| Semaphore version | Sepolia                                                                                   | Mumbai                                                                                  | Optimism Sepolia | Arbitrum Sepolia | Arbitrum One                                                                                                          |
+| ----------------- | ----------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------- | ---------------- | ---------------- | --------------------------------------------------------------------------------------------------------------------- |
+| v2.0              | N/A                                                                                       | N/A                                                                                     | N/A              | N/A              | [semaphore-protocol/arbitrum](https://thegraph.com/hosted-service/subgraph/semaphore-protocol/arbitrum)               |
+| v2.5              | N/A                                                                                       | N/A                                                                                     | N/A              | N/A              | N/A                                                                                                                   |
+| v2.6              | N/A                                                                                       | N/A                                                                                     | N/A              | N/A              | [semaphore-protocol/arbitrum-86337c](https://thegraph.com/hosted-service/subgraph/semaphore-protocol/arbitrum-86337c) |
+| v3.0 - v3.1       | N/A                                                                                       | N/A                                                                                     | N/A              | N/A              | [semaphore-protocol/arbitrum-72dca3](https://thegraph.com/hosted-service/subgraph/semaphore-protocol/arbitrum-72dca3) |
+| >= v3.2           | [semaphore-sepolia](https://api.studio.thegraph.com/query/14377/semaphore-sepolia/v3.6.1) | [semaphore-mumbai](https://api.studio.thegraph.com/query/14377/semaphore-mumbai/v3.6.1) | N/A              | N/A              | [semaphore-arbitrum](https://api.studio.thegraph.com/query/14377/semaphore-arbitrum/v3.6.1)                           |
 
 ## 🛠 Install
 
@@ -111,15 +111,15 @@ yarn deploy <subgraph-name>
 Start services required for TheGraph node by running:
 
 ```bash
-docker compose -f docker-compose-graph.yml up
+docker compose up
 ```
 
 Start a local Hardhat node and deploy the [Semaphore contract](https://github.com/semaphore-protocol/semaphore/tree/main/packages/contracts):
 
 ```bash
 # CWD = /semaphore/packages/contracts
-yarn start
-yarn deploy:semaphore --network localhost
+yarn start --hostname 0.0.0.0
+yarn deploy --network localhost
 ```
 
 Create the `subgraph.yaml` file for your local network and create/deploy your subgraph:

apps/subgraph/docker-compose.yml

@@ -1,4 +1,6 @@
-version: "3.9"
+# https://github.com/graphprotocol/graph-node/blob/master/docker/docker-compose.yml
+
+version: "3"
 
 services:
     graph-node:
@@ -12,49 +14,35 @@ services:
         depends_on:
             - ipfs
             - postgres
+        extra_hosts:
+            - host.docker.internal:host-gateway
         environment:
             postgres_host: postgres
             postgres_user: graph-node
             postgres_pass: let-me-in
             postgres_db: graph-node
-            postgres_port: 5432
             ipfs: "ipfs:5001"
-            ethereum: "localhost:http://host.docker.internal:8545" # Should use the `localhost` as network name in subgraph.yml
-            # ethereum: 'goerli:https://goerli.infura.io/v3/YOUR-API-KEY'
+            ethereum: "localhost:http://host.docker.internal:8545"
             GRAPH_LOG: info
-            GRAPH_ALLOW_NON_DETERMINISTIC_IPFS: 1
-        networks:
-            - the-graph
-
     ipfs:
-        image: ipfs/go-ipfs:v0.4.23
+        image: ipfs/kubo:v0.14.0
         ports:
             - "5001:5001"
         volumes:
-            - graph-ipfs:/data/ipfs
-        networks:
-            - the-graph
-
+            - ./data/ipfs:/data/ipfs
     postgres:
-        image: postgres
+        image: postgres:14
         ports:
-            - "5433:5432"
-        command: ["postgres", "-cshared_preload_libraries=pg_stat_statements"]
+            - "5432:5432"
+        command: ["postgres", "-cshared_preload_libraries=pg_stat_statements", "-cmax_connections=200"]
         environment:
             POSTGRES_USER: graph-node
             POSTGRES_PASSWORD: let-me-in
             POSTGRES_DB: graph-node
+            # FIXME: remove this env. var. which we shouldn't need. Introduced by
+            # <https://github.com/graphprotocol/graph-node/pull/3511>, maybe as a
+            # workaround for https://github.com/docker/for-mac/issues/6270?
+            PGDATA: "/var/lib/postgresql/data"
             POSTGRES_INITDB_ARGS: "-E UTF8 --locale=C"
-        networks:
-            - the-graph
         volumes:
-            - graph-postgres:/var/lib/postgresql/data
-
-networks:
-    the-graph:
-        internal: false
-        driver: bridge
-
-volumes:
-    graph-postgres:
-    graph-ipfs:
+            - ./data/postgres:/var/lib/postgresql/data

apps/subgraph/networks.json

@@ -1,43 +1,37 @@
 {
     "sepolia": {
         "Semaphore": {
-            "address": "0x3889927F0B5Eb1a02C6E2C20b39a1Bd4EAd76131",
-            "startBlock": 3231111
-        }
-    },
-    "goerli": {
-        "Semaphore": {
-            "address": "0x3889927F0B5Eb1a02C6E2C20b39a1Bd4EAd76131",
-            "startBlock": 8777695
+            "address": "0x5B8e7cC7bAC61A4b952d472b67056B2f260ba6dc",
+            "startBlock": 5150903
         }
     },
     "mumbai": {
         "Semaphore": {
-            "address": "0x3889927F0B5Eb1a02C6E2C20b39a1Bd4EAd76131",
-            "startBlock": 33995010
+            "address": "",
+            "startBlock": 0
         }
     },
-    "optimism-goerli": {
+    "optimism-sepolia": {
         "Semaphore": {
-            "address": "0x3889927F0B5Eb1a02C6E2C20b39a1Bd4EAd76131",
-            "startBlock": 7632846
+            "address": "",
+            "startBlock": 0
         }
     },
-    "arbitrum-goerli": {
+    "arbitrum-sepolia": {
         "Semaphore": {
-            "address": "0x3889927F0B5Eb1a02C6E2C20b39a1Bd4EAd76131",
-            "startBlock": 15174410
+            "address": "",
+            "startBlock": 0
         }
     },
     "arbitrum-one": {
         "Semaphore": {
-            "address": "0xc60E0Ee1a2770d5F619858C641f14FC4a6401520",
-            "startBlock": 77278430
+            "address": "",
+            "startBlock": 0
         }
     },
     "localhost": {
         "Semaphore": {
-            "address": "0xDc64a140Aa3E981100a9becA4E685f962f0cF6C9",
+            "address": "0x9fE46736679d2D9a65F0992F2272dE9f3c7fa6e0",
             "startBlock": 0
         }
     }

apps/subgraph/package.json

@@ -5,18 +5,19 @@
     "license": "MIT",
     "private": true,
     "scripts": {
-        "codegen": "node scripts/generateSubgraph.js ${0} && graph codegen",
+        "codegen": "node scripts/generate-subgraph.js ${0} && graph codegen",
         "build": "graph build",
         "auth": "graph auth --studio",
         "deploy": "graph deploy --node https://api.studio.thegraph.com/deploy/ ${0}",
+        "start-ipfs": "node scripts/start-ipfs.js",
         "create-local": "graph create --node http://localhost:8020/ semaphore",
         "remove-local": "graph remove --node http://localhost:8020/ semaphore",
         "deploy-local": "graph deploy --node http://localhost:8020/ --ipfs http://localhost:5001 semaphore",
         "test": "graph test Semaphore -v 0.5.0"
     },
     "dependencies": {
-        "@graphprotocol/graph-cli": "0.56.0",
-        "@graphprotocol/graph-ts": "^0.31.0"
+        "@graphprotocol/graph-cli": "0.67.0",
+        "@graphprotocol/graph-ts": "0.32.0"
     },
     "devDependencies": {
         "@types/mustache": "^4.2.2",

apps/subgraph/schema.graphql

@@ -1,35 +1,36 @@
 type MerkleTree @entity {
     id: ID!
-    depth: BigInt!
+    depth: Int!
     root: BigInt
-    zeroValue: BigInt!
-    numberOfLeaves: Int!
+    size: Int!
     group: Group!
 }
 
 type Group @entity {
     id: ID!
-    merkleTree: MerkleTree!
     timestamp: BigInt!
+    merkleTree: MerkleTree!
     admin: Bytes
     members: [Member!] @derivedFrom(field: "group")
-    verifiedProofs: [VerifiedProof!] @derivedFrom(field: "group")
+    validatedProofs: [ValidatedProof!] @derivedFrom(field: "group")
 }
 
 type Member @entity {
     id: ID!
-    identityCommitment: BigInt!
     timestamp: BigInt!
+    identityCommitment: BigInt!
     index: Int!
     group: Group!
 }
 
-type VerifiedProof @entity {
+type ValidatedProof @entity {
     id: ID!
-    signal: BigInt!
-    merkleTreeRoot: BigInt!
-    nullifierHash: BigInt!
-    externalNullifier: BigInt!
     timestamp: BigInt!
+    message: BigInt!
+    scope: BigInt!
+    merkleTreeRoot: BigInt!
+    merkleTreeDepth: Int!
+    nullifier: BigInt!
+    points: [BigInt!]!
     group: Group!
 }

apps/subgraph/src/semaphore.ts

@@ -1,13 +1,14 @@
-import { ByteArray, log } from "@graphprotocol/graph-ts"
+import { BigInt, ByteArray, log } from "@graphprotocol/graph-ts"
 import {
     GroupAdminUpdated,
     GroupCreated,
     MemberAdded,
     MemberRemoved,
     MemberUpdated,
-    ProofVerified
+    MembersAdded,
+    ProofValidated
 } from "../generated/Semaphore/Semaphore"
-import { Member, Group, VerifiedProof, MerkleTree } from "../generated/schema"
+import { Group, Member, MerkleTree, ValidatedProof } from "../generated/schema"
 import { concat, hash } from "./utils"
 
 /**
@@ -22,9 +23,8 @@ export function createGroup(event: GroupCreated): void {
 
     log.info("Creating group '{}'", [group.id])
 
-    merkleTree.depth = event.params.merkleTreeDepth
-    merkleTree.zeroValue = event.params.zeroValue
-    merkleTree.numberOfLeaves = 0
+    merkleTree.depth = 0
+    merkleTree.size = 0
     merkleTree.group = group.id
 
     group.timestamp = event.block.timestamp
@@ -76,12 +76,12 @@ export function addMember(event: MemberAdded): void {
         member.group = merkleTree.group
         member.identityCommitment = event.params.identityCommitment
         member.timestamp = event.block.timestamp
-        member.index = merkleTree.numberOfLeaves
+        member.index = merkleTree.size
 
         member.save()
 
         merkleTree.root = event.params.merkleTreeRoot
-        merkleTree.numberOfLeaves += 1
+        merkleTree.size += 1
 
         merkleTree.save()
 
@@ -138,7 +138,7 @@ export function removeMember(event: MemberRemoved): void {
         if (member) {
             log.info("Removing member '{}' from the onchain group '{}'", [member.id, merkleTree.group])
 
-            member.identityCommitment = merkleTree.zeroValue
+            member.identityCommitment = BigInt.fromI32(0)
 
             member.save()
 
@@ -152,39 +152,83 @@ export function removeMember(event: MemberRemoved): void {
 }
 
 /**
- * Adds a verified proof in a group.
- * @param event Ethereum event emitted when a proof has been verified.
+ * Adds N members to a group.
+ * @param event Ethereum event emitted when many members are added to a group.
  */
-export function addVerifiedProof(event: ProofVerified): void {
-    log.debug(`ProofVerified event block {}`, [event.block.number.toString()])
+export function addMembers(event: MembersAdded): void {
+    log.debug(`MembersAdded event block {}`, [event.block.number.toString()])
+
+    const merkleTree = MerkleTree.load(event.params.groupId.toString())
+
+    // eslint-disable-next-line prefer-destructuring
+    const identityCommitments = event.params.identityCommitments
+    // eslint-disable-next-line prefer-destructuring
+    const startIndex = event.params.startIndex
+
+    if (merkleTree) {
+        for (let i = 0; i < identityCommitments.length; i += 1) {
+            const identityCommitment = identityCommitments[i]
+
+            const memberId = hash(
+                concat(ByteArray.fromI32(startIndex.toI32() + i), ByteArray.fromBigInt(event.params.groupId))
+            )
+            const member = new Member(memberId)
+
+            log.info("Adding member '{}' in the onchain group '{}'", [member.id, merkleTree.group])
+
+            member.group = merkleTree.group
+            member.identityCommitment = identityCommitment
+            member.timestamp = event.block.timestamp
+            member.index = startIndex.toI32() + i
+
+            member.save()
+
+            log.info("Member '{}' of the onchain group '{}' has been added", [member.id, merkleTree.id])
+        }
+
+        merkleTree.root = event.params.merkleTreeRoot
+        merkleTree.size += identityCommitments.length
+
+        merkleTree.save()
+    }
+}
+
+/**
+ * Adds a validated proof in a group.
+ * @param event Ethereum event emitted when a proof has been validated.
+ */
+export function addValidatedProof(event: ProofValidated): void {
+    log.debug(`ProofValidated event block {}`, [event.block.number.toString()])
 
     const group = Group.load(event.params.groupId.toString())
 
     if (group) {
-        const verifiedProofId = hash(
-            concat(ByteArray.fromBigInt(event.params.nullifierHash), ByteArray.fromBigInt(event.params.groupId))
+        const validatedProofId = hash(
+            concat(ByteArray.fromBigInt(event.params.nullifier), ByteArray.fromBigInt(event.params.groupId))
         )
 
-        const verifiedProof = new VerifiedProof(verifiedProofId)
+        const validatedProof = new ValidatedProof(validatedProofId)
 
-        log.info("Adding verified proof with signal '{}' in the onchain group '{}'", [
-            event.params.signal.toHexString(),
+        log.info("Adding validated proof with message '{}' in the onchain group '{}'", [
+            event.params.message.toHexString(),
             group.id
         ])
 
-        verifiedProof.group = group.id
-        verifiedProof.signal = event.params.signal
-        verifiedProof.merkleTreeRoot = event.params.merkleTreeRoot
-        verifiedProof.externalNullifier = event.params.externalNullifier
-        verifiedProof.nullifierHash = event.params.nullifierHash
-        verifiedProof.timestamp = event.block.timestamp
+        validatedProof.group = group.id
+        validatedProof.message = event.params.message
+        validatedProof.merkleTreeRoot = event.params.merkleTreeRoot
+        validatedProof.merkleTreeDepth = event.params.merkleTreeDepth.toI32()
+        validatedProof.scope = event.params.scope
+        validatedProof.nullifier = event.params.nullifier
+        validatedProof.points = event.params.points
+        validatedProof.timestamp = event.block.timestamp
 
-        verifiedProof.save()
+        validatedProof.save()
 
         group.save()
 
-        log.info("Verified proof with signal '{}' in the onchain group '{}' has been added", [
-            event.params.signal.toHexString(),
+        log.info("Validated proof with message '{}' in the onchain group '{}' has been added", [
+            event.params.message.toHexString(),
             group.id
         ])
     }

apps/subgraph/subgraph.template.yaml

@@ -20,7 +20,7 @@ dataSources:
               - name: Semaphore
                 file: ./abis/Semaphore.json
           eventHandlers:
-              - event: GroupCreated(indexed uint256,uint256,uint256)
+              - event: GroupCreated(indexed uint256)
                 handler: createGroup
               - event: GroupAdminUpdated(indexed uint256,indexed address,indexed address)
                 handler: updateGroupAdmin
@@ -30,6 +30,8 @@ dataSources:
                 handler: updateMember
               - event: MemberRemoved(indexed uint256,uint256,uint256,uint256)
                 handler: removeMember
-              - event: ProofVerified(indexed uint256,indexed uint256,uint256,indexed uint256,uint256)
-                handler: addVerifiedProof
+              - event: MembersAdded(indexed uint256,uint256,uint256[],uint256)
+                handler: addMembers
+              - event: ProofValidated(indexed uint256,uint256,indexed uint256,uint256,uint256,indexed uint256,uint256[8])
+                handler: addValidatedProof
           file: ./src/semaphore.ts

apps/subgraph/tests/semaphore-utils.ts

@@ -1,5 +1,5 @@
+import { Address, BigInt, ethereum } from "@graphprotocol/graph-ts"
 import { newMockEvent } from "matchstick-as"
-import { ethereum, BigInt, Address } from "@graphprotocol/graph-ts"
 import {
     GroupAdminUpdated,
     GroupCreated,
@@ -7,21 +7,16 @@ import {
     MemberAdded,
     MemberRemoved,
     MemberUpdated,
-    ProofVerified
+    MembersAdded,
+    ProofValidated
 } from "../generated/Semaphore/Semaphore"
 
-export function createGroupCreatedEvent(groupId: BigInt, merkleTreeDepth: BigInt, zeroValue: BigInt): GroupCreated {
+export function createGroupCreatedEvent(groupId: BigInt): GroupCreated {
     const groupCreatedEvent = changetype<GroupCreated>(newMockEvent())
 
     groupCreatedEvent.parameters = []
 
     groupCreatedEvent.parameters.push(new ethereum.EventParam("groupId", ethereum.Value.fromUnsignedBigInt(groupId)))
-    groupCreatedEvent.parameters.push(
-        new ethereum.EventParam("merkleTreeDepth", ethereum.Value.fromUnsignedBigInt(merkleTreeDepth))
-    )
-    groupCreatedEvent.parameters.push(
-        new ethereum.EventParam("zeroValue", ethereum.Value.fromUnsignedBigInt(zeroValue))
-    )
 
     return groupCreatedEvent
 }
@@ -132,29 +127,58 @@ export function createMemberUpdatedEvent(
     return memberUpdatedEvent
 }
 
-export function createProofVerifiedEvent(
+export function createMembersAddedEvent(
     groupId: BigInt,
-    merkleTreeRoot: BigInt,
-    externalNullifier: BigInt,
-    nullifierHash: BigInt,
-    signal: BigInt
-): ProofVerified {
-    const proofVerifiedEvent = changetype<ProofVerified>(newMockEvent())
+    startIndex: BigInt,
+    identityCommitments: BigInt[],
+    merkleTreeRoot: BigInt
+): MembersAdded {
+    const membersAddedEvent = changetype<MembersAdded>(newMockEvent())
 
-    proofVerifiedEvent.parameters = []
+    membersAddedEvent.parameters = []
 
-    proofVerifiedEvent.parameters.push(new ethereum.EventParam("groupId", ethereum.Value.fromUnsignedBigInt(groupId)))
-    proofVerifiedEvent.parameters.push(
+    membersAddedEvent.parameters.push(new ethereum.EventParam("groupId", ethereum.Value.fromUnsignedBigInt(groupId)))
+    membersAddedEvent.parameters.push(
+        new ethereum.EventParam("startIndex", ethereum.Value.fromUnsignedBigInt(startIndex))
+    )
+    membersAddedEvent.parameters.push(
+        new ethereum.EventParam("identityCommitments", ethereum.Value.fromUnsignedBigIntArray(identityCommitments))
+    )
+    membersAddedEvent.parameters.push(
         new ethereum.EventParam("merkleTreeRoot", ethereum.Value.fromUnsignedBigInt(merkleTreeRoot))
     )
-    proofVerifiedEvent.parameters.push(
-        new ethereum.EventParam("nullifierHash", ethereum.Value.fromUnsignedBigInt(nullifierHash))
-    )
-    proofVerifiedEvent.parameters.push(
-        new ethereum.EventParam("externalNullifier", ethereum.Value.fromUnsignedBigInt(externalNullifier))
-    )
 
-    proofVerifiedEvent.parameters.push(new ethereum.EventParam("signal", ethereum.Value.fromUnsignedBigInt(signal)))
-
-    return proofVerifiedEvent
+    return membersAddedEvent
+}
+
+export function createProofVerifiedEvent(
+    groupId: BigInt,
+    merkleTreeDepth: BigInt,
+    merkleTreeRoot: BigInt,
+    nullifier: BigInt,
+    message: BigInt,
+    scope: BigInt,
+    points: BigInt[]
+): ProofValidated {
+    const proofValidatedEvent = changetype<ProofValidated>(newMockEvent())
+
+    proofValidatedEvent.parameters = []
+
+    proofValidatedEvent.parameters.push(new ethereum.EventParam("groupId", ethereum.Value.fromUnsignedBigInt(groupId)))
+    proofValidatedEvent.parameters.push(
+        new ethereum.EventParam("merkleTreeDepth", ethereum.Value.fromUnsignedBigInt(merkleTreeDepth))
+    )
+    proofValidatedEvent.parameters.push(
+        new ethereum.EventParam("merkleTreeRoot", ethereum.Value.fromUnsignedBigInt(merkleTreeRoot))
+    )
+    proofValidatedEvent.parameters.push(
+        new ethereum.EventParam("nullifier", ethereum.Value.fromUnsignedBigInt(nullifier))
+    )
+    proofValidatedEvent.parameters.push(new ethereum.EventParam("message", ethereum.Value.fromUnsignedBigInt(message)))
+    proofValidatedEvent.parameters.push(new ethereum.EventParam("scope", ethereum.Value.fromUnsignedBigInt(scope)))
+    proofValidatedEvent.parameters.push(
+        new ethereum.EventParam("points", ethereum.Value.fromUnsignedBigIntArray(points))
+    )
+
+    return proofValidatedEvent
 }

apps/subgraph/tests/semaphore.test.ts

@@ -1,8 +1,10 @@
+/* eslint-disable jest/expect-expect */
 import { Address, BigInt, ByteArray } from "@graphprotocol/graph-ts"
 import { afterAll, assert, clearStore, describe, test } from "matchstick-as/assembly/index"
 import {
     addMember,
-    addVerifiedProof,
+    addMembers,
+    addValidatedProof,
     createGroup,
     removeMember,
     updateGroupAdmin,
@@ -15,6 +17,7 @@ import {
     createMemberAddedEvent,
     createMemberRemovedEvent,
     createMemberUpdatedEvent,
+    createMembersAddedEvent,
     createProofVerifiedEvent
 } from "./semaphore-utils"
 
@@ -27,12 +30,10 @@ describe("Semaphore subgraph", () => {
     describe("# createGroup", () => {
         test("Should have created a group", () => {
             const groupId = BigInt.fromI32(234)
-            const merkleTreeDepth = BigInt.fromI32(20)
-            const zeroValue = BigInt.fromI32(0)
             const oldAdmin = Address.fromString("0x0000000000000000000000000000000000000000")
             const newAdmin = Address.fromString("0x0000000000000000000000000000000000000001")
 
-            const event1 = createGroupCreatedEvent(groupId, merkleTreeDepth, zeroValue)
+            const event1 = createGroupCreatedEvent(groupId)
             const event2 = createGroupAdminUpdatedEvent(groupId, oldAdmin, newAdmin)
 
             createGroup(event1)
@@ -44,9 +45,8 @@ describe("Semaphore subgraph", () => {
             assert.fieldEquals("Group", groupId.toString(), "admin", "0x0000000000000000000000000000000000000001")
             assert.fieldEquals("Group", groupId.toString(), "merkleTree", groupId.toString())
 
-            assert.fieldEquals("MerkleTree", groupId.toString(), "depth", "20")
-            assert.fieldEquals("MerkleTree", groupId.toString(), "zeroValue", "0")
-            assert.fieldEquals("MerkleTree", groupId.toString(), "numberOfLeaves", "0")
+            assert.fieldEquals("MerkleTree", groupId.toString(), "depth", "0")
+            assert.fieldEquals("MerkleTree", groupId.toString(), "size", "0")
             assert.fieldEquals("MerkleTree", groupId.toString(), "group", groupId.toString())
         })
     })
@@ -84,7 +84,7 @@ describe("Semaphore subgraph", () => {
             assert.fieldEquals("Member", id, "group", groupId.toString())
 
             assert.fieldEquals("MerkleTree", groupId.toString(), "root", "999")
-            assert.fieldEquals("MerkleTree", groupId.toString(), "numberOfLeaves", "1")
+            assert.fieldEquals("MerkleTree", groupId.toString(), "size", "1")
         })
     })
 
@@ -131,26 +131,61 @@ describe("Semaphore subgraph", () => {
         })
     })
 
+    describe("# addMembers", () => {
+        test("Should have added many group members at once", () => {
+            const groupId = BigInt.fromI32(234)
+            const startIndex = BigInt.fromI32(1)
+            const identityCommitments = [BigInt.fromI32(123), BigInt.fromI32(124)]
+            const merkleTreeRoot = BigInt.fromI32(999)
+            const id = hash(concat(ByteArray.fromBigInt(startIndex), ByteArray.fromBigInt(groupId)))
+
+            const event = createMembersAddedEvent(groupId, startIndex, identityCommitments, merkleTreeRoot)
+
+            addMembers(event)
+
+            assert.entityCount("Member", 3)
+
+            assert.fieldEquals("Member", id, "index", "1")
+            assert.fieldEquals("Member", id, "identityCommitment", "123")
+            assert.fieldEquals("Member", id, "group", groupId.toString())
+
+            assert.fieldEquals("MerkleTree", groupId.toString(), "root", "999")
+            assert.fieldEquals("MerkleTree", groupId.toString(), "size", "3")
+        })
+    })
+
     describe("# addVerifiedProof", () => {
         test("Should have added a proof", () => {
             const groupId = BigInt.fromI32(234)
+            const merkleTreeDepth = BigInt.fromI32(32)
             const merkleTreeRoot = BigInt.fromI32(1001)
-            const externalNullifier = BigInt.fromI32(1)
-            const nullifierHash = BigInt.fromI32(666)
-            const signal = BigInt.fromI32(2)
-            const id = hash(concat(ByteArray.fromBigInt(nullifierHash), ByteArray.fromBigInt(groupId)))
+            const nullifier = BigInt.fromI32(666)
+            const message = BigInt.fromI32(2)
+            const scope = BigInt.fromI32(1)
+            const points = [BigInt.fromI32(1), BigInt.fromI32(2)]
+            const id = hash(concat(ByteArray.fromBigInt(nullifier), ByteArray.fromBigInt(groupId)))
 
-            const event = createProofVerifiedEvent(groupId, merkleTreeRoot, externalNullifier, nullifierHash, signal)
+            const event = createProofVerifiedEvent(
+                groupId,
+                merkleTreeDepth,
+                merkleTreeRoot,
+                nullifier,
+                message,
+                scope,
+                points
+            )
 
-            addVerifiedProof(event)
+            addValidatedProof(event)
 
-            assert.entityCount("VerifiedProof", 1)
+            assert.entityCount("ValidatedProof", 1)
 
-            assert.fieldEquals("VerifiedProof", id, "merkleTreeRoot", "1001")
-            assert.fieldEquals("VerifiedProof", id, "externalNullifier", "1")
-            assert.fieldEquals("VerifiedProof", id, "nullifierHash", "666")
-            assert.fieldEquals("VerifiedProof", id, "signal", "2")
-            assert.fieldEquals("VerifiedProof", id, "group", groupId.toString())
+            assert.fieldEquals("ValidatedProof", id, "group", groupId.toString())
+            assert.fieldEquals("ValidatedProof", id, "merkleTreeRoot", "1001")
+            assert.fieldEquals("ValidatedProof", id, "merkleTreeDepth", "32")
+            assert.fieldEquals("ValidatedProof", id, "scope", "1")
+            assert.fieldEquals("ValidatedProof", id, "nullifier", "666")
+            assert.fieldEquals("ValidatedProof", id, "message", "2")
+            assert.fieldEquals("ValidatedProof", id, "points", `[${points.join(", ")}]`)
         })
     })
 })

apps/website/package.json

@@ -1,6 +1,5 @@
 {
     "name": "semaphore-website",
-    "version": "2.0.0",
     "private": true,
     "scripts": {
         "dev": "next dev",

apps/website/src/app/build/page.tsx

@@ -59,7 +59,7 @@ export default function Build() {
     ]
     return (
         <VStack justify="center">
-            <VStack mt="90px">
+            <VStack pt="170px" pb="128px">
                 <Heading fontSize={{ base: "40px", sm: "46px", md: "72px" }} textAlign="center">
                     Let’s build something new
                 </Heading>
@@ -81,9 +81,9 @@ export default function Build() {
                     </Flex>
                 </VStack>
             </VStack>
+
             <Flex
                 justifyContent="space-between"
-                mt="128px"
                 direction="row"
                 backgroundColor="darkBlue"
                 p="0"
@@ -121,9 +121,9 @@ export default function Build() {
                                     key={linkInfo.title}
                                 >
                                     <Text
-                                        borderBottomWidth="1px"
+                                        borderBottomWidth="2px"
                                         borderBottomColor="white"
-                                        _hover={{ borderBottomColor: "transparent" }}
+                                        _hover={{ borderBottomColor: "primary.600" }}
                                         fontSize="18px"
                                         fontWeight="normal"
                                     >
@@ -139,7 +139,7 @@ export default function Build() {
                 <Box position="relative" w={{ base: "full", xl: "727px" }} h="630" overflow="hidden">
                     <Image
                         src="https://semaphore.cedoor.dev/flower-shadow.jpg"
-                        alt="Flower Shadow"
+                        alt=""
                         objectFit="cover"
                         w="full"
                         h="full"

apps/website/src/app/layout.tsx

@@ -1,5 +1,6 @@
 import { Box, Container } from "@chakra-ui/react"
 import type { Metadata } from "next"
+import Script from "next/script"
 import Footer from "../components/Footer"
 import Navbar from "../components/Navbar"
 import Providers from "./providers"
@@ -37,6 +38,22 @@ export default function RootLayout({ children }: { children: React.ReactNode })
                     </Container>
                 </Providers>
             </body>
+
+            <Script id="matomo-tracking" strategy="afterInteractive">
+                {`
+                    var _paq = window._paq = window._paq || [];
+                    /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
+                    _paq.push(['trackPageView']);
+                    _paq.push(['enableLinkTracking']);
+                    (function() {
+                        var u="https://psedev.matomo.cloud/";
+                        _paq.push(['setTrackerUrl', u+'matomo.php']);
+                        _paq.push(['setSiteId', '10']);
+                        var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
+                        g.async=true; g.src='//cdn.matomo.cloud/psedev.matomo.cloud/matomo.js'; s.parentNode.insertBefore(g,s);
+                    })();
+                `}
+            </Script>
         </html>
     )
 }

apps/website/src/app/learn/page.tsx

@@ -74,6 +74,20 @@ export default function Learn() {
                 title: "Zero-knowledge",
                 body: "If the statement is true, no verifier learns anything other than the fact that the statement is true."
             }
+        ],
+        [
+            {
+                title: "Privacy",
+                body: "Zero-knowledge property enables hiding any personal information while still enabling to building convincing proofs."
+            },
+            {
+                title: "Scalability",
+                body: "Multiple proofs can be aggregated into a single one, enabling smaller machines to verify 100s of transactions or claims in one go."
+            },
+            {
+                title: "Interoperability",
+                body: "ZKPs enable porting trust from one “realm” to another, for example between web2<>web3 worlds."
+            }
         ]
     ]
 
@@ -81,31 +95,32 @@ export default function Learn() {
         {
             title: "Semaphore identities",
             description:
-                "Given to all Semaphore group members, it is comprised of three parts - identity commitment, trapdoor, and nullifier.",
+                "A Semaphore identity is an EdDSA key-pair plus the commitment (i.e. the hash of the public key), which is used as the public value of the Semaphore group members.",
             linkText: "Create Semaphore identities",
-            linkUrl: "https://semaphore.pse.dev/docs/guides/identities",
+            linkUrl: "https://docs.semaphore.pse.dev/guides/identities",
             codeText: `import { Identity } from "@semaphore-protocol/identity"
 
-const identity = new Identity()
+// Random identity.
+const identity1 = new Identity()
 
-const trapdoor = identity.getTrapdoor()
-const nullifier = identity.getNullifier()
-const commitment = identity.generateCommitment()`,
+// Passing a secret.
+const identity2 = new Identity("secret")
+`,
             itemList: [
                 {
                     icon: <IconEyelash w="24px" h="24px" color="primary.600" />,
-                    heading: "Private values",
-                    body: "Trapdoor and nullifier values are the private values of the Semaphore identity. To avoid fraud, the owner must keep both values secret."
+                    heading: "Private value",
+                    body: "The private key is a secret that identity owners must keep private. It can either be generated randomly or passed as a parameter."
                 },
                 {
                     icon: <IconEye w="24px" h="24px" color="primary.600" />,
                     heading: "Public values",
-                    body: "Semaphore uses the Poseidon hash function to create the identity commitment from the identity private values. Identity commitments can be made public, similarly to Ethereum addresses."
+                    body: "Semaphore uses the Poseidon hash function to derive the identity commitment from the identity public key. Identity commitments can be made public, similarly to Ethereum addresses."
                 },
                 {
                     icon: <IconUser w="24px" h="24px" color="primary.600" />,
-                    heading: "Generate identities",
-                    body: "Semaphore identities can be generated deterministically or randomly. Deterministic identities can be generated from the hash of a secret message."
+                    heading: "Storing identities",
+                    body: "Building a system to save or recover secret values of Semaphore identities is nontrivial. You may choose to delegate such functionality, for example by using a signature as a secret."
                 }
             ]
         },
@@ -114,49 +129,44 @@ const commitment = identity.generateCommitment()`,
             description:
                 "Semaphore groups are binary incremental Merkle trees that store the public identity commitment of each member.",
             linkText: "Create Semaphore groups",
-            linkUrl: "https://semaphore.pse.dev/docs/guides/groups",
+            linkUrl: "https://docs.semaphore.pse.dev/guides/groups",
             codeText: `import { Group } from "@semaphore-protocol/group"
 
-const group = new Group(1)
+const members = [identity1.commitment, identity2.commitment]
 
-group.addMember(commitment)`,
+const group = new Group(members)
+`,
             itemList: [
                 {
                     icon: <IconTree w="24px" h="24px" color="primary.600" />,
                     heading: "Merkle trees",
-                    body: "Each leaf contains an identity commitment for a user. The identity commitment proves that the user is a group member without revealing the private identity of the user."
+                    body: "Each leaf contains an identity commitment for a user. The structure of Merkle trees ensures that it can be efficiently proved that an identity commitment is a member of the group."
                 },
                 {
                     icon: <IconGroup w="24px" h="24px" color="primary.600" />,
                     heading: "Types of groups",
-                    body: "Groups can be created and managed in a decentralized fashion with Semaphore contracts or off-chain with our JavaScript libraries."
+                    body: "Groups can be created and managed in a decentralized fashion with Semaphore contracts or off-chain with the JavaScript libraries."
                 },
                 {
                     icon: <IconManageUsers w="24px" h="24px" color="primary.600" />,
                     heading: "Group management",
-                    body: "Users can join and leave groups by themselves, or an admin can add and remove them. Admins can be centralized authorities, Ethereum accounts, multi-sig wallets or smart contracts."
+                    body: "Users could join and leave groups by themselves, or an admin could add and remove them. Admins can be centralized authorities, Ethereum accounts, multi-sig wallets or smart contracts."
                 }
             ]
         },
         {
             title: "Semaphore proofs",
-            description:
-                "Semaphore group members can anonymously prove that they are part of a group and that they are generating their own proofs and signals.",
+            description: "Semaphore group members can prove that they are part of a group and send anonymous messages.",
             linkText: "Generate Semaphore proofs",
-            linkUrl: "https://semaphore.pse.dev/docs/guides/proofs",
+            linkUrl: "https://docs.semaphore.pse.dev/guides/proofs",
             codeText: `import { generateProof, verifyProof } from "@semaphore-protocol/proof"
 
-const externalNullifier = BigInt(1)
-const signal = "Hello world"
+const scope = "Semaphore"
+const message = "Hello world"
 
-const fullProof = await generateProof(identity, group, externalNullifier, signal, {
-    zkeyFilePath: "./semaphore.zkey",
-    wasmFilePath: "./semaphore.wasm"
-})
+const proof = await generateProof(identity1, group, scope, message)
 
-const verificationKey = JSON.parse(fs.readFileSync("./semaphore.json", "utf-8"))
-
-await verifyProof(verificationKey, fullProof)`,
+await verifyProof(proof)`,
             itemList: [
                 {
                     icon: <IconBadge w="24px" h="24px" color="primary.600" />,
@@ -165,13 +175,13 @@ await verifyProof(verificationKey, fullProof)`,
                 },
                 {
                     icon: <IconFlag w="24px" h="24px" color="primary.600" />,
-                    heading: "Signals",
-                    body: "Group users can anonymously broadcast signals such as votes or endorsements without revealing their original identity."
+                    heading: "Messages",
+                    body: "Group users can anonymously share messages such as votes or endorsements without revealing their original identity."
                 },
                 {
                     icon: <IconCheck w="24px" h="24px" color="primary.600" />,
-                    heading: "Verifiers",
-                    body: "Semaphore proofs can be verified with our contracts or off-chain with our JavaScript libraries."
+                    heading: "Proof verification",
+                    body: "Semaphore proofs can be verified both on-chain with the Semaphore contracts, or off-chain with the JavaScript libraries."
                 }
             ]
         }
@@ -221,9 +231,9 @@ await verifyProof(verificationKey, fullProof)`,
                 </Text>
                 <Link href="https://pse.dev/resources" isExternal>
                     <Text
-                        borderBottomWidth="1px"
+                        borderBottomWidth="2px"
                         borderBottomColor="white"
-                        _hover={{ borderBottomColor: "transparent" }}
+                        _hover={{ borderBottomColor: "primary.600" }}
                         fontSize={{ base: "16px", md: "20px" }}
                         fontWeight="normal"
                     >
@@ -232,22 +242,31 @@ await verifyProof(verificationKey, fullProof)`,
                 </Link>
             </VStack>
             <VStack mt="40px">
-                <VStack>
-                    <Text fontSize={{ base: "24px", md: "30px" }} fontWeight={{ base: "400", md: "500" }}>
-                        Characteristics
-                    </Text>
-                    <InfoCard texts={infoCardTexts[0]} />
-                </VStack>
+                <Flex wrap={{ base: "wrap", lg: "nowrap" }} justify="center" alignItems="center" gap="32px">
+                    <VStack>
+                        <Text fontSize={{ base: "24px", md: "30px" }} fontWeight={{ base: "400", md: "500" }}>
+                            Characteristics
+                        </Text>
+                        <InfoCard texts={infoCardTexts[2]} />
+                    </VStack>
+                    <VStack>
+                        <Text fontSize={{ base: "24px", md: "30px" }} fontWeight={{ base: "400", md: "500" }}>
+                            Main use cases
+                        </Text>
+                        <InfoCard texts={infoCardTexts[3]} />
+                    </VStack>
+                </Flex>
             </VStack>
         </VStack>
     )
 
     return (
         <VStack w="full">
-            <VStack position="relative">
+            <VStack pt="170px" pb="112px" position="relative">
                 <Box
                     display={{ base: "none", md: "block" }}
                     zIndex="-1"
+                    top="0"
                     left="50%"
                     transform="translateX(-50%)"
                     w="100vw"
@@ -256,7 +275,7 @@ await verifyProof(verificationKey, fullProof)`,
                     overflow="hidden"
                 >
                     <Image
-                        alt="Guy shadow image"
+                        alt=""
                         src="https://semaphore.cedoor.dev/guy-shadow-horizontal.jpg"
                         objectFit="cover"
                         w="full"
@@ -267,6 +286,7 @@ await verifyProof(verificationKey, fullProof)`,
                 <Box
                     display={{ base: "block", lg: "none" }}
                     zIndex="-1"
+                    top="0"
                     left="50%"
                     transform="translateX(-50%)"
                     w="100vw"
@@ -275,7 +295,7 @@ await verifyProof(verificationKey, fullProof)`,
                     overflow="hidden"
                 >
                     <Image
-                        alt="Guy shadow image"
+                        alt=""
                         src="https://semaphore.cedoor.dev/guy-shadow.jpg"
                         objectFit="cover"
                         w="full"
@@ -283,13 +303,7 @@ await verifyProof(verificationKey, fullProof)`,
                     />
                 </Box>
 
-                <Tabs
-                    maxWidth="100vw"
-                    variant="unstyled"
-                    align="center"
-                    mt={{ base: "100px", md: "170px" }}
-                    mb={{ base: "50px", md: "112px" }}
-                >
+                <Tabs maxWidth="100vw" variant="unstyled" align="center">
                     <Box overflow="auto" mx="3">
                         <TabList gap="40px" w="max-content" whiteSpace="nowrap">
                             <Tab px={0} fontSize="24px" _selected={{ borderBottom: "2px solid white" }}>

apps/website/src/app/page.tsx

@@ -1,4 +1,5 @@
 import { Box, Button, Card, CardBody, HStack, Heading, Image, Link, Stack, Text, VStack } from "@chakra-ui/react"
+import NextLink from "next/link"
 import { Sora } from "next/font/google"
 import Carousel from "../components/Carousel"
 import ProjectCard from "../components/ProjectCard"
@@ -12,10 +13,11 @@ const sora = Sora({
 
 export default function Home() {
     return (
-        <VStack>
-            <VStack h={{ base: "718", sm: "734", md: "724" }} justify="center" spacing="20" position="relative">
+        <>
+            <VStack pt="170px" pb={{ base: "128px", md: "170px" }} justify="center" spacing="20" position="relative">
                 <Box
                     zIndex="-1"
+                    top="0"
                     left="50%"
                     transform="translateX(-50%)"
                     w="100vw"
@@ -24,7 +26,7 @@ export default function Home() {
                     overflow="hidden"
                 >
                     <Image
-                        alt="Midnight whispers image"
+                        alt=""
                         src="https://semaphore.cedoor.dev/midnight-whispers.jpg"
                         objectFit="cover"
                         w="full"
@@ -43,7 +45,7 @@ export default function Home() {
                 </VStack>
 
                 <Stack direction={{ base: "column", sm: "row" }} spacing="6" align="center">
-                    <Link href="https://semaphore.pse.dev/docs/quick-setup" isExternal>
+                    <Link href="https://docs.semaphore.pse.dev/getting-started" isExternal>
                         <Button size={{ base: "md", md: "lg" }}>Get Started</Button>
                     </Link>
                     <Link href="https://demo.semaphore.pse.dev" isExternal>
@@ -80,115 +82,143 @@ export default function Home() {
                             />
                         ))}
                     </VStack>
+
+                    <HStack justify="center" fontSize="12px">
+                        <Link
+                            as={NextLink}
+                            href="/projects"
+                            textTransform="uppercase"
+                            textDecoration="underline"
+                            _hover={{
+                                textDecoration: "underline"
+                            }}
+                        >
+                            View more
+                        </Link>
+                    </HStack>
                 </VStack>
             </VStack>
 
-            <Card
-                bg="darkBlue"
-                color="white"
-                borderRadius="18px"
-                padding="80px 60px 80px 60px"
-                maxW="1110px"
-                mt="20"
-                mb="28"
-            >
-                <CardBody padding="0">
-                    <Heading fontSize={{ base: "30px", md: "44px" }} textAlign="center" pb="90px">
-                        Semaphore Features
-                    </Heading>
+            <HStack justify="center">
+                <Card
+                    bg="darkBlue"
+                    color="white"
+                    borderRadius="18px"
+                    padding="80px 60px 80px 60px"
+                    maxW="1110px"
+                    mt="20"
+                    mb="28"
+                >
+                    <CardBody padding="0">
+                        <Heading fontSize={{ base: "30px", md: "44px" }} textAlign="center" pb="90px">
+                            Semaphore Features
+                        </Heading>
 
-                    <VStack spacing="16">
-                        <Stack
-                            direction={{ base: "column", md: "row" }}
-                            align="top"
-                            justify="space-between"
-                            spacing="16"
-                        >
-                            <HStack flex="1" align="top" spacing="6">
-                                <Heading
-                                    fontSize={{ base: "30px", md: "38px" }}
-                                    color="#1E46F2"
-                                    fontFamily={sora.style.fontFamily}
-                                >
-                                    1
-                                </Heading>
-                                <VStack align="left">
-                                    <Text fontSize={{ base: "18px", md: "20px" }} fontFamily={sora.style.fontFamily}>
-                                        Simplified privacy
-                                    </Text>
-                                    <Text color="text.400" fontSize="14px">
-                                        Semaphore streamlines privacy-centric app development. It empowers developers to
-                                        effortlessly incorporate robust privacy features.
-                                    </Text>
-                                </VStack>
-                            </HStack>
-                            <HStack flex="1" align="top" spacing="6">
-                                <Heading
-                                    fontSize={{ base: "30px", md: "38px" }}
-                                    color="#1E46F2"
-                                    fontFamily={sora.style.fontFamily}
-                                >
-                                    3
-                                </Heading>
-                                <VStack align="left">
-                                    <Text fontSize={{ base: "18px", md: "20px" }} fontFamily={sora.style.fontFamily}>
-                                        Universal integrations
-                                    </Text>
-                                    <Text color="text.400" fontSize="14px">
-                                        Semaphore is a protocol for Web2 and Web3. It integrates into any front-end
-                                        framework or pure HTML/CSS/JS. It is cross-chain compatible with EVM, L2s, and
-                                        alt-blockchains.
-                                    </Text>
-                                </VStack>
-                            </HStack>
-                        </Stack>
-                        <Stack
-                            direction={{ base: "column", md: "row" }}
-                            align="top"
-                            justify="space-between"
-                            spacing="16"
-                        >
-                            <HStack flex="1" align="top" spacing="6">
-                                <Heading
-                                    fontSize={{ base: "30px", md: "38px" }}
-                                    color="#1E46F2"
-                                    fontFamily={sora.style.fontFamily}
-                                >
-                                    2
-                                </Heading>
-                                <VStack align="left">
-                                    <Text fontSize={{ base: "18px", md: "20px" }} fontFamily={sora.style.fontFamily}>
-                                        Leverage Zero Knowledge
-                                    </Text>
-                                    <Text color="text.400" fontSize="14px">
-                                        Semaphore leverages Zero Knowledge, allowing us to verify information without
-                                        revealing any underlying data. This powerful primitive allows one to prove
-                                        membership and signal anonymously.
-                                    </Text>
-                                </VStack>
-                            </HStack>
-                            <HStack flex="1" align="top" spacing="6">
-                                <Heading
-                                    fontSize={{ base: "30px", md: "38px" }}
-                                    color="#1E46F2"
-                                    fontFamily={sora.style.fontFamily}
-                                >
-                                    4
-                                </Heading>
-                                <VStack align="left">
-                                    <Text fontSize={{ base: "18px", md: "20px" }} fontFamily={sora.style.fontFamily}>
-                                        Free open source software
-                                    </Text>
-                                    <Text color="text.400" fontSize="14px">
-                                        Semaphore is a Public Good. This means it will never seek to profit, it is owned
-                                        by the community and will always remain open source.
-                                    </Text>
-                                </VStack>
-                            </HStack>
-                        </Stack>
-                    </VStack>
-                </CardBody>
-            </Card>
+                        <VStack spacing="16">
+                            <Stack
+                                direction={{ base: "column", md: "row" }}
+                                align="top"
+                                justify="space-between"
+                                spacing="16"
+                            >
+                                <HStack flex="1" align="top" spacing="6">
+                                    <Heading
+                                        fontSize={{ base: "30px", md: "38px" }}
+                                        color="#1E46F2"
+                                        fontFamily={sora.style.fontFamily}
+                                    >
+                                        1
+                                    </Heading>
+                                    <VStack align="left">
+                                        <Text
+                                            fontSize={{ base: "18px", md: "20px" }}
+                                            fontFamily={sora.style.fontFamily}
+                                        >
+                                            Simplified privacy
+                                        </Text>
+                                        <Text color="text.400" fontSize="14px">
+                                            Semaphore streamlines privacy-centric app development. It empowers
+                                            developers to effortlessly incorporate robust privacy features.
+                                        </Text>
+                                    </VStack>
+                                </HStack>
+                                <HStack flex="1" align="top" spacing="6">
+                                    <Heading
+                                        fontSize={{ base: "30px", md: "38px" }}
+                                        color="#1E46F2"
+                                        fontFamily={sora.style.fontFamily}
+                                    >
+                                        3
+                                    </Heading>
+                                    <VStack align="left">
+                                        <Text
+                                            fontSize={{ base: "18px", md: "20px" }}
+                                            fontFamily={sora.style.fontFamily}
+                                        >
+                                            Universal integrations
+                                        </Text>
+                                        <Text color="text.400" fontSize="14px">
+                                            Semaphore is a protocol for Web2 and Web3. It integrates into any front-end
+                                            framework or pure HTML/CSS/JS. It is cross-chain compatible with EVM, L2s,
+                                            and alt-blockchains.
+                                        </Text>
+                                    </VStack>
+                                </HStack>
+                            </Stack>
+                            <Stack
+                                direction={{ base: "column", md: "row" }}
+                                align="top"
+                                justify="space-between"
+                                spacing="16"
+                            >
+                                <HStack flex="1" align="top" spacing="6">
+                                    <Heading
+                                        fontSize={{ base: "30px", md: "38px" }}
+                                        color="#1E46F2"
+                                        fontFamily={sora.style.fontFamily}
+                                    >
+                                        2
+                                    </Heading>
+                                    <VStack align="left">
+                                        <Text
+                                            fontSize={{ base: "18px", md: "20px" }}
+                                            fontFamily={sora.style.fontFamily}
+                                        >
+                                            Leverage Zero Knowledge
+                                        </Text>
+                                        <Text color="text.400" fontSize="14px">
+                                            Semaphore leverages Zero Knowledge, allowing us to verify information
+                                            without revealing any underlying data. This powerful primitive allows one to
+                                            prove membership and signal anonymously.
+                                        </Text>
+                                    </VStack>
+                                </HStack>
+                                <HStack flex="1" align="top" spacing="6">
+                                    <Heading
+                                        fontSize={{ base: "30px", md: "38px" }}
+                                        color="#1E46F2"
+                                        fontFamily={sora.style.fontFamily}
+                                    >
+                                        4
+                                    </Heading>
+                                    <VStack align="left">
+                                        <Text
+                                            fontSize={{ base: "18px", md: "20px" }}
+                                            fontFamily={sora.style.fontFamily}
+                                        >
+                                            Free open source software
+                                        </Text>
+                                        <Text color="text.400" fontSize="14px">
+                                            Semaphore is a Public Good. This means it will never seek to profit, it is
+                                            owned by the community and will always remain open source.
+                                        </Text>
+                                    </VStack>
+                                </HStack>
+                            </Stack>
+                        </VStack>
+                    </CardBody>
+                </Card>
+            </HStack>
 
             <VStack justify="center" spacing="40" py="32" position="relative">
                 <Box
@@ -201,7 +231,7 @@ export default function Home() {
                     overflow="hidden"
                 >
                     <Image
-                        alt="Fluttering shadow image"
+                        alt=""
                         src="https://semaphore.cedoor.dev/shadow-flutter.jpg"
                         objectFit="cover"
                         w="full"
@@ -253,6 +283,6 @@ export default function Home() {
                     </Card>
                 </Stack>
             </VStack>
-        </VStack>
+        </>
     )
 }

apps/website/src/app/projects/page.tsx

@@ -4,17 +4,11 @@ import ProjectsList from "../../components/ProjectsList"
 
 export default function Projects() {
     return (
-        <VStack>
-            <VStack
-                h={{ base: "442", sm: "420", md: "393" }}
-                w="100%"
-                justify="end"
-                align="left"
-                spacing="40"
-                position="relative"
-            >
+        <>
+            <VStack pt="170px" pb="56px" w="100%" justify="end" align="left" spacing="40" position="relative">
                 <Box
                     zIndex="-1"
+                    top="0"
                     left="50%"
                     transform="translateX(-50%)"
                     w="100vw"
@@ -23,7 +17,7 @@ export default function Projects() {
                     overflow="hidden"
                 >
                     <Image
-                        alt="Blue texture image"
+                        alt=""
                         src="https://semaphore.cedoor.dev/blue-texture.jpg"
                         objectFit="cover"
                         w="full"
@@ -51,6 +45,6 @@ export default function Projects() {
                     buttonUrl="https://github.com/semaphore-protocol/semaphore/issues/new?assignees=&labels=documentation++%F0%9F%93%96&projects=&template=----project.md&title="
                 />
             </VStack>
-        </VStack>
+        </>
     )
 }

apps/website/src/components/ArticleCard.tsx

@@ -15,9 +15,11 @@ export default function ArticleCard({ title, minRead, url }: ArticleCardProps) {
                 color="white"
                 padding="24px 20px"
                 width={{ base: "full", sm: "297.5px" }}
-                _hover={{ bgColor: "darkBlueBg" }}
                 h="full"
                 variant="unstyled"
+                borderWidth="1px"
+                borderColor="text.900"
+                _hover={{ bgColor: "darkBlueBg", borderColor: "transparent" }}
             >
                 <CardBody padding="0">
                     <Heading fontSize="20px" lineHeight="28px">

apps/website/src/components/Carousel.tsx

@@ -47,10 +47,8 @@ export default function Carousel({ title, sizes, type, ...props }: CarouselProps
 
     return (
         <VStack align="left" w="full" spacing="16" {...props}>
-            <HStack justify="space-between">
-                <Heading fontSize={{ base: "30px", md: "44px" }} textAlign={type === "projects" ? "center" : "left"}>
-                    {title}
-                </Heading>
+            <HStack justify={type === "projects" ? "center" : "space-between"}>
+                <Heading fontSize={{ base: "30px", md: "44px" }}>{title}</Heading>
 
                 {type !== "projects" && (
                     <HStack visibility={!size ? "hidden" : "visible"}>
@@ -128,7 +126,7 @@ export default function Carousel({ title, sizes, type, ...props }: CarouselProps
                 <HStack w="100%">
                     <Box flex="1" />
 
-                    <HStack flex="1" justify="center" visibility={!size ? "hidden" : "visible"}>
+                    <HStack flex="1" justify="center">
                         <IconButton
                             onClick={previousProject}
                             variant="link"

apps/website/src/components/Footer.tsx

@@ -88,7 +88,7 @@ export default function Footer() {
                     </Link>
 
                     <Text fontSize={{ base: "12px", md: "14px" }} color="text.500" pt="2">
-                        Copyright © 2023 Ethereum Foundation
+                        Copyright © 2024 Ethereum Foundation
                     </Text>
                 </VStack>
             </VStack>

apps/website/src/components/Navbar.tsx

@@ -103,7 +103,7 @@ export default function Navbar() {
                                         </Link>
 
                                         <Text fontSize={{ base: "12px", md: "14px" }} color="text.500" pt="2">
-                                            Copyright © 2023 Ethereum Foundation
+                                            Copyright © 2024 Ethereum Foundation
                                         </Text>
                                     </VStack>
                                 </VStack>

apps/website/src/components/ProjectsList.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { Button, Grid, GridItem, HStack, IconButton, Text, VStack } from "@chakra-ui/react"
+import { Grid, GridItem, HStack, IconButton, Tag, TagLabel, TagLeftIcon, Text, VStack } from "@chakra-ui/react"
 import { useCallback, useEffect, useRef, useState } from "react"
 import ProjectCard from "../components/ProjectCard"
 import allProjects from "../data/projects.json"
@@ -56,22 +56,30 @@ export default function ProjectsList(props: any) {
                 <Text fontSize="20">Projects created by</Text>
 
                 <HStack spacing="4" flexWrap="wrap">
-                    <Button
+                    <Tag
                         size="lg"
-                        leftIcon={<IconPSE />}
                         variant={onlyPSE === true ? "solid" : "outline"}
+                        colorScheme={onlyPSE === true ? "primary" : "white"}
                         onClick={() => setOnlyPSE(onlyPSE === true ? null : true)}
+                        cursor="pointer"
+                        px="18px"
+                        py="13px"
                     >
-                        PSE
-                    </Button>
-                    <Button
+                        <TagLeftIcon boxSize="18px" as={IconPSE} />
+                        <TagLabel>PSE</TagLabel>
+                    </Tag>
+                    <Tag
                         size="lg"
-                        leftIcon={<IconCommunity />}
                         variant={onlyPSE === false ? "solid" : "outline"}
+                        colorScheme={onlyPSE === false ? "primary" : "white"}
                         onClick={() => setOnlyPSE(onlyPSE === false ? null : false)}
+                        cursor="pointer"
+                        px="18px"
+                        py="13px"
                     >
-                        Community
-                    </Button>
+                        <TagLeftIcon boxSize="18px" as={IconCommunity} />
+                        <TagLabel>Community</TagLabel>
+                    </Tag>
                 </HStack>
             </VStack>
 
@@ -79,10 +87,11 @@ export default function ProjectsList(props: any) {
                 <Text fontSize="20">Category</Text>
                 <HStack spacing="3" flexWrap="wrap">
                     {getProjectCategories(sortedProjects).map((category) => (
-                        <Button
+                        <Tag
                             key={category}
-                            size="sm"
+                            size="md"
                             variant={selectedCategories.includes(category) ? "solid" : "outline"}
+                            colorScheme={selectedCategories.includes(category) ? "primary" : "white"}
                             onClick={() => {
                                 const newCategories = selectedCategories.includes(category)
                                     ? selectedCategories.filter((c) => c !== category)
@@ -90,9 +99,10 @@ export default function ProjectsList(props: any) {
 
                                 setSelectedCategories(newCategories)
                             }}
+                            cursor="pointer"
                         >
                             {category}
-                        </Button>
+                        </Tag>
                     ))}
                 </HStack>
             </VStack>