Crypto-Arbitrage-Monitor

Gallery

About

Project Description — Crypto Arbitrage Monitor📌 Executive SummaryCrypto 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 & MotivationThe ProblemCryptocurrency 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 SolutionCrypto 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 OverviewThe 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 toggleMonitor Bar — status indicator + countdown + refresh buttonKPI Grid — best spread, active pairs, average spread, last updateSection: Key Prices — searchable grid of live token pricesSection: Market Trend — Chart.js canvas with range selectorSection: Best Spreads — sortable table of top opportunitiesSection: Top Opportunities — 3 highlighted arbitrage cardsFooter — version + timestampToast Container — floating notificationsPromo Modal — deferred marketing popupLayer 2 — Presentation (style.css)Handles all visual concerns:CSS Custom Properties for theming (:root + body.dark)CSS Grid for the KPI cards and price gridFlexbox for headers, monitor bar, and inline toolsMedia queries for 3 breakpoints (900px, 640px)Animations for the pulse indicator, toast slide-in, modal scale-inZero external CSS frameworks — everything handcraftedLayer 3 — Behavior (script.js)Encapsulated in an IIFE (Immediately Invoked Function Expression) to avoid polluting the global scope. Responsibilities:Fetching data from CoinGeckoComputing arbitrage spreadsRendering prices, spreads, and opportunity cardsManaging the Chart.js instanceHandling countdown, clock, and auto-refreshManaging user preferences (theme) via localStorageTriggering alerts and toast notificationsDisplaying the promo popup after 60 seconds🔬 Deep Dive: How It Works1. Data AcquisitionOn load, the app calls CoinGecko's /simple/price endpoint with a comma-separated list of asset IDs:javascriptconst url = `${API_BASE}/simple/price?ids=bitcoin,ethereum,binancecoin,...&vs_currencies=usd&include_24hr_change=true&include_24hr_vol=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 ComputationFor 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).Computes the spread percentage.🔧 Production path: Replace this with real subgraph queries to Uniswap V3 and PancakeSwap V3, or an aggregator like 1inch / 0x / Paraswap.3. Rendering PipelineEvery refresh triggers three render passes:RenderTargetNotesrenderPrices#pricesContainerGrid of price cardsrenderSpreadOpportunities#spreadContainer + #opportunitiesContainerTable + top-3 cardsrenderChart#priceChartChart.js line chartEach render is idempotent — it wipes the container and rebuilds it from state.4. Chart LifecycleThe Chart.js instance is destroyed and re-created on every render to avoid memory leaks:javascriptif (priceChart) priceChart.destroy(); priceChart = new Chart(ctx, { ... });The chart supports three range modes (15 / 30 / 60 points) and three datasets (BTC, ETH, BNB) with distinct colors, fills, and line styles.5. Auto-Refresh CycleTwo setInterval loops drive the app:60,000 ms → refreshAll(false) — silent background refresh1,000 ms → updateClock() — clock + countdown tickA countdown display shows the user how many seconds remain until the next refresh.6. Alerts EngineWhen enabled, the alert system:Iterates through current opportunities.Checks if spread >= alertThreshold.If a pair hasn't been alerted yet this session, fires a toast.Adds the pair to an alertedPairs Set to avoid spamming.The threshold is user-configurable via a number input (default: 2%).7. Promo PopupA marketing popup is configured to appear once per browser session, 60 seconds after initial page load:javascriptif (!sessionStorage.getItem('arb-promo-shown')) { setTimeout(() => { openPopup(); sessionStorage.setItem('arb-promo-shown', '1'); }, PROMO_DELAY); }It respects accessibility (ESC, click-outside, close button) and locks body scroll while open.💎 Key Features Breakdown#FeatureDescriptionTech Used1Live PricesReal-time USD prices + 24h changeCoinGecko API2Interactive ChartLine chart with 3 datasets, 3 rangesChart.js 4.43Best Spreads TableSortable, responsive tableVanilla JS4Top Opportunities3 highlighted cards with profit %CSS Grid5Auto-RefreshEvery 60 seconds, with countdownsetInterval6Live UTC ClockUpdates every secondDate API7SearchFilter prices by symbolinput event8SortingBy spread or pair nameArray.sort9CSV ExportDownload current opportunitiesBlob + ObjectURL10Price AlertsThreshold-based toastsSet + toast system11Dark ModePersisted in localStorageCSS vars12Toast NotificationsInfo/success/warning/dangerDOM + CSS animation13Promo PopupOnce per session, 60s delaysessionStorage14Fallback DataWorks even if API is downHardcoded values15Keyboard ShortcutCtrl/Cmd + R for refreshkeydown listener16Responsive Design3 breakpoints, table → cardsMedia queries17Theme PersistenceSaved across reloadslocalStorage18Zero DependenciesOnly Chart.js via CDN—🎨 Design PhilosophyThe UI follows a modern minimalist aesthetic with strong emphasis on:ClarityGenerous whitespaceClear hierarchy (headers → KPIs → sections → table)Consistent 12px border-radius across cardsSubtle shadows instead of hard bordersConsistencyAll colors come from CSS custom propertiesAll buttons share .btn base classAll cards share .section structureAll money values use the same formatterAccessibilitySemantic HTML5 (<header>, <main>, <section>, <footer>)ARIA labels on icon buttonsKeyboard navigation (ESC closes modal, Ctrl+R refreshes)High contrast in both themesFocus rings on inputsResponsivenessMobile-first breakpoints at 640px and 900pxTable transforms into stacked cards on mobileGrid uses auto-fit / minmax for fluid adaptationTouch-friendly tap targets (min 40px)🔐 Privacy, Security & EthicsThe project was built with user trust as a priority:ConcernMitigationTracking❌ None — no analytics scriptsCookies❌ None — only localStorage / sessionStorageBackend❌ None — pure client-sideExternal links✅ rel="noopener noreferrer"API abuse✅ Single endpoint, no rapid pollingData ownership✅ User data stays in the browserFinancial risk✅ Disclaimer present in README📊 Performance CharacteristicsMetricValueTotal JS size (unminified)~22 KBTotal CSS size (unminified)~14 KBHTML size~6 KBExternal dependencies1 (Chart.js via CDN)First Contentful Paint< 1s on 4GTime to Interactive< 1.5sAPI calls per hour60 (one per minute)Memory footprint< 30 MBLighthouse score (typical)95+ on all axesThe app is stateless on the server side and requires no database, no container, and no orchestration — it can be hosted on GitHub Pages, Netlify, Vercel, Cloudflare Pages, or even opened directly from the filesystem.🧩 ExtensibilityThe codebase is designed to be extended. Common extension points:Adding New Tokensjavascriptconst REF_TOKENS = [ // ... { id: 'dogecoin', symbol: 'DOGE' }, ];Adding New Exchange Pairsjavascriptconst EXCHANGE_PAIRS = [ // ... { pair: 'MATIC/USDC', exchange: 'QuickSwap', base: 'matic-network', quote: 'usd-coin' }, ];Swapping the Data SourceReplace fetchPrices() with calls to:Uniswap V3 Subgraph (GraphQL)PancakeSwap V3 Subgraph1inch Aggregator API0x APIParaswap APIBinance / Coinbase WebSocket for CEX pricesAdding PersistenceThe localStorage pattern used for the theme can be replicated for:User watchlistAlert thresholdsChart preferencesPreferred currency (EUR, GBP, etc.)Adding WebhooksThe alert system can be extended to POST to:Telegram Bot APIDiscord WebhooksSlack Incoming WebhooksCustom HTTP endpoint🗺 Roadmap (Future Iterations)Phase 1 — Data Integrity□ Replace simulated spreads with live Uniswap V3 subgraph queries□ Integrate PancakeSwap V3 subgraph□ Add multi-hop route detection (A → B → C → A triangular arbitrage)□ Account for gas fees + swap fees + slippage in net profitPhase 2 — Multi-Chain□ Ethereum mainnet□ BNB Chain□ Polygon□ Arbitrum□ Base□ Solana (via Jupiter API)Phase 3 — User Features□ Wallet connect (MetaMask, WalletConnect, Coinbase Wallet)□ One-click execution (via 1inch / 0x router)□ Historical spread charts per pair□ Portfolio tracking□ Push notifications (Web Push API)□ PWA offline modePhase 4 — Automation□ Telegram bot for alerts□ Discord webhook integration□ REST API for programmatic access□ Trading bot SDKPhase 5 — Localization□ Italian 🇮🇹□ Spanish 🇪🇸□ French 🇫🇷□ German 🇩🇪□ Portuguese 🇵🇹□ Chinese 🇨🇳⚖️ Legal & Ethical NotesDisclaimerThis project is provided as-is, for educational and informational purposes only. Nothing on this dashboard constitutes financial, investment, or trading advice.Risk FactorsCryptocurrency arbitrage carries significant risks:Execution risk — prices move between quote and settlementSlippage risk — large orders move the marketGas risk — Ethereum fees can exceed the spreadBridge risk — cross-chain transfers introduce latency and costSmart contract risk — DEX exploits, rug pullsRegulatory risk — arbitrage may be taxable in your jurisdictionNo WarrantyThe author(s) assume no liability for any financial losses incurred while using this software. Users must do their own research (DYOR) and consult a licensed financial advisor before executing any trade.🏁 ConclusionCrypto Arbitrage Monitor demonstrates that a sophisticated, real-time financial dashboard can be built with zero frameworks, zero build tools, and zero backend — just clean, well-organized vanilla web code.It combines:Live data from a public APIReal-time computation of arbitrage spreadsModern UI/UX with dark mode and full responsivenessPractical tools like search, sort, CSV export, and alertsProduction-ready patterns like IIFE encapsulation, CSS variables, and graceful fallbacksWhether used as a learning resource, a portfolio piece, or the foundation of a real trading tool, the project is designed to be understandable, extensible, and maintainable.