RainbowKit и Web3Modal: подключение красиво

RainbowKit и Web3Modal дают готовую красивую модалку подключения с поддержкой десятков кошельков.

RainbowKit и Web3Modal (Reown AppKit) — готовые UI-библиотеки подключения кошельков: красивая модалка, поддержка многих кошельков, WalletConnect для мобильных, переключение сетей.

Своя кнопка «Подключить» через window.ethereum работает только с расширениями в браузере и выглядит бедно. Реальные dApp поддерживают десятки кошельков, мобильные через QR (WalletConnect), показывают баланс и сеть. Писать это руками — недели. Готовые библиотеки решают за вечер.

Что входит «из коробки»

Модалка выбора кошелька — MetaMask, Coinbase, Rainbow, WalletConnect и др.
WalletConnect — подключение мобильного кошелька по QR-коду.
Кнопка аккаунта — адрес, баланс, аватар (ENS), отключение.
Переключатель сети — список разрешённых сетей с подсветкой неправильной.

Важно: эти библиотеки работают поверх wagmi. То есть UI берёт на себя RainbowKit, а данными (useAccount, чтение/запись) по-прежнему занимается wagmi. Они дополняют друг друга.

Минимальная интеграция (RainbowKit)

import { RainbowKitProvider, ConnectButton } from "@rainbow-me/rainbowkit";
import "@rainbow-me/rainbowkit/styles.css";

function App() {
  return (
    // config wagmi оборачивается RainbowKitProvider
    &lt;RainbowKitProvider&gt;
      &lt;header&gt;
        &lt;ConnectButton /&gt;   {/* вся кнопка подключения — готова */}
      &lt;/header&gt;
      &lt;Dapp /&gt;
    &lt;/RainbowKitProvider&gt;
  );
}

Один компонент <ConnectButton /> — и у вас полноценная кнопка с модалкой, сменой сети и меню аккаунта. Дальше вся логика идёт через те же wagmi-хуки.

RainbowKit или Web3Modal

RainbowKit	Web3Modal / AppKit
от команды Rainbow, тесная связка с wagmi	от команды WalletConnect
красивый дефолтный дизайн	гибкая кастомизация, аналитика
популярен в экосистеме React	сильная мобильная поддержка

Обе решают одну задачу; выбор — вопрос вкуса и требований. Главное — не писать модалку кошельков вручную.

Как работает под капотом

Под капотом эти библиотеки используют систему коннекторов wagmi: каждый кошелёк — это коннектор, знающий, как с ним соединиться (инжектированный window.ethereum, WalletConnect по QR, Coinbase SDK). Модалка просто показывает список коннекторов и вызывает connect у выбранного. После подключения всё течёт через стандартный wagmi-стейт — поэтому ваши useAccount/useReadContract работают без изменений.

Частые ошибки

Писать модалку кошельков с нуля. Это много кейсов (мобильные, разные кошельки) — берите готовое.
Забыть импортировать стили библиотеки. Без CSS модалка сломается визуально.
Думать, что RainbowKit заменяет wagmi. Он только UI подключения; данные — всё равно wagmi.

Итоги

RainbowKit/Web3Modal дают готовую модалку подключения и кнопку аккаунта.
Они работают поверх wagmi, не заменяя его.
Поддержка многих кошельков и WalletConnect — бесплатно, без своей реализации.