Sonar Tracker

��# Sonar Cryptocurrency Dashboard

A modern, real-time cryptocurrency dashboard with beautiful UI and smooth animations, built with React and styled-components.

Features

• Real-time Transaction Updates: Watch cryptocurrency transactions as they happen with automatic updates
• Filtering Capabilities: Filter transactions by minimum value
• Statistical Insights: View detailed transaction statistics with interactive charts
• Cryptocurrency News: Stay updated with the latest news for top trading cryptocurrencies
• Responsive Design: Fully responsive design that works on desktop, tablet, and mobile
• Modern UI/UX: Clean, intuitive interface with smooth animations and transitions

Pages

1. Dashboard: Monitor real-time transaction data with filtering capabilities
2. Statistics: View detailed analytics with charts and tables
3. News: Stay informed about market trends with cryptocurrency news

Technology Stack

• React
• React Router for navigation
• Styled-Components for styling
• Framer Motion for animations
• Chart.js for data visualization

Getting Started

1. Clone the repository
2. Install dependencies: npm install
3. Start the development server: npm start
4. Open http://localhost:3000 in your browser

Screenshots

• Dashboard with real-time transaction data
• Statistics page with charts and analysis
• News page with latest cryptocurrency articles

License

MIT

Supabase Integration

Server-only integration using Next.js App Router.

Environment variables (set in Vercel Project �! Settings �! Environment Variables):

• SUPABASE_URL (e.g., https://fwbwfvqzomipoftgodof.supabase.co)
• SUPABASE_SERVICE_ROLE (server only; never expose to client)

Server client:

• app/lib/supabaseAdmin.js  server-only Supabase client.

API route:

• GET /api/whales/latest  returns latest 100 rows from public.whale_transactions with cache headers.

Server page:

• /whales  SSR page rendering the latest transactions.

Security:

• Never expose SUPABASE_SERVICE_ROLE to the client.
• Prefer server components and API routes for data access.

Running tests

This repo uses two independent test suites:

• Vitest (unit/component)  covers ORCA orchestration, API routes, and React components under jsdom.
  • npm test  run the suite once.
  • npm run test:watch  re-run on change.
  • npm run test:ui  open the Vitest UI.
  • npm run test:coverage  produce a v8 coverage report (text + html + lcov).
• Signal-engine golden file regression  npm run test:engine runs scripts/test-signal-engine.mjs. It also runs automatically as the prebuild hook before next build.

Vitest is configured in vitest.config.ts. Test setup (jest-dom matchers, afterEach(cleanup), browser API stubs) lives in test/setup.ts.