move qr code scanner to its own component

.gitignore

@@ -3,4 +3,5 @@ pkg/
 Cargo.lock
 node_modules/
 dist/
-.vscode
+.vscode
+public/ssl/

src/components/qrcode-scanner/qrcode-scanner-component.ts

@@ -0,0 +1,84 @@
+import QrScanner from 'qr-scanner';
+import Services from '../../services/service';
+
+        export default class QrScannerComponent extends HTMLElement {
+          videoElement: any;
+          wrapper: any
+          qrScanner: any
+            constructor() {
+                super();
+                this.attachShadow({ mode: 'open' });
+                this.wrapper = document.createElement('div');
+                this.wrapper.style.position = 'relative';
+                this.wrapper.style.width = '150px';
+                this.wrapper.style.height = '150px';
+
+                this.videoElement = document.createElement('video');
+                this.videoElement.style.width = '100%';
+                document.body?.append(this.wrapper);
+                this.wrapper.prepend(this.videoElement);
+            }
+
+            connectedCallback() {
+                this.initializeScanner();
+            }
+
+            async initializeScanner() {
+              if (!this.videoElement) {
+                console.error('Video element not found!');
+                return;
+            }
+              console.log("🚀 ~ QrScannerComponent ~ initializeScanner ~ this.videoElement:", this.videoElement)
+                this.qrScanner = new QrScanner(this.videoElement, result => this.onQrCodeScanned(result),{
+                  highlightScanRegion: true,
+                  highlightCodeOutline: true,
+              });
+                
+                try {
+                    await QrScanner.hasCamera();
+                    this.qrScanner.start();
+                    this.videoElement.style = 'height: 200px; width: 200px'
+                  this.shadowRoot?.appendChild(this.wrapper)
+
+                } catch (e) {
+                    console.error('No camera found or error starting the QR scanner', e);
+                }
+            }
+
+            async onQrCodeScanned(result: any) {
+                console.log(`QR Code detected:`, result);
+                const data = result.data;
+                const scannedUrl = new URL(data);
+
+                // Extract the 'sp_address' parameter
+                const spAddress = scannedUrl.searchParams.get('sp_address');
+                if(spAddress) {
+                  const service = await Services.getInstance();
+                // Call the sendPairingTx function with the extracted sp_address
+                try { 
+                  const sharedSecret = await service.getSecretForAddress(spAddress);
+                  if (!sharedSecret) {
+                    const member = {
+                      sp_addresses: [spAddress],
+                    }
+                    await service.connectMember([member]);
+                  }
+                  const mySPAddress = await service.getDeviceAddress()
+                  await service.createPairingProcess([spAddress], mySPAddress, 1);
+
+                  // await service.sendPairingTx(spAddress);
+                } catch (e) {
+                  console.error('Failed to pair:', e);
+                }
+                }
+                this.qrScanner.stop(); // if you want to stop scanning after one code is detected
+            }
+
+            disconnectedCallback() {
+                if (this.qrScanner) {
+                    this.qrScanner.destroy();
+                }
+            }
+        }
+
+        customElements.define('qr-scanner', QrScannerComponent);

src/pages/home/home.ts

@@ -3,11 +3,8 @@ import Services from '../../services/service';
 import { addSubscription } from '../../utils/subscription.utils';
 import { displayEmojis, generateQRCode } from '../../utils/sp-address.utils';
 import { getCorrectDOM } from '../../utils/html.utils';
