DApp入门1 - React程序调用MetaMask钱包并转账

2021-06-16 126

智能合约相当一段小的程序部署并跑在区块链节点上。为了访问合约的功能,前端Web页面可以通过ether js或者web3 js类库通过rpc协议直接访问。

智能合约相当一段小的程序部署并跑在区块链节点上。为了访问合约的功能,前端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区块链技术交流群,共同推动区块链技术普及和发展~