/
address-data.html
138 lines (128 loc) · 6.45 KB
/
address-data.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
<template id="address-data">
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='styles.css') }}">
<style>
.address-data-table td {
text-align: left;
margin-top: 0;
}
.descriptor {
max-width: 500px;
white-space: -moz-pre-wrap;
white-space: -o-pre-wrap;
white-space: pre-wrap;
word-wrap: break-word;
margin: auto;
}
</style>
<div class="address-data">
<h1>Address details</h1><br>
<div class="address-data-info"></div>
<div class="note"></div>
</div>
</template>
<script type="text/javascript">
class AddressDataElement extends HTMLElement {
constructor() {
super();
// Create a shadow root
var shadow = this.attachShadow({mode: 'open'});
var style = document.getElementById('address-data').content;
var clone = style.cloneNode(true);
this.el = clone.querySelector(".address-data");
this.note = clone.querySelector(".note");
this.info = clone.querySelector(".address-data-info");
this.isVerifyQR = this.getAttribute('data-verify-qr') == 'True';
this.isVerifyHwi = this.getAttribute('data-verify-hwi') == 'True';
this.used = (this.getAttribute('data-used') == 'true');
this.utxo = this.getAttribute('data-utxo');
this.amount = this.getAttribute('data-amount');
this.amountPrice = this.getAttribute('data-amount-price');
this.address = this.getAttribute('data-address');
this.wallet = this.getAttribute('data-address-wallet');
this.note.innerText = `Loading address: ${this.address} details...`;
fetchAddressData(this);
// Attach the created element to the shadow dom
shadow.appendChild(clone);
}
}
async function fetchAddressData(self) {
let url = `{{ url_for('wallets_endpoint.addressinfo', wallet_alias='WALLET_ALIAS') }}`.replace("WALLET_ALIAS", self.wallet);
var formData = new FormData();
formData.append('address', self.address)
try {
const response = await fetch(
url,
{
method: 'POST',
body: formData
}
);
if(response.status != 200){
showError(await response.text());
return;
}
const jsonResponse = await response.json();
if (jsonResponse.success) {
console.log(jsonResponse);
let descriptor = jsonResponse.descriptor;
let addressIndex = jsonResponse.index;
let isChange = jsonResponse.change;
let walletName = jsonResponse.walletName;
let address = jsonResponse.address;
let walletLink = `{{ url_for('wallets_endpoint.wallet', wallet_alias='WALLET_ALIAS') }}`.replace("WALLET_ALIAS", self.wallet);
let addressInfoHTML = `
<table class="address-data-table">
<tbody>
<tr><td>Address:</td><td style="word-break: break-all;"><explorer-link data-type="address" data-value="${address}"></explorer-link></td></tr>
<tr><td>Label:</td><td><address-label data-copy-hidden="true" data-address="${address}" data-wallet="${self.wallet}"></address-label><br></td></tr>
<tr><td>From wallet:</td><td><a href=${walletLink}>${walletName}<a></td></tr>
<tr><td>Address index:</td><td>${addressIndex}</td></tr>
<tr><td>Is change address:</td><td>${isChange ? 'Yes' : 'No'}</td></tr>
<tr><td>Used:</td><td>${self.used ? 'Yes' : 'No'}</td></tr>
<tr><td>UTXO count:</td><td>${self.utxo}</td></tr>
<tr><td>Amount:</td><td>${self.amount} <span class="amount-price note ${self.amountPrice ? '' : 'hidden'}">${self.amountPrice}</span></td></tr>
</tbody>
</table>
`
if (self.isVerifyHwi) {
addressInfoHTML += `
<br>
<button type="button" onclick='hidePageOverlay();displayAddressOnDevice("${address}", unescape("${escape(JSON.stringify(descriptor))}"))' class="btn" style="min-width:200px; max-width:300px; margin: auto;">Verify address on device</button>`;
}
if (self.isVerifyQR) {
addressInfoHTML += `
<p>Or scan this QR code:</p>
<qr-code value="bitcoin:${address}?index=${addressIndex}" width="256" scalable></qr-code><br>`;
}
addressInfoHTML += `
<br>
<h2>Address descriptor</h2>
<br>
<div>
<span class="switch-text">Show raw public keys </span>
<label class="switch">
<input type="checkbox" class="descriptor-switch" checked>
<span class="slider"></span>
</label><br><br>
</div>
<pre class="descriptor"><code class="explorer-link" onclick='copyText(unescape("${escape(descriptor.descriptor)}"), "Copied address descriptor")'>${descriptor.descriptor}</code></pre>
`;
self.info.innerHTML = addressInfoHTML;
self.note.innerText = "";
self.info.querySelector('.descriptor-switch').onchange = (e) => {
if (e.target.checked) {
self.info.querySelector(".descriptor").innerHTML = `<code class="explorer-link" onclick='copyText(unescape("${escape(descriptor.descriptor)}"), "Copied address descriptor")'>${descriptor.descriptor}</code>`;
} else {
self.info.querySelector(".descriptor").innerHTML = `<code class="explorer-link" onclick='copyText(unescape("${escape(descriptor.xpubs_descriptor)}"), "Copied address descriptor")'>${descriptor.xpubs_descriptor}</code>`;
}
}
return;
}
self.note.innerText = "Failed to load address details...";
} catch(e) {
self.note.innerText = "Failed to load address details...";
console.error(e);
}
}
customElements.define('address-data', AddressDataElement);
</script>