[블록체인] Solana 기반 지갑 생성 - React

Solana 지갑을 만드는 가장 쉬운 방법은 Phantom 지갑을 이용하는 것일텐데요,

Phantom을 이용하지 않고 React 코드로 Solana 지갑을 만드는 법에 대해 이야기 해보겠습니다.

랜덤 지갑 생성과, 니모닉 코드를 기반으로 지갑을 생성하는 부분을 다뤄볼게요!

 

@solana/web3.js

⚠️ npm 을 이용하여 해당 라이브러리를 다운 받으면 에러가 나더라고요!

꼭! ⭐️ index.html에 script 파일을 직접 불러오는 방식⭐️ 으로 라이브러리를 사용하세요!

<!-- Development (un-minified) -->
<script src="https://unpkg.com/@solana/web3.js@latest/lib/index.iife.js"></script>

<!-- Production (minified) -->
<script src="https://unpkg.com/@solana/web3.js@latest/lib/index.iife.min.js"></script>

 

bs58

solana에서 생성된 지갑의 private key를 bs58 형태로 인코딩하기 위해서는 bs58 라이브러리가 추가로 필요합니다

npm i bs58

 

 

지갑 생성 코드

script 형태로 불러온 라이브러리 모듈은 window.solanaWeb3 로 가져올 수 있습니다.

지갑과 관련된 부분은 Keypair 객체에 존재하고, 기본 지갑은 generate 함수를 이용하여 생성할 수 있습니다!

 

address : publicKey를 string으로 변환한 값이 주소가 됩니다

privateKey : 생성한 키 쌍의 secret key는 Uint8Array 형태로 만들어지기 때문에 bs58 형태로 인코딩 해줍니다

publicKey : 만들어진 publicKey를 base58 type으로 인코딩 합니다

import * as bs58 from "bs58";

const generateSolanaWallet = () => {
    const keypair = window.solanaWeb3.Keypair.generate();

    let address = keypair.publicKey.toString();
    let privateKey = encode(keypair.secretKey);
    let publicKey = keypair.publicKey.toBase58();

    return { address, privateKey, publicKey };
}

 

React 코드

전체 react 코드 입니다. 엄청 간단하죠!

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

 

 

 

 

생성한 지갑 Phantom으로 불러오기

생성한 계정은 Phantom 지갑으로 불러올 수 있습니다.

 

1️⃣ 지갑 생성하기

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

3️⃣ 메타마스크 설정 > 내 계정 > 월렛 추가/연결 > 비공개 키 가져오기 > 비공개 키 입력하기 > 가져오기 버튼 클릭

4️⃣ 지갑이 불러와짐!

 

엄청 간단하죠?

 

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

solana 랜덤 지갑 생성 및 연결

 

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

 

니모닉 코드

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

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

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

import * as bip39 from "bip39";

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

 

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

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

fromSeed는 말 그대로 seed를 기반으로 지갑을 생성하는 함수인데요, 이 seed는 니모닉으로부터 bip39 라이브러리의 mnemonicToSeedSync 함수를 통해 얻을 수 있습니다.

import * as bip39 from "bip39";
import * as bs58 from "bs58";

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

const generateSeed = (mnemonic) => {
    return bip39.mnemonicToSeedSync(mnemonic);
}

const generateSolanaWallet = (mnemonic) => {
    const seed = generateSeed(mnemonic);
    const keypair = window.solanaWeb3.Keypair.fromSeed(seed.slice(0, 32));

    let address = keypair.publicKey.toString();
    let privateKey = bs58.encode(keypair.secretKey);
    let publicKey = keypair.publicKey.toBase58();

    return { address, privateKey, publicKey };
}

 

 

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

 

아래는 전체 코드입니다!

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

function GenerateSolanaWallet() {
    const [tempMnemonic, setTempMnemonic] = useState('');
    const [mnemonic, setMnemonic] = useState('');
    const [solanaWallet, setSolanaWallet] = useState();

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

    const generateSeed = (mnemonic) => {
        return bip39.mnemonicToSeedSync(mnemonic);
    }

    const generateSolanaWallet = (mnemonic) => {
        const seed = generateSeed(mnemonic);
        const keypair = window.solanaWeb3.Keypair.fromSeed(seed.slice(0, 32));

        let address = keypair.publicKey.toString();
        let privateKey = bs58.encode(keypair.secretKey);
        let publicKey = keypair.publicKey.toBase58();

        setSolanaWallet({ address, privateKey, publicKey });
    }

    return (
        <div
            className="wallet-all"
        >
            <h1>Create Solana 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={()=>{generateSolanaWallet()}}
                >
                    Generate Wallets
                </button>
            </fieldset>
            {
                solanaWallet &&
                <>
                    <h1 style={{marginTop: "50px"}}>Generated Wallet Info</h1>
                    <fieldset>
                        <legend>Solana Wallet</legend>
                        <p><b>address</b> : {solanaWallet.address}</p>
                        <p><b>privatekey</b> : {solanaWallet.privateKey}</p>
                    </fieldset>
                </>
            }
        </div>
    )
}
export default GenerateSolanaWallet;

 

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

 

 

참고 링크

📎 Solana Web3 라이브러리 관련 예제 코드

📎 Solana Web3 라이브러리에 대한 더 자세한 정보