Getting Started
Go to Nodit!

Building an EVM Wallet

Suggest Edits

이번 튜토리얼에서는 Nodit이 제공하는 Web3 Data API와 Node API를 이용해 EVM 계열의 지갑을 만들어보는 과정을 배울 수 있습니다.

📘

이번 튜토리얼을 진행하기 위해서는 Nodit API Key가 필요해요!

Nodit API Key는 Nodit 콘솔에 회원가입하여 획득할 수 있습니다. 아래 링크를 클릭하여 Nodit 콘솔에 회원가입하고 다양한 블록체인 노드를 이용해 보세요!


✍️

본 튜토리얼은 다음과 같은 순서로 진행됩니다.

Step 1. 요구사항 수립 및 연동할 API 살펴보기

Step 2. 개발 환경 설정하기

Step 3. API 연동하기

Step 4. 예제 코드로 동작 확인하기


Step 1. 요구사항 수립 및 연동할 API 살펴보기

요구사항 수립

이번 튜토리얼에서는 다음과 같은 기능 요구사항을 가진 지갑 어플리케이션을 Nodit API를 사용하여 구현해봅니다.

  1. 계정 생성 / 불러오기
    • EOA를 생성하고 조회할 수 있다.
    • Private Key를 입력을 통해 기존에 생성한 계정을 불러올 수 있다.

  2. 네트워크 선택
    • 특정 네트워크를 선택하여 연결할 수 있다.

  3. 보유 중인 토큰 수량 조회
    • 현재 계정이 보유하고 있는 네이티브 토큰의 수량을 조회할 수 있다.
    • 현재 계정이 보유하고 있는 ERC-20기반의 토큰(이하 토큰)의 수량을 조회할 수 있다.
    • 현재 계정이 보유하고 있는 NFT의 수량을 조회할 수 있다.

  4. 목록 조회
    • 현재 계정이 보유한 토큰의 목록을 조회할 수 있다.
    • 현재 계정이 보유한 NFT의 목록을 조회할 수 있다.

  5. 자산 전송
    • 현재 계정이 보유한 네이티브 토큰을 다른 계정으로 전송할 수 있다.
    • 현재 계정이 보유한 토큰을 다른 계정으로 전송할 수 있다.
    • 현재 계정이 보유한 NFT를 다른 계정으로 전송할 수 있다.

  6. 자산 전송 히스토리 조회
    • 계정이 전송한 자산에 대한 전송 이력을 조회할 수 있다.

간단한 화면을 기획하고 요구사항에 맞춰 필요한 API를 살펴보면 아래와 같습니다.

스크린샷 2024-10-10 오후 4.45.51.png
  • 계정 생성 및 불러오기 (Ethers.js)
  • 네트워크 선택 (eth_chainId)

스크린샷 2024-10-10 오후 5.09.13.png
  • 보유 중인 토큰 종류 및 수량 조회 (getTokensOwnedByAccount)

스크린샷 2024-10-10 오후 4.51.15.png
  • 보유 중인 네이티브 토큰 수량 조회 (getNativeBalanceByAccount)

스크린샷 2024-10-10 오후 4.47.52.png
  • 네이티브 토큰 전송 (eth_sendRawTransaction)
  • 토큰 전송 (eth_sendRawTransaction)
  • NFT 전송 (eth_sendRawTransaction)

스크린샷 2024-10-10 오후 4.48.06.png
  • 토큰 전송 히스토리 조회 (getTokenTransfersByAccount)
  • NFT 전송 히스토리 조회 (getNftTransfersByAccount)

스크린샷 2024-10-10 오후 4.48.20.png
  • 토큰 전송 트랜잭션 결과 조회 (getTokenTransfersByAccount, getNftTransfersByAccount)

Step 2. 개발환경 설정

Wallet DApp 구현을 위해 아래 개발 환경 구성이 필요합니다. 설치를 위한 도움이 필요하다면 여기를 클릭해주세요.

VS Code Required

소스 코드 편집기로 코드를 손쉽게 작성하고 편집할 수 있습니다.

Node.js Required

자바스크립트 런타임 환경으로 프로그램 실행을 위해 필요합니다.

git Optional

분산 버전 관리 시스템으로 소스 코드를 로컬 환경에 다운로드 받기 위해 필요합니다. 예제 코드를 다운로드 받을 수 있습니다.

이 외에 사용된 프레임워크, 라이브러리는 Step 4. 예제코드의 package.json 파일을 참고해주세요.


Step 3. API 연동하기

이미 프로젝트 구현에 필요한 API들을 살펴보고 호출 시 응답이 어떻게 오는지 확인하였습니다. 이제 이 API들을 이용해 프론트엔드 코드에 연동해 볼까요?

📘

Nodit API Key를 발급 받으셨나요?

Nodit API를 호출하기 위해서는 Nodit API Key가 필요합니다. 아직 Nodit을 시작하지 않으셨다면 아래 링크된 페이지의 안내에 따라 Nodit 콘솔에 가입하고, 개발 연동을 위한 API Key를 발급받아보세요. 시작은 무료입니다!

👉 Nodit Node Quickstart


프론트엔드 코드는 다음과 같은 구조로 설계하여 구현합니다.

