BloCCat

Web3? (2) 본문

Study/이더리움

Web3? (2)

uooy 2021. 7. 2. 17:46

정보 조회

1. 계좌 정보 조회

<body>
    <h1>hi ethereum</h1>

    <div id="testnet_accounts"></div>

    <script src="./node_modules/web3/dist/web3.js"></script>
    <script src="node_modules/jquery/dist/jquery.js"></script>

    <script>
        //해당 htm 문서가 로딩되었을 때 수행
        $(function(){
            //1. geth 노드와 연동(접속)
            var Web3 = require('web3');
            var web3 = new Web3(new Web3.providers.HttpProvider("http://localhost:8545"));

            const accounts = web3.eth.accounts;
            accounts.forEach(a => {
                $('#testnet_accounts').append(`<div>${a}</div>`);
            });

2. 계좌 정보 + 잔액 정보 조회

<script>
        //해당 htm 문서가 로딩되었을 때 수행
        $(function(){
            //1. geth 노드와 연동(접속)
            var Web3 = require('web3');
            var web3 = new Web3(new Web3.providers.HttpProvider("http://localhost:8545"));

            const accounts = web3.eth.accounts;
            accounts.forEach(a => {
                $('#testnet_accounts').append(`<div>${a} : ${web3.fromWei(web3.eth.getBalance(a),"ether")}ether</div>`);
            });

송금

1. 송금 기능을 위한 틀 작성

<!DOCTYPE html>
<html lang="en">
    <style>
        * {
            font-size: 20px;
        }
        #divStatus,
        select {
            font-family: consolas;
            font-size: 11px;
        }
        span {
            display: inline-block;
            width: 120px;
            text-align: right;
        }
    </style>

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <h1>hi ethereum</h1>

        <div id="testnet_accounts"></div>

        <p>
            <span>보내는 사람</span>
            <select id="fromAccount">
                <option>선택하세요.</option>
            </select>
        </p>
        <p>
            <span>받는 사람</span>
            <select id="toAccount">
                <option>선택하세요.</option>
            </select>
        </p>
        <p>
            <span>송금액</span>
            <input type="number" id="amount"> ETHER
        </p>
        <p>
            <span>패스워드</span>
            <input type="password" id="fromPassword">
            <button id="btnSend">송금</button id="btnSend">
        </p>

2. 송금 기능 구현

<!DOCTYPE html>
<html lang="en">
    <style>
        * {
            font-size: 20px;
        }
        #divStatus,
        select {
            font-family: consolas;
            font-size: 11px;
        }
        span {
            display: inline-block;
            width: 120px;
            text-align: right;
        }
    </style>

    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <h1>hi ethereum</h1>

        <div id="testnet_accounts"></div>

        <p>
            <span>보내는 사람</span>
            <select id="fromAccount">
                <option>선택하세요.</option>
            </select>
        </p>
        <p>
            <span>받는 사람</span>
            <select id="toAccount">
                <option>선택하세요.</option>
            </select>
        </p>
        <p>
            <span>송금액</span>
            <input type="number" id="amount">
            ETHER
        </p>
        <p>
            <span>패스워드</span>
            <input type="password" id="fromPassword">
            <button id="btnSend">송금</button id="btnsend">
        </p>

        <script src="./node_modules/web3/dist/web3.js"></script>
        <script src="node_modules/jquery/dist/jquery.js"></script>

        <script>
            //해당 htm 문서가 로딩되었을 때 수행
            $(function () {
                //1. geth 노드와 연동(접속)
                var Web3 = require('web3');
                var web3 = new Web3(new Web3.providers.HttpProvider("http://localhost:8545"));

                const accounts = web3.eth.accounts;
                accounts.forEach(a => {
                    $('#testnet_accounts').append(
                        `<div>${a} : ${web3.fromWei(web3.eth.getBalance(a), "ether")}ether</div>`
                    );
                    $('#fromAccount').append(`<option>${a}</option>`);
                    $('#toAccount').append(`<option>${a}</option>`);
                });

                //송금 버튼 구현
                $('#btnSend').click(function() {
                    const from = $('#fromAccount').val();
                    const to = $('#toAccount').val();
                    const amount = $('#amount').val();
                    const amountWei = web3.toWei(amount, 'ether');

                    // 보내는 사람의 계정을 잠금 해제
                    const pw = $('#fromPassword').val();
                    const res = web3.personal.unlockAccount(from, pw);
                    if (res === true) {
                        web3.eth.sendTransaction({ from: from, to: to, value: amountWei }, function(err, res) {
                            if (!err) {
                                console.log(`txid = ${res}`);
                            } else {
                                console.log(err);
                            }
                        });
                    }
                });


                //2.연동 여부 확인
                console.log(web3.isConnected());

                // 10번째 블록 정보를 조회(동기 방식)
                console.log("### 호출전");
                console.log(web3.eth.getBlock(10));
                console.log("### 호출후");

                // 10번째 블록 정보를 조회(비동기 방식)
                console.log("*** 호출전");
                web3
                    .eth
                    .getBlock(10, function (err, res) {
                        if (!err) {
                            console.log("!err");
                            console.log(res);
                        } else {
                            console.log("err");
                            console.log(err);
                        }
                    });
                console.log("*** 호출후");

                //10 이더를 웨이로 변환
                const value = web3.toWei('10', 'ether');
                console.log(value);

                //웨이를 이더로 변환
                console.log(web3.fromWei(value, 'ether'));

                // 가스 가격 조회
                console.log(web3.eth.gasPrice);
                console.log(web3.eth.gasPrice.toString(10));

                web3
                    .eth
                    .getGasPrice(function (err, res) {
                        if (!err) {
                            console.log(res);
                            console.log(res.toString(10));
                        } else 
                            console.log(err);
                        }
                    );

            });
        </script>
    </body>
</html>

 

 

'Study > 이더리움' 카테고리의 다른 글

Web3?(1)  (0) 2021.07.02
Geth?(2)  (0) 2021.07.02
Geth? (1)  (0) 2021.07.01
이더리움  (0) 2021.03.11
'Study/이더리움' Related Articles more