安裝
安裝
使用 RainbowKit 快速上手
您可以使用您喜歡的包管理器，通過以下其中一個命令搭建一個新的 RainbowKit + wagmi + Next.js 應用程序。
npm init @rainbow-me/rainbowkit@latest
pnpm create @rainbow-me/rainbowkit@latest
yarn create @rainbow-me/rainbowkit
這將提示您輸入項目名稱，生成包含樣板項目的新目錄，並安裝所有必需的依賴項。
或者，您可以手動將 RainbowKit 集成到您現有的項目中。
安裝 RainbowKit 及其對應的依賴項 wagmi, viem 與 @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,
});
用 RainbowKitProvider、WagmiProvider 和 QueryClientProvider 包裝您的應用程序。
const queryClient = new QueryClient();
const App = () => {
return (
<WagmiProvider config={config}>
<QueryClientProvider client={queryClient}>
<RainbowKitProvider>
{}
</RainbowKitProvider>
</QueryClientProvider>
</WagmiProvider>
);
};
然後，在您的應用程序中，導入並渲染 ConnectButton 組件。
import { ConnectButton } from '@rainbow-me/rainbowkit';
export const YourApp = () => {
return <ConnectButton />;
};
RainbowKit 現在將處理用戶的錢包選擇，顯示錢包/交易信息並處理網絡/錢包切換。
某些構建工具需要額外的設置。
使用 Remix 時，您必須為 buffer、events 和 http 模塊進行 polyfill。參考下方 Remix 配置，或我們的示例 Remix 項目。
export default {
ignoredRouteFiles: ["**/.*"],
browserNodeBuiltinsPolyfill: {
modules: { buffer: true, events: true, http: true },
},
};
默認情況下，您的 dApp 使用公共 RPC 提供商為每條鏈獲取餘額、解析 ENS 名稱等。這經常會導致用戶的可靠性問題，因為公共節點有速率限制。您應該通過 Alchemy 或 QuickNode 等服務購買 RPC 提供商的訪問權限，並在 Wagmi 中定義您自己的傳輸層。這可以通過在 getDefaultConfig 中添加 transports 參數或通過 Wagmi 的 createConfig 直接實現。
傳輸層是處理向以太坊節點提供商（例如 Alchemy、Infura 等）發送 JSON-RPC 請求的網絡中間層。
使用 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 鉤子套件發送交易、與合約互動、解析 ENS 詳細信息等。
有關更多詳細信息，請查看 wagmi 文檔。
要查看一些正在運行的 RainbowKit 示例，或者甚至用它們自動搭建新項目，請查看 官方示例。
要直接在瀏覽器中嘗試 RainbowKit，請查看以下 CodeSandbox 鏈接：
