Sismo Docs
Search…
⌃K
Links

Tutorial for Developers

Create a ZK Badge for your app or community in 15 minutes

What’s inside?

This beginner-friendly tutorial will walk you through the creation of a ZK Badge for your app or community! The aim of this tutorial is to show you how to create a ZK Badge for an eligible group of users and your customized minting page.
You can find the pull request associated with this tutorial here. It will give you a good feeling of what we are going to create in this tutorial!
You can also use the Sismo Factory to easily create ZK Badges with no prior coding knowledge.

What are ZK Badges?

A Badge is a non-transferable token (ERC-1155) that can only be minted by an eligible group of users. A group is made up of eligible web2 or web3 accounts.
A (ZK) Badge is related to two accounts: the eligible account (address or web2 account), from which the user generates a proof of eligibility, and a destination account (address) where the user receives the Badge. The (ZK) proof of eligibility is verified on-chain by a smart contract called a (ZK) Attester.
ZK Badges use zero-knowledge proofs and are privacy-preserving. From a Badge held on a destination account, no one can infer which source account was used!

Tutorial use-case

This tutorial will show you how to easily define the group of eligible users for your ZK Badge and create your customized minting page. At the end of this tutorial, it will be up to you to do a pull request on the Sismo Hub to see it integrated on app.sismo.io!
We will take the example of a developer at ENS who wants to allow private governance voting on ENS Snapshot space. They want to create a group of eligible users called "ENS Contributors" by mixing all past voters (addresses) of the first proposal of ENS Snapshot space with all contributors (web2 accounts) of some of the ENS GitHub repositories.
The goal is to create a ZK Badge for all eligible users ("ENS Contributors") and allow them to vote privately on future ENS Snapshot proposals by holding this Badge. Let's see how you can create this group of eligible users and leverage your own ideas after this tutorial!
Take a look at your future minting page!
Your future custom minting page
This minting page is the page you want to redirect your users to if they are in the eligible group of users you created.
Note that the dev experience of this tutorial is designed to be the same as in the production environment. You will be one pull request away from making your ZK Badge available to mint for your users!

Setup of the local environment

Let’s build this workflow in a local environment to give you a feeling of it.
Imagine that you are the developer at ENS who needs to create a group of eligible users ("ENS Contributors") for future private governance voting. We begin by setting up the local infrastructure for this tutorial.
All the things you want for this tutorial are located in this Sismo repository: https://github.com/sismo-core/sismo-hub
You can clone the repository and cd into it:
# using ssh
git clone [email protected]:sismo-core/sismo-hub.git
cd sismo-hub
You can now install all the dependencies with the yarn command:
# install dependencies
yarn
You can install yarn easily here.
Then, you will want to launch several services in your terminal (expand to see details) :
The chain has 20 tests accounts with 100 test ETH each
The local frontend lets you generate the proof and experience the final user workflow.
  • the AvailableRootsRegistry contract that stores Merkle roots required by attesters to be available on-chain so they can verify user claims;
  • the CommitmentMapperRegistry contract that stores information about the commitment mapper (its Ethereum address and its edDSA public key);
  • the HydraS1Verifier contract which is useful to the HydraS1SimpleAttester for verifying the proof;
  • the HydraS1SimpleAttester contract, which will verify the user proof and mint the ZK badge of this tutorial;
  • the Front contract that routes attestations requests to the targeted attester and can perform some actions;
  • the Badges contract, which is a stateless, non-transferrable ERC1155 contract. It reads balance from the values of attestations;
