Интеграция WalletConnect для подключения криптокошелька к сайту
Вы разработали dApp и столкнулись с проблемой: пользователи не могут залогиниться с мобильного кошелька. Браузерные расширения типа MetaMask не работают на телефонах, а встраивать каждый кошелёк отдельно — бесконечная головная боль. Мы решаем эту задачу через WalletConnect — открытый протокол, который за пару дней даёт подключение 400+ кошельков через QR-код или deep link. Ниже — как мы это делаем, с кодом и реальными конфигами. Если вы ищете готовое решение для Web3-аутентификации — свяжитесь с нами: мы реализуем интеграцию с учётом ваших требований.
Почему WalletConnect v2, а не v1?
WalletConnect v2 (через Reown AppKit) полностью заменил первую версию. Он быстрее: установка соединения занимает менее секунды против нескольких у v1. Поддерживает мультичейн: можно подключиться одновременно к Ethereum, Polygon и Arbitrum (до 5 сетей). И главное — встроенная авторизация через подпись сообщения (EIP-712). V1 больше не поддерживается и не рекомендован для новых проектов.
Как работает подключение кошелька?
Процесс выглядит так:
- Пользователь нажимает «Подключить кошелёк».
- Генерируется сессия WalletConnect, отображается QR-код или deep link.
- Кошелёк пользователя сканирует QR, подписывает запрос на соединение.
- dApp получает адрес кошелька и может запрашивать подписи транзакций.
Для авторизации мы дополнительно запрашиваем подпись сообщения (Sign-in with Ethereum): пользователь подписывает nonce, сервер проверяет подпись и выдаёт JWT-токен. Никаких паролей.
Как обеспечивается безопасность авторизации?
WalletConnect Protocol использует end-to-end шифрование и не хранит приватные ключи на сервере.
Авторизация через подпись nonce защищает от повторных атак. Nonce генерируется сервером, имеет короткий срок жизни (обычно 5 минут) и аннулируется после использования. Дополнительно можно настроить CORS-ограничения на стороне API.
Как генерируется nonce
Nonce — это одноразовая строка, генерируемая сервером с использованием криптостойкого генератора. Он имеет время жизни 5 минут и должен быть подписан пользователем. После проверки подписи nonce аннулируется.Реализация на 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.
| Кошелёк | Тип | Поддержка WalletConnect v2 |
|---|---|---|
| MetaMask Mobile | Мобильный | Да |
| Trust Wallet | Мобильный | Да |
| Rainbow | Мобильный | Да |
| Coinbase Wallet | Мобильный/Десктоп | Да |
| Ledger Live | Десктоп (через мобильный) | Да |
| Argent | Мобильный | Да |
| Safe | Мультиподпись | Да |
Сравнение планов Reown Cloud
| Характеристика | Бесплатный | Стартовый |
|---|---|---|
| Активные пользователи/мес | до 50 000 | до 500 000 |
| Количество проектов | 1 | 10 |
| Поддержка | Community | |
| Стоимость | Бесплатно | По запросу |
Что входит в работу?
- Регистрация проекта и настройка API-ключей.
- Разработка компонента подключения кошелька (кнопка, модалка, обработка состояний).
- Реализация авторизации через подпись сообщения (Sign-in with Ethereum).
- Поддержка мультичейна (до 5 сетей).
- Документация по интеграции и инструкция для пользователя.
- Гарантия совместимости с основными кошельками.
Сроки
Базовая интеграция WalletConnect с авторизацией — 3–5 дней. Если нужна кастомная модалка, поддержка deep link или реферальные ссылки — до 2 недель. Оценим ваш проект бесплатно — свяжитесь, чтобы обсудить детали.
Получите консультацию по интеграции WalletConnect — обсудим ваш проект и предложим оптимальный план. Закажите интеграцию под ключ с гарантией совместимости: наши инженеры с многолетним опытом в блокчейне реализуют всё быстро и безопасно.