智能合约相当于一段小的程序部署并跑在区块链节点上。为了访问合约的功能，前端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); 参考资料：
欢迎区块链行业志同道合的小伙伴添加小极微信，加入blockgeek区块链技术交流群，共同推动区块链技术普及和发展~
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。