B2S Analytics Dashboard

Real-time analytics and insights for the Base2Stacks DeFi ecosystem on Stacks mainnet.

https://base2stacks-tracker.vercel.app

---

📊 Overview

Comprehensive analytics dashboard for tracking $B2S token metrics, staking activity, bridge volume, and ecosystem growth — powered by live Hiro Mainnet API data.

---

✨ Features

Core Metrics

• 📈 Token Volume — 24h, 7d, 30d trading volume
• 👥 User Growth — New users, active wallets, retention
• 💰 TVL Tracking — Total Value Locked in b2s-staking-vault-v2
• 🔄 Transaction Stats — Claims, stakes, transfers, bridges
• 📊 Distribution Charts — Token holder distribution
• 🏆 Leaderboard Analytics — Top stakers with multipliers

Visualizations

• 📉 Line charts for time-series data
• 🥧 Pie charts for distribution
• 📊 Bar charts for comparisons
• 📈 Area charts for cumulative data (Recharts)

Advanced Features

• ⚡ Real-time Updates — Live data from Hiro Mainnet API
• 📥 Export Reports — CSV, JSON
• 🔍 Custom Filters — Date ranges, metrics
• 📱 Responsive Design — Mobile-friendly
• 🎨 Dark Mode — Neon punk infosec theme

APY Chart

Real-time APY from b2s-staking-vault-v2 — 12.5% base, up to 37.5% with lock multipliers.

---

🚀 Quick Start

Installation

npm install @wkalidev/b2s-analytics-dashboard

Basic Usage

import { AnalyticsDashboard } from '@wkalidev/b2s-analytics-dashboard'

function App() {
  return (
    <AnalyticsDashboard
      contractAddress="SP1V72500C63KN9E348QDK9X879MASSTN0J3KBQ5N"
      refreshInterval={60000}
    />
  )
}

---

📦 Components

AnalyticsDashboard

Main dashboard with all metrics.

<AnalyticsDashboard
  contractAddress="SP1V72500C63KN9E348QDK9X879MASSTN0J3KBQ5N"
  refreshInterval?: number  // default: 60000ms
/>

VolumeChart

Token volume over time.

<VolumeChart data={volumeData} timeRange="7d" height={300} />

UserGrowthChart

User acquisition and retention.

<UserGrowthChart data={userData} showRetention={true} />

DistributionPieChart

Token holder distribution by tier.

<DistributionPieChart data={distributionData} showPercentages={true} />

---

📊 Data Structures

interface VolumeData {
  timestamp: number
  volume: number
  transactions: number
  uniqueUsers: number
}

interface UserGrowthData {
  date: string
  newUsers: number
  activeUsers: number
  totalUsers: number
  retention: number
}

interface DistributionData {
  range: string        // e.g. "0-100", "100-1000"
  holders: number
  percentage: number
  totalTokens: number
}

---

🔧 Development

git clone https://github.com/wkalidev/b2s-analytics-dashboard.git
cd b2s-analytics-dashboard
npm install
npm run dev
npm run build
npm test

---

🔗 Smart Contracts (Mainnet)

Deployer: SP1V72500C63KN9E348QDK9X879MASSTN0J3KBQ5N

Contract	Role
b2s-staking-vault-v2	TVL & staker data source
b2s-token-v4	Balance & supply data
b2s-fee-router	Bridge volume data
b2s-liquidity-pool-v6	Swap volume data

---

🔗 Related Repos

Repo	Description
base2stacks-tracker	Main frontend — live app
b2s-token-contract	All Clarity smart contracts
stacks-clarity-toolkit	Clarity dev toolkit
b2s-staking-interface	Staking UI components

---

📜 License

MIT — See LICENSE

👨‍💻 Author

wkalidev (zcodebase) · Twitter · Farcaster

---

Built for #StacksBuilderRewards May 2026 🏆