A modern block explorer for the Namada blockchain with support for both indexer API and direct RPC queries.
- 📊 Block and transaction exploration
- 👥 Validator information and staking data
- 🔍 Account balance and transaction history
- ⚡ Static data loading with React Query
- 🌐 Direct RPC queries using Namada SDK
- 📱 Modern responsive UI with Chakra UI
npm installCreate a .env.local file in the project root with the following variables:
# Existing indexer API base URL (for your current API calls)
VITE_INDEXER_API_BASE=http://localhost:3000
# Namada RPC URL (for direct chain queries via SDK)
VITE_RPC_URL=http://rpc.namada.tududes.com
# Optional: MASP Indexer URL (for shielded transactions)
VITE_MASP_INDEXER_URL=
# Chain ID (will be auto-detected if not provided)
VITE_CHAIN_ID=VITE_INDEXER_API_BASE: URL of your indexer API (existing functionality)VITE_RPC_URL: Direct RPC endpoint to a Namada nodeVITE_MASP_INDEXER_URL: Optional MASP indexer for shielded transaction supportVITE_CHAIN_ID: Chain ID (automatically detected if not specified)
This explorer now supports direct RPC queries to Namada nodes using the official Namada SDK. This allows you to:
- Query chain parameters and native token information
- Get real-time validator data
- Fetch account balances directly from the chain
- Access staking and delegation information
- Retrieve gas costs and other chain metadata
import {
useRpcNativeToken,
useRpcAllValidators,
useRpcBalance,
useRpcStakingTotals,
useRpcGasCosts,
} from './queries/useRpcQuery';
// Get native token
const { data: nativeToken } = useRpcNativeToken();
// Get all validators
const { data: validators } = useRpcAllValidators();
// Get account balance
const { data: balance } = useRpcBalance(
"tnam1q9...", // owner address
["tnam1qx..."], // token addresses
"namada-mainnet.abc123" // chain ID
);All RPC queries are configured for static data loading:
- Data is fetched once on page load/refresh
- Results are cached indefinitely (
staleTime: Infinity) - No recurring background updates
- Perfect for explorer use cases where data freshness is controlled by user navigation
import { ChainInfo } from './components/ChainInfo';
// This component demonstrates RPC usage
function App() {
return (
<div>
<ChainInfo />
{/* Your other components */}
</div>
);
}npm run buildnpm run devNote: RPC functionality using the Namada SDK works in production builds only due to bundling complexities. During development, you can work on the UI and use your existing indexer API. To test RPC functionality, use:
npm run build
npm run preview- Frontend: React 18 + TypeScript + Vite
- UI Library: Chakra UI v3
- State Management: React Query (TanStack Query)
- Routing: React Router v7
- Blockchain Integration: Namada SDK + Custom indexer API
- Data Strategy: Static loading with infinite caching