|
Watch blocks and transactions as they happen on the blockchain with WebSocket connections |
Connect your Cardano wallet securely with CIP-30 standard support for multiple wallets |
Sign in with your wallet using message signing - no passwords needed! |
|
High-performance backend built with Rust, Actix-web, and Oura pipeline |
| Service | URL |
|---|---|
| Frontend | blockchainliveexpolrer-production-af39.up.railway.app |
| Backend API | blockchainliveexpolrer-production-b895.up.railway.app |
| WebSocket | wss://blockchainliveexpolrer-production-b895.up.railway.app/ws |
| Health Check | Backend Health |
graph LR
A[Cardano Node] -->|Node-to-Client| B[Oura Pipeline]
B -->|Event Stream| C[Rust Backend]
C -->|WebSocket| D[Frontend]
C -->|REST API| D
C -->|JWT Auth| D
| Language | Rust |
| Web Framework | Actix-web 4.x |
| Async Runtime | Tokio |
| Blockchain Data | Oura v1.9 (txpipe) |
| Authentication | JWT + Ed25519 Signature Verification |
| WebSocket | actix-ws |
| Framework | Next.js 14 (App Router) |
| Language | TypeScript |
| Styling | Tailwind CSS 3.x |
| Wallet Integration | CIP-30 Standard |
| State Management | React Context API |
| HTTP Client | Native Fetch API |
# Rust & Cargo
curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
# Node.js & npm (v18+)
# Download from https://nodejs.org/
# Oura CLI
cargo install ouraThe easiest way to run the entire stack:
# Clone the repository
git clone https://github.com/kushal2060/Blockchain_live_expolrer.git
cd cardano-explorer
# Start everything with Docker Compose
docker-compose up --build
# Access the application
# Frontend: http://localhost:3000
# Backend: http://localhost:8000
# WebSocket: ws://localhost:8000/wsBackend Setup
# Navigate to backend directory
cd backend
# Install Oura
cargo install oura
# Verify Oura installation
oura --version
# Build the project
cargo build --release
# Run the backend
cargo run
# Backend will start on http://localhost:8000Environment Variables (.env):
RUST_LOG=info
JWT_SECRET=your-super-secret-jwt-key-change-in-production
SERVER_HOST=127.0.0.1
SERVER_PORT=8000Frontend Setup
# Navigate to frontend directory
cd frontend
# Install dependencies
npm install
# Create environment file
cat > .env.local << EOF
NEXT_PUBLIC_API_URL=http://localhost:8000
NEXT_PUBLIC_WS_URL=ws://localhost:8000/ws
EOF
# Run development server
npm run dev
# Frontend will start on http://localhost:3000Build for Production:
npm run build
npm run start| Wallet | Website | Status |
|---|---|---|
| lace.io | Recommended | |
| eternl.io | Supported | |
 Yoroi |
yoroi-wallet.com | Supported |
 Typhon |
