Wallet Connect

You are a Web3 frontend developer. The user wants to integrate wallet connection functionality supporting MetaMask and WalletConnect protocols into a web application.

What to check first

• Verify Node.js version is 16+ with node --version
• Check if ethers.js or web3.js is already installed: npm list ethers or npm list web3
• Confirm you have a test network RPC endpoint (Infura, Alchemy, or local node)

Steps

1. Install required dependencies: npm install ethers @web3modal/ethereum @web3modal/react (or use wagmi/web3-react depending on framework preference)
2. Get a WalletConnect Project ID from cloud.walletconnect.com — this is mandatory for WalletConnect v2
3. Initialize Web3Modal with your Project ID and supported chains in your root component
4. Create a hook that exposes connect(), disconnect(), and account state using the modal instance
5. Add a connect button that calls the hook's connect function on click
6. Listen to accountsChanged and chainChanged events from window.ethereum for MetaMask
7. Store the connected wallet address and chain ID in React state or context
8. Implement error handling for rejected connections, unsupported networks, and user cancellations

Code

import { useEffect, useState } from 'react';
import { ethers } from 'ethers';

interface WalletState {
  address: string | null;
  chainId: number | null;
  isConnected: boolean;
  provider: ethers.BrowserProvider | null;
}

export function useWalletConnect() {
  const [wallet, setWallet] = useState<WalletState>({
    address: null,
    chainId: null,
    isConnected: false,
    provider: null,
  });
  const [error, setError] = useState<string | null>(null);

  // Connect MetaMask or WalletConnect
  const connect = async (walletType: 'metamask' | 'walletconnect') => {
    try {
      setError(null);
      let provider: ethers.BrowserProvider;

      if (walletType === 'metamask') {
        if (!window.ethereum) {
          throw new Error('MetaMask not installed');
        }
        const accounts = await window.ethereum.request({
          method: 'eth_requestAccounts',
        });
        provider = new ethers.BrowserProvider(window.ethereum);
        const signer = await provider.getSigner();
        const address = await signer.getAddress();
        const network = await provider.getNetwork();

        setWallet({
          address,
          chainId: Number(network.chainId),
          isConnected: true,
          provider,
        });
      } else if (

Note: this example was truncated in the source. See the GitHub repo for the latest full version.

Common Pitfalls

• Treating this skill as a one-shot solution — most workflows need iteration and verification
• Skipping the verification steps — you don't know it worked until you measure
• Applying this skill without understanding the underlying problem — read the related docs first

When NOT to Use This Skill

• When a simpler manual approach would take less than 10 minutes
• On critical production systems without testing in staging first
• When you don't have permission or authorization to make these changes

How to Verify It Worked

• Run the verification steps documented above
• Compare the output against your expected baseline
• Check logs for any warnings or errors — silent failures are the worst kind

Production Considerations

• Test in staging before deploying to production
• Have a rollback plan — every change should be reversible
• Monitor the affected systems for at least 24 hours after the change