📱 NextJS + TypeScript + Tailwind Web3 Client App
This boilerplate provides a solid foundation for building decentralized applications (dApps) using NextJS, TypeScript, and Tailwind CSS, with a focus on Bitcoin.com's VERSE token ecosystem. It's configured as a client-side application, optimized for Web3 interactions.
- 🚀 NextJS 13+ with App Router
- 🦾 TypeScript for type safety
- 🎨 Tailwind CSS for styling
- 🌍 Web3 integration with Wagmi
- 🧶 Yarn v1 as package manager
- 🖥️ Client-side rendering with
output: export - 🪙 Integration with Bitcoin.com VERSE token ecosystem
- Clone this repository
- Install dependencies:
yarn install - Create .env.development (or .env depending on environment), edit to add your projectId:
cp .env.sample .env.development - Run the development server:
yarn dev
The project follows a modular structure to organize different dApps:
app/
(dapp)/
YOUR-DAPP/
page.tsx
layout.tsx
page.tsx
layout.tsx
To add a new dApp, create a new folder inside app/(dapp)/ with your dApp's name. This folder should contain at least a page.tsx file.
The homepage (app/page.tsx) includes examples of contract interactions using Wagmi, specifically tailored for the VERSE token ecosystem. These examples demonstrate how to connect to Web3 wallets and interact with VERSE-related smart contracts.
Each dApp is configured to automatically attempt to connect to the user's Web3 wallet. This functionality is implemented in the layout files to ensure consistent behavior across all pages.
Your dApp should behave as if it is on the route /your-dapp. You may also pass ?origin=wallet as a URL parameter to indicate the origin of the request.
If you want to access your app through a local network IP (e.g., 192.168.x.x) while developing, you may need to whitelist your local network IP in WalletConnect site. This is necessary to allow your phone or other devices on the same network be able to get the connection options from WalletConnect.
All contract interactions must be implemented using Wagmi. This ensures consistent and reliable communication with blockchain networks, including interactions with VERSE token contracts. Refer to the Wagmi documentation for detailed usage instructions.
This project uses Yarn v1 as its package manager. To add new dependencies:
yarn add package-name
To add a development dependency:
yarn add -D package-name
This boilerplate is specifically designed to work with Bitcoin.com's VERSE token. It includes examples and utilities for interacting with VERSE token contracts and participating in the VERSE ecosystem.
Contributions are welcome! Please feel free to submit a Pull Request.
This project is licensed under the MIT License.