最新內(nèi)容會(huì)更新在主站深入淺出區(qū)塊鏈社區(qū)
原文鏈接:使用 ethers.js 開(kāi)發(fā)以太坊 Web 錢(qián)包 3 - 展示錢(qián)包信息及發(fā)起簽名交易）

以太坊去中心化網(wǎng)頁(yè)錢(qián)包開(kāi)發(fā)系列，將從零開(kāi)始開(kāi)發(fā)出一個(gè)可以實(shí)際使用的錢(qián)包，本系列文章是理論與實(shí)戰(zhàn)相結(jié)合，一共有四篇：創(chuàng)建錢(qián)包賬號(hào)、賬號(hào)Keystore文件導(dǎo)入導(dǎo)出、展示錢(qián)包信息及發(fā)起簽名交易、發(fā)送Token(代幣），這是第三篇介紹使用ethers.js的錢(qián)包對(duì)象獲取相關(guān)信息及發(fā)起你離線交易。

使用 Provider 連接以太坊網(wǎng)絡(luò)

我們前面兩篇文章介紹創(chuàng)建（或?qū)?#xff09;錢(qián)包賬號(hào)的過(guò)程都是是離線的，即不需要依賴(lài)以太坊網(wǎng)絡(luò)即可創(chuàng)建錢(qián)包賬號(hào)，但如果想獲取錢(qián)包賬號(hào)的相關(guān)信息，比如余額、交易記錄，發(fā)起交易的話，就需要讓錢(qián)包連上以太坊的網(wǎng)絡(luò)。

不管是在 Web3 中，還是Ethers.js 都是使用 Provider 來(lái)進(jìn)行網(wǎng)絡(luò)連接的，Ethers.js 提供了集成多種 Provider 的方式：

• Web3Provider: 使用一個(gè)已有的web3 兼容的Provider，如有MetaMask 或 Mist提供。

• EtherscanProvider 及 InfuraProvider: 如果沒(méi)有自己的節(jié)點(diǎn)，可以使用Etherscan 及 Infura 的Provider，他們都是以太坊的基礎(chǔ)設(shè)施服務(wù)提供商，Ethers.js 還提供了一種更簡(jiǎn)單的方式：使用一個(gè)默認(rèn)的provider, 他會(huì)自動(dòng)幫我們連接Etherscan 及 Infura。

  let defaultProvider = ethers.getDefaultProvider('ropsten');

  連接Provider, 通常有一個(gè)參數(shù)network網(wǎng)絡(luò)名稱(chēng)，取值有： homestead, rinkeby, ropsten, kovan, 關(guān)于Provider的更多用法，可以參考Ethers.js Provider。

• JsonRpcProvider 及 IpcProvider: 如果有自己的節(jié)點(diǎn)可以使用，可以連接主網(wǎng)，測(cè)試網(wǎng)絡(luò)，私有網(wǎng)絡(luò)或Ganache，這也是本系列文章使用的方式。

使用錢(qián)包連接Provider的方法如下：

// 連接本地的geth 節(jié)點(diǎn)，8545是geth 的端口 var provider = new ethers.providers.JsonRpcProvider("http://127.0.0.1:8545");// wallet 為前兩篇文章中生成的錢(qián)包對(duì)象, activeWallet就是后面可以用來(lái)請(qǐng)求余額發(fā)送交易的對(duì)象 var activeWallet = wallet.connect(App.provider);

啟動(dòng)geth的需要注意一下，需要使用 --rpc --rpccorsdomain 開(kāi)啟 RPC通信及跨域，

展示錢(qián)包詳情：查詢(xún)余額及Nonce

連接到以太坊網(wǎng)絡(luò)之后，就可以向網(wǎng)絡(luò)請(qǐng)求余額以及獲取賬號(hào)交易數(shù)量，使用一下API：

activeWallet.getBalance().then(function(balance) { });activeWallet.getTransactionCount().then(function(transactionCount) { });

activeWallet就是后面可以用來(lái)請(qǐng)求發(fā)送交易的對(duì)象

<h3>錢(qián)包詳情:</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處理的邏輯就是獲取信息之后，填充相應(yīng)的控件，代碼如下：

