style: improve code formatting and type safety

- Add proper type annotation for onDetect result parameter - Fix indentation and line wrapping in template - Remove unused WebInlineQRScanner import - Clean up button attribute ordering - Fix whitespace and formatting issues - Remove unused empty divs
1 month ago · 5d195d06ba
6 changed files with 391 additions and 2574 deletions
--- a/2
+++ b/2
@ -1,5 +1,5 @@
 # Build stage
-FROM node:20-alpine AS builder
+FROM node:22-alpine AS builder

 # Install build dependencies

--- a/package-lock.json
+++ b/package-lock.json
--- a/src/services/QRScanner/QRScannerService.ts
+++ b/src/services/QRScanner/QRScannerService.ts
@ -1,5 +1,3 @@
-import { EventEmitter } from "events";
-
 export interface QRScannerListener {
  onScan: (result: string) => void;
  onError: (error: Error) => void;
--- a/src/services/QRScanner/WebInlineQRScanner.ts
+++ b/src/services/QRScanner/WebInlineQRScanner.ts
@ -159,7 +159,7 @@ export class WebInlineQRScanner implements QRScannerService {

      // Stop all tracks in the stream
      if (this.stream) {
-        this.stream.getTracks().forEach(track => track.stop());
+        this.stream.getTracks().forEach((track) => track.stop());
        this.stream = null;
      }

--- a/src/views/ContactQRScanShowView.vue
+++ b/src/views/ContactQRScanShowView.vue
@ -101,7 +101,8 @@
              <path
                class="opacity-75"
                fill="currentColor"
-                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+                d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 
+                3.042 1.135 5.824 3 7.938l3-2.647z"
              ></path>
            </svg>
            <span>{{ initializationStatus }}</span>
@ -119,9 +120,7 @@
            <span class="font-medium">Error:</span> {{ error }}
          </p>
          <p v-else class="flex items-center justify-center space-x-2">
-            <span
-              class="inline-block w-2 h-2 bg-blue-500 rounded-full"
-            ></span>
+            <span class="inline-block w-2 h-2 bg-blue-500 rounded-full"></span>
            <span>Ready to scan</span>
          </p>
        </div>
@ -152,8 +151,8 @@
        <div
          class="absolute bottom-16 left-0 right-0 bg-black bg-opacity-50 text-white text-xs text-center py-1"
        >
-          Camera: {{ preferredCamera === "user" ? "Front" : "Back" }} |
-          Status: {{ cameraStatus }}
+          Camera: {{ preferredCamera === "user" ? "Front" : "Back" }} | Status:
+          {{ cameraStatus }}
        </div>

        <!-- Camera Switch Button -->
@ -172,7 +171,9 @@
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
-              d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"
+              d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 
+              011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 
+              01-2-2V9z"
            />
            <path
              stroke-linecap="round"
@ -186,15 +187,15 @@
      <div v-else>
        <button
          v-if="isNativePlatform"
-          @click="$router.push({ name: 'contact-qr-scan' })"
          class="bg-blue-500 text-white px-4 py-2 rounded-md mt-4"
+          @click="$router.push({ name: 'contact-qr-scan' })"
        >
          Start Scanning
        </button>
        <button
          v-else
-          @click="startScanning"
          class="bg-blue-500 text-white px-4 py-2 rounded-md mt-4"
+          @click="startScanning"
        >
          Start Scanning
        </button>
@ -233,7 +234,6 @@ import { retrieveAccountMetadata } from "../libs/util";
 import { Router } from "vue-router";
 import { logger } from "../utils/logger";
 import { QRScannerFactory } from "@/services/QRScanner/QRScannerFactory";
-import { WebInlineQRScanner } from "@/services/QRScanner/WebInlineQRScanner";

 interface QRScanResult {
  rawValue?: string;
@ -842,7 +842,8 @@ export default class ContactQRScanShow extends Vue {
      this.isInitializing = false;
      this.cameraStatus = "Ready";
    } catch (error) {
-      const wrappedError = error instanceof Error ? error : new Error(String(error));
+      const wrappedError =
+        error instanceof Error ? error : new Error(String(error));
      this.error = wrappedError.message;
      this.cameraStatus = "Error";
      this.isInitializing = false;
@ -862,12 +863,16 @@ export default class ContactQRScanShow extends Vue {
    this.cameraStatus = "Off";
  }

-  onDetect(result: any): void {
+  onDetect(result: unknown): void {
    this.isScanning = true;
    this.cameraStatus = "Detecting";
    try {
      let rawValue: string | undefined;
-      if (Array.isArray(result) && result.length > 0 && "rawValue" in result[0]) {
+      if (
+        Array.isArray(result) &&
+        result.length > 0 &&
+        "rawValue" in result[0]
+      ) {
        rawValue = result[0].rawValue;
      } else if (result && typeof result === "object" && "rawValue" in result) {
        rawValue = result.rawValue;
@ -896,11 +901,13 @@ export default class ContactQRScanShow extends Vue {
  }

  toggleCamera(): void {
-    this.preferredCamera = this.preferredCamera === "user" ? "environment" : "user";
+    this.preferredCamera =
+      this.preferredCamera === "user" ? "environment" : "user";
  }

  private handleError(error: unknown): void {
-    const wrappedError = error instanceof Error ? error : new Error(String(error));
+    const wrappedError =
+      error instanceof Error ? error : new Error(String(error));
    this.error = wrappedError.message;
    this.cameraStatus = "Error";
  }
--- a/src/views/ContactQRScanView.vue
+++ b/src/views/ContactQRScanView.vue
@ -9,21 +9,19 @@

      <p v-if="error" class="text-center text-rose-300 mb-3">{{ error }}</p>

-		<div class="text-center">
-			<button
-				class="text-center text-white leading-none bg-slate-400 p-2 rounded-full"
-				@click="handleBack"
-			>
-				<font-awesome icon="xmark" class="w-[1em]"></font-awesome>
-			</button>
-		</div>
-	</div>
-
-    <div class="text-center">
-      
+      <div class="text-center">
+        <button
+          class="text-center text-white leading-none bg-slate-400 p-2 rounded-full"
+          @click="handleBack"
+        >
+          <font-awesome icon="xmark" class="w-[1em]"></font-awesome>
+        </button>
+      </div>
    </div>

    <div class="text-center"></div>
+
+    <div class="text-center"></div>
  </section>
 </template>