Crypto Portfolio Tracker 🚀

A modern, multi-chain cryptocurrency portfolio tracker that allows you to monitor your digital assets across Bitcoin and Ethereum-based networks with a clean, privacy-first approach.

✨ Features

🌐 Multi-Chain Support: Bitcoin, Ethereum, Arbitrum, Polygon, Optimism, Base
📊 Real-time Portfolio Dashboard: Comprehensive overview with charts and analytics
💰 Balance Tracking: Fetch current balances and token holdings automatically
📋 Transaction History: View recent transactions across all supported networks
🕒 Recent Transactions: Cross-wallet transaction feed showing latest 20 transactions
🏷️ Token Support: Track popular tokens like USDC, USDT, WETH, ARB, and more
🎨 Modern UI: Clean interface built with Radix UI and Tailwind CSS
🔒 Privacy-First: Self-hosted solution - your data stays with you
🚀 Easy Setup: Get started in minutes with or without API keys
⚡ Rate Limit Handling: Smart error handling with retry mechanisms
📱 Responsive Design: Works perfectly on desktop and mobile

🌐 Supported Networks

Network	Symbol	Type	API Provider	Status
Bitcoin	BTC	Native	mempool.space	✅ Active
Ethereum	ETH	EVM	Alchemy	✅ Active
Arbitrum	ETH	L2	Alchemy	✅ Active
Polygon	MATIC	L2	Alchemy	✅ Active
Optimism	ETH	L2	Alchemy	✅ Active
Base	ETH	L2	Alchemy	✅ Active
Solana	SOL	Native	Alchemy	✅ Active

🪙 Supported Tokens

ERC-20 Tokens (Ethereum & L2s)

Token	Symbol	Category
USD Coin	USDC	Stablecoin
Tether	USDT	Stablecoin
Dai	DAI	Stablecoin
Wrapped Ethereum	WETH	Wrapped Asset
Wrapped Bitcoin	WBTC	Wrapped Asset
Wrapped Staked ETH	WSTETH	Liquid Staking
Staked Ether	stETH	Liquid Staking
Rocket Pool ETH	RETH	Liquid Staking
Chainlink	LINK	Oracle
Uniswap	UNI	DEX
Aave	AAVE	Lending
Curve DAO	CRV	DEX
Compound	COMP	Lending
Maker	MKR	Lending
Synthetix	SNX	Derivatives
1inch	1INCH	DEX Aggregator
Polygon (MATIC)	MATIC	L2 Native
Polygon Ecosystem	POL	Governance
Euler	EUL	Lending
Pendle	PENDLE	Yield Trading
Instadapp	INST	DeFi Infrastructure
Fluid	FLUID	DeFi Protocol

SPL Tokens (Solana)

Token	Symbol	Category
USD Coin	USDC	Stablecoin
Tether	USDT	Stablecoin
Wrapped Ethereum	WETH	Wrapped Asset
Wrapped Bitcoin	WBTC	Wrapped Asset
Wrapped SOL	SOL	Native Wrapped
Marinade SOL	mSOL	Liquid Staking
Lido Staked SOL	stSOL	Liquid Staking
BlazeStake SOL	bSOL	Liquid Staking
Jito Staked SOL	jitoSOL	Liquid Staking
Coinbase Wrapped BTC	cbBTC	Wrapped Asset
Jupiter	JUP	DEX
DUST Protocol	DUST	Gaming
Pyth Network	PYTH	Oracle
STEPN	GMT	Move-to-Earn
Orca	ORCA	DEX
Saber	SBR	Stableswap

Automatic token detection: The app automatically detects and displays any ERC-20/SPL tokens in your wallets, even if not listed above.

💡 Try It Out

Want to test the app? Here are some ideas to get started:

Public Addresses You Can Track

Vitalik Buterin (Ethereum founder) - 0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045
Coinbase CEO - 0x503828976D22510aad0201ac7EC88293211D23Da
Satoshi Era Wallet - 1A1zP1eP5QGefi2DMPTfTL5SLmv7DivfNa

Getting Started Ideas

🎯 Start with Bitcoin: No API key needed - just add any Bitcoin address
🔍 Explore famous wallets: Track well-known crypto addresses to see the UI
🚀 Test with your own: Add your wallet addresses for live portfolio tracking
📊 Mix networks: Try addresses from different blockchains (Bitcoin, Ethereum, Solana)
🏷️ Use tags: Organize wallets by categories (DeFi, Trading, Long-term, etc.)

