Інтеграція 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+ реальних кейсах.