💜

Add your App in the Sismo App Store

This tutorial explains step by step how to do add an app to the Sismo App Store. If you did not create your Space first, follow our Tutorial.

Pre-requisites

  • A GitHub Account
  • A Space that is already created (either merged or in a Pull Request)
  • An App Profile Picture (App Store Icon): 500x500px JPG or PNG

The whole process happens entirely on the GitHub interface. We will guide you through the creation of commits within the interface:

  • Create your App config
  • Upload your image
🆘
If you have any questions or need help, contact us in Telegram or Discord

[zkForm] Pre-step: Create Google Sheets

ℹ️
zkForm: forms gated by ZKPs (lotteries, feedback, home address to send swag, etc.). Google Sheets is used to collect user-submitted data.
A. Create a new empty Google Sheet in your desired folder.

Make sure it is completely empty since that will be important for the initialization.

To quickly create a new empty sheet, you can use: https://sheets.new

B. Save the spreadsheetId (for Step 2).

Find the spreadsheetId in the URL. It will be the characters in the middle: https://docs.google.com/spreadsheets/d/{YOUR_SPEADSHEET_ID}/edit#gid=0

🔎
Example:

Here we save 1JMkr0BQZO9R2-Kpcfmm0rQy9y4tmyVAre7crukRFhQA

image
C. Invite the zkForm Bot Account to be editor of this sheet: zk-form-bot@sismo-app-store.iam.gserviceaccount.com.

Go to “Share” (you might need to name the document first).

image

Invite the zk-form-bot@sismo-app-store.iam.gserviceaccount.com account to be the editor of this sheet and click “Send”.

image

[zkTelegramBot] Pre-step: Create Telegram Group

ℹ️
zkTelegramBot: telegram groups gated by ZKPs (top users, premium support, etc.).
A. Create a new group (if you don’t have already one).
image
B. Invite “Sismo Zk Bot” (@SismoZkBot) to your group.
image
C. Promote the Bot to admin, so it can approve requests to join.
image
image
D. Save the telegramGroupId (for Step 2).

Type in the group: /groupid@SismoZkBot to get the Id.

🔎
Example:

Here we save -1001658867707

image
E. Create and save the invite link for the Bot (for Step 2).

Open your group settings and click “Invite Links”.

image

Click on “Create a New Link”.

image

Fill out Link Name, in our case: Demo Sismo Builders.

Toggle on “Request Admin Approval” to allow the bot to approve only valid requests from zkTelegramBot app - set the limit to infinite to avoid renewing the link later.

image

Click on “Demo Sismo Builders” (your Link Name) to access your invite link and save it.

image
🔎
Example of invite link:
<https://t.me/+sHPcckT7A_s1NDdk>

Step 1: Go to your App config file

  1. Let’s go back to our repository: https://github.com/sismo-core/app-store/tree/main/space-configs/main
  2. Navigate to the folder that contains your Space config file. In the past tutorial, we used my-awesome-space.
  3. Open the main.ts file within my-awesome-space (or your space name).
  4. image
  5. Import AuthType from the sismo-connect-server package by adding: import { AuthType } from "@sismo-core/sismo-connect-server";
  6. 🔎
    Example of the modified file:
    image

