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 会发现 我们交易所合约的这些订单函数也都进来了 说明是没问题的

相关推荐
王小明max38 分钟前
Metis UI:下一代 React 组件库,重新定义前端开发体验
react.js
一头小鹿1 小时前
Vue 和 React中的状态管理机制
vue.js·react.js
摸鱼仙人~1 小时前
深入理解 classnames:React 动态类名管理的最佳实践
前端·react.js·前端框架
巴巴_羊16 小时前
React Ref使用
前端·javascript·react.js
杨进军17 小时前
React 协调器 render 阶段
前端·react.js·前端框架
归于尽17 小时前
智能前端小魔术,让图片开口说单词
前端·react.js
杨进军17 小时前
React 中 root.render 与 unmount 函数的流程
前端·react.js·前端框架
杨进军20 小时前
React 创建根节点 createRoot
前端·react.js·前端框架
Spider_Man21 小时前
从零开始构建React天气应用:API集成与UI设计全指南 🌤️
前端·react.js
白瓷梅子汤1 天前
跟着官方示例学习 @tanStack-form --- Linked Fields
前端·react.js