WalletConnect Integration for Crypto Wallet Connection to Website

WalletConnect Integration for Connecting Crypto Wallet to Website

WalletConnect is an open protocol for connecting mobile crypto wallets to web applications. Unlike MetaMask (browser extension only), WalletConnect works with 400+ wallets via QR code or deep link.

WalletConnect v2 (AppKit)

Current version — Reown AppKit (formerly 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>
  );
}

Connect Button and Authorization

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

    // Authorization via signature
    const nonce = await fetch(`/api/auth/nonce?address=${address}`)
      .then(r => r.json()).then(d => d.nonce);

    const message = `Sign in to 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 ? `Sign in as ${address?.slice(0, 6)}...` : 'Connect Wallet'}
    </button>
  );
}

Project ID

WalletConnect v2 requires project registration on cloud.reown.com to get projectId. Free plan: up to 50,000 active users/month.

Supported Wallets

WalletConnect works with MetaMask Mobile, Trust Wallet, Rainbow, Coinbase Wallet, Ledger Live, Argent, Safe, and hundreds others. For mobile — QR code or universal link.

Timeline

Basic WalletConnect integration with authorization — 3–5 days.