NeutronTemplate

NeutronTemplate is a comprehensive starting point for building NextJS applications that interact with Neutron. It includes everything needed to create a modern, full-stack dApp with wallet integration, smart contract interaction, and a polished UI.

Features

Getting Started

Prerequisites

# Install Node.js (v18 or higher)
# Install Rust and wasm-pack for contract development
curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
rustup target add wasm32-unknown-unknown

Quick Setup

Smart Contract Features

The included CosmWasm contract provides several example functions that demonstrate common patterns:

User State Management

• Increment Value: Users can increment a personal counter stored in their state
• Deposit/Withdraw NTRN: Users can deposit and withdraw NTRN tokens with state tracking
• Query User Data: Retrieve user-specific state and balances

Global State

• Global Counter: A shared counter that all users can increment
• Admin Functions: Only the contract admin can reset the global counter

Example Contract Functions

// Execute Messages
pub enum ExecuteMsg {
    IncrementUserValue {},
    DepositNtrn {},
    WithdrawNtrn { amount: Uint128 },
    IncrementGlobalCounter {},
    ResetGlobalCounter {}, // Admin only
}

// Query Messages  
pub enum QueryMsg {
    GetUserValue { address: String },
    GetUserDeposit { address: String },
    GetGlobalCounter {},
    GetContractBalance {},
}

Frontend Architecture

Components Structure

The frontend is organized with reusable components and custom hooks:

frontend/
├── app/                 # NextJS 13+ app directory
├── components/          # Reusable UI components
├── hooks/              # Custom React hooks for chain interaction
├── config/             # Configuration files
└── public/             # Static assets

Key Features

Testing & Development

Local Testing Setup

The template includes a complete testing environment in the contract/JS/ folder:

cd contract/JS
npm install

# Configure environment
cp .env.example .env
# Edit .env with your test wallet seed phrase

# Deploy and test
node deploy.js    # Deploy contract
node migrate.js   # Handle migrations  
node exec.js      # Execute contract functions
node query.js     # Query contract state

Testing Networks

Customization Guide

Adapting the Template

Adding Mobile Wallet Support

The template includes placeholders for mobile wallet integration:

1. Get a Reown/WalletConnect Project Key
2. Update the wallet configuration in frontend/config/
3. Enable mobile wallet options in CosmosKit setup

Production Deployment

Frontend Deployment

cd frontend
npm run build
npm start

The frontend can be deployed to any platform supporting NextJS:

• Vercel (recommended)
• Netlify
• Digital Ocean App Platform
• Self-hosted with Docker

Contract Deployment

cd contract
./buildprod.sh

# Deploy to mainnet (update network configuration)
node JS/deploy.js

Advanced Usage

Extending Contract Functionality

The contract is designed to be easily extensible. Common additions include:

• NFT Integration: Add support for NFT minting and trading
• Multi-token Support: Extend beyond NTRN to other tokens
• Governance Features: Add voting and proposal mechanisms
• Cross-chain Integration: Utilize Neutron's IBC capabilities

Frontend Enhancements

• Advanced UI: Add charts, dashboards, or data visualization
• Real-time Features: Implement WebSocket connections for live updates
• Mobile App: Convert to React Native or create PWA
• Analytics: Integrate usage tracking and user analytics

Troubleshooting

rustup update
rustup target add wasm32-unknown-unknown

Resources

This template provides a solid foundation for building production-ready Neutron applications. It incorporates best practices for both smart contract development and modern web frontend architecture, making it an ideal starting point for developers at any level.