Synchronisation avec le réseau Bitcoin pour récupérer l'historique des transactions
- 🔄 Initialisation en cours...
+ 🔄 Initialisation de la synchronisation...
-
-
+
+
+
+
📊 Détails de la synchronisation
+
+ Hauteur de bloc actuelle:
+ En attente...
+
+
+ Date anniversaire:
+ En attente...
+
+
+ Blocs à scanner:
+ En attente...
+
+
+ Blocs scannés:
+ 0
+
+
+ Transactions trouvées:
+ 0
-
-
-
-
-
-
-
-
-
diff --git a/src/pages/block-sync/block-sync.ts b/src/pages/block-sync/block-sync.ts
index 0efaefd..c9f725c 100644
--- a/src/pages/block-sync/block-sync.ts
+++ b/src/pages/block-sync/block-sync.ts
@@ -1,21 +1,51 @@
import { checkPBKDF2Key, checkWalletWithRetries } from '../../utils/prerequisites.utils';
-import { createPageTemplate } from '../../utils/page-template.utils';
+import Services from '../../services/service';
document.addEventListener("DOMContentLoaded", async () => {
console.log("🔄 Block sync page loaded");
- // Initialiser le template de page
- const pageTemplate = createPageTemplate();
+ const status = document.getElementById("status") as HTMLElement;
+ const progressBar = document.getElementById("progressBar") as HTMLElement;
+ const continueBtn = document.getElementById("continueBtn") as HTMLButtonElement;
+
+ function updateStatus(message: string, type: 'loading' | 'success' | 'error') {
+ if (status) {
+ status.textContent = message;
+ status.className = `status ${type}`;
+ }
+ }
+
+ function updateProgress(percentage: number) {
+ if (progressBar) {
+ progressBar.style.width = `${percentage}%`;
+ }
+ }
+
+ function updateSyncItem(elementId: string, value: string, status: 'pending' | 'completed' | 'error' = 'pending') {
+ const element = document.getElementById(elementId);
+ if (element) {
+ element.textContent = value;
+ element.className = `sync-status ${status}`;
+ }
+ }
+
+ // Gestion du bouton continuer (définie avant le try pour être toujours disponible)
+ if (continueBtn) {
+ continueBtn.addEventListener('click', async () => {
+ console.log('🔗 Redirecting to pairing page...');
+ window.location.href = '/src/pages/pairing/pairing.html';
+ });
+ }
try {
// Vérifier les prérequis
console.log('🔍 Verifying prerequisites...');
- pageTemplate.updateStatus('🔍 Vérification des prérequis...', 'loading');
+ updateStatus('🔍 Vérification des prérequis...', 'loading');
const pbkdf2KeyResult = await checkPBKDF2Key();
if (!pbkdf2KeyResult) {
console.log('⚠️ PBKDF2 key not found, redirecting to security-setup...');
- pageTemplate.updateStatus('⚠️ Redirection vers la configuration de sécurité...', 'loading');
+ updateStatus('⚠️ Redirection vers la configuration de sécurité...', 'loading');
setTimeout(() => {
window.location.href = '/src/pages/security-setup/security-setup.html';
}, 1000);
@@ -25,7 +55,7 @@ document.addEventListener("DOMContentLoaded", async () => {
const wallet = await checkWalletWithRetries();
if (!wallet) {
console.log('⚠️ Wallet not found, redirecting to wallet-setup...');
- pageTemplate.updateStatus('⚠️ Redirection vers la configuration du wallet...', 'loading');
+ updateStatus('⚠️ Redirection vers la configuration du wallet...', 'loading');
setTimeout(() => {
window.location.href = '/src/pages/wallet-setup/wallet-setup.html';
}, 1000);
@@ -34,7 +64,7 @@ document.addEventListener("DOMContentLoaded", async () => {
if (!wallet.sp_wallet?.birthday || wallet.sp_wallet.birthday === 0) {
console.log('⚠️ Birthday not configured, redirecting to birthday-setup...');
- pageTemplate.updateStatus('⚠️ Redirection vers la configuration de la date anniversaire...', 'loading');
+ updateStatus('⚠️ Redirection vers la configuration de la date anniversaire...', 'loading');
setTimeout(() => {
window.location.href = '/src/pages/birthday-setup/birthday-setup.html';
}, 1000);
@@ -42,18 +72,11 @@ document.addEventListener("DOMContentLoaded", async () => {
}
console.log('✅ All prerequisites verified for block sync');
- pageTemplate.updateStatus('✅ Prerequisites verified', 'success');
-
- // Afficher les étapes de synchronisation
- pageTemplate.showSteps();
- pageTemplate.updateStep('currentBlock', 'En attente...', 'pending');
- pageTemplate.updateStep('birthday', wallet.sp_wallet.birthday.toString(), 'completed');
- pageTemplate.updateStep('lastScan', 'En attente...', 'pending');
- pageTemplate.updateStep('syncStatus', 'En attente...', 'pending');
+ updateStatus('✅ Prerequisites verified', 'success');
// Initialiser les services
console.log('🔄 Waiting for services to be ready...');
- pageTemplate.updateStatus('🔄 Initialisation des services...', 'loading');
+ updateStatus('🔄 Initialisation des services...', 'loading');
let services: Services;
let attempts = 0;
@@ -83,7 +106,7 @@ document.addEventListener("DOMContentLoaded", async () => {
const currentBlockHeight = services.getCurrentBlockHeight();
if (currentBlockHeight === -1) {
console.log('⚠️ Block height not available, connecting to relays...');
- pageTemplate.updateStatus('⚠️ Connexion aux relays...', 'loading');
+ updateStatus('⚠️ Connexion aux relays...', 'loading');
// Attendre que les services se connectent aux relays
await services.connectAllRelays();
@@ -99,19 +122,23 @@ document.addEventListener("DOMContentLoaded", async () => {
console.log(`📊 Sync info: current=${finalBlockHeight}, birthday=${birthday}, lastScan=${lastScan}, toScan=${toScan}`);
- // Mettre à jour les étapes
- pageTemplate.updateStep('currentBlock', finalBlockHeight.toString(), 'completed');
- pageTemplate.updateStep('lastScan', lastScan.toString(), 'completed');
+ // Mettre à jour l'interface
+ updateSyncItem('currentBlock', finalBlockHeight.toString(), 'completed');
+ updateSyncItem('birthday', birthday.toString(), 'completed');
+ updateSyncItem('lastScan', lastScan.toString(), 'completed');
if (toScan === 0) {
console.log('✅ Wallet already synchronized');
- pageTemplate.updateStatus('✅ Wallet déjà synchronisé', 'success');
- pageTemplate.updateStep('syncStatus', 'Synchronisé', 'completed');
+ updateStatus('✅ Wallet déjà synchronisé', 'success');
+ updateSyncItem('blocksToScan', '0', 'completed');
+ updateSyncItem('blocksScanned', '0', 'completed');
+ updateSyncItem('transactionsFound', '0', 'completed');
- // Afficher le bouton et rediriger automatiquement
- pageTemplate.showContinueButton('Aller au pairing', () => {
- window.location.href = '/src/pages/pairing/pairing.html';
- });
+ // Activer le bouton et rediriger automatiquement
+ if (continueBtn) {
+ continueBtn.disabled = false;
+ continueBtn.textContent = 'Aller au pairing';
+ }
// Auto-redirection après 3 secondes
setTimeout(() => {
@@ -122,9 +149,9 @@ document.addEventListener("DOMContentLoaded", async () => {
}
// Afficher la barre de progression
- pageTemplate.showProgress();
- pageTemplate.updateStatus('🔄 Synchronisation en cours...', 'loading');
- pageTemplate.updateStep('syncStatus', 'En cours...', 'pending');
+ updateProgress(0);
+ updateStatus('🔄 Synchronisation en cours...', 'loading');
+ updateSyncItem('blocksToScan', toScan.toString(), 'pending');
// Intercepter les messages de progression du scan
let scanProgressInterval: NodeJS.Timeout | null = null;
@@ -143,12 +170,12 @@ document.addEventListener("DOMContentLoaded", async () => {
const percentage = parseInt(progressMatch[3]);
// Mettre à jour l'interface avec les détails de progression
- pageTemplate.updateStatus(`🔍 Synchronisation des blocs: ${currentBlock}/${totalBlocks} (${percentage}%)`, 'loading');
- pageTemplate.updateProgress(60 + (percentage * 0.4)); // 60% à 100% pour la synchronisation
+ updateStatus(`🔍 Synchronisation des blocs: ${currentBlock}/${totalBlocks} (${percentage}%)`, 'loading');
+ updateProgress(percentage);
// Mettre à jour les éléments de synchronisation
- pageTemplate.updateStep('blocksScanned', currentBlock.toString(), 'pending');
- pageTemplate.updateStep('blocksToScan', (totalBlocks - currentBlock).toString(), 'pending');
+ updateSyncItem('blocksScanned', currentBlock.toString(), 'pending');
+ updateSyncItem('blocksToScan', (totalBlocks - currentBlock).toString(), 'pending');
lastProgressMessage = `Bloc ${currentBlock}/${totalBlocks} (${percentage}%)`;
}
@@ -165,14 +192,17 @@ document.addEventListener("DOMContentLoaded", async () => {
// Restaurer la fonction console.log originale
console.log = originalConsoleLog;
- pageTemplate.updateStatus('✅ Synchronisation terminée', 'success');
- pageTemplate.updateProgress(100);
- pageTemplate.updateStep('syncStatus', 'Terminé', 'completed');
+ updateStatus('✅ Synchronisation terminée', 'success');
+ updateProgress(100);
+ updateSyncItem('blocksScanned', toScan.toString(), 'completed');
+ updateSyncItem('blocksToScan', '0', 'completed');
+ updateSyncItem('transactionsFound', '0', 'completed');
- // Afficher le bouton et rediriger automatiquement
- pageTemplate.showContinueButton('Aller au pairing', () => {
- window.location.href = '/src/pages/pairing/pairing.html';
- });
+ // Activer le bouton et rediriger automatiquement
+ if (continueBtn) {
+ continueBtn.disabled = false;
+ continueBtn.textContent = 'Aller au pairing';
+ }
// Auto-redirection après 3 secondes
setTimeout(() => {
@@ -184,14 +214,14 @@ document.addEventListener("DOMContentLoaded", async () => {
// Restaurer la fonction console.log originale en cas d'erreur
console.log = originalConsoleLog;
console.error('❌ Error during block scan:', error);
- pageTemplate.updateStatus(`❌ Erreur lors de la synchronisation: ${(error as Error).message}`, 'error');
- pageTemplate.updateStep('syncStatus', 'Erreur', 'error');
+ updateStatus(`❌ Erreur lors de la synchronisation: ${(error as Error).message}`, 'error');
+ updateSyncItem('blocksToScan', 'Erreur', 'error');
throw error;
}
} catch (error) {
console.error('❌ Error in block sync page:', error);
- pageTemplate.updateStatus(`❌ Erreur: ${(error as Error).message}`, 'error');
+ updateStatus(`❌ Erreur: ${(error as Error).message}`, 'error');
// Rediriger vers la page appropriée selon l'erreur
const errorMessage = (error as Error).message;
diff --git a/src/pages/pairing/pairing.html b/src/pages/pairing/pairing.html
index 6cc8a19..c5b4e34 100644
--- a/src/pages/pairing/pairing.html
+++ b/src/pages/pairing/pairing.html
@@ -67,156 +67,9 @@
color: #c62828;
}
- .progress-container {
- margin: 20px 0;
- }
-
- .progress-bar {
- width: 100%;
- height: 8px;
- background: #e0e0e0;
- border-radius: 4px;
- overflow: hidden;
- }
-
- .progress-fill {
- height: 100%;
- background: linear-gradient(90deg, #4caf50, #8bc34a);
- width: 0%;
- transition: width 0.3s ease;
- }
-
- .steps-container {
- margin: 20px 0;
- }
-
- .step-item {
- display: flex;
- align-items: center;
- padding: 10px 0;
- border-bottom: 1px solid #eee;
- }
-
- .step-item:last-child {
- border-bottom: none;
- }
-
- .step-label {
- flex: 1;
- font-weight: 500;
- color: #333;
- }
-
- .step-value {
- font-weight: 600;
- color: #666;
- }
-
- .step-status {
- margin-left: 10px;
- padding: 4px 8px;
- border-radius: 4px;
- font-size: 0.8rem;
- font-weight: 500;
- }
-
- .step-status.pending {
- background: #fff3cd;
- color: #856404;
- }
-
- .step-status.completed {
- background: #d4edda;
- color: #155724;
- }
-
- .step-status.error {
- background: #f8d7da;
- color: #721c24;
- }
-
- .continue-btn {
- width: 100%;
- padding: 15px;
- background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
- color: white;
- border: none;
- border-radius: 8px;
- font-size: 1.1rem;
- font-weight: 600;
- cursor: pointer;
- transition: transform 0.2s ease, box-shadow 0.2s ease;
- margin-top: 20px;
- }
-
- .continue-btn:hover:not(:disabled) {
- transform: translateY(-2px);
- box-shadow: 0 8px 25px rgba(102, 126, 234, 0.3);
- }
-
- .continue-btn:disabled {
- background: #ccc;
- cursor: not-allowed;
- transform: none;
- box-shadow: none;
- }
-
.content-area {
min-height: 200px;
}
-
- /* Styles spécifiques au pairing */
- .pairing-container {
- background: #f8f9fa;
- border-radius: 8px;
- padding: 20px;
- margin: 20px 0;
- }
-
- .pairing-card {
- background: white;
- border-radius: 8px;
- padding: 20px;
- box-shadow: 0 2px 10px rgba(0,0,0,0.1);
- }
-
- .card-header h2 {
- margin: 0 0 10px 0;
- color: #333;
- font-size: 1.5rem;
- }
-
- .card-description {
- color: #666;
- margin: 0 0 20px 0;
- }
-
- .status-indicator {
- background: #e3f2fd;
- color: #1976d2;
- padding: 15px;
- border-radius: 8px;
- text-align: center;
- margin: 20px 0;
- }
-
- .account-actions {
- margin-top: 20px;
- }
-
- .danger-btn {
- background: #dc3545;
- color: white;
- border: none;
- padding: 10px 20px;
- border-radius: 6px;
- cursor: pointer;
- font-size: 0.9rem;
- }
-
- .danger-btn:hover {
- background: #c82333;
- }
@@ -228,23 +81,9 @@
🔄 Initialisation en cours...