Інтеграція 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 днів.