Інтеграція RainbowKit для підключення гаманця на сайті

Інтеграція RainbowKit для підключення гаманця на веб-сайті

RainbowKit — бібліотека UI на основі wagmi для підключення гаманця. Надає готовий, відполірований модальний діалог з підтримкою MetaMask, WalletConnect, Coinbase Wallet, Rainbow та інших. Можна встановити за годину та налаштувати під дизайн проекту.

Установка

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>
  );
}

// Кнопка підключення — готова, зі всім станом всередині
import { ConnectButton } from '@rainbow-me/rainbowkit';

export function Header() {
  return (
    <header>
      <Logo />
      <ConnectButton />
    </header>
  );
}

ConnectButton показує: кнопку «Connect Wallet» якщо не підключено, адресу + баланс + аватар якщо підключено, перемикання мережі якщо мережа не підтримується.

Налаштування теми

import { RainbowKitProvider, darkTheme, lightTheme, midnightTheme } from '@rainbow-me/rainbowkit';

// Вбудовані теми з акцентним кольором
<RainbowKitProvider
  theme={darkTheme({
    accentColor: '#6366f1',        // indigo-500
    accentColorForeground: 'white',
    borderRadius: 'medium',
    fontStack: 'system',
    overlayBlur: 'small',
  })}
>

Для повного контролю — користувацька тема:

import { cssStringFromTheme } from '@rainbow-me/rainbowkit';

const myTheme = {
  colors: {
    accentColor: '#6366f1',
    accentColorForeground: '#fff',
    actionButtonBorder: 'rgba(255,255,255,0.04)',
    actionButtonBorderMobile: 'rgba(255,255,255,0.08)',
    actionButtonSecondaryBackground: 'rgba(255,255,255,0.08)',
    closeButton: 'rgba(224,232,255,0.6)',
    closeButtonBackground: 'rgba(255,255,255,0.08)',
    connectButtonBackground: '#1c1c1e',
    connectButtonBackgroundError: '#ff494a',
    connectButtonInnerBackground: 'linear-gradient(0deg, rgba(255,255,255,0.075), rgba(255,255,255,0.15))',
    connectButtonText: '#fff',
    connectButtonTextError: '#fff',
    connectionIndicator: '#30e000',
    downloadBottomCardBackground: 'linear-gradient(126deg, rgba(0,0,0,0) 9.49%, rgba(120,120,120,0.2) 100%)',
    downloadTopCardBackground: 'linear-gradient(126deg, rgba(120,120,120,0.2) 0%, rgba(0,0,0,0) 90.51%)',
    error: '#ff494a',
    generalBorder: 'rgba(255,255,255,0.08)',
    generalBorderDim: 'rgba(255,255,255,0.04)',
    menuItemBackground: 'rgba(255,255,255,0.08)',
    modalBackdrop: 'rgba(0,0,0,0.5)',
    modalBackground: '#1c1c1e',
    modalBorder: 'rgba(255,255,255,0.08)',
    modalText: '#fff',
    modalTextDim: 'rgba(224,232,255,0.3)',
    modalTextSecondary: 'rgba(255,255,255,0.6)',
    profileAction: 'rgba(255,255,255,0.08)',
    profileActionHover: 'rgba(255,255,255,0.16)',
    profileForeground: 'rgba(255,255,255,0.05)',
    selectedOptionBorder: 'rgba(224,232,255,0.1)',
    standby: '#ff8c00',
  },
  // fonts, radii, shadows ...
};

Користувацька кнопка підключення

Якщо стандартна кнопка не вписується в дизайн — використовується headless API:

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>
  );
}

Список гаманців

За замовчуванням RainbowKit показує популярні гаманці. Для користувацького набору:

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],
    },
  ],
  // ...
});

Часові рамки: установка та базова інтеграція з користувацькою темою — половина дня. З користувацькою кнопкою та користувацьким списком гаманців — 1 день.