如何通过 Thirdweb SDK 连接 Berachain 钱包

Rama Ai • 2024年5月1日 13:43 • Berachain • 阅读 695

本指南详细介绍了如何使用 Thirdweb SDK 构建 Berachain 上的钱包 dApp，并通过 Thirdweb SDK（一个完整的 Web3 开发平台和构建区块链应用的强大工具）在你的 Web3 应用中添加“连接钱包”按钮。

导言

在 Web3 时代，用户钱包的集成已经成为去中心化应用（dApp）不可或缺的一部分。无论是处理交易、与智能合约交互，还是查询链上数据，连接钱包的功能都是实现这一切的关键。在本教程中，我们将带您逐步构建一个基于 Berachain 的 dApp，学习如何使用 Thirdweb SDK 实现“连接钱包”按钮，并定制以支持 Berachain Artio。通过这一过程，您不仅能掌握 Web3 开发的基础，还能优化用户体验，让用户安全、便捷地与您的应用程序交互。

如何通过 Thirdweb SDK 连接 Berachain 钱包

Bm bm! 🐻

在不断发展的 Web3 应用程序领域，用户钱包的集成不仅仅是一个功能，而是一个基本的必要条件。

本指南详细介绍了如何使用 Thirdweb SDK 构建 Berachain 上的钱包 dApp，并通过 Thirdweb SDK（一个完整的 Web3 开发平台和构建区块链应用的强大工具）在你的 Web3 应用中添加“连接钱包”按钮。

我们将探索集成的每一个步骤，理解其重要性，确保即使是新手开发者熊 🐻 也能够顺利设置他们的 dApps 以连接 Berachain Artio！

作为额外的奖励，凡是完整阅读教程的人——我们还添加了额外步骤，展示如何捕获试图与您的 dApp 进行交互的用户钱包地址。 🤓

🤔 为什么需要“连接钱包”按钮？ 在 Web3 应用程序中，用户交互高度依赖于区块链交易，这需要一种安全且高效的方式将用户钱包连接到应用程序。这个连接使得与智能合约的无缝交互成为可能，从执行交易到查询区块链数据，功能范围广泛。

“连接钱包”按钮不仅仅是用户界面元素，它是将去中心化的区块链世界与用户为中心的应用程序界面联系起来的桥梁。它确保用户能够安全地与您的应用程序进行交互，同时保持对其数字资产和身份的控制。

🛠️ 我们正在构建什么？

如何通过 Thirdweb SDK 连接 Berachain 钱包

Berachain Thirdweb Connect Button Landing Page

如何通过 Thirdweb SDK 连接 Berachain 钱包

Berachain Thirdweb Connect Button (连接 Metamask 之后)

如何通过 Thirdweb SDK 连接 Berachain 钱包

Expanded Menu — Connect Wallet Button

在这份全面的指南中，我们将构建一个基于 Berachain 的 dApp，它将作为开发者尝试通过“连接钱包”按钮将其他开发者引入其 dApps 的一站式模板。

这个功能不仅仅是一个技术需求，而是通往 Berachain 生态系统的入口，为用户提供安全与您的应用程序交互的能力。请记住，“连接钱包”按钮不仅仅是一个工具，它是用户在您的应用程序中旅程的第一步。

现有的模板可在 Berachain 官方仓库中找到——

https://github.com/berachain/guides/tree/main/apps/thirdweb-connectwallet-nextjs

如何通过 Thirdweb SDK 连接 Berachain 钱包

Berachain Guide Repo — Thirdweb dApp Template

先决条件

  1. 需要 Node.js 版本 > 20 以及最新的 npm。如有需要，请参考此指南：https://docs.npmjs.com/downloading-and-installing-node-js-and-npm。
  2. 需要使用 IDE，例如 VScode、Replit 等等。

设置项目

创建一个强大的基础对于开发任何应用程序至关重要。让我们通过 Thirdweb 设置项目环境。

步骤 1：使用 Thirdweb 创建新应用

使用 Thirdweb 创建您的应用是构建 Web3 应用程序的第一步。以下是操作方法：

  1. 启动终端：首先打开终端。您将在此输入命令来创建项目。
  2. 运行创建命令：在终端中输入 npx thirdweb@latest create app。该命令将获取 Thirdweb 的最新版本，并启动 Web3 应用程序的创建。
