Documentation

Overview

Bloktrix is a Next.js-based blockchain analytics dashboard that displays real-time data from multiple blockchain networks. The dashboard shows gas prices, network statistics, trending tokens, and contract activity. All data is fetched from public APIs and can be configured via environment variables.

Data Sources

CoinGecko API

Used for trending tokens and token price data. The public API has rate limits, but no API key is required for basic usage.

Base URL: https://api.coingecko.com/api/v3

Block Explorer APIs

Used for gas prices and contract activity. Requires API keys from the respective explorers:

  • Etherscan (Ethereum)
  • Polygonscan (Polygon)
  • Arbiscan (Arbitrum)
  • Basescan (Base)
  • Bscscan (BSC)

RPC Endpoints

Used for fetching block data and gas prices when explorer APIs are unavailable. Public RPC endpoints are used by default, but you can configure custom endpoints for better reliability.

Environment Variables

Create a .env.local file in the project root with the following variables:

# Default Network
NEXT_PUBLIC_BLOCKTRIX_DEFAULT_NETWORK=ethereum

# CoinGecko API (optional)
NEXT_PUBLIC_COINGECKO_BASE_URL=https://api.coingecko.com/api/v3

# Block Explorer API Keys
BLOCKTRIX_ETHERSCAN_API_KEY=your_key_here
BLOCKTRIX_POLYGONSCAN_API_KEY=your_key_here
BLOCKTRIX_ARBISCAN_API_KEY=your_key_here
BLOCKTRIX_BASESCAN_API_KEY=your_key_here
BLOCKTRIX_BSCSCAN_API_KEY=your_key_here

# RPC Endpoints (optional)
NEXT_PUBLIC_ETHEREUM_RPC_URL=your_rpc_url
NEXT_PUBLIC_POLYGON_RPC_URL=your_rpc_url
NEXT_PUBLIC_ARBITRUM_RPC_URL=your_rpc_url
NEXT_PUBLIC_BASE_RPC_URL=your_rpc_url
NEXT_PUBLIC_BSC_RPC_URL=your_rpc_url

# Analytics (optional)
NEXT_PUBLIC_ANALYTICS_DOMAIN=analytics.yourdomain.com
NEXT_PUBLIC_ANALYTICS_SCRIPT=https://plausible.io/js/script.js

# Public site URL override
NEXT_PUBLIC_SITE_URL=https://bloktrix.com

Note: If API keys are not configured, the dashboard will display demo data. This allows you to test the UI without setting up API keys immediately.

Privacy & Analytics

Bloktrix ships without any tracking by default. If you supplyNEXT_PUBLIC_ANALYTICS_DOMAINthe layout will load a privacy-friendly analytics script (Plausible by default) and display a consent banner to visitors.

The banner copy can be edited in components/layout/PrivacyBanner.tsx. Update NEXT_PUBLIC_SITE_URL if you deploy to a custom domain so canonical URLs and sitemap entries point to the right place.

Customization Guide

Adding/Removing Networks

Edit lib/utils/constants.ts to modify the NETWORKS array. Each network requires:

  • Unique ID (lowercase, no spaces)
  • Display name
  • Explorer URL
  • Native currency info
  • Chain ID

Changing Data Providers

Modify the API wrapper functions in lib/api/ to use different providers. The functions are modular and can be easily swapped or extended.

Theme & Branding

To customize the theme:

  • Edit tailwind.config.ts to change colors
  • Modify app/globals.css for global styles
  • Update the logo text in components/layout/Navbar.tsx
  • Change primary colors by updating Tailwind classes throughout components (search for "blue-600" to find primary color usage)

Supported Networks

Currently configured networks:

  • Ethereum (ethereum)
  • Polygon (polygon)
  • Arbitrum (arbitrum)
  • Base (base)
  • BSC (bsc)

Getting API Keys

Etherscan: https://etherscan.io/apis

Polygonscan: https://polygonscan.com/apis

Arbiscan: https://arbiscan.io/apis

Basescan: https://basescan.org/apis

Bscscan: https://bscscan.com/apis