安装

快速了解并调用 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 查询。

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) 的 dApp，请确保将 ssr 设置为 true。

注意：所有依赖 WalletConnect 的 dApp 现在都需要从 WalletConnect Cloud 获取一个 projectId。这完全免费，只需几分钟即可完成。

...
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

使用 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 名称等。这经常会导致用户的可靠性问题，因为公共节点有速率限制。您应通过像 Alchemy 或 QuickNode 这样的服务购买 RPC 提供商的访问权限，并在 Wagmi 中定义自己的传输。这可以通过在 getDefaultConfig 中添加 transports 参数或通过 Wagmi 的 createConfig 直接实现。

传输是处理发送 JSON-RPC 请求到以太坊节点提供商（如 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 构建应用程序的其他部分。

通过 wagmi 丰富的 React Hooks 套件发送交易，与合约交互，解析 ENS 详细信息等等。

欲了解更详细信息，请查看 wagmi 文档。

概览

入门

高级

安装