## 錢包(MetaMask) 結合運作 在DApp中使用錢包是件非常常見的事情 讓使用者可以使用自己的帳戶 檢查帳戶資訊、轉帳、查詢區塊或交易、合約互動等等 比起直接輸入密鑰的方式 透過與錢包連動 也比較讓人安心 這篇將以下重點進行敘述: 1. 專案規劃 3. 透過 web3.js 連接 Metatask 錢包 4. 透過 ethers.js 連接 Metatask 錢包 5. 最終呈現畫面 **另外可參考 GitHub 專案位置:** https://github.com/weiawesome/dapp_website ## 專案規劃 ### 佈局規劃 ![](https://hackmd.io/_uploads/S1hPJPZZa.png) * 基本上就是分別使用兩種方式連上錢包 並顯示資訊 ### 架構規劃 ``` ├── 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 進行下載** ```shell # 下載 web3.js npm install web3 ``` ### 如何連上 MetaMask ```typescript 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 ```shell # 下載 ethers.js npm install ethers ``` ### 如何連上 MetaMask ```typescript 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 實例 * 初始化資訊 並獲得所有值 ## 最終呈現畫面 ### 效果畫面 ![](https://hackmd.io/_uploads/r1S6kwZ-a.png) * 點擊任一按鈕連結 MetaMask 帳戶 ### 帳號連結 ![](https://hackmd.io/_uploads/Hyx7gwb-6.png) * 跳出視窗 請求使用帳戶的權限 ```不論點擊透過 web3.js 或是 ethers.js 都需要經過同意``` * 可以選擇任一或多個帳戶 與 該網站進行互動 * 點擊下一頁 即可讓網頁或的該帳戶資訊 ``` 備註: 此處仍可以使用測試網路(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建立: 查詢區塊與交易資訊"