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 不會消失，而且很可能您最終需要將其包含在您的一個專案中。誰知道，您甚至可能成為加密貨幣愛好者！如果是這樣的話，這就是您開始旅程的方式。

連結

• 示範
• 程式碼庫