Разработка мобильного приложения для 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, ссылку на Etherscan, и позволяй уйти — прислать 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 месяца.