npx thirdweb@latest create app 
# Need to install the following packages: 
# thirdweb@0.13.43 
# Ok to proceed? (y) y 
# npm WARN deprecated @safe-global/safe-ethers-lib@1.9.4: WARNING: This package is now bundled in @safe-global/protocol-kit. Please, follow the migration guide https://docs.safe.global/safe-core-aa-sdk/protocol-kit/reference/v1 
 
#     $$\     $$\       $$\                 $$\                         $$\        
#     $$ |    $$ |      \__|                $$ |                        $$ |       
#   $$$$$$\   $$$$$$$\  $$\  $$$$$$\   $$$$$$$ |$$\  $$\  $$\  $$$$$$\  $$$$$$$\   
#   \_$$  _|  $$  __$$\ $$ |$$  __$$\ $$  __$$ |$$ | $$ | $$ |$$  __$$\ $$  __$$\  
#     $$ |    $$ |  $$ |$$ |$$ |  \__|$$ /  $$ |$$ | $$ | $$ |$$$$$$$$ |$$ |  $$ | 
#     $$ |$$\ $$ |  $$ |$$ |$$ |      $$ |  $$ |$$ | $$ | $$ |$$   ____|$$ |  $$ | 
#     \$$$$  |$$ |  $$ |$$ |$$ |      \$$$$$$$ |\$$$$$\$$$$  |\$$$$$$$\ $$$$$$$  | 
#      \____/ \__|  \__|\__|\__|       \_______| \_____\____/  \_______|\_______/  
 
#  💎 thirdweb v0.13.43 💎

输入“y”并按回车继续。安装完成后，系统会给出多个其他选项，首先是“? What is your project named?”。按照下文中的“项目配置”步骤操作。

3. 项目配置：

  • 命名您的项目： 给您的项目分配一个名称，例如“Connect”。这有助于在您的工作区中识别项目。
  • 注意：我们经常收到关于“无法选择自定义名称”的支持问题，请确保按下键盘上的“Tab”键，系统会高亮显示“thirdweb-app”——然后您就可以进行更改了。
  • 框架和语言选择： 选择适合您开发风格的框架（例如 Next.js），并根据您的熟练程度和项目需求选择编程语言（例如 TypeScript）。但在本教程中，我们将使用 Next.js 作为框架，TypeScript 作为编程语言。
  • 选择新项目的保存路径： 选择项目将要保存的路径。

在终端中的整体输出应类似于——

# 💎 thirdweb v0.13.43 💎 
 
# ✔ What is your project named? … berathirdwebWallet 
# ✔ What framework do you want to use? › Next.js 
# ✔ What language do you want to use? › TypeScript 
# Creating a new thirdweb app in /Users/dethebera/BeraWork/berachain-thridweb/berachainThirdweb/berathirdwebwallet. 
 
# Downloading files with framework next. This might take a moment. 
# Installing packages. This might take a couple of minutes. 
 
