安裝
安裝
開始使用 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 模塊。請參考下面 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 Hooks 套件發送交易、與合約交互、解析 ENS 詳情和更多操作。
要獲取更多詳細信息，請查看 wagmi 文檔。
要查看一些運行中的 RainbowKit 範例，或者使用它們自動搭建一個新專案，請查看 官方範例。
要在瀏覽器中直接嘗試 RainbowKit，請查看下面的 CodeSandbox 鏈接：