The local relayer will be used to send proofs to the on-chain attester in a more user-friendly way (without requiring you to sign on Metamask and pay gas fees in a production context, you can find more infos about relayers and meta-transactions here).
You will only need to install Docker in order to launch all the services with the following command.
docker compose up
You will see the local chain starting and the contracts being deployed.
[+] Running 4/0
⠿ Container sismo-hub-frontend-1 Created 0.0s
⠿ Container sismo-hub-chain-1 Created 0.0s
⠿ Container sismo-hub-relayer-1 Created 0.0s
⠿ Container sismo-hub-deploy_contract-1 Created 0.0s
Attaching to sismo-hub-chain-1, sismo-hub-deploy_contract-1, sismo-hub-frontend-1, sismo-hub-relayer-1
sismo-hub-frontend-1 | /docker-entrypoint.sh: /docker-entrypoint.d/ is not empty, will attempt to perform configuration
sismo-hub-frontend-1 | /docker-entrypoint.sh: Looking for shell scripts in /docker-entrypoint.d/
sismo-hub-frontend-1 | /docker-entrypoint.sh: Launching /docker-entrypoint.d/10-listen-on-ipv6-by-default.sh
sismo-hub-frontend-1 | 10-listen-on-ipv6-by-default.sh: info: IPv6 listen already enabled
sismo-hub-frontend-1 | /docker-entrypoint.sh: Launching /docker-entrypoint.d/20-envsubst-on-templates.sh
sismo-hub-frontend-1 | /docker-entrypoint.sh: Configuration complete; ready for start up
sismo-hub-frontend-1 | 2022/09/01 09:36:32 [emerg] 50#50: io_setup() failed (38: Function not implemented)
sismo-hub-deploy_contract-1 | Waiting for chain to be up ...
sismo-hub-relayer-1 | Server listening on <http://localhost:8080>
sismo-hub-deploy_contract-1 | Waiting for chain to be up ...
sismo-hub-chain-1 | Ganache CLI v6.12.2 (ganache-core: 2.13.2)
sismo-hub-chain-1 | (Use `node --trace-deprecation ...` to show where the warning was created)
sismo-hub-chain-1 |
sismo-hub-chain-1 | Available Accounts
sismo-hub-chain-1 | ==================
sismo-hub-chain-1 | (0) 0xb01ee322C4f028B8A6BFcD2a5d48107dc5bC99EC (100 ETH)
The deployer address used for the local deployment is 0xb01ee322C4f028B8A6BFcD2a5d48107dc5bC99EC.
Here is the list of all the contracts with their addresses in the local infra:
  • AvailableRootsRegistry at 0x4CA636f37b577BfEEcE58eEc19053AC4490365BB
  • CommitmentMapperRegistry at 0xe52EB1f52349F98c09a5B11B0E3fA7f269268Add
  • HydraS1Verifier at 0xF7b494E07466759367BD71Eb4f545593eed4B854
  • HydraS1SimpleAttester at 0xa73a8094E303A823a8b64089fFD79913E76092cF
  • HydraS1SoulboundAttester at 0x7F098d94409110E8407BcE81D3648Ad6a8eDd44b
  • Front at 0x7f1624094ACe6cd9653A8c3C3D92F2fAbb241B07
  • Badges at 0xeF5b2Be9a6075a61bCA4384abc375485d5e196c3
You can read more about all the contracts here.

Launch your local API

The API will allow you to see the groups you will generate.
To launch the API, open a new terminal window and use the following command:
# in a new terminal
# launch local API
yarn api:watch
You can now see your local api documentation at the url below, could be a great helper if you want to experiment with it:
Congrats 🎉 You just launched your local infra 😄
Deployed frontend in our local infrastrucutre
Take a moment to see your already deployed front end by going to http://localhost:3000/! Congrats! As you can see, the front end is loading because it needs some data from the API, let's now see how to add some data to it.

Create a group of eligible users for your ZK Badge

During this tutorial, you will be creating a brand new Group Generator for ENS Contributors - users who contributed to ENS by voting on the ENS snapshot space or those who contributed to the ENS GitHub repository. Of course, we invite you to replace "ENS" with your DAO or project name during this tutorial.
The Group Generator will be used to generate the group of eligible users for your Contributor ZK Badge before sending it on-chain!
A group generator is a tool that allows you to easily generate groups and store them in a scalable infrastructure, you can learn more about group generators here.

Generate your group

