智能合约相当于一段小的程序部署并跑在区块链节点上。为了拜访合约的性能，前端Web页面能够通过ether js或者web3 js类库通过rpc协定间接拜访。上图为Web调用合约的根本流程。

React程序关联MetaMask

为了调用区块链上合约进行交易，比方转账交易，须要用户的私钥对该笔交易进行签名来证实该笔交易由谁来发动。然而如果把私钥放在程序外面的话， 容易造成平安问题。 MetaMask诞生就是为了帮忙用户治理私钥和加密资产的钱包。对于MetaMask的介绍咱们将在其余文章外面具体开展。

Web程序咱们这里拿支流的React页面为例。首先网页须要关联MetaMask来拜访区块链。MetaMask作为Chrome浏览器的一个插件，会拦挡发给区块链的rpc申请，而后再转发给链上合约。

以下代码实现的性能是：当用户点击连贯按钮时，页面将会关联MetaMask，拦挡发送给区块链的申请。用下列activate办法将激活这个流程。

获取用户的加密资产

React的hook useWeb3React将会调用ethersjs列库外面provider并获取外面的chainId以及account信息。该demo应用的是HPB网络，MetaMask的下载和HPB网络的配置将在其余文章中开展。

页面展现如下：

资产交易

在这个例子当中，我通过remix在HPB网络上部署了一个ERC20合约（将在其余文章中具体介绍），咱们能够了解ERC20合约就是虚构币的一种最罕用的标准，外面定义了该种虚构币的罕用属性和办法。 为了做资产划转，咱们须要调用改合约的transfer()办法。

为了调用该办法，咱们须要当时获取如下几个要害信息：

  • 合约的地址；
  • 合约的接口标准ABI(Application Binary Interface)，这个相当于通知咱们的js这个合约提供了什么办法性能；
  • 获取网路的provider，这样咱们就能够晓得咱们是在拜访哪个区块链网络；
  • 签名，为该笔交易做签名。

以下代码展现了这几步的操作过程。

这个外面容易疏忽的是上面这个步骤， 合约对象须要关联签名。

const withSigner = contract.connect(signer);

参考资料：

  • 合约发行代币资源
  • 调用小狐狸参考资料
  • remix调用合约
  • ethers.js官网文档
  • 实现案例代码参考

欢送区块链行业气味相投的小伙伴增加小极微信，退出blockgeek区块链技术交换群，独特推动区块链技术遍及和倒退~