# yarn install v1.22.21 
# info No lockfile found. 
# [1/4] 🔍  Resolving packages... 
# warning @thirdweb-dev/react > @thirdweb-dev/wallets > @magic-ext/connect@6.7.2: Connect extension has been merged to magic-sdk, please download the latest magic-sdk to unlock more features 
# warning @thirdweb-dev/react > @thirdweb-dev/wallets > @safe-global/safe-core-sdk@3.3.5: WARNING: This project has been renamed to @safe-global/protocol-kit. Please, follow the migration guide https://docs.safe.global/safe-core-aa-sdk/protocol-kit/reference/v1 
# warning @thirdweb-dev/react > @thirdweb-dev/wallets > @safe-global/safe-ethers-adapters > @safe-global/safe-core-sdk@3.3.5: WARNING: This project has been renamed to @safe-global/protocol-kit. Please, follow the migration guide https://docs.safe.global/safe-core-aa-sdk/protocol-kit/reference/v1 
# warning @thirdweb-dev/react > @thirdweb-dev/wallets > @safe-global/safe-ethers-lib@1.9.4: WARNING: This package is now bundled in @safe-global/protocol-kit. Please, follow the migration guide https://docs.safe.global/safe-core-aa-sdk/protocol-kit/reference/v1 
# warning @thirdweb-dev/react > @thirdweb-dev/wallets > @blocto/sdk > eip1193-provider@1.0.1: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info. 
# warning @thirdweb-dev/react > @thirdweb-dev/wallets > @safe-global/safe-core-sdk > zksync-web3@0.14.4: This package has been deprecated in favor of zksync-ethers@5.0.0 
# warning @thirdweb-dev/react > @thirdweb-dev/wallets > @blocto/sdk > eip1193-provider > @json-rpc-tools/provider@1.7.6: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info. 
# warning @thirdweb-dev/react > @thirdweb-dev/sdk > @thirdweb-dev/storage > cid-tool > cids@1.1.9: This module has been superseded by the multiformats module 
# warning @thirdweb-dev/react > @thirdweb-dev/sdk > @thirdweb-dev/storage > cid-tool > multibase@4.0.6: This module has been superseded by the multiformats module 
# warning @thirdweb-dev/react > @thirdweb-dev/sdk > @thirdweb-dev/storage > cid-tool > cids > multibase@4.0.6: This module has been superseded by the multiformats module 
# warning @thirdweb-dev/react > @thirdweb-dev/sdk > @thirdweb-dev/storage > cid-tool > multihashes > multibase@4.0.6: This module has been superseded by the multiformats module 
# warning @thirdweb-dev/react > @thirdweb-dev/wallets > @blocto/sdk > eip1193-provider > @json-rpc-tools/provider > @json-rpc-tools/utils@1.7.6: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info. 
# warning @thirdweb-dev/react > @thirdweb-dev/sdk > @thirdweb-dev/storage > cid-tool > cids > multicodec@3.2.1: This module has been superseded by the multiformats module 
# warning @thirdweb-dev/react > @thirdweb-dev/wallets > @walletconnect/modal > @walletconnect/modal-ui > motion > @motionone/vue@10.16.4: Motion One for Vue is deprecated. Use Oku Motion instead https://oku-ui.com/motion 
# warning @thirdweb-dev/react > @thirdweb-dev/wallets > @blocto/sdk > eip1193-provider > @json-rpc-tools/provider > @json-rpc-tools/utils > @json-rpc-tools/types@1.7.6: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info. 
# [2/4] 🚚  Fetching packages... 
# warning abitype@0.2.5: The engine "pnpm" appears to be invalid. 
# [3/4] 🔗  Linking dependencies... 
# warning "@thirdweb-dev/react > @thirdweb-dev/wallets > @magic-sdk/provider@13.6.2" has unmet peer dependency "localforage@^1.7.4". 
# warning "@thirdweb-dev/react > @thirdweb-dev/wallets > @safe-global/safe-ethers-adapters@0.1.0-alpha.17" has unmet peer dependency "@ethersproject/abstract-provider@^5.7.0". 
# warning "@thirdweb-dev/react > @thirdweb-dev/wallets > @safe-global/safe-ethers-adapters@0.1.0-alpha.17" has unmet peer dependency "@ethersproject/abstract-signer@^5.7.0". 
# warning "@thirdweb-dev/react > @thirdweb-dev/wallets > @safe-global/safe-ethers-adapters@0.1.0-alpha.17" has unmet peer dependency "@ethersproject/bignumber@^5.7.0". 
# warning "@thirdweb-dev/react > @thirdweb-dev/wallets > @safe-global/safe-ethers-adapters@0.1.0-alpha.17" has unmet peer dependency "@ethersproject/properties@^5.7.0". 
# warning "@thirdweb-dev/react > @thirdweb-dev/react-core > @thirdweb-dev/auth > fastify-type-provider-zod@1.1.9" has unmet peer dependency "fastify@^4.0.0". 
# [4/4] 🔨  Building fresh packages... 
# success Saved lockfile. 
# ✨  Done in 44.53s. 
 
# Initialized a git repository. 
 
# Success! Created berathirdwebwallet at /Users/dethebera/BeraWork/berachain-thridweb/berachainThirdweb/berathirdwebwallet 
# Inside that directory, you can run several commands: 
 
#   yarn dev 
#     Starts the development server. 
 
#   yarn build 
#     Builds the app for production. 
 
# We suggest that you begin by typing: 
 
#   cd berathirdwebwallet 
#   yarn dev

一旦你掌握了理解的艺术，成为了“OG 开发熊”，你会对为开发过程设定舞台和基调感到更加自信。选择合适的框架和语言非常重要，因为它会影响开发的便利性和应用的可扩展性。

💡 趣闻：Thirdweb SDK 支持多个框架，更多内容见下文。

测试现有模板

现在所有内容都已经安装好了。是时候测试模板，看看它自带了哪些功能，并根据需要规划对 Berachain Artio 的支持定制了！

