메타마스크 리액트 토큰(ERC20) 추가 구현 || React | Metamask | ehters.js | EIP-747 ||

 

EIP-747에서 Dan Finlay와 Esteban Mino의 토론으로 만들어진 EIP로, 

사용자가 방문 중인 사이트에서 제안된 새 자산(ERC20)을 쉽게 추적할 수 있도록 지원하는 인터페이스(RPC)를 제안했습니다.

 

EIP - 747 이란?

https://borntodevelop.tistory.com/entry/EIP-747-%EC%9D%B4%EB%9E%80-Ethereum-Improvement-Proposal-Metamask

EIP-747 이란? || Ethereum Improvement Proposal | Ethereum | Metamask ||

 

 

Today, one of the major uses of Ethereum wallets is to acquire and track assets. Currently, each wallet either needs to pre-load a list of approved assets, or users need to be stepped through a tedious process of adding an asset for their given wallet.
In the first case, wallets are burdened with both the security of managing this list, as well as the bandwidth of mass polling for known assets on their wallet.

오늘날 이더리움 지갑의 주요 용도는 자산을 획득하고 추적하는 것입니다. 현재 각자의 지갑에 승인된 자산 목록을 미리 로드하거나, 또는 사용자가 지갑에 직접 추가하는 과정은 매우 지루합니다.
첫 번째 경우 지갑은 이 목록을 관리하는 보안과 지갑에 있는 알려진 자산에 대한 대량 폴링 대역폭 모두에 대한 부담이 있습니다.

- EIP -747 동기(Motivation) 파트

> 링크

 

위 제안은 2018-08-13에 생성되어 당시 1193명의 찬성표를 얻어 인터페이스를 개발하게 되었습니다.

메타마스크 또한 EIP-747에서 만들어진 RPC 인터페이스를 지원하며, 이를 통해 내가 만든 홈페이지에서 내가 만든 토큰(ERC20)을 사용자에의 지갑에 추가 시킬 수 있는 기능을 만들 수 있습니다.

 

사용자의 지갑에 토큰을 추가 하기 위해선 위 사진 처럼 메타 마스크에 토큰 주소, 기호, 십진수를 직접 입력해야 추가 할 수 있었습니다.

하지만 사용자가 계약주소를 외우거나 직접 찾아서 추가하는 경우는 상당히 불편합니다.

 

토큰 추가 시연

때문에 저희는 위 시연 영상처럼

저희가 만든 홈페이지에 버튼을 만들어서 자동으로 토큰을 추가 해주는 기능을 만들어 보겠습니다.

 

 

 

 

※ 메타마스크 리액트 지갑 연동

- 본 게시글은 메타 마스크가 연동된 상태에서 진행됩니다. 리액트에 메타 마스크 연동하는 방법은 아래 게시글을 참고해주세요.

 

https://borntodevelop.tistory.com/entry/React%EC%99%80-Metamask-%EC%97%B0%EA%B2%B0%ED%95%98%EA%B8%B0-et herjs-KR

메타마스크 리액트 지갑 연동 || React | Metamask | ethers || KR

 

※ 본 게시글은 프런트엔드 개발 분야가 아닙니다. CSS와 디자인 요소는 다루지 않습니다. 원하시는 분은 Github에 올린 코드를 클론 하시면 됩니다.

※ 본 게시글은 리액트 강의 게시글이 아닙니다. 리액트에 대한 기본지식이 있는 개발자를 위한 교육 게시글이니 참고해주시기 바랍니다.

 

 

 

 

goerli tesnet BTD Token

 

이더리움 테스트넷 Goerli에 BornToDev(BTD) ERC20 토큰을 발행했습니다.

해당 토큰을 사용자 지갑에 추가 하는 기능을 구현해 보겠습니다.

 

interface WatchAssetParameters {
  type: string; // The asset's interface, e.g. 'ERC20'
  options: {
    address: string; // The hexadecimal Ethereum address of the token contract
    symbol?: string; // A ticker symbol or shorthand, up to 5 alphanumerical characters
    decimals?: number; // The number of asset decimals
    image?: string; // A string url of the token logo
  };
}

const addToken = await window.ethereum.request({
  method: 'wallet_watchAsset',
  params: {
    type: 'ERC20', // 추가하는 토큰의 종류
    options: {
      address: "0x3f9A92c67a6B349e94E8868c9CC1a1505D34FFCb", // 토큰 주소
      symbol: "BTD", // 토큰 심볼
      decimals: 18, // 토큰 십진수
      // image: // 토큰 로고 이미지 URL
    },
  },
});

위 코드는 메타마스크에서 지원하는 토큰 추가 RPC 인터페이스입니다. 해당 인터페이스 양식을 통해 addToken 함수를 만들었습니다.

현재 추가할 수 있는 토큰 type은 erc20 하나입니다. 하지만 점점 erc721, erc1155 등 다른 토큰도 지원한다고 합니다.

 

image는 토큰 이미지의 URL이 필요합니다.

그 외 다른 데이터는 ERC20의 필수 데이터로 주소와 심볼, 십진수를 넣어주면 토큰을 추가할 수 있습니다.

> 메타마스크 토큰 추가 공식문서 링크

 

 

React : addToken 전체 코드 📝

import { useState, useEffect, useCallback } from "react";
import { ethers } from "ethers";

  function App() {

  		...
        
     const addToken = useCallback(async() => {
      try {
        const wasAdded = await window.ethereum.request({
          method: 'wallet_watchAsset',
          params: {
            type: 'ERC20', 
            options: {
              address: "0x3f9A92c67a6B349e94E8868c9CC1a1505D34FFCb", 
              symbol: "BTD", 
              decimals: 18, 
            },
          },
        });
        if(wasAdded) {
          console.log('토큰 추가 승인 후 action');
        } else {
          console.log('토큰 추가 승인 취소 후 action');
        }
      } catch (error) {
        console.log(error);
      }
	})
      
     	...
      
    return (
    ...
    )
  }

 

메타마스크에서 지원하는 API 규격대로 코딩한 후, 원하는 버튼에 넣어 실행시키면 됩니다.

사용자가 토큰 추가를 승인한 경우 wasAdded로 true가 넘어옵니다. 

토큰이 추가된 후, 추가 행동이 있는 경우 if(wasAdded) 안에 코딩하면 되고,

토큰이 추가가 취소된 경우, else문 안에 코딩하면 됩니다.

 

지금까지 메타 마스크와 리액트를 통해 UI상으로 토큰(ERC20)을 추가하는 기능을 구현해 보았습니다.

CSS나 React 강의가 아닌 ethers 모듈과 메타마스크 API를 보여주는 게시글이었습니다.

 

https://github.com/imelon2/BornToDev_React_web3/tree/master/AddToken

GitHub - imelon2/BornToDev_React_web3

리액트의 구조와 CSS는 Github에 공유해두었습니다.

원하시는 분은 참고해주시면 될 것 같습니다.

 

감사합니다.

 

---