From a403ea31e714d787d68bdccc7abf23da7052fc94 Mon Sep 17 00:00:00 2001 From: Niko PLP Date: Sun, 14 Jul 2024 04:13:44 +0300 Subject: [PATCH] use API for qrscan on html, force rear camera --- ng-app/src/lib/NoWallet.svelte | 2 +- ng-app/src/locales/en.json | 20 ++++--- ng-app/src/routes/ScanQR.svelte | 58 +++++++++++++------- ng-app/src/routes/WalletInfo.svelte | 19 ++++--- ng-app/src/routes/WalletLogin.svelte | 1 - ng-app/src/routes/WalletLoginTextCode.svelte | 8 +++ ng-app/src/styles.css | 13 +++-- 7 files changed, 79 insertions(+), 42 deletions(-) diff --git a/ng-app/src/lib/NoWallet.svelte b/ng-app/src/lib/NoWallet.svelte index ea4b058..670987d 100644 --- a/ng-app/src/lib/NoWallet.svelte +++ b/ng-app/src/lib/NoWallet.svelte @@ -39,7 +39,7 @@ class="text-white bg-primary-700 hover:bg-primary-700/90 focus:ring-4 focus:ring-primary-700/50 font-medium rounded-lg text-lg px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-primary-700/55 mb-2" > Generate QR to export", - "scan_qr.notes": "You will now scan the QR-Code that appears on the screen of the other device (the one you want to transfer your wallet to).", + "scan_qr.notes": "You will now scan the QR-Code that appears on the screen of the other device (the one you want to transfer your wallet to). You will be asked to allow the app to use your camera.", "scan_qr.scan_btn": "Scan QR-Code ", - "scan_qr.scanner.title": "Scan your QR Code", + "scan_qr.scanner.title": "Scan your QR-Code", "scan_qr.scanner.loading": "Loading scanner", "scan_qr.syncing": "Synchronizing wallet", - "scan_qr.scan_successful": "Success!
Your wallet has been transferred to the new device.", - "gen_qr.title": "Export by generating QR-Code", + "scan_qr.scan_successful": "Success!
Your wallet has been transferred to the other device.", + "gen_qr.title": "Export by generating a QR-Code", "gen_qr.notes": "In order to transfer your wallet to another device, you will now display a QR-Code here on this device, and you will then scan it with the other device where you want to transfer your wallet to.", "gen_qr.no_camera": "If the device where you want to import the Wallet, does not have a camera, then you will have to choose another method.", - "gen_qr.img_title": "Your Export QR Code to Scan", - "gen_qr.img_alt": "Your Export QR Code to Scan", + "gen_qr.img_title": "Your Export QR-Code to Scan", + "gen_qr.img_alt": "Your Export QR-Code to Scan", "gen_qr.gen_button": "Display QR-Code", "gen_text_code.title": "Export with TextCode", "gen_text_code.gen_btn": "Generate TextCode", @@ -268,8 +268,9 @@ }, "wallet_login_textcode": { "title": "Import Wallet from TextCode", - "description": "To generate a TextCode, open a logged in device and go to
User Panel > Wallet > Generate TextCode to export.", - "import_btn": "Import with TextCode" + "description": "To generate a TextCode, open a logged in device and go to
User Panel > Wallet > Generate TextCode to export.", + "import_btn": "Import with TextCode", + "enter_here": "Enter your TextCode here below and click on Import button" }, "scan_qr": { "scanning": "Scanning the QR-Code" @@ -378,9 +379,10 @@ }, "wallet_sync": { "offline_warning": "You cannot transfer your wallet when offline.
Please make sure you are connected to the internet first.", - "textcode.usage_warning": "You have to exchange this TextCode with the other device by any means available to you (email, other messenger apps, etc...). It is highly recommended to use a tool that is end-to-end encrypted. If you can, you should use the \"Import with QRCode\" option instead, as it is safer and simpler. If your devices are not connected to the internet, then you can use the \"Import a Wallet File\" option. In this case, you will transfer the wallet file with a USB key, from one device to the other, or for mobile, by connecting your mobile with the USB cable, to the computer, and then transferring the file with the File Transfer utility on Android, or AirDrop/Finder/iTunes on an iPhone/mac/PC. We do not recommend uploading your wallet file to any cloud service.", + "textcode.usage_warning": "You have to exchange this TextCode with the other device by any means available to you (email, other messenger apps, etc...). It is highly recommended to use a tool that is end-to-end encrypted. If you can, you should use the \"Import with QR-Code\" option instead, as it is safer and simpler. If your devices are not connected to the internet, then you can use the \"Import a Wallet File\" option. In this case, you will transfer the wallet file with a USB key, from one device to the other, or for mobile, by connecting your mobile with the USB cable, to the computer, and then transferring the file with the File Transfer utility on Android, or AirDrop/Finder/iTunes on an iPhone/mac/PC. We do not recommend uploading your wallet file to any cloud service.", "server_transfer_notice": "Both devices need to be online.
During this wallet transfer, your wallet will be temporarily and securely stored on our servers for up to 5 minutes, using two levels of encryption.
We at NextGraph will never be able to read your wallet, your PIN, your pazzle nor your mnemonic.", "importing": "Importing wallet", + "expiry": "The TextCode will be valid for 5 minutes.", "error": "An error occurred while synchronizing your wallet:
{error}", "no_camera": "Unfortunately, your device does not have a camera.
You cannot scan any QR-Code.
In order to export your wallet to another device, you will have to use another method.", "no_camera_alternatives": "You have 2 other options: \"Import a Wallet file\" (transfer it using a USB key by example, useful if you are offline) or \"Import a TextCode\" (which is a text you will have to transfer with another messaging app)." diff --git a/ng-app/src/routes/ScanQR.svelte b/ng-app/src/routes/ScanQR.svelte index eac5cbf..f5c45f3 100644 --- a/ng-app/src/routes/ScanQR.svelte +++ b/ng-app/src/routes/ScanQR.svelte @@ -49,38 +49,58 @@ on_qr_scanned(result.content); } else { // Load Web Scanner - const { Html5QrcodeScanner } = await import("html5-qrcode"); + const { Html5QrcodeScanner, Html5Qrcode } = await import("html5-qrcode"); // Init scanner object - webScanner = new Html5QrcodeScanner( - "scanner-div", - { fps: 10, qrbox: { width: 300, height: 300 }, formatsToSupport: [0] }, - false - ); - - // Add scanner to Screen. - webScanner.render((decoded_text, decoded_result) => { - console.log(decoded_result); + // webScanner = new Html5QrcodeScanner( + // "scanner-div", + // { fps: 10, qrbox: { width: 300, height: 300 }, formatsToSupport: [0] }, + // false + // ); + webScanner = new Html5Qrcode ("scanner-div"); + webScanner.start({ facingMode: { exact: "environment"} }, { fps: 10, qrbox: { width: 300, height: 300 }, formatsToSupport: [0] }, (decoded_text, decoded_result) => { + //console.log(decoded_result); // Handle scan result on_qr_scanned(decoded_text); - }, (error) => { - console.error(error); }); + // // Add scanner to Screen. + // webScanner.render((decoded_text, decoded_result) => { + // //console.log(decoded_result); + // // Handle scan result + // on_qr_scanned(decoded_text); + // }, (error) => { + // //console.error(error); + // }); + // Auto-Request camera permissions (there's no native way, unfortunately...) - setTimeout(() => { - // Auto-start by clicking button - document - .getElementById("html5-qrcode-button-camera-permission") - ?.click(); - }, 100); + // setTimeout(() => { + // // Auto-start by clicking button + // document + // .getElementById("html5-qrcode-button-camera-permission") + // ?.click(); + // }, 100); + + // setTimeout(check_ready_and_start, 1000); + } }); + // const check_ready_and_start = () => { + // // Auto-start by clicking button + // let start_btn = document + // .getElementById("html5-qrcode-button-camera-start"); + // if (start_btn) { + // start_btn.click(); + // } else { + // setTimeout(check_ready_and_start, 1000); + // } + // }; + onDestroy(async () => { if (mobile) { if (nativeScanner) await nativeScanner.cancel(); } else { - if (webScanner) webScanner.clear(); + if (webScanner) webScanner.stop(); } }); diff --git a/ng-app/src/routes/WalletInfo.svelte b/ng-app/src/routes/WalletInfo.svelte index 7c11fcc..06027bc 100644 --- a/ng-app/src/routes/WalletInfo.svelte +++ b/ng-app/src/routes/WalletInfo.svelte @@ -573,7 +573,7 @@ {:else if sub_menu === "text_code"}
  • @@ -598,12 +598,13 @@
    • -
    - - {@html $t("wallet_sync.textcode.usage_warning")} - -
    - + {#if generation_state === "before_start"} +
    + + {@html $t("wallet_sync.textcode.usage_warning")} + +
    + {/if} {#if !$online}
  • @@ -611,6 +612,10 @@ {@html $t("wallet_sync.offline_warning")}
    • + {:else} +
  • + {@html $t("wallet_sync.expiry")} +
    • {/if}
    diff --git a/ng-app/src/routes/WalletLogin.svelte b/ng-app/src/routes/WalletLogin.svelte index f7a6cd3..a4ae56d 100644 --- a/ng-app/src/routes/WalletLogin.svelte +++ b/ng-app/src/routes/WalletLogin.svelte @@ -101,7 +101,6 @@ if ($wallet_from_import) { wallet = $wallet_from_import; importing = true; - // TODO: Show component: "We got wallet from other device. Please log in to your wallet, to import the device." } }); diff --git a/ng-app/src/routes/WalletLoginTextCode.svelte b/ng-app/src/routes/WalletLoginTextCode.svelte index 3889fd6..bd33c77 100644 --- a/ng-app/src/routes/WalletLoginTextCode.svelte +++ b/ng-app/src/routes/WalletLoginTextCode.svelte @@ -1,5 +1,6 @@ @@ -65,6 +71,8 @@
    {@html $t("wallet_sync.server_transfer_notice")}
    + +


    {@html $t("pages.wallet_login_textcode.enter_here")}