在相同的终端中运行以下命令：

cd berathirdwebWallet  
yarn dev

然后在浏览器中搜索 http://localhost:3000。您应该能够看到类似于下图的输出。

如何通过 Thirdweb SDK 连接 Berachain 钱包

Thirdweb dApp on localhost

让我们将 Berachain 钱包连接到这个已有的 dApp，看看会发生什么。点击“连接钱包”按钮，并选择“Metamask”。

如何通过 Thirdweb SDK 连接 Berachain 钱包

Select Wallet Screen

有趣的是，这个模板本身几乎是可用的，并且确实能够正确读取钱包中的 $BERA 数量。

如何通过 Thirdweb SDK 连接 Berachain 钱包

不过，由于 Thirdweb 的现有模板使用“以太坊”作为模板和示例的标准，现有的 dApp 不知道 Berachain 是哪个链，也不知道它的代币符号/$BERA。

我们将在接下来的部分修复这个问题。

步骤 2：实现“连接钱包”按钮

“连接钱包”按钮是 Web3 应用程序中用户体验的核心。让我们来集成它。

  1. 准备工作区： 通过删除任何预先存在的模板代码来清理 index.tsx 文件。此文件将成为我们实现“连接钱包”按钮的画布。

下面是一个示例，展示了清理后的 index.tsx 文件的样子。

Filename:  ：./pages/index.tsx

import { ConnectWallet } from "@thirdweb-dev/react"; 
import styles from "../styles/Home.module.css"; 
import Image from "next/image"; 
import { NextPage } from "next"; 
 
const Home: NextPage = () => { 
  return ( 
    <main className={styles.main}> 
      <div className={styles.container}> 
        <div className={styles.header}> 
 
// ........ 
// deleted portion  
// ........ 
 
        </div> 
      </div> 
    </main> 
  ); 
}; 
 
export default Home;

2. 将“连接钱包”组件整合到此文件中，方法是在上面“已删除”的部分添加“<ConnectWallet />”。请注意，我们还对结构进行了更改，将 main 放在了 div 内。

Filename ：./pages/index.tsx

import { ConnectWallet } from "@thirdweb-dev/react"; 
import styles from "../styles/Home.module.css"; 
import Image from "next/image"; 
import { NextPage } from "next"; 
 
const Home: NextPage = () => { 
  return ( 
 
// Changes performed below   
    <div className={styles.container}> 
      <main className={styles.main}>  
        <ConnectWallet />  // Connect wallet button 
      </main> 
    </div> 
  );   
}; 
 
export default Home;

让我们再次检查一下我们的 dApp，您会注意到按钮出现在屏幕的左上角，而不是中间。

如何通过 Thirdweb SDK 连接 Berachain 钱包

这看起来有点奇怪，前往文件：Home.module.css —— 或者只需在代码的搜索栏中搜索“.container”。将现有的代码替换为以下代码。

Filename ： ./styles/Home.module.css

/* Changes performed below ----------------------*/ 
 
.container { 
  position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
} 
 
/* -----------------------------------------*/  
 
