Building an EVM Wallet
์ด๋ฒ ํํ ๋ฆฌ์ผ์์๋ 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๋ฅผ ์ฌ์ฉํ์ฌ ๊ตฌํํด๋ด ๋๋ค.
- ๊ณ์ ์์ฑ / ๋ถ๋ฌ์ค๊ธฐ
- EOA๋ฅผ ์์ฑํ๊ณ ์กฐํํ ์ ์๋ค.
- Private Key๋ฅผ ์
๋ ฅ์ ํตํด ๊ธฐ์กด์ ์์ฑํ ๊ณ์ ์ ๋ถ๋ฌ์ฌ ์ ์๋ค.
- ๋คํธ์ํฌ ์ ํ
- ํน์ ๋คํธ์ํฌ๋ฅผ ์ ํํ์ฌ ์ฐ๊ฒฐํ ์ ์๋ค.
- ํน์ ๋คํธ์ํฌ๋ฅผ ์ ํํ์ฌ ์ฐ๊ฒฐํ ์ ์๋ค.
- ๋ณด์ ์ค์ธ ํ ํฐ ์๋ ์กฐํ
- ํ์ฌ ๊ณ์ ์ด ๋ณด์ ํ๊ณ ์๋ ๋ค์ดํฐ๋ธ ํ ํฐ์ ์๋์ ์กฐํํ ์ ์๋ค.
- ํ์ฌ ๊ณ์ ์ด ๋ณด์ ํ๊ณ ์๋ ERC-20๊ธฐ๋ฐ์ ํ ํฐ(์ดํ ํ ํฐ)์ ์๋์ ์กฐํํ ์ ์๋ค.
- ํ์ฌ ๊ณ์ ์ด ๋ณด์ ํ๊ณ ์๋ NFT์ ์๋์ ์กฐํํ ์ ์๋ค.
- ๋ชฉ๋ก ์กฐํ
- ํ์ฌ ๊ณ์ ์ด ๋ณด์ ํ ํ ํฐ์ ๋ชฉ๋ก์ ์กฐํํ ์ ์๋ค.
- ํ์ฌ ๊ณ์ ์ด ๋ณด์ ํ NFT์ ๋ชฉ๋ก์ ์กฐํํ ์ ์๋ค.
- ์์ฐ ์ ์ก
- ํ์ฌ ๊ณ์ ์ด ๋ณด์ ํ ๋ค์ดํฐ๋ธ ํ ํฐ์ ๋ค๋ฅธ ๊ณ์ ์ผ๋ก ์ ์กํ ์ ์๋ค.
- ํ์ฌ ๊ณ์ ์ด ๋ณด์ ํ ํ ํฐ์ ๋ค๋ฅธ ๊ณ์ ์ผ๋ก ์ ์กํ ์ ์๋ค.
- ํ์ฌ ๊ณ์ ์ด ๋ณด์ ํ NFT๋ฅผ ๋ค๋ฅธ ๊ณ์ ์ผ๋ก ์ ์กํ ์ ์๋ค.
- ์์ฐ ์ ์ก ํ์คํ ๋ฆฌ ์กฐํ
- ๊ณ์ ์ด ์ ์กํ ์์ฐ์ ๋ํ ์ ์ก ์ด๋ ฅ์ ์กฐํํ ์ ์๋ค.
- ๊ณ์ ์ด ์ ์กํ ์์ฐ์ ๋ํ ์ ์ก ์ด๋ ฅ์ ์กฐํํ ์ ์๋ค.
๊ฐ๋จํ ํ๋ฉด์ ๊ธฐํํ๊ณ ์๊ตฌ์ฌํญ์ ๋ง์ถฐ ํ์ํ API๋ฅผ ์ดํด๋ณด๋ฉด ์๋์ ๊ฐ์ต๋๋ค.
- ๊ณ์ ์์ฑ ๋ฐ ๋ถ๋ฌ์ค๊ธฐ (
Ethers.js
) - ๋คํธ์ํฌ ์ ํ (
eth_chainId
)
- ๋ณด์ ์ค์ธ ํ ํฐ ์ข
๋ฅ ๋ฐ ์๋ ์กฐํ (
getTokensOwnedByAccount
)
- ๋ณด์ ์ค์ธ ๋ค์ดํฐ๋ธ ํ ํฐ ์๋ ์กฐํ (
getNativeBalanceByAccount
)
- ๋ค์ดํฐ๋ธ ํ ํฐ ์ ์ก (
eth_sendRawTransaction
) - ํ ํฐ ์ ์ก (
eth_sendRawTransaction
) - NFT ์ ์ก (
eth_sendRawTransaction
)
- ํ ํฐ ์ ์ก ํ์คํ ๋ฆฌ ์กฐํ (
getTokenTransfersByAccount
) - NFT ์ ์ก ํ์คํ ๋ฆฌ ์กฐํ (
getNftTransfersByAccount
)
- ํ ํฐ ์ ์ก ํธ๋์ญ์
๊ฒฐ๊ณผ ์กฐํ (
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
ํ๋ก ํธ์๋ ์ฝ๋๋ ๋ค์๊ณผ ๊ฐ์ ๊ตฌ์กฐ๋ก ์ค๊ณํ์ฌ ๊ตฌํํฉ๋๋ค.
- ์ฌ์ฉ์์ ์์ฒญ์ ์ํด ์ค์ ๋ธ๋ก์ฒด์ธ๊ณผ ์ํธ์์ฉํ๋ ์๋ฒ
- ์ฌ์ฉ์์ ์์ฒญ์ ์ ๋ฌํ ํ๋กํ ์ฝ์ ์ค์ ํ๋ ์ฝ๋
- ํ๋กํ ์ฝ ์ด์ฉํด Nodit API๋ฅผ ํธ์ถํ๋ ํจ์์ ์ด๋ฅผ ๊ด๋ฆฌํ๋ ์ฝ๋
- 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;
ํ๋ฉด์ ์๋์ ๊ฐ์ด ํด๋น ๊ณ์ ์ด ๋ณด์ ํ ๋ค์ดํฐ๋ธ ํ ํฐ์ ์๊ณ ๋ฅผ ๋ณด์ฌ์ค ์ ์์ต๋๋ค.
์ด์ ๋์ผํ๊ฒ 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
์๋์ ๊ฐ์ ํ๋ฉด์ด ๋จ๋ฉด ์ ์์ ์ผ๋ก ๊ตฌ๋๋ ๊ฒ์ ๋๋ค! ๊ธฐ๋ฅ์ ํ์ธํด๋ณด์ธ์.
Congratulation! ๐
EVM ์ง๊ฐ ๋ง๋ค๊ธฐ ํํ ๋ฆฌ์ผ์ ๋ชจ๋ ์๋ฃํ์์ต๋๋ค! ์ด์ ๋ค๋ฅธ Nodit API๋ฅผ ์ด์ฉํ์ฌ ๋๋ง์ ๊ธฐ๋ฅ์ ์ถ๊ฐํด ๋ณด์ธ์.
๋์ฑ ๋ค์ํ ๊ธฐ๋ฅ์ ๊ฐ์ง Nodit์ API๊ฐ ๊ถ๊ธํ์ ๊ฐ์? ์๋ ๋งํฌ๋ฅผ ๋๋ฌ ํ์ธํด ๋ณด์ธ์!
Updated 3 months ago