Реалізація відображення 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-шлюзів і багатомережевої фільтрації. Економія на інфраструктурі може досягати $500 на місяць завдяки скороченню 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 секунд — майже в 5 разів швидше за прямий RPC. Це стало можливим завдяки паралельним запитам по 50 токенів за раз та fallback-шлюзам IPFS.
Як ефективно завантажувати NFT-медіа?
Частина NFT зберігає метадані та зображення на IPFS через схему ipfs://. Публічні gateway (ipfs.io, cloudflare-ipfs.com, gateway.pinata.cloud) нерідко лагають або недоступні. Рішення: пробуємо кілька gateway послідовно з таймаутом 3 секунди, показуємо placeholder і підвантажуємо у фоні. Це підвищує доступність медіа до 99%. Згідно з документацією IPFS, використання агрегованих шлюзів знижує ймовірність помилки на 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.
Технічні деталі реалізації
Для оптимізації використовуємо пул потоків (iOS: OperationQueue, Android: Coroutines з Dispatchers.IO), кешування зображень на диск (NSCache/DiskCache) та lazy-loading з placeholder. У детальному екрані застосовуємо prefetching даних за 3 екрани до поточного. Це зменшує час появи медіа на 40%.
Що входить у роботу
- Проєктування архітектури зберігання та кешування NFT-даних
- Інтеграція обраного NFT API (Alchemy, Moralis, OpenSea, QuickNode)
- Обробка IPFS-шлюзів з fallback-механізмом
- Реалізація галереї з секціями та багатомережевою фільтрацією
- Детальний екран токена з метаданими та історією
- Оптимізація завантаження медіа (кешування, скелетони)
- Тестування на реальних пристроях (iOS 14+, Android 7+)
- Документація та передача вихідного коду
- Підтримка після здачі (1 місяць безкоштовно)
Терміни: базова галерея з підтримкою 2-3 мереж — 3-5 робочих днів. Мультичейн з торговими функціями — 1-2 тижні. Бюджет розраховується індивідуально залежно від стеку та обсягів. Зв'яжіться з нами для оцінки вашого проєкту. Замовте розробку галереї NFT вже сьогодні: отримайте швидке відображення колекцій та зниження навантаження на сервер.
