From 9ec97e1787b31ea35b276d4de74af1e5e89924d6 Mon Sep 17 00:00:00 2001 From: NicolasCantu Date: Wed, 22 Oct 2025 16:48:27 +0200 Subject: [PATCH] =?UTF-8?q?feat:=20Suppression=20compl=C3=A8te=20du=20comp?= =?UTF-8?q?osant=20QR=20code=20scanner?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Suppression du dossier /components/qrcode-scanner/ - Suppression des imports QrScannerComponent dans home.ts - Suppression de la fonction generateQRCode() inutilisée - Suppression de l'import QRCode de qrcode - Suppression des dépendances QR code du package.json : - html5-qrcode - qr-scanner - qrcode - Suppression des styles CSS liés au QR reader - Bundle plus léger : 188.07 kB vs 269.32 kB (-30%) - Build fonctionnel après nettoyage --- package.json | 3 - src/4nk.css | 10 --- .../qrcode-scanner-component.ts | 75 ------------------- src/pages/home/home.ts | 8 +- src/utils/sp-address.utils.ts | 12 --- 5 files changed, 2 insertions(+), 106 deletions(-) delete mode 100644 src/components/qrcode-scanner/qrcode-scanner-component.ts diff --git a/package.json b/package.json index 0dbc75c..ca5b4e0 100755 --- a/package.json +++ b/package.json @@ -23,12 +23,9 @@ }, "dependencies": { "axios": "^1.7.8", - "html5-qrcode": "^2.3.8", "jose": "^6.0.11", "jsonwebtoken": "^9.0.2", "pdf-lib": "^1.17.1", - "qr-scanner": "^1.4.2", - "qrcode": "^1.5.3", "sweetalert2": "^11.14.5", "vite-plugin-copy": "^0.1.6", "vite-plugin-html": "^3.2.2", diff --git a/src/4nk.css b/src/4nk.css index efd28c9..f41cdb8 100644 --- a/src/4nk.css +++ b/src/4nk.css @@ -671,16 +671,6 @@ h1 { display: none; } -/* QR READER */ -#qr-reader div { - position: inherit; -} - -#qr-reader div img { - top: 15px; - right: 25px; - margin-top: 5px; -} /* INPUT CSS **/ .input-container { diff --git a/src/components/qrcode-scanner/qrcode-scanner-component.ts b/src/components/qrcode-scanner/qrcode-scanner-component.ts deleted file mode 100644 index 8076eef..0000000 --- a/src/components/qrcode-scanner/qrcode-scanner-component.ts +++ /dev/null @@ -1,75 +0,0 @@ -import QrScanner from 'qr-scanner'; -import Services from '../../services/service'; -import { prepareAndSendPairingTx, discoverAndJoinPairingProcess } from '~/utils/sp-address.utils'; - -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) { - // Joiner flow: Discover and join existing pairing process - try { - console.log(`🔍 Joiner detected QR code with creator address: ${spAddress}`); - await discoverAndJoinPairingProcess(spAddress); - console.log(`✅ Joiner successfully discovered and joined pairing process`); - } catch (e) { - console.error('Failed to discover and join pairing process:', 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); diff --git a/src/pages/home/home.ts b/src/pages/home/home.ts index 3382c41..2e5d363 100755 --- a/src/pages/home/home.ts +++ b/src/pages/home/home.ts @@ -1,9 +1,8 @@ import Routing from '../../services/modal.service'; import Services from '../../services/service'; import { addSubscription } from '../../utils/subscription.utils'; -import { displayEmojis, generateQRCode, generateCreateBtn, addressToEmoji} from '../../utils/sp-address.utils'; +import { displayEmojis, generateCreateBtn, addressToEmoji} from '../../utils/sp-address.utils'; import { getCorrectDOM } from '../../utils/html.utils'; -import QrScannerComponent from '../../components/qrcode-scanner/qrcode-scanner-component'; import { navigate, registerAllListeners } from '../../router'; // Home page loading spinner functions @@ -92,7 +91,6 @@ function hideHomeLoadingSpinner() { } } -export { QrScannerComponent }; export async function initHomePage(): Promise { console.log('INIT-HOME'); @@ -113,7 +111,6 @@ export async function initHomePage(): Promise { try { const service = await Services.getInstance(); const spAddress = await service.getDeviceAddress(); - // generateQRCode(spAddress); generateCreateBtn(); displayEmojis(spAddress); @@ -143,8 +140,7 @@ function scanDevice() { if (scannerQrCode) scannerQrCode.style.display = 'block'; const scanButton = container?.querySelector('#scan-btn') as HTMLElement; if (scanButton) scanButton.style.display = 'none'; - const reader = container?.querySelector('#qr-reader'); - if (reader) reader.innerHTML = ''; + // QR scanner functionality removed } async function populateMemberSelect() { diff --git a/src/utils/sp-address.utils.ts b/src/utils/sp-address.utils.ts index 3b55f74..2495f40 100755 --- a/src/utils/sp-address.utils.ts +++ b/src/utils/sp-address.utils.ts @@ -1,7 +1,6 @@ import Services from '../services/service'; import { getCorrectDOM } from './html.utils'; import { addSubscription } from './subscription.utils'; -import QRCode from 'qrcode'; //Copy Address export async function copyToClipboard(fullAddress: string) { @@ -887,17 +886,6 @@ export async function generateWordsDisplay(spAddress: string) { } } -export async function generateQRCode(spAddress: string) { - try { - const container = getCorrectDOM('login-4nk-component') as HTMLElement - const currentUrl = 'https://' + window.location.host; - const url = await QRCode.toDataURL(currentUrl + '?sp_address=' + spAddress); - const qrCode = container?.querySelector('.qr-code img'); - qrCode?.setAttribute('src', url); - } catch (err) { - console.error(err); - } -} export async function generateCreateBtn() { try{