以太坊钱包开发：显示钱包信息并发起签名交易

以太坊去中心化网络钱包开发系列将从零开始开发一个实用的钱包。 本系列文章是理论与实践的结合。 一共四篇：创建钱包账户，导入导出账户Keystore文件，显示钱包信息并发起签名交易，发送Token（代币）别人知道以太坊钱包有多少钱，这是第三篇介绍使用ethers.js钱包对象获取相关信息并启动您的线下交易。

使用 Provider 连接以太坊网络

我们之前两篇文章介绍了创建（或导入）钱包账户的过程是离线的，即可以不依赖以太坊网络创建钱包账户，但是如果要获取钱包账户的信息，比如余额和交易记录，要发起交易，钱包需要连接到以太坊网络。

无论是在 Web3 还是 Ethers.js 中，Provider 都是用于网络连接的。 Ethers.js提供了一种集成多个Provider的方法：使用钱包连接一个Provider的方法如下：

1
2
3
4
5

// 连接本地的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：

1
2
3
4
5

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

activeWallet 是后面可以用来请求发送交易的对象

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

15
16
17
18
19
20
21
22
23

钱包详情:

    
地址:
        

            
        
    
    
余额:
        

            
        
    
    
Nonce:
        

            
        
    
    
 
        

            
刷新
        
    

js处理的逻辑是获取到信息后，填写相应的控件。 代码如下：

1
2
3
4
5

6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

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
4
5
6
7
8

9
10

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：很容易理解，就是用户想要转账的目标和金额。 数据：它是附加到交易的消息。 如果向合约地址发起交易，这将转化为合约函数的执行。 请参考：如何理解以太坊ABInonce：交易序号 chainId：链id，用于区分不同的链（分叉链）id，可以在EIP-55中查询。 nonce和chainId的一个重要作用就是防止重放攻击。 如果没有随机数，收款人可以再次广播已签名的交易。 如果没有chainId，可以在Ethereum Classic Broadcast上重新获取以太坊上的交易。 gasPrice和gasLimit：gas是以太坊的工作计费机制，是交易发起方打包给矿工的费用。 以上参数的设置都比较固定，而Gas（尤其是gasPrice）的设置就灵活多了。

gasLimit 表示指令和存储空间的预估工作量。 如果工作量没有用完，则返回给事务发起者。 如果不够，就会出现气体不足的错误。 对于普通转账交易，工作量固定，gasLimit为21000，合约执行gasLimit可变。 有些人可能会认为将它设置为更高的值无论如何都会返回它，但是如果合约执行出错，它会吃掉所有的gas。幸运的是，web3和ethers.js都提供了一种测量Gas Limit的方法，并且下次发送令牌

gasPrice 是交易发起者愿意为工作量支付的单位费用。 当矿工选择交易时，他们会根据 gasPrice 对交易进行排序，并首先为出价高的人提供服务。 因此，如果出价过低，交易将在很长一段时间内无法打包确认。 高反始作俑者多亏。

web3和ethers.js提供了一个方法getGasPrice()来获取最近几个历史区块的gas价格的中位数，还有一些第三方提供了预测gas价格的接口，比如：gasPriceOracle、ethgasAPI、etherscan gastracker，这些服务通常是它还会参考当前交易池中的交易数量和价格，更具参考性。

一个常规的做法是利用这些接口给用户一个参考值，然后用户可以根据参考值进行微调。 交易签名构造完成后，使用私钥对其进行签名。 代码如下：

1
2
3

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

代码参考ethereumjs-tx发送（广播）交易再发送（广播）交易，代码如下：

1
2
3
4

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

通过这三个步骤，就完成了发送签名交易的过程。 ethers.js中提供了一个简洁的界面来完成这三个步骤（在界面中强调已经为我们完成了签名）。 界面如下：

1
2
3
4
5

6
7

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

使用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

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

哈哈哈~，作品介绍到此结束，现在有一些私货，又到了推广时间别人知道以太坊钱包有多少钱，完整源码请订阅区块链技术小专栏查看，赶紧订阅，路过，不要错过它。 点击链接观看详细视频课程讲解。 参考文档ethereum-txEIP-55Ethers.js 深入浅出区块链——系统学习区块链，打造最好的区块链技术博客。

全球最专业的区块链知识技术问答社区，深入浅出。 加入社区还可以在微信群中与300多位区块链技术爱好者进行交流。