При разработке dApp одна из первых сложностей — дать пользователю простой и безопасный способ подключить кошелек. wagmi предоставляет API, но UI для подключения кошелька нужно писать самостоятельно. RainbowKit даёт готовый интерфейс, избавляя от десятков часов работы. Мы помогаем настроить его под ваш проект — от базовой интеграции до кастомных тем и headless-кнопок. Гарантируем совместимость с популярными сетями и кошельками.
Как RainbowKit решает задачу подключения кошелька?
Написание собственного модального окна выбора кошелька, кнопки подключения и обработки состояний занимает десятки часов. RainbowKit избавляет от этого, предоставляя готовый компонент ConnectButton, который автоматически показывает баланс, аватар и смену сети. Экономия времени — до 80% по сравнению с кастомной реализацией. MetaMask, WalletConnect, Coinbase Wallet, Rainbow, Trust Wallet — RainbowKit обеспечивает единообразный UX для всех популярных кошельков. Можно добавить кастомные коннекторы. Встроенные темы и API для переопределения цветов, шрифтов и радиусов. Например, мы реализовали кастомную тему с полным соответствием корпоративному дизайну заказчика за полдня. RainbowKit поддерживает мобильные браузеры и deep linking, что критично для DeFi-приложений.
Как кастомизировать тему RainbowKit?
Вы можете использовать встроенные темы darkTheme, lightTheme, midnightTheme или создать свою с помощью Theme API. Настройте accentColor, borderRadius, fontStack и overlayBlur. Пример конфигурации:
import { RainbowKitProvider, darkTheme } from '@rainbow-me/rainbowkit';
<RainbowKitProvider
theme={darkTheme({
accentColor: '#6366f1',
accentColorForeground: 'white',
borderRadius: 'medium',
fontStack: 'system',
overlayBlur: 'small',
})}
>
Какие проблемы решаем при интеграции?
Типичные ошибки — забыли импортировать стили, не указали projectId для WalletConnect, используют getDefaultConfig без сетей (показывается только Ethereum), не обернули приложение в QueryClientProvider, не обработали неподдерживаемую сеть. Мы проверяем все сценарии и включаем их в тестирование. Опыт более 5 лет и более 20 выполненных проектов позволяют нам избежать этих граблей и сдать работу без сюрпризов.
Как мы это делаем: кейс headless-кнопки
Стек: React 18 / Next.js 14 + wagmi v2 + viem + @tanstack/react-query + RainbowKit 1.x. Для DeFi-платформы потребовалась кастомная кнопка подключения, вписывающаяся в минималистичный дизайн. Мы применили headless API ConnectButton.Custom, создав кнопку с кастомными стилями и анимациями. Интеграция заняла один день, при этом весь функционал смены сети и отображения баланса остался.
Процесс работы
- Аналитика. Собираем требования: список кошельков, сети, дизайн-макеты.
- Проектирование. Определяем архитектуру: Next.js App Router или Pages Router, способ передачи Project ID.
- Реализация. Устанавливаем зависимости, создаём
Providers, настраиваем конфигурацию. Кастомизируем тему под макет. - Тестирование. Проверяем все сценарии: подключение, отключение, смена сети, отзыв разрешений. Тесты в браузерах и мобильных эмуляторах.
- Деплой. Настраиваем продакшен-сборку, CI/CD, мониторинг ошибок через Sentry.
Сроки (ориентировочно)
| Этап | Время |
|---|---|
| Базовая интеграция (стандартная тема) | 1 день |
| Кастомизация темы под дизайн | 1–2 дня |
| Headless кнопка и нестандартный UI | 1–2 дня |
Стоимость рассчитывается индивидуально после оценки объёма работ. Мы гарантируем фиксацию сроков и прозрачное ценообразование. Наши клиенты экономят до 80% времени по сравнению с кастомной разработкой.
Сравнение RainbowKit и кастомной реализации
| Критерий | RainbowKit | Кастомная реализация |
|---|---|---|
| Время разработки | 1-3 дня | 5-10 дней |
| Количество поддерживаемых кошельков | 50+ через WalletConnect | Зависит от реализации |
| Кастомизация | Полная через тему и headless API | Полная, но с нуля |
| Тестирование | Встроенная поддержка состояний | Требует написания тестов |
| Документация | Официальная и сообщество | Нет готовой |
Что входит в работу
- Интеграция RainbowKit, wagmi, viem.
- Настройка списка кошельков (MetaMask, WalletConnect, Coinbase Wallet, кастомные).
- Кастомизация темы под дизайн-систему.
- Адаптация под мобильные устройства.
- Документация по использованию компонентов.
- Код-ревью и поддержка после деплоя.
Типичные ошибки и как их избежать
- Забыли импортировать стили:
import '@rainbow-me/rainbowkit/styles.css'. - Не указали
projectIdдля WalletConnect — модалка не загружается. - Использовали
getDefaultConfigбез указания сетей — показывается только Ethereum. - Не обернули приложение в
QueryClientProvider. - Не обработали ошибку неподдерживаемой сети — пользователь видит пустой экран.
Чтобы избежать этих ошибок, закажите ревью кода на этапе внедрения.
Почему выбирают нас?
Более 5 лет опыта в web3-разработке. Более 20 выполненных проектов с интеграцией криптокошельков. Используем только стабильные версии библиотек, следим за обновлениями wagmi и RainbowKit. Гарантия качества на каждый этап работ.
Свяжитесь с нами для оценки вашего проекта. Получите предварительную оценку сроков и стоимость — обычно дешевле, чем писать UI с нуля.
Пример кастомного набора кошельков
import {
injectedWallet,
metaMaskWallet,
rainbowWallet,
walletConnectWallet,
coinbaseWallet,
safeWallet,
} from '@rainbow-me/rainbowkit/wallets';
const config = getDefaultConfig({
wallets: [
{
groupName: 'Популярные',
wallets: [metaMaskWallet, rainbowWallet, coinbaseWallet],
},
{
groupName: 'Другие',
wallets: [walletConnectWallet, safeWallet, injectedWallet],
},
],
// ...
});
Установка
npm install @rainbow-me/rainbowkit wagmi viem @tanstack/react-query
Минимальная интеграция
// app/providers.tsx
'use client';
import '@rainbow-me/rainbowkit/styles.css';
import { RainbowKitProvider, getDefaultConfig } from '@rainbow-me/rainbowkit';
import { WagmiProvider } from 'wagmi';
import { mainnet, polygon, arbitrum } from 'wagmi/chains';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
const config = getDefaultConfig({
appName: 'MyApp',
projectId: process.env.NEXT_PUBLIC_WC_PROJECT_ID!,
chains: [mainnet, polygon, arbitrum],
});
const queryClient = new QueryClient();
export function Providers({ children }: { children: React.ReactNode }) {
return (
<WagmiProvider config={config}>
<QueryClientProvider client={queryClient}>
<RainbowKitProvider>
{children}
</RainbowKitProvider>
</QueryClientProvider>
</WagmiProvider>
);
}
// Header component
import { ConnectButton } from '@rainbow-me/rainbowkit';
export function Header() {
return (
<header>
<Logo />
<ConnectButton />
</header>
);
}
ConnectButton показывает: кнопку «Connect Wallet» если не подключён, адрес + баланс + аватар если подключён, смену сети если не поддерживается.
Кастомная кнопка подключения
import { ConnectButton } from '@rainbow-me/rainbowkit';
export function CustomConnectButton() {
return (
<ConnectButton.Custom>
{(({
account,
chain,
openAccountModal,
openChainModal,
openConnectModal,
authenticationStatus,
mounted,
}) => {
const ready = mounted && authenticationStatus !== 'loading';
const connected = ready && account && chain && authenticationStatus !== 'unauthenticated';
return (
<div {...(!ready && { 'aria-hidden': true, style: { opacity: 0, pointerEvents: 'none' } })}>
{!connected ? (
<button onClick={openConnectModal} className="btn-primary">
Подключить кошелёк
</button>
) : chain.unsupported ? (
<button onClick={openChainModal} className="btn-danger">
Сменить сеть
</button>
) : (
<div className="flex gap-2">
<button onClick={openChainModal} className="btn-ghost flex items-center gap-1">
{chain.hasIcon && (
<img src={chain.iconUrl} alt={chain.name} className="h-4 w-4" />
)}
<span>{chain.name}</span>
</button>
<button onClick={openAccountModal} className="btn-ghost">
{account.displayBalance && `${account.displayBalance} · `}
{account.displayName}
</button>
</div>
)}
</div>
);
})()}
</ConnectButton.Custom>
);
}
Оцените ваш проект бесплатно. Свяжитесь, чтобы обсудить детали и получить коммерческое предложение в течение 1 дня.