dApp_0. greeting

김진경·2022년 5월 10일
1

Dapp

목록 보기
2/2

dApp 'Greeting'에 대한 코드 분석글이다.
Greeting은 리액트, hardhat, 메타마스크를 사용하여 구동되는 앱이다.

소스코드 중에서 모르는 부분 위주로 정리해 보았다.

1. requestAccount 함수

requestAccount 함수는 유저의 메타마스크 계정에 접근하는 것을 요청하는 함수이다.

  // Request access to the user's Meta Mask Account
  // https://metamask.io
  async function requestAccount() {
    await window.ethereum.request({ method: 'eth_requestAccounts' })
  }

window.ethereum

https://docs.metamask.io/guide/ethereum-provider.html#basic-usage

그 어떤 이더리움 웹 앱이라도 제대로 작동하기 위해선 다음과 같은 조건을 충족해야 한다.

  • Detect the Ethereum provider (window.ethereum)
  • Detect which Ethereum network the user is connected to
  • Get the user's Ethereum account(s)

위 조건 중 1번째 조건인 이더리움 provider를 감지하기 위해서 window.ethereum이 사용된다.

// 만약 브라우저가 메타마스크를 운영하고 있다면, 아래 코드가 콘솔창에 찍힐 것이다.
if (typeof window.ethereum !== 'undefined') {
  console.log('MetaMask is installed!');
}

.request()

MetaMask를 통해 Ethereum에 RPC 요청을 제출하는 데 사용한다. params및 반환 값은 RPC 방식에 따라 다르다.
https://docs.metamask.io/guide/ethereum-provider.html#using-the-provider

window.ethereum.request()

'eth_requestAccounts'

사용자가 식별할 이더리움 주소를 제공할 것을 요청한다.
https://docs.metamask.io/guide/rpc-api.html#eth-requestaccounts

window.ethereum.request({ method: 'eth_requestAccounts' })


2. fetchGreeting 함수

fetchGreeting 함수는 현재 greeting 변수에 저장되어있는 값을 불러오는 함수이다.

async function fetchGreeting() {
    // If MetaMask exists
    if (typeof window.ethereum !== "undefined") {
      const provider = new ethers.providers.Web3Provider(window.ethereum);
      const contract = new ethers.Contract(greeterAddress, Greeter.abi, provider)
      try {
        // Call Greeter.greet()
        /*
          function greet() public view returns (string memory) {
              return greeting;
          }
        */
        const data = await contract.greet();
        console.log("data : ", data);
      } catch (error) {
        console.log('Error: ', error);
      }
    }
  }

ethers.js

https://docs.ethers.io/v5/
ethers.js는 이더리움 블록체인 및 생태계와 상호작용하기 위한 라이브러리이다.

new ethers

Provider

new ethers.providers.

https://docs.ethers.io/v5/api/providers/
Provider는 이더리움 네트워크에 대한 연결을 위한 추상화(abstraction)를 제공하는 클래스이다. ethers.js 라이브러리는 다양한 유스 케이스를 지원하기 위한 옵션들을 제공한다. 추가적인 사용자 설정이 필요한 경우, 하위 분류에 필요한 기능과 클래스를 제공한다.


Web3Provider

new ethers.providers.Web3Provider(externalProvider [ , network]);

//소스코드
const provider = new ethers.providers.Web3Provider(window.ethereum);

Web3Provider는 ethers.providers의 옵션 중 하나이다.
Web3Provider는 기존 Web3 호환 옵션(Web3HttpProvider, Web3IpcProvider or Web3WsProvider)을 랩핑하여 라이브러리의 나머지 부분과 함께 사용할 수 있는 ethers.js 제공자로 노출한다.

메타마스크의 provider는 web3 provider이다. Ethers의 Web3Provider가 web3 provider 를 랩핑해서 메타마스크 지원이 가능하다. 메타마스크는 window.ethereum으로 자신을 inject한다.


Contract

https://docs.ethers.io/v5/api/contract/contract/

new ethers.Contract(address, abi, signerOrProvider);

// 'address' : 필요한 스마트 컨트랙트 주소
// 'abi' : 배포된 스마트 컨트랙트의 json 파일. 즉, artifacts의 json 파일 중 abi
// 'signerOrProvider' : 해당 Contract 클래스를 사용하는 주체(signer 혹은 provider)

// 소스코드
const contract = new ethers.Contract(greeterAddress, Greeter.abi, signer);

이더리움 네트워크 상의 특정 컨트랙트와 연결하여 일반적인 JS의 오브젝트처럼 사용할 수 있도록 한다.



3. setGreeting 함수


getSigner

https://docs.ethers.io/v5/api/providers/jsonrpc-provider/#JsonRpcProvider-getSigner

jsonRpcProvider.getSigner([addressOrIndex])

// 소스 코드
const signer = provider.getSigner();

addressOrIndex 주소의 이더리움 노드에서 관리하는 JsonRpcSigner를 반환한다. 만약 addressOrIndex가 주어지지 않는다면, 0번째 어카운트가 사용된다.

profile
Maktub.

0개의 댓글