Add button to stop scanning announcements

frontend/src/i18n/locales/en-US.json

@@ -119,7 +119,8 @@
     "fetching-latest": "Fetching latest 10,000 announcements...",
     "scanning": "Scanning all announcements for funds...",
     "scanning-latest": "Scanning latest announcements for funds...",
-    "wait": "This may take a couple of minutes depending on your connection and device. This is normal— please be patient."
+    "wait": "This may take a couple of minutes depending on your connection and device. This is normal— please be patient.",
+    "stop": "Stop"
   },
   "Setup": {
     "setup": "Setup",

frontend/src/i18n/locales/zh-CN.json

@@ -119,7 +119,8 @@
     "fetching-latest": "在获取最新的 10，000 条公告...",
     "scanning": "在所有的公告中扫描资金...",
     "scanning-latest": "在最新公告中扫描资金...",
-    "wait": "这可能需要几分钟，具体取决于您的连接和设备。这是正常的 — 请耐心等待。"
+    "wait": "这可能需要几分钟，具体取决于您的连接和设备。这是正常的 — 请耐心等待。",
+    "stop": "停止"
   },
   "Setup": {
     "setup": "注册",

frontend/src/pages/AccountReceive.vue

@@ -101,6 +101,14 @@
         </div>
         <div v-else class="text-center text-italic">{{ $t('Receive.fetching-latest') }}</div>
       </div>
+      <div>
+        <base-button
+          v-if="scanStatus != 'complete' && scanStatus != 'waiting'"
+          @click="terminateWorkers()"
+          class="text-center q-pt-md"
+          :label="$t('Receive.stop')"
+        />
+      </div>
     </div>
   </q-page>
 </template>
@@ -130,6 +138,8 @@ function useScan() {
   const scanStatus = ref<ScanStatus>('waiting');
   const scanPercentage = ref<number>(0);
   const userAnnouncements = ref<UserAnnouncement[]>([]);
+  const workers: Worker[] = [];
+  const paused = ref(false);
 
   // Start and end blocks for advanced mode settings
   const { advancedMode, startBlock, endBlock, setScanBlocks, setScanPrivateKey, scanPrivateKey, resetScanSettings } =
@@ -199,7 +209,19 @@ function useScan() {
     await scan();
   }
 
+  function terminateWorkers() {
+    workers.forEach((worker) => worker.terminate());
+    paused.value = true;
+    if (scanStatus.value == 'fetching latest') {
+      scanStatus.value = 'waiting';
+    } else {
+      scanStatus.value = 'complete';
+    }
+  }
+
   async function scan() {
+    // Reset paused state
+    paused.value = false;
     if (!umbra.value) throw new Error('No umbra instance found. Please make sure you are on a supported network');
     scanStatus.value = 'fetching latest';
 
@@ -228,6 +250,7 @@ function useScan() {
           spendingPublicKey,
           viewingPrivateKey,
           announcements,
+          workers,
           (percent) => {
             scanPercentage.value = Math.floor(percent);
           },
@@ -282,6 +305,9 @@ function useScan() {
           userWalletAddress.value,
           overrides
         )) {
+          if (paused.value) {
+            return;
+          }
           announcementsCount += announcementsBatch.length; // Increment count
           announcementsQueue = [...announcementsQueue, ...announcementsBatch];
           if (announcementsCount == 10000) {
@@ -296,6 +322,8 @@ function useScan() {
         }
         // Wait for the first batch of web workers to finish scanning before creating new workers
         await firstScanPromise;
+        // Clear out existing workers
+        workers.length = 0;
         scanStatus.value = 'scanning';
         await filterUserAnnouncementsAsync(spendingPubKey, viewingPrivKey, announcementsQueue);
         scanStatus.value = 'complete';
@@ -337,6 +365,7 @@ function useScan() {
     startBlockLocal,
     userAddress,
     userAnnouncements,
+    terminateWorkers,
   };
 }
 

frontend/src/worker/worker.ts

@@ -5,6 +5,7 @@ export const filterUserAnnouncements = (
   spendingPublicKey: string,
   viewingPrivateKey: string,
   announcements: AnnouncementDetail[],
+  workers: Worker[],
   progress: (percentage: number) => void,
   completion: (userAnnouncements: UserAnnouncement[]) => void
 ) => {
@@ -58,7 +59,6 @@ export const filterUserAnnouncements = (
     }
 
     // assign tasks to workers
-    const workers: Worker[] = [];
     const progressRecorder: number[] = [];
     let progressSum = 0;
     // Here we will initialize `nCores` workers by constructing `Worker()` imported from worker script `filter.worker.ts`