Without API Keys

✅ Bitcoin tracking works immediately (uses public mempool.space API)
✅ App interface and all features are fully functional
⚠️ Ethereum/Solana balances will show as "not fetched" until you add Alchemy API key

🚀 Getting Started

Prerequisites

Node.js 18+
npm, yarn, or pnpm
(Optional) Alchemy API key for live Ethereum data

⚡ Quick Start

Option 1: Quick Start (Bitcoin tracking works immediately)

git clone https://github.com/nikkaroraa/portfolio-tracker.git
cd portfolio-tracker
npm install
npm run dev

Open http://localhost:3000 and add a Bitcoin address to start tracking!

Option 2: Full Setup with Live Data

Clone and install

git clone https://github.com/nikkaroraa/portfolio-tracker.git
cd portfolio-tracker
npm install

Configure environment
```
cp .env.example .env.local
```

Add your API keys (edit .env.local):

# Required for live Ethereum/Solana data
NEXT_PUBLIC_ALCHEMY_API_KEY=your_alchemy_api_key_here

# Optional: Database persistence (Supabase)
NEXT_PUBLIC_SUPABASE_URL=your_supabase_project_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key

# Authentication (see Authentication section below)
AUTH_REQUIRED=false  # Set to true for password protection

Start the app
```
npm run dev
```
Access the app Open http://localhost:3000

🔑 API Keys Setup

Alchemy API Key (Required for Live Data)

What it enables: Live balance and transaction data for Ethereum, Arbitrum, Polygon, Optimism, Base, and Solana networks.

Create Account: Visit alchemy.com and sign up for free
Create App:
- Click "Create new app"
- Choose "Ethereum" as chain (supports all EVM networks)
- Select "Mainnet" network
- Name your app (e.g., "Portfolio Tracker")
Get API Key: Copy your API key from the dashboard
Add to Environment: Paste into NEXT_PUBLIC_ALCHEMY_API_KEY in .env.local

Free Tier: 300M compute units/month (plenty for personal portfolio tracking)

Networks Supported: Ethereum, Arbitrum, Polygon, Optimism, Base, Solana

Supabase (Optional - for data persistence)

What it enables: Automatic backup of your wallet addresses and settings across devices.

Create Project: Visit supabase.com and create a new project
Get Credentials:
- Go to Settings → API
- Copy "Project URL" → NEXT_PUBLIC_SUPABASE_URL
- Copy "anon public key" → NEXT_PUBLIC_SUPABASE_ANON_KEY
Run Migrations: Set up database tables with npm run db:push

Without Supabase: Wallet data is stored in browser localStorage only.

Running Supabase Migrations

After setting up Supabase credentials, create the required database tables:

# Push migrations to your Supabase instance
npm run db:push

# Alternative: Manual SQL execution
# Copy the SQL from supabase/migrations/ files and run in Supabase SQL Editor

Available migration commands:

npm run db:push - Apply migrations to remote Supabase
npm run db:pull - Pull schema changes from remote
npm run db:reset - Reset local database
npm run db:status - Check connection status

📖 Usage Guide

Adding Wallets

Click the "Wallets" tab on the main page
Click "Add Address" to input your wallet addresses
Choose the appropriate blockchain network
Add tags and descriptions for organization

Portfolio Dashboard

View comprehensive analytics with charts and breakdowns
See total portfolio value across all networks
Track individual token holdings and their USD values
Monitor recent transactions across all wallets

Key Features

🔄 Real-time Updates: Refresh balances and transactions with one click
📊 Portfolio Analytics: Visual breakdown by chains and token holdings
🕒 Transaction Feed: Recent transactions across all your wallets
🏷️ Organization: Tag and categorize wallets for easy management

🏗️ Architecture

This app is built with modern web technologies for optimal performance and developer experience:

Tech Stack

Framework: Next.js 15 with React 19 and TypeScript
Styling: Tailwind CSS with Radix UI primitives
State Management: React Query for server state + React hooks for local state
Database: Optional Supabase for data persistence
APIs: Direct integration with blockchain providers

Data Sources

Provider	Networks	Rate Limits	Cost	Notes
mempool.space	Bitcoin	Public API	Free	No API key required
Alchemy	Ethereum + L2s + Solana	300M req/month	Free tier	Single API key for all networks

Bitcoin: Uses public mempool.space API - works immediately without any setup Ethereum & L2s: Requires Alchemy API key for live data
Solana: Uses Alchemy's Solana RPC for balance and transaction data

