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

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

WalletConnect — открытый протокол для подключения мобильных криптокошельков к веб-приложениям. В отличие от MetaMask (только браузерный extension), WalletConnect работает с 400+ кошельками через QR-код или deep link.

WalletConnect v2 (AppKit)

Актуальная версия — Reown AppKit (ранее Web3Modal v3):

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>
  );
}

Project ID

WalletConnect v2 требует регистрации проекта на cloud.reown.com для получения projectId. Бесплатный план: до 50 000 активных пользователей/месяц.

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

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

Сроки

Базовая интеграция WalletConnect с авторизацией — 3–5 дней.