以太坊錢包開發系列3 - 展現錢包信息及發起簽名交易

本文首發於深刻淺出區塊鏈社區 原文連接:使用 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背後的細節依然會對咱們有幫助，這個過程大體可分爲三步:

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

構造交易

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

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);
        });
    })

https://my.oschina.net/u/3724910