Coreum Explorer (Dexplorer)

A modern, real-time blockchain explorer built with React and TypeScript for exploring Cosmos-based blockchains, specifically designed for Coreum and other Cosmos SDK chains.

🌟 Features

📊 Real-time Dashboard

Live Block Monitoring: Real-time block updates with live streaming
Network Statistics: Current block height, active validators, transaction count, and block time
Network Health: Connection status, consensus metrics, and uptime monitoring
Recent Activity: Live feed of latest blocks and transactions

🔍 Blockchain Exploration

Blocks: Browse and search blocks with detailed information
Transactions: Real-time transaction feed with message type detection
Validators: Active validator list with voting power and commission rates
Accounts: Account details and transaction history
Proposals: Governance proposals with voting status and details

⚙️ Network Parameters

Mint Parameters: Inflation rates, token supply, and minting rules
Staking Parameters: Unbonding periods, validator limits, and bond denominations
Distribution Parameters: Community tax, proposer rewards, and withdrawal settings
Slashing Parameters: Downtime penalties, double-signing penalties, and jail durations
Governance Parameters: Voting periods, deposit requirements, and quorum thresholds

🎨 Modern UI/UX

Dark/Light Theme: Automatic theme switching with system preference detection
Responsive Design: Mobile-first design that works on all devices
Interactive Components: Hover effects, smooth transitions, and loading states
Real-time Updates: Live data streaming without page refreshes

🚀 Quick Start

Prerequisites

Node.js 18+
npm or pnpm

Installation

Clone the repository

git clone https://github.com/skc951201/Coreum-Explorer.git
cd Coreum-Explorer

Install dependencies
```
npm install
# or
pnpm install
```
Start development server
```
npm run dev
# or
pnpm dev
```
Open your browser Navigate to http://localhost:5173

Building for Production

npm run build
# or
pnpm build

The built files will be in the dist directory.

🔧 Configuration

RPC Endpoints

The explorer connects to Cosmos RPC endpoints via WebSocket. You can:

Use predefined chains: Select from popular chains like Cosmos Hub and Osmosis
Add custom RPC: Enter any Cosmos-compatible RPC endpoint
Auto-reconnection: The app automatically reconnects to your last used endpoint

Supported Chains

Coreum: Primary target blockchain
Cosmos Hub: Full support for ATOM chain
Osmosis: DEX protocol exploration
Any Cosmos SDK Chain: Compatible with any Cosmos-based blockchain

🏗️ Architecture

Tech Stack

Frontend: React 18 + TypeScript
Build Tool: Vite
Styling: Tailwind CSS + Custom Theme System
State Management: Redux Toolkit + Zustand
Blockchain: CosmJS (Cosmos JavaScript SDK)
UI Components: Custom components with Framer Motion
Icons: Lucide React + React Icons

Project Structure

src/
├── components/          # Reusable UI components
│   ├── Layout/         # App layout and navigation
│   ├── ui/             # Basic UI components
│   └── ...
├── pages/              # Route-based page components
│   ├── Home.tsx        # Dashboard
│   ├── Blocks.tsx      # Block explorer
│   ├── Transactions.tsx # Transaction explorer
│   ├── Validators.tsx  # Validator list
│   ├── Proposals.tsx   # Governance proposals
│   └── Parameters.tsx  # Network parameters
├── rpc/                # Blockchain communication
│   ├── client/         # RPC client setup
│   ├── abci/           # ABCI queries
│   └── subscribe/      # WebSocket subscriptions
├── store/              # State management
│   ├── connectSlice.ts # Connection state
│   ├── streamSlice.ts  # Real-time data
│   └── paramsSlice.ts  # Network parameters
├── theme/              # Theme system
├── utils/              # Utility functions
└── encoding/           # Message encoding/decoding

Key Features Implementation

Real-time Data Streaming

WebSocket Connections: Direct connection to Tendermint RPC
Event Subscriptions: New block and transaction events
State Persistence: Redux store with persistent data
Auto-reconnection: Automatic reconnection on connection loss

Message Decoding

Cosmos Types: Full support for Cosmos SDK message types
Transaction Parsing: Automatic message type detection
Event Processing: Real-time event parsing and display

Theme System

Dynamic Theming: Runtime theme switching
CSS Variables: Dynamic color system
System Preference: Automatic dark/light mode detection

🔌 API Integration

RPC Methods Used

status() - Network status and latest block
block() - Block details by height
tx() - Transaction details by hash
abci_query() - Custom queries for validators, proposals, parameters
WebSocket subscriptions for real-time updates

Supported Queries

Validator information and voting power
Governance proposals and voting
Network parameters (mint, staking, distribution, slashing, governance)
Account balances and delegations

🎨 Customization

Adding New Chains

Add RPC endpoint to the chain list in src/components/Connect/index.tsx
Update chain-specific configurations if needed
Test with the new chain's RPC endpoint

Theming

Modify src/theme/colors.ts for color schemes
Update CSS variables in src/theme/ThemeProvider.tsx
Customize component styles in individual files

Adding New Features

Create new page components in src/pages/
Add routes in src/App.tsx
Implement RPC queries in src/rpc/abci/
Update navigation in src/components/Layout/

🚀 Deployment

Vercel (Recommended)

Connect your GitHub repository to Vercel
Configure build settings:
- Build Command: npm run build
- Output Directory: dist
Deploy automatically on push to main branch

Other Platforms

Netlify: Use npm run build and deploy dist folder
GitHub Pages: Use GitHub Actions to build and deploy
Docker: Create Dockerfile for containerized deployment

🤝 Contributing

We welcome contributions! Please see our contributing guidelines:

Fork the repository
Create a feature branch: git checkout -b feature/amazing-feature
Commit your changes: git commit -m 'Add amazing feature'
Push to the branch: git push origin feature/amazing-feature
Open a Pull Request

Development Guidelines

Follow TypeScript best practices
Use Prettier for code formatting
Write meaningful commit messages
Test your changes thoroughly
Update documentation as needed

📝 License

This project is licensed under the GNU General Public License v2.0 - see the LICENSE file for details.

🙏 Acknowledgments

CosmJS: For the excellent Cosmos JavaScript SDK
React Team: For the amazing React framework
Tailwind CSS: For the utility-first CSS framework
Cosmos Community: For the vibrant ecosystem and support

📞 Support

Issues: GitHub Issues
Discussions: GitHub Discussions
Documentation: Wiki

🔮 Roadmap

Mobile App: React Native version
Advanced Analytics: Charts and graphs for network analysis
Multi-chain Support: Support for multiple chains simultaneously
Custom Themes: User-defined color schemes
Export Features: Data export capabilities
API Endpoints: REST API for external integrations
Notification System: Real-time alerts and notifications

Built with ❤️ for the Cosmos ecosystem

Dexplorer - Explore the Cosmos, one block at a time.

Name		Name	Last commit message	Last commit date
Latest commit History 147 Commits
public		public
src		src
.gitignore		.gitignore
.prettierignore		.prettierignore
.prettierrc.json		.prettierrc.json
LICENSE		LICENSE
README.md		README.md
eslint.config.js		eslint.config.js
index.html		index.html
next-env.d.ts		next-env.d.ts
next.config.js		next.config.js
package-lock.json		package-lock.json
package.json		package.json
pnpm-lock.yaml		pnpm-lock.yaml
postcss.config.js		postcss.config.js
tailwind.config.js		tailwind.config.js
tsconfig.app.json		tsconfig.app.json
tsconfig.json		tsconfig.json
vite.config.ts		vite.config.ts

License

Vector-6/Coreum-Explorer

Folders and files

Latest commit

History

Repository files navigation