Base Counter dApp with Reown WalletConnect

A modern decentralized application built on Base blockchain using Reown AppKit (formerly WalletConnect) for seamless wallet integration. This project demonstrates smart contract interaction with a simple counter contract deployed on Base mainnet.

🚀 Features

• Base Blockchain Integration - Built specifically for the Base ecosystem
• Reown AppKit - Modern wallet connection using WalletConnect v2
• Smart Contract Interaction - Deploy and interact with counter contracts
• Next.js 15 - Latest React framework with App Router
• TypeScript - Full type safety throughout the application
• Wagmi v2 - React hooks for Ethereum
• Viem - TypeScript interface for Ethereum

🛠️ Tech Stack

• Frontend: Next.js 15, React 19, TypeScript
• Blockchain: Base (Ethereum L2)
• Wallet: Reown AppKit (WalletConnect v2)
• Smart Contracts: Solidity, Foundry
• Web3: Wagmi v2, Viem
• Styling: CSS Modules

📋 Prerequisites

• Node.js 18+
• npm, yarn, pnpm, or bun
• Git
• A Reown project ID (get one at dashboard.reown.com)

🚀 Quick Start

1. Clone the Repository

git clone https://github.com/anastlaaaf/base-contract.git
cd base-contract

2. Install Dependencies

npm install
# or
yarn install
# or
pnpm install
# or
bun install

3. Environment Setup

Create a .env.local file in the root directory:

# Get your project ID from https://dashboard.reown.com
NEXT_PUBLIC_PROJECT_ID=your_project_id_here

# Optional: Project name for metadata
NEXT_PUBLIC_PROJECT_NAME=Base Counter dApp

4. Run the Development Server

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 to see the application.

🔗 Smart Contract

The project includes a simple counter contract deployed on Base mainnet:

Contract Address: 0x349cBCdd020c52485A0683ba65199e975964e2aD

Contract Functions

• number() - View function to get current count
• increment() - Function to increment the counter by 1

Contract Source

// SPDX-License-Identifier: UNLICENSED
pragma solidity ^0.8.13;

contract Counter {
    uint256 public number;

    function setNumber(uint256 newNumber) public {
        number = newNumber;
    }

    function increment() public {
        number++;
    }
}

🏗️ Project Structure

base-contract/
├── app/                    # Next.js app directory
│   ├── page.tsx           # Main page component
│   ├── layout.tsx         # Root layout
│   ├── globals.css        # Global styles
│   └── calls.ts           # Contract interaction calls
├── config/                # Configuration files
│   └── index.tsx          # Wagmi and Reown config
├── context/               # React context providers
│   └── index.tsx          # AppKit context provider
├── contracts/             # Smart contracts
│   ├── src/              # Solidity source files
│   ├── test/             # Contract tests
│   └── script/           # Deployment scripts
└── public/               # Static assets

🔧 Configuration

Reown AppKit Setup

The app uses Reown AppKit for wallet connection with the following features:

• Supported Wallets: All major wallets via WalletConnect
• Networks: Base mainnet
• Storage: Cookie-based for SSR support
• Analytics: Optional usage analytics

Wagmi Configuration

• Chains: Base
• Transports: HTTP RPC
• Storage: Cookie storage for SSR
• SSR: Enabled for Next.js compatibility

🚀 Deployment

Vercel (Recommended)

1. Push your code to GitHub
2. Connect your repository to Vercel
3. Add environment variables in Vercel dashboard
4. Deploy!

Other Platforms

The app can be deployed to any platform that supports Next.js:

• Netlify
• Railway
• Render
• AWS Amplify

🔒 Security

This project follows security best practices:

• ✅ No private keys in code
• ✅ Environment variables for sensitive data
• ✅ Client-side wallet connection only
• ✅ Public contract addresses only
• ✅ Proper .gitignore for sensitive files

📚 Learn More

• Base Documentation
• Reown AppKit Documentation
• Wagmi Documentation
• Next.js Documentation
• Viem Documentation

🤝 Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

• Base for the amazing L2 blockchain
• Reown for WalletConnect and AppKit
• Wagmi for React hooks
• Viem for TypeScript interface
• Next.js for the React framework

base-contract