如何在 Berachain 上使用 Vite 设置 RainbowKit | 开发者必备

导言

RainbowKit 是一种能够帮助开发者轻松集成多个钱包的工具，提升 dApp 的可用性和灵活性。

本指南由 De The Bera 撰写，将带您逐步完成如何在 Berachain 的 Artio 测试网上使用 Vite、React 和 Typescript 构建一个集成 RainbowKit 的项目，并简化钱包连接流程，为用户提供更好的体验。

无论您是新手开发者还是经验丰富的区块链开发者，这篇教程将帮助您快速上手并优化您的 dApp。

Erica

Bm bm! 🐻

如何在 Berachain 上使用 Vite 设置 RainbowKit | 开发者必备

我们带来了一份新的指南，帮助 dApp 使用现有的 SDK 并将它们连接到 Berachain 的 Artio 测试网。

🛠️ 我们要构建什么？在本指南中，我们将使用 Vite（React + Typescript）在 Berachain Artio 上设置 RainbowKit 的 “Connect Wallet” 按钮。

Berachain RainbowKit 分步指南

🏃 ViteJS

Vite 是创建单页应用程序的绝佳工具，也是服务端渲染应用程序（如 NextJS）的另一种替代方案。

🌈 RainbowKit 的优势

在开发 Web3 dApp 时，如何平衡可用性和灵活性至关重要。RainbowKit 是一个重要的工具，它不仅确保视觉吸引力，还提供了卓越的用户友好性，从而提升 dApp 钱包的设计过程。

传统上，将钱包集成到去中心化应用程序（dApp）中非常僵化。开发人员需要将 dApp 适配特定钱包，如 Metamask，这限制了用户只能使用该钱包。

RainbowKit 完全改变了这一现状。它提供了一套工具包，允许自定义 dApp 中的整个钱包连接过程。开发人员可以选择各种主题以匹配 dApp 的外观，并提供多个支持的钱包供用户选择。这种灵活性使用户能够使用他们喜欢的钱包，如 Metamask、Trust Wallet 等，体验更加顺畅。

开发者还可以设计自定义的“连接”按钮，与 dApp 的设计语言无缝集成，增强用户界面的熟悉感和流畅性。

ℹ️ 前提条件

了解 React。
开发环境：VSCode 或 Atom。
Node 版本为 v18.16.0 或更高。

✅ 在 dApp 中实现 RainbowKit 的分步指南

现在我们开始逐步创建我们的 dApp。

步骤 1：创建 React 项目

使用 Vite 创建一个新的 React-Typescript 应用程序。

npm create vite@latest berachain-rainbowkit -- --react-ts; 

# [Expected Prompts]:
# Need to install the following packages:
# create-vite@5.2.3
# Ok to proceed? (y) y
# ✔ Select a framework: › React
# ✔ Select a variant: › TypeScript

# Scaffolding project in /Users/dethebera/BeraWork/berarainbowkit/berachain-rainbowkit...
# Done. Now run:
#   cd berachain-rainbowkit
#   npm install
#   npm run dev
# npm notice 
# npm notice New minor version of npm available! 10.2.4 -> 10.5.2
# npm notice Changelog: https://github.com/npm/cli/releases/tag/v10.5.2
# npm notice Run npm install -g npm@10.5.2 to update!
# npm notice

或者，您也可以使用以下命令安装 Vite，系统会提示您输入项目名称；请输入您想要的名称。

npm create vite@latest;

# [Expected Prompts]:
# Need to install the following packages:
# create-vite@5.2.3
# Ok to proceed? (y) y
# ✔ Project name: … berachain-rainbowkit
# ✔ Select a framework: › React
# ✔ Select a variant: › TypeScript
# 
# Scaffolding project in /path/to/berachain-rainbowkit...
# 
# Done. Now run:
# 
#   cd berachain-rainbowkit
#   npm install
#   npm run dev

导航到您的本地服务器地址 http://localhost:5173 ，您应该会看到如下所示的界面：

Berachain RainbowKit – 初始 Vite 模板

设置好 React 项目后，我们可以继续安装 RainbowKit 以及其他必要的依赖项。

步骤 2：安装 RainbowKit 和依赖项

为了开始使用 RainbowKit，我们需要安装 rainbowkit 库及其依赖项 wagmi。首先安装以下内容：

# FROM ./berachain-rainbowkit

npm install @rainbow-me/rainbowkit wagmi;

现在我们已经了解了 RainbowKit 如何允许开发者自定义钱包连接体验，接下来让我们通过一个实用指南来付诸实践。

我们将从头开始，逐步完成在各个链上无缝集成 RainbowKit 按钮的过程。

到目前为止，您已经准备好在项目中使用 RainbowKit 包了。

步骤 3：配置 RainbowKit 和 Wagmi

让我们将这些包导入到项目中。我们将在 main.tsx 文件的顶部添加这些导入：

File: ./src/main.tsx

