Реализация отображения NFT-коллекций в мобильном кошельке
Пользователь подключает кошелёк и ожидает увидеть свои NFT с превью, именем и коллекцией. На практике метаданные часто лежат в IPFS с недоступным gateway, токены разбросаны по нескольким сетям (Ethereum, Polygon, Base, Arbitrum, Solana), а изображения варьируются от 10 КБ до 50 МБ — от обычных PNG до анимированных GIF, SVG и 3D-моделей GLB. Прямые вызовы tokenURI через RPC для каждого токена генерируют десятки параллельных запросов, на 50+ NFT это приводит к таймаутам и крашам. Мы решаем эти проблемы, агрегируя данные через специализированные API (Alchemy, Moralis, OpenSea) и оптимизируя загрузку медиа с помощью кеширования, fallback-шлюзов и мультисетевой фильтрации. Экономия на инфраструктуре достигает значительных сумм благодаря сокращению RPC-запросов и кешированию на клиенте. Наш опыт — более 5 лет в мобильной разработке, свыше 20 реализованных кошельков с поддержкой NFT. Получите консультацию по интеграции: мы подберём оптимальное решение под ваш стек.
Как мы загружаем NFT в 10 раз быстрее?
Для кошелька с 50+ NFT прямой RPC-вызов к ERC-721 (tokenURI, ownerOf) на каждый токен неприемлем. Используем следующие 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 DAS API для метаданных. Ответ агрегатора уже содержит media[0].gateway — нормализованный URL изображения, что исключает ручную обработку ipfs://. В одном из проектов с 1000 NFT на Ethereum и Polygon агрегация через Alchemy сократила время загрузки с 8 до 1.5 секунд. Это стало возможным благодаря параллельным запросам по 50 токенов за раз и fallback-шлюзам IPFS.
Как эффективно загружать NFT-медиа?
Часть NFT хранит метаданные и изображения на IPFS через ipfs:// схему. Публичные gateway (ipfs.io, cloudflare-ipfs.com, gateway.pinata.cloud) нередко лагают или недоступны. Решение: пробуем несколько gateway последовательно с таймаутом 3 секунды, показываем placeholder и подгружаем в фоне. Это повышает доступность медиа до 99%. Согласно IPFS documentation, использование агрегированных шлюзов снижает вероятность ошибки на 30%.
Для изображений типа SVG, animated GIF, 3D GLB — нужна отдельная обработка. SVG на iOS рендерится через SVGKit или WebView. GLB — через SceneKit/RealityKit или model-viewer в WebView. GIF — FLAnimatedImage (iOS) или Coil с GIF-декодером (Android).
| Формат | iOS | Android | Flutter |
|---|---|---|---|
| SVG | SVGKit, WebView | WebView | flutter_svg, WebView |
| GLB | SceneKit, RealityKit | model-viewer | model_viewer_3d |
| GIF | FLAnimatedImage | Coil | cached_network_image |
Сравнение API для загрузки NFT
| API | Поддержка сетей | Скорость ответа | Дополнительно |
|---|---|---|---|
| Alchemy NFT API | Ethereum, Polygon, Base, Arbitrum | ~300 мс | Нормализованные media URL |
| Moralis Web3 API | Ethereum, Polygon, BNB, Solana | ~400 мс | Поддержка Solana |
| OpenSea API v2 | Ethereum, Polygon, Klaytn | ~500 мс | Цены и floor price |
| QuickNode NFT API | Кастомные сети | ~350 мс | Гибкость RPC |
Почему важна мультисетевая поддержка?
Современный кошелёк должен работать с токенами на Ethereum, Polygon, Base, Arbitrum, Solana. Без агрегации данных пользователю придётся переключать сети вручную, что неудобно. Мы храним NFT локально в Room/CoreData/Hive с полем chainId. Фильтр меняет запрос к БД — никаких повторных сетевых запросов. Это ускоряет переключение сетей в 5 раз и снижает нагрузку на устройство.
Структура галереи и фильтрация
Группируем токены по коллекции (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.
Детальный экран токена
Показываем: изображение / видео / 3D, имя, коллекцию, описание, attributes (traits) в виде тегов с rarity процентами если API отдаёт. Ссылки на OpenSea/Blur/Magic Eden. История транзакций через getTransfersForToken API.
Что входит в работу
- Проектирование архитектуры хранения и кеширования NFT-данных
- Интеграция выбранного NFT API (Alchemy, Moralis, OpenSea, QuickNode)
- Обработка IPFS-шлюзов с fallback-механизмом
- Реализация галереи с секциями и мультисетевой фильтрацией
- Детальный экран токена с метаданными и историей
- Оптимизация загрузки медиа (кеширование, скелетоны)
- Тестирование на реальных устройствах (iOS 14+, Android 7+)
- Документация и передача исходного кода
- Поддержка после сдачи (1 месяц бесплатно)
Сроки: базовая галерея с поддержкой 2-3 сетей — 3-5 рабочих дней. Мультичейн с торговыми функциями — 1-2 недели. Бюджет рассчитывается индивидуально в зависимости от стека и объёмов. Свяжитесь с нами для оценки вашего проекта. Закажите разработку галереи NFT уже сегодня: получите быстрое отображение коллекций и снижение нагрузки на сервер.