錢包(MetaMask) 結合運作

在DApp中使用錢包是件非常常見的事情

讓使用者可以使用自己的帳戶
檢查帳戶資訊、轉帳、查詢區塊或交易、合約互動等等

比起直接輸入密鑰的方式 透過與錢包連動 也比較讓人安心

這篇將以下重點進行敘述:

1. 專案規劃
2. 透過 web3.js 連接 Metatask 錢包
3. 透過 ethers.js 連接 Metatask 錢包
4. 最終呈現畫面

另外可參考 GitHub 專案位置:
https://github.com/weiawesome/dapp_website

專案規劃

佈局規劃

• 基本上就是分別使用兩種方式連上錢包 並顯示資訊

架構規劃

├── src
│   ├── app
│   ├── pages
│   │   ├── connect_wallet.tsx
│   ├── style
│   │   ├── connect_wallet.css
│

"src/app/pages/connect_wallet.tsx" 邏輯與基本布局
"src/app/style/connect_wallet.css" 對上述畫面的修飾

因此 最後畫面會顯示在 /connect_wallet 這個路由下

透過 web3.js 連接 Metatask 錢包

下載 web3.js

透過 npm 進行下載

# 下載 web3.js
npm install web3

如何連上 MetaMask

const initWeb3=async () => {
    if (typeof window.ethereum !== 'undefined') {
        setWeb3Address("");
        setWeb3Amount("");
        await setWeb3(new Web3(window.ethereum));
        try {
            const accounts=await window.ethereum.request({method: 'eth_requestAccounts'});
            const account = accounts[0];
            const balanceWei = await web3.eth.getBalance(account);
            const balanceEther = web3.utils.fromWei(balanceWei, 'ether');
            setWeb3Amount(balanceEther);
            setWeb3Address(account);
            console.log('已連接到 MetaMask');
        } catch (error) {
            console.error('連接到 MetaMask 時出現錯誤：', error);
        }
    } else {
        console.log('請安裝 MetaMask 錢包並連接到網絡');
    }
}

• 先檢查瀏覽器是否有下載 MetaMask 插件
• 新增 web3 實例
• 初始化資訊 並獲得所有值

透過 ethers.js 連接 Metatask 錢包

如何下載 ethers.js

# 下載 ethers.js
npm install ethers

如何連上 MetaMask

const initEthers=async ()=> {
    if (typeof window.ethereum !== 'undefined') {
        setEthersAddress("");
        setEthersAmount("");
        await window.ethereum.request({ method: 'eth_requestAccounts' });
        setProvider(new ethers.BrowserProvider(window.ethereum));
        const signer = await provider.getSigner();
        const addr= await signer.getAddress();
        const balance = await provider.getBalance(addr);
        setEthersAmount(formatEther(balance));
        setEthersAddress(addr);
        console.log('已連接到 MetaMask');

    } else {
        console.log('請安裝 MetaMask 錢包並連接到網絡');
    }
}

• 先檢查瀏覽器是否有下載 MetaMask 插件
• 新增 provider 實例
• 初始化資訊 並獲得所有值

最終呈現畫面

效果畫面

• 點擊任一按鈕連結 MetaMask 帳戶

帳號連結

• 跳出視窗 請求使用帳戶的權限
  不論點擊透過 web3.js 或是 ethers.js 都需要經過同意
• 可以選擇任一或多個帳戶 與 該網站進行互動
• 點擊下一頁 即可讓網頁或的該帳戶資訊

備註:
此處仍可以使用測試網路(Ganache)
當然也可以選擇以太鏈主網

但因為我帳戶裡面沒有錢 測試起來方便 因此使用測試網路
可以根據自己的需求做修改

資訊顯示

網頁上資訊:

Ganache上資訊:

• 二者資訊確實相符合

結言

成功連接上 MetaMask(錢包) 感動 感動 真感動

其實在區塊鏈服務上 以開發來說

連接帳戶的方式還有很多種(不同通訊協定、密鑰、註記詞等等)
又或者是隨機創建帳戶。

不過 今天就以創建一個 "應用程序" 來說
認為連接現有錢包是最普遍且迅速的方式

當然這不代表其他方式都用不到 完全可以根據自己的開發需求去調整。

希望透過這篇能夠理解

1. 下載並使用 web3.js 與 ethers.js
2. 使用 web3.js 連接 metamask
3. 使用 ethers.js 連接 metamask

下回預告

既然都已經連上錢包了
鐵定想要做更多事對吧

那那那 可以查詢區塊嗎?
還有 交易資訊也可以查詢嗎?

還有好多好多疑問喔!!!
沒關係 那就一步一步慢慢充實 DApp (去中心化應用程序)

下回 "DApp建立: 查詢區塊與交易資訊"