WAYRU Explorer Web

A comprehensive blockchain explorer and web interface for the WAYRU Network, a decentralized physical infrastructure network (DePIN) built on Solana. This application provides real-time visualization of network hotspots, staking operations, reward claiming, and network statistics.

Overview

WAYRU Explorer Web is a Next.js-based application that serves as the primary interface for interacting with the WAYRU Network. It enables users to:

Explore Network Hotspots: Visualize WiFi hotspots on an interactive map powered by Mapbox
Stake WAYRU Tokens: Stake tokens to hotspots to earn rewards
Claim Rewards: Claim earned rewards from staking operations
Unstake Tokens: Withdraw staked tokens from hotspots
View Network Statistics: Monitor network metrics, total value locked, and network performance

Features

🗺️ Interactive Map Explorer

Real-time hotspot visualization on an interactive map
Boosted zones and strategic area highlighting
Hotspot details and statistics
Device model and location type filtering

💰 Staking System

Stake WAYRU tokens to network hotspots (NFNodes)
Support for both initial and additional stakes
NFT-based staking mechanism
Real-time staking status and transaction tracking

🎁 Reward Management

Claim rewards earned from staking
Real-time reward calculation
Socket-based transaction status updates
Secure transaction signing via backend services

📊 Network Analytics

Total hotspots count
Total data transfer metrics
Total WAYRU staked (TVL)
Network score tracking (wUBI, wUPI)
Active multipliers and boosted areas
Historical charts and statistics

🌐 Multi-language Support

English, Spanish, and Portuguese support
Internationalized routing
Dynamic dictionary loading

Tech Stack

Framework: Next.js 15.3.8 (App Router)
Language: TypeScript
Blockchain: Solana (via @solana/web3.js)
Smart Contracts: Anchor Framework (@coral-xyz/anchor)
UI Components: HeroUI (NextUI fork)
Maps: Mapbox GL
State Management: Zustand
Data Fetching: SWR
Real-time: Socket.io Client
Styling: Tailwind CSS 4.x
Animations: Framer Motion

Project Structure

explorer-web/
├── app/                    # Next.js app router pages
│   ├── [lang]/            # Internationalized routes
│   │   ├── (explorer-map)/ # Map explorer pages
│   │   └── (explorer-others)/ # Other explorer pages
│   └── api/               # API routes
├── lib/
│   ├── components/         # React components
│   ├── services/
│   │   └── blockchain/    # Blockchain service layer
│   │       ├── program/   # Anchor program setup
│   │       ├── solana/    # Solana utilities
│   │       └── transactions/ # Transaction services ⭐
│   │           ├── stake/     # Staking operations
│   │           ├── unstake/  # Unstaking operations
│   │           └── claim/    # Reward claiming
│   ├── stores/            # Zustand state stores
│   ├── hooks/             # Custom React hooks
│   ├── helpers/           # Utility functions
│   └── constants/         # App constants
├── dictionaries/          # i18n translation files
└── public/                # Static assets

Blockchain Services

Transaction Services ( `lib/services/blockchain/transactions` )

The transaction services layer provides a clean abstraction for interacting with the WAYRU staking program on Solana. All blockchain operations are organized into three main categories:

1. Staking ( `/stake` )

The staking service handles all operations related to staking WAYRU tokens to network hotspots.

Key Files:

index.ts - Main orchestration function that handles the complete staking flow
initialize-nfnode.ts - Initializes NFNode entry on-chain (first-time setup)
init-stake-nft.ts - Creates stake NFT and performs initial stake in one transaction
stake-tokens.ts - Adds additional tokens to an existing stake

Features:

Automatic detection of first-time vs. additional stakes
NFT mint creation for new stakes
Balance validation before staking
Event-driven progress tracking
Comprehensive error handling with human-readable messages

Usage Example:

import { stake } from '@/lib/services/blockchain/transactions/stake';

const signature = await stake({
  externalNftMint: hotspotNftMint,
  amount: 25000,
  networkId: 1
});

2. Unstaking ( `/unstake` )

The unstaking service handles withdrawal of staked tokens from hotspots.

Key Features:

Counter-based stake NFT detection
Partial unstaking support
Automatic account cleanup
Transaction confirmation handling

Usage Example:

import { unstake } from '@/lib/services/blockchain/transactions/unstake';

const signature = await unstake({
  externalNftMint: hotspotNftMint,
  stakedData: userStakeData
});

3. Claiming Rewards ( `/claim` )

The claiming service manages reward distribution and transaction signing via backend services.

Key Files:

index.ts - Main claim orchestration with socket integration
socket-helpers.ts - Socket.io helpers for transaction status tracking

Features:

Backend-assisted transaction signing
Real-time transaction status updates via WebSockets
Automatic token refresh and reconnection
Permission validation before claiming
Support for initialization transactions

