Інсталяція

Інсталяція

Почніть працювати з 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, та визначити ваші власні Транспорти у Wagmi. Це можна досягти, додавши параметр transports у getDefaultConfig або безпосередньо через createConfig Wagmi.

Транспорт є середнім мережевим шаром, який обробляє надсилання запитів 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