.gradientText0 { 
  background: -webkit-linear-gradient(#bfa3da, #84309c, #c735b0); 
  -webkit-background-clip: text; 
  background-clip: text; 
  -webkit-text-fill-color: transparent; 
} 
 
.gradientText1 { 
  background: -webkit-linear-gradient(#a79af9, #7aa8d2); 
  -webkit-background-clip: text; 
  background-clip: text; 
  -webkit-text-fill-color: transparent; 
} 
 
.gradientText2 { 
  background: -webkit-linear-gradient(#bfa3da, #743f93); 
  -webkit-background-clip: text; 
  background-clip: text; 
  -webkit-text-fill-color: transparent; 
} 
 
.gradientText3 { 
  background: -webkit-linear-gradient(#c35ab1, #e9a8d9); 
  -webkit-background-clip: text; 
  background-clip: text; 
  -webkit-text-fill-color: transparent; 
} 
 
.title a:hover, 
.title a:focus, 
.title a:active { 
  text-decoration: underline; 
  text-decoration-color: #84309c; 
} 
 
.title { 
  line-height: 1.15; 
  font-size: 4rem; 
} 
 
.title, 
.description { 
  text-align: left; 
} 
 
.connect { 
  margin-bottom: 2rem; 
} 
 
.description { 
  margin-top: 2rem; 
  margin-bottom: 2rem; 
  line-height: 1.5; 
  font-size: 1.5rem; 
} 
 
.code { 
  background: #555; 
  border-radius: 5px; 
  padding: 0.5em; 
  font-size: 1.1rem; 
} 
 
.grid { 
  display: flex; 
  justify-content: left; 
  flex-wrap: wrap; 
  gap: 20px; 
} 
 
.card { 
  background-color: #131313; 
  text-align: left; 
  color: inherit; 
  text-decoration: none; 
  border-radius: 10px; 
  transition: color 0.15s ease, border-color 0.15s ease; 
  max-width: 440px; 
  overflow: none; 
  border: none; 
} 
 
.cardText { 
  padding: 1rem; 
} 
 
.card img { 
  display: block; 
  width: 100%; 
  height: auto; 
  border-radius: 4px 4px 0 0; 
  margin-bottom: 12px; 
  border: none; 
} 
 
.card:hover, 
.card:focus, 
.card:active { 
  background-color: #272c34; 
  opacity: 80%; 
} 
 
.card h2 { 
  margin: 0 0 0.75rem 0; 
} 
 
.card p { 
  margin: 0; 
  font-size: 1rem; 
  line-height: 1.75; 
} 
 
.logo { 
  height: 1em; 
  margin-left: 0.5rem; 
} 
 
@media (max-width: 768px) { 
  .header { 
    margin-left: 0; 
  } 
  .grid { 
    width: 100%; 
    flex-direction: column; 
  } 
  .title { 
    font-size: 3rem; 
    line-height: 1.15; 
  } 
} 
 
.card, 
.footer { 
  border-color: #222; 
} 
.logo img { 
  filter: invert(1); 
}

不错，现在按钮对齐了。

如何通过 Thirdweb SDK 连接 Berachain 钱包

Button Centre Aligned After CSS Change

步骤 3：将按钮自定义为 Berachain Artio

自定义对于使按钮与您的应用程序的外观和感受保持一致，以及满足 Bera 用户的特定需求起着关键作用。

1.区块链选择： 在 app.tsx 文件中，我们需要指定您的应用程序主要与 Berachain Artio 交互。

鉴于 Artio 还非常新，我们并不期望所有优秀的开发工具像以太坊那样马上支持它，因为以太坊被大多数模板使用。不过，我们很快就会实现这一点 🙂

现在，让我们尝试直接输入“BerachainArtio”作为活动链，看看会发生什么。

如何通过 Thirdweb SDK 连接 Berachain 钱包

你会注意到它显示这是一个支持的链。然而事实并非如此，因为 Thirdweb SDK 的链来源于 Chainlist，而 Artio 支持已经被添加进去了。让我们来修复这个问题。

2. 导入 Berachain Artio：

我将向您展示一个惊人且简单的方式来完成 Berachain Artio 的自定义。

前往 https://thirdweb.com/chainlist 并搜索 Berachain Artio。

点击 Berachain Artio，向下滚动到“开始使用 Berachain Artio”部分。

如何通过 Thirdweb SDK 连接 Berachain 钱包

复制“import { BerachainArtio } from "@thirdweb-dev/chains";”并将其添加到 _app.tsx 文件中。

此外，函数 MyApp 中的 {activechain} 也需要更新。将其替换为 {BerachainArtio}。

最终的 _app.tsx 文件应如下所示……

Filename：/pages/_app.tsx

import type { AppProps } from "next/app"; 
import { ThirdwebProvider } from "@thirdweb-dev/react"; 
import "../styles/globals.css"; 
 
// Added import here  
import { BerachainArtio } from "@thirdweb-dev/chains"; 
 
 
// This is the chain your dApp will work on. 
// Change this to the chain your app is built for. 
// You can also import additional chains from `@thirdweb-dev/chains` and pass them directly. 
 
// Active Chain Replaced with Berachain Artio 
const activeChain = "BerachainArtio"; 
 
function MyApp({ Component, pageProps }: AppProps) { 
  return ( 
    <ThirdwebProvider 
      clientId={process.env.NEXT_PUBLIC_TEMPLATE_CLIENT_ID} 
      activeChain={BerachainArtio}   
    > 
      <Component {...pageProps} /> 
    </ThirdwebProvider> 
  ); 
} 
 
export default MyApp;

现在点击保存，让我们检查一下我们的“连接钱包”按钮。断开现有钱包的连接并刷新页面。

点击“连接钱包”按钮，并通过 Metamask 登录。

如何通过 Thirdweb SDK 连接 Berachain 钱包

有任何明显的变化吗？……🤔 仔细看你会发现，钱包显示的不是“ETH”，而是“BERA”。

如何通过 Thirdweb SDK 连接 Berachain 钱包

展开钱包后，我们可以看到它甚至识别了 Berachain Artio 及其官方标志。

步骤 5：配置支持的钱包

如果你想支持其他钱包——Thirdweb 现在通过现有的模板支持大多数流行的钱包。让我们看看配置钱包的简要步骤。

  1. 定义支持的链和钱包： 以数组格式明确列出您的应用程序支持的链和钱包。这种清晰性对于用户了解应用的功能和限制至关重要。
  3. 加入多样的钱包选项： 添加更多钱包选项，例如智能钱包或邮箱钱包，以增加可访问性和用户选择。
  5. 只包括 Metamask？ 假设你想构建一个只显示一个钱包（如 Metamask）的 dApp，不显示其他钱包，你该如何实现呢？

让我们看看现有的 _app.tsx 文件，并在 activeChain 后面添加一个 supportedWallets 属性。

Filename：./pages/_app.tsx

import type { AppProps } from "next/app"; 
import { ThirdwebProvider } from "@thirdweb-dev/react"; 
import "../styles/globals.css"; 
 
// Added import here  
import { BerachainArtio } from "@thirdweb-dev/chains"; 
 
// This is the chain your dApp will work on. 
// Change this to the chain your app is built for. 
// You can also import additional chains from `@thirdweb-dev/chains` and pass them directly. 
 
// Active Chain Replaced with Berachain Artio 
const activeChain = "BerachainArtio"; 
function MyApp({ Component, pageProps }: AppProps) { 
   
// supportedWallets  
return ( 
    <ThirdwebProvider 
      clientId={process.env.NEXT_PUBLIC_TEMPLATE_CLIENT_ID} 
      activeChain={BerachainArtio} 
      supportedWallets={[ 
        metamaskWallet() 
      ]} 
    > 
      <Component {...pageProps} /> 
    </ThirdwebProvider> 
  ); 
} 
 
export default MyApp;

现在，这将仅提供 Metamask 作为默认钱包选项，点击“连接钱包”按钮时，Metamask 将自动启动，无需用户选择钱包。

这是节省步骤并确保顺畅引导流程的一个好选择。

步骤 6：为按钮设置样式

1.主题自定义： 在深色和浅色主题之间选择，以匹配应用程序的美学。属性：theme

Thirdweb 目前支持深色和浅色主题。在本指南中，我们选择浅色主题。

在 index.tsx 中，在 <ConnectWallet /> 下添加 theme="light"。

文件名：./pages/index.tsx

import { ConnectWallet, useAddress } from "@thirdweb-dev/react"; 
import styles from "../styles/Home.module.css"; 
import Image from "next/image"; 
import { NextPage } from "next"; 
 
const Home: NextPage = () => { 
  const address = useAddress(); 
  console.log(address); 
 
  return ( 
    <div className={styles.container}> 
      <main className={styles.main}> 
        <ConnectWallet 
          theme="light" 
          btnTitle="Bera Connect" 
          className={styles.beraWallet} 
        /> 
      </main> 
    </div> 
  ); 
}; 
 
export default Home;

2.按钮文本和 CSS 样式： 更改按钮文本以更好地集成到应用程序的用户流程中。应用自定义 CSS 样式，使按钮成为您应用设计语言的无缝部分。

属性：btnTitle，className

在这里，我们将把“Connect Wallet”更改为“Bera Connect”，并通过 className 更改按钮的颜色，使其更符合 Berachain 的品牌风格。

在 theme 下方添加以下代码。

Filename：./pages/_app.tsx

import type { AppProps } from "next/app"; 
import { ThirdwebProvider, metamaskWallet } from "@thirdweb-dev/react"; 
import "../styles/globals.css"; 
import { BerachainArtio } from "@thirdweb-dev/chains"; 
 
// This is the chain your dApp will work on. 
// Change this to the chain your app is built for. 
// You can also import additional chains from `@thirdweb-dev/chains` and pass them directly. 
const activeChain = "BerachainArtio"; 
 
function MyApp({ Component, pageProps }: AppProps) { 
  return ( 
    <ThirdwebProvider 
      clientId={process.env.NEXT_PUBLIC_TEMPLATE_CLIENT_ID} 
      activeChain={BerachainArtio} 
      supportedWallets={[ 
        metamaskWallet() 
      ]} 
    > 
      <Component {...pageProps} /> 
    </ThirdwebProvider> 
  ); 
} 
 
export default MyApp;

现在前往 Home.module.css 文件，并在文件末尾添加以下代码。

文件名：./styles/Home.module.css

/* add the following to the end of the css file*/ 
 
.beraWallet { 
 background-color: ##2C1A16 !important; 
}

教程中使用的完整代码

Filename: ./pages/_app.tsx

import type { AppProps } from "next/app"; 
import { ThirdwebProvider, metamaskWallet } from "@thirdweb-dev/react"; 
import "../styles/globals.css"; 
import { BerachainArtio } from "@thirdweb-dev/chains"; 
 
 
// This is the chain your dApp will work on. 
// Change this to the chain your app is built for. 
// You can also import additional chains from `@thirdweb-dev/chains` and pass them directly. 
const activeChain = "BerachainArtio"; 
 
function MyApp({ Component, pageProps }: AppProps) { 
  return ( 
    <ThirdwebProvider 
      clientId={process.env.NEXT_PUBLIC_TEMPLATE_CLIENT_ID} 
      activeChain={BerachainArtio} 
      supportedWallets={[ 
        metamaskWallet() 
      ]} 
    > 
      <Component {...pageProps} /> 
    </ThirdwebProvider> 
  ); 
} 
 
export default MyApp;

Filename: ./pages/_app.tsx

import { ConnectWallet, useAddress } from "@thirdweb-dev/react"; 
import styles from "../styles/Home.module.css"; 
import Image from "next/image"; 
import { NextPage } from "next"; 
 
const Home: NextPage = () => { 
  const address = useAddress(); 
  console.log(address); 
 
  return ( 
    <div className={styles.container}> 
      <main className={styles.main}> 
        <ConnectWallet 
          theme="light" 
          btnTitle="Bera Connect" 
          className={styles.beraWallet} 
        /> 
      </main> 
    </div> 
  ); 
}; 
 
export default Home;

Filename: ./styles/globals.css

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap"); 
html, 
body { 
  padding: 0; 
  margin: 0; 
  font-family: "Inter", sans-serif; 
} 
a { 
  color: #84309c; 
  text-decoration: none; 
} 
* { 
  box-sizing: border-box; 
} 
body { 
  color: #e7e8e8; 
  background: #F47226; 
}

Filename: ./styles/Home.module.css

.container { 
  position: absolute; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
} 
 
.gradientText0 { 
  background: -webkit-linear-gradient(#bfa3da, #84309c, #c735b0); 
  -webkit-background-clip: text; 
  background-clip: text; 
  -webkit-text-fill-color: transparent; 
} 
 
.gradientText1 { 
  background: -webkit-linear-gradient(#a79af9, #7aa8d2); 
  -webkit-background-clip: text; 
  background-clip: text; 
  -webkit-text-fill-color: transparent; 
} 
 
.gradientText2 { 
  background: -webkit-linear-gradient(#bfa3da, #743f93); 
  -webkit-background-clip: text; 
  background-clip: text; 
  -webkit-text-fill-color: transparent; 
} 
 
.gradientText3 { 
  background: -webkit-linear-gradient(#c35ab1, #e9a8d9); 
  -webkit-background-clip: text; 
  background-clip: text; 
  -webkit-text-fill-color: transparent; 
} 
 
.title a:hover, 
.title a:focus, 
.title a:active { 
  text-decoration: underline; 
  text-decoration-color: #84309c; 
} 
 
.title { 
  line-height: 1.15; 
  font-size: 4rem; 
} 
 
.title, 
.description { 
  text-align: left; 
} 
 
.connect { 
  margin-bottom: 2rem; 
} 
 
.description { 
  margin-top: 2rem; 
  margin-bottom: 2rem; 
  line-height: 1.5; 
  font-size: 1.5rem; 
} 
 
.code { 
  background: #555; 
  border-radius: 5px; 
  padding: 0.5em; 
  font-size: 1.1rem; 
} 
 
.grid { 
  display: flex; 
  justify-content: left; 
  flex-wrap: wrap; 
  gap: 20px; 
} 
 
.card { 
  background-color: #131313; 
  text-align: left; 
  color: inherit; 
  text-decoration: none; 
  border-radius: 10px; 
  transition: color 0.15s ease, border-color 0.15s ease; 
  max-width: 440px; 
  overflow: none; 
  border: none; 
} 
 
.cardText { 
  padding: 1rem; 
} 
 
.card img { 
  display: block; 
  width: 100%; 
  height: auto; 
  border-radius: 4px 4px 0 0; 
  margin-bottom: 12px; 
  border: none; 
} 
 
.card:hover, 
.card:focus, 
.card:active { 
  background-color: #272c34; 
  opacity: 80%; 
} 
 
.card h2 { 
  margin: 0 0 0.75rem 0; 
} 
 
.card p { 
  margin: 0; 
  font-size: 1rem; 
  line-height: 1.75; 
} 
 
.logo { 
  height: 1em; 
  margin-left: 0.5rem; 
} 
 
@media (max-width: 768px) { 
  .header { 
    margin-left: 0; 
  } 
  .grid { 
    width: 100%; 
    flex-direction: column; 
  } 
  .title { 
    font-size: 3rem; 
    line-height: 1.15; 
  } 
} 
 
.card, 
.footer { 
  border-color: #222; 
} 
.logo img { 
  filter: invert(1); 
} 
 
.beraWallet { 
 background-color: #2C1A16 !important; 
}Additional: Accessing Wallet Address

附录：访问钱包地址

如何获取用户的钱包地址？

能够访问和使用钱包地址是任何 Web3 应用程序的基础功能，具有广泛的应用场景。让我们向您展示一种简单的方法来捕获将钱包连接到您 dApp 的用户的钱包地址。

能够访问和使用钱包地址是任何 Web3 应用程序的基础功能，具有广泛的应用场景。让我们向您展示一种简单的方法来捕获将钱包连接到您 dApp 的用户的钱包地址。

步骤 7：使用 Use Address Hook

1.实现 Hook： 在 index.tsx 中使用 useAddress hook 来捕获已连接钱包的地址。这对于交易和智能合约交互至关重要。

const Home: NextPage = () => { 
  const address = useAddress();

２.验证： 在控制台中显示获取到的地址，以验证集成是否成功以及功能是否正常。 

console.log(address);

现在，在连接钱包并在浏览器中打开控制台后，您将能够看到可用的钱包地址。

如何通过 Thirdweb SDK 连接 Berachain 钱包

整体来看，最终的 index.tsx 文件将如下所示。

Filename：./pages/index.tsx

import { ConnectWallet, useAddress } from "@thirdweb-dev/react"; 
import styles from "../styles/Home.module.css"; 
import Image from "next/image"; 
import { NextPage } from "next"; 
 
const Home: NextPage = () => { 
  const address = useAddress(); 
  console.log(address); 
 
  return ( 
    <div className={styles.container}> 
      <main className={styles.main}> 
        <ConnectWallet 
          theme="light" 
          btnTitle="Bera Connect" 
          className={styles.beraWallet} 
        /> 
      </main> 
    </div> 
  ); 
}; 
 
export default Home;

就这样！通过这个额外的步骤，您不仅创建了一个可以让用户连接钱包的 dApp，还能够看到用户的钱包地址。

更多 dApp 以及如何获取支持？

学习资源： 通过我们的文档 https://docs.berachain.com/developers 探索更多当前可用的指南。

https://docs.berachain.com/developers

如何获得支持？

Discord 社区： 加入 Thirdweb 的 Discord 社区，获取更多帮助、参与讨论，并随时了解 Web3 的最新动态。

⚠️ 仍然遇到问题或有疑问？前往 Discord，提交工单！

我们的开发关系团队将乐于提供帮助！🤝

回头见，开发熊们！🐻

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

原创文章，作者：Rama Ai，如若转载，请注明出处：https://www.dappchaser.com/berachain-wallet-connect-with-thirdweb-sdk/

赞 (6)
Rama Ai DApper
0 0
欢迎 IVX 加入 Archipelago
« 上一篇 2024年4月28日 22:10
如何在 Berachain Artio 测试网上使用 Envio SDK 进行索引 | 开发者必备
下一篇 » 2024年5月1日 18:26

相关推荐

发表评论

邮箱地址不会被公开。 必填项已用*标注

联系我们

邮件：contact@dappchaser.com

QR code