Web3 React项目Dapp获取智能合约对象

上文Web3 整理React项目导入Web3 并获取区块链信息中，我们在react搭建的dapp中简单拿到了我们区块链中的账号授权信息

那我们继续

先终端运行

javascript 复制代码

ganache -d

将ganache环境起起来

然后我们运行 dapp 拿到授权列表回到上文结束的一个状态

然后我们发布一下自己的智能合约

在我们的项目终端执行

javascript 复制代码

truffle migrate --reset

这样合约就发布到我们区块链上了

下一步就有点麻烦喽

这里我们需要通过 abi 获取当前区块链上指定的智能合约

那么这里我们就需要json

这里我们也不说更多的先导入 grToken合约的json 然后将这个token先打印一下看看

然后我们运行项目打开浏览器的控制台

很明显 abi直接就有了

abi的问题解决了那么address呢？

address 在 networks中

我们打开会看到 networks 下面会有一个value值然后它下面有一个address

这个自然就没有abi那么简单了

首先中间这个value的内容你肯定不能写死因为这是生成的不固定的

如果写死那么以后部署一次就要改一次代码

这个东西确实叫 networkId 他也是有办法获取出来的

我们可以通过 web3 下的 eth 下的 net 对象的get方法直接拿到它的id

可以看到这里拿到的也是我们最先发布的因为就是当前区块链中存的

那么根据这个对象结构

我们直接

javascript 复制代码

grToken.networks[networkId].address

就可以轻松拿到啦

运行之后我们查看控制台

address 就被我们拿到了

那么我们整体代码就可以改成这样

javascript 复制代码

import { useEffect } from 'react';
import Web3 from "web3";
import grToken from "../build/grToken.json";

export default function PageIndex() {
  useEffect(() =>{
      async function start(){
          var web3 = new Web3(Web3.givenProvider || "http://localhost:8545");
          const WebData = await initialization(web3)
          console.log(WebData)
          let networkId = await web3.eth.net.getId();
          const token = await new web3.eth.Contract(grToken.abi,grToken.networks[networkId].address);
          console.log(token)
      }
      start();
  },[])

  // 获取web 信息
  async function initialization(web3) {
      let account = await web3.eth.requestAccounts();
      return account
  }
  return (
    <div>
      欢迎来到 Web3 练习的世界
    </div>
  );
}

这里我们通过刚才拿到的 abi 与 address

new了 web3的Contract

去获取我们合约的对象

然后我们运行代码查看控制台

这里我们合约的对象就被输出出来了

但这里看着不是很明显我们打开这个合约对象找到 methods 查看下面有没有我们合约自己写的方法就可以了

我们之前也说过想调用这些函数也要通过 methods

然后我们甚至可以如法炮制的将交易所的json也弄进来

其实就是引入json 然后从json中拿abi 通过区块链拿到的networkId

拿到对应的 address

然后我们运行代码查看控制台

然后打开 methods 会发现我们交易所合约的这些订单函数也都进来了说明是没问题的