DApp Starter Template

A comprehensive starter template for building decentralized applications on AERE Network. This template provides everything you need to get started quickly with best practices already implemented.

Download Template

Features

Wallet connection (MetaMask, WalletConnect, etc.)
Network detection and switching
Token balances display
Token swapping interface
Responsive design with dark/light mode
TypeScript support
React components for common blockchain interactions
ESLint and Prettier configuration
Testing setup with Jest
Ethereum provider integration

Getting Started

Prerequisites

Make sure you have the following installed:

Node.js (v16 or higher)
npm or yarn
Git

Installation


# Clone the repository
git clone https://github.com/aere-network/dapp-starter.git my-dapp

# Navigate to the project directory
cd my-dapp

# Install dependencies
npm install
# or
yarn install

# Start the development server
npm run dev
# or
yarn dev

Configuration

Create a .env file in the root directory with the following variables:


VITE_CHAIN_ID=2800
VITE_RPC_URL=https://api.aere.network/rpc
VITE_BLOCK_EXPLORER_URL=https://explorer.aere.network

Project Structure


my-dapp/
├── public/
│   ├── favicon.ico
│   └── ...
├── src/
│   ├── components/
│   │   ├── ConnectWallet.tsx
│   │   ├── TokenBalance.tsx
│   │   ├── SwapInterface.tsx
│   │   └── ...
│   ├── hooks/
│   │   ├── useEthereum.ts
│   │   ├── useTokens.ts
│   │   └── ...
│   ├── pages/
│   │   ├── Home.tsx
│   │   ├── Swap.tsx
│   │   └── ...
│   ├── services/
│   │   ├── api.ts
│   │   └── ...
│   ├── App.tsx
│   ├── main.tsx
│   └── ...
├── .env
├── package.json
├── tsconfig.json
└── ...

Customization

You can customize the DApp starter template to suit your specific needs:

Modify the theme colors in src/styles/theme.ts
Add additional contract ABIs in src/contracts/
Extend the wallet connection options in src/hooks/useEthereum.ts

Connecting to AERE Network

The template is pre-configured to connect to AERE Network. Make sure your wallet is configured to use AERE Network:

Network Name: AERE Network
RPC URL: https://api.aere.network/rpc
Chain ID: 2800
Symbol: AERE
Block Explorer URL: https://explorer.aere.network

Deploying Your DApp

To build your DApp for production:


# Build the application
npm run build
# or
yarn build

# The build output will be in the dist/ directory

Support and Resources

For additional help and resources: