我们接着上一小节继续对reactDemo进行改造和Kovan网络部署。
最终效果如下
改造步骤
1. 终端通过如下命令行下载demo
liyc1215:reactDemo liyuechun$ truffle unbox react-box
2. 编译合约
命令行切换到reactDemo项目目录下,执行下面命令进行合约编译。
liyc1215:reactDemo liyuechun$ truffle compile
3. networks 内容替换
1
为测试网络MainNet
的Id(networkId)
。3
为测试网络Ropsten
的Id(networkId)
。42
为测试网络Kovan
的Id(networkId)
。address
为部署到对应网络的合约地址。transactionHash
为合约部署时的交易hash
。
备注:下面合约部署完后,将合约地址和交易hash
再到这个位置进行填充。
4. 合约部署
拷贝SimpleStorage.sol
文件中的合约代码到https://remix.ethereum.org
里面进行编译部署,我们把合约部署到ropsten
网络。
5. 合约地址、交易hash存储
https://ropsten.etherscan.io/tx/0x41c85bf5b0c9b6e575e34cb047881f083bea66620ac00b7e421e0c74a0f1bd3e查看合约地址、交易hash。
6. 修改networks
中的address
和transactionHash
"networks": {
"3": {
"events": {},
"links": {},
"address": "0x260182cd1111ac15c086b244ed6abc19aa4ab1e6",
"transactionHash": "0x41c85bf5b0c9b6e575e34cb047881f083bea66620ac00b7e421e0c74a0f1bd3e"
}
}
7. 拷贝下面代码替换App.js
代码
import React, { Component } from "react";
import SimpleStorageContract from "./contracts/SimpleStorage.json";
import getWeb3 from "./getWeb3";
// networkId
// Ropsten:3
// MainNet:1
// Kovan:42
import "./App.css";
class App extends Component {
state = {
value: "",
storageValue: 0,
web3: null,
accounts: null,
contract: null
};
componentDidMount = async () => {
try {
// Get network provider and web3 instance.
const web3 = await getWeb3();
// Use web3 to get the user's accounts.
const accounts = await web3.eth.getAccounts();
// Get the contract instance.
const networkId = await web3.eth.net.getId();
console.log("networkId:" + networkId);
const deployedNetwork = SimpleStorageContract.networks[networkId];
const instance = new web3.eth.Contract(
SimpleStorageContract.abi,
deployedNetwork && deployedNetwork.address,
);
// Set web3, accounts, and contract to the state, and then proceed with an
// example of interacting with the contract's methods.
this.setState({ web3, accounts, contract: instance });
} catch (error) {
// Catch any errors for any of the above operations.
alert(
`Failed to load web3, accounts, or contract. Check console for details.`,
);
console.error(error);
}
};
handleChange = async (event) => {
this.setState({value: event.target.value});
};
handleSubmit = async (event) => {
event.preventDefault();
// alert('A name was submitted: ' + this.state.value);
console.log("------");
var num = Number(this.state.value);
console.log(num);
const { accounts, contract } = this.state;
// Stores a given value, 5 by default.
await contract.methods.set(num).send({ from: accounts[0] });
// Get the value from the contract to prove it worked.
const response = await contract.methods.get().call();
console.log("response:" + response);
// Update state with the result.
this.setState({ storageValue: response });
};
render() {
if (!this.state.web3) {
return <div>Loading Web3, accounts, and contract...</div>;
}
return (
<div className="App">
<h1>Good to Go!</h1>
<p>Your Truffle Box is installed and ready.</p>
<h2>Smart Contract Example</h2>
<p>
If your contracts compiled and migrated successfully, below will show
a stored value of 5 (by default).
</p>
<p>
Try changing the value stored on <strong>line 40</strong> of App.js.
</p>
<div>The stored value is: {this.state.storageValue}</div>
<form onSubmit={this.handleSubmit}>
<label>
Modify:
<input type="text" value={this.state.value} onChange={this.handleChange} />
</label>
<input type="submit" value="Submit" />
</form>
</div>
);
}
}
export default App;
最新评论
大佬,这些课程在哪学习?有课程来源吗?
黎老师 您好 我是一名asp.net的后端工程师,想转职为智能合约开发工程师,但对于区块链我是完全的小白。 目前正在考虑您腾讯课堂的"从零构建以太坊智能合约到项目实战课程"。 请问这课程是否适合我这样的小白? 学完这教程是否足够我应付智能合约开发实务工作?如果不够,有什么补足的建议? 另外课程购买页面有同学评论这课程的技术和网站过时,不知道是否还适合目前(2022年)的开发场景呢?如果仅需更新部分技术点,学完您的课程后我该如何加强? 期待您的回覆,感谢您
那就还是像电影里那样?举个例子:开会的时候不必到现场,啪的一下几个全息人像出现在眼前?
不管元宇宙是什么、怎么定义,都需要一个降温来冷静清醒一下,然后再继续发展吧。VR都喊了多少年了,每年都说一句话“今年是VR元年”,都已经麻木了,元宇宙真的想好好发展下去,感觉也需要先冷静一下,不然还是炒热度的居多
元宇宙不是游戏和VR!目前市场上的元宇宙大家还在谈论更好体验的游戏、娱乐和VR,甚至很多忽悠和骗子,没有达到现实虚拟化和虚拟现实化,更无法实现能量和价值的虚实转换、没有虚拟与现实的多发并行和交互融合! 元宇宙Metaverse是:人类的数字世界DigiVerse(现实虚拟化)和数字的人类生活RealVirtual(虚拟现实化),并与现实世界Universe多发并行和交互作用,达到虚实(Metaverse+Universe)交融。其3D空间无限,第4维的时间的穿越伸缩,在更高维度上,成就二者的融合共生和价值交融(HumanVerse) Metaverse + Universe = Humanverse!
元宇宙不是游戏和VR!目前市场上的元宇宙大家还在谈论更好体验的游戏、娱乐和VR,甚至很多忽悠和骗子,没有达到现实虚拟化和虚拟现实化,更无法实现能量和价值的虚实转换、没有虚拟与现实的多发并行和交互融合! 元宇宙Metaverse是:人类的数字世界DigiVerse(现实虚拟化)和数字的人类生活RealVirtual(虚拟现实化),并与现实世界Universe多发并行和交互作用,达到虚实(Metaverse+Universe)交融。其3D空间无限,第4维的时间的穿越伸缩,在更高维度上,成就二者的融合共生和价值交融(HumanVerse) Metaverse + Universe = Humanverse!
元宇宙不是游戏和VR!目前市场上的元宇宙大家还在谈论更好体验的游戏、娱乐和VR,甚至很多忽悠和骗子,没有达到现实虚拟化和虚拟现实化,更无法实现能量和价值的虚实转换、没有虚拟与现实的多发并行和交互融合! 元宇宙Metaverse是:人类的数字世界DigiVerse(现实虚拟化)和数字的人类生活RealVirtual(虚拟现实化),并与现实世界Universe多发并行和交互作用,达到虚实(Metaverse+Universe)交融。其3D空间无限,第4维的时间的穿越伸缩,在更高维度上,成就二者的融合共生和价值交融(HumanVerse) Metaverse + Universe = Humanverse!