Интеграция Coinbase Wallet для подключения к сайту

Интеграция Coinbase Wallet для подключения к сайту

Coinbase Wallet — некастодиальный кошелёк от Coinbase, доступный как мобильное приложение и браузерный extension. Интеграция через Coinbase Wallet SDK позволяет пользователям Coinbase Wallet подключаться к веб-приложению.

Coinbase Wallet SDK

npm install @coinbase/wallet-sdk wagmi viem @tanstack/react-query

import { CoinbaseWalletSDK } from '@coinbase/wallet-sdk';
import { createPublicClient, createWalletClient, custom, http } from 'viem';
import { mainnet } from 'viem/chains';

const sdk = new CoinbaseWalletSDK({
  appName: 'My App',
  appLogoUrl: 'https://example.com/logo.png',
  appChainIds: [1, 137]  // mainnet, polygon
});

const provider = sdk.makeWeb3Provider();

// Подключение кошелька
async function connectCoinbaseWallet() {
  const accounts = await provider.request({ method: 'eth_requestAccounts' });
  const address = accounts[0];

  const walletClient = createWalletClient({
    account: address,
    chain: mainnet,
    transport: custom(provider)
  });

  return { address, walletClient };
}

Интеграция через Wagmi + Reown AppKit

Более современный подход — через унифицированный AppKit, который поддерживает Coinbase Wallet вместе с другими кошельками:

import { coinbaseWallet } from 'wagmi/connectors';

const wagmiConfig = createConfig({
  chains: [mainnet, polygon],
  connectors: [
    coinbaseWallet({
      appName: 'My App',
      preference: 'smartWalletOnly'  // или 'eoaOnly', 'all'
    }),
    metaMask(),
    walletConnect({ projectId })
  ],
  transports: {
    [mainnet.id]: http(),
    [polygon.id]: http()
  }
});

Smart Wallet (Coinbase Wallet v4)

Coinbase Smart Wallet — новый тип кошелька без seed-фразы на основе Passkey. Позволяет создать кошелёк без MetaMask и без seed-фразы:

import { CoinbaseWalletSDK } from '@coinbase/wallet-sdk';

const sdk = new CoinbaseWalletSDK({
  appName: 'My App',
  preference: {
    options: 'smartWalletOnly',  // только Smart Wallet
    keysUrl: 'https://keys.coinbase.com/connect'
  }
});

Авторизация через подпись

import { useConnect, useSignMessage, useAccount } from 'wagmi';
import { coinbaseWallet } from 'wagmi/connectors';

function CoinbaseLogin() {
  const { connect } = useConnect();
  const { address, isConnected } = useAccount();
  const { signMessageAsync } = useSignMessage();

  const handleLogin = async () => {
    if (!isConnected) {
      await connect({ connector: coinbaseWallet({ appName: 'My App' }) });
    }

    const nonce = await getNonce(address);
    const signature = await signMessageAsync({
      message: `Login to example.com\nNonce: ${nonce}`
    });

    const token = await verifySignature(address, signature);
    setToken(token);
  };

  return <button onClick={handleLogin}>Войти через Coinbase Wallet</button>;
}

Mobile Deep Link

На мобильных устройствах WalletConnect SDK автоматически открывает Coinbase Wallet app через deep link: cbwallet://wsegue?uri=...

Сроки

Интеграция Coinbase Wallet через Wagmi + авторизация — 2–3 дня.