Step 2: Add your Template config

  1. Now we need to take a closer look at this apps: [] parts. Your Space may already have some apps there or it may be completely blank if you came from Part 1.
  2. // Add your apps here
      apps: [],

    This is where we can add our app config. It contains a list of all the apps that are part of the Space. In the future, you can add more apps to your Space.

  3. Copy and paste the app template into the apps array between the [].
  4. zkForm Template (Forms gated by ZKPs)
    1. Copy and paste the template
    // COPY FROM HERE
    
    {
      // NO UPDATE. Template type
      type: "zkForm",
      // UPDATE. App information
      metadata: {
        name: "Sismo Swag Lottery", // UPDATE. Your app name
        slug: "swag-lottery", // UPDATE. Your app name in the form of a slug (no spaces allowed). It will be the last part in the URL, eg: apps.sismo.io/sismo/swag-lottery
        description:
          "Prove you are a Sismo Community member to participate in the Lottery.", // UPDATE. The description is used for SEO and social media preview of your app
        image: "sismo_zkform_swag_500x500.png", // UPDATE. Image for your app, to be placed in the images folder
        tags: ["Swag"], // UPDATE. Add one or two tags to describe your app
      	createdAt: new Date("2022-07-01T00:00:00.000Z"), // UPDATE. Edit the date here to today's date YYYY-MM-DD
      	lastUpdateAt: new Date("2022-07-01T00:00:00.000Z"), // UPDATE OR REMOVE. Edit the date here to last update date YYYY-MM-DD
      },
      // UPDATE. Sismo Connect request, see "Cheatsheet: Build Your Sismo Connect Request"
      sismoConnectRequest: {
        appId: "{{ auto-fill }}", // NO UPDATE. Sismo Connect appId is automatically created based on your app metadata
        authRequests: [{ authType: AuthType.VAULT }], // UPDATE OR REMOVE. Select auth
        claimRequests: [{ groupId: "0xc90878eaa974c31bc62c52ad86121765" }], // UPDATE OR REMOVE. Select group
      },
      // UPDATE. Config for zkForm
      templateConfig: {
        step1CtaText: "Prove you are Eligible", // UPDATE OR REMOVE. 1st step text when users click on the app, "Sign in with Sismo" by default
        step2CtaText: "Participate in the Swag Lottery", // UPDATE. 2nd step button text, on submitting the form
        appDescription: "You will prove that you are a member of Sismo Community to participate in the lottery by providing your email.", // UPDATE OR REMOVE. Description for your app
        // UPDATE OR REMOVE. Form fields
        fields: [ 
          {
            type: "short-text", // NO UPDATE. Your field type
            label: "Email", // UPDATE. Your field name
            placeholder: "Double check please!", // UPDATE OR REMOVE. Your helper text
            isRequired: true, // UPDATE OR REMOVE. Field required or not, true by default
          },
        ],
        // UPDATE OR REMOVE. Success form message
        congratulationsMessage: {
          title: "Fingers crossed!", // UPDATE. Your title
          description: "We hope to have you as a lucky winner :)", // UPDATE. Your message
        },
        // UPDATE OR REMOVE. User selection
        userSelection: { type: "Lottery", maxNumberOfEntries: 10, numberOfWinners: 10 }, // UPDATE. Your type: "Lottery" or "FCFS". If "FCFS", only use parameter "maxNumberOfUsers". See Parameters explanation below.
        // UPDATE. Data storage
        output: {
          destination: {
            type: "google_sheet", // NO UPDATE.
            spreadsheetId: "", // UPDATE. See "Add your App in the Sismo App Store"
          },
          saveAuths: true, // UPDATE OR REMOVE. Save Auths outputs in spreadsheet
          saveClaims: true, // UPDATE OR REMOVE. Save Claims outputs in spreadsheet
        },
      },
      // UPDATE OR REMOVE. App dates
      options: {
        startDate: new Date("2023-05-12T18:00"), // UPDATE OR REMOVE. Your start date YYYY-MM-DD
        endDate: new Date("2024-05-19T18:00"), // UPDATE OR REMOVE. Your end date YYYY-MM-DD
      },
    },
    
    // UNTIL HERE
    1. Add your spreadsheetId to your config file (see “Pre-step: Create Google Sheets - Step B”):
    2. 🔎
      Example of the modified file:
      output: {
      	destination: {
      		type: "google_sheet",
      		spreadsheetId: "1JMkr0BQZO9R2-Kpcfmm0rQy9y4tmyVAre7crukRFhQA", // UPDATE HERE
      	},
      },
    zkTelegramBot Template (Telegram groups gated by ZKPs)
    1. Copy and paste the template
    // COPY FROM HERE
     
    {
      // NO UPDATE. Template type
      type: "zkTelegramBot",
      // UPDATE. App information
      metadata: {
        name: "Sismo Citadel", // UPDATE. Your app name
        slug: "citadel", // UPDATE. Your app name in the form of a slug (no spaces allowed). It will be the last part in the URL, eg: apps.sismo.io/sismo/citadel
        description:
          "Prove you are a Sismo Community member to join our private Sismo Citadel Telegram Group.", // UPDATE. The description is used for SEO and social media preview of your app
        image: "sismo_zktelegrambot_citadel_500x500.png", // UPDATE. Image for your app, to be placed in the images folder
        tags: ["Telegram"], // UPDATE. Add one or two tags to describe your app
        createdAt: new Date("2022-07-01T00:00:00.000Z"), // UPDATE. Edit the date here to today's date YYYY-MM-DD
        lastUpdateAt: new Date("2022-07-01T00:00:00.000Z"), // UPDATE OR REMOVE. Edit the date here to last update date YYYY-MM-DD
      },
      // UPDATE. Sismo Connect request, see "Cheatsheet: Build Your Sismo Connect Request"
      sismoConnectRequest: {
        appId: "{{ auto-fill }}", // NO UPDATE. Sismo Connect appId is automatically created based on your app metadata
        claimRequests: [{ groupId: "0xd630aa769278cacde879c5c0fe5d203c" }], // UPDATE OR REMOVE. Select group
      },
      // UPDATE. Config for zkTelegramBot
      templateConfig: {
        step1CtaText: "Prove you are Eligible", // UPDATE OR REMOVE. 1st step text when users click on the app, "Sign in with Sismo" by default
        step2CtaText: "Join the Citadel Telegram Group", // UPDATE. 2nd step button text, on submitting the form
        appDescription: "You will prove that you are a member of Sismo Community to join our Sismo Citadel Telegram Group.", // UPDATE OR REMOVE. Description for your app
        telegramGroupId: "", // UPDATE. See "Add your App in the Sismo App Store"
        telegramInviteLink: "", // UPDATE. See "Add your App in the Sismo App Store"
      },
    },
    
    // UNTIL HERE
    1. Add the telegramGroupId (see “Pre-step: Create Telegram Group - Step D”). Copy and paste the id (including the -) into your config file.
    2. 🔎
      Example of the modified file:
      templateConfig: {
      	telegramGroupId: "-1001658867707", // UPDATE HERE
      	telegramInviteLink: "",
      },
    3. Add the Telegram Invite Link into your config file (see “Pre-step: Create Telegram Group - Step E”). Example:
    4. 🔎
      Example of the modified file:
      templateConfig: {
      	telegramGroupId: "-1001658867707", // UPDATE HERE
      	telegramInviteLink: "https://t.me/+sHPcckT7A_s1NDdk", // UPDATE HERE
      },
    zkDrop Template (NFT drops gated by ZKPs)

    Copy and paste the template.

    // COPY FROM HERE
    
    {
      // NO UPDATE. Template type
      type: "zkDrop",
      // UPDATE. App information
      metadata: {
        name: "Sismo Early Community NFT", // UPDATE. Your app name
        slug: "zk-drop-early-community", // UPDATE. Your app name in the form of a slug (no spaces allowed). It will be the last part in the URL, eg: apps.sismo.io/sismo/zk-drop-early-community
        description: "Prove you are an early member of Sismo Community to claim your Sismo Early Community NFT.", // UPDATE. The description is used for SEO and social media preview of your app
        image: "sismo_zkdrop_early_community_500x500.png", // UPDATE. Image for your app, to be placed in the images folder
        tags: ["NFT"], // UPDATE. Add one or two tags to describe your app
        createdAt: new Date("2022-07-01T00:00:00.000Z"), // UPDATE. Edit the date here to today's date YYYY-MM-DD
        lastUpdateAt: new Date("2022-07-01T00:00:00.000Z"), // UPDATE OR REMOVE. Edit the date here to last update date YYYY-MM-DD
      },
      // UPDATE. Sismo Connect request, see "Cheatsheet: Build Your Sismo Connect Request"
      sismoConnectRequest: {
        appId: "{{ auto-fill }}", // NO UPDATE. Sismo Connect appId is automatically created based on your app metadata
        authRequests: [{ authType: AuthType.VAULT }], // UPDATE OR REMOVE. Select auth
        claimRequests: [{ groupId: "0xc90878eaa974c31bc62c52ad86121765" }], // UPDATE OR REMOVE. Select group
      },
      // UPDATE. Config for zkForm
      templateConfig: {
        owner: "{{ evm address }}", // UPDATE OR REMOVE. Evm address owner of the contract. If empty, Sismo is owner by default. Owner will have rights to update NFT metadata and expiry date.
        isTransferable: true, // UPDATE. Make the NFT transferable or not
        nftMetadata: {
          name: "Sismo Early Community NFT", // UPDATE. Name for your NFT
          description: "Claimable by the early community of Sismo, this NFT is a small gift to everyone that helped us to build Sismo before July 11 2023.", // UPDATE. Description for your NFT
          image: "nft_sismo_early_community_1000x1000.png", // UPDATE. Image for your NFT, to be placed in the images folder
          symbol: "SEarlyNFT", // UPDATE. Symbol for your NFT
        },
        chains: [
          {
            contractAddress: "{{ auto-fill }}", // The contract address will be automatically created based on your chain name
            name: "gnosis", // UPDATE. Your chain name: "gnosis", "mainnet", "arbitrum", "optimism", "polygon", “mumbai”, “arbitrum-goerli”, “goerli”, “optimism-goerli”
            relayerEnabled: true, // UPDATE. Relayer enabled or not to pay fees for users and ensure full privacy-preserving claiming, set to false by default.
          },
        ],
        step1CtaText: "Prove you are Eligible", // UPDATE OR REMOVE. 1st step text when users click on the app, "Sign in with Sismo" by default
        step2CtaText: "Claim your Sismo Early Community NFT", // UPDATE. 2nd step button text, on submitting the form
      },
      // UPDATE OR REMOVE. App dates
      options: {
        startDate: new Date("2023-05-12T18:00"), // UPDATE OR REMOVE. Your start date YYYY-MM-DD
        endDate: new Date("2024-05-19T18:00"), // UPDATE OR REMOVE. Your end date YYYY-MM-DD
      },
    }, 
    
    // UNTIL HERE

Step 3: Edit your Template config

  1. Customize parameters of your app config
  2. Customize your Sismo Connect Request

Step 4: Create the Pull Request to the App Store

If you have done
🟣
Create your Space in the Sismo App Store (Accessible by non devs)
before, you should have an open Pull Request (changes made are automatically added to the Pull Request).
A. Once you are done with your changes, “Commit changes…”.
image
B. Add a commit message, i.e. “update space config” and click “Commit changes
image
🎉
Congrats you have committed your changes!
Existing Space: to change an existing Space, you need to open a Pull Request.
A. Navigate back to the main page of your forked repository by clicking on “Code”.
image
B. Here you can select “Contribute” and “Open pull request” to start.

Make sure you have the right repositories and branches selected. You should see sismo-core/app-store and base: main.

image
C. Add some information to the changes that you made.

Put into the Title what Space the changes belong to, and in the comment add more details if necessary.

D. Click “Create pull request”.
image
🎉
Congrats you have submitted your Pull Request!
➡️
Please, contact us in Telegram or Discord when you create a Pull Request. We will quickly review it and provide the next steps about the apps. Once the PR is merged, your changes will appear in the App Store.