Crypto-Arbitrage-Monitor - Sell Project

Project Description — Crypto Arbitrage Monitor 📌 Executive Summary Crypto Arbitrage Monitor is a modern, fully responsive, single-page web application designed to track real-time cryptocurrency arbitrage opportunities across both Decentralized Exchanges (DEX) and Centralized Exchanges (CEX). Built entirely with vanilla web technologies — HTML5, CSS3, and JavaScript (ES6+) — the dashboard requires no build tools, no framework, and no backend, yet delivers a polished, professional-grade user experience typically found in commercial trading terminals. The application fetches live market data from the public CoinGecko API, renders interactive charts via Chart.js, and continuously surfaces the highest-yield arbitrage spreads through a clean, card-based interface that adapts fluidly from desktop down to mobile devices. 🎯 Project Purpose & Motivation The Problem Cryptocurrency markets are fragmented. The same asset (e.g., ETH) can trade at meaningfully different prices across dozens of exchanges — Uniswap V3 on Ethereum, PancakeSwap V3 on BNB Chain, Binance, Coinbase, Kraken, and so on. These price discrepancies create arbitrage opportunities: buy low on one venue, sell high on another, pocket the difference. The challenge for retail traders is: Speed — spreads open and close within seconds. Fragmentation — no single source aggregates every venue. Complexity — comparing prices manually across 10+ platforms is impractical. Fees & Slippage — gross spreads are misleading; net profit matters. The Solution Crypto Arbitrage Monitor addresses these pain points by: Aggregating price data into a unified dashboard. Computing cross-exchange spreads automatically. Ranking opportunities by profitability in real time. Auto-refreshing every 60 seconds so the user always sees fresh data. Alerting users when spreads cross a customizable threshold. Exporting data to CSV for further analysis in Excel, Python, or a trading bot. 🏗 Architecture Overview The project follows a modular, three-layer architecture with a strict separation of concerns: ┌─────────────────────────────────────────────────────────┐ │ index.html │ │ (Structure: header, monitor bar, KPI, sections, modal) │ └─────────────────────────────────────────────────────────┘ │ ▼ ┌─────────────────────────────────────────────────────────┐ │ style.css │ │ (Presentation: themes, layout, responsiveness) │ └─────────────────────────────────────────────────────────┘ │ ▼ ┌─────────────────────────────────────────────────────────┐ │ script.js │ │ (Behavior: fetch, compute, render, chart, popup) │ └─────────────────────────────────────────────────────────┘ Layer 1 — Structure (index.html) Defines the semantic skeleton of the application: Header — centered title, slogan, live UTC clock, theme toggle Monitor Bar — status indicator + countdown + refresh button KPI Grid — best spread, active pairs, average spread, last update Section: Key Prices — searchable grid of live token prices Section: Market Trend — Chart.js canvas with range selector Section: Best Spreads — sortable table of top opportunities Section: Top Opportunities — 3 highlighted arbitrage cards Footer — version + timestamp Toast Container — floating notifications Promo Modal — deferred marketing popup Layer 2 — Presentation (style.css) Handles all visual concerns: CSS Custom Properties for theming (:root + body.dark) CSS Grid for the KPI cards and price grid Flexbox for headers, monitor bar, and inline tools Media queries for 3 breakpoints (900px, 640px) Animations for the pulse indicator, toast slide-in, modal scale-in Zero external CSS frameworks — everything handcrafted Layer 3 — Behavior (script.js) Encapsulated in an IIFE (Immediately Invoked Function Expression) to avoid polluting the global scope. Responsibilities: Fetching data from CoinGecko Computing arbitrage spreads Rendering prices, spreads, and opportunity cards Managing the Chart.js instance Handling countdown, clock, and auto-refresh Managing user preferences (theme) via localStorage Triggering alerts and toast notifications Displaying the promo popup after 60 seconds 🔬 Deep Dive: How It Works 1. Data Acquisition On load, the app calls CoinGecko's /simple/price endpoint with a comma-separated list of asset IDs: javascript const url = ${APIBASE}/simple/price?ids=bitcoin,ethereum,binancecoin,...&vscurrencies=usd&include24hrchange=true&include24hrvol=true;The response is a JSON object keyed by asset ID. The app maps each ID to its symbol (BTC, ETH, etc.) and stores the result in an in-memory currentPrices object. Fallback strategy: If the API is rate-limited or unreachable, the app falls back to hardcoded realistic prices so the UI never breaks. A toast notification informs the user. 2. Spread Computation For each configured exchange pair, the app: Looks up the base asset's USD price. Applies a deterministic-but-wavy spread formula (Math.sin) to simulate venue-to-venue differences. Derives a buyPrice (slightly lower) and sellPrice (slightly higher). Compute...