A React-based blockchain explorer and network management interface for the Nym blockchain, providing comprehensive tools for validators, developers, and token holders.
- Real-time Block Explorer: Browse blocks, transactions, and network activity
- Transaction Details: Comprehensive transaction information with gas usage
- Address Lookup: Search and view account details and transaction history
- Network Statistics: Live network health, validator status, and performance metrics
- Validator Directory: Complete list of network validators with performance metrics
- Staking Interface: Delegate, undelegate, and redelegate tokens
- Validator Details: Commission rates, uptime, voting power, and reputation
- Performance Analytics: Historical performance and reward tracking
- Proposal Voting: Participate in network governance with secure voting
- Proposal Creation: Submit new governance proposals
- Voting History: Track voting patterns and proposal outcomes
- Parameter Changes: Monitor and vote on network parameter updates
- Multi-Wallet Support: Keplr, Cosmostation, and Leap wallet integration
- Token Management: Send, receive, and manage NYM tokens
- Transaction History: Complete transaction history with filtering
- Balance Tracking: Real-time balance updates and USD conversion
- Network Monitoring: Real-time network health and performance
- Gas Estimation: Transaction cost calculation and optimization
- API Documentation: Complete RPC and REST API documentation
- Smart Contract Interaction: Deploy and interact with smart contracts
- Node.js 18+ and npm
- NixOS environment (recommended)
- Enter Nix Shell (if using NixOS):
cd /home/wao/lyra/proj/nymverse
nix-shell- Install Dependencies:
cd nym-web
npm install- Environment Setup:
cp .env.example .env.local
# Edit .env.local with your configuration- Start Development Server:
npm startThe application will open at http://localhost:3000
npm run build- React 18 with TypeScript
- Material-UI for blockchain-focused UI components
- Redux Toolkit for state management
- React Query for data fetching and caching
- Recharts for data visualization
- Nym RPC Client: Direct connection to Nym blockchain nodes
- WebSocket Updates: Real-time block and transaction updates
- Wallet Connectors: Support for multiple Cosmos wallets
- Gas Optimization: Intelligent gas estimation and optimization
- Real-time Updates: Live blockchain data with WebSocket connections
- Caching Strategy: Intelligent caching for performance optimization
- Error Handling: Robust error handling and retry mechanisms
- Pagination: Efficient data loading for large datasets
- Dark Interface: Professional dark theme optimized for data analysis
- Green Primary Color (
#00e676): Financial/blockchain aesthetic - Monospace Typography: For addresses, hashes, and technical data
- Data-Dense Layout: Optimized for information display
- Network Status Header: Real-time network health indicators
- Explorer Tables: Sortable, filterable data tables for blocks/transactions
- Validator Cards: Comprehensive validator information display
- Governance Interface: Clean proposal voting and creation forms
- Wallet Dashboard: Intuitive token management interface
# Nym Network Configuration
REACT_APP_NYM_NODE_RPC=https://rpc.mainnet.nym.network
REACT_APP_NYM_NODE_REST=https://api.mainnet.nym.network
REACT_APP_NYM_NODE_WS=wss://rpc.mainnet.nym.network/websocket
# Chain Configuration
REACT_APP_CHAIN_ID=nym-mainnet-1
REACT_APP_CHAIN_NAME=Nym Mainnet
REACT_APP_CURRENCY_DENOM=unym
REACT_APP_CURRENCY_SYMBOL=NYM
# Application Configuration
REACT_APP_EXPLORER_NAME=Nym Explorer
REACT_APP_ENABLE_TESTNET=false
REACT_APP_UPDATE_INTERVAL=5000const networkConfig = {
mainnet: {
chainId: 'nym-mainnet-1',
rpc: 'https://rpc.mainnet.nym.network',
rest: 'https://api.mainnet.nym.network',
},
testnet: {
chainId: 'nym-testnet-1',
rpc: 'https://rpc.testnet.nym.network',
rest: 'https://api.testnet.nym.network',
}
};- Live Block Updates: Real-time block production and validation
- Transaction Pool: Pending transaction monitoring
- Validator Status: Live validator performance and uptime
- Network Health: Consensus participation and network splits
- Multi-Type Search: Search blocks, transactions, addresses simultaneously
- Smart Filtering: Intelligent search with auto-detection
- Quick Navigation: Direct links to blocks and transactions
- Search History: Recent search suggestions
- Proposal Lifecycle: Track proposals from submission to execution
- Voting Analytics: Detailed voting statistics and participation rates
- Parameter Tracking: Monitor network parameter changes
- Community Engagement: Social features for governance discussion
- Performance Metrics: Uptime, block production, and efficiency
- Commission Tracking: Historical commission rate changes
- Delegation Analytics: Delegator distribution and growth
- Reward Calculations: Accurate reward estimation and tracking
npm start- Development servernpm build- Production buildnpm test- Run testsnpm run lint- Code lintingnpm run format- Code formatting
src/
├── components/ # Reusable UI components
│ └── layout/ # Header, sidebar, navigation
├── pages/ # Page components
│ ├── DashboardPage # Network overview
│ ├── ExplorerPage # Block/transaction explorer
│ ├── ValidatorsPage # Validator directory
│ ├── StakingPage # Staking interface
│ ├── GovernancePage # Governance participation
│ └── WalletPage # Wallet management
├── services/ # API service layers
├── store/ # Redux store and slices
├── hooks/ # Custom React hooks
├── types/ # TypeScript type definitions
└── utils/ # Utility functions
- Network Monitor: Real-time network status and health
- Block Explorer: Block and transaction browsing
- Validator Dashboard: Comprehensive validator management
- Staking Interface: Delegation and reward management
- Governance Portal: Proposal voting and submission
- Wallet Integration: Multi-wallet support and management
- Build the application:
npm run build - Deploy to static hosting (Vercel, Netlify, IPFS)
- Configure domain and SSL certificates
- Set up monitoring and analytics
FROM node:18-alpine
WORKDIR /app
COPY package*.json ./
RUN npm ci --only=production
COPY build ./build
EXPOSE 3000
CMD ["npx", "serve", "-s", "build", "-l", "3000"]- Configure caching for static assets
- Set up appropriate headers for API calls
- Enable compression for optimal performance
- No Private Key Storage: Never store private keys in the application
- Secure Wallet Integration: Use standard wallet connection protocols
- Input Validation: Validate all user inputs and API responses
- HTTPS Only: Enforce HTTPS for all network communications
- Connection Encryption: Encrypted communication with wallet extensions
- Permission Management: Granular permission requests
- Session Management: Secure session handling and timeout
- Transaction Verification: Multiple confirmation steps for transactions
This project is part of the Nymverse ecosystem and is licensed under MIT OR Apache-2.0.
- Nym Blockchain: Core blockchain implementation
- Axon Social: Social networking platform built on Nym
- QuID: Universal quantum-resistant authentication
- NymCompute: Privacy-preserving distributed computing
Built for validators, developers, and the Nym community.