281-TruffleReactBox入门二

TruffleReactBox入门二








刚刚我们创建好项目
然后简单修改了下代码
看了一下效果




接下来
我们来用truffle-contract
改写一下这个项目

看下步骤
1.安装引入truffle-contract




那么我们先来安装一下truffle-contract
cd client 进入client
执行
cnpm install truffle-contract --save

这里解释一下为什么用cnpm
而不用npm
因为npm是从国外服务器下载
受网络影响比较大
那么淘宝团队就做了镜像
也就是cnpm

如果没有设置镜像的话
那么还是用npm

npm install truffle-contract --save






安装完成后
我们检查一下package.json文件
看下是否成功
  "dependencies": {
    "react": "^16.6.3",
    "react-dom": "^16.6.3",
    "react-scripts": "2.1.1",
    "truffle-contract": "^4.0.6",
    "web3": "^1.0.0-beta.37"
  },
看见truffle-contract了
成功了





安装完成后
我们开始修改项目

先打开App.js

导入一下truffle-contract
import truffleContract from "truffle-contract";

然后我们修改一下创建合约实例的代码

我们看一下项目里是怎么写的
      // Get the contract instance.
      const networkId = await web3.eth.net.getId();
      const deployedNetwork = SimpleStorageContract.networks[networkId];
      const instance = new web3.eth.Contract(
        SimpleStorageContract.abi,
        deployedNetwork && deployedNetwork.address,
      );


//获取合约实例
通过web3获取id
获取合约的networkId
通过abi,network,address创建合约实例




那么我们修改一下

//1.创建合约
let simpleStorageContract = truffleContract(SimpleStorageContract);
//2.设置provider
simpleStorageContract.setProvider(window.web3.currentProvider);
//3.获取合约实例
let instance = await simpleStorageContract.deployed();






然后我们重新看一下这段代码

        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();
            // const deployedNetwork = SimpleStorageContract.networks[networkId];
            // const instance = new web3.eth.Contract(
            //   SimpleStorageContract.abi,
            //   deployedNetwork && deployedNetwork.address,
            // );
            //1.创建合约
            let simpleStorageContract = truffleContract(SimpleStorageContract);
            //2.设置provider
            simpleStorageContract.setProvider(window.web3.currentProvider);
            //3.获取合约实例
            let instance = await simpleStorageContract.deployed();


            // 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}, this.runExample);
        } catch (error) {......}







然后我们再修改一下set()方法
我们看下这段代码

    runExample = async () => {
        const {accounts, contract} = this.state;

        // Stores a given value, 5 by default.
        await contract.methods.set(100).send({from: accounts[0]});

        // Get the value from the contract to prove it worked.
        const response = await contract.methods.get().call();

        // Update state with the result.
        this.setState({storageValue: response});
    };




修改下这里
// Stores a given value, 5 by default.
await contract.methods.set(100).send({from: accounts[0]});


我们改成
contract.set(100, {from : accounts[0]});




还有get我们也改一下
const response = await contract.get.call({from : accounts[0]});


然后下面改成
response.toNumber()


然后我们看下改完的代码
    runExample = async () => {
        const {accounts, contract} = this.state;

        // Stores a given value, 5 by default.
        //await contract.methods.set(100).send({from: accounts[0]});
        contract.set(100, {from : accounts[0]})

        // Get the value from the contract to prove it worked.
        //const response = await contract.methods.get().call();
        const response = await contract.get.call({from : accounts[0]});

        // Update state with the result.
        this.setState({storageValue: response.toNumber()});
    };






改完之后
我们重新编译部署一下
然后看下页面有没有问题
还是
truffle develop
compile
migrate 
然后
npm start

如果我们遇到了错误
run out of gas
我们可以
migrate --reset




然后我们修改下数值
contract.set(99, {from: accounts[0]})

然后刷新下页面
然后支付一下
然后显示

Good to Go!
Your Truffle Box is installed and ready.

Smart Contract Example
If your contracts compiled and migrated successfully, below will show a stored value of 5 (by default).

Try changing the value stored on line 40 of App.js.

The stored value is: 99


成功了