Интеграция WalletConnect для подключения криптокошелька к сайту

Интеграция WalletConnect для подключения криптокошелька к сайту

Вы разработали dApp и столкнулись с проблемой: пользователи не могут залогиниться с мобильного кошелька. Браузерные расширения типа MetaMask не работают на телефонах, а встраивать каждый кошелёк отдельно — бесконечная головная боль. Мы решаем эту задачу через WalletConnect — открытый протокол, который за пару дней даёт подключение 400+ кошельков через QR-код или deep link. Ниже — как мы это делаем, с кодом и реальными конфигами. Если вы ищете готовое решение для Web3-аутентификации — свяжитесь с нами: мы реализуем интеграцию с учётом ваших требований.

Почему WalletConnect v2, а не v1?

WalletConnect v2 (через Reown AppKit) полностью заменил первую версию. Он быстрее: установка соединения занимает менее секунды против нескольких у v1. Поддерживает мультичейн: можно подключиться одновременно к Ethereum, Polygon и Arbitrum (до 5 сетей). И главное — встроенная авторизация через подпись сообщения (EIP-712). V1 больше не поддерживается и не рекомендован для новых проектов.

Как работает подключение кошелька?

Процесс выглядит так:

1. Пользователь нажимает «Подключить кошелёк».
2. Генерируется сессия WalletConnect, отображается QR-код или deep link.
3. Кошелёк пользователя сканирует QR, подписывает запрос на соединение.
4. dApp получает адрес кошелька и может запрашивать подписи транзакций.

Для авторизации мы дополнительно запрашиваем подпись сообщения (Sign-in with Ethereum): пользователь подписывает nonce, сервер проверяет подпись и выдаёт JWT-токен. Никаких паролей.

Как обеспечивается безопасность авторизации?

WalletConnect Protocol использует end-to-end шифрование и не хранит приватные ключи на сервере.

Авторизация через подпись nonce защищает от повторных атак. Nonce генерируется сервером, имеет короткий срок жизни (обычно 5 минут) и аннулируется после использования. Дополнительно можно настроить CORS-ограничения на стороне API.

Реализация на React + Wagmi (AppKit)

Устанавливаем пакеты:

npm install @reown/appkit @reown/appkit-adapter-wagmi wagmi [email protected] @tanstack/react-query 

Регистрируем проект на Reown Cloud (бесплатный план — до 50 000 активных пользователей в месяц). Получаем projectId.

Код подключения:

import { createAppKit } from '@reown/appkit/react'; import { WagmiProvider } from 'wagmi'; import { mainnet, polygon, arbitrum } from '@reown/appkit/networks'; import { WagmiAdapter } from '@reown/appkit-adapter-wagmi'; import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; const queryClient = new QueryClient(); const projectId = process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID; const networks = [mainnet, polygon, arbitrum]; const wagmiAdapter = new WagmiAdapter({ networks, projectId }); createAppKit({ adapters: [wagmiAdapter], networks, projectId, metadata: { name: 'My App', description: 'My Web3 Application', url: 'https://example.com', icons: ['https://example.com/icon.png'] }, features: { analytics: false, email: false, socials: false } }); function App() { return ( <WagmiProvider config={wagmiAdapter.wagmiConfig}> <QueryClientProvider client={queryClient}> <YourApp /> </QueryClientProvider> </WagmiProvider> ); } 

Кнопка подключения и авторизация

import { useAppKit, useAppKitAccount } from '@reown/appkit/react'; import { useSignMessage } from 'wagmi'; function ConnectButton() { const { open } = useAppKit(); const { address, isConnected } = useAppKitAccount(); const { signMessageAsync } = useSignMessage(); const handleLogin = async () => { if (!isConnected) { await open(); return; } // Авторизация через подпись const nonce = await fetch(`/api/auth/nonce?address=${address}`) .then(r => r.json()).then(d => d.nonce); const message = `Авторизация на example.com\nNonce: ${nonce}`; const signature = await signMessageAsync({ message }); const { token } = await fetch('/api/auth/web3', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ address, signature, message }) }).then(r => r.json()); setAuthToken(token); }; return ( <button onClick={handleLogin}> {isConnected ? `Войти как ${address?.slice(0, 6)}...` : 'Подключить кошелёк'} </button> ); } 

Настройка deep link для мобильных кошельков

Deep link позволяет открывать кошелёк напрямую с сайта на мобильном устройстве, минуя QR-код. Настраиваем universal link для iOS и intent для Android. В Reown Cloud включаем deep link в настройках проекта и указываем поддерживаемые схемы (например, wc:). Для корректной работы на Android требуется обработка intent через WalletConnectBridge.

Обработка ошибок соединения

Важно обрабатывать ошибки: отказ пользователя, таймаут, неподдерживаемая сеть. Wagmi AppKit предоставляет хуки useWalletInfo и useConnectionError. Мы добавляем fallback: если подключение не удалось, предлагаем выбор использовать браузерное расширение. Также логируем события для отладки.

Project ID

WalletConnect v2 требует регистрации проекта на Reown Cloud для получения projectId. Бесплатный план: до 50 000 активных пользователей/месяц. Этого достаточно для большинства стартапов. Если нужен большой объём, предусмотрены платные тарифы.

Поддерживаемые кошельки

WalletConnect работает с MetaMask Mobile, Trust Wallet, Rainbow, Coinbase Wallet, Ledger Live, Argent, Safe и сотнями других. Для мобильных — QR-код или universal link.

Сравнение планов Reown Cloud

Что входит в работу?

• Регистрация проекта и настройка API-ключей.
• Разработка компонента подключения кошелька (кнопка, модалка, обработка состояний).
• Реализация авторизации через подпись сообщения (Sign-in with Ethereum).
• Поддержка мультичейна (до 5 сетей).
• Документация по интеграции и инструкция для пользователя.
• Гарантия совместимости с основными кошельками.

Сроки

Базовая интеграция WalletConnect с авторизацией — 3–5 дней. Если нужна кастомная модалка, поддержка deep link или реферальные ссылки — до 2 недель. Оценим ваш проект бесплатно — свяжитесь, чтобы обсудить детали.

Получите консультацию по интеграции WalletConnect — обсудим ваш проект и предложим оптимальный план. Закажите интеграцию под ключ с гарантией совместимости: наши инженеры с многолетним опытом в блокчейне реализуют всё быстро и безопасно.