安装

通过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。

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。

注意：现在依赖 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. 构建应用程序的其余部分

发送交易，交互合同，解析 ENS 详情以及使用 wagmi 的全面 React 钩子套件做更多事情。