Skip to content

Commit

Permalink
qr-scanner component (#248)
Browse files Browse the repository at this point in the history
  • Loading branch information
@stepansnigirev
stepansnigirev committed Jul 19, 2020
1 parent cc501c1 commit 5e7c94a
Show file tree
Hide file tree
Showing 8 changed files with 355 additions and 283 deletions.
66 changes: 66 additions & 0 deletions src/cryptoadvance/specter/static/helpers.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
window.addEventListener('load', (event) => {
let main = document.getElementsByTagName("main")[0];
main.addEventListener('click', (event) => {
document.getElementById("side-content").classList.remove("active");
});
let menubtn = document.getElementById("menubtn");
menubtn.addEventListener('click', (event) => {
document.getElementById("side-content").classList.add("active");
event.stopPropagation();
});
});

document.addEventListener("errormsg", (e)=>{
if(!("timeout" in e.detail)){
e.detail.timeout = 0;
}
showError(e.detail.message, e.detail.timeout);
});
document.addEventListener("notification", (e)=>{
if(!("timeout" in e.detail)){
e.detail.timeout = 3000;
}
showNotification(e.detail.message, e.detail.timeout);
});
function showError(msg, timeout=0) {
return showNotification(msg, timeout, "error");
}
function showNotification(msg, timeout=3000, type="primary") {
let el = document.createElement("message-box");
el.setAttribute("type", type);
el.setAttribute("timeout", timeout);
el.innerHTML = msg;
document.getElementById("messages").appendChild(el);
el.addEventListener('click', (e)=>{
document.getElementById("messages").removeChild(el);
});
return el;
}

function copyText(value, msg) {
try {
var element = document.createElement("p");
document.getElementsByTagName("body")[0].appendChild(element);
element.textContent = value
var selection = document.getSelection();
var range = document.createRange();
range.selectNode(element);
selection.removeAllRanges();
selection.addRange(range);
document.execCommand("copy");
selection.removeAllRanges();
document.getElementsByTagName("body")[0].removeChild(element);
showNotification(msg);
}
catch (err) {
showError('Unable to copy text');
}
}
async function wait(ms){
return new Promise(resolve => {
setTimeout(resolve, ms);
});
}
function capitalize(str){
return str.charAt(0).toUpperCase()+str.substring(1);
}
69 changes: 1 addition & 68 deletions src/cryptoadvance/specter/templates/base.jinja
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,74 +49,7 @@
</main>
</div>

<script type="text/javascript">
window.addEventListener('load', (event) => {
let main = document.getElementsByTagName("main")[0];
main.addEventListener('click', (event) => {
document.getElementById("side-content").classList.remove("active");
});
let menubtn = document.getElementById("menubtn");
menubtn.addEventListener('click', (event) => {
document.getElementById("side-content").classList.add("active");
event.stopPropagation();
});
});
document.addEventListener("errormsg", (e)=>{
if(!("timeout" in e.detail)){
e.detail.timeout = 0;
}
showError(e.detail.message, e.detail.timeout);
});
document.addEventListener("notification", (e)=>{
if(!("timeout" in e.detail)){
e.detail.timeout = 3000;
}
showNotification(e.detail.message, e.detail.timeout);
});
function showError(msg, timeout=0) {
return showNotification(msg, timeout, "error");
}
function showNotification(msg, timeout=3000, type="primary") {
let el = document.createElement("message-box");
el.setAttribute("type", type);
el.setAttribute("timeout", timeout);
el.innerHTML = msg;
document.getElementById("messages").appendChild(el);
el.addEventListener('click', (e)=>{
document.getElementById("messages").removeChild(el);
});
return el;
}
function copyText(value, msg) {
try {
var element = document.createElement("p");
document.getElementsByTagName("body")[0].appendChild(element);
element.textContent = value
var selection = document.getSelection();
var range = document.createRange();
range.selectNode(element);
selection.removeAllRanges();
selection.addRange(range);
document.execCommand("copy");
selection.removeAllRanges();
document.getElementsByTagName("body")[0].removeChild(element);
showNotification(msg);
}
catch (err) {
showError('Unable to copy text');
}
}
async function wait(ms){
return new Promise(resolve => {
setTimeout(resolve, ms);
});
}
function capitalize(str){
return str.charAt(0).toUpperCase()+str.substring(1);
}
</script>
<script type="text/javascript" src="/static/helpers.js"></script>

{% block scripts %}
{% endblock %}
Expand Down
81 changes: 34 additions & 47 deletions src/cryptoadvance/specter/templates/device/new_device.jinja
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
{% extends "base.jinja" %}
{% block main %}
{% include "includes/hwi/hwi.jinja" %}
{% include "includes/qr-scanner.html" %}

{% if device %}
<h1>Adding keys to {{ device.name }}</h1>
{% else %}
Expand All @@ -26,19 +28,21 @@
</div>
<textarea id="txt" name="xpubs" placeholder="Enter your xpubs here">{{ xpubs }}</textarea>
<div class="row">
<a href="#" class="btn" id="scanme" style="margin: 2px;">
<img src="/static/img/qr_icon.svg" height="12px"> Scan
<div class="tool-tip">
<i class="tool-tip__icon">i</i>
<p class="tool-tip__info">
<span class="info">
<span class="info__title">Using an airgapped Specter DIY with QR codes<br><br></span>
Scan QR codes with extended public keys one by one.<br><br>
We recommend importing <b>Native Segwit</b> and <b>Segwit Multisig</b> keys.
</span>
</p>
</div>
<qr-scanner id="xpub-scan" style="width:50%">
<a slot="button" href="#" class="btn" style="margin: 2px;">
<img src="/static/img/qr_icon.svg" height="12px"> Scan
<div class="tool-tip">
<i class="tool-tip__icon">i</i>
<p class="tool-tip__info">
<span class="info">
<span class="info__title">Using an airgapped Specter DIY with QR codes<br><br></span>
Scan QR codes with extended public keys one by one.<br><br>
We recommend importing <b>Native Segwit</b> and <b>Segwit Multisig</b> keys.
</span>
</p>
</div>
</a>
</qr-scanner>
<input type="file" id="file" class="inputfile" multiple/>
<label for="file" class="btn" style="margin: 2px;">
Choose files
Expand Down Expand Up @@ -181,15 +185,19 @@ upub5En4f7k8gaG2KDHvBeEYox...rFpJRHpiZ4DE
var deviceType = document.getElementById("device_type");
var typeReminder = document.getElementById("type_reminder");
deviceType.addEventListener("change", function() {
type_reminder.style.display = 'none';
if(deviceType!=null){
deviceType.addEventListener("change", function() {
type_reminder.style.display = 'none';
setPubkeysView();
}, false);
deviceType.value = '{{ device_type }}';
setPubkeysView();
}, false);
deviceType.value = '{{ device_type }}';
setPubkeysView();
}
var strength = document.getElementById("strength");
strength.value = '{{ strength }}';
if(strength!=null){
strength.value = '{{ strength }}';
}
});
</script>

