A comprehensive real-time blockchain statistics dashboard for the DigiByte network. This React-based web application provides detailed analytics, visualizations, and monitoring tools for the DigiByte blockchain.
- Live blockchain statistics with WebSocket updates
- Current block height, network hashrate, and difficulty
- Supply economics and market capitalization
- Recent blocks and transaction monitoring
15 pages total (13 mainnet, 12 testnet, 2 testnet-exclusive)
- Home - Main dashboard with key metrics and softfork status
- Blocks - Real-time block explorer with mining details
- Mining Pools - Pool distribution analysis with interactive charts (mainnet only)
- Algorithms - Multi-algorithm mining statistics (SHA256, Scrypt, Skein, Qubit, Odocrypt)
- Hashrate - Network hashrate trends and analysis
- Difficulties - Mining difficulty tracking per algorithm
- Nodes - Geographic visualization of network nodes worldwide
- Supply - Supply economics, emission rate, and distribution metrics
- Transactions - Transaction volume and fee analytics
- Taproot - Network upgrade activation monitoring
- Downloads - DigiByte Core wallet download statistics (mainnet only)
- Roadmap - Development priorities and upcoming features (mainnet only)
- DigiDollar - Decentralized stablecoin concept and collateral system
- Oracles - DigiDollar oracle network status and price feeds (testnet only)
- DD Stats - DigiDollar network-wide statistics dashboard (testnet only)
- Mainnet: Full production network with all features
- Testnet: Dedicated testnet support at
/testnet/*routes - Network Switching: Easy toggle between networks via header navigation
- Separate WebSocket: Independent real-time connections per network
- Material-UI v5 components with DigiByte branding
- Responsive design optimized for mobile and desktop
- Interactive D3.js and Chart.js visualizations
- Dark theme with gradient backgrounds
- Real-time data updates without page refresh
- Comprehensive Open Graph meta tags for social previews
- Twitter Card integration with large image previews
- JSON-LD structured data for search engines
- XML sitemap with all pages (mainnet and testnet)
- robots.txt optimized for search engines and AI crawlers
- Node.js v14.x or higher (tested with v21.7.2)
- DigiByte Node with RPC enabled (digibyte-core)
- dgbstats-server backend (repository)
# Install Homebrew if not already installed
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
# Install Node.js
brew update
brew install node
# Verify installation
node -v
npm -v
# Optional: Install specific Node version
sudo npm install -g n
sudo n install 21.7.2
sudo n use 21.7.2# Clone frontend and backend
git clone https://github.com/JaredTate/dgbstats.git
git clone https://github.com/JaredTate/dgbstats-server.git
# Install dependencies
cd dgbstats
npm installEdit your digibyte.conf file:
# RPC Configuration
rpcuser=your_username
rpcpassword=your_password
server=1
txindex=1
debug=1
# Performance Settings
rpcworkqueue=64
rpcthreads=8
maxconnections=128
# Network Settings
dandelion=0
# Block Notifications (optional)
blocknotify=/path/to/dgbstats-server/blocknotify.sh %sUpdate credentials in dgbstats-server/server.js:
const rpcUser = 'your_username';
const rpcPassword = 'your_password';
const rpcUrl = 'http://127.0.0.1:14022';The frontend configuration is in src/config.js (currently hardcoded to development):
const config = {
development: {
apiBaseUrl: 'http://localhost:5001',
wsBaseUrl: 'ws://localhost:5002'
},
production: {
apiBaseUrl: 'https://digibyte.io',
wsBaseUrl: 'wss://digibyte.io/ws'
}
};
const env = 'development'; // Currently hardcoded
export default config[env];Network-specific configuration (mainnet/testnet) is managed by src/context/NetworkContext.js:
- Mainnet WebSocket: port 5002
- Testnet WebSocket: port 5003
cd dgbstats-server
sudo npm start
# Server runs on port 5001 (API) and 5002 (WebSocket)cd dgbstats
npm start
# Application opens at http://localhost:3005dgbstats/
├── src/
│ ├── pages/ # Page components (15 pages)
│ ├── components/ # Reusable components (Header, Footer, Layouts)
│ ├── context/ # React Context providers (NetworkContext)
│ ├── hooks/ # Custom hooks (5 hooks in useNetworkData.js)
│ ├── tests/ # Test suites (unit, integration, mocks)
│ ├── config.js # API configuration
│ ├── utils.js # Utility functions
│ └── App.js # Main application with routing
├── public/
│ ├── og-images/ # Open Graph preview images
│ ├── sitemap.xml # XML sitemap
│ ├── robots.txt # Crawler rules
│ └── index.html # HTML template with meta tags
├── e2e/ # Playwright E2E tests (21 specs)
└── package.json # Dependencies
npm start # Start development server
npm run build # Create production build
npm test # Run tests in watch mode
npm run test:run # Run tests once
npm run test:coverage # Generate coverage report
npm run test:e2e # Run end-to-end tests
npm run test:all # Run all test suitesThe project maintains 95%+ code coverage with:
- 214 Unit Tests - Component and function testing
- 1,112 E2E Tests - Cross-browser integration testing
- 7 Browser Engines - Chrome, Firefox, Safari, Edge, Mobile Chrome, Mobile Safari
- ✅ WebSocket mocking for real-time data
- ✅ D3.js and Chart.js visualization testing
- ✅ WCAG accessibility compliance
- ✅ Performance benchmarking
- ✅ Mobile responsiveness testing
- ✅ Cross-browser compatibility
# Unit & Integration Tests (Vitest)
npm test # Watch mode
npm run test:run # Single run
npm run test:coverage # Coverage report
npm run test:ui # Vitest UI
# End-to-End Tests (Playwright)
npm run test:e2e # All browsers
npm run test:e2e:ui # Playwright UI
# Combined Testing
npm run test:all # All tests
npm run test:all:clean # Tests + cleanup- React.memo for component memoization
- useMemo/useCallback for expensive operations
- WebSocket batching for real-time updates
- Virtual scrolling for large datasets
- Responsive charts with mobile optimizations
- Code splitting for faster initial load
- Performance: 90+
- Accessibility: 95+
- Best Practices: 100
- SEO: 90+
- Chrome (latest 2 versions)
- Firefox (latest 2 versions)
- Safari (latest 2 versions)
- Edge (latest 2 versions)
- Mobile Chrome
- Mobile Safari
- Fork the repository
- Create a feature branch (
git checkout -b feature/amazing-feature) - Commit changes (
git commit -m 'Add amazing feature') - Push to branch (
git push origin feature/amazing-feature) - Open a Pull Request
- Follow existing code patterns and styling
- Maintain 95%+ test coverage
- Test on mobile and desktop viewports
- Ensure WCAG 2.1 AA accessibility compliance
- Update documentation for new features
- Full Testnet Support: Complete testnet implementation with dedicated WebSocket, routing, and peer tracking
- Deployment Info: Updated to use
getdeploymentinfoRPC for softfork status (replaces deprecatedsoftforksfield) - SEO Enhancements: Added Open Graph images, sitemap, and AI crawler support
- DigiDollar Page: New page explaining the decentralized stablecoin concept
- TAP Route Activation: Successfully activated and buried - UI elements removed
- Enhanced Testing: Comprehensive test suite with 95%+ coverage
- Performance Improvements: Optimized chart rendering and WebSocket handling
- Mobile Optimization: Improved responsive design for all screen sizes
- CLAUDE.md - Comprehensive AI agent documentation
- Testing Guide - Detailed testing documentation
- API Documentation - Backend API reference
This project is open-source and available under the MIT License.
For issues, feature requests, or questions:
- Open an issue on GitHub
- Contact the development team
Developed by the DigiByte community for real-time blockchain analytics and monitoring.