You can see all the group-generators here, this folder is where you can pick already known groups or add your own.
Let’s create our group generator for ENS Contributors 🤘
Go to the folder called generators in a new terminal
# in a new terminal
# you are in sismo-hub
# cd into the folder
cd group-generators/generators
# create the group-generator folder for our new group
mkdir tutorial-ens-contributors
cd tutorial-ens-contributors
# create the file
touch index.ts
You will use two Data Providers to create the ENS Contributors group generator.
// group-generators/generators/tutorial-ens-contributors/index.ts
import { dataOperators } from "@group-generators/helpers/data-operators";
import { dataProviders } from "@group-generators/helpers/data-providers";
import {
Tags,
ValueType,
GroupWithData,
} from "topics/group";
import {
GenerationContext,
GenerationFrequency,
GroupGenerator,
} from "topics/group-generator";
// Here you are hacker 😈
const generator: GroupGenerator = {
generationFrequency: GenerationFrequency.Once, // you generate the group only once
generate: async (context: GenerationContext): Promise<GroupWithData[]> => {
// 1. Instantiate your snapshot provider
const snapshotProvider = new dataProviders.SnapshotProvider();
// Query all voters from the first proposal on space named "ens.eth"
// https://snapshot.org/#/ens.eth/proposal/QmW5qrWwivELsMdLViGMTmH27QQYjyqGM2PMqVwpYxL2UN
const voters = await snapshotProvider.queryProposalVoters({
proposal: "QmW5qrWwivELsMdLViGMTmH27QQYjyqGM2PMqVwpYxL2UN",
});
// 2. Instantiate your Github Provider
const githubProvider = new dataProviders.GithubProvider();
// Query all contributors of ens and ens-contracts repositories
const contributors = await githubProvider.getRepositoriesContributors({
repositories: ["ensdomains/ens", "ensdomains/ens-contracts"],
});
// 3. Make a union of the two queried data
const tutorialEnsContributors = dataOperators.Union([
voters,
contributors
]);
return [
{
name: "tutorial-ens-contributors", // give a name to your group
timestamp: context.timestamp,
// two different data formats in the group
// ethereum account -> "0x95af97aBadA3b4ba443ff345437A5491eF332bC5": "1",
// github account -> "github:mylogin": "1"
// NB: Twitter accounts can also be added
// twitter account -> "twitter:mylogin": "1"
data: tutorialEnsContributors, // we reference the final data we created
valueType: ValueType.Score,
tags: [Tags.User],
},
];
},
};
export default generator;
If you want to add Twitter accounts, you will need a Hive.one API Key that you can create here: https://api.signup.borg.id/login or
You will then need to reference your newly created group generator in the generators folder.
// group-generators/generators/index.ts
import ensVoters from "./ens-voters";
import ethereumDevelopers from "./ethereum-developers";
...
// you need to import your group generator
import tutorialEnsContributors from "./tutorial-ens-contributors"
import { GroupGeneratorsLibrary } from "topics/group-generator";
export const groupGenerators: GroupGeneratorsLibrary = {
"ens-voters": ensVoters,
"ethereum-developers": ethereumDevelopers,
...
// you need to reference your group generator
"tutorial-ens-contributors": tutorialEnsContributors,
};
You can now generate the tutorial-ens-contributors group!
Feel free to add your dev address to the group with the second command in order to experience the full user minting flow at the end of this tutorial.
# command to generate the group
yarn generate-group tutorial-ens-contributors
# same command but your address is included in the group
yarn generate-group tutorial-ens-contributors --additional-data 0x123...0bf
NB: You can add --help to know all the commands for generate-group
You are fetching the Github API with the Github Provider, if you encounter issues with rate limiting, you can easily add a SH_GITHUB_TOKEN in your .env file by going here.
Make sure you also generate the local-group , which is mandatory for the tutorial. The local-group is a made-up group with no signification, it is available for you to experiment further by adding your own address to it and minting different Badges quickly.
yarn generate-group local-group --additional-data 0x123...0bf
You can head over to the local API route that displays the latest groups you created at http://127.0.0.1:8000/groups/latests. Here are your ENS Contributors group and the local group! 💪
// http://127.0.0.1:8000/groups/latests
{
"items": [
{
"name": "local-group",
"timestamp": 1668006634,
"generatedBy": "local-group",
"valueType": "Score",
"accountSources": [
"ethereum"
],
"tags": [
"User"
],
"properties": {
"accountsNumber": 11,
"tierDistribution": {
"1": 11
}
},
"dataUrl": "/file-store/groups-data/local-group/1668006634.json"
},
...
]
}
(ℹ️ Use the browser extension JSON Viewer Extension for viewing JSON nicely)
You can see all the addresses with their values on the dataUrl route provided at the end of the previous JSON. In this example, this url : http://127.0.0.1:8000/file-store/groups-data/tutorial-ens-contributors/1666771943.json
By using your url, you should see all the addresses of the voters (ethereum addresses) and contributors (GitHub accounts). And if you included yours, you will be at the end of the JSON.
NB: You can see the two sources of accounts here, addresses from the Snapshot provider and Github data retrieved from the Github provider. Very cool, isn't it? 😁
// http://127.0.0.1:8000/file-store/groups-data/tutorial-ens-contributors/1666771943.json
{
"0xcbf...8d5": "1",
"0xcbe...555": "1",
"0xd2c...262": "1",
...
...
"github:tlammens:3235364": "1", // the format here is github:github_login:github_id
"github:wechman:37188783": "1", // but github:github_login is also accepted
"0x95a...bc5": "1"// the address I added 😄
}
Congrats 🎉 Your ENS Contributors group is now generated! Let's send it on the local chain for your attester!

