Mobula Crypto Portfolio Dashboard

A production-ready, single-page portfolio dashboard powered by the Mobula API. Built with vanilla HTML, CSS, and JavaScript — no frameworks, no build step.

Designed as a client showcase for fintech developers and DeFi teams evaluating Mobula as their data provider.

Features

1. Token Input + Batch Fetch

• Comma-separated symbols (BTC, ETH, SOL) or contract addresses (0x…)
• Parallel fetch using Promise.allSettled — all tokens load simultaneously
• Loading skeletons while fetching
• Quick-add chips: Top 5, Top 10, DeFi Pack, BTC·ETH·SOL

2. Live Price Table

• Sortable by all columns: name, price, 24h%, volume, market cap, chain, portfolio %
• Green/red badges for 24h price change
• Auto-refresh every 60 seconds with animated countdown ring
• Per-row error chips for unknown tokens (dismissible, non-crashing)

3. Portfolio Allocation Donut Chart

• Chart.js donut showing market-cap weight per token
• Hover a chart segment → highlights the matching table row
• Hover a table row → highlights the matching chart segment
• Total portfolio market cap displayed in the chart center
• Live legend with allocation percentages

4. Chain Filter + Search

• Toggle buttons: All / Ethereum / BNB / Solana / Polygon
• Live search input filtering by name or symbol
• Filters combine — e.g. "Ethereum + USDC" shows only USDC on Ethereum

5. Wallet Import

• Paste any EVM (0x…) or Solana wallet address
• Fetches all holdings via GET /api/1/wallet/portfolio
• Filters out dust tokens (< $1 value) automatically
• Shows wallet total value, token count, and truncated address
• Each imported token shows WALLET badge + real balance + USD value
• Portfolio % uses actual USD balance weight for wallet tokens

6. API Key Management

• Header input field stored in sessionStorage (never hardcoded)
• Green/red status indicator dot
• Clear error banner with link to mobula.io if key is missing or invalid

7. Export CSV / JSON

• Export button in the table toolbar with dropdown
• CSV includes: Name, Symbol, Price, 24h%, Volume, Market Cap, Chain, Portfolio%, Balance, Balance USD
• JSON exports clean objects with wallet source if applicable
• Filename includes date: mobula-portfolio-2026-05-01.csv

Getting Started

1. Clone the repo

   git clone https://github.com/Kevinelectronics/MobulaCryptoTracker.git
   cd MobulaCryptoTracker

2. Open index.html in any modern browser — no server, no build step required.

3. Get a Mobula API key at mobula.io and paste it into the header field.

4. Try it:

   • Type BTC, ETH, SOL and click Fetch Data
   • Or paste a wallet address like Vitalik's (0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045) and click Import Wallet

API Endpoints Used

Endpoint	Purpose
GET /api/1/market/data?symbol=BTC	Single token market data by ticker
GET /api/1/market/data?asset=0x…	Single token by contract address
GET /api/1/wallet/portfolio?wallet=0x…	Full wallet holdings with balances

Authentication: Authorization: YOUR_API_KEY header.

Tech Stack

• Vanilla HTML/CSS/JS — zero dependencies, zero build tooling
• Chart.js 4.4 via CDN — donut chart
• Mobula API — real-time multi-chain market and wallet data

Project Structure

MobulaCryptoTracker/
└── index.html   # entire app — styles, markup, and logic in one file

Demo Wallets

Address	Description
0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045	Vitalik Buterin — large multi-token portfolio

License

MIT — free to use, fork, and adapt.

---

Built with Mobula API · Get your free API key