Інтеграція ConnectKit для підключення гаманця на сайті

Інтеграція ConnectKit для підключення гаманця на веб-сайті

ConnectKit від Family — альтернатива RainbowKit з наголосом на візуальну відполіровку та доступність. Більш суворий дизайн за замовчуванням, вбудовані анімації, підтримка 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 */}

Користувацькі змінні через 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 трохи більш гнучкий у налаштуванні кнопки.

Часові рамки: установка з користувацькою темою та користувацькою кнопкою — половина дня.