Send your groups to the Hydra-S1 ZK Attester

You just generated your groups, but they are still stored off-chain.
Now, you need to send your groups to the attester. By doing so, the attester will have access to the data on-chain and will be able to mint Badges (we need to send a transaction on-chain to send the Merkle Root of your group).
Let's send your groups to the Hydra-S1 ZK Attester and make your ZK Badge available to mint!
Go to the badges-metadata folder. You will want to use the Hydra-S1 ZK Attester to preserve the privacy of the users that will mint your ZK Badge.
Go the the local folder and reference your group and your Badge metadata in the hydra-s1-accountbound.ts file as follows:
// badges-metadata/local/hydra-s1-accountbound.ts
import { generateHydraS1Attester } from "@badges-metadata/base/hydra-s1";
import { hydraS1GroupPropertiesEncoders } from "@badges-metadata/base/hydra-s1/hydra-s1-properties-encoder";
import { Network } from "topics/attester";
import { BadgeMetadata, BadgesCollection } from "topics/badge";
import { BadgeAttribute, BadgeAttributeValue } from "topics/badge/badge-attributes";
import { GroupStore } from "topics/group";
export const hydraS1LocalBadges: BadgesCollection = {
collectionIdFirst: 10000001,
badges: [
{
internalCollectionId: 0,
networks: [Network.Local],
name: "Sismo Contributor ZK Badge",
description: "ZK Badge received by early contributors of Sismo",
image: "sismo_digger.svg",
groupGeneratorName: "local-group",
publicContacts: [
{
type: "twitter",
contact: "@sismo_eth",
},
],
curatedAttributes: {
[BadgeAttribute.PRIVACY]: BadgeAttributeValue.VERY_HIGH,
[BadgeAttribute.TRUSTLESSNESS]: BadgeAttributeValue.HIGH,
[BadgeAttribute.SYBIL_RESISTANCE]: BadgeAttributeValue.HIGH,
},
eligibility: {
shortDescription: "",
specification: "",
},
links: [],
},
...
...
// REGISTER YOUR BADGE HERE
{
internalCollectionId: 26, // input the same collection id than before
networks: [Network.Local],
name: "ENS Contributor ZK Badge", // add a name to your badge
description: "ZK Badge received by early contributors of ENS", // describe it !
image: "tuto_ens_contributors.svg", // give it a wonderful artwork ;)
groupGeneratorName: "tutorial-ens-contributors", // input the name of your GroupGenerator
publicContacts: [
// give us a way to join you :)
{
type: "twitter", // github | twitter | lens ...
contact: "@sismo_eth", // your username
},
],
eligibility: {
// provide a short description of your eligibility criterias
shortDescription: "Be an early contributor of ENS",
// provide a technical description of your eligibility criterias
specification:
"You should have previously voted on the first proposal of ENS Snapshot space or have contributed on ensdomains/ens or ensdomains/ens-contracts repositories.",
},
links: [
{
logoUrl: "", // a nice logo to have next to the url
label: "ENS", // label for your url
url: "https://ens.domains/", // url of your project (here ENS website)
},
],
},
// IT ENDS HERE
],
};
...
You can submit your Badge's artwork in the static/badges folder in SVG format and reference your artwork in the field image. Here, we are using the Badge artwork tuto_ens_contributors.svg.
You can follow the Badge creation guide style and easily create your custom ZK Badge with the Sismo Factory 👨‍🎨
Don't forget to register your Badge in order to have a working front end at the end of the tutorial 😄
You can notice the other groups, "Sismo Contributors", “Ethereum power users”, "PoH", and "GR15," are fetching the latest created group called local-group if you pay attention to the field groupGeneratorName.
Let's use the next command to send your generated groups to the Hydra-S1 ZK Attester on your local chain. The groups are now available on the blockchain for the attester.
yarn send-to-attester hydra-s1-accountbound local --send-on-chain
If the command outputs an error, make sure to generate all the groups that are used in badges-metadata/local/hydra-s1-accountbound.ts.
You can see the CLI documentation here.
You can see the latest groups sent on-URLchain for your local Hydra-S1 here.
{
"items": [
{
"attesterName": "hydra-s1-accountbound",
"timestamp": 1666772906,
"identifier": "0x1a4eb2ec9f96a495b2f3f0b62b44605c075b8e043de0892dc73aff99247096b6",
"isOnChain": true,
"transactionHash": "0x0e69ed83a6aca1c38c9c3b9231dc6e9001156aaae031c1356fb17536b7e0b155",
"url": "/file-store/available-groups/0x1a4eb2ec9f96a495b2f3f0b62b44605c075b8e043de0892dc73aff99247096b6",
"network": "local"
}
]
}
As you can see, a URL is also referenced if you are curious about the groups that you have just made available for your attester. In this particular example, you can see the information here: http://127.0.0.1:8000/file-store/available-groups/0x1a4eb2ec9f96a495b2f3f0b62b44605c075b8e043de0892dc73aff99247096b6
{
"registryTree": {
"root": "0x1a4eb2ec9f96a495b2f3f0b62b44605c075b8e043de0892dc73aff99247096b6",
"metadata": {
"leavesCount": 5
},
"dataUrl": "/file-store/available-groups/a7f7ebc75cd6f775d0e8e14ccee9981d0df442283033407187381e5c313aea9b.data.json",
"treeUrl": "/file-store/available-groups/41f892c281140da34fc03150c4573fbe4b1f3c79f661d3d8f5cf917daab04fcd.tree.json"
},
"accountTrees": [
{
"root": "0x0d6b72673d386257b032cfa7a22e5cbeae080180056d6a7b04ff9b552b2f1b7a",
"groupId": "0x2309d8fb177af0fad803e035366884e547d3f71f6bd06f4a35decedd5b414c58",
"groupProperties": {
"internalCollectionId": 4,
"generationTimestamp": 1666772064,
"isScore": true
},
"chunk": {
"chunkNumber": 0,
"totalChunks": 1,
"min": "0x025dbf373fe82fa4873b238863ea0d0d2c3fe0d5",
"max": "0xa1b073d5503a27dfba337cfdb8458b71b3359c74"
},
"metadata": {
"leavesCount": 12,
"groupName": "local-group",
"groupGenerationTimestamp": 1666772064,
"groupDataUrl": "/file-store/available-groups/0x2309d8fb177af0fad803e035366884e547d3f71f6bd06f4a35decedd5b414c58.group.json"
},
"dataUrl": "/file-store/available-groups/07dc28900e9af08d58f15576afeb2222c3f7ed5601240ff1661a65ff0c8958d2.data.json",
"treeUrl": "/file-store/available-groups/2382d963ff7ca3ed25935eefd14b814c0d3d184b42711488b78f2faefe38aa0d.tree.json"
},
...
...
{
"root": "0x23ef2ea06f01ae671291a965704ebe3438607bf6131b84da7a16a9502d87b851",
"groupId": "0x015062ef34bfa195e162aabdf9f76303389f89329d9eeefc7e6854ee45469f21",
"groupProperties": {
"internalCollectionId": 26, // the collectionId you chose
"generationTimestamp": 1666771943,
"isScore": true
},
"chunk": {
"chunkNumber": 1,
"totalChunks": 2,
"min": "0x93dcf9ccf9f6c4439a6a15ff993af30f8829fa2e",
"max": "0xfffffc03e9d2c7f163135d2b0f18fc7f27c43cce"
},
"metadata": {
"leavesCount": 36232,
"groupName": "tutorial-ens-contributors", // your group
"groupGenerationTimestamp": 1666771943,
"groupDataUrl": "/file-store/available-groups/0x015062ef34bfa195e162aabdf9f76303389f89329d9eeefc7e6854ee45469f21.group.json"
},
"dataUrl": "/file-store/available-groups/53245e6f973f5f81cae1c67f31c453e9aef2d5715fb1289cab8c57b3b0ee1fec.data.json",
"treeUrl": "/file-store/available-groups/cd7fbde1e78535d442d1d93f3f63048f3a7cfbd2ec1568133d4b07fdeb753b28.tree.json"
}
]
}
You can notice that there is one registryTree and several accountTrees.You can learn more about these two concepts here. The accountTrees are the Merkle trees of the different groups available on-chain for your attester. This includes tutorial-ens-contributors with the collectionId that you chose (26).
In a nutshell, the Merkle trees allow the Hydra-S1 ZK Attester to quickly verify that a user belongs to a particular group using the proof the user provides. This type of on-chain storage is also more convenient in terms of gas usage and offers lighter on-chain storage. Once again, in this tutorial, the dataUrl of the internalCollectionId 26 leads you to the addresses of the ENS Contributors, while the treeUrl leads to the tree structure stored off-chain.
Congratulations again! 🎉
You just sent your generated groups to the Hydra-S1 attester. Now, anyone in your group can mint a Badge and have its attestation registered on-chain!

