14. web3.js 와 자바스크립트를 활용하여 (이더잔액조회) 지갑 만들기

🔑 코인 투자 추천 링크 🔑

1. 예제파일 web3.min.js 다운로드

아래 파일을 다운로드 받습니다.

https://raw.githubusercontent.com/shawntabrizi/ethbalance/master/web3.min.js

web3.js 라이브러리를 npm으로 설치하신 분들은 node_modules/web3/dist/web3.min.js 파일을 확인할 수 있습니다.

2. Infura.io에서 Keys를 가져옵니다.

원래는 게스(Geth)라는 이더리움 노드를 실행해야 하는데, 조금 복잡하므로 이를 대신해줄 수 있는 Infura.io에서 제공하는 키를 사용하는겁니다.

참고

게스(Geth)는 "go-ethereum"(고 이더리움)의 약자로서, 프로그래밍 언어인 고(Go)에서 구현된 전체 이더넷 노드를 실행하기 위한 다목적 명령 줄 도구이다. 명령행 부속 명령 및 옵션, Json-rpc 서버 및 대화식 콘솔의 세 가지 인터페이스를 제공한다.

3. index.html 파일을 생성하여 이더를 조회하는 웹페이지를 만듭니다.

소스는 아래와 같습니다.

(아래 파일을 다운로드 받아도 됩니다.)

index.html

0.00MB

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="./web3.min.js"></script>
    <script type="text/javascript">
        window.addEventListener('load', function () {
            if (typeof web3 !== 'undefined') {
                console.log('Web3 Detected! ' + web3.currentProvider.constructor.name)
                window.web3 = new Web3(web3.currentProvider);
            } else {
                console.log('No Web3 Detected... using HTTP Provider')
                window.web3 = new Web3(new Web3.providers.HttpProvider("https://ropsten.infura.io/v3/7abae76b3c194ad88d53aae12a391048"));
            }
        })
        function getBalance() {
            var address, wei, balance
            address = document.getElementById("address").value
            try {
                web3.eth.getBalance(address, function (error, wei) {
                    if (!error) {
                        var balance = web3.fromWei(wei, 'ether');
                        document.getElementById("output").innerHTML = balance + " ETH";
                    }
                });
            } catch (err) {
                document.getElementById("output").innerHTML = err;
            }
        }
    </script>
</head>
<body>
    <h1>ETH Balance Fetcher</h1>
    <p>Enter your Ethereum Address:</p>
    <input type="text" size="50" id="address" />
    <button type="button" onClick="getBalance();">Get Balance</button>
    <br />
    <br />
    <div id="output"></div>
</body>
</html>

수정이 필요한 부분은,

아래 두부분입니다.

첫번째는 web3.min.js 파일이 있는 경로를 지정해주셔야 합니다.

두번째는 infura.io에서 제공하는 키를 이곳에 넣으시면 됩니다.

<여기에서 ropsten, mainnet등 변경하시면 메인넷에 있는 이더리움을 조회하거나 테스트넷에 있는 이더리움을 조회할 수 있게 됩니다.>