Интеграция ConnectKit в dApp: подключение кошельков и кастомизация

Интеграция ConnectKit в dApp: подключение кошельков и кастомизация

Мы — команда Web3-инженеров с более чем пятилетним опытом в разработке DeFi-протоколов и NFT-маркетплейсов. За нашими плечами более 50 успешных интеграций кошельков. Когда сталкиваешься с задачей подключения кошельков к dApp, каждый провайдер тянет свои зависимости, а UI-компоненты надо согласовывать с дизайн-системой. ConnectKit от Family решает эту боль: это лёгкая обёртка над wagmi, которая даёт готовый, но полностью кастомный интерфейс.

В отличие от RainbowKit, который имеет жёсткую структуру, ConnectKit построен на CSS-переменных. Вы переопределяете цвета, радиусы, шрифты — и получаете UI, который неотличим от вашего фирменного стиля. При этом ConnectKit поддерживает те же кошельки: MetaMask, Rabby, Frame, WalletConnect v2, Coinbase Wallet и другие.

Как мы настраиваем ConnectKit под ваш проект

Конфигурация начинается с createConfig из wagmi 2.x и getDefaultConfig из connectkit. Ниже — типовой шаблон, который мы используем в продакшене:

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 бесплатно. Указывать конкретный RPC-ключ необязательно — можно использовать публичные RPC, но для production мы рекомендуем свой ключ Alchemy или Infura: так вы контролируете лимиты и скорость.

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?

ConnectKit поддерживает встроенные темы: auto, web95, retro, soft, midnight. Но настоящая сила — в customTheme через CSS-переменные:

<ConnectKitProvider theme="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)', }} > 

Переменные покрывают всё: фоны, границы, тени, размеры. Для адаптива — mode: 'light' | 'dark' или 'auto'. В режиме 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> ); } 

useAccount даёт адрес и цепочку, useBalance — баланс нативной монеты, useSwitchChain — переключение сети. Всё работает из коробки, без дополнительных конфигов.

Почему ConnectKit быстрее и проще аналогов?

Один из ключевых показателей — объём кода. Для кастомизации темы RainbowKit требует переопределения целого объекта, а ConnectKit — лишь набора CSS-переменных. На практике это даёт экономию времени до 40% на этапе интеграции и упрощает поддержку дизайн-системы.

Частые проблемы и их решения

Hydration mismatch — классическая Next.js проблема. Решение: завести булевое состояние mounted = useState(false) и выставлять true в useEffect. Все компоненты, которые зависят от isConnected, рендерить только когда mounted === true.

Safe Wallet поддержка актуальна, если ваше dApp используется DAO или мультисигами. Мы подключаем её вручную через отдельный коннектор — это занимает 15 минут.

Сколько времени занимает интеграция

Сроки ориентировочные — всё зависит от сложности вашего стека. Мы рассчитываем стоимость индивидуально, без скрытых платежей. Свяжитесь с нами — обсудим детали и подготовим коммерческое предложение.

Что входит в полный объём работы

• Код интеграции с комментариями
• Документация по кастомизации для вашей команды
• Доступ к тестовой среде на время разработки
• Обучение фронтенд-разработчиков работе с wagmi и ConnectKit
• Пост-релизная поддержка в течение двух недель

Мы гарантируем, что интеграция не сломает существующий функционал. Закажите консультацию — покажем примеры из 50+ реализованных проектов.

Почему стоит доверить интеграцию нам?

Мы более пяти лет на рынке Web3-разработки. Выполнили более 50 интеграций кошельков для DeFi-протоколов, NFT-маркетплейсов и гейминговых платформ. Наши инженеры — авторы open-source контрибьюций в wagmi и библиотеки ConnectKit. Мы знаем все подводные камни: от багов с EIP-1193 до проблем с chain switching на мобильных устройствах. Получите консультацию прямо сейчас — убедитесь в нашем опыте на 50+ реальных кейсах.