-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.html
286 lines (282 loc) · 18.1 KB
/
index.html
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
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
.<!DOCTYPE html>
<html>
<head>
<title>Stealth Wallet</title>
<meta charset="UTF-8">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@nero_eth">
<meta name="twitter:title" content="Stealth Wallet">
<meta name="twitter:description" content="Ethereum - Stealth Wallet">
<meta property="og:title" content="Stealth-Wallet.xyz" relay="" api="" dashboard="">
<meta property="og:site_name" content="https://nerolation.github.io/stealth-wallet/">
<meta property="og:url" content="https://nerolation.github.io/stealth-wallet/">
<meta property="og:description" content="Ethereum Wallet Application supporting Stealth Address Transactions.">
<meta property="og:type" content="website">
<link rel="shortcut icon" href="https://nerolation.github.io/stealth-wallet/static/img/swfavicon.png">
<meta name="description" content="Ethereum Wallet Application supporting Stealth Address Transactions.">
<meta name="keywords" content="Ethereum, Stealth Addresses, Privacy, EIP-5564">
<meta name="author" content="Toni Wahrstätter">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="twitter:image" content="https://nerolation.github.io/stealth-wallet/static/img/ogimage.png">
<meta property="og:image" content="https://nerolation.github.io/stealth-wallet/static/img/ogimage.png">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-aFq/bzH65dt+w6FI2ooMVUpc+21e0SRygnTpmBvdBgSdnuTN7QbdgL+OapgHtvPp" crossorigin="anonymous">
<script src="https://cdn.ethers.io/lib/ethers-5.2.umd.min.js" type="application/javascript"></script>
<script src="https://cdn.jsdelivr.net/npm/web3@latest/dist/web3.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js" integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous"></script>
<script src="scripts/website_logic.js" , type="text/javascript"></script>
<script src="scripts/bundle.js" , type="text/javascript"></script>
<link rel="stylesheet" href="./static/style.css">
</head>
<body>
<script src="scripts/confetti.js"></script>
<div class="welcome-screen" id="welcome-screen">
<img src="static/img/logo.png" alt="stealth-wallet.xyz Logo" width="200" />
<h1 class="welcome-screen-header">stealth-wallet.xyz</h1>
<button class="enter-button" id="enter-button">Enter</button>
</div>
<div class="main-interface" id="main-interface">
<div class="container mt-5">
<div class="row">
<div class="col-md-6 offset-md-3">
<h1 class="text-center mb-4">Stealth Wallet</h1>
<div id="starter-info">
<h5 class="text-center">Connect your Metamask wallet</h5>
<p class="text-center mb-4">⚠️ Sepolia test net only ⚠️</p>
<div class="form-group">
<button id="connect-wallet-btn" class="btn-primary w-100 btn btn-outline-primary">Connect Wallet</button>
</div>
</div>
<div id="user-address" class="user-address d-none"></div>
<div id="login">
<div class="form-group mt-4">
<label for="message-input">Sign the following message to login:</label>
<textarea id="message-input" class="form-control mt-1 mb-1" rows="3">I want to login into my stealth wallet.</textarea>
</div>
<div class="form-group">
<button id="sign-message-btn" class="btn-primary w-100 btn mb-4 btn-outline-primary">Sign Message</button>
</div>
</div>
</div>
</div>
<div id="personalSign"></div>
<div id="user-stealth-meta-address" class="d-none">
<div class="row">
<div class="col-md-6 offset-md-3 .text-center">
<h4 class="text-center mt-3 mb-0">Your Stealth Meta-Address:</h4>
<div style="font-size: 0.9rem;" id="stealth-meta-address" class="user-address"></div>
</div>
</div>
<div class="row">
<div class="col-md-6 offset-md-3 d-flex justify-content-center mb-4">
<button class="w-100 btn btn-outline-primary bright-btn" id="copybuttonSMA">Copy to Clipboard</button>
<button id="show-keys-btn" class="w-100 btn btn-outline-primary bright-btn">Show me my keys</button>
</div>
</div>
<div class="row mt-2">
<div class="col-md-6 offset-md-3 d-flex justify-content-center">
<button id="tab1-btn" type="button" class="btn btn-primary w-50">Send</button>
<button id="tab2-btn" type="button" class="btn btn-secondary w-50">Receive</button>
</div>
</div>
<div class="row mt-4">
<div class="col-md-6 offset-md-3">
<!-- Tab content -->
<div id="tab1" class="tab-content">
<h2>Send to a stealth address</h2>
<!-- Input fields -->
<div class="form-group mb-2">
<label for="input-string">Enter the stealth meta-address of the recipient:</label>
<input type="text" class="form-control" id="input-stealth-meta-address" placeholder="st:eth:0x...">
</div>
<div class="form-group mb-1">
<label for="input-amount">Enter amount in ETH:</label>
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">ETH</span>
</div>
<input type="number" step="0.01" class="form-control" id="input-amount" value="0.01" placeholder="Enter amount in ETH" min="0">
</div>
<div class="form-check form-switch mt-3 mb-3">
<input class="form-check-input custom-toggle" type="checkbox" role="switch" id="flexSwitchCheckDefault">
<label class="form-check-label" for="flexSwitchCheckDefault">Secure Escrow Transaction <span class="icon-ok-sign" data-bs-toggle="tooltip"
data-bs-placement="top" data-bs-html="true" title="The escrow transfer option allows you to retrieve the sent funds back if they are not claimed by the recipeint yet.
This works by creating two transactions, one for the initialization and one that the recipient receives to claim the funds.
The raw transaction must be signed with your spending private key and gets then encrypted such that only the recipient can execute it.
Importanty, the recipient is NOT required to pay for any transaction fees.">
<img class="bi bi-info-circle-fill" src="static/img/info-circle-fill.svg"></img>
</span></label>
</div>
</div>
<!-- Send button -->
<div class="form-group">
<button id="send-btn" class="btn-primary w-100 btn btn-outline-primary">Send</button>
</div>
</div>
<div id="tab2" class="tab-content" style="display: none;">
<h2> Receive to a stealth address</h2>
<label for="input-string">Press button to start parsing for your stealth addresses:</label>
<label for="ephemeral-key-toggle" class="mt-2 mb-2">
<input type="checkbox" id="ephemeral-key-toggle"> I already know my ephemeral public key
<span class="icon-ok-sign" data-bs-toggle="tooltip"
data-bs-placement="top" data-bs-html="true" title="If you already know the ephemeral public key to one of your stealth addresses, then you can skip the parsing and directly retrieve you stealth private key (even without any internet connection).">
<img class="bi bi-info-circle-fill" src="static/img/info-circle-fill.svg"></img>
</span>
</label>
<div class="ephemeral-key-input mb-2" style="display: none;">
<label for="ephemeral-public-key">Ephemeral Public Key:</label>
<input type="text" id="ephemeral-public-key" placeholder="Enter your ephemeral public key">
</div>
<button id="parse-btn" class="btn-primary w-100 btn btn-outline-primary mb-3 mt-1"><span id="loading-spinner" class="spinner-border spinner-border-sm d-none" role="status" aria-hidden="true"></span>Parse</button>
<div id="parsing-form" class="form-group d-none">
<label for="input-string">Stealth Address:</label>
<div class="input-group mb-2">
<input id="parsing-output-stealth-address" class="form-control" type="text" placeholder="0x..." readonly>
<div class="input-group-append">
<button class="btn btn-light" id="basic-addon2">View in Explorer</button>
</div>
</div>
<label for="input-string">Stealth Private Key:</label>
<input id="parsing-output-stealth-private-key" class="form-control" type="text" placeholder="0x..." readonly>
<button class="w-100 btn btn-outline-primary copy-btn bright-btn" id="copybuttonSPK">Copy to Clipboard</button>
</div>
</div>
</div>
</div>
</div>
<div class="row mt-4">
<div class="col-md-6 offset-md-3">
<footer class="footer mt-auto py-3 bg-light">
<div class="container text-center">
<span style="font-size: 1rem;" class="text-muted">Sign up to the <a href="https://t.me/EthStealthWalletBot" target="_blank">stealth-wallet-bot</a> to receive notifications for incoming transactions.</span>
<br>
<span style="font-size: 1rem;" class="text-muted">Check out <a href="https://nerolation.github.io/stealth-utils/" target="_blank">this</a> tutorial to find more info about stealth addresses. </span>
<br>
<span style="font-size: 1rem;" class="text-muted">View <a href="https://github.com/nerolation/stealth-wallet" target="_blank">source code</a> on Github.</span>
<br>
<span style="font-size: 1rem;" class="text-muted">© <a href="https://twitter.com/nero_eth" target="_blank">Toni Wahrstätter</a> 2023 </span>
</div>
</footer>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="transactionModal" tabindex="-1" aria-labelledby="transactionModalLabel" aria-hidden="true" data-bs-backdrop="true" data-bs-keyboard="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="transactionModalLabel">Transaction Summary</h5>
</div>
<div class="modal-body">
<p id="modal-stealth-address">Stealth Address: </p>
<p id="modal-amount">Amount
<span class="icon-ok-sign" data-bs-toggle="tooltip"
data-bs-placement="top" title="Note: If this is your first interaction with the Messenger contract from your connected account, then
0.001 ETH from the amount are staked within the `Messenger` contract. The staking is required for security reasons and can be withdrawn at any time.
Furthermore, it is unslashable. Staking provides your recipients with prioritized treatment in the parsing process.">
<img class="bi bi-info-circle-fill" src="static/img/info-circle-fill.svg"></img>
</span>:
</p>
<p id="modal-status">Status: Waiting for confirmation...</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="parsingModal" tabindex="-1" aria-labelledby="parsingModalLabel" aria-hidden="true" data-bs-backdrop="true" data-bs-keyboard="true">
<div class="modal-dialog">
<div class="modal-content" id="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="parsingModalLabel">Gas-less claiming available!</h5>
</div>
<div class="modal-body">
<p id="pmodal-stealth-address">Stealth Address: </p>
<div class="col text-center">
<div class="d-grid gap-2 col-6 mx-auto">
<button id="claimEscrow" type="button" class="btn btn-success" data-placement="top" data-toggle="tooltip" title='It looks like the sender
of the transaction selected the escrow process and prepared a signed but encrypted transaction from the escrow to your stealth address. You can
decrypt the transaction using the shared secret between the sender and you and then broadcast it.'>
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-info-circle" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
<path d="m8.93 6.588-2.29.287-.082.38.45.083c.294.07.352.176.288.469l-.738 3.468c-.194.897.105 1.319.808 1.319.545 0 1.178-.252 1.465-.598l.088-.416c-.2.176-.492.246-.686.246-.275 0-.375-.193-.304-.533L8.93 6.588zM9 4.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/>
</svg>
Claim
</button>
</div>
</div>
<p id="pmodal-status"></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Show Keys Modal -->
<div class="modal fade" id="keysModal" tabindex="-1" aria-labelledby="keysModalLabel" aria-hidden="true" data-bs-backdrop="true" data-bs-keyboard="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title" id="keysModalLabel">Your key pairs</h5>
</div>
<div class="modal-body">
<!-- Spending Key Pair -->
<div>
<h5 >Spending Key Pair</h5>
<p class="mb-0">
<strong>Private Key:</strong>
<div id="keywrapper1" class="key-wrapper pb-3">
<span id="spending-private-key">■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■</span>
</div>
<button class="copy-btn btn btn-outline-primary pb-2 bright-btn">Copy</button>
</p>
<p class="mb-0">
<strong>Public Key:</strong>
<div id="keywrapper2" class="key-wrapper pb-3">
<span id="spending-public-key">■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■</span>
</div>
<button class="copy-btn btn btn-outline-primary bright-btn">Copy</button>
</p>
</div>
<!-- Viewing Key Pair -->
<div>
<h5>Viewing Key Pair</h5>
<p class="mb-0">
<strong>Private Key:</strong>
<div id="keywrapper3" class="key-wrapper pb-3">
<span id="viewing-private-key">■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■</span>
</div>
<button class="copy-btn btn btn-outline-primary bright-btn">Copy</button>
</p>
<p class="mb-0">
<strong>Public Key:</strong>
<div id="keywrapper4" class="key-wrapper pb-3">
<span id="viewing-public-key">■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■</span>
</div>
<button class="copy-btn btn btn-outline-primary bright-btn">Copy</button>
</p>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Bootstrap JS -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha2/dist/js/bootstrap.min.js" integrity="sha384-heAjqF+bCxXpCWLa6Zhcp4fu20XoNIA98ecBC1YkdXhszjoejr5y9Q77hIrv8R9i" crossorigin="anonymous"></script>
<script>
$(function () {
$('[data-toggle="tooltip"]').tooltip({
placement: 'top',
html: true
});
});
</script>
</body>
<canvas id="confetti"></canvas>
</html>