Интеграция ConnectKit для подключения кошелька на сайте

Интеграция ConnectKit для подключения кошелька на сайте

ConnectKit от Family — альтернатива RainbowKit с акцентом на визуальную полировку и accessibility. Более строгий дизайн по умолчанию, встроенные анимации, поддержка ENS-аватаров из коробки. Стек тот же: wagmi + viem + React.

Установка

npm install connectkit wagmi viem @tanstack/react-query

Базовая настройка

// app/providers.tsx
'use client';
import { ConnectKitProvider, getDefaultConfig } from 'connectkit';
import { createConfig, WagmiProvider } from 'wagmi';
import { mainnet, polygon, optimism } from 'wagmi/chains';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

const config = createConfig(
  getDefaultConfig({
    chains: [mainnet, polygon, optimism],
    transports: {
      [mainnet.id]: http(process.env.ETH_RPC_URL!),
      [polygon.id]: http(process.env.POLYGON_RPC_URL!),
      [optimism.id]: http(process.env.OPTIMISM_RPC_URL!),
    },
    walletConnectProjectId: process.env.NEXT_PUBLIC_WC_PROJECT_ID!,
    appName: 'MyApp',
    appDescription: 'DeFi platform',
    appUrl: 'https://myapp.com',
    appIcon: 'https://myapp.com/icon.png',
  }),
);

const queryClient = new QueryClient();

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        <ConnectKitProvider>
          {children}
        </ConnectKitProvider>
      </QueryClientProvider>
    </WagmiProvider>
  );
}

import { ConnectKitButton } from 'connectkit';

export function Header() {
  return (
    <header>
      <ConnectKitButton />
    </header>
  );
}

Кастомизация темы

ConnectKit поддерживает встроенные темы и кастомные CSS-переменные:

// Встроенные темы
<ConnectKitProvider theme="auto">      {/* следует системной теме */}
<ConnectKitProvider theme="dark">
<ConnectKitProvider theme="light">
<ConnectKitProvider theme="retro">     {/* пиксельный стиль */}
<ConnectKitProvider theme="midnight">  {/* тёмный с синим акцентом */}
<ConnectKitProvider theme="web95">     {/* Windows 95 style */}

Кастомные переменные через customTheme:

<ConnectKitProvider
  customTheme={{
    '--ck-font-family': '"Inter", sans-serif',
    '--ck-border-radius': '12px',
    '--ck-overlay-background': 'rgba(0,0,0,0.6)',
    '--ck-body-background': '#0f0f0f',
    '--ck-body-background-secondary': '#1a1a1a',
    '--ck-body-background-tertiary': '#252525',
    '--ck-body-color': '#ffffff',
    '--ck-body-color-muted': 'rgba(255,255,255,0.5)',
    '--ck-body-color-muted-hover': 'rgba(255,255,255,0.8)',
    '--ck-primary-button-background': '#6366f1',
    '--ck-primary-button-hover-background': '#818cf8',
    '--ck-primary-button-color': '#ffffff',
    '--ck-focus-color': '#6366f1',
    '--ck-connectbutton-background': '#1a1a1a',
    '--ck-connectbutton-hover-background': '#252525',
    '--ck-connectbutton-color': '#ffffff',
    '--ck-connectbutton-border-radius': '8px',
  }}
>

Кастомная кнопка

import { useModal } from 'connectkit';
import { useAccount } from 'wagmi';

export function CustomConnectButton() {
  const { openConnectModal } = useModal();
  const { address, isConnected } = useAccount();

  if (isConnected && address) {
    return (
      <WalletInfo address={address} />
    );
  }

  return (
    <button
      onClick={openConnectModal}
      className="rounded-xl bg-indigo-600 px-5 py-2.5 text-sm font-semibold text-white hover:bg-indigo-500"
    >
      Подключить кошелёк
    </button>
  );
}

Опции провайдера

<ConnectKitProvider
  options={{
    // Показывать баланс ETH рядом с адресом
    showBalance: true,
    // Показывать ENS-имя вместо адреса (vitalik.eth)
    truncateLongENSAddress: true,
    // Порядок отображения кошельков
    walletConnectName: 'Other Wallets',
    // Кнопка отключения
    hideQuestionMarkCTA: false,
    // Отключить QR-код WalletConnect
    disableENSCaching: false,
    // Минимальный баланс для отображения
    minimumBalanceThreshold: '0.001',
    // Embed режим — без модала, встроенный
    embedGoogleFonts: false,
  }}
>

Отличия от RainbowKit

Выбор между ними — вкусовой. ConnectKit выглядит чуть более «продуктово», RainbowKit чуть более гибкий в кастомизации кнопки.

Срок: установка с кастомной темой и кастомной кнопкой — половина дня.