[React.js] 메타마스크 sepolia 테스트넷 트랜잭션 보내기

React.js를 통해 메타마스크 sepolia 테스트넷 트랜잭션 보내는 방법에 대해 글을 작성해보겠습니다.

준비물

- Web3.js 라이브러리
- 메타마스크 계정
- infura

infrua란?

Infura는 Ethereum 네트워크에 대한 원격 액세스를 제공하는 서비스 제공 업체 중 하나로, Ethereum 블록체인에 연결하고 Ethereum 기반 dApp 및 스마트 계약을 실행하는 개발자 및 프로젝트에 유용합니다. 이 서비스를 사용하면 Ethereum 노드를 직접 설정하거나 운영하지 않고도 Ethereum 네트워크와 상호 작용할 수 있습니다.

 

infura 사용 이유

Local 환경에서 개발할 때는 보통 truffle에서 제공하는 ganache를 이용

Local에서 개발이 완료되면 테스트넷에서 실행 및 테스트를 해야하는데 이더리움 블록체인 네트워크와 통신하기 위해서는 MetaMask, Infura라는 인터페이스가 있다.

즉, 배포 환경에서 사용하려면 Infura를 사용해야 함

infura 가입 후 Create a New Project로 Project 생성 시 아래 사진과 같이 엔드포인트 제공됩니다.

 

---

 

React.js, Web3.js 활용해서 트랜잭션 보내기

 

Ethereum 노드에 액세스하기 위한 엔드포인트 URL 입력(현재 sepolia 테스트넷 사용 중)

    // seporia 연결, infura 활용해서 sepolia 테스트넷 원격 이더리움 노드에 접근할 수 있도록 엔드포인트 제공
const web3 = new Web3("https://sepolia.infura.io/v3/API키");

 

 

트랜잭션 보내는 코드 작성

// 트랜잭션을 보내는 함수
    const sendTransaction = async () => {
        try {
            // 이더 양을 Wei로 변환, 0.0001 입력시 0.07205759 나옴;; 수정 필요!!
            const weiAmount = web3.utils.toWei(ethAmount.toString(), "ether");
            const gasLimit = "21000"; // 가스 한도 (기본값)
            const gasPrice = web3.utils.toWei("1", "gwei"); // 가스 가격 (Gwei 단위, 예: 50 Gwei)
            const hexValue = web3.utils.numberToHex(weiAmount); // 16진수로 변환 (이더리움은 16진수로 되어있음)

            // 트랜잭션 정보 설정
            const transactionData = {
                from: fromAccount, // 보내는 계정 주소
                to: toAddress, // 받는 계정 주소
                value: hexValue, // 이더 양
                gas: gasLimit, // 가스 한도 설정
                gasPrice: gasPrice, // 가스 가격 설정
            };

            // 트랜잭션 전송
            // 메타마스크로 트랜잭션 보내기
            const result = await window.ethereum.request({
                method: "eth_sendTransaction",
                params: [transactionData],
            });
            console.log("영수증 : ", result);
            setTransactionHash(result);
            setTransactionError("");
        } catch (error) {
            setTransactionHash("");
            setTransactionError(error.message);
        }
    };

 

window.ethereum은 메타마스크에서 제공하는 자바스크립트 객체로, 이더리움 블록체인과 상호작용하는 데 사용됩니다.

 

위 코드는 메타마스크 공식 문서를 참고하였습니다.
https://docs.metamask.io/wallet/reference/provider-api/

 

 

그러면 트랜잭션이 잘 전송되는지 테스트해보는 폼을 작성해봅시다.

전송 폼 코드 작성

    const [fromAccount, setFromAccount] = useState(""); // 보내는 계정 주소
    const [toAddress, setToAddress] = useState(""); // 받는 계정 주소
    const [ethAmount, setEthAmount] = useState(""); // 보낼 이더 양

    // 트랜잭션 상태를 관리합니다.
    const [transactionHash, setTransactionHash] = useState("");
    const [transactionError, setTransactionError] = useState("");

    <div>
        <h1>트랜잭션 전송</h1>
        <div>
          <label>보내는 계정 주소:</label>
          <input type="text" value={fromAddress} onChange={(e) => setFromAddress(e.target.value)} />
        </div>
        <div>
          <label>수신자 주소:</label>
          <input type="text" value={toAddress} onChange={(e) => setToAddress(e.target.value)} />
        </div>
        <div>
          <label>보낼 이더 양:</label>
          <input type="text" value={ethAmount} onChange={(e) => setEthAmount(e.target.value)} />
        </div>
        <button onClick={sendTransaction}>트랜잭션 보내기</button>
        {transactionHash && (
        <div>
          <p>트랜잭션 해시: {transactionHash}</p>
        </div>
        )}
        {transactionError && (
        <div>
          <p>트랜잭션 오류: {transactionError}</p>
        </div>
        )}
        </div>

 

 

 

 

보내는 주소와 받는 주소, 보낼 이더양을 입력 후 트랜잭션 보내기 버튼을 누르면 다음과 같이 메타마스크 트랜잭션 전송 창이 뜹니다.

 

 

 

컨펌 버튼을 누르면 이더리움이 전송되고 etherscan에서 영수증을 확인할 수 있습니다.

 

 

정상적으로 sepolia가 전송되는 것을 확인할 수 있습니다!

 

 

참고 - sepolia 테스트넷 이더 받는 방법

https://sepoliafaucet.com/ 사이트를 통해 하루에 1번 0.5 sepolia를 받을 수 있습니다.