Expand Down Expand Up @@ -300,23 +308,14 @@ upub5En4f7k8gaG2KDHvBeEYox...rFpJRHpiZ4DE
});
</script>

<div class="popup" id="popup">
<video muted playsinline id="qr-video" class="video"></video>
</div>

<script type="module">
import QrScanner from "/static/qr/qr-scanner.min.js";
{% include "includes/message-events.js" %}
{% include "device/components/add_keys.js" %}
if (document.getElementById("scanme") != null) {
QrScanner.WORKER_PATH = '/static/qr/qr-scanner-worker.min.js';
const video = document.getElementById('qr-video');
const scanner = new QrScanner(video, result => {
scanner.stop();
document.getElementById("popup").style.display = 'none';
<script type="text/javascript">
let scanner = document.getElementById('xpub-scan');
if(scanner != null) {
scanner.addEventListener('scan', e=>{
let result = e.detail.result;
if(result==null){
return;
}
let deviceType = document.getElementById("device_type");
// cobo uses json format
if(result.includes("{")){
Expand All @@ -337,18 +336,6 @@ upub5En4f7k8gaG2KDHvBeEYox...rFpJRHpiZ4DE
setDeviceType('specter');
}
});
document.getElementById("scanme").addEventListener("click", function(){
try{
scanner.start();
document.getElementById("popup").style.display = 'flex';
}catch(e){
showError("Can't start the QR scanner!\n\n" + e);
}
});
document.getElementById("popup").addEventListener("click", function(){
document.getElementById("popup").style.display = 'none';
scanner.stop();
});
}
</script>

Expand Down

0 comments on commit 5e7c94a

Please sign in to comment.