Интеграция фронтенда с ConnectKit

Интеграция фронтенда с ConnectKit

ConnectKit от Family — это wallet connection UI на базе wagmi. Если RainbowKit кажется перегруженным или не подходит под дизайн-систему, ConnectKit предлагает более тонкий и кастомизируемый вариант с таким же набором поддерживаемых кошельков.

Установка и конфигурация

ConnectKit требует wagmi 2.x и @tanstack/react-query 5.x. Вся конфигурация — в createConfig:

import { createConfig, http } from 'wagmi';
import { mainnet, polygon, base } from 'wagmi/chains';
import { getDefaultConfig } from 'connectkit';

const config = createConfig(
  getDefaultConfig({
    chains: [mainnet, polygon, base],
    transports: {
      [mainnet.id]: http('https://eth-mainnet.g.alchemy.com/v2/YOUR_KEY'),
      [polygon.id]: http('https://polygon-mainnet.g.alchemy.com/v2/YOUR_KEY'),
      [base.id]: http('https://base-mainnet.g.alchemy.com/v2/YOUR_KEY'),
    },
    walletConnectProjectId: process.env.NEXT_PUBLIC_WALLETCONNECT_PROJECT_ID!,
    appName: 'Your dApp',
    appDescription: 'Description for wallet connection screen',
    appUrl: 'https://your-dapp.xyz',
    appIcon: 'https://your-dapp.xyz/icon.png',
  })
);

getDefaultConfig автоматически подключает инжекторы (MetaMask, Rabby, Frame), WalletConnect v2, Coinbase Wallet. WalletConnect Project ID обязателен — получить на cloud.walletconnect.com бесплатно.

Provider оборачивает приложение:

'use client'; // Next.js App Router

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

Кнопка подключения

ConnectKitButton — готовый компонент с полным состоянием:

import { ConnectKitButton } from 'connectkit';

// Готовый вариант — минимум кода
<ConnectKitButton />

// Кастомный рендер через render prop
<ConnectKitButton.Custom>
  {({ isConnected, isConnecting, show, address, ensName }) => (
    <button onClick={show} disabled={isConnecting}>
      {isConnected
        ? ensName ?? `${address?.slice(0, 6)}...${address?.slice(-4)}`
        : 'Подключить кошелёк'}
    </button>
  )}
</ConnectKitButton.Custom>

Через render prop паттерн ConnectKit полностью вписывается в любую дизайн-систему. show открывает модальное окно подключения.

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

ConnectKit поддерживает встроенные темы и полную кастомизацию через customTheme:

<ConnectKitProvider
  theme="midnight" // встроенные: auto, web95, retro, soft, midnight
  customTheme={{
    '--ck-font-family': '"Inter", sans-serif',
    '--ck-accent-color': '#6366f1',
    '--ck-accent-text-color': '#ffffff',
    '--ck-border-radius': '12px',
    '--ck-overlay-backdrop-filter': 'blur(8px)',
  }}
>

CSS переменные покрывают цвета, радиусы, шрифты, анимации. Для полного контроля — mode: 'light' | 'dark' или 'auto' для следования системной теме.

Работа с состоянием кошелька

После подключения — стандартные wagmi хуки:

import { useAccount, useBalance, useChainId, useSwitchChain } from 'wagmi';

function WalletInfo() {
  const { address, isConnected, chain } = useAccount();
  const { data: balance } = useBalance({ address });
  const { switchChain } = useSwitchChain();

  if (!isConnected) return null;

  return (
    <div>
      <p>{address}</p>
      <p>{balance?.formatted} {balance?.symbol}</p>
      {chain?.id !== base.id && (
        <button onClick={() => switchChain({ chainId: base.id })}>
          Переключиться на Base
        </button>
      )}
    </div>
  );
}

Частые проблемы при интеграции

Hydration mismatch — isConnected на сервере всегда false, на клиенте может быть true. Решение: использовать mounted state или wagmi хук useHydrated (если доступен). Альтернатива — рендерить wallet-зависимый UI только после useEffect.

WalletConnect modal не открывается на мобиле — нужен корректный appUrl в конфиге, совпадающий с origin. WalletConnect v2 проверяет origin.

Поддержка Safe{Wallet} — если dApp используется в составе мультисиг, нужно добавить safeConnector из @gnosis.pm/safe-apps-wagmi отдельно, ConnectKit не включает его по умолчанию.

Ориентиры по срокам

Полная интеграция ConnectKit в существующий React/Next.js проект, включая кастомизацию темы и тестирование на нескольких кошельках — 1-2 дня. С кастомным рендером кнопки, обработкой chain switching и Safe{Wallet} поддержкой — до 3 дней.