Add block scan progress display and fix pairing HTML structure

**Motivations :**
- Afficher l'avancement des n° de blocks et % dans le champ message pour la page de scan des blocs
- Corriger le HTML du pairing qui était cassé (contenu mal injecté)

**Modifications :**
- block-sync.ts : Interception des messages 'Scan progress:' pour afficher le progrès en temps réel
- block-sync.ts : Mise à jour de l'interface avec currentBlock/totalBlocks et pourcentage
- block-sync.ts : Barre de progression dynamique basée sur le pourcentage de scan
- pairing.ts : Correction de l'injection du contenu HTML (mockContainer contient tout le contenu)
- pairing.ts : Simplification de la logique d'injection du contenu de home.html

**Pages affectées :**
- src/pages/block-sync/block-sync.ts : Affichage du progrès de scan en temps réel
- src/pages/pairing/pairing.ts : Correction de la structure HTML du pairing

src/pages/block-sync/block-sync.ts

@@ -197,11 +197,45 @@ document.addEventListener("DOMContentLoaded", async () => {
 
         console.log(`🔄 Starting real block scan from ${lastScan} to ${currentBlockHeight}...`);
 
+        // Intercepter les messages de progression du scan
+        let scanProgressInterval: NodeJS.Timeout | null = null;
+        let lastProgressMessage = '';
+
+        // Fonction pour intercepter les messages de progression
+        const originalConsoleLog = console.log;
+        console.log = (...args: any[]) => {
+            const message = args.join(' ');
+            if (message.includes('Scan progress:')) {
+                // Extraire les informations de progression
+                const progressMatch = message.match(/Scan progress: (\d+)\/(\d+) \((\d+)%\)/);
+                if (progressMatch) {
+                    const currentBlock = parseInt(progressMatch[1]);
+                    const totalBlocks = parseInt(progressMatch[2]);
+                    const percentage = parseInt(progressMatch[3]);
+                    
+                    // Mettre à jour l'interface avec les détails de progression
+                    updateStatus(`🔍 Synchronisation des blocs: ${currentBlock}/${totalBlocks} (${percentage}%)`, 'loading');
+                    updateProgress(60 + (percentage * 0.4)); // 60% à 100% pour la synchronisation
+                    
+                    // Mettre à jour les éléments de synchronisation
+                    updateSyncItem('blocksScanned', currentBlock.toString(), 'pending');
+                    updateSyncItem('blocksToScan', (totalBlocks - currentBlock).toString(), 'pending');
+                    
+                    lastProgressMessage = `Bloc ${currentBlock}/${totalBlocks} (${percentage}%)`;
+                }
+            }
+            // Appeler la fonction console.log originale
+            originalConsoleLog.apply(console, args);
+        };
+
         // Utiliser updateDeviceBlockHeight qui gère la synchronisation si nécessaire
         // Cette méthode vérifie si last_scan < currentBlockHeight et synchronise si nécessaire
         try {
             await services.updateDeviceBlockHeight();
             console.log('✅ Block scan completed successfully');
+            
+            // Restaurer la fonction console.log originale
+            console.log = originalConsoleLog;
 
             // Vérifier que la mise à jour a été sauvegardée
             const finalWallet = await services.getDeviceFromDatabase();
@@ -232,6 +266,8 @@ document.addEventListener("DOMContentLoaded", async () => {
                 throw new Error('Failed to verify wallet update - last_scan not found');
             }
         } catch (error) {
+            // Restaurer la fonction console.log originale en cas d'erreur
+            console.log = originalConsoleLog;
             console.error('❌ Error during block scan:', error);
             throw error;
         }

src/pages/pairing/pairing.ts

@@ -92,20 +92,16 @@ document.addEventListener('DOMContentLoaded', async () => {
     updateStatus('🔄 Initialisation du pairing...', 'loading');
 
     if (pairingContent) {
-      // Injecter seulement le HTML, le CSS est déjà chargé via le <link> dans le <head>
-      pairingContent.innerHTML = loginHtml;
-
       // Créer un conteneur simulant login-4nk-component pour getCorrectDOM
       const mockContainer = document.createElement('div');
       mockContainer.id = 'login-4nk-component';
       mockContainer.className = 'login-4nk-component';
+      
+      // Injecter le HTML dans le mockContainer
+      mockContainer.innerHTML = loginHtml;
+      
+      // Ajouter le mockContainer au contenu de pairing
       pairingContent.appendChild(mockContainer);
-
-      // Déplacer le contenu de pairing-container dans le mockContainer
-      const pairingContainer = pairingContent.querySelector('.pairing-container');
-      if (pairingContainer && mockContainer) {
-        mockContainer.appendChild(pairingContainer);
-      }
     }
 
     // Importer et initialiser la logique de pairing depuis home.ts