react 連動 chrome metamask 錢包地址

我一直在想要怎要打標題才能完整表達這篇教學的大綱XD

簡單來說就是虛擬幣正夯，針對電子錢包的網頁也出了很多api方便應用，其中metamask就有一款chrome擴充程式就叫做「MetaMask」可以在瀏覽器上使用電子錢包，當你的chrome有安裝這個插件，就可以不用進入到metamask官網也可以使用你的錢包。

他們也有web3的方式可以讓你直接用js取得資料，讓你在自己開發的網頁上取得使用者的錢包，當然會有一系列驗證機制取得權限，但這部分metamask都幫你做好了，就像串接google login一樣簡單，今天我們要用的就是這個功能！

---

首先要準備的東西：

1. 一個React專案
2. 去metamask註冊一個電子錢包（測試用）

完成之後就開始吧！

 

判斷用戶有沒有安裝Metamask套件

我們可以直接在window裡面去找有沒有ethereum的關鍵字，metamask相關的應用都會放在這裡。

如果用戶有安裝metamask chrome plugin，那window.ethereum裡面就會有東西喔！

if (typeof window.ethereum !== "undefined") {
    console.log(window.ethereum);
}

那麼這段判斷程式碼，可以放在哪裡呢？

通常我們會放在程式進入口，就是整個網頁只需要呼叫一次的地方，所以我把它放在App.js

const handleGetAddress = async () => {
    if (typeof window.ethereum !== "undefined") {
     //... TODO 取得地址
    }
};

useEffect(() => {
  handleGetAddress();
}, []);

 

取得錢包地址

取得錢包地址不用自己打api，裡面已經有方法可以直接使用了。

if (typeof window.ethereum !== "undefined") {
      const accounts = await window.ethereum.request({
          method: "eth_requestAccounts",
      });
      res && Array.isArray(res) && console.log(accounts[0]);
}

用戶的錢包地址會放在回傳陣列裡面的第一個，是純字串的陣列。

拿到後存在redux裡面就可以在整個網站中使用了。

當然你也可以把它做成一顆按鈕，登入後按下「連動metamask」按鈕，然後再call一次handleGetAddress()更新地址。

<WalletButton
    onClick={handleGetAddress}
>
    Get Wallet
</WalletButton>

---

參考metamask官網文件