From 162168c6438221d582b44759cefd6104aea2f947 Mon Sep 17 00:00:00 2001
From: Niko PLP <niko@nextgraph.org>
Date: Thu, 7 Sep 2023 22:02:56 +0300
Subject: [PATCH] using webworker on web app for wallet opening

---
 ng-app/src/lib/Login.svelte            | 42 ++++++++++++++++++++------
 ng-app/src/worker.js                   | 21 +++++++++++++
 ng-app/vite.config.ts                  | 12 +++++++-
 ngaccount/web/src/routes/Create.svelte |  4 +--
 4 files changed, 66 insertions(+), 13 deletions(-)
 create mode 100644 ng-app/src/worker.js

diff --git a/ng-app/src/lib/Login.svelte b/ng-app/src/lib/Login.svelte
index 1d2296c..88e1a2a 100644
--- a/ng-app/src/lib/Login.svelte
+++ b/ng-app/src/lib/Login.svelte
@@ -118,16 +118,38 @@
 
     // open the wallet
     try {
-      let secret_wallet = await ng.wallet_open_wallet_with_pazzle(
-        wallet,
-        pazzle,
-        pin_code
-      );
-      step = "end";
-      dispatch("opened", {
-        wallet: secret_wallet,
-        id: secret_wallet.V0.wallet_id,
-      });
+      if (tauri_platform) {
+        let secret_wallet = await ng.wallet_open_wallet_with_pazzle(
+          wallet,
+          pazzle,
+          pin_code
+        );
+        step = "end";
+        dispatch("opened", {
+          wallet: secret_wallet,
+          id: secret_wallet.V0.wallet_id,
+        });
+      } else {
+        let worker_file = await import("../worker.js?worker");
+        const myWorker = new worker_file.default();
+        myWorker.postMessage({ wallet, pazzle, pin_code });
+
+        myWorker.onmessage = (msg) => {
+          //console.log("Message received from worker", msg.data);
+          if (msg.data.success) {
+            step = "end";
+            dispatch("opened", {
+              wallet: msg.data.success,
+              id: msg.data.success.V0.wallet_id,
+            });
+          } else {
+            console.error(msg.data.error);
+            error = msg.data.error;
+            step = "end";
+            dispatch("error", { error: msg.data.error });
+          }
+        };
+      }
     } catch (e) {
       console.error(e);
       error = e;
diff --git a/ng-app/src/worker.js b/ng-app/src/worker.js
new file mode 100644
index 0000000..4b4609f
--- /dev/null
+++ b/ng-app/src/worker.js
@@ -0,0 +1,21 @@
+import {
+    default as ng,
+  } from "./api";
+
+  onmessage = (e) => {
+    //console.log("Message received by worker", e.data);
+    (async function() {
+      try {
+        let secret_wallet = await ng.wallet_open_wallet_with_pazzle(
+            e.data.wallet,
+            e.data.pazzle,
+            e.data.pin_code
+        );
+        postMessage({success:secret_wallet});
+      } catch (e) {
+        postMessage({error:e});
+      }
+    })();
+  };
+
+  
\ No newline at end of file
diff --git a/ng-app/vite.config.ts b/ng-app/vite.config.ts
index 8f48633..6c3d75b 100644
--- a/ng-app/vite.config.ts
+++ b/ng-app/vite.config.ts
@@ -11,6 +11,13 @@ import topLevelAwait from "vite-plugin-top-level-await";
 export default defineConfig(async () => {
   const host = await internalIpV4()
   const config = {
+  worker: {
+    format: 'es',
+    plugins : [
+      wasm(),
+      topLevelAwait(),
+    ]
+  },
   plugins: [
     wasm(),
     topLevelAwait(),
@@ -71,6 +78,9 @@ export default defineConfig(async () => {
     sourcemap: !!process.env.TAURI_DEBUG,
   }
 }
-if (process.env.NG_APP_FILE) config.plugins.push(viteSingleFile());
+if (process.env.NG_APP_FILE) {
+  config.plugins.push(viteSingleFile());
+  config.worker.plugins.push(viteSingleFile());
+}
 return config
 })
diff --git a/ngaccount/web/src/routes/Create.svelte b/ngaccount/web/src/routes/Create.svelte
index 46e36e9..5a870d5 100644
--- a/ngaccount/web/src/routes/Create.svelte
+++ b/ngaccount/web/src/routes/Create.svelte
@@ -180,8 +180,8 @@
         <div class=" max-w-6xl lg:px-8 mx-auto px-4">
           <p class="max-w-xl md:mx-auto lg:max-w-2xl">
             You would like to choose <b>{domain}</b> as your Broker Service
-            Provider.<br />Please read carefully the Terms of Service here
-            below, before accepting them.
+            Provider.<br />Please read carefully the Terms of Service below,
+            before accepting them.
           </p>
         </div>
       {/if}