[블록체인] EVM(Ethereum, Polygon, Klaytn) 기반 지갑 생성 - React

EVM은 이더리움 가상 머신(Ethereum Virtual Machine)의 줄임말로, 이더리움 계열의 메인넷은 지갑 주소 체계가 동일해서 메인넷마다 지갑을 별도로 생성할 필요가 없이 하나의 지갑 주소를 사용할 수 있습니다.

EVM 체인으로 유명한 예로는 Ethereum, Polygon, Klaytn 등이 있습니다!

블록체인에서 가장 유명한 지갑인 Metamask도 EVM 기반 체인들을 지원하는데요,

사실 라이브러리를 사용하면 EVM 기반의 지갑을 아주 쉽게 생성할 수 있습니다.

저는 React와 ethers 라는 라이브러리를 사용해서 한번 만들어볼게요!

 

📎 evm 체인 리스트 더보기

 

ethers

npm i ethers

 

지갑 생성 코드

다음은 createRandom 함수를 통해 지갑을 생성하는 코드입니다.

import * as ethers from "ethers"; 
 
 const generateEVMWallet = () => {
    const _wallet = ethers.Wallet.createRandom();
    let address = _wallet.address;
    let privateKey = _wallet.privateKey;
    let publicKey = _wallet.publicKey;
    
    return { address, privateKey, publicKey };
}

 

React 예시

엄청 간단하죠!

See the Pen Untitled by Moonchaeyeon (@moonchaeyeon) on CodePen.

 

생성한 지갑 MetaMask로 불러오기

생성한 지갑은 MetaMask로 불러올 수 있습니다. 앞서 말씀드렸다시피 MetaMask는 EVM 기반으로 만들어진 체인들과 호환되는 지갑이기 때문이죠!

 

1️⃣ 지갑 생성하기

2️⃣ 비공개 키 (Private Key)를 복사하기

3️⃣ 메타마스크 계정 탭 > 계정 가져오기 > 유형 선택란을 "비공개 키"로 설정하기(기본값) > 복사했던 비공개 키 붙여넣기 > 가져오기 버튼 클릭

4️⃣ 지갑이 불러와짐!

 

엄청 간단하죠?

 

이해를 돕기 위해 GIF를 준비했습니다!

 

 

여기에서 끝내면 너무 간단하니, 이번엔 니모닉 코드를 기반으로 지갑을 생성해보겠습니다.

 

니모닉 코드

니모닉 관련 개념 및 랜덤 니모닉 코드 관련 정보는 이전 포스팅을 참조해주세요!

2023.03.17 - [Blockchain] - [블록체인] 니모닉 코드 생성

랜덤으로 니모닉을 생성하는 코드입니다.

import * as bip39 from "bip39";

export const generateRandomMnemonic = () => {
    return bip39.generateMnemonic();
}

 

니모닉 코드 기반 EVM 지갑 생성

니모닉 코드를 기반으로 EVM 지갑을 생성하려면 fromMnemonic 함수를 사용하면 됩니다.

import * as ethers from "ethers";

export const generateEthereumWallet = (mnemonic) => {
    const walletMnemonic = ethers.Wallet.fromMnemonic(mnemonic);
    let address = walletMnemonic.address;
    let privateKey = walletMnemonic.privateKey;
    let publicKey = walletMnemonic.publicKey;

    return { address, privateKey, publicKey };
}

 

 

이제 두 함수를 조합하여 랜덤 니모닉 기반 지갑을 생성해보겠습니다.

 

아래는 전체 코드입니다!

import { useState } from "react";
import { ethers } from "ethers";
import * as bs58 from "bs58";
import * as bip39 from "bip39";

function GenerateEVMWallet() {
    const [tempMnemonic, setTempMnemonic] = useState('');
    const [mnemonic, setMnemonic] = useState('');
    const [ethereumWallet, setEthereumWallet] = useState();

    const generateMnemonic = () => {
        const _mnemonic = bip39.generateMnemonic();
        setTempMnemonic(_mnemonic);
    }

    const generateEthereumWallet = () => {
        const walletMnemonic = ethers.Wallet.fromMnemonic(mnemonic);
        setEthereumWallet({
            address: walletMnemonic.address,
            privateKey: walletMnemonic.privateKey,
            publicKey: walletMnemonic.publicKey,
        });
    }

    return (
        <div
            className="wallet-all"
        >
            <h1>Create EVM Wallet</h1>

            <button
                className="wallet-all__generate-mnemonic"
                onClick={()=>{generateMnemonic()}}
            >
                Generate Mnemonic
            </button>
            <h3>
                { tempMnemonic }
            </h3>

            <fieldset>
                <legend>mnemonic</legend>
                <textarea
                    placeholder="enter mnemonic"
                    onChange={(e)=>{setMnemonic(e.target.value)}}
                />
                <button
                    disabled={!mnemonic.length}
                    onClick={()=>{generateEthereumWallet()}}
                >
                    Generate Wallets
                </button>
            </fieldset>
            {
                ethereumWallet &&
                <>
                    <h1 style={{marginTop: "50px"}}>Generated Wallet Info</h1>
                    <fieldset>
                        <legend>Ethereum Wallet</legend>
                        <p><b>address</b> : {ethereumWallet.address}</p>
                        <p><b>privatekey</b> : {ethereumWallet.privateKey}</p>
                    </fieldset>
                </>
            }
        </div>
    )
}
export default GenerateEVMWallet;

 

생각보다 엄청 간단하죠? 다음 포스팅에는 EVM 이 아닌 다른 체인에 대해 지갑을 생성하는 포스팅을 올려보겠습니다 🍅