最新內容會更新在主站深入淺出區塊鏈社區
原文鏈接:使用 ethers.js 開發以太坊 Web 錢包 3 - 展示錢包信息及發起簽名交易）
以太坊去中心化網頁錢包開發系列，將從零開始開發出一個可以實際使用的錢包，本系列文章是理論與實戰相結合，一共有四篇：創建錢包賬號、賬號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。
let defaultProvider = ethers.getDefaultProvider('ropsten');連接Provider, 通常有一個參數network網絡名稱，取值有：
homestead,rinkeby,ropsten,kovan, 關於Provider的更多用法，可以參考Ethers.js Provider。 -
JsonRpcProvider 及 IpcProvider: 如果有自己的節點可以使用，可以連接主網，測試網絡，私有網絡或Ganache，這也是本系列文章使用的方式。
使用錢包連接Provider的方法如下：
// 連接本地的geth 節點，8545是geth 的端口
var provider = new ethers.providers.JsonRpcProvider("http://127.0.0.1:8545");
// wallet 為前兩篇文章中生成的錢包對象, activeWallet就是后面可以用來請求余額發送交易的對象
var activeWallet = wallet.connect(App.provider);
啟動geth的需要注意一下，需要使用
--rpc --rpccorsdomain開啟 RPC通信及跨域，
展示錢包詳情：查詢余額及Nonce
連接到以太坊網絡之后，就可以向網絡請求余額以及獲取賬號交易數量，使用一下API：
activeWallet.getBalance().then(function(balance) {
});
activeWallet.getTransactionCount().then(function(transactionCount) {
});
activeWallet就是后面可以用來請求發送交易的對象
<h3>錢包詳情:</h3>
<table>
<tr><th>地址:</th>
<td>
<input type="text" readonly="readonly" class="readonly" id="wallet-address" value="" /></div>
</td>
</tr>
<tr><th>余額:</th>
<td>
<input type="text" readonly="readonly" class="readonly" id="wallet-balance" value="0.0" /></div>
</td>
</tr>
<tr><th>Nonce:</th>
<td>
<input type="text" readonly="readonly" class="readonly" id="wallet-transaction-count" value="0" /></div>
</td>
</tr>
<tr><td> </td>
<td>
<div id="wallet-submit-refresh" class="submit">刷新</div>
</td>
</tr>
</table>
js處理的邏輯就是獲取信息之后，填充相應的控件，代碼如下：
var inputBalance = $('#wallet-balance');
var inputTransactionCount = $('#wallet-transaction-count');
$("#wallet-submit-refresh").click(function() {
// 獲取余額時， 包含當前正在打包的區塊
activeWallet.getBalance('pending').then(function(balance) {
// 單位轉換 wei -> ether
inputBalance.val(ethers.utils.formatEther(balance, { commify: true }));
}, function(error) {
});
activeWallet.getTransactionCount('pending').then(function(transactionCount) {
inputTransactionCount.val(transactionCount);
}, function(error) {
});
});
// 模擬一次點擊獲取數據
$("#wallet-submit-refresh").click();
發送簽名交易
之前我們有一篇文章：如何使用Web3.js API 在頁面中進行轉賬介紹過發起交易，不過當時的簽名是利用MetaMask來完成的，現在我們要完成一個錢包，必須要發送一個簽名交易，簽名交易也稱為離線交易（因為這個過程可以離線進行：在離線狀態下對交易進行簽名，然后把簽名后的交易進行廣播）。
盡管 Ethers.js 提供了非常簡潔的API來發送簽名交易，但是探究下簡潔API背后的細節依然會對我們有幫助，這個過程大致可分為三步:
- 構造交易
- 交易簽名
- 發送（廣播）交易
構造交易
先來看看一個交易長什么樣子：
const txParams = {
nonce: '0x00',
gasPrice: '0x09184e72a000',
gasLimit: '0x2710',
to: '0x0000000000000000000000000000000000000000',
value: '0x00',
data: '0x7f7465737432000000000000000000000000000000000000000000000000000000600057',
// EIP 155 chainId - mainnet: 1, ropsten: 3
chainId: 3
}
發起交易的時候，就是需要填充每一個字段，構建這樣一個交易結構。
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，這些服務通常還會參考當前交易池內交易數量及價格，可參考性更強，
常規的一個做法是利用這些接口給用戶一個參考值，然后用戶可以根據參考值進行微調。
交易簽名
在構建交易之后，就是用私鑰對其簽名，代碼如下：
const tx = new EthereumTx(txParams)
tx.sign(privateKey)
const serializedTx = tx.serialize()
代碼參考ethereumjs-tx
發送（廣播）交易
然后就是發送（廣播）交易，代碼如下：
web3.eth.sendRawTransaction(serializedTx, function (err, transactionHash) {
console.log(err);
console.log(transactionHash);
});
通過這三步就完成了發送簽名交易的過程，ethers.js 里提供了一個簡潔的接口，來完成所有這三步操作(強調一下，簽名已經在接口里幫我們完成了)，接口如下：
activeWallet.sendTransaction({
to: targetAddress,
value: amountWei,
gasPrice: activeWallet.provider.getGasPrice(),
gasLimit: 21000,
}).then(function(tx) {
});
用ethers.js 實現發送交易
先來看看發送交易的UI界面：
<h3>以太轉賬:</h3>
<table>
<tr> <th>發送至:</th>
<td><input type="text" placeholder="(target address)" id="wallet-send-target-address" /></td>
</tr>
<tr> <th>金額:</th>
<td><input type="text" placeholder="(amount)" id="wallet-send-amount" /></td>
</tr>
<tr> <td> </td>
<td>
<div id="wallet-submit-send" class="submit disable">發送</div>
</td>
</tr>
</table>
上面主要定義了兩個文本輸入框及一個“發送“按鈕，在點擊發送時運行一下（關鍵）代碼：
var inputTargetAddress = $('#wallet-send-target-address');
var inputAmount = $('#wallet-send-amount');
var submit = $('#wallet-submit-send');
submit.click(function() {
// 得到一個checksum 地址
var targetAddress = ethers.utils.getAddress(inputTargetAddress.val());
// ether -> wei
var amountWei = ethers.utils.parseEther(inputAmount.val());
activeWallet.sendTransaction({
to: targetAddress,
value: amountWei,
// gasPrice: activeWallet.provider.getGasPrice(), (可用默認值)
// gasLimit: 21000,
}).then(function(tx) {
console.log(tx);
});
})
哈哈哈~， 干活介紹到這里，現在夾帶一點私貨，有到了推廣時間了，完整源碼請訂閱深入淺出區塊鏈技術小專欄查看，趕緊訂閱吧，走過路過，不容錯過。
參考文檔
深入淺出區塊鏈 - 系統學習區塊鏈，打造最好的區塊鏈技術博客。
深入淺出區塊鏈知識星球最專業技術問答社區，加入社區還可以在微信群里和300多位區塊鏈技術愛好者一起交流。