var inputBalance = $('#wallet-balance'); var inputTransactionCount = $('#wallet-transaction-count');$("#wallet-submit-refresh").click(function() {// 獲取余額時(shí)， 包含當(dāng)前正在打包的區(qū)塊activeWallet.getBalance('pending').then(function(balance) {// 單位轉(zhuǎn)換 wei -> etherinputBalance.val(ethers.utils.formatEther(balance, { commify: true }));}, function(error) {});activeWallet.getTransactionCount('pending').then(function(transactionCount) {inputTransactionCount.val(transactionCount);}, function(error) {}); });// 模擬一次點(diǎn)擊獲取數(shù)據(jù) $("#wallet-submit-refresh").click();

發(fā)送簽名交易

之前我們有一篇文章：如何使用Web3.js API 在頁(yè)面中進(jìn)行轉(zhuǎn)賬介紹過(guò)發(fā)起交易，不過(guò)當(dāng)時(shí)的簽名是利用MetaMask來(lái)完成的，現(xiàn)在我們要完成一個(gè)錢(qián)包，必須要發(fā)送一個(gè)簽名交易，簽名交易也稱(chēng)為離線交易（因?yàn)檫@個(gè)過(guò)程可以離線進(jìn)行：在離線狀態(tài)下對(duì)交易進(jìn)行簽名，然后把簽名后的交易進(jìn)行廣播）。

盡管 Ethers.js 提供了非常簡(jiǎn)潔的API來(lái)發(fā)送簽名交易，但是探究下簡(jiǎn)潔API背后的細(xì)節(jié)依然會(huì)對(duì)我們有幫助，這個(gè)過(guò)程大致可分為三步:

構(gòu)造交易

交易簽名

發(fā)送（廣播）交易

構(gòu)造交易

先來(lái)看看一個(gè)交易長(zhǎng)什么樣子：

const txParams = {nonce: '0x00',gasPrice: '0x09184e72a000',gasLimit: '0x2710',to: '0x0000000000000000000000000000000000000000',value: '0x00',data: '0x7f7465737432000000000000000000000000000000000000000000000000000000600057',// EIP 155 chainId - mainnet: 1, ropsten: 3chainId: 3 }

發(fā)起交易的時(shí)候，就是需要填充每一個(gè)字段，構(gòu)建這樣一個(gè)交易結(jié)構(gòu)。
to 和 value: 很好理解，就是用戶(hù)要轉(zhuǎn)賬的目標(biāo)及金額。
data: 是交易時(shí)附加的消息，如果是對(duì)合約地址發(fā)起交易，這會(huì)轉(zhuǎn)化為對(duì)合約函數(shù)的執(zhí)行，可參考：如何理解以太坊ABI
nonce: 交易序列號(hào)
chainId: 鏈id，用來(lái)去區(qū)分不同的鏈（分叉鏈）id可在EIP-55查詢(xún)。

nonce 和 chainId 有一個(gè)重要的作用就是防止重放攻擊，如果沒(méi)有nonce的活，收款人可能把這筆簽名過(guò)的交易再次進(jìn)行廣播，沒(méi)有chainId的話，以太坊上的交易可以拿到以太經(jīng)典上再次進(jìn)行廣播。

gasPrice和gasLimit： Gas是以太坊的工作計(jì)費(fèi)機(jī)制，是由交易發(fā)起者給礦工打包的費(fèi)用。上面幾個(gè)參數(shù)的設(shè)置比較固定，Gas的設(shè)置（尤其是gasPrice）則靈活的多。

gasLimit 表示預(yù)計(jì)的指令和存儲(chǔ)空間的工作量，如果工作量沒(méi)有用完，會(huì)退回交易發(fā)起者，如果不夠會(huì)發(fā)生out-of-gas 錯(cuò)誤。
一個(gè)普通轉(zhuǎn)賬的交易，工作量是固定的，gasLimit為21000，合約執(zhí)行g(shù)asLimit則是變化的，也許有一些人會(huì)認(rèn)為直接設(shè)置為高一點(diǎn)，反正會(huì)退回，但如果合約執(zhí)行出錯(cuò)，就會(huì)吃掉所有的gas。幸運(yùn)的是web3 和 ethers.js 都提供了測(cè)算Gas Limit的方法，下一遍發(fā)送代幣

gasPrice是交易發(fā)起者是愿意為工作量支付的單位費(fèi)用，礦工在選擇交易的時(shí)候，是按照gasPrice進(jìn)行排序，先服務(wù)高出價(jià)者，因此如果出價(jià)過(guò)低會(huì)導(dǎo)致交易遲遲不能打包確認(rèn)，出價(jià)過(guò)高對(duì)發(fā)起者又比較虧。

web3 和 ethers.js 提供一個(gè)方法 getGasPrice() 用來(lái)獲取最近幾個(gè)歷史區(qū)塊gas price的中位數(shù)，也有一些第三方提供預(yù)測(cè)gas price的接口，如：gasPriceOracle 、 ethgasAPI、 etherscan gastracker，這些服務(wù)通常還會(huì)參考當(dāng)前交易池內(nèi)交易數(shù)量及價(jià)格，可參考性更強(qiáng)，

常規(guī)的一個(gè)做法是利用這些接口給用戶(hù)一個(gè)參考值，然后用戶(hù)可以根據(jù)參考值進(jìn)行微調(diào)。

交易簽名

在構(gòu)建交易之后，就是用私鑰對(duì)其簽名，代碼如下：

const tx = new EthereumTx(txParams) tx.sign(privateKey) const serializedTx = tx.serialize()

代碼參考ethereumjs-tx

發(fā)送（廣播）交易

然后就是發(fā)送（廣播）交易，代碼如下：

web3.eth.sendRawTransaction(serializedTx, function (err, transactionHash) {console.log(err);console.log(transactionHash); });

通過(guò)這三步就完成了發(fā)送簽名交易的過(guò)程，ethers.js 里提供了一個(gè)簡(jiǎn)潔的接口，來(lái)完成所有這三步操作(強(qiáng)調(diào)一下，簽名已經(jīng)在接口里幫我們完成了)，接口如下：

activeWallet.sendTransaction({to: targetAddress,value: amountWei,gasPrice: activeWallet.provider.getGasPrice(),gasLimit: 21000,}).then(function(tx) {});

用ethers.js 實(shí)現(xiàn)發(fā)送交易

先來(lái)看看發(fā)送交易的UI界面：

<h3>以太轉(zhuǎn)賬:</h3> <table><tr> <th>發(fā)送至:</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">發(fā)送</div></td></tr> </table>

上面主要定義了兩個(gè)文本輸入框及一個(gè)“發(fā)送“按鈕，在點(diǎn)擊發(fā)送時(shí)運(yùn)行一下（關(guān)鍵）代碼：

var inputTargetAddress = $('#wallet-send-target-address');var inputAmount = $('#wallet-send-amount');var submit = $('#wallet-submit-send');submit.click(function() {// 得到一個(gè)checksum 地址var targetAddress = ethers.utils.getAddress(inputTargetAddress.val());// ether -> weivar amountWei = ethers.utils.parseEther(inputAmount.val());activeWallet.sendTransaction({to: targetAddress,value: amountWei,// gasPrice: activeWallet.provider.getGasPrice(), (可用默認(rèn)值)// gasLimit: 21000,}).then(function(tx) {console.log(tx);});})

哈哈哈~， 干活介紹到這里，現(xiàn)在夾帶一點(diǎn)私貨，有到了推廣時(shí)間了，完整源碼請(qǐng)訂閱深入淺出區(qū)塊鏈技術(shù)小專(zhuān)欄查看，趕緊訂閱吧，走過(guò)路過(guò)，不容錯(cuò)過(guò)。

參考文檔

ethereum-tx

EIP-55

Ethers.js

深入淺出區(qū)塊鏈 - 系統(tǒng)學(xué)習(xí)區(qū)塊鏈，打造最好的區(qū)塊鏈技術(shù)博客。

深入淺出區(qū)塊鏈知識(shí)星球最專(zhuān)業(yè)技術(shù)問(wèn)答社區(qū)，加入社區(qū)還可以在微信群里和300多位區(qū)塊鏈技術(shù)愛(ài)好者一起交流。

轉(zhuǎn)載于:https://www.cnblogs.com/tinyxiong/p/9933823.html

總結(jié)

以上是生活随笔為你收集整理的以太坊钱包开发系列3 - 展示钱包信息及发起签名交易的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。