安裝

開始並運行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。

注意：現在所有依賴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範例項目。參考下面的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中添加transports參數或直接通過Wagmi的createConfig來實現。

Transport是處理將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 transport文件。

添加您自己的功能

現在您的用戶可以連接他們的錢包，您可以開始使用wagmi構建應用程序的其餘部分。

使用wagmi的全面React Hooks套件發送交易、與合約交互、解析ENS詳細信息等等。

有關詳細信息，請查看wagmi文件。

總覽

快速開始

高級

安裝