Usage Example:

import { claimRewards } from '@/lib/services/blockchain/transactions/claim';

const result = await claimRewards({
  hotspotId: 123,
  walletAddress: walletAddress,
  externalNftMint: hotspotNftMint,
  includeInitTx: false
});

Transaction Flow Architecture

All transaction services follow a consistent pattern:

Validation: Check prerequisites (balance, permissions, account existence)
Account Derivation: Calculate PDAs (Program Derived Addresses) for on-chain accounts
Transaction Building: Construct Anchor transactions with required accounts
Signing: Sign transactions using wallet adapter
Submission: Send transactions to Solana network
Confirmation: Wait for transaction confirmation
Event Emission: Emit events for UI state updates
Error Handling: Provide user-friendly error messages

Key Blockchain Concepts

NFNode: Network hotspot represented as an NFT
Stake NFT: NFT minted when staking tokens, representing the stake position
Deposit Entry: On-chain account tracking staked amount per stake NFT
Token Storage: Authority account holding staked WAYRU tokens
PDA (Program Derived Address): Deterministic addresses derived from seeds

Getting Started

Prerequisites

Node.js 18+ (or 20+ recommended)
pnpm (package manager)
Solana CLI (for local development, optional)

Installation

Clone the repository:

git clone <repository-url>
cd explorer-web

Install dependencies:

pnpm install

Set up environment variables: Create a .env.local file with the following variables:

NEXT_PUBLIC_TOKEN_MINT_WAYRU=<WAYRU_TOKEN_MINT_ADDRESS>
NEXT_PUBLIC_FOUNDATION_WALLET_ADDRESS=<FOUNDATION_WALLET>
NEXT_PUBLIC_SOLANA_NETWORK=devnet
NEXT_PUBLIC_MAPBOX_TOKEN=<MAPBOX_ACCESS_TOKEN>
# Add other required environment variables

Run the development server:

pnpm dev

Open http://localhost:3000 in your browser.

Building for Production

pnpm build
pnpm start

Development

Key Scripts

pnpm dev - Start development server with Turbopack
pnpm build - Build for production
pnpm start - Start production server

Code Style

TypeScript strict mode enabled
ESLint configuration included
Follow Next.js App Router conventions
Use functional components with hooks

Deployment

The project includes Kubernetes deployment configurations in the kube/ directory for both development and production environments.

Docker

A Dockerfile is included for containerized deployments.

Environment-Specific Configurations

Development: kube/dev-az-1/
Production: kube/prod-az-1/

Contributing

This repository is now open source and free for the community. Contributions are welcome!

License

This project is open source and available for use by the community.

Support

For questions or issues, please refer to the repository's issue tracker.

💙 Farewell Message

With gratitude and love, we say goodbye. WAYRU is closing its doors, but we are leaving these repositories open and free for the community. May they continue to inspire builders, dreamers, and innovators.

With love, WAYRU

Note: This project is open source. Wayru, Inc and The Wayru Foundation are no longer operating entities, and will not provide any kind of support. The community is welcome to use, modify, and improve this codebase.

Name		Name	Last commit message	Last commit date
Latest commit History 593 Commits
.github/workflows		.github/workflows
app		app
dictionaries		dictionaries
kube		kube
lib		lib
public		public
.gitignore		.gitignore
.npmrc		.npmrc
.nvmrc		.nvmrc
Dockerfile		Dockerfile
README.md		README.md
eslint.config.mjs		eslint.config.mjs
middleware.ts		middleware.ts
next.config.ts		next.config.ts
package.json		package.json
pnpm-lock.yaml		pnpm-lock.yaml
postcss.config.mjs		postcss.config.mjs
tsconfig.json		tsconfig.json

Wayru-Network/explorer-web

Folders and files

Latest commit

History

Repository files navigation

WAYRU Explorer Web

Overview

Features

🗺️ Interactive Map Explorer

💰 Staking System

🎁 Reward Management

📊 Network Analytics

🌐 Multi-language Support

Tech Stack

Project Structure

Blockchain Services

Transaction Services ( lib/services/blockchain/transactions )

1. Staking ( /stake )

2. Unstaking ( /unstake )

3. Claiming Rewards ( /claim )

Transaction Flow Architecture

Key Blockchain Concepts

Getting Started

Prerequisites

Installation

Building for Production

Development

Key Scripts

Code Style

Deployment

Docker

Environment-Specific Configurations

Contributing

License

Support

💙 Farewell Message

About

Resources

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Contributors 3

Uh oh!

Languages

Transaction Services ( `lib/services/blockchain/transactions` )

1. Staking ( `/stake` )

2. Unstaking ( `/unstake` )

3. Claiming Rewards ( `/claim` )

Packages