DBRO NextJS-Scaffold With Wagmi

This is a Next.js project bootstrapped with create-next-app, customized for the Decentral Bros (DBRO) project. It includes Web3 integration using wagmi, a responsive header with social icons, and other custom components.

Getting Started

Follow these steps to set up the DBRO scaffold on your local machine:

1. Clone the repository:

   git clone https://github.com/Mr-Web3/DBRO-Scaffold

2. Navigate to the project directory:

   cd dbro-scaffold

3. Install dependencies:

   yarn install

4. Set up your environment variables:

   • Copy the .env.example file to .env.local
   • Update the values in .env.local with your own configuration

5. Start the development server:

   yarn dev

6. Open http://localhost:3000 with your browser to see the result.

Project Structure

• components/: Contains reusable React components (e.g., Header, Footer, SocialIcons)
• pages/: Next.js pages and API routes
• styles/: Global styles and Tailwind CSS configuration
• public/: Static assets (images, fonts, etc.)

Key Features

• Web3 integration with wallet connection using wagmi (configured for Base mainnet)
• Responsive header with navigation and social icons
• Custom styling using Tailwind CSS
• TypeScript support for improved developer experience

Customization

You can start customizing the project by modifying the following files:

• pages/index.tsx: The main landing page
• components/Header.tsx: The site header with navigation and wallet connection
• components/SocialIcons.tsx: Social media icons and links
• styles/globals.css: Global styles and Tailwind CSS imports

Network Configuration

This scaffold is set up to work with the Base mainnet by default. If you want to change the network:

1. Modify the wagmi.config.ts file to update the chain configuration.
2. Update the .env.local file with the correct RPC URL for your chosen network.

To get an RPC URL, you can sign up for a free account at Alchemy. Alchemy provides Web3 APIs and allows you to create endpoints for various networks.

Adding Support for Additional Wallets

To add support for more wallets:

1. Update the Web3Modal configuration in your project.
2. Modify the wagmi.config.ts file to include the new wallet connectors.

Wagmi Integration

This project uses wagmi, a collection of React Hooks for Ethereum, to handle wallet connections and interactions with the blockchain. Wagmi provides a simple and efficient way to integrate Web3 functionality into your React application.

Key wagmi features used in this project:

• Wallet connection and disconnection
• Account and balance information retrieval
• Network switching and configuration

For more information on how to use wagmi in this project, refer to the components/Header.tsx file and the wagmi documentation.

Learn More

To learn more about the technologies used in this project, check out the following resources:

• Next.js Documentation - learn about Next.js features and API.
• Tailwind CSS - a utility-first CSS framework.
• Web3Modal - a library to help with wallet connections.
• wagmi - a collection of React Hooks for Ethereum.
• Base - learn about the Base network.
• Alchemy - Web3 development platform and API provider.

Deployment

The easiest way to deploy your Next.js app is to use the Vercel Platform from the creators of Next.js.

Check out the Next.js deployment documentation for more details.

Contributing

We welcome contributions to improve the DBRO scaffold. Please feel free to submit issues or pull requests to our GitHub repository.

License

MIT License $DBRO