Установка

Установка

Начнем работать с RainbowKit

Вы можете создать новый проект с RainbowKit + wagmi + Next.js с помощью одной из следующих команд, используя менеджер пакетов на ваш выбор:

npm init @rainbow-me/rainbowkit@latest
# or
pnpm create @rainbow-me/rainbowkit@latest
# or
yarn create @rainbow-me/rainbowkit

Это предложит вам назвать проект, сформирует новую директорию с шаблонным проектом и установит все необходимые зависимости.

Вы можете также вручную интегрировать RainbowKit в существующий проект.

Установите RainbowKit и его зависимые библиотеки: wagmi, viem и @tanstack/react-query.

npm install @rainbow-me/rainbowkit wagmi [email protected] @tanstack/react-query

Примечание: RainbowKit это библиотека для React.

Импортируйте RainbowKit, Wagmi и TanStack Query.

import '@rainbow-me/rainbowkit/styles.css';

import {
  getDefaultConfig,
  RainbowKitProvider,
} from '@rainbow-me/rainbowkit';
import { WagmiProvider } from 'wagmi';
import {
  mainnet,
  polygon,
  optimism,
  arbitrum,
  base,
} from 'wagmi/chains';
import {
  QueryClientProvider,
  QueryClient,
} from "@tanstack/react-query";

Настройте необходимые цепочки и создайте требуемые коннекторы. Вам также потребуется настроить конфигурацию wagmi. Если ваше приложение использует серверный рендеринг (SSR), обязательно установите ssr в true.

Примечание: Каждое приложение, работающее с WalletConnect, теперь должно получить projectId от WalletConnect Cloud. Это абсолютно бесплатно и занимает всего несколько минут.

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

const config = getDefaultConfig({
  appName: 'My RainbowKit App',
  projectId: 'YOUR_PROJECT_ID',
  chains: [mainnet, polygon, optimism, arbitrum, base],
  ssr: true, // If your dApp uses server side rendering (SSR)
});

Обратите ваше приложение с RainbowKitProvider, WagmiProvider, и QueryClientProvider.

const queryClient = new QueryClient();

const App = () => {
  return (
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        <RainbowKitProvider>
          {/* Your App */}
        </RainbowKitProvider>
      </QueryClientProvider>
    </WagmiProvider>
  );
};

Затем в вашем приложении импортируйте и отобразите компонент ConnectButton.

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

export const YourApp = () => {
  return <ConnectButton />;
};

RainbowKit теперь будет управлять выбором кошелька пользователя, отображать информацию о кошельке/транзакции и обрабатывать переключение сети/кошелька.

Некоторые инструменты сборки требуют дополнительной настройки.

При использовании Remix вы должны выполнить полифилы модулей buffer, events и http. Смотрите ниже конфигурацию для Remix или наш пример проекта Remix.

/** @type {import('@remix-run/dev').AppConfig} */
export default {
  ignoredRouteFiles: ["**/.*"],
  browserNodeBuiltinsPolyfill: {
    modules: { buffer: true, events: true, http: true },
  },
};

По умолчанию ваше приложение использует публичные RPC-провайдеры для каждой цепочки для получения балансов, разрешения имени ENS и многого другого. Это может часто вызывать проблемы с надежностью для ваших пользователей, так как публичные узлы имеют лимиты. Вместо этого вам следует приобрести доступ к RPC-провайдеру через такие сервисы, как Alchemy или QuickNode, и определить собственные транспорты в Wagmi. Это можно сделать, добавив параметр transports в getDefaultConfig или напрямую через Wagmi's createConfig.

Транспорт — это промежуточный сетевой слой, который обрабатывает отправку JSON-RPC запросов провайдеру узлов Ethereum (таким как Alchemy, Infura и другим).

Пример с использованием http транспорта

import { getDefaultConfig } from '@rainbow-me/rainbowkit';
import { http } from 'wagmi';
import { mainnet, sepolia } from 'wagmi/chains';

const config = getDefaultConfig({
  appName: 'My RainbowKit App',
  projectId: 'YOUR_PROJECT_ID',
  chains: [mainnet, sepolia],
  transports: {
    [mainnet.id]: http('https://eth-mainnet.g.alchemy.com/v2/...'),
    [sepolia.id]: http('https://eth-sepolia.g.alchemy.com/v2/...'),
  },
});

Для более подробной информации смотрите документацию по транспорту wagmi.

Теперь, когда ваши пользователи могут подключать свои кошельки, вы можете начать разворачивать оставшуюся часть приложения с помощью wagmi.

Отправка транзакций, взаимодействие с контрактами, разрешение деталей ENS и многое другое с использованием обширного набора React Hook от wagmi.

Для более детальной информации смотрите документацию wagmi.

Чтобы увидеть действующие примеры RainbowKit или даже использовать их для автоматической генерации нового проекта, посмотрите официальные примеры.

Чтобы попробовать RainbowKit прямо в вашем браузере, ознакомьтесь со следующими ссылками на CodeSandbox:

• с Create React App
• с Next.js
• с Next.js App Router
• с Remix
• с Vite
• с React Router