/scaffold-era

Primary LanguageTypeScript

zkSync Era Scaffold

This is a zkSync Era + wagmi + RainbowKit + Hardhat + NextJs project.

⚠️ Note

After the BUIDLera Hackathon has ended, changes have been made to this repository. If you want to refer to the state of the repository at the time the hackathon ended, please refer to the following branch.

https://github.com/0xrhsmt/scaffold-era/tree/hackathon-submission

Live Demo

https://scaffold-app-omega.vercel.app/

Demo Video

https://www.youtube.com/watch?v=GSAQHerLtTg

Who is this for?

This starter is a great choice for any of the following groups:

  • Hackers hacking on zkSync Era
  • Hackers interested in using the most modern web3 full development stack.

Getting Started

Install Node and pnpm

Install Node.js. See here.
Note that you need Node.js at a later version than 18 and above.

Install pnpm. See here.
Note that you need pnpm at a later version than 8 and above.

Start the application

screenshot

  1. Clone/fork the scaffold-era repo

    git clone https://github.com/0xrhsmt/scaffold-era.git

  2. Install the necessary node packages:

    cd scaffold-era
pnpm install

  3. copy .env.example and edit .env

    cd packages/app
cp .env.example .env
<!-- edit .env -->

  4. Start the frontend with pnpm run dev

    pnpm run dev

  5. Open localhost:3000 in your browser.

    open http://localhost:3000

local development

Run local Hardhat node and deploy contracts

This project includes the @wagmi/cli by default, allowing you to create wagmi-compatible (type safe) ABIs & React Hooks directly from your terminal.

To produce these ABIs & Hooks, follow the procedures below.

  1. run hardhat node

    cd packages/contracts
pnpm run node:local

  2. Deploy contracts

    pnpm run build
pnpm run deploy:local

  3. Deploy contracts

    cd packages/app

<!-- Add the contract address to packages/app/src/configs/deployments.ts -->

pnpm exec wagmi generate

Run app

  1. Start the frontend with pnpm run dev

    cd packages/app
pnpm run dev

Deployments

Deploy Contracts

You can now deploy your contract!

cd packages/contracts

cp .env.example .env
<!-- edit .env -->

pnpm run build
pnpm run deploy

cd ../app

<!-- Add the contract address to packages/app/src/configs/deployments.ts -->
pnpm exec wagmi generate

Deploy to Vercel

use vercel cli: https://vercel.com/docs/cli

cd packages/app

pnpm exec vercel
pnpm exec vercel env add
pnpm exec vercel redeploy $DEPLOYMENT_URL

Learn more