Інтеграція 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: `Войти на 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 дні.