forked from cashonize/legacy-wallet
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
356 lines (340 loc) · 17 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
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
<!DOCTYPE html>
<html lang="en">
<head>
<title>CashTokens Webwallet</title>
<link rel="icon" type="image/png" href="/images/favicon.png">
<meta name="description" content="Bitcoin Cash Webwallet with CashTokens support for chipnet.">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/chota.min.css">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="switchery/switchery.css" />
<script src="switchery/switchery.js"></script>
<script defer src="https://cdn.mainnet.cash/mainnet-1.1.16.js"></script>
<script>window.exports = {}</script>
<script defer src="https://unpkg.com/@download/[email protected]/dist/blockies.min.js"></script>
<script src="https://unpkg.com/@bitjson/[email protected]/dist/qr-code.js"></script>
</head>
<body>
<div>
<header>
<h1 style="margin: 0.35em 0 0.35em">
<img class="icon" style="width: 40px;" src="/images/favicon.png">
CashTokens Webwallet
</h1>
<div>
<nav class="nav hide">
<div class="nav-left">
<div class="tabs">
<a id="view0" class="view active" onclick="changeView(0)">BchWallet</a>
<a id="view1" class="view" onclick="changeView(1)">MyTokens</a>
<a id="view2" class="view" onclick="changeView(2)">CreateTokens</a>
<a id="view3" class="view" onclick="changeView(3)">
<div><img id="settingsIcon" class="icon" src="/images/settings.svg"></div>
</a>
</div>
</div>
</nav>
</div>
</header>
</div>
<main>
<div class="container">
<div id="newWalletView" class="hide">
<fieldset style="margin-top: 15px;">
<h4><img class="icon plusIcon" src="/images/plus-square.svg"> Create new wallet</h4>
<input class="button primary" type="button" value="Create" onclick="createNewWallet()">
<br><br>
<hr>
<br>
<h4><img class="icon importIcon" src="/images/log-in.svg"> Import existing wallet</h4>
<div>Enter mnemonic seed phrase</div>
<textarea style="resize: none;" id="enterSeedphrase"rows="3" cols="50" placeholder="word1 word2 ..."></textarea>
<span>Derivation path: </span>
<select name="derivationPath" id="derivationPath" onchange="selectTokenType(event)">
<option value="standard">m/44’/145’/0’ (standard)</option>
<option value="bitcoinfotcom">m/44’/0’/0’ (bitcoin.com wallet)</option>
</select> <br>
<input class="button primary" type="button" style="margin-top:15px" value="Import" onclick="importWallet()">
<br><br>
</fieldset>
</div>
<div id="walletView" class="hide">
<fieldset style="margin-top: 20px; padding-top: 2rem;">
<div id="showsUsdBalance">
<span>USD balance: </span>
<span id="balanceUsd" class="text-primary"></span>
</div>
<div>
BCH balance: <span id="balance" class="text-primary"></span>
<span id="balanceUnit" class="text-primary unit"></span>
</div>
<div>Wallet token balance: <span id="tokenBalance" class="text-primary"></span></div>
<div style="word-break: break-all;">BCH address: <span class="depositAddr" id="depositAddr"></span>
<button type="button" style="background: none; padding: 0;" onclick="copyTextContent('depositAddr')">
<img class="copyIcon icon" src="/images/copy.svg">
</button>
</div>
<div style="word-break: break-all;">Token address: <span class="depositAddr" id="depositTokenAddr"></span>
<button type="button" style="background: none; padding: 0;" onclick="copyTextContent('depositTokenAddr')">
<img class="copyIcon icon" src="/images/copy.svg">
</button>
</div>
<div><img id="placeholderQr" class="placeholderQr" src="./images/qrcode.jpg" /></div>
<qr-code
id="qr1"
contents="loading..."
class="hide"
style="
width: 240px;
height: 240px;
margin: 5px auto 0 auto;
background-color: #fff;
"
>
<img src="/images/favicon.png" slot="icon" />
</qr-code>
<qr-code
id="qr2"
contents="loading.."
class="hide"
style="
width: 240px;
height: 240px;
margin: 5px auto 0 auto;
background-color: #fff;
"
>
<img src="/images/tokenicon.png" slot="icon" />
</qr-code>
<div class="is-center"><div id="switchAddress" class="icon" onclick="switchAddressType()">⇄</div></div>
</fieldset>
<fieldset style="margin-top: 15px">
<legend>Send BCH to</legend>
<p class="inputGroup">
<span class="addressInput"><input id="sendAddr" placeholder="address"></span>
<span class="sendAmountGroup">
<span style="width: 100%;" class="input-icon input-icon-right">
<input id="sendAmount" type="text"placeholder="amount">
<i id="sendUnit" style="color: black;">BCH</i>
</span>
<button onclick="maxBch(event)" style="color: black;">max</button>
</span>
</p>
<input type="button" class="primaryButton" id="send" value="Send">
</fieldset>
</div>
<div id="tokenView" class="hide tokenView">
<div id="loadingTokenData">Loading token data...</div>
<div id="noTokensFound" class="hide">Currently there are no tokens in this wallet...</div>
<div id="verifiedOnly" class="hide">
<span>Show verified tokens only </span>
<input type="checkbox" class="js-switch js-check-change" id="verifiedOnlySwitch">
</div>
<div id="noVerifiedTokens" class="hide" style="margin: 50px 0 250px 0;">No verified tokens in this wallet...</div>
<template id="token-template">
<div class="item">
<fieldset style="position: relative;">
<legend>
<div id="tokenType"></div>
</legend>
<div id="verified" class="verified hide">
<div class="tooltip">
<img class="verifiedIcon" src="./images/check-circle.svg">
<span class="tooltiptext">Verified</span>
</div>
</div>
<div class="tokenInfo">
<div id="tokenIcon" class="tokenIcon"></div>
<div class="tokenBaseInfo">
<div class="tokenBaseInfo1">
<div id="tokenName"></div>
<div id="tokenIdBox" style="word-break: break-all;">
TokenId: <span id="tokenID" class="tokenID"></span>
<button type="button" style="background: none; padding: 0; " onclick="copyTokenID(event)">
<img class="copyIcon icon" src="/images/copy.svg">
</button>
</div>
<div id="childNftCommitment" style="word-break: break-all;" class="hide"></div>
</div>
<div class="tokenAmount" id="tokenAmount"></div>
<div class="childNfts" id="childNfts" style=" cursor: pointer;">
<span class="nrChildNfts" id="nrChildNfts"></span>
<span class="hide" id="showMore" style="margin-left: 10px;">
<img id="showIcon" class="icon" style="vertical-align: text-bottom;" src="/images/chevron-square-down.svg">
</span>
</div>
</div>
</div>
<div class="actionBar">
<span style="margin-left: 10px;" class="tokenButton" id="sendButton">
<img id="sendIcon" class="icon" src="/images/send.svg"> send </span>
<span class="tokenButton" id="infoButton">
<img id="infoIcon" class="icon" src="/images/info.svg"> info
</span>
<span class="tokenButton hide" id="mintButton">
<img id="mintIcon" class="icon" src="/images/hammer.svg"> mint NFT
</span>
<span class="tokenButton hide" style="white-space: nowrap;" id="burnButton">
<img id="burnIcon" class="icon" src="/images/fire.svg">
<span class="hidemobile">burn NFT</span>
<span class="showmobile">burn</span>
</span>
<div id="tokenInfoDisplay" class="hide" style="margin-top: 10px;">
<div id="tokenBegin"></div>
<div id="tokenDescription"></div>
<div id="tokenDecimals"></div>
<div id="tokenCommitment"></div>
<div id="tokenWebLink"></div>
<div id="onchainTokenInfo" style="white-space: pre-line;"></div>
</div>
<div id="tokenSend" class="hide" style="margin-top: 10px;">
Send these tokens to
<p class="inputGroup">
<span class="addressInput"><input id="tokenAddress" placeholder="token address"></span>
<span class="sendAmountGroup">
<span style="width: 100%;" class="input-icon input-icon-right">
<input id="sendTokenAmount" placeholder="amount">
<i id="sendUnit" style="color: black; width: 70px;">tokens</i>
</span>
<button id="maxButton" style="color: black;">max</button>
</span>
</p>
<input type="button" id="sendSomeButton" class="primaryButton" value="Send">
</div>
<div id="nftSend" class="hide" style="margin-top: 10px;">
Send this NFT to
<p class="grouped">
<input id="tokenAddress" placeholder="tokenAddress">
<input type="button" class="primaryButton" id="sendNFT" value="Send NFT">
</p>
</div>
<div id="nftMint" class="hide" style="margin-top: 10px;">
Mint a single NFT (optionally with commitment)
<p class="grouped">
<input id="commitmentInput" placeholder="commitment">
<input type="button" id="mintNFT" value="Mint NFT">
</p>
Mint a bunch of NFTs
<p class="grouped">
<input id="amountNFTs" type="number" style="width: 160px;" placeholder="number of NFTs">
<input type="button" id="mintNFTs" value="Mint NFTs">
</p>
</div>
<div id="nftBurn" class="hide" style="margin-top: 10px;">
Burn this NFT so no new NFTs of this category can be minted
<br>
<input type="button" id="burnNFT" value="burn NFT" class="button error">
</div>
</div>
</fieldset>
</div>
</template>
<div id="Placeholder"></div>
</div>
<div id="createTokensView" class="hide">
<fieldset class="item">
<legend>Create new tokens</legend>
<label for="newtokens">Select token-type:</label>
<select name="newtokens" id="newtokens" onchange="selectTokenType(event)">
<option value="fungibles">Fungible Tokens</option>
<option value="mintingNFT">Minting NFT</option>
<option value="immutableNFT">Immutable NFT</option>
</select>
<br>
<div style="margin-bottom: 1em;">
Planned tokenId:
<span id="plannedTokenId">loading...</span>
<button type="button" style="background: none; padding: 0;" onclick="copyTokenID(event,'plannedTokenId')">
<img class="copyIcon" src="/images/copy.svg">
</button>
</div>
<div style="margin-bottom: 1em;">
Choose the total supply of these fungible tokens
<input id="tokenSupply" placeholder="total supply">
</div>
<div class="hide" style="margin-bottom: 1em;">
Add immutable commitment data to add to this NFT (hexadecimals only)
<input id="inputNftCommitment" placeholder="commitment">
</div>
<details>
<summary>Optionally link metadata to this token</summary>
<label for="selectUri">Upload the metadata to</label>
<select name="selectUri" id="selectUri" onchange="selectUri(event)">
<option value="HTTPS">HTTPS</option>
<option value="IPFS">IPFS</option>
</select><br>
<div id="httpsInfo">
You can easily create a https url to host your BCMR with Github Gist, similar to
<a href="https://gist.github.com/mr-zwets/323c7786e2acf01e3c04a440d7cf6c2c" target="_blank">this example</a>. <br>
You can add an icon image to your gist by following <a href="https://gist.github.com/mroderick/1afdd71aa69f6b29601d335751a1a9be" target="_blank">these steps</a>. <br>
Then on Github Gists, press "raw" button to get the url to the json object. <br>
Copy this url without the 'https://'' prefix and everything after '/raw'. <br>
Your BCMR url together with the hash of its content will be stored on the blockchain.
<input id="bcmrUrl" placeholder="gist.githubusercontent.com/mr-zwets/323c7786e2acf01e3c04a440d7cf6c2c/raw">
</div>
<div id="ipfsInfo" class="hide">
You can easily upload (pin) your BCMR on IPFS with the <a href="https://ipfs-bch.pat.mn/" target="_blank">IPFS-BCH</a> service or with <a href="https://nft.storage/" target="_blank">nft.storage</a>. <br>
Icons or images should be in a separate folder, like in <a href="https://bafkreiaqpmlrtsdf5cvwgh46mpyric2r44ikqzqgtevny74qdmrjc5dkxy.ipfs.dweb.link/" target="_blank">this example bcmr</a>. <br>
Enter the location of your bcmr (version 1 CID) in the iput field below. <br>
The location of your bcmr together with the hash of its content will be stored on the blockchain.
<input id="bcmrIpfs" placeholder="ipfs://bafkreiaqpmlrtsdf5cvwgh46mpyric2r44ikqzqgtevny74qdmrjc5dkxy">
</div>
</details>
<br>
Process might take a few seconds...
<input type="button" class="primaryButton" id="createTokens" value="Create">
</fieldset>
</div>
<div id="settingsView" class="hide">
<fieldset class="item">
<legend>Settings</legend>
<span style="margin-top: 15px;">Dark mode </span>
<input type="checkbox" class="js-switch js-check-change" id="darkmode">
<div style="margin-top:15px">
<label for="selectUnit">Select default unit:</label>
<select name="selectUnit" id="selectUnit" onchange="selectUnit(event)">
<option value="BCH">BCH</option>
<option value="satoshis">satoshis</option>
</select>
</div>
<div style="margin-top:15px">
<label for="selectNetwork">Change network:</label>
<select name="selectNetwork" id="selectNetwork" onchange="changeNetwork(event)">
<option value="mainnet">mainnet</option>
<option value="chipnet">chipnet</option>
</select>
</div>
<div style="margin-top:15px">Make backup of seed phrase (mnemonic)</div>
<input class="button primary" type="button" style="padding: 1rem 1.5rem; display: block;" value="Show seed phrase" onclick="toggleSeedphrase(event)">
<div id="seedphrase" class="hide"></div><br>
<span style="margin-top:15px">Derivation path of this wallet is</span> <span id="walletDerivationPath"></span>
</fieldset>
</div>
<br>
<footer class="footer hide" id="githubLink">
<a href="https://github.com/mr-zwets/my-cashtokens-webwallet" target="_blank" >
<img class="githublogo" src="./images/github.png" alt="Github logo">
</a>
<div style="margin-left: 10px;height: 60px;">
<a href="https://github.com/mr-zwets/my-cashtokens-webwallet" target="_blank">
<div>
inspect source code
</div>
</a>
<div>
made with mainnet-js
</div>
</div>
</footer>
</div>
</main>
<script type="module" src="./script.js"></script>
<script type="module" src="./queryChainGraph.js"></script>
<script>
document.getElementById('qr1').addEventListener('codeRendered', () => {
document.getElementById('qr1').animateQRCode('MaterializeIn');
});
</script>
</body>
</html>