@3rdweb/react 中文文档教程

Question

Thirdweb React

Introduction

欢迎来到 Thirdweb 组件库。 这个包为您提供了可扩展的组件来处理您应用程序的 web3 端。

我们简化了将 web3 集成到您的应用程序中的过程，同时确保您仍然拥有与使用其他较低级别的 web3 前端库一样的所有控制权。

我们的主要功能是：

• Support for most commonly used web3 providers including: MetaMask, WalletConnect, Coinbase Wallet, and Magic Link.
• An app wide context containing an ethers.js or web3.js instance with everything you need to integrate with the blockchain.
• Easy-to-use plug-and-play components that let you implement complex and fully-featured web3 app setups with only a few lines of code.

Getting Started

要开始使用 Thirdweb 组件库，您只需设置 ThirdwebProvider，它提供您的应用程序使用的所有上下文，并允许您使用我们的自定义组件。

设置此上下文就像使用以下设置包装您的应用程序一样简单：

import { ThirdwebProvider } from "@3rdweb/react";

const App = ({ children }) => {
  // Put the ethereum chain ids of the chains you want to support
  const supportedChainIds = [1, 4, 137];

  /**
   * Include the connectors you want to support
   * injected - MetaMask
   * magic - Magic Link
   * walletconnect - Wallet Connect
   * walletlink - Coinbase Wallet
   */
  const connectors = {
    injected: {},
    magic: {
      apiKey: "pk_...", // Your magic api key
      chainId: 1, // The chain ID you want to allow on magic
    },
    walletconnect: {},
    walletlink: {
      appName: "thirdweb - demo",
      url: "https://thirdweb.com",
      darkMode: false,
    },
  };

  /**
   * Make sure that your app is wrapped with these contexts.
   * If you're using Next JS, you'll have to replace children with the Component setup
   */
  return (
    <ThirdwebProvider 
      supportedChainIds={supportedChainIds}
      connectors={connectors}
    >
      {children}
    </ThirdwebProvider>
  );
};

Connect Wallet & Web3 Setup

目前，我们为您提供组件以轻松将 web3 集成到您的应用程序中并设置应用程序范围的上下文，而无需处理较低级别的 web3 的复杂性配置。

您可以使用我们完全配置的 ConnectWallet 组件来处理所有 web3 连接和集成，包括钱包连接和网络切换。 这是使用 Thirdweb 组件库的最简单方法。

Use Connect Wallet

使用我们的 ConnectWallet 组件是将 web3 集成到您的应用程序中的最简单方法，完成网络切换、钱包连接和您需要的一切。 添加我们的连接钱包按钮非常简单，如下所示：

import React from "react";
import { ConnectWallet } from "@3rdweb/react";

const Connect = () => {
  return <ConnectWallet />;
};

您可以将此按钮放在应用程序的任何位置，它将显示一个钱包连接，其中显示已连接的链、钱包地址和余额信息，以及一个功能齐全的连接管理器模式。

要使用我们的 ConnectWallet 按钮进行功能齐全的设置，您可以查看我们的 NextJS 示例连接页面。

Access Web3 Setup

使用上述方法设置钱包连接后，访问连接的 web3 提供商及其相关信息如下所示：

import React from "react";
import { useWeb3 } from "@3rdweb/react";

const Component = () => {
  // You can do whatever you want with this data
  const { address, chainId, provider } = useWeb3();

  return (
    <div>
      Address: {address}
      <br />
      Chain ID: {chainId}
    </div>
  );
};