BlockChain>Truffle2

20180 ワード
テキストリンク
Truffle


Reactによるインテリジェント契約
配布された契約内容を取得する場合はweb 3を使用します.
getWeb3

1.web 3にmetamaskを接続する方法


GanacheはMetamaskとwindowを開きますethereum

window.ethereum->meta maskがあるかどうかを尋ねる
  • client>src>getWeb3.js

    松露は見てやります

    • 2.作業


    2-1. はんのうパッド

    $ npx truffle unbox react

    2-2. truffle-config.js設定の変更



    2-3. Contractの作成

    $ npx truffle create contract [파일명] $ npx truffle migrate

    注入されたweb 3(メタマスクに関連付けられたweb 3)npx truffle create FruitShop npx truffle create migration Fruitshop


    フレームワークは後発のショーなので、バージョンはいつも遅いです.
    だから
    エラーが発生した場合は、
    // SPDX-License-Identifier: MIT
pragma solidity >=0.4.22 <0.9.0;
  //1. 보낸 사람의 계정주소에서 사과를 총 몇개 가지고 있는가.
  //2. 사과를 구매했을 시, 해당 계정주소에 사과를 추가해주는 코드를 작성
  //3. 사과를 판매시 내가 가지고 있는 (사과 * 사과구매가격)만큼 토큰을 반환해주고, 사과를 0개로 바꿔준다.  
contract Fruitshop {
  //사과를 몇개 가지고 있는가.
  mapping(address=>uint) myApple;

  
  constructor() public {

  }

  function buyApple() public {
    myApple[msg.sender]++;
  //msg.sender요청한 사람의 주소값이 들어가있음
  
  }

  function sellApple(uint _applePrice) payable public {
    uint tatalPrice = myApple[msg.sender]*_applePrice;
    myApple[msg.sender] = 0;
    msg.sender.transfer(tatalPrice);//환불에 가깝다//얘는 비쥬얼스튜디오가 8이고 트러플은 5여서 문제가 일어나는 것임
  }

  function getMyApple() public view returns(uint){
    return myApple[msg.sender];
  }
}


//truffle --version

    シンプルなストレージになりました.jsonは存在しません.
  • App.js 
    • import React, { Component } from "react";
import FruitshopContract from "./contracts/Fruitshop.json";
import getWeb3 from "./getWeb3";

import "./App.css";

const App=()=>{
 
  
  return(
    <div>
      <h1>사과 가격 10 ETH</h1>
      <button>구매하기</button>
      <p>내가 가진 사과 : <span>0</span></p>
      <button>Sell</button>
      <p>판매가격 : {0*10} ETH</p>
    </div>
  )
}

export default App;

    まず画面を変えましょう
    import React, { useState } from "react";
import FruitshopContract from "./contracts/Fruitshop.json";
import getWeb3 from "./getWeb3";

import "./App.css";

const App=()=>{
  
  const [myApple,setMyApple]= useState(0);

  const buyApple = () =>{
    // setMyApple(w=>w+1);
    setMyApple(prev=>prev+1);
  }

  const sellApple = ()=>{
    setMyApple(prev=>0);
  }


  return(
    <div>
      <h1>사과 가격 10 ETH</h1>
      <button onClick={()=>buyApple()}>구매하기</button>
      <p>내가 가진 사과 : <span>{myApple}</span></p>
      <button onClick={()=>sellApple()}>Sell</button>
      <p>판매가격 : {myApple*10} ETH</p>
    </div>
  )
}

export default App;

    import React, { useState , useEffect} from "react";
import FruitshopContract from "./contracts/Fruitshop.json";
import getWeb3 from "./getWeb3";

import "./App.css";

