Web3 肯定会继续存在。比特币、以太坊、Solana 等网络正在快速发展，所有应用程序都建立在它们之上。

如果您是 JavaScript 开发人员并想尝试 Web3，第一步就是安装 Metamask。从那里，您可以使用 Metamask 注入浏览器的 window.ethereum 对象上可用的 API 方法之一。

任何 Web3 项目通常都是从连接钱包开始的。在 Web3 中，钱包就像一个用户帐户，但与 Gmail、Instagram 或 TikTok 等中心化服务的帐户不同，钱包是去中心化网络本身的核心部分。 Metamask 充当代理，使其更容易与网络交互并执行创建钱包等操作。虽然还有其他创建钱包的方法，但 Metamask 是迄今为止最常见的方法。

考虑到这一点，让我们构建一个允许用户连接钱包的 Web 应用程序。

先决条件

您需要在浏览器中安装 Metamask 扩展程序，或者您可以在移动设备上下载他们的应用程序 - 这两个选项都可以。

图表

让我们看一下下图，它概述了 Web 应用程序的流程：

逻辑

逻辑很简单，分为以下几个步骤：

• 如果未安装 Metamask： 显示下载 Metamask 的链接。

这很简单——当安装 Metamask 时，它会注入 window.ethereum 对象。如果该对象不存在，我们可以假设 Metamask 尚未安装或启用。

• 如果钱包未连接： 显示连接钱包的按钮。

如果window.ethereum可用，我们可以显示一个“连接”按钮，供用户链接他们的钱包。

• 如果钱包已连接： 显示钱包地址。

window.ethereum提供的关键方法之一是request，可以使用它来请求帐户，如下所示：

   const accounts = await window.ethereum?.request({
     method: "eth_requestAccounts",
     params: [],
   });

   setAddress(accounts[0]);

这会提示用户访问钱包。如果他们授予权限，该方法将返回帐户数组。为了简单起见，我们将获取第一个帐户并显示其地址。

演示

如果您在未安装 Metamask 的情况下打开演示，您应该会看到如下内容：

安装 Metamask 后，您应该会看到一个“连接”按钮。单击时，Metamask 将提示您选择要连接的帐户。查看以下 GIF 的视觉示例：

注意最终状态如何显示钱包地址。尽管这个演示非常简单，但每个 Web3 应用程序都需要一个连接的钱包。有一些很棒的库，例如 RainbowKit 和 WAGMI，可以简化 Web3 集成。然而，在这个演示中，我使用简单的 Metamask API 方法来实现相同的结果。当然，还有许多边缘情况我尚未处理，例如如果用户拒绝访问或拥有多个帐户会发生什么 - 这只是可能出现的各种场景的几个示例。

代码

完整代码可以在GitHub上找到。

"use client";

import { MetaMaskInpageProvider } from "@metamask/providers";

import { useState, useEffect } from "react";

declare global {
  interface Window {
    ethereum?: MetaMaskInpageProvider;
  }
}

function Button(props: { connectWalletHandler: () => void; address: string }) {
  const styles = {
    display: "inline-block",
    padding: "20px 40px",
    border: "5px solid black",
    fontSize: 24,
    cursor: "pointer",
  };

  if (props.address) {
    const shortAddress = `${props.address.slice(0, 7)}...${props.address.slice(
      -5
    )}`;
    return 
Wallet: {shortAddress}
;
  }

  if (window.ethereum) {
    return (
      

        Connect wallet
      
    );
  }

  return (
    
      Install Metamask
    
  );
}

export default function Page() {
  const [clientSide, setClientSide] = useState(false);
  const [address, setAddress] = useState("");

  const connectWalletHandler = async () => {
    const accounts = await window.ethereum?.request({
      method: "eth_requestAccounts",
      params: [],
    });

    if (!Array.isArray(accounts) || !accounts.length) {
      return;
    }

    setAddress(accounts[0]);
  };

  useEffect(() => {
    setClientSide(true);
  }, []);

  if (!clientSide) {
    return >;
  }

  return (
    

      
    
  );
}

结论

这是一个非常基本的演示，大部分代码只是标准的 React。事实上，唯一与Web3相关的行是：

await window.ethereum?.request({
  method: "eth_requestAccounts",
  params: [],
});

Metamask 有替代品，这些钱包还注入一个类似于 window.ethereum 的对象，用于与其 API 交互。

您始终可以选择一个库，如前面提到的库，它可以处理 Web3 集成所需的大部分样板文件，并让您专注于业务和 UI 逻辑。

Web3 不会消失，而且很可能您最终需要将其包含在您的一个项目中。谁知道，您甚至可能成为加密货币爱好者！如果是这样的话，这就是您开始旅程的方式。

链接

• 演示
• 代码库