Skip to content

Unirep/create-unirep-app

Repository files navigation

create-unirep-app

Github license Linter eslint Code style prettier Circle CI

This is a demo app of a unirep attester. In this demo app, users can request data from the example attester. After transition, users can prove how much data they have.

Learn more about how to build with create-unirep-app!

🔋 Requirements

  • Node.js >=18
  • To write custom circuits: install rust and circom 2

🛠 1. Installation

npx create-unirep-app

Then cd into the directory that was created.

📦 2. Local Development

2.1 Build the files

yarn build

Tip

To overwrite circuit keys, delete .wasm, .zkey and .vkey.json objects in packages/circuits/zksnarkBuild and run:

yarn circuits buildsnark

2.2 Start a node

yarn contracts hardhat node

2.3 Deploy smart contracts

in new terminal window, from root:

yarn contracts deploy

2.4 Start a relayer (backend)

yarn relay start

2.5 Start a frontend

in new terminal window, from root:

yarn frontend start

It will be running at: http://localhost:3000/

🎁 3. Linting

3.1 Format the code

yarn lint:fix

3.2 Check if the code is formatted

yarn lint:check

🛜 4. Deployment

4.1 Deploy smart contract

  • Edit the packages/contracts/.env after yarn build.
  • Get your ETH_PROVIDER_URL from infura, alchemy, or other provider services.
  • Get your PRIVATE_KEY and paste it in .env starting with 0x.
  • Run
    yarn contracts deploy --network custom
    from root directory

4.2 Deploy the frontend

Vercel is a Frontend Cloud. You can easily deploy the frontend and relay service with Vercel.

Caution

It will be a serverless relay. Learn more about serverless functions.

  • Deploy serverless relay:

    • Deploy with Vercel
      Click the Deploy button, and add the following settings

    • Go to Settings > Environment Variables
      set

      key value
      PRIVATE_KEY 0x...
      ETH_PROVIDER_URL https://...
      APP_ADDRESS 0x...
      UNIREP_ADDRESS 0x...

      from packages/relay/.env

    • Go to Deployments, choose the deployment and click ...
      Click Redeploy

    • Redeploy the relay, you will get a https://{RELAY_APP_NAME}.vercel.app as the relay server.

    • View demo: https://create-unirep-app-relay.vercel.app/

  • Deploy frontend:

    • Go to vercel dashboard and click Add New... > Project

    • Choose the same repo as you created before.

    • Set
      Framework Preset: Create React App
      Build Command: yarn build
      Output Directory: packages/frontend/build
      Environment Variables:

      key value
      SERVER https://{RELAY_APP_NAME}.vercel.app

      and leave other settings as default.

    • Deploy the frontend, you will get a https://{FRONTEND_APP_NAME}.vercel.app app!

    • View demo: https://create-unirep-app-frontend.vercel.app/

🙌🏻 Join our community

  • Discord server:
  • Twitter account:
  • Telegram group:

Privacy & Scaling Explorations

This project is supported by Privacy & Scaling Explorations and the Ethereum Foundation. See more projects on: https://pse.dev/projects.