Интеграция 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 — обсудим ваш проект и предложим оптимальный план. Закажите интеграцию под ключ с гарантией совместимости: наши инженеры с многолетним опытом в блокчейне реализуют всё быстро и безопасно.