Truffle


React에서 deploy한 smart contract
배포한 컨트랙트 내용을 가져올 때 web3를 사용한다.
getWeb3

1. web3에서 Metamask연결하는 방법

ganache열고 메타마스크 하고 window.ethereum

window.ethereum->메타마스크 있는지 물어보는것임

• client>src>getWeb3.js
  
  truffle이 알아서 해준다.

2.작업

2-1. react 깔기

$ npx truffle unbox react

2-2. truffle-config.js 설정 바꾸기

2-3. Contract만들기

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

injected web3(메타마스크와 연결된 web3)

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

이제 SimpleStorage.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;

console창 내용
0x6CD05f300EFAc403C05a660236dDC958C78410aF
메타마스크 내용
0x6CD05f300EFAc403C05a660236dDC958C78410aF
같음을 알 수 있다. 메타마스크의 내용을 web3에서 가지고 온 것이다.