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

相关推荐
gzzeason25 分钟前
使用Vite创建React初始化项目
前端·javascript·react.js
又双叒叕77825 分钟前
React19 新增Hooks:useOptimistic
前端·javascript·react.js
Sui_Network2 小时前
tBTC 现已上线 Sui,带来 5 亿美元的比特币流动性
人工智能·物联网·web3·区块链·量子计算
十盒半价3 小时前
深入理解 React useEffect:从基础到实战的全攻略
前端·react.js·trae
海底火旺3 小时前
以一个简单的React应用理解数据绑定的重要性
前端·css·react.js
爱学习的茄子3 小时前
React Hooks驱动的Todo应用:现代函数式组件开发实践与组件化架构深度解析
前端·react.js·面试
宇宙全栈Link3 小时前
当 React 组件调用自定义 hooks,hooks 又调用其他 hooks 时,状态变化如何传播?
前端·javascript·react.js
归于尽3 小时前
原生JS与React的事件差异
前端·javascript·react.js
伍哥的传说4 小时前
H3初识——入门介绍之常用中间件
前端·javascript·react.js·中间件·前端框架·node.js·ecmascript
G等你下课5 小时前
React 事件机制原理
前端·react.js