const App=()=>{
  
  const [myApple,setMyApple]= useState(0);

  const buyApple = () =>{
    // setMyApple(w=>w+1);
    setMyApple(prev=>prev+1);
  }

  const sellApple = ()=>{
    setMyApple(prev=>0);
  }
  const getweb= async ()=>{
    let web3 = await getWeb3()
    console.log(web3)
  }
  //componentDidMount WEB3 가져와서 메타마스크 연결
  useEffect(()=>{
    getweb()
  },[])

  return(
    <div>
      <h1>사과 가격 10 ETH</h1>
      <button onClick={()=>buyApple()}>구매하기</button>
      <p>내가 가진 사과 : <span>{myApple}</span></p>
      <button onClick={()=>sellApple()}>Sell</button>
      <p>판매가격 : {myApple*10} ETH</p>
    </div>
  )
}

export default App;
    @truffle/contract
    https://www.npmjs.com/package/@truffle/contract
    $ npm i @truffle/contract 
    import React, { useState , useEffect} from "react";
import FruitshopContract from "./contracts/Fruitshop.json";
import getWeb3 from "./getWeb3";


import "./App.css";

const App=()=>{
  
  const [myApple,setMyApple]= useState(0);

  const buyApple = () =>{
    // setMyApple(w=>w+1);
    setMyApple(prev=>prev+1);
  }

  const sellApple = ()=>{
    setMyApple(prev=>0);
  }
  const getweb= async ()=>{
    var contract = require("@truffle/contract");
    let web3 = await getWeb3()
    console.log(web3);
    let fruitshop= contract(FruitshopContract);
    fruitshop.setProvider(web3.currentProvider);//여기가 votingcontract부분까지임

    let instance = await fruitshop.deployed();
    console.log('instance');
    console.log(instance);
  }
  //componentDidMount WEB3 가져와서 메타마스크 연결
  useEffect(()=>{
    getweb()
  },[])

  return(
    <div>
      <h1>사과 가격 10 ETH</h1>
      <button onClick={()=>buyApple()}>구매하기</button>
      <p>내가 가진 사과 : <span>{myApple}</span></p>
      <button onClick={()=>sellApple()}>Sell</button>
      <p>판매가격 : {myApple*10} ETH</p>
    </div>
  )
}

export default App;


    import React, { useState , useEffect} from "react";
import FruitshopContract from "./contracts/Fruitshop.json";
import getWeb3 from "./getWeb3";


import "./App.css";

const App=()=>{
  
  const [myApple,setMyApple]= useState(0);

  const buyApple = () =>{
    // setMyApple(w=>w+1);
    setMyApple(prev=>prev+1);
  }

  const sellApple = ()=>{
    setMyApple(prev=>0);
  }
  const getweb= async ()=>{
    var contract = require("@truffle/contract");
    let web3 = await getWeb3()
    // console.log(web3);
    let fruitshop= contract(FruitshopContract);
    fruitshop.setProvider(web3.currentProvider);//여기가 votingcontract부분까지임

    let instance = await fruitshop.deployed();
    // console.log('instance');
    // console.log(instance);

    //주소 가져오기
    let accounts = await web3.eth.getAccounts();
    console.log(accounts);
  }
  //componentDidMount WEB3 가져와서 메타마스크 연결
  useEffect(()=>{
    getweb()
  },[])

  return(
    <div>
      <h1>사과 가격 10 ETH</h1>
      <button onClick={()=>buyApple()}>구매하기</button>
      <p>내가 가진 사과 : <span>{myApple}</span></p>
      <button onClick={()=>sellApple()}>Sell</button>
      <p>판매가격 : {myApple*10} ETH</p>
    </div>
  )
}

export default App;

    コンソールウィンドウの内容0x6CD05f300EFAc403C05a660236dDC958C78410aFメタマスクの内容0x6CD05f300EFAc403C05a660236dDC958C78410aF同じように表示されます.メタマスクの内容はweb 3から持参したものです.
    グラフィックと隣接マトリクス&隣接リスト
    um Guia sobre Estruturaは、Pastas o Paljetosエムを次のようにします.js