Cài đặt

Cài đặt

Khởi động nhanh với RainbowKit

Bạn có thể tạo một ứng dụng mới RainbowKit + wagmi + Next.js với một trong các lệnh sau, sử dụng trình quản lý gói mà bạn lựa chọn:

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

Điều này sẽ yêu cầu bạn đặt tên cho dự án, tạo một thư mục mới chứa một dự án mẫu và cài đặt tất cả các phụ thuộc cần thiết.

Hoặc bạn có thể tích hợp RainbowKit vào dự án hiện tại của mình một cách thủ công.

Cài đặt RainbowKit và các phụ thuộc tương ứng, wagmi, viem, và @tanstack/react-query.

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

Lưu ý: RainbowKit là một thư viện React.

Nhập khẩu RainbowKit, Wagmi và 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";

Cấu hình các chuỗi mong muốn của bạn và tạo các kết nối cần thiết. Bạn cũng sẽ cần thiết lập cấu hình wagmi. Nếu dApp của bạn sử dụng render phía máy chủ (SSR) hãy đảm bảo thiết lập ssr thành true.

Lưu ý: Mọi dApp dựa vào WalletConnect bây giờ cần phải lấy projectId từ WalletConnect Cloud. Việc này hoàn toàn miễn phí và chỉ mất vài phút.

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

Gói ứng dụng của bạn với RainbowKitProvider, WagmiProvider, và QueryClientProvider.

const queryClient = new QueryClient();

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

Sau đó, trong ứng dụng của bạn, nhập và hiển thị thành phần ConnectButton.

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

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

RainbowKit sẽ quản lý việc lựa chọn ví của người dùng của bạn, hiển thị thông tin ví/giao dịch và quản lý thay đổi mạng lưới/ ví.

Một số công cụ xây dựng sẽ yêu cầu thêm thiết lập.

Khi sử dụng Remix, bạn phải polyfill các mô-đun buffer, events và http. Tham khảo cấu hình Remix bên dưới hoặc dự án Remix mẫu của chúng tôi.

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

Theo mặc định, dApp của bạn sử dụng các nhà cung cấp RPC công khai cho mỗi chuỗi để lấy số dư, giải quyết tên ENS, và hơn thế nữa. Điều này thường gây ra các vấn đề về độ tin cậy cho người dùng của bạn khi các nút công khai bị giới hạn tốc độ. Bạn nên mua quyền truy cập vào nhà cung cấp RPC thông qua các dịch vụ như Alchemy hoặc QuickNode, và xác định các Transports của riêng bạn trong Wagmi. Điều này có thể đạt được bằng cách thêm tham số transports trong getDefaultConfig hoặc trực tiếp qua createConfig của Wagmi.

Transport là lớp trung gian mạng xử lý việc gửi các yêu cầu JSON-RPC đến Nhà Cung Cấp Node Ethereum (như Alchemy, Infura, v.v.).

Ví dụ với một transport 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/...'),
  },
});

Để biết thêm chi tiết, hãy xem tài liệu vận chuyển của wagmi.

Bây giờ người dùng của bạn đã có thể kết nối ví của họ, bạn có thể bắt đầu xây dựng phần còn lại của ứng dụng của mình bằng wagmi.

Gửi giao dịch, tương tác với hợp đồng, giải quyết chi tiết ENS và nhiều hơn nữa với bộ React Hooks toàn diện của wagmi.

Để biết thêm chi tiết, hãy xem tài liệu của wagmi.

Để xem các ví dụ đang chạy của RainbowKit hoặc thậm chí sử dụng chúng để tự động tạo dự án mới, hãy xem ví dụ chính thức.

Để thử RainbowKit trực tiếp trong trình duyệt của bạn, hãy xem các liên kết CodeSandbox dưới đây:

• với Tạo Ứng dụng React
• với Next.js
• với Next.js App Router
• với Remix
• với Vite