feat: Suppression complète du composant QR code scanner

- 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
This commit is contained in:
NicolasCantu 2025-10-22 16:48:27 +02:00
parent d7e2e1a648
commit 9ec97e1787
5 changed files with 2 additions and 106 deletions

View File

@ -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",

View File

@ -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 {

View File

@ -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);

View File

@ -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<void> {
console.log('INIT-HOME');
@ -113,7 +111,6 @@ export async function initHomePage(): Promise<void> {
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></qr-scanner>';
// QR scanner functionality removed
}
async function populateMemberSelect() {

View File

@ -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{