EthersJS-Wallet/index.html at master · failfmi/EthersJS-Wallet · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<!DOCTYPE html>

<html>

<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple HD Wallet - Ethers.js</title>
    <link rel="stylesheet" type="text/css" href="wallet.css"/>
    <script src="lib/ethers.min.js"></script>
    <script src="lib/jquery-3.1.1.min.js"></script>
    <script src="lib/jquery.qrcode.min.js"></script>
    <script src="wallet.js"></script>
</head>

<body>
<header id="menu">
    <a href="#" id="linkHome">Home</a>
    <a href="#" id="linkCreateNewWallet">Create New Random Wallet</a>
    <a href="#" id="linkImportWalletFromMnemonic">Open Wallet From Mnemonic</a>
    <a href="#" id="linkImportWalletFromFile">Open Wallet From File</a>
    <a href="#" id="linkShowMnemonic" class="after-login">Show Mnemonic</a>
    <a href="#" id="linkShowAddressesAndBalances" class="after-login">View Addresses</a>
    <a href="#" id="linkSendTransaction" class="after-login">Send Transaction</a>
    <a href="#" id="linkAddFact" class="after-login">Add Fact</a>
    <a href="#" id="linkDelete" class="after-login">Delete Wallet</a>
</header>

<main>
    <section id="loadingBox">Loading ...</section>

    <section id="infoBox"><header>x</header><p>Info</p></section>

    <section id="errorBox"><header>x</header><p>Error</p></section>

    <section id="viewHome">
        <h1>Simple HD Wallet using ethers.js</h1>
        Welcome to the simple wallet using <b>Ethereum Ropsten Testnet</b>.
        <ul>
            <li>The wallet is an <a href="https://en.bitcoin.it/wiki/Deterministic_wallet">HD wallet</a> kept <b>encrypted</b> in the Local Storage.</li>
            <li>Wallet can be created by a random mnemonic phrase, opened from a mnemonic phrase or opened from a JSON file, all with a provided password.</li>
            <li>By a valid password, the wallet can:
                <ul>
                    <li>Show its mnemonic phrase</li>
                    <li>Show first 5 derived addresses and their balances</li>
                    <li>Send transactions</li>
                </ul>
            </li>
            <li><a href="https://github.com/ethers-io/ethers.js/"><b>Ethers.js</b></a> - complete Ethereum wallet implementation and library in JavaScript</li>
        </ul>
    </section>

    <section id="viewCreateNewWallet">
        <h1>Create a New Wallet</h1>
        <p>Generate a new wallet: random mnemonic + password -> encrypted JSON.</p>
        <span>Enter password: </span><input type="password" id="passwordCreateWallet">
        <input type="button" id="buttonGenerateNewWallet" value="Generate Now"/>
        <p>JSON:</p>
        <textarea id="textareaCreateWalletResult" class="result" readonly="true"></textarea>
    </section>

    <section id="viewOpenWalletFromMnemonic">
        <h1>Open a Wallet From Mnemonic</h1>
        <p>Open a wallet: mnemonic + password -> encrypted JSON.</p>
        <p>Enter your Mnemonic Phrase: </p>
        <textarea id="textareaOpenWallet"></textarea>
        <span>Enter password: </span><input type="password" id="passwordOpenWallet">
        <input type="button" id="buttonOpenExistingWallet" value="Open Wallet"/>
        <p>JSON:</p>
        <textarea id="textareaOpenWalletResult" class="result" readonly="true"></textarea>
    </section>

    <section id="viewOpenWalletFromFile">
        <h1>Open a Wallet From JSON File</h1>
        <p>Open a JSON wallet: JSON + password -> checks if JSON is encrypted with password -> save encrypted JSON</p>
        <p>Submit a JSON file</p>
        <input type="file" id="walletForUpload"/> <br/>
        <span>Enter password: </span><input type="password" id="passwordUploadWallet">
        <input type="button" id="buttonUploadWallet" value="Open"/>
    </section>

    <section id="viewShowMnemonic">
        <h1>Show Mnemonic</h1>
        <p>Shows mnemonic: password -> unlock wallet -> mnemonic</p>
        <span>Enter password: </span><input type="password" id="passwordShowMnemonic">
        <input type="button" id="buttonShowMnemonic" value="Show Mnemonic"/>
    </section>

    <section id="viewShowAddressesAndBalances">
        <h1>Show Addresses and Balances</h1>
        <p>Show Addresses and Balances: password -> unlock wallet -> derive the first 5 addresses and show their balances</p>
        <span>Enter password: </span><input type="password" id="passwordShowAddresses">
        <input type="button" id="buttonShowAddresses" value="Show Addresses"/>
        <div id="divAddressesAndBalances"></div>
    </section>

    <section id="viewSendTransaction">
        <h1>Send Transaction</h1>
        <p>Send Transaction: password -> unlock wallet -> derive 5 addresses -> show transaction form -> fill form -> sign transaction -> broadcast transaction</p>
        <div>
            <span>Enter password:</span><input type="password" id="passwordSendTransaction">
            <input type="button" id="buttonSendAddresses" value="Unlock"/>
        </div>
        <div id="divSignAndSendTransaction">
            <div><span>Sender:</span><select name="address" id="senderAddress"></select></div>
            <div><span>Recipient:</span><input type="text" id="recipientAddress"
                                               value="0x89e696bF35837f9c165f2021736F482fceA75dF7"></div>
            <div><span>Value:</span><input type="number" id="transferValue"/></div>
            <input type="button" id="buttonSignTransaction" value="Sign Transaction"/>
            <textarea id="textareaSignedTransaction" class="signedTransaction" readonly="true"></textarea>
            <input type="button" id="buttonSendSignedTransaction" value="Send Transaction"/>
            <textarea id="textareaSendTransactionResult" class="result" readonly="true"></textarea>
        </div>
    </section>

    <section>
        <h1>Add fact to a contract</h1>
        <p>...</p>
    </section>
</main>

<footer>HD Wallet Demo</footer>
</body>
</html>