如何开发以太坊网页钱包·Express + web3.js 实例

比眉伴天荒 2022-05-19 03:24 201阅读 0赞

# 如何开发以太坊网页钱包·Express + web3.js 实例 #

# #

### 10.15.1. 创建项目 ###

安装以太坊环境

curl -s https://raw.githubusercontent.com/oscm/shell/master/lang/gcc/gcc.sh | bash
    curl -s https://raw.githubusercontent.com/oscm/shell/master/lang/golang/golang-1.10.2.sh | bash
    curl -s https://raw.githubusercontent.com/oscm/shell/master/blockchain/ethereum/centos/go-ethereum-1.8.7.sh | bash
    curl -s https://raw.githubusercontent.com/oscm/shell/master/blockchain/ethereum/systemd/private.sh | bash
    
    curl -s https://raw.githubusercontent.com/oscm/shell/master/lang/node.js/binrary/node-v10.1.0.sh | bash
    curl -s https://raw.githubusercontent.com/oscm/shell/master/lang/node.js/binrary/profile.d.sh | bash
    curl -s https://raw.githubusercontent.com/oscm/shell/master/blockchain/ethereum/truffle/truffle.sh | bash

安装开发包

npm install express
    npm install web3
    npm install ejs

### 10.15.2. 主程序 main.js ###

### 10.15.3. ABI 文件 abi/NKC.abi ###

[{"constant":true,"inputs":[],"name":"name","outputs":[{"name":"","type":"string"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":false,"inputs":[{"name":"_spender","type":"address"},{"name":"_value","type":"uint256"}],"name":"approve","outputs":[{"name":"success","type":"bool"}],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":true,"inputs":[],"name":"totalSupply","outputs":[{"name":"","type":"uint256"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":false,"inputs":[{"name":"_from","type":"address"},{"name":"_to","type":"address"},{"name":"_value","type":"uint256"}],"name":"transferFrom","outputs":[{"name":"success","type":"bool"}],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":true,"inputs":[],"name":"decimals","outputs":[{"name":"","type":"uint8"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":false,"inputs":[{"name":"_value","type":"uint256"}],"name":"burn","outputs":[{"name":"success","type":"bool"}],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":true,"inputs":[{"name":"","type":"address"}],"name":"balanceOf","outputs":[{"name":"","type":"uint256"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":false,"inputs":[{"name":"_from","type":"address"},{"name":"_value","type":"uint256"}],"name":"burnFrom","outputs":[{"name":"success","type":"bool"}],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":true,"inputs":[],"name":"symbol","outputs":[{"name":"","type":"string"}],"payable":false,"stateMutability":"view","type":"function"},{"constant":false,"inputs":[{"name":"_to","type":"address"},{"name":"_value","type":"uint256"}],"name":"transfer","outputs":[],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":false,"inputs":[{"name":"_spender","type":"address"},{"name":"_value","type":"uint256"},{"name":"_extraData","type":"bytes"}],"name":"approveAndCall","outputs":[{"name":"success","type":"bool"}],"payable":false,"stateMutability":"nonpayable","type":"function"},{"constant":true,"inputs":[{"name":"","type":"address"},{"name":"","type":"address"}],"name":"allowance","outputs":[{"name":"","type":"uint256"}],"payable":false,"stateMutability":"view","type":"function"},{"inputs":[{"name":"initialSupply","type":"uint256"},{"name":"tokenName","type":"string"},{"name":"tokenSymbol","type":"string"}],"payable":false,"stateMutability":"nonpayable","type":"constructor"},{"anonymous":false,"inputs":[{"indexed":true,"name":"from","type":"address"},{"indexed":true,"name":"to","type":"address"},{"indexed":false,"name":"value","type":"uint256"}],"name":"Transfer","type":"event"},{"anonymous":false,"inputs":[{"indexed":true,"name":"from","type":"address"},{"indexed":false,"name":"value","type":"uint256"}],"name":"Burn","type":"event"}]

### 10.15.4. 页面视图 ###

10.15.4.1. views/account.ejs

<%- include header.ejs %>
    
    <h1>Users</h1>
    <ul id="accounts">
        <% accounts.forEach(function(account, index){ %>
        <li><%= index %>, <%= account %></li>
        <% }) %>
    </ul>
    
    <p>
    新建账号
    <form method="get" action="/new">
        密码：<input type="password" name="password" />
        <input type="submit" value="新建账号" />
    </form>
    </p>

10.15.4.2. views/balance.ejs

<%- include header.ejs %>
    
    <h1>Account</h1>
    <form method="get" action="/getbalance.html">
    
        <select name="account">
            <% accounts.forEach(function(account, index){ %>
            <option value ="<%= account %>"><%= account %></option>
            <% }) %>
        </select>
        <input type="submit" value="Submit" />
    </form>

10.15.4.3. views/done.ejs

<%- include header.ejs %>
    
    <p>转账完成</p>
    <p>查看交易
    <a href="https://etherscan.io/tx/<%= hash %>" target="etherscan">主网<%= hash %></a> <br />
    </p>

10.15.4.4. views/header.ejs

10.15.4.5. views/index.ejs

<%- include header.ejs %>
    
    Welcome !!!

10.15.4.6. views/showbalance.ejs

<%- include header.ejs %>
    <p>
    <h1>Account: <%= account %>, Balance: <%= balance %></h1>
    </p>
    
    <p>
        Token: <%= token%> <%= name%> 
    </p>

10.15.4.7. views/transfer.ejs

<%- include header.ejs %>
    
    <h1>Account</h1>
    <form method="get" action="/send">
        From：
        <select name="from">
            <% accounts.forEach(function(account, index){ %>
            <option value ="<%= account %>"><%= account %></option>
            <% }) %>
        </select>
        <br />
        To:
        <select name="to">
            <% accounts.forEach(function(account, index){ %>
            <option value ="<%= account %>"><%= account %></option>
            <% }) %>
        </select>
    
        <select name="token">
            <option value ="ETH">ETH</option>
            <option value ="<%= symbol %>"><%= symbol %></option>
        </select>
    
        <br />
        金额: <input type="text" name="amount" /> ETH
        <br />
        密码：<input type="password" name="password" />
        <br />
        <input type="submit" value="Submit" />
    </form>

### 10.15.5. 启动 Node 服务 ###

neo@MacBook-Pro ~/example % node main.js

浏览器访问 http://localhost:8080/ 可以进入钱包