## 錢包(MetaMask) 結合運作
在DApp中使用錢包是件非常常見的事情

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

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

這篇將以下重點進行敘述:
1. 專案規劃
3. 透過 web3.js 連接 Metatask 錢包
4. 透過 ethers.js 連接 Metatask 錢包
5. 最終呈現畫面

**另外可參考 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 帳戶

### 帳號連結
* 跳出視窗 請求使用帳戶的權限

* 可以選擇任一或多個帳戶 與 該網站進行互動
* 點擊下一頁 即可讓網頁或的該帳戶資訊

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

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

### 資訊顯示
**網頁上資訊:**

![](https://hackmd.io/_uploads/H1ZJZDWba.png)

**Ganache上資訊:**

![](https://hackmd.io/_uploads/rkGBPwlZ6.png)

* 二者資訊確實相符合

## 結言

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

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

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

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

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

希望透過這篇能夠理解
1. 下載並使用 web3.js 與 ethers.js
2. 使用 web3.js 連接 metamask
3. 使用 ethers.js 連接 metamask

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

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

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

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