Implementing NFT Collection Browsing in Mobile Application
The difference from displaying collections in a wallet is fundamental: here users browse others' collections, explore the marketplace, filter by attributes and price. This is closer to e-commerce with crypto specifics—infinite feed of thousands of tokens, complex filters, live pricing.
Data Sources for NFT Collection Browser
OpenSea API v2—richest source: collections, tokens, floor price, trading volumes, events (listings, sales). For public browsing without authentication—GET /api/v2/collection/{slug}/nfts with pagination by next cursor. Limitation: 4 req/sec on free plan.
Reservoir API—aggregates data from OpenSea, Blur, LooksRare, X2Y2. For apps with trading features, preferable: single endpoint for floor price and best offer across marketplaces.
Alchemy NFT API—getNFTsForCollection returns all collection tokens with metadata; getFloorPrice provides floor across marketplaces.
For Solana collections: Magic Eden API (/collections/{symbol}/listings) or Tensor API.
Pagination and Infinite Scroll
Collections like Bored Ape Yacht Club—10,000 tokens. Can't load all at once. OpenSea returns cursor-based pagination (next in response body). Implement via Paging 3 (Android) or custom PaginatedViewModel on iOS with AsyncSequence.
On Flutter: infinite_scroll_pagination package. Load next page at 80% scroll position, not at the very end—otherwise users see blank space.
Cache first page in Room/CoreData—next open shows instantly, data updates in background (stale-while-revalidate).
Filters and Attribute-Based Sorting
This is the most non-trivial part. NFT attributes—dynamic schema: one collection has Background, Fur, Eyes; another has Rarity, Element, Power. Structure unknown beforehand.
Approach: on first collection load, request getContractMetadata or /collection/{slug}/attributes—get list of trait types with variants and rarity. Build filter UI dynamically: ExpandableSection per trait, Checkbox list per value.
Filter by attributes server-side: OpenSea accepts trait_type/value as query params. Reservoir—JSON body with filter array. Local filtering only works if the entire collection is cached—impractical for 10K tokens.
Sorting: by price (asc/desc), by rarity (needs rarity score—calculate from attributes or fetch from rarity.tools API). By token number.
Detailed Token Card
Fast loading is critical. Image—immediately in maximum resolution, not after tap. Card structure:
- Media: image, animated GIF, video (AVPlayer / ExoPlayer), 3D (SceneKit / SceneView Flutter)
- Traits as chips with rarity percentage
- Current listing and best offer
- Price history (sparkline graph via Charts framework / MPAndroidChart)
- "Buy" button—if marketplace SDK integrated
Navigation to card—shared element transition: image from grid smoothly enlarges. iOS: UIViewControllerTransitioningDelegate + UIPresentationController. Android: sharedElementEnterTransition with Compose sharedBounds.
Timeline
Collection browser with search, attribute filtering, and detailed card—3–5 days. With trading integration (listing, buy)—1–2 weeks depending on marketplaces.