Skip to content

Latest commit

 

History

History
44 lines (34 loc) · 1.8 KB

README.md

File metadata and controls

44 lines (34 loc) · 1.8 KB
Raw

Nextjs Web3 Template

View the demo app.

This is a template for building a robust frontend application designed to interact with Ethereum-based smart contracts.

It uses the following features:

  • Next 13
  • React 18
  • TypeScript
  • Material UI
  • Emotion
  • Viem
  • Wagmi
  • WalletConnect v3
  • Infura & Alchemy RPC Providers
  • ESLint
  • Prettier
  • Commitlint
  • Yarn
  • Husky Git Hooks

Getting Started

Prerequisites

This template relies on WalletConnect and an RPC provider to connect to Ethereum-compatible networks. Therefore, you must perform the following steps prior to running the app locally:

  1. WalletConnect Project ID - Set up a new WalletConnect Project to obtain the Project ID. Add it to NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID in the .env file.
  2. Infura RPC API Key - For a simple setup, create a new Infura API Key, and add it to NEXT_PUBLIC_INFURA_RPC_KEY in the .env file.
  3. Alternate: Alchemy RPC API Key - If you prefer to use Alchemy as an RPC provider instead of Infura, set up a new Alchemy API Key for the network that you wish to use, and add it to NEXT_PUBLIC_ALCHEMY_RPC_KEY in the .env file.

Running the App Locally

  1. Install dependencies: yarn install
  2. Setup environment variables: cp .env .env.local
    1. Update values with appropriate keys
    2. Or, comment them out in src/lib/wagmiConfig.ts
  3. Run development server: yarn dev
  4. Open browser: http://localhost:3000
    1. It will hot reload on each file save
  5. Follow the steps this README to add contract ABIs and configurations for deployment addresses
  6. Start editing: src/app/page.tsx to update the UI (visit the Dashboard page to mint an example NFT)