Key Components

AddressCard: Individual wallet display with real-time balance updates
PortfolioSummary: Comprehensive dashboard with analytics
RateLimitNotification: Smart error handling for API limits
DemoBanner: Demo mode indicator and controls

🛠️ Development

Commands

npm run dev          # Start development server with hot reload
npm run build        # Build for production
npm run start        # Start production server
npm run lint         # Run ESLint
npm run type-check   # TypeScript type checking

Project Structure

app/
├── components/          # React components
├── hooks/              # Custom React hooks
├── lib/                # Utility functions and configs
├── types/              # TypeScript type definitions
└── globals.css         # Global styles

components/ui/          # Reusable UI components (Radix UI)

🔒 Privacy & Security

This application is designed with privacy as a core principle:

Your Data Stays Private

✅ Self-hosted: Run on your own infrastructure
✅ Local storage: Data stored in your browser or your own database
✅ Privacy-focused analytics: Only basic page views via Vercel Analytics (no personal data)
✅ Open source: Full transparency - audit the code yourself

API Usage

Only blockchain APIs (Alchemy, mempool.space) are contacted for balance data
Your wallet addresses are only sent to these APIs to fetch balances
No personal information is ever transmitted
All API calls are made directly from your browser

Security Best Practices

Password protection for app access (optional)
No sensitive data stored in browser local storage
Environment variables for API keys
Rate limiting protection

🔐 Authentication

This app supports two deployment modes to suit different needs:

Demo/Public Mode

Perfect for showcasing or sharing with the community:

AUTH_REQUIRED=false

Personal/Private Mode

Secure your personal portfolio with password protection:

AUTH_REQUIRED=true
BASIC_AUTH_USER=your_username
BASIC_AUTH_PASSWORD=your_secure_password

How It Works

When AUTH_REQUIRED=true:

The app prompts for username/password via browser's native auth dialog
Credentials are validated against your environment variables
Works in both development and production environments

Deployment Examples

Vercel: Add environment variables in project settings

Demo: Only set AUTH_REQUIRED=false
Personal: Set all three auth variables

Local Development: Configure in .env.local

# Demo mode
AUTH_REQUIRED=false

# Personal mode
AUTH_REQUIRED=true
BASIC_AUTH_USER=admin
BASIC_AUTH_PASSWORD=mySecurePassword123

Security Tips

Use strong passwords (mix of letters, numbers, symbols)
Never commit .env.local to version control
Use different credentials for dev and production
Consider password managers for generating secure passwords

🤝 Contributing

We welcome contributions! Here's how to get started:

Fork the repository
Create a feature branch
```
git checkout -b feature/amazing-feature
```
Make your changes
- Follow the existing code style
- Add tests if applicable
- Update documentation as needed
Commit your changes
```
git commit -m 'Add amazing feature'
```
Push and create a PR
```
git push origin feature/amazing-feature
```

Development Guidelines

Use TypeScript for new components
Follow the existing folder structure
Test on multiple networks before submitting
Keep commits atomic and well-described

📋 Roadmap

Upcoming Features

🌟 Solana Support: Full Solana network integration
🔍 Advanced Analytics: Portfolio performance charts and metrics
📱 Mobile App: React Native companion app
🚨 Price Alerts: Custom notifications for portfolio changes
📊 Export Tools: CSV/PDF portfolio reports
🔗 DeFi Integration: Track LP positions and staking rewards

Integrations Planned

ENS (Ethereum Name Service) resolution
NFT portfolio tracking
Hardware wallet integration
Multi-user support for families/teams

📄 License

This project is open source and available under the MIT License.

⭐ Support

If you find this project helpful:

Give it a star ⭐
Share it with the crypto community
Contribute to the codebase
Report bugs and suggest features

Built with ❤️ for the crypto community

Name		Name	Last commit message	Last commit date
Latest commit History 49 Commits
app		app
components/ui		components/ui
lib		lib
public		public
supabase		supabase
.env.example		.env.example
.gitignore		.gitignore
CLAUDE.md		CLAUDE.md
README.md		README.md
components.json		components.json
eslint.config.mjs		eslint.config.mjs
middleware.ts		middleware.ts
next.config.ts		next.config.ts
package-lock.json		package-lock.json
package.json		package.json
postcss.config.mjs		postcss.config.mjs
tsconfig.json		tsconfig.json

nikkaroraa/portfolio-tracker

Folders and files

Latest commit

History

Repository files navigation