Connect to Web3 Wallets Securely

This is a Web3 wallet-connector skill for building a provider-agnostic connection layer across MetaMask, WalletConnect, Coinbase Wallet, and similar providers, centered on a registry pattern that lets a dApp query which providers are actually available and connect to any of them through the same interface:

interface WalletProvider {
  id: string;
  name: string;
  icon: string;
  connect(): Promise<void>;
  isAvailable(): boolean;
}

class MultiWalletConnector {
  private providers: Map<string, WalletProvider> = new Map();

  constructor() {
    this.registerProvider(new MetaMaskProvider());
    this.registerProvider(new WalletConnectProvider());
    this.registerProvider(new CoinbaseWalletProvider());
  }

  registerProvider(provider: WalletProvider): void {
    this.providers.set(provider.id, provider);
  }

  getAvailableProviders(): WalletProvider[] {
    return Array.from(this.providers.values())
      .filter(provider => provider.isAvailable());
  }

  async connectWallet(providerId: string): Promise<void> {
    const provider = this.providers.get(providerId);
    if (!provider) {
      throw new Error(`Provider ${providerId} not found`);
    }
    
    await provider.connect();
  }
}

Each concrete provider implements the same WalletProvider interface - MetaMask checks window.ethereum?.isMetaMask, while WalletConnect (built on @walletconnect/client with a QR-code modal) is always reported available since it doesn't depend on a browser extension.

Use this skill when building the connection layer for a dApp that needs to support multiple wallet providers behind one interface, with proper connection-state management (address, provider, chainId, isConnecting, error), live event listeners for accountsChanged and chainChanged, and a React context and hook (useWallet) exposing connect, disconnect, and switchChain to the rest of the app. It also covers chain-switching with a fallback to wallet_addEthereumChain when the target network isn't yet added to the wallet, and connection persistence via localStorage so a returning user reconnects automatically on page reload. It is not a signature-verification or authentication skill - it's scoped to establishing and managing the wallet connection itself, so pair it with a separate auth flow such as SIWE if you need to prove wallet ownership server-side, not just connect to it client-side.

Input is the user's choice of wallet provider, from a filtered list of currently available ones; output is a connected wallet state - address, provider instance, and chain ID - kept in sync via provider event listeners, exposed to the rest of a React app through useWallet(), and persisted to localStorage under a saved-provider key for auto-reconnection.

Built on ethers.js (Web3Provider), @walletconnect/client with @walletconnect/qrcode-modal for WalletConnect, and React context and hooks for app-wide wallet state; designed to register additional providers, with Coinbase Wallet named explicitly, behind the same WalletProvider interface.

Web3 frontend developers building a dApp's wallet-connection layer who need multi-provider support, live account and chain-change handling, and connection persistence implemented consistently, rather than wiring each wallet provider's SDK separately.