Разработчики часто сталкиваются с конфликтами при интеграции Web3-кошельков: hydration mismatch в Next.js, несоответствие дизайн-системы, сложная кастомизация. Мы предлагаем готовое решение на ConnectKit — библиотеке с богатыми темами и accessibility из коробки. Подключаем кошелёк под ключ за полдня, гарантируя совместимость с wagmi и viem. Наш опыт работы с Web3 — 5+ лет, более 15 успешных интеграций. Внезапно выясняется, что кастомный провайдер конфликтует с theme, или кнопка кошелька не соответствует фирменному стилю. ConnectKit решает эти проблемы: он предоставляет 6 встроенных тем и API кастомизации через CSS-переменные. Это позволяет вписать кошелёк в любой дизайн за считанные часы. В этой статье мы разберём, как настроить ConnectKit под ваш проект и сэкономить время на разработку, а также сравним его с RainbowKit.
Почему ConnectKit, а не RainbowKit?
Обе библиотеки решают одну задачу, но ConnectKit выигрывает в деталях. ConnectKit предоставляет в 2 раза больше встроенных тем, чем 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 начинается от 10 000 ₽ для базового React-приложения. Для проектов на Next.js с поддержкой SSR и нескольких сетей — от 20 000 ₽. Срок выполнения — от полудня до двух рабочих дней. Отправьте нам описание вашего проекта — оценим задачу и согласуем условия в течение одного рабочего дня.