Avail Explorer

An intuitive explorer interface for the Avail network, allowing interaction with the blockchain, visualization of statistics, and transaction management.

Key Features

• Network Statistics: Real-time dashboard with Avail blockchain metrics
• Transaction History: View recent transactions with pagination support
• Auto-Updates: Data automatically refreshed at regular intervals
• Wallet Connection: Integration with Substrate wallets for network interaction
• Blockchain Actions:
  • Token transfers
  • Data submission to the network
• Personal Transaction History: Track your own transactions
• Connectivity Status: Visual indicator of network connection state

Tech Stack

• Next.js: React framework for server-side rendering and static site generation
• React Query: Server state management and data caching
• Zustand: Simplified global state management
• Tailwind CSS: Utility-first CSS framework for rapid design
• Zod: TypeScript-first schema validation
• Shadcn: Reusable UI components
• GraphQL: Query language for APIs
• avail-js-sdk: Official SDK for Avail network interaction
• @polkadot/api: JavaScript library for Substrate networks
• @polkadot/extension-dapp: Browser extension integration for Substrate wallets

Getting Started

1. Install dependencies:

pnpm install

2. Run the development server:

pnpm dev

Open http://localhost:3000 with your browser to see the result.

Actions Panel

Transaction History

Network Statistics

Recent Transactions