React+Metamask.js연동

1. Why 블록체인?

인공지능이나 머신러닝 프로젝트를 하다보면 데이터가 없어서 프로젝트가 힘들어지는 경우가 발생한다. (발견해도..믿을 만한 자료가 되지 않는 경우가 허다하다.)

문득 프로젝트를 진행하다 생각이 들었다. 데이터는 누구의 것일까? 예전부터 Web2.0의 문제는 계속 제기되었다. 인스타에 사진은 우리가 올리지만, 사실상 독점은 인스타가 하고 있는 것이 아닐까?

2. 그래서 블록체인

DEX, 탈중앙화를 통해 데이터를 모두의 것으로 바꾸는 것. 보다 신뢰감있고, 안전하게 유지하는 것이 블록체인의 큰 특징이다. 확실히 이론적 측면으로 보았을 때 이상적인 금융 산업으로 나아갈 수 있으리라 본다. 최근에서도 많은 기업에서 블록체인 사업을 하고 있는 모습이 보이는데, 우리나라에서도 그 규제가 점차 완화되길 바라는 입장이다.

3. 지갑 불러오기

이번 포스트에서는 지난 해커톤 때 한 부분으로 맡았던 React와 지갑연동을 다루려고 한다. 지갑 정보를 가지고 있어야 해당 유저에게 토큰을 발급할 수 있었기에 진행했다.

우선, DApp을 개발하기 위해서는 프론트와 지갑을 연결해야한다.

만약 Metamask가 설치되어있지 않다면?
Metamask는 구글 크롬 확장자에서 쉽게 설치가능하다. 입문자라면 먼저 가입하여 사용해보는 것이 도움이 될 것이다.

MetaMask

React 기반으로 개발을 진행하면, ethers.js를 이용할 수 있어 손쉬운 접근이 가능하다.

이는 web3.js 처럼 이더리움 네트워크를 조회하고 조작할 수 있는 인터페이스를 제공하는 라이브러리이다.

1. react시작(윈도우 기준)

터미널 실행 : 윈도우 + R키, cd 원하는 파일 경로

npx create-react-app metamask_connection

metamask_connection은 파일 이름이다.

성공시

2. react 파일 실행

3. code . 입력하면 vsc열린다.
   

4. metamask_connection파일로 들어가서 npm start하기
   

5. 필요없는 파일 삭제

App.js와 index.js 에서 필요없는 import및 reportWebVitals(); 제거

6. Metamask.js파일 생성

App.js와 Metamask.js에 코드 입력 후 확인

7. npm install ethers 후

Metamask.js에 코드 입력

import React, {useState} from 'react';
import {ethers} from 'ethers';

const MetaMask = () => {

    const [errorMessage, setErrorMessage] = useState(null);
    const [defaultAccount, setDefaultAccount] = useState(null);
    const [userBalance, setUserBalance] = useState(null);

    const connectWallet = () => {
        if (window.ethereum) {
            window.ethereum.request({method: 'eth_requestAccounts'})
            .then(result => {
                accountChanged([result[0]])
            })
        }else {
            setErrorMessage('Install MetaMask please!!')
        }
    }

    const accountChanged = (accountName) => {
        setDefaultAccount(accountName);
        getUserBalance(accountName);
    }

    const getUserBalance = (accountAddress) => {
        window.ethereum.request({method: 'eth_getBalance', params: [String(accountAddress)]})
        .then(balance => {
            setUserBalance(ethers.formatEther(balance));
        
        })
    }

    return (
        <div>
            <h1>MetaMask Wallet Connection</h1>
            <button onClick ={connectWallet}>Connect Wallet Button</button>
            <h3>Address: {defaultAccount}</h3>
            <h3>Balance: $ {userBalance}</h3>
            
            {errorMessage}
        </div>
    )
}

export default MetaMask;

connect Wallet Button을 클릭하면, 자동으로 metamask 로그인이 활성화 된다. (팝업창으로) 이후 지갑 주소와 잔액을 가져올 수 있다.