Реалізація перегляду NFT-колекцій у мобільному застосунку
Різниця між цією задачею та відображенням колекцій у гаманці принципова: тут користувач переглядає чужі колекції, досліджує маркетплейс, фільтрує за атрибутами та ціною. Це вже ближче до e-commerce з крипто-специфікою — нескінченна стрічка з тисячами токенів, складні фільтри та актуальні ціни.
Джерела даних для браузера NFT-колекцій
OpenSea API v2 — найбагатший джерело: колекції, токени, floor price, обсяги торгів, события (listings, sales). Для публічного браузингу без аутентифікації — GET /api/v2/collection/{slug}/nfts з пагінацією за next cursor. Обмеження: 4 req/sec на безплатному плані.
Reservoir API — агрегує дані з OpenSea, Blur, LooksRare, X2Y2. Для застосунків з торговими функціями переважніше: єдиний endpoint для floor price та best offer незалежно від маркетплейса.
Alchemy NFT API — getNFTsForCollection повертає всі токени колекції з метаданими; getFloorPrice видає floor за маркетплейсами.
Для Solana-колекцій: Magic Eden API (/collections/{symbol}/listings) або Tensor API.
Пагінація та нескінченний скролл
Колекції типу Bored Ape Yacht Club — 10 000 токенів. Завантажувати всю одночасно неможливо. OpenSea повертає cursor-based pagination (next у тілі відповіді). Реалізуємо через Paging 3 (Android) або власний PaginatedViewModel на iOS з AsyncSequence.
На Flutter: пакет infinite_scroll_pagination. Підгрузка наступної сторінки при досяганні 80% списку, не при самому кінці — інакше користувач бачить пусте місце.
Кеш першої сторінки в Room/CoreData — при наступному відкритті екран з'являється миттєво, дані оновлюються у фоні (stale-while-revalidate).
Фільтри та сортування за атрибутами
Це найнетривіальніша частина. Атрибути NFT — динамічна схема: у однієї колекції Background, Fur, Eyes, у іншої — Rarity, Element, Power. Структура невідома заздалегідь.
Підхід: при першому завантаженні колекції запитуємо getContractMetadata або /collection/{slug}/attributes — отримуємо список trait-типів з варіантами та rarity. Будуємо UI фільтрів динамічно: ExpandableSection на trait-тип, Checkbox list на значення.
Фільтрація за атрибутами на стороні API: OpenSea приймає trait_type/value як query params. Reservoir — JSON body з масивом фільтрів. Локальна фільтрація працює тільки якщо всю колекцію вже завантажили у кеш — для 10К токенів це нереально.
Сортування: за ціною (asc/desc), за rarity (потрібен rarity score — або рахуємо самі з атрибутів, або беремо з rarity.tools API). За номером токена.
Детальна карточка токена
Швидка загрузка критична. Зображення — одразу у максимальному розрізненні, не після тапу. Структура карточки:
- Медіа: зображення, анімований GIF, відео (AVPlayer / ExoPlayer), 3D (SceneKit / SceneView Flutter)
- Traits у вигляді чипів з процентом редкості
- Поточний листинг та best offer
- Історія цін (sparkline-графік через Charts framework / MPAndroidChart)
- Кнопка «Купити» — якщо інтегрований маркетплейс SDK
Перехід до карточки — shared element transition: зображення з грида плавно збільшується. iOS: UIViewControllerTransitioningDelegate + UIPresentationController. Android: sharedElementEnterTransition з Compose sharedBounds.
Терміни
Браузер колекцій з пошуком, фільтрами за атрибутами та детальною карточкою — 3–5 днів. З інтеграцією торгових функцій (listing, buy) — 1–2 тижні залежно від маркетплейсів.