Cài đặt

Cài đặt

Bắt đầu và chạy với RainbowKit

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

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

Điều này sẽ nhắc bạn nhập tên 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.

Ngoài ra, bạn có thể tích hợp thủ công RainbowKit vào dự án hiện có của bạn.

Cài đặt RainbowKit và các phụ thuộc liên quan của nó, 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 và tạo các kết nối cần thiết. Bạn cũng sẽ cần thiết lập một cấu hình wagmi. Nếu dApp của bạn sử dụng kết xuất phía máy chủ (SSR), hãy đảm bảo đặt ssr thành true.

Lưu ý: Mỗi dApp dựa vào WalletConnect hiện nay cần phải có được projectId từ WalletConnect Cloud. Điều 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)
});

Bọc ứ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ẽ xử lý việc lựa chọn ví của người dùng, hiển thị thông tin ví/giao dịch và xử lý việc đổi mạng/chuyển ví.

Một số công cụ xây dựng sẽ yêu cầu cài đặt bổ sung.

Khi sử dụng Remix, bạn phải tạo bộ đệm, sự kiện và các mô-đun http. Tham khảo cấu hình Remix dưới đây, hoặc dự án mẫu Remix 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à nhiều hơn nữa. Điều này thường có thể gây ra vấn đề về độ tin cậy cho người dùng của bạn do các nút công cộng bị giới hạn tốc độ. Thay vào đó, bạn nên mua quyền truy cập vào một nhà cung cấp RPC thông qua các dịch vụ như Alchemy hoặc QuickNode, và định nghĩa các Kênh truyền riêng của 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 thông qua createConfig của Wagmi trực tiếp.

Một Kênh truyền là lớp giữa mạng xử lý việc gửi các yêu cầu JSON-RPC tới Nhà cung cấp nút Ethereum (như Alchemy, Infura, v.v.).

Ví dụ với kênh truyền 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 wagmi về kênh truyền.

Giờ đây khi 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 bằng wagmi.

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

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

Để xem một số ví dụ hoạt động của RainbowKit, hoặc thậm chí sử dụng chúng để tự động tạo một dự án mới, hãy xem các 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 Create React App
• với Next.js
• với Bộ định tuyến ứng dụng Next.js
• với Remix
• với Vite
• với React Router