스크린샷 2024-10-10 오후 5.00.12.png
  1. 사용자의 요청에 의해 실제 블록체인과 상호작용하는 서버
  2. 사용자의 요청을 전달할 프로토콜을 설정하는 코드
  3. 프로토콜 이용해 Nodit API를 호출하는 함수와 이를 관리하는 코드
  4. API 호출 응답으로 받은 데이터를 바인딩해 컴포넌트 및 페이지를 구성하는 코드

이 4가지 중 1번, 블록체인과 상호작용하는 서버는 이미 Nodit에서 제공하므로 생략하고 나머지 단계를 구현해 보도록 하겠습니다.

우선 Nodit의 API Key를 환경 변수로 설정하여 하나의 파일에서 관리하도록 하였습니다.

// .env

VITE_API_KEY=Your_Nodit_API_Key

환경 변수 파일에 작성한 값을 불러와 설정된 프로토콜, 네트워크 값을 이용해 서버와 통신할 수 있는 Aixos 인스턴스를 설정하는 코드 입니다.

// apis/instance.ts

import axios, { AxiosInstance } from "axios";
const apiKey = import.meta.env.VITE_API_KEY;

export function createWeb3ApiInstance(
  protocol: string,
  network: string
): AxiosInstance {
  const instance = axios.create({
    baseURL: `https://web3.nodit.io/v1/${protocol}/${network}`,
    headers: {
      "X-API-KEY": `${apiKey}`,
      "Content-Type": "application/json",
      Accept: "application/json",
    },
  });
  return instance;
}

...

Axios 인스턴스를 이용해 API를 호출하는 함수를 생성합니다. 해당 함수는 유저의 액션에 따라 실행됩니다. 

// utils/useQueries.ts

export const useGetNativeTokenBalance = (
  protocol: string,
  network: string,
  address: string
) => {
  return useQuery({
    queryKey: ["getNativeTokenBalance", protocol, network, address],
    queryFn: async () => {
      try {
        const result = await createWeb3ApiInstance(protocol, network).post(
          "/native/getNativeBalanceByAccount",
          { accountAddress: address }
        );
        console.log(result);
        return result;
      } catch (error) {
        console.error(error);
      }
    },
    retry: false,
  });
};

...

API 호출에 대한 응답을 이용해 화면에 보일 페이지를 구축하는 코드 입니다. 

// page/Main.tsx 

import React, { useEffect, useMemo, useState } from "react";
import { useWalletStore } from "../../stores/useStore";
import { useGetNativeTokenBalance } from "../utils/useQueries";
import { useProtocolAndNetworkStore } from "../../stores/useStore";
import { useNavigate } from "react-router-dom";
import { formatUnits } from "ethers";

const Main = (): React.ReactElement => {
  const { protocol, network } = useProtocolAndNetworkStore();
  const { address } = useWalletStore();

// Get the native token balance of a specific address
  const {
    data: nativeTokenData,
    isLoading: isGetNativeTokenBalanceLoading,
    isError: isGetNativeTokenBalanceError,
  } = useGetNativeTokenBalance(protocol, network, address);

	...
	
// Error and loading handling 
	if (isGetNativeTokenBalanceError) return <div>error</div>;
  if (isGetNativeTokenBalanceLoading) return <div>loading</div>;
  
  return (
    <div>
        <h1 className="font-bold mt-10">{address}</h1>
        <p className="mt-5">
          Native Token Balance : {getNativeTokenData}
        </p>
		</div>
	);
};
	
export default Main;

화면에 아래와 같이 해당 계정이 보유한 네이티브 토큰의 잔고를 보여줄 수 있습니다.

스크린샷 2024-10-08 오후 3.19.46.png

이와 동일하게 API를 호출해 얻은 결과값을 이용해 필요한 페이지를 구성할 수 있습니다. 아래는 보유한 NFT의 목록을 불러오는 페이지를 구현한 코드입니다.


이러한 방법을 이용해 구현이 필요한 모든 페이지를 만들어 보세요. 혹은 Step 4의 예제 코드를 이용해 Nodit EVM Wallet의 동작을 확인해 보세요!


Step 4. 예제 코드로 동작 확인하기

위에서 구현한 내용을 포함한, 미리 만들어놓은 예제 프로젝트를 공유해 드립니다.

  • 소스 코드 다운로드 및 접근
$ git clone https://github.com/Lambda256/Nodit-EVM-Tutorials
$ cd Nodit-EVM-Tutorials
$ cd wallet_tutorial

  • 프로젝트 초기화 및 라이브러리 설치
$ npm install

사용자의 Nodit API Key를 환경 변수로 설정합니다. 

// .env

VITE_API_KEY=Your_Nodit_API_Key

환경 설정을 완료한 후 터미널에 아래의 명령어를 입력하여 Nodit EVM Wallet을 실행합니다.

$ npm run dev

아래와 같은 화면이 뜨면 정상적으로 구동된 것입니다! 기능을 확인해보세요.

스크린샷 2024-10-08 오후 1.15.30.png 스크린샷 2024-10-10 오후 4.48.06.png

Congratulation! 🎊

EVM 지갑 만들기 튜토리얼을 모두 완료하였습니다! 이제 다른 Nodit API를 이용하여 나만의 기능을 추가해 보세요.

📘

더욱 다양한 기능을 가진 Nodit의 API가 궁금하신가요? 아래 링크를 눌러 확인해 보세요!

Nodit API Reference 바로가기

Updated 4 months ago