What You’ll Build
A modern React app with:- Wallet connection (Keplr integration)
- Real-time contract state display
- Transaction execution with user feedback
- Price monitoring from Oracle module
- Responsive, beautiful UI
Prerequisites
- Completed Part 2: Modules & Contracts
- Node.js and npm installed
- Basic React knowledge
- Deployed contract from previous tutorials
Project Setup
1. Initialize React App
2. Configure Environment
Create.env
file:
3. Set Up Wallet Integration
Createsrc/hooks/useWallet.ts
:
4. Create Contract Interface
Createsrc/hooks/useContract.ts
:
5. Build the UI Components
Createsrc/components/WalletConnect.tsx
:
src/components/ContractInterface.tsx
:
6. Main App Component
Updatesrc/App.tsx
:
Advanced Features
1. Transaction History
Add transaction monitoring:2. Real-time Updates
Add WebSocket connection for real-time updates:3. Error Boundaries
Createsrc/components/ErrorBoundary.tsx
:
Deployment
1. Build for Production
2. Deploy to IPFS
3. Configure for Mainnet
Update.env
for mainnet:
Key Features Implemented
- Wallet Integration: Seamless Keplr wallet connection
- Contract Interaction: Execute and query smart contract functions
- Real-time Updates: Live contract state monitoring
- Error Handling: Comprehensive error boundaries and user feedback
- Responsive Design: Modern, mobile-friendly interface
- Oracle Integration: Display live price data from Neutron’s Oracle module
Security Best Practices
- Input Validation: Always validate user inputs
- Error Handling: Never expose sensitive error details
- State Management: Keep sensitive data out of global state
- Environment Variables: Use environment variables for configuration
- HTTPS: Always serve over HTTPS in production
Next Steps
Congratulations! You’ve built a complete DApp on Neutron. Consider exploring:- Advanced UI: Add charts, animations, and better UX
- Multi-contract Integration: Interact with multiple contracts
- Cross-chain Features: Use ICQ to display data from other chains
- Testing: Add comprehensive unit and integration tests
- Mobile App: Build a React Native version
Troubleshooting
Keplr Not Detected
Keplr Not Detected
Ensure Keplr extension is installed and enabled. Handle the case where Keplr is not available.
Transaction Fails
Transaction Fails
Check gas limits, fee amounts, and contract message format. Use browser dev tools to debug.
State Not Updating
State Not Updating
Ensure you’re calling
refreshState()
after successful transactions and handling async operations properly.