A real-time dashboard for tracking $MOVE token buyback activity onchain.

• Live Token Data: Real-time $MOVE token price, market cap, and volume from CoinGecko/CoinMarketCap
• Token Information Display: Shows token logo, price, 24h change, market cap, and circulating supply
• Real-time Statistics: Track total buybacks, token amounts, transaction counts, and recent activity
• Interactive Charts: Visualize buyback trends over time with beautiful area charts
• Transaction History: View detailed information about recent buyback transactions
• Responsive Design: Works seamlessly on desktop, tablet, and mobile devices
• Modern UI: Built with Tailwind CSS and featuring a sleek dark theme

• Next.js 14: React framework with App Router
• TypeScript: Type-safe development
• Tailwind CSS: Utility-first CSS framework
• Recharts: Data visualization library
• Lucide Icons: Beautiful icon set
• date-fns: Date utility library

npm install

The app uses CoinGecko by default (no API key required). To use CoinMarketCap instead:

1. Get a free API key from CoinMarketCap
2. Create a .env.local file:

   COINMARKETCAP_API_KEY=your_api_key_here

Run the development server:

npm run dev

Open http://localhost:3000 in your browser to see the dashboard.

Build for production:

npm run build

Start production server:

npm start

├── app/
│   ├── layout.tsx       # Root layout with metadata
│   ├── page.tsx         # Main dashboard page
│   └── globals.css      # Global styles and Tailwind directives
├── components/
│   ├── Header.tsx       # Navigation header with token info
│   ├── TokenInfo.tsx    # Token market data display
│   ├── StatsCards.tsx   # Statistics cards component
│   ├── BuybackChart.tsx # Buyback trends chart
│   └── TransactionTable.tsx # Transaction history table
├── lib/
│   ├── tokenData.ts     # Token market data service (CoinGecko/CMC)
│   └── api.ts           # Buyback API service (placeholder)
├── types/
│   └── index.ts         # TypeScript interfaces
├── package.json
├── tsconfig.json
├── tailwind.config.ts
└── next.config.js

The application automatically fetches live $MOVE token data from:

• CoinGecko API (default, no API key required)
• CoinMarketCap API (optional, requires API key)

Data includes:

• Current price and 24h change
• Market capitalization
• Trading volume
• Circulating supply
• Token logo

Data is cached for 60 seconds and automatically revalidated.

The buyback tracking currently uses mock data for demonstration. To integrate with your API:

1. Create an API service file (e.g., lib/api.ts)
2. Replace mock data in components with API calls
3. Add loading states and error handling
4. Implement real-time updates using WebSockets or polling

StatsCards.tsx:

• Fetch overall statistics (total buybacks, tokens, transactions)

BuybackChart.tsx:

• Fetch historical buyback data for charting

TransactionTable.tsx:

• Fetch recent transaction list with pagination

The application uses Tailwind CSS. Customize colors and theme in:

• tailwind.config.ts - Tailwind configuration
• app/globals.css - CSS variables and global styles

Update the TypeScript interfaces in components to match your API response:

interface Transaction {
  hash: string;
  timestamp: Date;
  tokens: number;
  value: number;
  price: number;
  status: "confirmed" | "pending";
}

MIT