https://github.com/drewcook/nextjs-web3-template

Quickly set up a robust frontend application designed to interact with Ethereum-based smart contracts.
https://github.com/drewcook/nextjs-web3-template

ethereum material-ui nextjs react typescript viem wagmi walletconnect

Last synced: 5 days ago
JSON representation

Quickly set up a robust frontend application designed to interact with Ethereum-based smart contracts.

• Host: GitHub
• URL: https://github.com/drewcook/nextjs-web3-template
• Owner: drewcook
• Created: 2023-09-08T20:07:55.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-03-26T23:28:01.000Z (9 months ago)
• Last Synced: 2024-04-10T10:01:13.507Z (9 months ago)
• Topics: ethereum, material-ui, nextjs, react, typescript, viem, wagmi, walletconnect
• Language: TypeScript
• Homepage: https://template.dco.dev/
• Size: 97.2 MB
• Stars: 6
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Nextjs Web3 Template

View the [demo app](https://template.dco.dev/).

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](https://cloud.walletconnect.com/) 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](https://app.infura.io/dashboard), 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](https://dashboard.alchemyapi.io/) 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](./abis/README.md) 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)