A modern, feature-rich blockchain explorer for the Studio Blockchain network. This application allows users to explore blocks, transactions, addresses, tokens, and NFTs on the Studio Blockchain. Test it here https://studio-scan.com
- Block Explorer: View detailed information about blocks, including transactions, gas used, and more.
- Transaction Explorer: Explore transactions with detailed information about gas usage, input data, and event logs.
- Address Explorer: View address details, including balance, transactions, tokens, and NFTs.
- Token Explorer: Browse tokens on the network with market data and transfer history.
- NFT Explorer: Discover NFT collections and individual NFTs with ownership history and properties.
- AI Dashboard: Visualize the on-chain neural networks that power Studio Blockchain's priority system gas fees.
- Responsive Design: Fully responsive interface that works on desktop, tablet, and mobile devices.
- Dark Mode: Sleek dark theme for comfortable viewing in all environments.
- Frontend: React, React Router, Framer Motion
- Styling: Tailwind CSS
- Data Visualization: Chart.js, React Chart.js 2
- Build Tool: Vite
- HTTP Client: Axios
- Node.js (v16 or higher)
- npm or yarn
-
Clone the repository:
git clone https://github.com/studioblockchain/explorer.git cd explorer -
Install dependencies:
npm install # or yarn install -
Start the development server:
npm run dev # or yarn dev -
Open your browser and navigate to
http://localhost:3000
To build the application for production:
npm run build
# or
yarn buildThe built files will be in the dist directory, ready to be deployed to a web server.
- Any static file server (Nginx, Apache, etc.)
- HTTPS certificate (recommended for production)
- Build the application as described above.
- Use the deployment script to create a deployment package:
npm run deploy
- Upload the generated
studio-blockchain-explorer.zipfile to your web server. - Extract the ZIP file to your web server's public directory.
- Configure your web server to serve the application.
Example Nginx configuration:
server {
listen 80;
server_name explorer.studioblockchain.com;
# Redirect to HTTPS
return 301 https://$host$request_uri;
}
server {
listen 443 ssl;
server_name explorer.studioblockchain.com;
ssl_certificate /path/to/certificate.crt;
ssl_certificate_key /path/to/private.key;
root /path/to/dist;
index index.html;
# Handle SPA routing
location / {
try_files $uri $uri/ /index.html;
}
# Cache static assets
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
expires 30d;
add_header Cache-Control "public, no-transform";
}
}The explorer is designed to work with the Studio Blockchain API. The API endpoints are configured in src/services/api.js.
The application connects to the Studio Blockchain Indexer API at https://mainnetindexer.studio-blockchain.com by default. You can modify this in the src/services/api/core.js file if needed.
studio-blockchain-explorer/
├── public/ # Static assets
│ ├── token-logos/ # Token logos
│ └── ...
├── src/
│ ├── assets/ # Application assets
│ ├── components/ # React components
│ │ ├── addresses/ # Address-related components
│ │ ├── ai-visualization/ # AI visualization components
│ │ ├── blocks/ # Block-related components
│ │ ├── common/ # Common/shared components
│ │ ├── contracts/ # Contract-related components
│ │ ├── layout/ # Layout components (Header, Footer)
│ │ ├── nfts/ # NFT-related components
│ │ ├── tokens/ # Token-related components
│ │ └── transactions/ # Transaction-related components
│ ├── context/ # React context providers
│ ├── hooks/ # Custom React hooks
│ ├── pages/ # Page components
│ ├── services/ # API services
│ │ ├── api/ # API modules
│ │ └── ...
│ ├── store/ # State management
│ ├── utils/ # Utility functions
│ ├── App.jsx # Main application component
│ ├── App.css # Application styles
│ ├── index.css # Global styles
│ └── main.jsx # Application entry point
├── .gitignore # Git ignore file
├── build-for-deploy.js # Deployment script
├── DEPLOYMENT.md # Deployment guide
├── eslint.config.js # ESLint configuration
├── package.json # Project dependencies and scripts
├── postcss.config.js # PostCSS configuration
├── README.md # Project documentation
├── tailwind.config.js # Tailwind CSS configuration
└── vite.config.js # Vite configuration
The Studio Blockchain Explorer includes a unique AI Dashboard that visualizes the on-chain neural networks that power Studio Blockchain's priority system gas fees. This feature provides insights into:
- Block prediction accuracy
- Network optimization
- Transaction priority
- Learning progress
Studio Blockchain is the first Ethereum fork with on-chain neural networks and priority system gas fees. The AI analyzes transaction patterns and network conditions to optimize block production and transaction processing, resulting in a more efficient and accessible blockchain for all users.
Transactions are processed based on their priority level, with higher priority transactions being processed faster. Users can choose their priority level based on their needs, creating a balanced system that maintains network efficiency while providing flexibility for different types of transactions.
The explorer provides comprehensive support for tokens and NFTs on the Studio Blockchain network, including:
- Token details and transfer history
- NFT collections and individual NFT properties
- Token price information
Contributions are welcome! Please feel free to submit a Pull Request.
This project is licensed under the MIT License - see the LICENSE file for details.
- Studio Blockchain Team
- React and Vite communities
- All open-source libraries used in this project