wallet-integration

Wallet Integration Patterns

EIP-1193 Provider Standard

All wallets expose a standard provider interface:

interface EIP1193Provider {
  request(args: { method: string; params?: unknown[] }): Promise<unknown>;
  on(event: string, listener: (...args: any[]) => void): void;
  removeListener(event: string, listener: (...args: any[]) => void): void;
}

// Common methods:
await provider.request({ method: 'eth_requestAccounts' });
await provider.request({ method: 'eth_chainId' });
await provider.request({ method: 'personal_sign', params: [message, address] });
await provider.request({ method: 'eth_sendTransaction', params: [txParams] });

Wallet Connection with RainbowKit

import { ConnectButton } from '@rainbow-me/rainbowkit';

function Header() {
  return (
    <nav>
      <ConnectButton
        showBalance={true}
        chainStatus="icon"
        accountStatus="address"
      />
    </nav>
  );
}

Custom connect button:

import { ConnectButton } from '@rainbow-me/rainbowkit';

function CustomConnect() {
  return (
    <ConnectButton.Custom>
      {({ account, chain, openAccountModal, openChainModal, openConnectModal, mounted }) => {
        const connected = mounted && account && chain;
        if (!connected) {
          return <button onClick={openConnectModal}>Connect Wallet</button>;
        }
        if (chain.unsupported) {
          return <button onClick={openChainModal}>Wrong Network</button>;
        }
        return (
          <div>
            <button onClick={openChainModal}>{chain.name}</button>
            <button onClick={openAccountModal}>{account.displayName}</button>
          </div>
        );
      }}
    </ConnectButton.Custom>
  );
}

WalletConnect v2

import { walletConnect } from 'wagmi/connectors';

const wcConnector = walletConnect({
  projectId: process.env.NEXT_PUBLIC_WC_PROJECT_ID!,
  metadata: {
    name: 'My dApp',
    description: 'A great dApp',
    url: 'https://mydapp.xyz',
    icons: ['https://mydapp.xyz/icon.png'],
  },
  showQrModal: true,
});