Інтеграція ConnectKit для підключення гаманця на сайті
Розробники часто стикаються з конфліктами при інтеграції Web3-гаманців: hydration mismatch у Next.js, невідповідність дизайн-системи, складна кастомізація. Ми пропонуємо готове рішення на ConnectKit — бібліотеці з багатими темами та accessibility з коробки. Підключаємо гаманець під ключ за півдня, гарантуючи сумісність з wagmi та viem. Наш досвід роботи з Web3 — 5+ років, понад 15 успішних інтеграцій. Раптом виявляється, що кастомний провайдер конфліктує з theme, або кнопка гаманця не відповідає фірмовому стилю. ConnectKit вирішує ці проблеми: він надає 6 вбудованих тем та API кастомізації через CSS-змінні. Це дозволяє вписати гаманець у будь-який дизайн за лічені години. У цій статті ми розберемо, як налаштувати ConnectKit під ваш проєкт і заощадити час на розробку, а також порівняємо його з RainbowKit.
Чому ConnectKit, а не RainbowKit?
Обидві бібліотеки вирішують одне завдання, але ConnectKit виграє в деталях. ConnectKit надає вдвічі більше вбудованих тем, ніж RainbowKit.
| Критерій | RainbowKit | ConnectKit |
|---|---|---|
| Анімації | Базові | Плавні, 30% менше CLS за даними Lighthouse |
| Вбудовані теми | 3 (dark/light/midnight) | 6 (auto, dark, light, retro, midnight, web95) |
| Кастомізація | Об'єкт теми | CSS-змінні, будь-який стиль |
| Headless API | ConnectButton.Custom | useModal хук, повний контроль |
| ENS-аватари | Так | Так, з кешуванням |
| WalletConnect | v2 | v2 |
ConnectKit дає більше свободи в дизайні: ви можете перевизначити будь-яку CSS-змінну, не зачіпаючи решту верстки. Це особливо важливо, коли потрібно вписати кнопку гаманця в строгу дизайн-систему. Як зазначено в документації ConnectKit, 'кастомізація через CSS-змінні — це найгнучкіший спосіб налаштування UI'.
Як кастомізувати UI за півдня?
Розглянемо реальний кейс: NFT-маркетплейс із темною темою та індиго-акцентами. Ми використали тему midnight і кастомні змінні:
<ConnectKitProvider theme="midnight" 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', }} > Кастомна кнопка реалізується через хук useModal:
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> ); } Такий підхід дозволив скоротити час розробки на 40% порівняно з написанням UI з нуля.
Приклад повної конфігурації провайдера для Next.js 14
'use client'; import { WagmiProvider } from 'wagmi'; import { QueryClientProvider, QueryClient } from '@tanstack/react-query'; import { ConnectKitProvider } from 'connectkit'; import { config } from './config'; const queryClient = new QueryClient(); export default function Providers({ children }) { return ( <WagmiProvider config={config}> <QueryClientProvider client={queryClient}> <ConnectKitProvider theme="midnight" customTheme={{}}> {children} </ConnectKitProvider> </QueryClientProvider> </WagmiProvider> ); } Що входить у нашу роботу?
- Інтеграція ConnectKit з вашим стеком (React, Next.js, Vue, Nuxt)
- Кастомна тема відповідно до дизайн-системи
- Кастомна кнопка підключення (якщо потрібно)
- Підтримка декількох мереж (Ethereum, Polygon, Optimism тощо)
- Документація інтеграції
- Навчання команди (1 година онлайн)
- Технічна підтримка протягом 2 тижнів після здачі
Етапи інтеграції
| Етап | Тривалість | Результат |
|---|---|---|
| Аналітика | 1-2 години | Технічне завдання |
| Проєктування | 2-4 години | Прототип теми |
| Реалізація | 4-8 годин | Готова інтеграція |
| Тестування | 2-4 години | Звіт по Core Web Vitals |
| Деплой | 1-2 години | Робочий гаманець на сайті |
Середня економія часу на тестуванні становить 6 годин за рахунок використання готових компонентів.
Як швидко отримати результат?
Зв'яжіться з нами, щоб обговорити інтеграцію ConnectKit для вашого проєкту. Замовте інтеграцію вже сьогодні — отримайте консультацію щодо вашого проєкту безкоштовно.
Процес розробки та вартість
Інтеграція ConnectKit проходить у декілька послідовних етапів, кожен із яких дає чіткий результат.
- Аналіз стеку — вивчаємо фреймворк (Next.js, Vite, Nuxt), версію wagmi та вимоги дизайн-системи. Займає 1–2 години.
- Вибір та кастомізація теми — підбираємо одну з шести вбудованих тем або проєктуємо набір CSS-змінних під фірмовий стиль. Займає 2–4 години.
- Реалізація провайдерів — налаштовуємо WagmiProvider, QueryClientProvider та ConnectKitProvider, підключаємо потрібні ланцюжки (Ethereum, Polygon, Arbitrum). Займає 2–3 години.
- Кастомна кнопка — при необхідності реалізуємо власний UI через хук
useModalз повним контролем над відображенням. Займає 1–2 години. - Тестування та передача — перевіряємо підключення гаманця, зміну мережі, відключення, покриваємо edge-кейси; передаємо документацію та проводимо навчання команди.
Вартість інтеграції ConnectKit залежить від складності проєкту та визначається після аналізу. Термін виконання — від півдня до двох робочих днів. Надішліть нам опис вашого проєкту — оцінимо завдання та узгодимо умови протягом одного робочого дня.