web3.React에서 js에서 디자인된 구조기 사용하기 (전편)

개시하다

이번에는 실제 웹 응용 프로그램으로 디자인을 처리하는 구조를 소개하고자 합니다.(이른바 DApp)
프레임 사용이 간단한, 웹 페이지 3.나는 js의 사용 방법에 초점을 맞추고 싶다.
참고로 프론트에서 사용하는 것은 React입니다. create-react-app에서 React를 사용할 수 있도록 준비하세요.

차리다

설계된 구조기

Greeting.sol

// SPDX-License-Identifier: MIT
pragma solidity >=0.4.21 <0.7.0;

contract Greeting {
    string public greeting = "hello";
    
    // greetingを読むだけの関数。初期値は"hello"。
    function sayHello() external view returns (string memory) {
        return greeting;
    }
    // 今のgreetingを編集する関数。編集するのでガス代が発生する。
    function updateGreeting(string calldata _greeting) external {
        greeting = _greeting;
    }
}

지도하는 방법은 참고하세요저번 보도.

공급자

블록체인은 노드로 구성되어 있기 때문에 웹3.js의 공급자 설정에서 처리를 수행할 노드를 설정합니다.
App.js

const web3 = new Web3(
  new Web3.providers.HttpProvider(
    "https://ropsten.infura.io/v3/YOUR_INFURA_PROJECT_ID"
  )
);

이번에 인퓨라가 랩틴에 디자인한 구조기를 사용했기 때문에 Http Provider에는 인퓨라의 URL이 적혀 있습니다.ganache 로컬 디버깅을 사용하면http://localhost:7545내 생각에는 이렇다.

구성 주소

만약 네가 구조기를 설계한다면, 너는 그 구조기의 주소를 분배할 것이다. 그래서 나는 주소를 잘 복사할 것이다.
App.js

const address = "0x4D564C434CfeC2AD44C9012bAD771b315C2738aA";

ABI(Application Binary Interface)

JSON 형식으로 구조기를 표시하는 방법입니다.
구성을 컴파일할 때 생성됩니다.
App.js

import ABI from "./contracts/Greeting.json";
const abi = ABI.abi;

src에서contracts 폴더를 만들고 생성된 설정의 JSON 파일을 직접 복사합니다.
나머지는 아비 부분을 불러내는 거야.

프레임 호출 방법

나는 이 디버깅을 호출할 구조기를 준비했다.
App.js

const contract = new web3.eth.Contract(abi, address);

이 단계의 전체 코드는 이런 느낌이다.
App.js

import "./App.css";
import Web3 from "web3";
import ABI from "./contracts/Greeting.json";

const web3 = new Web3(
  new Web3.providers.HttpProvider(
    "https://ropsten.infura.io/v3/YOUR_INFURA_PROJECT_ID"
  )
);
const address = "0x4D564C434CfeC2AD44C9012bAD771b315C2738aA";
const abi = ABI.abi;
const contract = new web3.eth.Contract(abi, address);

function App() {
  return (
    <div className="App">
      <h1>How to use web3.js</h1>
    </div>
  );
}
export default App;

그럼 코치님을 부르고 싶은데요.

call

상기 Greeting 구조기의 첫 번째 함수는sayHello()가view 함수를 사용하기 때문에 읽기만 합니다.읽기만 하면 집행 함수도 가스비를 지불할 필요가 없다.
읽기 전용 함수 (view 함수나pure 함수) 는call로 호출할 수 있습니다.
App.js

const handleCall = async () => {
    const greeting = await contract.methods.sayHello().call();
    console.log(greeting);
  };
 return (
    <div className="App">
      <h1>How to use web3.js</h1>
      <button onClick={handleCall}>sayHello</button>
    </div>
  );

구조 함수를 사용하면 되돌아오는 값은Promise로 되돌아오기 때문에 async/await를 사용합니다.프레임greeting="hello"를 사용하면 console입니다.나는 로그에 Hello가 표시되어 있다고 생각한다.

계속

좀 길어서 이번 기사는 여기까지 하겠습니다.
다음에 두 번째 함수를 설명하고 싶은데, 업데이트Greeting으로 블록 체인의 데이터를 실제적으로 변경합니다.가스비도 필요하기 때문에 메타마스크를 사용하기도 한다.