From b02375ff47f30dc23a88c90e58505d7e80233e00 Mon Sep 17 00:00:00 2001
From: Niko PLP <niko@nextgraph.org>
Date: Sun, 14 Jul 2024 18:56:52 +0300
Subject: [PATCH] error handling on wallet/scanqr

---
 ng-app/src/locales/en.json      |  3 ++-
 ng-app/src/routes/ScanQR.svelte | 31 ++++++++++++++++++++++---------
 2 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/ng-app/src/locales/en.json b/ng-app/src/locales/en.json
index c4aa8d7..09a35aa 100644
--- a/ng-app/src/locales/en.json
+++ b/ng-app/src/locales/en.json
@@ -358,7 +358,8 @@
     "ExportWalletTimeOut": "The wallet-export session has expired. Try again.",
     "ConnectionError": "Could not connect to the server.",
     "IncompatibleQrCode": "You scanned a NextGraph QR-Code that is of the wrong type.",
-    "NotARendezVous": "You scanned an invalid QR-Code."
+    "NotARendezVous": "You scanned an invalid QR-Code.",
+    "camera_unavailable": "Camera is unavailable."
   },
   "connectivity": {
     "stopped": "Stopped",
diff --git a/ng-app/src/routes/ScanQR.svelte b/ng-app/src/routes/ScanQR.svelte
index 0d1ec40..316714f 100644
--- a/ng-app/src/routes/ScanQR.svelte
+++ b/ng-app/src/routes/ScanQR.svelte
@@ -18,14 +18,14 @@
   import { onMount, onDestroy } from "svelte";
   import { t } from "svelte-i18n";
   import { scanned_qr_code } from "../store";
-  import { ArrowLeft } from "svelte-heros-v2";
+  import { ArrowLeft, ExclamationTriangle } from "svelte-heros-v2";
   import { Spinner } from "flowbite-svelte";
-
   let tauri_platform = import.meta.env.TAURI_PLATFORM;
   let mobile = tauri_platform == "android" || tauri_platform == "ios";
 
   let webScanner;
   let nativeScanner;
+  let error = false;
 
   function on_qr_scanned(content) {
     scanned_qr_code.set(content);
@@ -64,12 +64,17 @@
           on_qr_scanned(decoded_text);
         });
       } catch (e) {
-        webScanner = new Html5Qrcode ("scanner-div");
-        await webScanner.start({ facingMode: "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);
-        });
+        try {
+          webScanner = new Html5Qrcode ("scanner-div");
+          await webScanner.start({ facingMode: "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);
+          });
+        } catch (e) {
+          webScanner = null;
+          error = true;
+        }
       }
 
       // // Add scanner to Screen.
@@ -118,10 +123,18 @@
   <div>
     <h2 class="text-xl mb-6">{$t("pages.scan_qr.scanning")}</h2>
   </div>
-  <Spinner />
+  {#if !error}<Spinner />{/if}
   <!-- Web Scanner -->
   <div id="scanner-div"></div>
 
+  {#if error}
+    <div class="mx-6 max-w-6xl lg:px-8 mx-auto px-4 text-red-800">
+      <ExclamationTriangle class="animate-bounce mt-10 h-16 w-16 mx-auto" />
+      
+        {@html $t("errors.camera_unavailable")}
+      
+    </div>
+  {/if}
   <div class="mx-auto max-w-xs">
     <button
       on:click={() => window.history.go(-1)}