typhonwallet.io | Supported |
| Flint | flint-wallet.com | Supported |
sequenceDiagram
participant U as User
participant W as Wallet
participant F as Frontend
participant B as Backend
participant C as Cardano Node
U->>F: Click "Connect Wallet"
F->>W: Request Connection
W->>U: Approve Connection?
U->>W: Approve
W->>F: Connected ✓
U->>F: Click "Sign In"
F->>B: Request Challenge
B->>F: Return Message to Sign
F->>W: Request Signature
W->>U: Sign Message?
U->>W: Sign
W->>F: Signed Message
F->>B: Submit Signature
B->>B: Verify Signature
B->>F: JWT Tokens
F->>U: Authenticated!
-
Install a Wallet Extension
- Choose from: Lace, Eternl, Yoroi, Typhon, or Flint
- Install browser extension from official website
-
Switch to PreProd Testnet
- Open wallet settings
- Select "PreProd" or "Testnet" network
- Never use mainnet for testing!
-
Get Test ADA (tADA)
- Visit: docs.cardano.org/cardano-testnet/tools/faucet
- Enter your PreProd address
- Receive 10,000 test ADA
-
Connect to Explorer
- Visit the live demo
- Click "Connect Wallet"
- Select your wallet
- Approve connection
- Sign authentication message
- Start exploring!
| Method | Endpoint | Description |
|---|---|---|
GET |
/health |
Health check |
GET |
/api/blocks?limit=20 |
Get latest blocks |
GET |
/api/blocks/latest |
Get latest block |
GET |
/api/transactions?limit=50 |
Get latest transactions |
GET |
/api/auth/challenge?address=<addr> |
Get authentication challenge |
POST |
/api/auth/login |
Login with signed message |
POST |
/api/auth/refresh |
Refresh access token |
WS |
/ws |
WebSocket connection |
| Method | Endpoint | Description |
|---|---|---|
GET |
/api/auth/me |
Get current user info |
POST |
/api/auth/logout |
Logout and revoke token |
POST |
/api/auth/add-wallet |
Add additional wallet |
GET |
/api/user/transactions |
Get user's transactions |
GET |
/api/user/balance |
Get user's balance |
GET |
/api/user/wallets |
Get connected wallets |
Example API Calls
Get Latest Blocks:
curl https://blockchainliveexpolrer-production-b895.up.railway.app/api/blocks?limit=5Get Authentication Challenge:
curl "https://blockchainliveexpolrer-production-b895.up.railway.app/api/auth/challenge?address=addr_test1qz..."Login (with signature):
curl -X POST https://blockchainliveexpolrer-production-b895.up.railway.app/api/auth/login \
-H "Content-Type: application/json" \
-d '{
"address": "addr_test1qz...",
"message": "Sign this message...",
"signature": "abc123...",
"public_key": "def456..."
}'Access Protected Endpoint:
curl https://blockchainliveexpolrer-production-b895.up.railway.app/api/auth/me \
-H "Authorization: Bearer YOUR_JWT_TOKEN"📂 Backend Structure
backend/
├── Cargo.toml
├── Dockerfile
├── src/
│ ├── main.rs # Entry point & server setup
│ ├── models/
│ │ ├── mod.rs
│ │ ├── block.rs # Block data structure
│ │ └── transaction.rs # Transaction data structure
│ ├── oura_stream.rs # Oura integration & blockchain state
│ ├── websocket.rs # WebSocket handler
│ ├── auth/
│ │ ├── mod.rs
│ │ ├── jwt.rs # JWT generation & verification
│ │ ├── verification.rs # Signature verification (Ed25519)
│ │ ├── middleware.rs # Auth middleware
│ │ └── routes.rs # Auth endpoints
│ └── api/
│ ├── mod.rs
│ ├── blocks.rs # Block endpoints
│ ├── transactions.rs # Transaction endpoints
│ └── user_transactions.rs # User-specific endpoints
Frontend Structure
frontend/
├── package.json
├── tsconfig.json
├── tailwind.config.ts
├── next.config.js
├── Dockerfile
├── src/
│ ├── app/
│ │ ├── layout.tsx # Root layout with providers
│ │ ├── page.tsx # Home page (explorer)
│ │ ├── dashboard/
│ │ │ └── page.tsx # User dashboard
│ │ ├── my-transactions/
│ │ │ └── page.tsx # User transactions
│ │ └── my-wallets/
│ │ └── page.tsx # Wallet management
│ ├── components/
│ │ ├── layout/
│ │ │ └── Navbar.tsx # Navigation bar
│ │ ├── wallet/
│ │ │ ├── WalletConnectButton.tsx
│ │ │ └── WalletModal.tsx
│ │ ├── auth/
│ │ │ └── ProtectedRoute.tsx
│ │ ├── BlockList.tsx
│ │ ├── BlockCard.tsx
│ │ ├── TransactionList.tsx
│ │ └── Stats.tsx
│ ├── context/
│ │ ├── WalletContext.tsx # Wallet state management
│ │ └── AuthContext.tsx # Auth state management
│ ├── lib/
│ │ ├── cardano.ts # CIP-30 wallet interface
│ │ └── api.ts # Backend API client
│ ├── types/
│ │ ├── wallet.ts
│ │ └── auth.ts
│ └── hooks/
│ └── useWebSocket.ts
# Dockerfile is already configured
# Just connect your repository to Railway or Fly.io
# Railway
railway up
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the repository
- Create your feature branch (
git checkout -b feature/luffy) - Commit your changes (
git commit -m 'Add some hakis') - Push to the branch (
git push origin feature/luffy) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- txpipe/oura - Blockchain data pipeline
- Cardano Foundation - Cardano blockchain
- Actix Web - Rust web framework
- Next.js - React framework
- Tailwind CSS - CSS framework
Made with 🦀 Rust and ⚛️ React