当前位置:   article > 正文

DAPP(七)——React与智能合约的架构整合_dapp react

dapp react

合并一下react和智能合约,创建react脚手架

create-react-app myapp

将合约中对应的文件 复制到 react脚手架的根目录中

 结果如下:

 下载合约所要的依赖:

npm i openzeppelin-solidity

可以在脚手架终端执行truffle的命令语句,truffle migrate --reset

也可以执行脚本

在APP.js中引入合约build下的json文件:

  1. import logo from './logo.svg';
  2. import './App.css';
  3. import json from '../build/contracts/TestToken.json'
  4. function App() {
  5. return (
  6. <div className="App">
  7. <header className="App-header">
  8. <img src={logo} className="App-logo" alt="logo" />
  9. <p>
  10. Edit <code>src/App.js</code> and save to reload.
  11. </p>
  12. <a
  13. className="App-link"
  14. href="https://reactjs.org"
  15. target="_blank"
  16. rel="noopener noreferrer"
  17. >
  18. Learn React
  19. </a>
  20. </header>
  21. </div>
  22. );
  23. }
  24. export default App;

启动项目但是会报错:

 修改合约的配置文件truffle-config.js,来约定打包的json文件放在哪里,添加contracts_build_directory属性,修改到src目录下,方便我们引入

下载web3依赖(版本可自行匹配):

npm i --save web3@1.8.0

 创建Content组件,以及修改App.js文件:

  1. import './App.css';
  2. import Content from './views/Content';
  3. function App() {
  4. return (
  5. <div>
  6. <Content />
  7. </div>
  8. );
  9. }
  10. export default App;
  1. import React from 'react'
  2. import Web3 from 'web3'
  3. import tokenJson from '../build/TestToken.json'
  4. import exchangeJson from '../build/Exchange.json'
  5. import { useEffect } from 'react';
  6. export default function Content() {
  7. useEffect(() => {
  8. async function start() {
  9. //获取连接后的合约
  10. const web = await initWeb()
  11. console.log(web);
  12. //获取资产信息
  13. }
  14. start()
  15. }, [])
  16. async function initWeb() {
  17. let web3 = new Web3(Web3.givenProvider || "ws://localhost:8545")
  18. console.log(web3);
  19. let accounts = await web3.eth.requestAccounts()
  20. //获取netWorkId
  21. const netWorkId = await web3.eth.net.getId()
  22. //获取byteToken的合约
  23. const token = await new web3.eth.Contract(tokenJson.abi, tokenJson.networks[netWorkId].address)
  24. //获取交易所合约
  25. const exchange = await new web3.eth.Contract(exchangeJson.abi, exchangeJson.networks[netWorkId].address)
  26. //返回web3对象,当前授权账户,交易所的实例以及货币的实例
  27. return {
  28. web3,
  29. account: accounts[0],
  30. token,
  31. exchange
  32. }
  33. }
  34. return (
  35. <div>Content</div>
  36. )
  37. }

启动项目,如此一来,我们便连接到了智能合约,我们获取到了需要的所有对象信息,那么前端就可以实现交互,实践示例会上传到资源,可自行查看,关于智能合约的内容就到这里,以后有问题再补充。

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/盐析白兔/article/detail/717059
推荐阅读
相关标签
  

闽ICP备14008679号