以太坊錢包開發系列3 - 展示錢包資訊及發起簽名交易

摘要： 以太坊去中心化網頁錢包開發系列，將從零開始開發出一個可以實際使用的錢包，本系列文章是理論與實戰相結合，一共有四篇：建立錢包賬號、 賬號Keystore檔案匯入匯出 、 展示錢包資訊及發起簽名交易 、傳送Token(代幣），這是第三篇介紹使用ethers.js的錢包物件獲取相關資訊及發起你離線...

以太坊去中心化網頁錢包開發系列，將從零開始開發出一個可以實際使用的錢包，本系列文章是理論與實戰相結合，一共有四篇：建立錢包賬號、 ofollow,noindex">賬號Keystore檔案匯入匯出 、 展示錢包資訊及發起簽名交易 、傳送Token(代幣），這是第三篇介紹使用ethers.js的錢包物件獲取相關資訊及發起你離線交易。

使用 Provider 連線以太坊網路

我們前面兩篇文章介紹建立（或匯入）錢包賬號的過程都是是離線的，即不需要依賴以太坊網路即可建立錢包賬號，但如果想獲取錢包賬號的相關資訊，比如餘額、交易記錄，發起交易的話，就需要讓錢包連上以太坊的網路。

不管是在 Web3 中，還是Ethers.js 都是使用 Provider 來進行網路連線的，Ethers.js 提供了整合多種 Provider 的方式：

• Web3Provider: 使用一個已有的web3 相容的Provider，如有MetaMask 或 Mist提供。
• EtherscanProvider 及 InfuraProvider: 如果沒有自己的節點，可以使用Etherscan 及 Infura 的Provider，他們都是以太坊的基礎設施服務提供商，Ethers.js 還提供了一種更簡單的方式：使用一個預設的provider, 他會自動幫我們連線Etherscan 及 Infura。
  1
  連線Provider, 通常有一個引數network網路名稱，取值有： homestead , rinkeby , ropsten , kovan , 關於Provider的更多用法，可以參考Ethers.js Provider。
• JsonRpcProvider 及 IpcProvider: 如果有自己的節點可以使用，可以連線主網，測試網路，私有網路或Ganache，這也是本系列文章使用的方式。

使用錢包連線Provider的方法如下：

1
2
3
4
5

啟動geth的需要注意一下，需要使用 --rpc --rpccorsdomain 開啟 RPC通訊及跨域，

展示錢包詳情：查詢餘額及Nonce

連線到以太坊網路之後，就可以向網路請求餘額以及獲取賬號交易數量，使用一下API：

1
2
3
4
5

activeWallet就是後面可以用來請求傳送交易的物件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

js處理的邏輯就是獲取資訊之後，填充相應的控制元件，程式碼如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

傳送簽名交易

之前我們有一篇文章： 如何使用Web3.js API 在頁面中進行轉賬 介紹過發起交易，不過當時的簽名是利用MetaMask來完成的，現在我們要完成一個錢包，必須要傳送一個簽名交易，簽名交易也稱為離線交易（因為這個過程可以離線進行：在離線狀態下對交易進行簽名，然後把簽名後的交易進行廣播）。

儘管 Ethers.js 提供了非常簡潔的API來發送簽名交易，但是探究下簡潔API背後的細節依然會對我們有幫助，這個過程大致可分為三步:

1. 構造交易
2. 交易簽名
3. 傳送（廣播）交易

構造交易

先來看看一個交易長什麼樣子：

1
2
3
4
5
6
7
8
9
10

發起交易的時候，就是需要填充每一個欄位，構建這樣一個交易結構。

to 和 value : 很好理解，就是使用者要轉賬的目標及金額。

data : 是交易時附加的訊息，如果是對合約地址發起交易，這會轉化為對合約函式的執行，可參考：如何理解以太坊ABI

nonce : 交易序列號

chainId : 鏈id，用來去區分不同的鏈（分叉鏈）id可在 EIP-55 查詢。

nonce 和 chainId 有一個重要的作用就是防止重放攻擊，如果沒有nonce的活，收款人可能把這筆簽名過的交易再次進行廣播，沒有chainId的話，以太坊上的交易可以拿到以太經典上再次進行廣播。

gasPrice 和 gasLimit ： Gas是以太坊的工作計費機制，是由交易發起者給礦工打包的費用。上面幾個引數的設定比較固定，Gas的設定（尤其是gasPrice）則靈活的多。

gasLimit 表示預計的指令和儲存空間的工作量，如果工作量沒有用完，會退回交易發起者，如果不夠會發生 out-of-gas 錯誤。

一個普通轉賬的交易，工作量是固定的，gasLimit為21000 ，合約執行gasLimit則是變化的，也許有一些人會認為直接設定為高一點，反正會退回，但如果合約執行出錯，就會吃掉所有的gas。幸運的是web3 和 ethers.js 都提供了測算Gas Limit的方法，下一遍傳送代幣

gasPrice 是交易發起者是願意為工作量支付的 單位 費用，礦工在選擇交易的時候，是按照gasPrice進行排序，先服務高出價者，因此如果出價過低會導致交易遲遲不能打包確認，出價過高對發起者又比較虧。

web3 和 ethers.js 提供一個方法 getGasPrice() 用來獲取最近幾個歷史區塊gas price的中位數，也有一些第三方提供預測gas price的介面，如：gasPriceOracle 、ethgasAPI、etherscan gastracker，這些服務通常還會參考當前交易池內交易數量及價格，可參考性更強，

常規的一個做法是利用這些介面給使用者一個參考值，然後使用者可以根據參考值進行微調。

交易簽名

在構建交易之後，就是用私鑰對其簽名，程式碼如下：

1
2
3

程式碼參考 ethereumjs-tx

傳送（廣播）交易

然後就是傳送（廣播）交易，程式碼如下：

1
2
3
4

通過這三步就完成了傳送簽名交易的過程，ethers.js 裡提供了一個簡潔的介面，來完成所有這三步操作(強調一下，簽名已經在接口裡幫我們完成了)，介面如下：

1
2
3
4
5
6
7

用ethers.js 實現傳送交易

先來看看傳送交易的UI介面：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

上面主要定義了兩個文字輸入框及一個“傳送“按鈕，在點擊發送時執行一下（關鍵）程式碼：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

哈哈哈~， 幹活介紹到這裡，現在夾帶一點私貨，有到了推廣時間了，完整原始碼請訂閱 深入淺出區塊鏈技術小專欄 檢視，趕緊訂閱吧，走過路過，不容錯過。

參考文件

1. ethereum-tx
2. EIP-55
3. Ethers.js

深入淺出區塊鏈 - 系統學習區塊鏈，打造最好的區塊鏈技術部落格。

深入淺出區塊鏈知識星球 最專業技術問答社群，加入社群還可以在微信群裡和300多位區塊鏈技術愛好者一起交流。