Установка

Установка

Начните работу с 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. Если ваше dApp использует серверный рендеринг (SSR), убедитесь, что вы установили ssr в true.

Примечание: Теперь каждому dApp, который использует 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 },
  },
};

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

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

Пример с http transport

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 по transports.

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

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

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

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

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

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