[220517] 리액트와 메타마스크 연결하기

web3, web3-utils 설치

$ npm i web web3-utils

 

 

web3 import 하기

CONTRACT에서 saleAnimalToken, mintAnimalToken을 선택해서 각각 ABI를 복사해 아래 코드에 붙여넣는다.

import {AbiItem } from 'web3-utils'; // 인터페이스가 정의된 파일

const mintAnmimalTokenAbi: AbiItem[] = 복사한 Abi 붙여넣기;
const saleAnmimalTokenAbi: AbiItem[] = 복사한 Abi 붙여넣기;

 

web3로 로그인

ENVIRONMENT를 Injected Web3로 연결하면, 메타마스크로 자동 연결이 되면서 연결상태로 바뀐다.

 

 

 

리액트에게 ethereum 오브젝트를 인식시키는 코드

react-app-env.d.ts

/// <reference types="react-scripts" />

interface Window {
  ethereum: any;
}

// 윈도우에 메타마스크를 설치하면 ethereum 오브젝트가 생김
// 리액트는 ethereum를 인식하지 못하기때문에 작성해주는 코드

 

 

메타마스크에서 실질적 구매/판매로 만들어진 주소를 입력하기

import {AbiItem } from 'web3-utils'; // 인터페이스가 정의된 파일

const mintAnmimalTokenAbi: AbiItem[] = 복사한 Abi 붙여넣기;
const saleAnmimalTokenAbi: AbiItem[] = 복사한 Abi 붙여넣기;

const mintAnimalTokenAddress = "민팅으로 생긴 주소";
const saleAnimalTokenAddress = "판매등록으로 생긴 주소";

 

 

리액트와 메타마스크를 연결하기

리액트에서 npm run start를 입력할 경우 자동으로 메타마스크와 연결이 되는 것을 확인할 수 있다.

개발자 도구를 켜면 자신의 계정 주소가 출력되어 있는 것을 확인할 수 있다.

import React, { FC, useEffect, useState } from "react";
import {Button} from "@chakra-ui/react"
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Main from './routes/main'

const App: FC = () => {
  //메타마스크 주소를 담는 state
  const [account, setAccount] = useState<string>(""); 

  // 계정을 가져오는 코드
  const getAccount = async () => {
    try {
      if (window.ethereum) {
        const accounts = await window.ethereum.request({
          method: "eth_requestAccounts",
        });

        setAccount(accounts[0]); // 객체를 불러움
      }
    } catch (error) {
      // 이더리움이 없는 경우
      console.error(error);
    }
  };

  useEffect(() => {
    getAccount();
  }, []);

  useEffect(() => {
    console.log(account)
  }, [account]);


  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Main />} />
      </Routes>
    </BrowserRouter>
  );
};

export default App;

 

 

github

https://github.com/h662/h662Animals-frontend/commit/b6a042e105644cd3e0c08c82e2135108c122f3bd