import "./polyfills";
import "./global.css";
import "@rainbow-me/rainbowkit/styles.css";
import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import { getDefaultConfig, RainbowKitProvider } from "@rainbow-me/rainbowkit";
import { WagmiProvider } from "wagmi";
import { berachainTestnet } from "wagmi/chains";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
const config = getDefaultConfig({
  appName: "RainbowKit demo",
  projectId: "YOUR_PROJECT_ID",
  chains: [berachainTestnet],
});
const queryClient = new QueryClient();
ReactDOM.createRoot(document.getElementById("root")!).render(
  <React.StrictMode>
    <WagmiProvider config={config}>
      <QueryClientProvider client={queryClient}>
        <RainbowKitProvider>
          <App />
        </RainbowKitProvider>
      </QueryClientProvider>
    </WagmiProvider>
  </React.StrictMode>
);

在本指南中，我们将为项目设置支持的链，并使用“berachainTestnet”，保持不变，同时使用 Wagmi 所需的提供者与区块链进行交互。

Berachain RainbowKit – Artio 测试网配置

有关配置连接模态的各种方式的全面概述，您可以参考 RainbowKit 的文档。

我们还需要一个 Project ID 。

您可以从 WalletConnect Cloud 获取一个，它看起来像这样：
4322794c0c46b……..ca48ba15fc3 。这个唯一标识符对于项目与 WalletConnect Cloud 的交互至关重要，能够实现与各种钱包的无缝连接。

Berachain RainbowKit – WalletConnect Cloud Dashboard

步骤 4：获取 RainbowKit Project ID

要生成项目 ID，登录 WalletConnect Cloud 并选择创建选项，如下图所示：

Berachain RainbowKit – WalletConnect Project Dashboard

为项目提供一个名称，然后点击 Create 按钮继续操作。

Berachain RainbowKit – WalletConnect Create New Project

按照这些步骤，您应该会获得一个 Project ID。

Berachain RainbowKit – WalletConnect Project ID

步骤 5：Polyfills 修复

Vite bundler 不提供 Node 的 polyfills，因此您需要为 global、Buffer 和 process.env 添加 polyfills。

创建一个名为 polyfills.ts 的新文件，并在其中添加以下代码。

文件路径：./src/polyfills.ts

import { Buffer } from "buffer";
window.global = window.global ?? window;
window.Buffer = window.Buffer ?? Buffer;
window.process = window.process ?? { env: {} }; // Minimal process polyfill

步骤 6：可选 — 添加 Global.css

在某些情况下，您可能会发现缺少 Global.css 文件。

进入 src 文件夹，创建一个名为 global.css 的新文件，并在其中添加以下代码。

文件路径：./src/global.css

body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
        'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
        sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

步骤 7：添加连接按钮

要包含连接按钮，请在 App.tsx 文件顶部从 RainbowKit 导入它。

整个 App.tsx 文件大致如下所示。本质上，这个文件控制了应用程序的外观和功能。它包括应用程序的不同部分，并添加了 RainbowKit 的连接按钮，使用户可以轻松连接他们的钱包。

文件路径：./src/App.tsx

import { ConnectButton } from "@rainbow-me/rainbowkit";
function App() {
  return (
    <div
      style={{
        display: "flex",
        justifyContent: "flex-end",
        padding: 12,
      }}
    >
      <ConnectButton />
    </div>
  );
}
export default App;

当所有内容在您的本地系统上成功运行后，您应该会看到类似如下的界面：4o

Berachain RainbowKit – Connect Button

当您点击“Connect Wallet”时，会出现一个类似下图的弹出窗口：

Berachain RainbowKit – Connect Wallet Modal

如果您点击任意一个钱包（如 Metamask），您应该能够连接您的钱包并选择您想要的链。

Berachain RainbowKit – Wallet Connected

恭喜您完成本教程并成功集成 RainbowKit！

完整代码

如果您想查看完整代码，请通过以下链接访问 Berachain 指南仓库，并找到本指南的模板，直接测试 dApp！

Berachain RainbowKit Full Source Code

总结

RainbowKit 提供了一系列实用工具，且不需要开发者投入太多精力。它与 Wagmi 库无缝集成，使开发者能够轻松使用 Wagmi 的功能，如消息签名和交易。

Berachain RainbowKit

Berachain RainbowKit – Wallet Connected

注意：Connect Wallet 按钮的对齐方式可能最初看起来与 SDK 不同——这是因为我们对 CSS 进行了些许修改。

本指南展示了如何设置带有 RainbowKit 的 Vite 项目，以与 Berachain 的 Artio 测试网一起使用，简化钱包连接并帮助开发者设置他们的 dApp 用户引导流程。

🛠️ 想要开发和如何获得支持？

如果您有兴趣进一步了解和开发 Berachain，可以尝试官方指南仓库中提供的各种示例代码库。

Berachain 指南

如何获得开发者支持？

⚠️ 仍然遇到问题或有疑问？

前往官方 Berachain Discord，如下图所示提交工单！

我们的 DevRel 团队很乐意为您提供帮助！🤝

回头见，熊熊们！🐻

❤️ 别忘了为这篇文章点个赞 👏🏼

原创文章，作者：Erica，如若转载，请注明出处：https://www.dappchaser.com/fair-random-nft-mints-with-pyth-entropy-on-berachain-2/