Create your custom minting page

Now that you have generated your group and sent it on-chain with the Badge metadata associated with it, it is time to create a customized minting page for your users!
If you go to http://localhost:3000/, you can see your Badge by deactivating the green toggle on the left 🧐
Frontend with "curated" toggle activated
Frontend with "curated" toggle deactivated
Your Badge is not appearing when the toggle is activated because we did not add curated attributes to your Badge at the previous step.
If you wish to create a curated Badge, please reach out to us on Discord: https://discord.gg/sismo
You can also learn more about Sismo governance here: https://governance.sismo.io.
If you click on your ENS Contributor ZK Badge, you will be able to mint it right away (if you included your address in the group). But stick with the tutorial, as you can create your custom "flow" to share a custom minting link with your users.
The flow can be customized by changing the local.ts file in the flows folder because all our contracts are deployed locally.
// flows/local.ts
import {
hydraS1LocalAttester,
hydraS1LocalBadges,
} from "@badges-metadata/local";
import { Network } from "topics/attester";
import { Flow } from "topics/flow";
export const localFlows: Flow[] = [
{
path: "ethereum-power-users",
attester: hydraS1LocalAttester.name,
networks: [Network.Local],
attesterType: "hydra-s1",
badgesCollection: hydraS1LocalBadges,
badgesInternalCollectionsIds: [4],
title: "",
logoUrl: null,
subtitle: "Join Ethereum Power Users community",
onboardingDescription:
"Prove you are one of the biggest Ethereum users and access the governance around the badge on snapshot.",
ctaLabel: "Access gated channel",
ctaUrl: "https://discord.gg/sismo",
congratulationTexts: ["Provide feedback on Discord", "Join Snapshot Space"],
},
...
...
// HERE IS YOUR FLOW
{
path: "tutorial-ens-contributors", // choose your frontend path
attester: hydraS1LocalAttester.name,
networks: [Network.Local],
attesterType: "hydra-s1", // choose your attester
badgesCollection: hydraS1LocalBadges,
badgesInternalCollectionsIds: [26], // choose your badge id here
title: "ENS", // choose your title
logoUrl: null,
subtitle: "Show that you are an early contributor to ENS.", // choose your subtitle
onboardingDescription: "Mint this badge to show that you are an early ENS contributor", // hype your users !
ctaLabel: "Go to ENS discord",
ctaUrl: "<https://discord.gg/sismo>", // provide a link to your users. If you does not have a link you can add "" this will redirect to the sismo explorer.
congratulationTexts: ["Congratulations"],
},
// IT ENDS HERE
];
You want to pay attention to the front-end path! Here you input the path that will be used to redirect your users from your app to your custom minting page! Feel free to customize your minting experience with the other fields 😁
By saving this file and going directly to the path you chose (http://localhost:3000/tutorial-ens-contributors), you will see the custom flow for your users.
Congrats! You nailed the tutorial 💪
Let's recap all the steps:
  • You launched your local infra
  • You generated your group (all the users eligible to mint your future Badge)
  • You sent your group to the Hydra-S1 Attester, the Attester can now issue Badges and attestations for your group
  • You created your custom minting page for your users at http://localhost:3000/tutorial-ens-contributors
If you want to make your PR to see your contribution used in the future, the next section is for you!

See your work integrated on Sismo

You have to contribute to see your flow integrated on app.sismo.io or testnets.sismo.io. For now, supported chains are Polygon and Gnosis and supported testnets chains are Goerli and Mumbai. Feel free to contact us on the #dev-support channel on our Discord if you want to contribute on Polygon or Gnosis: https://discord.com/channels/882644611959513148/981811160263299152
With your pull request, our infrastructure will take care of generating your group of eligible users, send it to Hydra-S1 Attesters on the chains you choose, and display your minting page on app.sismo.io and/or testnets.sismo.io (depending on which chains you choose).
You don't have to store anything or launch anything on your side, just add a pull request to the Sismo Hub to see your minting page live! 😁
Great news: you have done the hardest part, so let's see how to make a good PR!
You will first have to fork the Sismo Hub repository.
Fork Sismo Hub repository
You can then clone the fork repository, cd into it and install dependencies.
# clone your fork of the sismo-hub repository
git clone [email protected]:<your_github_username>/sismo-hub.git
cd sismo-hub/
yarn
You can also create a new branch for your work.
git checkout -b tutorial-ens-contributors
You will then need to:
  • Add the group generator folder that you created at this step in group-generators/generators/ folder.
  • Add the Badge description that you created at this step to badges-metadata/main/hydra-s1-accountbound.ts. You need to input supported chains in networks instead of Network.Local.
{
internalCollectionId: 26,
networks: [Network.Gnosis, Network.Mumbai],
// [Network.Goerli] works if you want only one network for example
...
}
By doing so, you allow your group of users to be available for our Hydra-S1 Accountbound Attester on Gnosis and Mumbai. If you choose Gnosis, your badge will be displayed on app.sismo.io, if you only choose testnets chains (Goerli and/or Mumbai), you will only see your contribution on testnets.sismo.io.
  • Finally, add your custom flow created at this final step to flows/main.ts. You want to pay attention to attester, networks, badgesCollection and badgesInternalCollectionsIds.
{
path: "tutorial-ens-contributors", // choose your frontend path
attester: hydraS1AccountboundAttester.name,
// use the exact same networks that you chose for badge metadata
networks: [Network.Gnosis, Network.Mumbai],
attesterType: "hydra-s1", // choose your attester
badgesCollection: hydraS1AccountboundBadges,
badgesInternalCollectionsIds: [26], // choose your badge id here
title: "ENS", // choose your title
logoUrl: null,
subtitle: "Show that you are an early contributor to ENS.", // choose your subtitle
onboardingDescription: "Mint this badge to show that you are an early ENS contributor", // hype your users !
ctaLabel: "Go to ENS discord",
ctaUrl: "<https://discord.gg/sismo>", // provide a link to your users. If you does not have a link you can add "" this will redirect to the sismo explorer.
congratulationTexts: ["Congratulations"],
},
Don't forget to add your changes only in main files. The PR will require changes if you commit changes in local files. 😣
Make sure that networks referenced in your Badge metadata are the same than those referenced in your flow.
You should have 5 files changed:
  • 3 files changed:
    • badges-metadata/main/hydra-s1-accountbound.ts
    • flows/main.ts
    • group-generators/generators/index.ts
  • 2 files created:
    • group-generators/generators/<your-group-generator-name>/index.ts
    • static/badges/<your-badge-artwork-name>.svg
Add your changes and commit them:
git add .
git commit -m "feat: add tutorial-ens-contributors group on Gnosis and Mumbai"
# if you created the branch tutorial-ens-contributors
git push origin tutorial-ens-contributors
# otherwise
git push
You will then see on your forked repository the following message, you can click on "Compare & pull request" to begin creating your pull request:
Click on "Compare and pull request" to begin creating your PR
You will finally see your branch being compared to the main branch of the sismo-hub repository (in blue squares). You can review your changes, and add a meaningful title and comments, and when you are happy with your PR, click "Create Pull request". 😇
Create your pull request
Don't hesitate to make a PR. We review all pull requests and aim to quickly accept them or respond with feedback. Feel free to ask questions on our Discord!
For example, here is a valid pull request:https://github.com/sismo-core/sismo-hub/pull/910/files
You can its integration on our testnets app (Goerli/Mumbai) here: https://testnets.sismo.io/tuto-

Next steps for your community

You are now able to redirect your users to the path you chose for your minting page on app.sismo.io or testnets.sismo.io, if they are eligible they will be able to mint your Badge on the Sismo UI.
You will then be able to use token-gated tools such as Guild.xyz to engage your community or Snapshot for privacy-preserving votes. You can even gate your smart contracts by only accepting users holding your Badge for certain functionality usage with the Sismo Solidity Library.
Don’t hesitate to go on our Discord if you have any questions or if you enjoyed your first experience and you want to follow our next moves!