WinScan is a modern, professional multi-chain blockchain explorer built with Next.js 14 and TypeScript. Monitor multiple Cosmos SDK-based blockchains in real-time with an elegant, minimalist interface.
- ๐ Multi-Chain Support - Monitor multiple blockchain networks from one dashboard
- ๐ Real-Time Monitoring - Live consensus tracking and validator status
- ๐ Complete Explorer - Blocks, transactions, validators, proposals, and more
- ๐ Multi-Language - Support for 7 languages (EN, ID, ZH, JA, HI, RU, VI)
- ๐จ Modern UI - Clean, elegant design with dark theme
- ๐ฑ Responsive - Works perfectly on desktop, tablet, and mobile
- โก Fast & Optimized - Built with performance in mind
- Node.js 18+
- npm or yarn
-
Fork this repository (Click "Fork" button at top right)
-
Clone your forked repository
git clone https://github.com/winsnip-official/winscan.git
cd winscan- Install dependencies
npm install- Setup environment variables
cp .env.example .envEdit .env if you want to use different API endpoint (optional):
NEXT_PUBLIC_API_URL=https://ssl.winsnip.xyz- Configure your chains
- Add your chain configurations in
Chains/directory - See
Chains/README.mdfor chain configuration format
- Run development server
npm run devVisit http://localhost:3000
winscan/
โโโ app/ # Next.js app directory
โ โโโ [chain]/ # Dynamic chain routes
โ โโโ api/ # API routes (proxy)
โ โโโ page.tsx # Home page
โโโ components/ # React components
โโโ Chains/ # Chain configurations
โโโ lib/ # Utility functions
โโโ types/ # TypeScript types
โโโ public/ # Static assets
This explorer uses WinSnip API as the backend service:
- API URL: https://ssl.winsnip.xyz
- Public and free to use
- Supports multiple Cosmos chains
- Real-time data sync
For advanced users who want to run their own API backend:
- Backend repository: Coming soon
- Requires VPS and Node.js
- Full control over data and endpoints
Default configuration uses our public API, so you don't need to setup backend.
Create a JSON file in Chains/ directory:
{
"chain_name": "your-chain",
"chain_id": "your-chain-1",
"pretty_name": "Your Chain",
"status": "live",
"network_type": "mainnet",
"logo": "https://your-logo-url.png",
"addr_prefix": "your",
"rpc": [
{
"address": "https://rpc.your-chain.com",
"provider": "Your Provider"
}
],
"api": [
{
"address": "https://api.your-chain.com",
"provider": "Your Provider"
}
],
"assets": [
{
"name": "Your Token",
"symbol": "YOURTOKEN",
"denom": "uyourtoken",
"decimals": 6
}
]
}Frontend (.env)
NEXT_PUBLIC_API_URL=https://ssl.winsnip.xyzBy default, WinScan uses our public API. You can change this to your own API endpoint if you're running a self-hosted backend.
- Connect to Vercel
npm run build
vercel --prod- Set Environment Variable In Vercel dashboard, add:
NEXT_PUBLIC_API_URL=https://ssl.winsnip.xyz
- Deploy Every push to main branch will auto-deploy.
Add your domain in Vercel dashboard โ Domains
npm run dev # Start development server
npm run build # Build for production
npm run start # Start production server
npm run lint # Run ESLintThis repository is configured with branch protection rules:
- โ Public Repository - Anyone can view and fork
- โ Fork to Contribute - Contributors must fork first
- โ No Direct Commits - Main branch is protected
- โ Pull Request Required - All changes via PR
- โ Review Required - PRs need approval before merge
- Fork this repository
- Clone your fork
- Create a new branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add amazing feature') - Push to your fork (
git push origin feature/amazing-feature) - Open a Pull Request
- Framework: Next.js 14 (App Router)
- Language: TypeScript
- Styling: Tailwind CSS
- Icons: Lucide React
- Charts: Recharts
- API: REST API (WinSnip public endpoint)
- Overview statistics
- Network status
- Chain selector
- Blocks - Real-time block explorer
- Transactions - Transaction search and details
- Accounts - Account balances and history
- Validators - Validator list and details
- Proposals - Governance proposals
- Assets - Token information
- Consensus - Real-time consensus monitoring
- State Sync - State sync configuration generator
- Network - Network information and endpoints
- Uptime - Validator uptime tracking
Supported languages:
- ๐ฌ๐ง English
- ๐ฎ๐ฉ Indonesian
- ๐จ๐ณ Chinese
- ๐ฏ๐ต Japanese
- ๐ฎ๐ณ Hindi
- ๐ท๐บ Russian
- ๐ป๐ณ Vietnamese
This project is licensed under the MIT License - see the LICENSE file for details.
- โ Free to use, modify, and distribute
- โ Can use commercially
- โ Can fork and create your own version
โ ๏ธ Must include original licenseโ ๏ธ No warranty provided
Contributions are welcome! Please follow these guidelines:
- Fork the repository
- Create a feature branch
- Make your changes
- Test thoroughly
- Submit a pull request
Contribution Rules:
- Follow existing code style
- Write clear commit messages
- Update documentation if needed
- Test your changes before submitting
Need help or want to connect? Join our community:
- ๐ Website: winsnip.xyz
- ๐ฆ Twitter: @winsnip
- ๐ฌ Telegram: t.me/winsnip
- ๐ป GitHub: github.com/winsnip-official
- ๐ Issues: GitHub Issues
- Built with Next.js
- Powered by Cosmos SDK
- Inspired by Ping.pub and Mintscan
- WebSocket support for real-time updates
- Advanced analytics and charts
- IBC tracking
- NFT explorer
- Token swap integration
- Wallet integration