Torram Explorer

A modern, responsive blockchain explorer for the Torram network built with Next.js 14, TypeScript, and Tailwind CSS.

Features

• 🌓 Dark/Light mode support
• 📱 Fully responsive design
• ⚡ Server-side rendering for optimal performance
• 🔍 Advanced search functionality
• 📊 Real-time blockchain data
• 🎯 Modern, clean UI/UX

Tech Stack

• Framework: Next.js 14 (App Router)
• Language: TypeScript
• Styling: Tailwind CSS
• Components: Lucide Icons, Headless UI
• State Management: React Hooks
• Data Fetching: [Upcoming]

Getting Started

Prerequisites

• Node.js 18+
• npm or yarn

Installation

1. Clone the repository:

git clone https://github.com/yourusername/torram-explorer.git
cd torram-explorer

2. Install dependencies:

npm install
# or
yarn install

3. Start the development server:

npm run dev
# or
yarn dev

4. Open http://localhost:3000 with your browser.

Project Structure

src/
├── app/                   # Next.js app directory
│   ├── blocks/           # Blocks route
│   ├── transactions/     # Transactions route
│   ├── validators/       # Validators route
│   └── layout.tsx        # Root layout
├── components/           # React components
│   ├── layout/          # Layout components
│   ├── shared/          # Shared/reusable components
│   └── blocks/          # Block-specific components
├── lib/                  # Utility functions and API
└── types/               # TypeScript type definitions

Features Implementation

Current Features

• Responsive navigation
• Theme switching (Dark/Light mode)
• Mobile-friendly design
• Block explorer layout
• Search functionality (UI)

Upcoming Features

• Block details page
• Transaction explorer
• Validator list and details
• Account/Address view
• Real-time data updates
• Analytics and charts
• Network parameters view

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the project
2. Create your feature branch (git checkout -b feature/AmazingFeature)
3. Commit your changes (git commit -m 'Add some AmazingFeature')
4. Push to the branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

Development

Commands

• npm run dev - Start development server
• npm run build - Build production version
• npm run start - Start production server
• npm run lint - Run ESLint
• npm run type-check - Run TypeScript checks

Environment Variables

Create a .env.local file in the root directory:

NEXT_PUBLIC_API_URL=your_api_url
NEXT_PUBLIC_CHAIN_ID=your_chain_id

License

MIT License

Acknowledgments

• Next.js Documentation
• Tailwind CSS
• Lucide Icons
• Headless UI

TorramChain Explorer Features

Node Stats

• Peer Count Display
• Block Validation History
• Oracle Price Feed Status
• KYC Node Names [needs staking]
• Staked Amount Tracking [needs staking]
• Node Rankings (Release #2) [needs staking]
• Uptime Metrics
• Error Rate Tracking
• Developer API Support Metrics

Chain Stats

• Current Block Height
• Block Time Display
• Network Node Count [needs staking]
• Chain Size
• Block Rewards [needs staking]
• Torram Fees Collection [needs tx implementation]
• Custom Reward Metrics [needs staking]

Transaction Stats

• Block Transaction Counts [needs tx implementation]
• Mempool Size
• BTC Network Confirmations [needs bitcoin implementation]
• TORR Signature Verification [needs bitcoin implementation]
• Bitcoin Transaction Linking [needs bitcoin implementation]
• BTC Fee Tracking [needs bitcoin implementation]
• Transaction Confirmation Time [needs bitcoin implementation]

Real-time Features

• Current Bitcoin Price
• Live Block Updates
• Real-time Transaction Feed [needs tx implementation]
• Live Node Status Updates [needs staking]
• Real-time Price Feed
• Live Network Statistics
• WebSocket Connection Status
• Real-time Error/Alert Notifications