Реализация отображения NFT-коллекций в мобильном кошельке
Пользователь подключил кошелёк — и ожидает увидеть свои NFT с превью, именем и коллекцией. На практике: часть метаданных лежит в IPFS с недоступным gateway, часть токенов — в нескольких сетях одновременно, а изображения весят от 10 КБ до 50 МБ. Всё это нужно отобразить быстро и без краша.
Откуда брать данные NFT
Прямые RPC-вызовы к ERC-721 (tokenURI, ownerOf) на каждый токен — это десятки параллельных запросов. Для кошелька с 50+ NFT такой подход неприемлем. Используем агрегирующие API:
-
Alchemy NFT API (
getNFTsForOwner) — возвращает все NFT по адресу с метаданными и media URL, поддерживает Ethereum, Polygon, Base, Arbitrum - Moralis Web3 API — аналог, плюс поддержка Solana и BNB Chain
- OpenSea API v2 — актуально если приложение ориентировано на торговлю, даёт цены и floor price коллекции
- QuickNode NFT API — подходит для мультичейн-кошельков с кастомными RPC
Для Solana: getTokenAccountsByOwner через JSON-RPC + Metaplex getAssetsByOwner (DAS API) для метаданных.
Ответ агрегатора уже содержит media[0].gateway — нормализованный URL изображения, не сырой IPFS-хэш. Это важно: ipfs://Qm... нельзя загрузить напрямую в AsyncImage или Glide — нужен публичный gateway.
IPFS и ненадёжные медиа-URL
Часть NFT хранит метаданные и изображения на IPFS через ipfs:// схему. Публичные gateway (ipfs.io, cloudflare-ipfs.com, gateway.pinata.cloud) нередко лагают или недоступны. Решение: пробуем несколько gateway последовательно с таймаутом 3 секунды, показываем placeholder и подгружаем в фоне.
Для изображений типа SVG, animated GIF, 3D GLB — нужна отдельная обработка. SVG на iOS рендерится через SVGKit или WebView. GLB — через SceneKit/RealityKit или model-viewer в WebView. GIF — FLAnimatedImage (iOS) или Coil с GIF-декодером (Android).
Структура галереи и фильтрация
Группируем токены по коллекции (contractAddress + name). Отображаем секциями: название коллекции, количество токенов, floor price (если есть). Внутри секции — grid 2-3 колонки.
iOS: UICollectionViewCompositionalLayout с NSCollectionLayoutSection для секций + UICollectionViewDiffableDataSource для плавных обновлений. При первой загрузке показываем skeleton cells через UIView.animate.
Android: LazyVerticalGrid в Compose или RecyclerView с GridLayoutManager + ConcatAdapter для секций. Загрузка изображений — Coil с кешированием на диск (DiskCachePolicy.ENABLED).
Flutter: SliverGrid внутри CustomScrollView, изображения через cached_network_image с cacheManager.
Мультисетевая фильтрация
В кошельке, поддерживающем Ethereum + Polygon + Base, пользователь должен быстро переключаться между сетями. Храним NFT локально в Room/CoreData/Hive с полем chainId. Фильтр меняет запрос к БД — никаких повторных сетевых запросов.
Детальный экран токена
Показываем: изображение / видео / 3D, имя, коллекцию, описание, attributes (traits) в виде тегов с rarity процентами если API отдаёт. Ссылки на OpenSea/Blur/Magic Eden. История транзакций через getTransfersForToken API.
Сроки: реализация галереи NFT с поддержкой 2-3 сетей, метаданными и деталями токена — 3-5 рабочих дней. Мультичейн с торговыми функциями — 1-2 недели.