1. 程式人生 > >以太坊錢包開發系列3 - 展示錢包資訊及發起簽名交易

以太坊錢包開發系列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
}

發起交易的時候,就是需要填充每一個欄位,構建這樣一個交易結構。
tovalue: 很好理解,就是使用者要轉賬的目標及金額。
data: 是交易時附加的訊息,如果是對合約地址發起交易,這會轉化為對合約函式的執行,可參考:如何理解以太坊ABI
nonce: 交易序列號
chainId: 鏈id,用來去區分不同的鏈(分叉鏈)id可在EIP-55查詢。

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

gasPricegasLimit: 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的介面,如:gasPriceOracleethgasAPIetherscan 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);
        });
    })

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

參考文件

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

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

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