https://github.com/threefoldtech/tfchain-explorer
https://github.com/threefoldtech/tfchain-explorer
Last synced: 13 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/threefoldtech/tfchain-explorer
- Owner: threefoldtech
- Created: 2025-04-24T19:45:39.000Z (about 1 year ago)
- Default Branch: development
- Last Pushed: 2025-05-26T09:32:26.000Z (about 1 year ago)
- Last Synced: 2025-12-28T18:58:13.822Z (5 months ago)
- Language: TypeScript
- Size: 1.98 MB
- Stars: 0
- Watchers: 7
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# TFChain Explorer
[](https://threefoldtech.github.io/tfchain-explorer/)
A comprehensive blockchain explorer for TFChain, a Substrate-based blockchain that powers the ThreeFold Grid. This explorer provides real-time insights into TFChain-specific entities including grid statistics, farms, nodes, twins, contracts, and account transaction history.
## Features
- **Live Grid Statistics**: Real-time overview of TFChain grid metrics (nodes, farms, twins, contracts)
- **Farm Explorer**: Browse and search TFChain farms with detailed information
- **Node Explorer**: Examine node details with filtering and sorting capabilities
- **Block Explorer**: View detailed block information including extrinsics and events
- **Account Transaction History**: Track account transactions with customizable block range selection
- **TFChain Pallets Documentation**: Reference for TFChain-specific pallets and types
- **Real-time Updates**: Live updates as new blocks are finalized
## Architecture
```
TFChain Explorer Architecture
┌─────────────────────┐ ┌─────────────────┐ ┌───────────────────┐
│ │ │ │ │ │
│ React Components │────▶│ Polkadot.js │────▶│ TFChain Network │
│ & Hooks │ │ API │ │ Endpoints │
│ │ │ │ │ │
└─────────────────────┘ └─────────────────┘ └───────────────────┘
```
## Tech Stack
- **Frontend**: React 19, TypeScript, Chakra UI v2/v3
- **Blockchain Connectivity**: @polkadot/api
- **Build System**: Vite
- **Routing**: React Router v6
- **Deployment**: GitHub Pages
## Getting Started
### Prerequisites
- Node.js (v18+)
- npm or yarn
- Git
### Installation
```bash
# Clone the repository
git clone https://github.com/threefoldtech/tfchain-explorer.git
cd tfchain-explorer
# Install dependencies
npm install --legacy-peer-deps
# Start the development server
npm run dev
```
The application will be available at http://localhost:5173/
### Available Scripts
- `npm run dev` - Start the development server
- `npm run build` - Build the application for production with TypeScript checking
- `npm run build-force` - Build the application without TypeScript checking
- `npm run preview` - Preview the production build locally
- `npm run deploy` - Deploy the application to GitHub Pages
## Connecting to TFChain Networks
The explorer is configured to connect to the following TFChain networks:
- **Development**: `wss://tfchain.dev.grid.tf`
- **QA**: `wss://tfchain.qa.grid.tf`
- **Test**: `wss://tfchain.test.grid.tf`
- **Production**: `wss://tfchain.grid.tf`
You can modify these endpoints in `src/api/substrate.ts`.
## Deployment
### Deploying to GitHub Pages
The project is configured for easy deployment to GitHub Pages:
```bash
# Deploy to GitHub Pages
npm run deploy
```
This will:
1. Build the application using the `build-force` script
2. Push the built files to the `gh-pages` branch
3. Make the site available at `https://threefoldtech.github.io/tfchain-explorer/`
### Custom Deployment
To deploy to a custom domain or hosting service:
1. Update the `homepage` field in `package.json`
2. Update the `base` path in `vite.config.ts`
3. Build the application: `npm run build-force`
4. Deploy the contents of the `dist` directory to your hosting service
## Project Structure
```
/src
├── api/ # API connection and context
├── components/ # Reusable UI components
│ ├── TFChainStats.tsx # Grid statistics component
│ ├── TFChainFarms.tsx # Farms listing component
│ ├── TFChainNodes.tsx # Nodes listing component
│ └── ...
├── hooks/ # Custom React hooks
│ ├── useBlocks.ts # Block data fetching
│ └── ...
├── pages/ # Page components
├── types/ # TypeScript type definitions
├── utils/ # Utility functions
├── App.tsx # Main application component
└── main.tsx # Application entry point
```
## Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
1. Fork the repository
2. Create your feature branch: `git checkout -b feature/amazing-feature`
3. Commit your changes: `git commit -m 'Add some amazing feature'`
4. Push to the branch: `git push origin feature/amazing-feature`
5. Open a Pull Request
## License
This project is licensed under the MIT License - see the LICENSE file for details.
## Acknowledgments
- [Polkadot.js](https://polkadot.js.org/) - JavaScript API for Substrate-based blockchains
- [ThreeFold](https://threefold.io/) - For creating TFChain and the ThreeFold Grid
- [Substrate](https://substrate.io/) - Blockchain development framework