@3rdweb/hooks 中文文档教程

Question

Thirdweb Hooks

Introduction

欢迎来到 Thirdweb ReactnHooks 库。 这个包为你提供了可扩展的反应挂钩来处理你的应用程序的 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.

Getting Started

要开始使用我们的挂钩，您只需设置 ThirdwebWeb3Provider 即可提供您的应用使用的所有上下文。

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

import { ThirdwebWeb3Provider } from "@3rdweb/hooks";

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 (
    <ThirdwebWeb3Provider 
      supportedChainIds={supportedChainIds}
      connectors={connectors}
    >
      {children}
    </ThirdwebWeb3Provider>
  );
};

Use Custom Hooks

您可以使用我们的 useWeb3 和 useSwitchNetwork 挂钩构建您自己的连接钱包按钮。

您可以在以下示例中看到如何使用这些挂钩。

import React, { useState } from "react"
import { useWeb3, useSwitchNetwork } from "@3rdweb/hooks"

const supportedChainIds = [1, 4, 137];

const CustomConnect = () => {
  const { address, chainId, connectWallet, disconnectWallet, getNetworkMetadata } = useWeb3();
  const { switchNetwork } = useSwitchNetwork();
  const [email, setEmail] = useState("");

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

      {address && (
        <button onClick={disconnectWallet}>
          Disconnect
        </button>
      )}

      <p>Switch Network</p>
      {supportChainIds.map((cId) => (
        <button onClick={() => switchNetwork(cId)}>
          {getNetworkMetadata(cId).chainName}
        </button>
      ))}

      <input value={email} onChange={e => setEmail(e.target.value)} />
      <button
        onClick={() => connectWallet("magic", {
          email
        })}
      >
        Connect Magic Link
      </button>

      <button onClick={() => connectWallet("injected")}>
        Connect MetaMask
      </button>
      <button onClick={() => connectWallet("walletconnect")}>
        Connect Wallet Connect
      </button>
      <button onClick={() => connectWallet("walletlink")}>
        Connect Coinbase Wallet
      </button>
    <>
  )
}

要使用我们的自定义挂钩进行功能齐全的设置，您可以查看我们的 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>
  );
};