feat: add price integration with configurable API source #137
Description
Summary
Add USD price display for tokens and native currencies, with user-selectable price API source in settings.
Features
1. Price Display Locations
- Address page: Balance in USD
- Transaction page: Value transferred in USD
- Token holdings: Token values in USD
- Gas estimator: Cost in USD
2. Settings - Price Source Selection
┌─────────────────────────────────────────┐
│ Settings > Price Source │
├─────────────────────────────────────────┤
│ Price API: [CoinGecko ▼] │
│ │
│ Options: │
│ ○ None (disable prices) │
│ ● CoinGecko (free, rate limited) │
│ ○ CoinMarketCap (API key required) │
│ ○ CryptoCompare (API key required) │
│ ○ DefiLlama (free) │
│ │
│ API Key: [________________] │
│ (Required for some providers) │
│ │
│ Currency: [USD ▼] │
│ Options: USD, EUR, GBP, JPY, CNY │
└─────────────────────────────────────────┘
3. Supported Price APIs
| Provider | Free Tier | Rate Limit | API Key |
|---|---|---|---|
| CoinGecko | Yes | 10-30/min | Optional |
| DefiLlama | Yes | Generous | No |
| CoinMarketCap | Limited | 333/day | Required |
| CryptoCompare | Yes | 100k/month | Required |
Recommendation: Default to CoinGecko or DefiLlama (free, no key required)
Technical Approach
Price Service Interface
interface PriceService {
getPrice(tokenAddress: string, chainId: number): Promise<number>;
getNativePrice(chainId: number): Promise<number>;
getBatchPrices(tokens: TokenRequest[]): Promise<Map<string, number>>;
}Caching Strategy
- Cache prices for 60 seconds
- Background refresh for frequently viewed tokens
- Stale-while-revalidate pattern
Token Price Mapping
// Map chain native currencies to CoinGecko IDs
const nativeCurrencyIds: Record<number, string> = {
1: 'ethereum',
137: 'matic-network',
56: 'binancecoin',
42161: 'ethereum', // Arbitrum uses ETH
10: 'ethereum', // Optimism uses ETH
8453: 'ethereum', // Base uses ETH
};Error Handling
- Graceful degradation if API unavailable
- Show "-" or hide USD values on error
- Rate limit handling with backoff
UI Components
Price Display Format
1.5 ETH ($3,750.00)
Loading State
1.5 ETH ($--.--) ← or hide USD until loaded
Settings Storage
- Store selected provider in localStorage
- Store API keys securely (consider encryption)
- Store currency preference
Acceptance Criteria
- Price source selection in Settings
- CoinGecko integration (default)
- DefiLlama integration
- API key input for premium providers
- Currency selection (USD, EUR, etc.)
- Price caching (60s)
- Native currency prices for all supported networks
- Token prices (ERC20)
- Graceful error handling
- "None" option to disable prices
Privacy Consideration
- Document that price APIs may log IP addresses
- Allow users to disable price fetching entirely
- Consider proxy option for privacy
Future Enhancements
- Historical price charts
- Price alerts
- Portfolio tracking