使用 RainbowKit 和 React 制作漂亮的 Connect Wallet 按钮

使用 RainbowKit 和 React 制作漂亮的 Connect Wallet 按钮

Web3 中的身份验证非常简单，但支持所有钱包并制作漂亮的 UI 可能会很痛苦且耗时。值得庆幸的是，有许多库也使这变得非常容易。今天我们来看看添加 彩虹套装 到一个 React 应用程序。

什么是彩虹套件？

RainbowKit 是一个 React 库，它为我们提供了用几行代码构建 Connect Wallet UI 的组件。它支持许多钱包，包括 Metamask、Rainbow、Coinbase Wallet、WalletConnect 等等。它也非常可定制，并带有惊人的内置主题。

RainbowKit 使用 以太坊.js 和 瓦格米 ，这两个流行的图书馆在这个空间，在引擎盖下。

而且，它是由美丽背后的同一团队开发的 彩虹钱包

创建一个新的 Next.js 应用程序

运行以下命令来创建一个新的 Next.js 应用程序（请注意，您也可以在常规 React 应用程序上使用它）：

现在，进入项目目录并在您喜欢的代码编辑器中打开它。

将 RainbowKit 添加到我们的 React 应用程序

运行以下命令来安装 RainbowKit 及其对等依赖项：

现在将以下代码添加到 页面/_app.js ：

首先，我们导入 RainbowKit 样式， RainbowKitPovider 和其他功能来配置我们的链，以及 WagmiProvider .

接下来，我们配置我们想要支持的链。在此示例中，我添加了 Ethereum 主网、Polygon 主网、Goerli 和 Rinkeby（都是 Ethereum 测试网络）以及 Polygon Mumbai 测试网。我们使用公共后备 RPC URL 来为我们的 API 提供者进行此演示。 RainbowKit 还允许我们为我们的 API 提供者指定我们自己的 JSON RPC URL 或 Alchemy 或 Infura URL。你可以看到 API Providers 文档在这里 .

接下来，我们创建我们的 wagmi客户端 , 传入 自动连接 并将其设置为 真的 .我们的应用程序将通过这种方式自动重新连接到上次使用的连接器。

最后，我们用 WagmiProvider 和 RainbowKitProvider .

接下来，让我们将 Connect Wallet 按钮添加到我们的应用程序中。替换中的代码 页面/index.js 具有以下内容：

现在运行 npm 运行开发 或者 纱线开发 并打开 本地主机：3000 在您的浏览器中，您应该会看到：

设置为黑暗模式

是时候确保我们的眼睛不再燃烧了。

前往 页面/_app.js 并导入 午夜主题 RainbowKit 中的函数。 （或者，您也可以导入 黑暗主题 功能，午夜的调光版本）：

我们还必须将我们的主题传递给 RainbowKitProvider ：

 <RainbowKitProvider chains={chains} theme={midnightTheme()}>

RainbowKit 支持更高级的主题化，你可以看到 RainbowKit 主题文档在这里 了解更多信息。

此外，将这一小段代码添加到 样式/globals.css 使我们的应用程序也成为暗模式：

 身体 {  
 背景颜色：#010101；  
 颜色：#f0f0f0；  
 }

现在我们的应用应该是这样的

RainbowKit 之旅

使用钱包进行身份验证后，我们的连接按钮将自动更改为网络切换器，该切换器还会向我们显示我们的余额和钱包地址。切换网络就像点击网络切换器然后选择我们要切换到的网络一样简单：

单击我们的钱包地址会给我们一个模式，可以选择复制我们的地址或断开我们的钱包：

酷模式

让我们的应用程序更酷一点 😃 只需添加 酷模式 支持 RainbowKitProvider ：

 <RainbowKitProvider chains={chains} theme={midnightTheme()} coolMode>

现在，如果我们单击连接模式中的任何选项，我们将得到一些令人惊叹的五彩纸屑

结论

那是 RainbowKit 可以做什么的基本演示，但它可以做的更像是显示最近的交易。了解更多信息的最佳地点是 RainbowKit 文档 .

重要链接

• 源代码
• 彩虹套装
• RainbowKit GitHub

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/39046/39512411