How to call the MetaMask extension to transfer with React.js?

How to call MetaMask？

// 安裝該依賴 並引用
import { useMetaMask } from 'metamask-react';
// 使用該鉤子 獲取小狐狸錢包資訊 鏈id是十六進制 例如以太坊鏈是0x1
const { status, connect, account, chainId: hexChainId, ethereum } = useMetaMask();

// 判斷插件與錢包連線狀態
const metaMaskStatusMap = {
  initializing: 'initializing', // 初始化
  unavailable: 'unavailable', // 沒裝插件
  notConnected: 'notConnected', // 裝了 沒連上
  connecting: 'connecting', // 裝了 連接中
  connected: 'connected', // 裝了 連上
};

// 點擊按鈕 連上小狐狸錢包
  const handleConnectMetaMask = useCallback(async () => {
    console.log('handleConnectMetaMask');
    // 沒裝MetaMask插件
    if (status === metaMaskStatusMap.unavailable) {
      toast.error(t('Install the MetaMask plugin before using this feature'), {
        hideProgressBar: true,
      });
      return;
    }

    try {
      await connect(); // 連上 改變錢包狀態status
    } catch (error) {
      console.error('Failed to connect MetaMask wallet:', error);
    }
  }, [status, account]);

What is EVM?

以太坊虛擬機（Ethereum Virtual Machine，縮寫為 EVM）是以太坊區塊鏈平台的運行環境。用於執行以太坊智能合約的程式碼。

The Ethereum Virtual Machine (EVM) serves as the runtime environment for the Ethereum blockchain platform. It is responsible for executing the code of Ethereum smart contracts.

How to know the chain id on EVM？

確認代號 https://chainlist.org/zh?search=[幣種縮寫] 某些幣種可能在evm上沒有id，因為該幣種不是在evm上的合約

Web3 錢包轉帳的流程

連接至以太坊網路：首先，您需要使用 Web3 錢包（如 MetaMask、Trust Wallet 或 Coinbase Wallet）連接至以太坊網路。
建立交易：在您的錢包中，您可以選擇發起一筆轉帳交易。您需要指定目標地址（接收方的以太坊地址）、轉帳金額以及任何其他必要的參數（例如燃料價格和燃料限制）。
簽署交易：當您建立交易後，您的錢包會提示您簽署該交易。這意味著您使用錢包中的私鑰對該交易進行數字簽名，以證明您是該地址的合法擁有者。簽署交易後，您的錢包將生成一個已簽名的交易。
廣播交易：一旦交易被簽署，您的錢包將把已簽名的交易傳送給以太坊網路。這個過程稱為交易的廣播。您的錢包會將交易發送到與您連接的以太坊節點，然後節點將把交易廣播給整個網路。
確認交易：交易廣播後，以太坊網路中的節點開始驗證和處理該交易。一旦交易被確認，它將被打包到一個區塊中，並且成為區塊鏈的一部分。交易的確認時間取決於網路擁塞程度和您設定的燃料價格
交易完成：當交易被確認後，資金將從您的錢包轉移到接收方的地址。您可以在區塊鏈上查看該交易的詳細信息。
使用ethers.js： ethers.js 是一個用於與以太坊區塊鏈進行交互的 JavaScript library。也可用Web3.js但體積大很多。

Web3 Wallet Transaction Flow

1. Connect to the Ethereum Network:

Begin by connecting your Web3 wallet (like MetaMask, Trust Wallet, or Coinbase Wallet) to the Ethereum network.