-
+import QrScannerComponent from '../../components/qrcode-scanner/qrcode-scanner-component';
-let resultContainer = document.getElementById('qr-reader-results');
+export {QrScannerComponent}
-let lastResult: any,
-  countResults = 0;
-
 export async function initHomePage(): Promise<void> {
   console.log('INIT-HOME');
   const container = getCorrectDOM('login-4nk-component') as HTMLElement
@@ -25,21 +22,6 @@ export async function initHomePage(): Promise<void> {
   const spAddress = await service.getDeviceAddress();
   generateQRCode(spAddress);
   displayEmojis(spAddress);
-
-  //// ATTENTION A SORTIR D'ICI
-  const notifBell = document.getElementById('notification-bell');
-  if (notifBell) addSubscription(notifBell, 'click', openCloseNotifications);
-}
-
-export function toggleMenu() {
-  let menu = document.getElementById('menu');
-  if (menu) {
-    if (menu.style.display === 'block') {
-      menu.style.display = 'none';
-    } else {
-      menu.style.display = 'block';
-    }
-  }
 }
 
 //// Modal
@@ -48,18 +30,9 @@ export async function openModal(myAddress: string, receiverAddress: string) {
   router.openLoginModal(myAddress, receiverAddress);
 }
 
-function openCloseNotifications() {
-  const notifications = document.querySelector('.notification-board') as HTMLDivElement;
-  notifications.style.display = notifications?.style.display === 'none' ? 'block' : 'none';
-}
-
 // const service =  await Services.getInstance()
 // service.setNotification()
 
-(window as any).toggleMenu = toggleMenu;
-(window as any).openModal = openModal;
-
-
 function scanDevice() {
   const container = getCorrectDOM('login-4nk-component') as HTMLElement
   const scannerImg = container.querySelector('#scanner') as HTMLElement;
@@ -75,90 +48,3 @@ function scanDevice() {
 (window as any).scanDevice = scanDevice;
 
 
-import QrScanner from 'qr-scanner';
-
-        class QrScannerComponent extends HTMLElement {
-          videoElement: any;
-          wrapper: any
-          qrScanner: any
-            constructor() {
-                super();
-                this.attachShadow({ mode: 'open' });
-                this.wrapper = document.createElement('div');
-                this.wrapper.style.position = 'relative';
-                this.wrapper.style.width = '150px';
-                this.wrapper.style.height = '150px';
-
-                this.videoElement = document.createElement('video');
-                this.videoElement.style.width = '100%';
-                document.body?.append(this.wrapper);
-                this.wrapper.prepend(this.videoElement);
-            }
-
-            connectedCallback() {
-                this.initializeScanner();
-            }
-
-            async initializeScanner() {
-              if (!this.videoElement) {
-                console.error('Video element not found!');
-                return;
-            }
-              console.log("🚀 ~ QrScannerComponent ~ initializeScanner ~ this.videoElement:", this.videoElement)
-                this.qrScanner = new QrScanner(this.videoElement, result => this.onQrCodeScanned(result),{
-                  highlightScanRegion: true,
-                  highlightCodeOutline: true,
-              });
-                console.log("🚀 ~ QrScannerComponent ~ initializeScanner ~ this.qrScanner:", this.videoElement)
-                
-                try {
-                    await QrScanner.hasCamera();
-                    this.qrScanner.start();
-                    this.videoElement.style = 'height: 200px; width: 200px'
-                  this.shadowRoot?.appendChild(this.wrapper)
-
-                } catch (e) {
-                    console.error('No camera found or error starting the QR scanner', e);
-                }
-            }
-
-            async onQrCodeScanned(result: any) {
-                console.log(`QR Code detected:`, result);
-                const data = result.data;
-                console.log("🚀 ~ QrScannerComponent ~ onQrCodeScanned ~ data:", data)
-                const scannedUrl = new URL(data);
-
-                // Extract the 'sp_address' parameter
-                const spAddress = scannedUrl.searchParams.get('sp_address');
-                console.log("🚀 ~ QrScannerComponent ~ onQrCodeScanned ~ spAddress:", spAddress)
-                if(spAddress) {
-                  const service = await Services.getInstance();
-                // Call the sendPairingTx function with the extracted sp_address
-                try { 
-                  const sharedSecret = await service.getSecretForAddress(spAddress);
-                  console.log("🚀 ~ QrScannerComponent ~ onQrCodeScanned ~ sharedSecret:", sharedSecret)
-                  if (!sharedSecret) {
-                    const member = {
-                      sp_addresses: [spAddress],
-                    }
-                    await service.connectMember([member]);
-                  }
-                  const mySPAddress = await service.getDeviceAddress()
-                  await service.createPairingProcess([spAddress], mySPAddress, 1);
-
-                  // await service.sendPairingTx(spAddress);
-                } catch (e) {
-                  console.error('Failed to pair:', e);
-                }
-                }
-                this.qrScanner.stop(); // if you want to stop scanning after one code is detected
-            }
-
-            disconnectedCallback() {
-                if (this.qrScanner) {
-                    this.qrScanner.destroy();
-                }
-            }
-        }
-
-        customElements.define('qr-scanner', QrScannerComponent);