Установка

Установка

Швидко почніть з 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, та визначити власні Transports у Wagmi. Це можна виконати шляхом додавання параметра transports у getDefaultConfig або напряму через Wagmi 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 Hooks wagmi.

Для отримання детальної інформації, перегляньте документацію wagmi.

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

Щоб спробувати RainbowKit безпосередньо у вашому браузері, перегляньте посилання на CodeSandbox нижче:

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