Інтеграція фронтенду з 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 днів.