智能合约相当于一段小的程序部署并跑在区块链节点上。为了拜访合约的性能，前端 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 区块链技术交换群，独特推动区块链技术遍及和倒退~