Розробка мобільного додатку для NFT-маркетплейсу

Розробка мобільного додатку для NFT-маркетплейса

NFT-маркетплейс на мобільному — це додаток з галереєю токенів, екранами колекцій, покупкою та продажем через смарт-контракти, інтеграцією Web3-гаманців. На відміну від звичайного e-commerce, кожна дія вимагає підпису транзакції — це принципово змінює UX. Користувач не натискає «Купити» — він підписує транзакцію в гаманці. Потрібно пояснювати цей процес зрозуміло, без втрати конверсії.

Стек: Web3 на мобільному

Два підходи до Web3-інтеграції:

1. Native SDK. Для iOS — web3.swift або Web3Core. Для Android — web3j. Повний контроль, нативна продуктивність, але більше коду при роботі з ABI та подіями смарт-контрактів.

2. WalletConnect v2 + WebView/React Native. Швидший шлях, особливо якщо команда знає Web3/React Native. WalletConnect v2 (sign protocol) працює через QR-код або deep link — підключає зовнішній гаманець (MetaMask Mobile, Trust Wallet, Rainbow).

Для повноцінного маркетплейса вибір залежить від пріоритетів. Нативний SDK дає кращий UX — не потрібно переключатися в сторонній гаманець для кожної підписи. WalletConnect — швидше в розробці.

Каталог NFT: завантаження метаданих

NFT-метаданих зберігаються на IPFS або в централізованому сховищі. URI доступний через tokenURI(tokenId) у ERC-721. Проблема: IPFS-шлюзи повільні, а завантаження 100 токенів колекції паралельно через IPFS може займати 10–30 секунд.

// Android — кешування метаданих NFT з Coil + OkHttp
val imageLoader = ImageLoader.Builder(context)
    .memoryCache {
        MemoryCache.Builder(context)
            .maxSizePercent(0.25) // 25% RAM
            .build()
    }
    .diskCache {
        DiskCache.Builder()
            .directory(context.cacheDir.resolve("nft_images"))
            .maxSizeBytes(500L * 1024 * 1024) // 500 MB
            .build()
    }
    .okHttpClient {
        OkHttpClient.Builder()
            .addInterceptor(IpfsGatewayInterceptor()) // замінює ipfs:// на https://
            .build()
    }
    .build()

IpfsGatewayInterceptor перехоплює URI вида ipfs://Qm... та підставляє швидкий шлюз — Cloudflare (cloudflare-ipfs.com), NFT.storage, або власний. Додай fallback: якщо перший шлюз не відповідає за 3 секунди — пробуй наступний.

Для колекцій від кількох тисяч токенів — не грузити метаданих напрямик з блокчейну. Використовувати індексатор: The Graph, Alchemy NFT API, Moralis, OpenSea API. Вони вже агрегували метаданих — час відповіді 50–200 мс замість 10+ секунд.

Колекції та профіль користувача

Екран колекції: сітка токенів (2–3 колонки), фільтри по traits (атрибутам), сортування по ціні/рідкості. Infinite scroll з prefetching — завантажуй наступну сторінку при досягненні 70%. Placeholder skeleton анімації поки грузяться зображення.

Профіль користувача: список NFT у гаманці (через Alchemy getNFTsForOwner або OpenSea account/:address/nfts), активні листинги, історія покупок.

Покупка NFT: flow транзакції

1. Користувач натискає «Купити»
2. Додаток викликає функцію смарт-контракту маркетплейса:
   marketplace.buyItem(nftContract, tokenId, { value: price })
3. WalletConnect відправляє запит підпису в гаманець
4. Користувач підтверджує в гаманці
5. Додаток очікує підтвердження транзакції (waitForTransaction)
6. Оновлює UI: NFT тепер належить покупцю

Крок 5 — критичний з точки зору UX. Транзакція може підтвердитися через 15 секунд, може — через 5 хвилин (при congestion мережі). Не блокуй користувача крутилкою: показуй TransactionHash, посилання на Explorer, та дозволяй піти — надішли push при підтвердженні.

Створення листингу, аукціон, офери

Три механіки продажу, кожна зі своїм смарт-контрактом flow:

Fixed Price: approve(marketplaceContract, tokenId) + listItem(price). Дві транзакції.

Auction (English Auction): створення аукціону з мінімальною ціною та дедлайном, ставки (placeBid), авто-видача переможцю при завершенні.

Offers: покупець робить оффер через ERC-20 permit або approve + makeOffer. Продавець приймає через acceptOffer.

Роялті та стандарти

ERC-2981 — стандарт роялті на рівні смарт-контракту. Виклик royaltyInfo(tokenId, salePrice) повертає адресу одержувача та суму роялті. Маркетплейс повинен урахувати це при розрахунку підсумкової суми та показати користувачу: «Із цієї суми X% роялті йде создавцу».

Часовий графік розробки

MVP з каталогом, покупкою по фіксованій ціні та профілем: 6–8 тижнів. Повноцінний маркетплейс з аукціонами, оферами, колекціями та рейтингами: 2–3 місяці.